There is no question whether or not your site should be mobile friendly. It should be. But should you go responsive design (RWD) or adaptive design (also called “dynamic serving”)? After experimenting with the two options, our team has decided to implement dynamic serving / adaptive design in conjunction with fluid layout.
What are the main differences between the RWD and adaptive design? Garrett Goodman, in the Huffington Post, gives a good definition of the two:
“Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.
Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.”
So here are five reasons why we have chosen to go adaptive first in conjunction with fluid layout:
BETTER PERFORMANCES. With adaptive design, the device browser ONLY loads the template and the content optimized specifically for that device. With responsive design, the server sends a unique template and the browser loads 100% of the content and the template whether this content is going to be displayed or not on this device. As Garrett explains: “With responsive, the device itself does the work with media queries to display the re-sized images and optimized layout, whereas with adaptive, the server does the work and delivers the page already optimized.”
DEVICE SPECIFIC UI / UX. With adaptive design, because you have different templates, you can develop 100% device specific user interfaces which is much less convenient with responsive design, in particular with the overlap of screen resolutions between the different devices. Multiple studies, like the last “EyeTrack: Tablet Research” from the Poynter Institute, show that user interactions are different according to the device they use. It is critical to address those differences in usage by offering a user experience tailored to a specific device. Again, it is much easier to do with adaptive design.
DEVICE SPECIFIC CONTENT STRATEGY. Content offering goes hand in hand with the user interface (UI). In adaptive design, device specific content can be offered as well as some specific features and functionality. For example, a paywall can be added to the mobile only version of the site. In responsive design, the changes are solely visual, and all of the site’s content remains the same, though it is possible to hide part of the content.
EASIER CODE MAINTENANCE. In adaptive design, the developer produces a specific code for each template. In responsive design, there is only one set of code that mixes all devices. So, in RWD changing one module for a specific screen resolution and device can have an impact on the other screen resolutions and devices.
MORE FLEXIBILITY. In adaptive design, each front-end version of your website has its “own life”. If all the sudden you need your site to work on connected TV, you can just develop a connected TV template without impacting the existing templates. In responsive design, any changes will impact all the code.
So how do we do it?
THREE TEMPLATES. In general, we developed three main templates:
- one for the web
- one for the tablet (landscape)
- one for the smartphone (portrait)
When necessary, we also develop portrait for tablet and landscape for smartphone.
FLUID LAYOUT. In order to adapt to the different screen resolutions, we develop each template in a fluid layout (that adapts to the screen width).
- 1200 px to 1024 px for sites (for now, we decided to set up the maximum width for a site to 1200 px)
- 1024 px to 800 px for tablet (landscape) including Amazon Kindle fire
- 640 px to 320 px for smartphone (portrait)
Becoming mobile friendly is a necessary step. According to the last State of news media 2013 (Pew), “39% of respondents got news online or from a mobile device yesterday”. 31% of adults own a tablet computer as of 2013 and 45% a smartphone. Their behavior and their needs vary according to the device they are using to view a site. By combining adaptive design and fluid layout, we are bringing together the best of two worlds in order to better serve the user needs.