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

Welcome to Graphic News

Please get in the habit of logging in when you arrive as some pages may soon be restricted. If you are new to Graphic News there is a Website Guide to help you find your way around.

November 24, 2017 — Ai2HTML screen graphics - The script has been updated to allow multiple screen graphics to be published on the same web page. Click here for instructions

November 24, 2017 — Training - mobile graphics- The GN AI2HTML method is very fast and easy. It allows designers with conventional design skills to produce responsive “mobile” friendly graphics to meet news deadlines. Contact helpdesk @ graphicnews.com if you would like to join our next training course.

If you need help or have questions at any time, please contact us