phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Should Designers Now Make Responsive Websites as Standard?

When I first started making websites, we were basically just evolving from adding style code to the HTML file rather than adding it neatly to a separate CSS file and linking to it. As soon as we managed to put that one to bed, the looming horror of multi-sized screens became a reality (or nightmare if you prefer!) leaving us with more work to do to get the same end result – a website that works well.

responsive web design

Users Have Little Patience

It’s a sad fact that the only people that are really bothered with the actual design of a website are the designers and the owners – all the user wants is something that loads quickly and is easy to navigate. Of course, a bad design puts everyone off, but most websites out there work¬†fine.

The trend has swiftly moved from complex, design-heavy sites to more open, space filled¬†sites with muted colours. Just as I master a great technique for a fading hover button (when you hover your mouse over the button, it smoothly changes colour), a fair proportion of of users move away from desktops and mouses to small devices and touchscreens – fading hover buttons might be nice, but they don’t work on touchscreens so well. The simpler look of modern websites of course, helps the designer trying to make them work responsively.

Standard Website Widths

But that’s not all, the generally accepted width of a website has changed from around 800 pixels wide to an accepted 960px wide – but now devices range from 2000px wide down to around 460px or even 320px. So what do we do with our design templates now?

Designing a site that is the same width is simple for a designer – there are no variables. But as soon as we start to take into account iPhones, Android smart phones and Macbooks and tablets (the list goes on) then we have a choice.

We either leave it as is at 960px wide (it will work perfectly well on most devices) with the defence that we are designing primarily for desktop computers, or we have to bite-the-bullet and start doing responsive designs.

Responsive Website Requirements

A responsive website design will shift and fluidly fill the required space that your screen dictates. But it takes more time and thought and is not entirely simple. For our site, Fizz Web Design, we use a method that directs users of smartphones to a simplified replica of the main site – the presumption being that if a client wants a non-nonsense quick view of what we do, who we are or just a phone number, they can get it without pinching and zooming in on their mobile device. it’s worth reading the Smashing Magazine article explaining the concept of responsive web design.

Calling Different Stylesheets & WordPress

The other way to do it is to again, use code to sense the device the user is on and load a different batch of CSS style code to render the site user-friendly on a smartphone for example. Thank goodness for those separate stylesheets!

Another method is to use a tried and tested WordPress template for each site and tweak the design, making sure the template is already of a responsive design. Lazy maybe but there is still a ton of work that goes into such sites.

The Future & Rising Costs

Eventually every designer worth his salt will have to offer responsive design as a matter of course – that day is the next big thing looming – but for now the client still has to ask to make sure they get this full service.

And what of cost? I suspect that this will put the cost up a fair bit, as it takes almost twice as long to to, but we will see. because of this, the designer offeriing a cut-price service is not always going to be the best designer to give your site a full responsive makeover.

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , ,

Leave a Reply

Please complete the sum so we know you\'re a human... *