Responsive Web Design
RWD, as the name suggests, is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
In the early days of web design, pages were built to target a particular screen size. If the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. As more diverse screen sizes became available, the concept of responsive web design (RWD) appeared, allowing web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
You do still see many web sites that have not embraced these principles and which scale very badly down (or up) as the user views from a different perspective than the designer. We now refer to these as BAD websites! As the world migrates to mobile viewports from desktop viewports we should be conscious as designers of the need to think mobile-first but be responsive to appeal to the widest possible viewing base. Responsive also means serving the right experience to the right viewer on the right device. it’s not enough just to “work”, it has to be a good experience or the value to the viewer is lost.
Mobile Web
As the mobile web started to become a reality with the very early smartphones (Nokia N95 anyone??), companies who wished to embrace mobile would generally create a special mobile version of their site, with a different URL (often something like m.example.com, or example.mobi). This meant that two separate versions of the site had to be developed and kept up-to-date.
In addition, these mobile sites often offered a very cut down experience. As mobile devices became more powerful and able to display full websites, this was frustrating to mobile users who found themselves trapped in the site's mobile version and unable to access information they knew was on the full-featured desktop version of the site.
Viewports
First up, you need to set the website’s viewport - give the viewer’s browser some instructions on how to control the page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Image Width
Responsive images are images that scale nicely to fit any browser size. Use the CSS width property to allow the image to scale up and down:
<img src="img_girl.jpg" style="width:100%;">
However, expressing it this way allows the image to scale up to more than 100% of its original size - we don’t want that so we constrain it using the CSS property “max-width” instead. Below is a neater way of achieving the same thing:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
This will allow the image to scale down nicely, but never balloon above its original size when viewed on a larger viewport.
Can’t we just use different images?
Absolutely! The HTML <picture> element allows you to define different images for different browser window sizes. In this way we mighth store slightly different versions of the same image in our website’s media library for use at different viewport configurations.
<picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>
Can we manage text also?
Once again - absolutely! Text size on a website can be set with a "vw" unit, which means the "viewport width". This way the text size will follow the size of the browser window. Note: 1vw = 1% of the viewport width.
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
Last but not least - we learned how to harness Media Queries within stylesheets to define completely different styles for different browser sizes media queries add breakpoints on websites as instructions to browser to know precisely when to shift to a new layout.
/* Use a media query to add a breakpoint at 800px: */ @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } }
Summary
With these basic principles a responsive web page should look good on large desktop screens and on small mobile phones, and everything in between. Once the layout. structure, and visual framework is clear to the viewer the additional elements can be layered on using rich CSS to complement and maximise the appeal of the layout across devices.













