At the Fronteers Conference 2010 in Amsterdam, a smart guy with the name of Stephen Hay spoke about “Real-word responsive Design”. Why should that topic be interesting still today? And why was that talk assigned to me by Eric Eggert, teacher of the module “Accessibility and Multiscreen Design” within the master course Content Strategy at the FH Joanneum?
Since 2010, the percentages of mobile devices have been rising, and with all the different screen sizes available today, designers are facing a big challenge. How can you design a website, when you don’t know the size of the screen that will display the content later? At present, there are so many different devices with different screens available. And even if you could manage to handle all the actual screen sizes, who says that Apple will not come up with a new size for the iPhone 8? So, in 2010, a new way of thinking started – and it has been influencing the work of us content strategists even today: “Embrace uncertainty” (Stephan Hay) and create a flexible way.
Media queries – Silver bullet or Fool’s gold
The best way to solve the problems with different screen sizes are media queries, as Ethan Marcotte’s first demonstrated in his article for “A List Apart”. Media queries are so called “if” scenarios: If the screen is 1440px, the browser should display the content of a web page in desktop mode. If the screen is 600px, the browser should choose another arrangement for the content (e.g. instead of displaying two columns side by side, the device shows them one below each other). And for sizes in between, choose an adaptive layout: shrink the content in a way that it fits the screen accordingly. Fortunately for us, media queries are now supported in all browsers.
So, in 2010, people wondered if media queries are a “silver bullet” or “Fool’s gold”. It was not clear, if media queries would solve all the future problems with one rule, or not. In his talk, Stephan Hay stated very clearly that media queries are neither, but a tool to create more flexible forms to display content.
What do you need to create a “Real-world Responsive Design”?
First, we need to understand that layout is not design. A lot of people think, that colours, fonts, images… everything which can be seen, this has to be design. But this is just how a website looks like, how the layout of a website looks like. Real design goes further than that, and includes content:
“Design is the method of putting form and content together.“ Paul Rand
Content… But for whom? The users, indeed! Today this is a well-known aspect of Content Strategy within all its related disciplines, such as usability and user research – but this was discovered already many years ago. In 2010, the focus was often only on layout. The users (who they are, what are they looking for) were regularly forgotten.
In his talk, Hay claims that every responsive web design should start with these questions:
- Who are the users?
- What is their purpose?
- What are their circumstances?
- What will they (need to) do?
It makes a big difference if you are looking at a mobile website running late on a train, and trying to buy a last-minute ticket, or if you are sitting at work with a nice cup of coffee, having a look at the different events coming up in your town. Consider these circumstances – as well as all other behaviours, needs and goals of your users. The user experiences shape the design choices – e.g. if we are in hurry running late on a train, everything from choosing a ticket to booking needs to be very clear, simple and fast.
Also, still relevant today: start with the key scenarios. What is the basic information your users need? Place it on top of your page, both on mobile and on desktop. Then pour in your additional content. This method is called “progressive enhancement” and helps you to prioritize your content.
The Technical Side of Real-world Responsible Design
How can you make sure that the server recognizes the actual screen size of a device? And that it delivers the data accordingly to the browsers’ sizes? This can be ensured by “viewport”. You can imagine that with viewport you are telling the browser of the respective device: “Listen! The layout viewport is going to be exactly the device width”. And till now in 2017, this is the only way to know the exact device width, when you are using media queries and doing design.
One last remark: now it might be tempting to start producing many different fixed designs for different device sizes. For example with numerous fixed grids, for every wished pixel-size. Don’t do that. “Embrace uncertainty” (Stephan Hay) and create your CSS in a flexible way by combining viewport, a few media queries and fluid grids. Place your divs in boxes, and let your media queries arrange the divs according to the screen size in a horizontal or vertical way. Then you are best prepared for whatever challenges the future might bring.