Old Blog – But the start of responsive design, so a little bit of history!

Standard screen sizes when I first started designing websites were 800 pixels going up to 1024 pixels. Now web designers are designing for screens that are a whole multitude of sizes. I don’t even want to hazard a guess at how many screen sizes there are. This is why the role of a web designer has changed so much. In this article, I look at designing for different screen sizes and good sources of information for responsive design.

Web designers have to create websites that go across all screen sizes and we are having to change our complete design process when creating a website. With responsive design being relatively new, and bearing in mind that screen sizes in the future are only going to get more varied, our design processes have to consistently be tweaked, tested, and researched. (I’m trying to ignore the rumour of a watch sizes screen.)

Designing for smaller devices first makes a lot of sense. Users coming on to websites do not want a watered-down version of a website. There are a few people that may argue against this – but really they are a minority. With a mobile design we are not trying to put all the information ‘above the fold’ although we are trying to prioritise information. Once the content has been prioritised for mobile, it has also determined the content for any size screen.

That said, if we do design for smaller devices first we must not fall in to the trap that we are designing for mobile, tablet, and desktop, usually 320px 768px 1024 px. We are designing for hundreds of screen sizes. Some mobile screens are bigger than tablet screens and some tablet screens are bigger than desktop screens. We are designing for touch screens as well as desktop computers. If we are designing for mobile first we are concentrating on content first. We then need to think about the design on larger screens and where the breakpoints should go. And this should be according to the content, not the screen size.

As well as designing for different size screens, we are designing for different situations. Pre smartphones and tablets we pretty much knew that most people were viewing websites from a computer – most likely indoors. However, with tablets and smartphones, the user can be anywhere. The user could be in a busy shopping centre trying to find a quick snippet of information, even more reason to design with bite-sized chunks of information. The user could be online shopping on a tablet whilst watching TV, more reason to provide easy to digest information. We are designing for a multitude of environments and screen sizes. This means that there is more call for websites to be user-friendly as well as engaging.

Like everything, there is not one rule for every website. Websites with a lot of content, think Amazon, may be better off with an adaptive design and separate mobile site – this is mainly due to the sheer amount of content on Amazon.

Luke Wroblewski is the name everyone is talking about for mobile design. Luke’s book Mobile First, alongside Ethan Marcotte’s Responsive Web Design are the best books I have read on the subject, and books I am often referring to time and time again.