Search tips

t:+44 (0)1787 319393 info@netxtra.net

Home

Responsive Web Design - building a website for all screen sizes

Until recently, it's been fairly standard practice, in web development circles, for designers to mock-up new websites using a graphics package, have the client sign off those designs, for the developer to then build the approved site, making it appear as close as possible to the signed off design. This approach benefited everyone in that it formed a rigid contract for all parties and one that all concerned could adhere to.

This methodology worked well when you knew that the resulting website's visitors would be looking at your site using roughly similarly sized browsing windows. Of course, until recently this assumption held relatively true, but as more and more people now use a whole myriad of browsing devices - from PC's and mobile phones to televisions and tablets, the range of screen sizes and device capabilities is growing at an ever-increasing rate.

As a result of this spiraling growth in devices and their demands, the workload for the developer has become increasingly difficult, with many now asking the question "Does a website that looks the same on a mobile phone as a PC, really provide the optimal solution for the customer?"

Size matters

It's clear that websites with typically three columns of content work fine on a standard landscape oriented desktop display with a width of over 1000 pixels. However, on a mobile phone that is typically only approximately 400 pixels wide, those columns start to look awfully narrow, images suddenly take up a lot of screen space and a line of text may only be a few words long!

What's more, the issue of display resolutions is also highlighting a problem that has always existed, but has largely been ignored by the web development community. HTML, the language used for building websites, is a markup language and not a layout one. It's only supposed to describe what the content is (i.e. a header, a paragraph, a link, etc), with the browser using that information to display it in a way that makes sense on the user's device. A good example of this are text-only and audio-based browsers. The browser makes the decisions about the way the content is given or displayed, allowing the user to conveniently access it on any chosen device. This is one of the main reasons for HTML being so successful. It's about providing content to users in a way that is convenient for them - it's not about serving content in a way that providers decide is best for users.

What worked once, doesn't anymore!

Web developers have been pretty good at subverting things like this over the years and have a bewildering array of tricks up their sleeve to make sites behave exactly the way the mockups say they should. The most common technique is to pretend that the web page is just like a newspaper page and give it a fixed width - typically around 960 to 1000 pixels. That way, the developer starts with a known size, with everything laid out within it to appear as close to the mockups as is reasonably possible.

Of course, the problem we have now is that we can no longer get away with assuming a fixed page size and then expect it to work on devices with widths of between 400 pixels for a lower end smartphones, and 2000 pixels or more for high-end desktop machines. If you make the page narrower, it will fit on a smartphone screen but at the same time, you're not making good use of all that lovely width you'd get on a larger screen of, say, a PC. And if you stick to current sizes, or bigger, it simply won't fit on a small screen and thus will require the reader to continually scroll around and zoom in.

So what's the solution?

First and foremost, developers need to get away from the idea that websites should match mockups pixel by pixel. Mockups are only supposed to give a 'feel' for the style of the site and an idea of the way that all of the elements on the page will fit and work together.

At this point, let me introduce the concept Responsive Web Design. At netXtra we work with our clients to understand how each and every user will view the site, and on what devices. We can then optimise the format of each page for a range of different devices. So then when accessed by the user, the site recognises the device being used and renders the page accordingly.

Ultimately, developers should focus more on designing each element on a page, so that they can get the 'feel' and usability exactly right, rather than worry about whether the gap between x and y should have been, say, 10 or 11 pixels. Developers also need to educate their clients about this process and why pixel perfect sites are now unrealistic in the modern web environment.

Developers also need to start thinking more about how websites will work across all of these new and varied devices. In doing so, they need to consider what they can do to improve their designs, the layouts used, and also think more about the capabilities of a user's browser, to help them tailor the web pages accordingly. A responsive design approach ticks all of these boxes and more. It means that users and their devices are now rightly at the forefront of website design, development and usability... which can only be a good thing.

Where can I see/test this?

This exercise of making a website responsive involves looking at the different screen resolutions and determining what happens at each ‘snap point’. A snap point is where the screen resolution changes and less or more is displayed depending on the screen resolution/width available.

The screen as such is split into a 12 column layout and then depending on the snap point, it drops down from 12 to 8 columns, 8 to 4 etc. You can demonstrate this on our website by making the screen smaller and larger.

    Responsive Design

 

For more information about how netXtra can optimise your next website using responsive web design, call us today on 01787 319393. Alternatively, you can get in touch via the form on our Contact page.

1 = Not useful5 = Very useful
Avg. rating (3.3 )
Back to top