Smart phones get bigger screens, Internet access becomes faster and tablets are becoming increasingly popular. Because of these changes users become more comfortable with actually browsing and not only searching for information. So the question is not whether companies should invest in the mobile market or not, but how they should invest cost-effectively.
As a case example we’ll take a Finnish company website with a monthly traffic of around 25 000 visitors. During January 2011 the mobile share was less than 1% of the total inbound traffic—in other words quite insignificant—but after only one year this number has increased to 6%, exceeding older browsers such as Internet Explorer 7 which still have support while the mobile browsers do not—time to take action.
Another example, this time from Sweden is an online web store which mobile share increased from 3% in 2011 to 11% in January 2012, a trend is obvious and it will only continue to grow.
The main problem we’re now faced with is within this mobile share, where there are hundreds of device, screen size and browser combinations. It’s virtually impossible to cater all these combinations with the old idea of serving different sites for different users. Native applications has been another option but this is far from cost-effective as it requires vast amounts of work to develop and keep up to date across different devices. Not really a viable investment for regular companies without a specialized web service. But still, companies should strive to provide a good user experience across the board to all its users.
Enter responsive web design
The buzzword across the web ever since Ethan Marcotte toyed the term on A List Apart in 2010 has been responsive web design. This is the cost-effective solution everyone has been looking for. The idea of it is to create one site, and adapt it to all users with simple rules, triggered when the viewport size changes, adapting the layout to fit all screen sizes. The best—or the most future proof—way to do this is by creating the site with a so-called fluid grid system, using percentages opposed to the fixed grid layout that uses pixels. This way the grid is layout agnostic and easily adaptable.
A technical brief of responsive grids.
A common structure for a responsive layout is defining a maximum width for a wrapping element limiting the layout size for desktop screens, which can have very high resolutions. As the default behavior for block elements in HTML is to span the entire width available, this wrapper will become smaller as the screen changes in size, creating the first building block of a responsive design.
Once the wrapper is set, all sizes defined within are set with a percentage unit. For example, a three-column view might use 32% width and a 1% margin and images might use a maximum width of 100% to span as much as possible while not affecting the image quality.
With this grid system the site is now responsive for most tablets and upwards. For smaller screens, columns probably become too tight for a good interface so this is where one uses a triggered rule with the help of CSS media queries. The designer can resize their own screen or use a tool like responsivepx to find the breakpoint where the layout needs to change and then define a rule to e.g., make columns span the entire width of the wrapper instead of 32% pushing all other columns beneath it. Several of these rules might be needed to provide a responsive web design which provides good experience but in comparison to creating an entirely different layout for mobile users this is trivial. When combined with modern tools such as CSS-preprocessors these rules can also be incorporated with the rest of the related logic making it easier than all other options to maintain in the long run.
