The birth of tablets and smartphones led to the evolution of websites, churning out what is now known as responsive web design or RWD. This term was coined by author Ethan Marcotte in his book Responsive Web Design. Unlike before, when web designers only had to consider the specs of desktop computers and laptops in creating a site. They now have to factor in the specs of various tablets and smartphones available in the market and that is something very tricky, indeed.
Simply put, responsive web design is one that adapts to the device — retaining the page or site’s core look, feel, and formula while fluidly conforming to the particulars of a certain gadget. For example, how YouTube is presented on a PC should look similar when viewed on an iPad, an iPhone, an Android phone, and various tablets and hand-held gadgets.
When creating a RWD, one has to consider these factors:
The framing or screen. Not just how big it is, but also the resolution and the orientation — how will the design translate to a landscape or portrait format?
You also have to add to the equation whether the device uses a keyboard and a mouse, or whether it’s a touch screen. Obviously, web developers nowadays have to make sure that the design is both mouse and finger-friendly, with features and content that can respond with a mere scroll, click, or swipe.
The scaling of images is also important. For those with small screens such as the iPhone, it invariably has to have an option of making images bigger, ready for their close-up. But, more importantly, whether one is expanding or shrinking the page or image, the proportions must be the same; otherwise, the look is distorted.
Granted, responsive web design may be a pain in the neck to begin with, especially for newbie designers and developers, but the beauty of RWD is that, once everything is in place, the design is easily translatable across all sorts of devices, and users are pleased. And don’t worry about not having the means (read: funds) to hire an awesome web developer who can redesign your site to RWD; blog software and online publishing systems such as WordPress and Google’s Blogger have come up with templates — all you need to do is fill in the blanks and customize it accordingly, as they have hundreds of themes and designs to choose from. Blogger has even come up with a mobile app so users can post entries from their smartphones and tablets.
There are also host of DIY responsive web designs that simplifies the process, one of which is Webflow, which offers RWDs for non-techies at very affordable prices. Think of them as the idiot’s guide to RWD — no need to key in media query codes and the like.
Since the inception of Responsive web Design is fairly recent, do expect that changes and improvements will come, and at a rapid pace at that, given the advances in technology. Still, don’t let this fact frustrate you. It’s practically a guarantee that DIY RWD publishers will crop up, ensuring that even illiterate online publishers can launch their own sites someday — as evidenced by online publishing forebears Blogger, WordPress, and the like.