Responsive
1 October 2018
According to mobile designer Josh Clark, content is like water. The same content can be poured into a variety of "vessels". We therefore must stop focusing on constructing different vessels and instead construct our content in a responsive manner so that it fits all vessels.
What exactly is responsive design? This school of website design promotes the creation of a graphic interface that automatically adapts to the screen size (of the computer, tablet, or cellphone) while retaining the website's full form and a continuous User Experience.
Responsive design is based on three principles:
A flexible grid structure- dividing the screen into a net of differently-sized segments enables using relative sizes for columniation of different components; for example, defining the width of a certain component according to the percentage of page size it takes up (rather than by its number of pixels). Thus, when the screen is narrower (e.g. when using a cellphone rather than a Personal Computer), the height of a component changes accordingly. It also enables a changing definition of the web components' location for different screen sizes (e.g. displaying two items across the screen rather than three).
Flexible pictures- pictures, too, require defining a relative size both regarding the page and regarding the component in which they are placed to ensure that they don't exceeds the components' borders.
Using the media queries module- a CSS3 tool which translates the content so that it fits the screen resolution.
Some websites offer more advanced elements: rotating the picture according to the screen, changing the font color according to the background color, shifting from a multi-columned template to a single-columned template, hiding illustrations that aren't vital. A review of successfully responsive websites can be found in Jesse Kirkwood's blog on "Inside Design".
The responsive versions of the Dropbox website
If you are interested in reading some more technical tips, you can read this review published on Google's developers' website or sign up to a free course on the subject on Udacity.
What began as an innovative idea eight years ago, has recently become nearly a norm. I write "nearly" since there are still commercial and public parties that prefer creating, separately from their main website, a mobile-adapted website. This is a more limited version which displays the content from the "main website" adapted to the users' needs and call to action. The differences between a responsive website to a mobile-adapted website are reviewed in this article. However, this issue if a matter of time and in a few years all websites will be responsive; we might not have to name the phenomenon since it would be the only standard.
References:
