Responsive Web Design
It is a very practical and cost effective method providing an alternative to mobile specific sites, sub-domains or applications.
The explosion in the use of mobile devices has fuelled development in fact the necessity of this kind of solution. Mobile devices are far exceeding laptops and desktops as viewing mediums.
The Responsive Problem
How to provide user centric viewing experience given the vast multitude of devices often with diverse specifications and screen sizes. It would clearly not be feasible to tailor websites for each specific device. That would involve generation of numerous versions of a site.
Is it possible then to squeeze a laptop screen into a mobile phone screen? Not with the same dimensions obviously but, if the screen elements could be scaled down and / or re-arranged then yes. There is also the technological boost from mobile manufacturers. Screen size, quality and resolution are continually being upgraded.
History
The identification of device aware styles dates back as early as 1998 with style sheet recognition of “handheld” media in the HTML 4 specification html4 spec. This “handheld” initiative really died when browser implementations favoured “screen” and left out “handheld” definition altogether.
And so the confusion on how to best implement mobile browsing continued for nearly a decade.
The digital landscape was shifting fast and by 2009 it was clear that the mobile browsing market was expanding rapidly. CSS Media Queries were being adopted by Safari and Opera.W3C CSS Media Queries
Media queries although much more useful could not resolve all issues with responsive design. Other factors had to be employed before the full power of RWD could be realized.
Firstly, media queries had to be accepted and adopted by browser manufacturers and in general were, except by Microsoft up to IE 9. Secondly, responsive design requires incorporation of the “fluid grid” for positioning elements. And lastly images have to employed in a scalable fashion.
Ethan Marcotte in his book “Responsive Web Design” has been credited with drawing all these elements together into a cohesive perspective.
Current RWD Implementation
RWD is easily implemented today in no small part due to standards adherence by modern browsers. The majority have adopted CSS3 without reservation. In addition the proliferation of ready to use CSS frameworks, the most popular is probably Bootstrap but there are others Foundation and UIkit. Each of which do much the same thing.
These frameworks provide ready built grid systems which operate to effectively scale and manipulate the layout. Depending on how they are implemented, grid contained elements scale automatically to screen widths. If required columns can be forced to slide downwards on small screen devices so that it is added to the main column. The viewer sees an extended main column with the right column content tacked on at the bottom.
Images contained in a grid, provided they do not have fixed dimensions, exhibit the same behaviour, automatic scaling. Where necessary image versions can be created for mobile, tablet and desktop. Image display is dependent on screen resolution and size.
Conclusion
Responsive websites respond to the size of the browser at any given point to that extent the specific device agnostic. RWD has become a standard almost always incorporated into modern websites rather than a luxury. Google advocates the responsive design approach.
Because of all these factors there is no doubt responsive design is here to stay.
Footnotes