From big to small

In most recent times monitors have increased in size and 21 inch monitors and bigger are very common. This allowed web designers to build websites that show more information at a time to the user and to use striking images in their layout.
Nowadays many websites are having big image slides at the entree and are using big’n’bold fonts. The content is split up in different columns and there is so much content on one page that the mouse wheel has to be oiled properly.

An era of new mobile devices which allowed surfing through the web adequately changed all. Sure, it is easy viewing and navigating the websites with them. But all that zooming and dragging ends in a bad user experience. Especially, if there are elements that are not or just barely accessible by touch interfaces (such as mouse-over menus). Therefore, a lot of companies brought up special mobile sites that were developed exclusively for that new screen size.

But new devices appeared with lots of different resolutions, and every one of these mobile devices can be used in portrait and landscape mode, which would end in an endless development of different mobile sites.

The solution – be responsive

To pay attention to this phenomenon, a new thinking of web design is needed. Today a good web site has to be flexible for the use of different screen resolutions. This new trend is called Responsive Web Design. Thus there is no need to completely redesign the website for each resolution, but the single website has to respond to the user’s device. But what does “respond” mean in this case?

A website can respond in several ways. The most effective way is to hide elements like banners, info boxes and graphical elements completely. Another way to respond is to make the layout flexible to the screen. This means that images don’t have a fixed width, but are growing or shrinking with the screen boundaries (e.g. header images). With special techniques it is possible to load smaller sized versions of the images, so the website will be loaded much faster.

Furthermore, adjoined contents can be reranged to single column to fit most mobile devices dimension. At last but not least, elements and fonts that were designed for large screens can be restyled to more space-saving elements.

And the good thing is: Responsive Web Design is easy to implement from the technical point of view, assume the website structure was set up appropriately, which includes grid layouts instead of table layouts etc. Furthermore, no JavaScript is used. All what is needed is a so-called Media Query (www.w3.org/TR/css3-mediaqueries) and a CSS file that restyles the layout for smaller devices.

For example, let’s use a special “mobile.css” style sheet for resolutions lower than 480px (e.g. iPhones). So the HTML Media Query would look like this:


  <link href="mobile.css" media="screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"/>

Additionally to the ordinary media type “screen” a “max-device-width” can be defined. This condition can also be set for “device-width” and “orientation” (landscape/portrait). This is possible in an existing style sheet too, as following:


@media only screen and (max-device-width: 480px) {
  /* style content */
}

Most browsers are supporting Media Queries. The most well-known exceptions are the Internet Explorer older than version 9. Regarding browsers on mobile devices this is no problem as mobile devices are usually updated well and have originally modern browsers. If there is nevertheless support for older Internet Explorer versions needed, a special JavaScript framework can fix this for you (http://code.google.com/p/css3-mediaqueries-js/).

We are responsive

Normally, it is good to take account of Responsive Web Design at the beginning of the conceptual phase, so the layout can be built for lower screens and then elements are added step-by-step for larger screen resolutions.

But it is also possible to take an existing website and make it responsive. How easy this undertaking would be depends on the structure and the content of the website.

We did this for example for one of our product sites on www.abstractsmanager.com. At the beginning, the structure had to be analysed and weighted for the importance of the different elements.

abstractsmanager.com website

As mentioned before, there are several ways to make a site responsive. So we decided to remove the upper teaser and remove some additional info, which is not crucial to know. For better overview, the different columns have been rearranged among each other and use now the full available width of the device. At last, some parts of the footer content were stashed. The sitemap in the footer is still there in the lower resolutions, as it is a good user experience because the user doesn’t have to scroll up again to navigate to other pages.

A big issue was that the title background graphics all had fixed sizes, which does not allow adjusting the width to the screen width. Fortunately, modern browsers as those of mobile devices allow CSS3. By dint of CSS3 the gradients and round corners can all be integrated with CSS styles.

abstractsmanager.com structure modification

Afterwards, just a few styles for the forms and listings had to be made. But all in all, just one CSS file was added and the Media Query was put into the header. No content changes were made, no tags were added, all CSS.

abstractsmanager.com - Responsive layout

Should you be responsive too?

As said at the beginning, modern devices allow accessing webpages adequately. However, there is a huge amount of new devices coming out and the website should be tested at least on smaller screens. There is always somebody with a smart phone or a tablet around the corner.

Nevertheless, statistics state that mobile users have high expectations when they surf through the web, first and foremost in case of speed. This statistics have shown that 59% of the users are leaving if the page has not loaded within 5 seconds and most users are expecting a load time of 3 seconds or less. With smaller and fewer graphics the site speed can be increased a lot. A good styled and formatted content for a better readability on mobile devices would help the user and increase the user experience additionally.

Links

You may also like

Weapons of Sass Production

As part of the front-end development team at Revium, it’s my prerogative to continually strengthen and streamline our design and development processes. After many hours of reviewing best practice and web standards, our expert design team have begun incorporating Sass into our development processes.

Keep Reading

15 keys facts and conclusions to know the future of the Internet in 2015

2015. Far away? Don’t we already live with a little taste of what that future will be like?  Consider: The rise of personal mobile computing, the surrounding all encompassing social networking, and the app-ification of our entire technological lives.

Keep Reading

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.