FAQ: What do the terms responsive, fluid, and adaptive mean?
To explain the difference between these terms, 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.
Responsive graphics can therefore be created in different ways:
• 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.
• 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.
• 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). At Graphic News, this method was found to produce the best results.
FAQ: What types of files can be downloaded?
FAQ: What are responsive graphics and why are they needed?