What is Responsive Web Design?

As more people have migrated from their desktops to using their mobile devices, like smartphones and tablets, for their day-to-day internet browsing and social media interactions, the impact on how a businesses website appears on mobile devices is huge.

Until very recently, to accommodate mobile usage, most large companies developed and maintained a separate “mobile” website that looked and acted very different than their “desktop” websites. These “separate” mobile websites were simply parred down versions of the desktop designs and contained only essential information so that people viewing the companies website could quickly access core info from their mobile phones (e.g, contact info, business hours, reservations & product for sale, etc). While the “mobile” websites solved the problem of easy viewing of a companies core information on mobile phones, they restricted access to the Companies “entire” website experience (all web pages, images, video, etc) that generally required a desktop computer.

Fast forward to 2013: virtually all major companies have stopped using “mobile websites” and have now relaunched their websites on “responsive design” websites.

What is Responsive Web Design?

A responsive websites design means that all the elements of the design & website that is viewed on a desktop (including all the content, images, videos, etc) can now ALL be viewed on a smartphone or tablet (with out the need for a separate parred down “mobile website”.

Responsive websites have been constructed so that all of the content, images and structure of the core website will remain virtually the same whether someone is viewing the website on a desktop, tablet or smartphone. Ultimately, the will experience the website the same across a desktop or a small smartphone.

One way to know if you are viewing a “responsive design” is the core element of vertical “stacking” whereby the website content begins to stack vertically as the size of the device gets smaller…additionally, the text is very easy to read on a responsive design as it stays at a legible size regardless the small screen size. Responsive websites deliver the same comfort and usability to the mobile user as to the desktop user.

Another tell-tale sign of a responsive website is that the navigation bar & text seems to disappear…On a smartphone or tablet it is now common to see the navigation “fold-up” into a small graphic icon that looks like 3 vertical bars and found in either the upper right hand or upper left hand of the screen. When you click on the 3 bars, it reveals the entire navigation of the website.

Here is an example of TPH’s Responsive website (notice how easy the text is to read on the tablet and smartphone sizes!!):
This is TPH Website Homepage on a Desktop:
TPH-responsive-Website-Desktop

This is TPH Website Homepage on a Tablet:

TPH-responsive-Website-Tablet

This is TPH Website Homepage on a Smartphone:

TPH-responsive-Website-Smartphone

 

By brandi