Posted: Wednesday 17th October 2012
For a long time graphic designers and web designers have tried to make websites look as close to print design as possible. But with the increase in website traffic from smartphones and tablet devices, this approach is looking dated.
As mobile devices have gained a bigger slice of traffic, more and more web designers have been asked to design a mobile site to compliment the desktop experience. There have been a number of approaches to building mobile sites with various benefits and limitations to each.
Dedicated Mobile Sites
The traditional approach has been to design a dedicated mobile site, using the same branding, but separate from the main site.
The dedicated route allows complete freedom to tailor the page elements and design to the targeted device. The difficulty with this approach is catering to such a wide variety of devices, with differing screen sizes, proportions and resolutions. Short of creating many versions of the same site, it’s inevitable that the experience will be compromised for some users. There’s also a demand on web content editors to maintain multiple sets of content when the mobile sites are separated from the desktop.
Responsive Design
Frustrated with the limitations of the dedicated approach, on 25th May 2010, Ethan Marcotte wrote an article for A List Apart titled Responsive Web Design, in which he introduced the idea that a design should respond to the device it is being displayed on. The solution he proposed was to use fluid grids, flexible images and CSS3 media queries to create flexible ‘responsive’ designs that work at different resolutions and therefore, browser or screen sizes.
This approach enables the designer to think of mobile designs as ‘facets of the same experience’ rather than separate entities from desktop designs. In addition to being well supported across major mobile browsers and modern desktop browsers, the use of these technologies allows the variations of a given design - usually desktop, tablet and smartphone - to fluidly scale to match the variation in screen sizes between different devices, rather than having a set size for each device category.
There is an issue with responsive design as an approach though; using media queries alone it isn’t possible to remove elements from the HTML markup, only hide them using CSS. This means those elements are always downloaded to the user’s device, so the user could be downloading a number of elements they will not see. On a mobile network, this can increase page load times and bandwidth usage to an unacceptable level.
Mobile sites and Contensis
We’ve worked hard to ensure Contensis has comprehensive support for both approaches. In fact, Contensis is able to make up for some of the shortcomings of either approach, an example being our synchronisation module, which removes the requirement on web content editors to maintain multiple sets of content. Contensis is also able to detect which device a user is visiting a page with, from a database of thousands. This enables us to more accurately target sites to devices than would usually be possible.
Having the CMS solve some of these problems frees our professional services team to determine the best approach for a mobile site, based on the client’s specific needs, rather than on which set of technologies has the most features.
The technologies used in responsive design are already being adapted to solve other issues, such as retinal images for mobile devices with very high resolution screens and, within the last year, responsive adverts for adapting ads to different devices. Regardless of which set of technologies are currently in favour, with mobile use set to overtake desktop in the next couple of years, the one thing that is certain is that a mobile presence is more important than ever.