• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Tuesday, January 22, 2013

5 Reasons Responsive Design Alone Isn't Working

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:

  1. 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.
  2. 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.
  3. 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.
  4. display:none can be replaced with server side If statements reducing the amount of data sent to the device and improving page load times.
  5. 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.

Comments (0)

Author: James Rosewell

Categories: Development, Opinion

Tags: RWD , Mobile , Design

James Rosewell
>

James Rosewell

Other posts by James Rosewell
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Developers Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display dmexco DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany git repositories Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP HTTP Headers Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia m.dot macOS Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native Native Apps NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Nokia 3310 Non-Mobile NVIDIA Omate On7 OnePlus 5 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV programmatic PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Safari Samsung Scala Screen Screen resolution Screen Size SEO Server Server-side optimisation Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore Sitecore version 9 SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Tips Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 Video VoLTE VR Wearable Web Web Apps Web content management WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE