Not so many years ago website design, like all technologies, was a lot simpler. Designers had to create sites for screens that ranged very little in size and certainly couldn’t be turned on their sides for a neat landscape view! Then along came mobiles and then smartphones with ever better screens that did that neat little flip-over trick. Add in laptops, tablets, watches, etc and very quickly what was once straight forward got a lot more demanding. How could we produce websites that would work on large format desktops and also the other formats now appearing?
The first solution was to create an additional and completely independent mobile site that was called up when the server detected a phone or other device being used to view the site. That worked ok (ish) but it meant twice the server size, twice the bandwidth, double the updating and so on. It was a pain both for the designer and for the client who of course footed the additional bill.
Then Responsive Web Design (RWD) evolved to take over from that double serving role. But how was RWD different?
RWD is based on the concept that all content shall be flexible in layout, resolution and styling so that a website can adapt it’s layout according to whatever device is being used to view the site. Instead of elements being of fixed dimensions (in pixels) the page columns, rows, images, video etc were to be (mostly) set to relative percentages width and/or height. so that the blocks of text and pictures would stretch or shrink to fit their bounding areas within a layout, a kind of elastic band system. At certain set screen sizes the layout of the page alters, most noticeably you see the standard menu switch to the three line (hamburger) seen on mobiles. All elements automatically stack vertically to be easily scrolled. Remember the bad old days of horizontal scrolling and zooming in and out of pages, reading content as if through a toilet roll? Happily that’s all gone now. I say “all” but you still come across steam driven things that hold onto that archaic method.
So, in conclusion, RWD was developed to address the meteoric takeover by mobile devices and to build in from the onset the ability to present web sites in formats that would render well on all screens and (hopefully) future designs. If your website isn’t responsive already it’s crucial for the sake of your visitors and your busioness to update to the RWD asap.