FAQ: What do the terms responsive, fluid, adaptive, mobilefirst mean?To explain the difference between terms such as fixed, fluid, adaptive or responsive consider what happens to a web page when it is viewed on screens of different width, or if re-sized with a browser...
Fixed websites have a set pixel width, so if a page fills the screen of a laptop, only part of the page will be visible on a mobile phone.
On a fluid web page, sizes are set as a percentage, so the page shrinks or expands to fit the available space, and all the elements change proportionally.
Adaptive pages use media queries to set “break-points “at which the layout will change, to target specific devices, e.g mobile phones, tablets, laptops or panoramic computer screens.
Responsive pages are built on a fluid grid, but also use media queries, so that as the page scales the design changes as well.
Similarly, to make graphics responsive:
1. The graphic can be constructed in “units” that shuffle as the screen width changes, say from 3 units in a line (to give a landscape shape) to one unit on each line (to give a portrait or ribbon). This can result in poor visual integrity and inappropriate font sizes.
2. Different versions of the graphic can be constructed for different screen widths, the version displayed depending on the screen width of the device on which it is viewed - the break points marking the transition from one image to the next. At intermediate screen widths the selected version can scale (i.e. enlarge or shrink).
3. Graphics can also be constructed so that the design morphs as the screen width changes, but at the moment the algorithms used are not sufficient to maintain the visual quality.
Although MobileFirst means taking mobile considerations up-front before those of larger desktop versions, it is often synonymous with method 1. above.
In practice it is easier to “remove” information from a graphic to simplify it, than to “pad it out” for a larger version. Graphic News therefore generally starts with the digital version equivalent to a 2-column print graphic, and then makes the smaller tablet and 1-column mobile version from this.
With interactives the height of the graphic is kept constant, with interactivity taking the reader through the graphic. With graphics constructed in Adobe Illustrator and then converted to html (AI2HTML), rather than loose information as the width of the graphic decreases, the height is increased. The graphic therefore become a ribbon and the reader scrolls through the graphic. These are called responsive “screen” or “screen scroll” graphics or “scroll stories”.