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

Blog

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 , HTML5 , CSS3

Mike
>

Mike

Other posts by Mike
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE