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.
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.
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.