This blog post will look at the key concepts which are relevant to Responsive Web Design (RWD) and how this important approach to web design and coding is vital in the current market particularly for digital publishing.
So what is ‘RWD’?
Responsive Web Design is an approach which allows for a seamless and consistent presentation of content across devices. This applied to not only screen size but navigation and reader needs.
RWD relies on the following factors to allow for a fully RWD orientated approach.
• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS
One of the key areas of RWD which needs to be considered in the preparation of a digital edition is:
What information does my reader require first?
How should we present this information to the reader?
The source outlined above is keen to point out that whilst the majority of new screen sizes are getting smaller; there are also many larger screens too.
A Media Query: like a channel via which your content may be presented, if the requirements of a query are met then the content is displayed in that way. The first most basic queries were ‘Screen’ and ‘Print’ which enabled for a page on screen to vary from that same page when printed. The queries are now more advanced and so allow for the incorporation of a RWD approach these include; device orientation, maximum height etc.
Flexible Grids: are a means of allocating pixels so that the reliance for your publication is less on pixels and aimed at % instead. The goal is to create relative size text rather than text size based on pixels. This is because a pixel on one screen at this point may be many more on a higher resolution screen.
Flexible images and media: This section of the approach is to ensure that publication content will adapt to the screen size in media and images which can be relatively simple to do with a reliance on the browser.
For some great examples of RWD check out this RWD enthusiast site we hope that this brief introducation into RWB has been helpful and we are always open to feedback contact us at firstname.lastname@example.org
Also you may like to refer to our recent blog about Liquid V Fixed layouts which is available here.
More From 3dissue
3D Issue Recommends