A Primer On Responsive Web Design For The Non-Techie

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.

SHARE:

Facebook
Twitter
Pinterest
LinkedIn
Reddit
Email

19 Responses

  1. After going over a handful of the blog posts on your site, I really like your technique of blogging. I saved it to my bookmark website list and will be checking back soon. Please check out my website too and let me know your opinion.

  2. This is very interesting, You are an overly professional blogger.
    I’ve joined your feed and sit up for in quest of more of your magnificent post.

    Also, I’ve shared your web site in my social networks!

  3. 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.

  4. Great post. I used to be checking constantly this blog and I am inspired!
    Extremely helpful information particularly the ultimate phase 🙂 I take care of such information much.
    I used to be looking for this particular info for a long time.
    Thanks and best of luck.

  5. Hiya! Quick question that’s totally off topic. Do you know how to make
    your site mobile friendly? My blog looks weird when viewing from my apple iphone.
    I’m trying to find a theme or plugin that might be able to
    resolve this problem. If you have any suggestions, please share.
    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Media

Most Popular

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts