Creating Sites For The Mobile Age

Over the twenty years of its mainstream existence, the world wide web has changed quite dramatically.  Gone are the days of animated rainbow gifs, blink tags and under construction signs (though one could argue that beta tags are actually the new under construction signs).  Today, we have a more mature and feature-rich web that has, thankfully, outgrown it's somewhat awkward and cringe-inducing beginnings.

Remember when web sites looked like this? Ugh.

Those were simpler times, and now all but the most basic of web sites are a much more complicated affair.  There are many factors to consider when creating a modern web site.  It needs to be attractive, easy-to-use, accessible, and quick, to name but a few considerations.  Today, it also needs to be able to be viewed optimally on an ever-increasing number of mobile devices.  What are some of the challenges faced by creating sites for the mobile age?

Not All Screens Are created Equal

Going back in time on the web, you can sometimes guess the year a site was created based on the width of the design (try the Internet Archive for yourself).  As the web evolved with personal computing, monitor sizes and resolutions steadily increased each year.  Thus, around the turn of the century, many sites were still designed for a maximum screen width of 800 pixels, as the most common screen resolution at that time was 800x600 pixels.  Before that, in the very early days of the web, it was 640 pixels.

Site designs must now cater for screens of all sizes (photo by Julie de Boer)

During the last ten years, the industry has settled on a width of 960 pixels as the most common format.  This catered well for the higher resolution LCD panels which gradually replaced CRT monitors.  Until the smartphone boom, this format worked very well, but a 960 pixel wide design on a phone can look like a postage stamp, requiring pinch-zooming on every page.

With responsive design, we can target small and large screen widths using a common design.  The goal of an effective responsive design is determining what elements of the site to display on different devices, and how to adapt the layout of the site to different screen sizes.

Charting a New Course for Navigation

Navigation in particular has changed dramatically since the introduction of responsive design.  One undeniable trend is the rapid decline of drop-down menus.  Once the gold standard for effective multi-level web site navigation, drop-downs are becoming very much out of vogue for a variety of reasons, primarily driven by the popularity of touch-based devices.

Traditional navigation can be tricky for users on some devices (photo by Sam Beddoes)

The problem with drop-downs is that they typically require a hover event to reveal themselves, which works fine on a PC when you hover the mouse over the menu item.  But how do you trigger a hover event on a touch device?  Put simply, you can't.  As a result, drop-down menus on touch devices can react unpredictably, and often create a negative experience for the mobile user.

Our solution to this problem is to hide the primary traditional navigation on smaller devices, and replace it with a touch-friendly expandable menu at the top of the page.  You can see this in action right now on this site by resizing your browser window, or by viewing it on your smartphone.  Other approaches include using a standard form select list, and using slide-out navigation on the side of the site (similar to how the Facebook mobile app works).

taking power from the Grid

Most responsive designs for mobile-friendly sites work by designing the site to some sort of grid.  This means dividing each page into a series of columns and rows which are aligned to a set of underlying dimensions.  This creates what is known as a fluid layout.  On larger screen sizes, the layout is rendered as a series of columns.  When the stylesheet detects a smaller device, the columns are typically stacked into rows, allowing content that is side-by-side on larger screens to be displayed one on top of the other on a smaller screen.

Fluid layout grids are exactly the same as this. No, really.

This approach works very well for adapting layouts to mobile devices, and we've found that it makes much more sense to graphic designers as well.  Almost every designer worth their salt creates web site designs using a grid.  What occurs with responsive design, is that the graphic design can often be converted to style and markup much more rapidly than before, as the concept is very compatible with the process used by designers.

Here at Praxis, we like to use the Skeleton responsive boilerplate as we feel it gives us the most flexibility with our designs, and doesn't force itself in our faces with unnecessary fluff and clutter.  It works by providing a very simple set of stylesheets that create a sixteen column grid, and defines the rules for how the grid behaves at different screen sizes.  Skeleton has allowed us to create very attractive responsive designs with minimal hassle.

the Web of tomorrow, Today

We look forward to seeing what the web has in store for the next decade, as we continue our relentless march towards the mobile age.  Change is ironically a constant in this industry, and sites created today need to prepare for, and respond to, industry and consumer trends.  There is no denying that the web as we know it is changing rapidly, and in another two decades from now, it could again have mutated into something entirely unrecognisable from the web in 2013.

Until then, let's ride the wave of change and innovation, and create some amazing sites for the mobile age of browsing.