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


Get more from responsive web design with device detection

Published on Friday, October 17, 2014

Get more from responsive web design with device detection

Overcoming the "all device types should get the same content" problem with RWD

Since advertising began adverts have been customised to reflect the characteristics of the space available and medium they’re being displayed on. An advertising campaign which includes TV, billboards, magazines, newspapers and web sites will use many variants of the same core message customised to deliver maximum impact considering factors such as viewing distance, likely engagement time, surrounding context, and interactivity of the medium. As more of the information we consume moves into the digital world adopting a similar design approach to digital content is increasingly important.

Response Web Design (RWD) is seen as the solution. RWD utilises technologies like HTML5 and Cascading Style Sheets (CSS3) to alter the layout of a web page based on the characteristics of a device. The same web page is served to all users and CSS used to alter the layout of the content at the point it’s being displayed. For example on wider screens positioning boxes of content next to each other, but on narrower screens the boxes appear one under the other. RWD designed web sites can easily be identified by narrowing the width of a desktop browser and observing if the page changes.

RWD solves many of the layout problems associated with increasingly diverse screen sizes but is constrained by one hard to justify assumption. RWD assumes all devices should receive the same content and support the same business processes. But just like real world advertising the way the device is being used and its size are an integral part of providing an optimum design. One design does not fit all.

5 most popular screen sizes in devices used for Web access in Europe.
5 most popular screen sizes in devices used for Web access in Europe.

Consider the size and position of web advertising. On a small screen device the most effective advert would be persist at the top or bottom of the screen and always remain in view as the user navigates the page. However the same page displayed on a large screen tablet or laptop device supports multiple adverts in banner and skyscraper format. Optimum layout and design for each form factor will increase click through rates and therefore profits.

Then there’s the problem of how to size pictures and video. If an image on a web page is 640 pixels wide, but is displayed on a screen with 320 horizontal pixels nearly 4 times more data will be sent to the device than is needed to display the image at the highest quality the device is capable of displaying. Not only is valuable bandwidth wasted and performance as observed by the user degraded, but battery power is wasted as the image has to be sized by the comparatively weak computing capacity of the mobile device. The problem is more acute for some videos.

5 most popular screen sizes in devices used for Web access in US.
5 most popular screen sizes in devices used for Web access in US.

To highlight these problems 51Degrees ran a competition in 2013 to find the webs largest home page when accessed from a mobile phone. The worst web site was cityvoter.com with a whooping 26MB home page predominantly made up of poorly sized images for mobile.

These challenges are now easily solved by extending RWD techniques to analyse web traffic to include factors such as screen size. Then using different content and business processes to service different device types.

Read More

Comments (0)

Author: Mike

Categories: Development, Opinion

Tags: RWD , RESS , Screen Size , HTML5 , CSS3



Other posts by Mike
Contact author



.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Adtech Affiliate Marketing Afilias 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 DeviceAtlas 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 Publishers Python QMobile QR Codes Redirection Research Reseller Responsive Images Responsive web design RESS Review reviews RIM Ringmark RTB RWD Safari Samsung Scala ScientiaMobile 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 Tutorial 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 WURFL Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE