In today’s ever changing landscape of the mediaworld, newssites need to stay strong, clear and to deliver the best possible experience to the customers – wherever they are, whatever platform or device they are using. This is where responsive webdesign has been seen as a savior to the performance of many websites. But is there more to it – and what is it really?
Responsive webdesign is basically about designing with the many screensizes on many differenct devices in mind. But there is a history of this, and there are subtleties to be aware of. Getting the terms right will help you discuss and decide about these matters.
Fluid proportionbased design
Since the early days of html it has been possible to make a design that actually will adapt to the resizing of the browserwindow. In those days we used tables with cells in percentages.
An element in a fluid proportionbased design has a size defined in a percentage of the width of the webpage. Also, describing typesizes in “em” or % and not in exact points or pixels has made it possible to make typography more fluid and scalable. Tables were later widely replaced by the use of CSS (Cascading Style Sheets) – a kind of formatting, like using for instance, paragraph-styles in InDesign. This approach however, leaves us with some problems – like columns and elements getting too narrow or small – on small screens. So, we need something to happen in certain screensizes …
When Ethan Marcotte first coined the term “Responsive webdesign” in 2010 he stated that one of the most important design-decisions they did with the Boston Globe website was the decision of “breakpoints”.
Breakpoints is the pixel-width of the browserwindow, where you as a webdesigner has to decide when something new will happen with the design. For instance, when the user resizes the browserwindow (or simply has a smaller screensize if viewing the website on a smartphone) you can decide that under 640 pixels the design should look different than before it reached the 640 pixels. Mostly, the breakpoints are determined from the screenwidths of widely used desktop and mobile devices, for instance: 1280, 1024, 768, 640 or 320 pixels. We get this information by asking (in the code) – doing the so-called “media-queries”.
In responsive webdesign, the content reflows and resizes as the size of the browserwindow is resized. According to Wikipedia, a site designed with
Responsive Webdesign uses CSS3 media queries to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images. Here we have a combination of the fluid design approach and the breakpoints. Pay attention to the fact, that it is the “viewing environment” – that is; we only deal with the visual layout of the page.
So, in responsive webdesign, we don’t specifically serve different content or different functionalities – we simply rearrange the items we have, maybe hide a few or show them in a different way – like scaling a photo (“flexible images”) or making the menu vertical instead of horisontal. We basically just ask about the screensize – then gets an answer and let the elements respond to that on the fly. However, we can actually ask for a lot more.
There seems to be an agreement that adaptive webdesign is the definition of a website, which “asks” the device: “who are you?”, gets an answer, and then serves a specific layout AND content AND functionalities to that specific device. This is the aforementioned “media-query” – but now asking for a lot more.
For instance, if the website gets the answer: “I’m an iPhone with retina display” then we can serve the user a specific layout for that device of 640 pixels in width, with big buttons in iPhone-GUI-style, swipe-functionalities, relevant local news by the user’s gps-location, special versions of photos, infographics and videos – and maybe even serve an alternative layout and functionalities for horisontal vs. landscape mode.
So, the difference between the adaptive and the responsive webdesign is basically that in the the adaptive approach we ask for A LOT more – but we also have to cater for a lot more. We can for instance ask for the screen size AND the device-type AND the orientation of the device (landscape/portrait). BUT: We have to use that information for something and serve the user a design which then takes advantage of these things. It takes wise designers and clever coders – but doesn’t it all? n
Kim Pedersen is member of the SNDS Online Competition Comittee and has been working, writing and lecturing in the field of graphic design for 20 years. Since 2006 he has been Head of Design at Ekstra Bladet, Denmark.
This post was first published in SNDS Magazine
Ekstra Bladet in the digital world: An adaptive design-aproach:
The approach of a Danish sports site:
Find much more in-depth information
and some of the resources behind this article in this link-bundle: