Responsive Web Design allows designers to implement web pages, which work equally well on different types of devices. Cascading Style Sheets 3 (CSS3) media queries enable the CSS used to control the page look and feel to be altered based on screen size, and other properties of the device when the page is being rendered on the browser. Responsive Design works really well with simple web pages containing elements that are implemented consistently across the major browser vendors.
Sometimes something more is needed, here are 5 signs Responsive Design alone isn't working:
Site Logic Impacted by Device Type
If the type of mobile device being used to access the web site has a direct impact on the content or service provided. For example; a site with a companion native application would not want to ask Android users to download an iPhone app, or a retailer may wish to present a home page directing a mobile phone user to the nearest store.
Lower Than Expected Advertising Revenue
If advertising revenue from your mobile users is dis-proportionally low compared to desktop users, responsive design could be the cause.
Simple Web Design Tasks are Taking Too Long
If web designers end up spending a lot of time writing and testing CSS3 media queries. This causes inefficient website production and maintenance.
Navigation Varies Between Big and Small Screen
If the structure and layout needed to produce an optimum mobile experience is totally different to the desktop web site.
Display: None
If display: none is used to turn off content as the screen size reduces. This content is still being downloaded in the background which will cause heavy load times on mobile devices.
Solutions
With responsive design, all CSS3 media queries decide the page layout after most of the content has already been transferred to the web browser. This means nearly all of the large scale content has been transferred regardless of the device that is asking for it. Not only does this cause huge load time problems for mobile web users, but it can also mean mobile users spend too much of their precious data allowance to browse your website.
What if these decisions could be made on the web server before the HTML page is even transmitted? The page returned by the web browser could be customised to provide only the relevant content, allowing for a far speedier mobile web experience. Less complex CSS and other client side components such as Javascript could be used as a result. Such a capability exists today and is part of all versions of DotNetNuke. Plugins are also available for Wordpress, Drupal, Joomla, Sitecore, and many more.
Consider the following 4 web sites which use server side device detection and responsive design to present an optimised experience to mobile phone users:
galaxychocolate.co.uk
Galaxy Chocolate is a UK based confectionary business. One time use vouchers are printed on the inside of chocolate bars. The voucher code can be redeemed via their web site. The desktop web site includes plenty of information concerning the prizes which can be won using rich graphics and layout. The mobile site focuses on redeeming the voucher code. The two pages are very different and would not suit a response design only solution.
Subway.com
Subway is an international brand operated under a franchisee model. The mobile site focused on finding the nearest restaurant, the current menu and special offers. The main web site includes information about franchising and more copy related to health and other things. This additional information is considered less relevant for the small screen mobile phone user.
PrimeLocation.com
PrimeLocation is a UK based real estate listing business. The mobile web site focused the user on finding property near their current location. The mobile page does not focus on property valuations, or editorial concerning the state of the property market.
thefonecast.com
Finally thefonecast.com is a UK mobile news and podcast. Revenue is generated from advertising split between audio adverts within the podcast and advertising on the web site. Notice how the advertising layout and imagery changes based on the device type with a single floating advert used on smart phones that is always displayed at the top of the page.
Images correct for December 2012.
Server Side Device Detection - How does it work?
51Degrees.mobi provide a small plug-in used by all the above example web sites which enables the properties of the requesting browser, operating system and hardware to be queried. This information is used on the server to optimise the response.
Therefore in .NET C# an if statement to exclude content if the device is a mobile would look like this:
if (Request.Browser["IsSmartPhone"] == "False" ) { ... }
The same example in PHP would appear like this:
If ($_51d["IsSmartPhone"] == "False") { ... }
Adding server side detection to your toolbox provides the following benefits:
- A web site optimised for the requesting device and associated likely context of the user can be produced easily without needing to learn new programming techniques.
- Advertising which works well on big screen devices can be removed from smart phones and a single floating advert can always be displayed at the top or bottom of the browser window.
- Different web sites could be used typically with the "m." prefix for mobile which utilise different navigation. In DotNetNuke content can be shared across different portals significantly reducing the administrative overhead of content management across multiple sites.
- display:none can be replaced with server side If statements reducing the amount of data sent to the device and improving page load times.
- Developers and designers are more productive as they're not exposed to the complexities of different browser vendor's implementations of HTML5, CSS3 and associated technologies.
Server side mobile device detection from 51Degrees.mobi is available for free for PHP, Java, .NET and also includes a full C implementation for the hard core techies.
About 51Degrees.mobi
51Degrees.mobi was founded in 2009 to provide server side device detection and web optimisation solutions enabling web sites of all sizes to easily create a mobile presence. Our open source products provide an easy to implement method to improve usability and performance of web content served to mobile devices. Our data file contains thousands of devices, including games consoles, TVs, eBook readers, tablets, smart phones and feature phones. Each device is mapped to a wide range of relevant properties including physical screen size and input methods to operating system, web browser and hardware model. Over 320,000 servers use our tools for over 500,000,000 device detections each month.