Say responsive web design to a room full of designers and you’re liable to get a roomful of groans. So what is responsive web design and why is it such a nightmare?

So, what is responsive web design?

 

Responsive web design means making websites which change according to the device the user is using. For example, a website can detect if it’s being viewed on a mobile device and display a layout which has been designed accordingly.

Responsive web design will avoid the need for scrolling, zooming and resizing by the user.

And why is it such a nightmare?

The reason it’s such a nightmare is that the number of devices and technologies are constantly changing, so it’s almost impossible to create something that works across all platforms. Creating a design that works elegantly across various browsers, screen sizes and resolutions and takes advantage of the latest sexy, slick scripts but doesn’t break on clunky ancient machines can eat up days and weeks.

So, should we be using it or not?

My answer to almost any question like this is – it depends. It depends on the budget, and therefore time available for the project, and how serious it is. In an ideal world you’ll have enough time to make the perfect website that will work across all platforms (until tomorrow, when another one comes out). However, if the client’s budget is too tight, then you have to compromise.

For more advice about basic legal requirements for websites and SEO, check out our resource bank.

Here are our top five tips for web designers who are just starting out:

Keep it Simple

It can be tempting to put something in just because you can, not because it's right. This tends to lead to animated gifs, flash banners, scrolling marquee tags, loads of different fonts and basically a horrible mess that is a confusing turn off for visitors. Try to avoid including anything that doesn't have a clear purpose, and keep the design clean and simple.

Check the website on a range of browsers

Firefox, Internet Explorer, Safari and  Chrome all interpret code is slightly different ways and it's worth checking your design on each of them to make sure nothing breaks. These days lots of people use mobiles to view websites as well, so check its not impossible on a smaller screen.

Focus on the visitor

Your starting point should be what the visitor wants, not what you want to tell them. This means being careful about using jargon or any terms or concepts they might not understand, and thinking about their objectives and how they might move around your site.

Make sure the structure and navigation is clear and consistent

The main navigation should be identical on every page, and ideally every page should be able to be reached from the main navigation. If there are a lot of pages, then use dropdowns. The exception is if you have large resource banks or ecommerce stores with hundreds of pages, but in this case consistency and clarity is even more important.

Don't have autoplaying music

This is one of the biggest turn-offs for visitors, who might be browsing at work, or at the very least might be playing their own music, which yours will conflict with.

For more advice about good and bad web design and SEO, check out our resource bank.

If you're looking to hire a web designer - click here.

What are Cascading Style Sheets or CSS?

A cascading style sheet is a document which is part of any modern website. As a normal user, you won’t see it directly as you browse the website, but you will definitely see its effects.

The style sheet gives design direction to the website elements, telling it what colours, fonts and sizes to use, where to put various elements, and hundreds of other visual elements.

By using a style sheet to contain this information it means we don’t have to specify these things on each of the individual pages – which would lead to a lot of repeated code and a nightmare if we ever wanted to change – say – the background colour.

By swapping out one style sheet for another, you can completely change the look of a website so as to make it unrecognisable.

There are various ‘standard’ tags you can use in style sheets which will work in any website at all, but if you find that too limiting you can also make up your own brand new ‘classes’ and ‘ids’ which you can apply willy-nilly wherever you like.

Because you may have elements nested within each other, they may end up with multiple styles applying to the same item – for example, a paragraph of text. This is where the ‘cascading’ bit comes in. CSS sheets have priority and the closer to the element, or alternatively, the lower down the sheet, the high priority it will be.

Cascading Style Sheets will make even the most basic website easier to work with and more elegant and at the top end of the scale they can be used to make smart, responsive websites that do all kinds of clever things.

If you want to learn more about cascading style sheets and have a more detailed and at the same time straightforward explanation of exactly the role they play and why they’re so awesome go and read the full article on cascading style sheets.

If you’ve found this article useful you might want to check out our resource bank, which includes articles about why you shouldn’to utsource your web design to India, whether you should put music on yoursite (No! A thousand times no!), all about web hosting – and, you’ve guessed it – much more.

For a few years now, BT and Yell have pursued a hard sell in getting UK sole traders and small business owners to purchase one of their websites.

They use aggressive marketing techniques and make promises they don't deliver on, while supplying a poor quality product that looks cheap at first glance, but in the long term ends up being quite pricey - certainly more than it's worth.

This is a shortened version of the full article, which goes into a lot more detail about the points below. If you want to read The Truth about websites from BT and Yell, click here.

Anything we can put up on this blog will be a drop in the ocean compared to the thousands of cold calls and massive marketing spend these large companies have, but we thought we'd write a blog post to try to warn anyone who's considering buying a website from BT or Yell - based on our own experiences with their marketing department and stories that have been relayed to us by business owners we've met.

It's understandable that sole traders and small businesses have a limited budget, so can't necessarily afford a full bespoke website from a design agency (where it may start at around £600+vat) for a decent website, but our advice would be to avoid these particular companies at all costs.

If you want a cheap website, then it's worth considering one of the free blog platforms, such as Blogger or Wordpress, or using a service like Wix or Mr Site. These services can help you get something cheap and cheerful online for free or very cheap - and it can't be any worse than the rubbish you'll pay hundreds of pounds per year to Yell or BT for.

Or, if you have a little bit more money to spend, check out our web design services ; )

The core problems with BT and Yell's web design service are fourfold. They start with a relentless hard sell, which is no way to do business. They use production line templates and simply stuff the content in without any care or pride in theit work. The staff are unskilled and spout jargon with only the vaguest idea of what they're saying and the ongoing service is poor to nonexistent - basically, once they've got your money, you're of no interest to them.

That's the business model they have in order to get a large throughput to make it worth charging low prices while still making huge profits. We shouldn't be surprised that large companies behave in this way - but it's not going to do you any favours if you're the little guy. To read our explanations of these four sections in more detail, check out the full article about BT and Yell websites.

And, if you found this article useful, you may want to check out our web design and SEO resource bank.

We've designed a sexy new infographic to visually describe the process of web design we go through, from conulsultation and planning to concept design, development, launch and of course our ongoing maintenance and promotion.

Visit our site to see the web design process infographic at full size and find out more about us and what we do.