Responsive vs. Mobile-Friendly Websites: The Tech Confusion

Upcoming Webinar

How to Communicate with your Clients through Video Marketing

UPCOMING WEBINAR, FEB. 13 - Register for our webinar to learn from industry expert Jill Addison, founder of FA Client Machine on how video marketing can be a powerful tool for attracting and retaining clients.

Learn More

How to Write a Financial Advisor Biography

Learn More

6 Common Content Mistakes Made by Financial Advisors

Watch Now

While today's generation aims to become evermore technologically advanced, various forms of website design has been deemed a hot topic of current discussion. As terms such as "responsive" and "mobile-friendly" are continuously juggled during tech talks, their distinct definitions often become blurred causing confusion for the majority that are not so tech savvy. This leads me to detail one of the biggest misconceptions when talking about responsive and mobile friendly websites - a mobile friendly website is responsive. 

So before we continue to use these tech terms interchangeably, let's take a closer look into the meanings behind the responsive versus the mobile friendly website.

Mobile-Friendly

 

A mobile-friendly website is essentially a small version of your desktop site. When comparing the mobile-friendly site to a responsive one, it tends to be known as more rigid and less flexible. This means that a mobile-friendly website is designed to perform in the same manner across all devices, capturing all elements seen on a desktop site and simply displaying it in a more compact form. For instance, navigation drop-down menus can be difficult to use on mobile as nothing changes or is unused.

mobile

All in all, the mobile-friendly website excludes usability concerns regardless of the platform from which it is being viewed from.

Responsive

As mentioned above, a mobile-friendly site is rigid while a responsive one is flexible, or as most tech nerds like to say, "fluid", in its design and functionality. A responsive website automatically adjusts according to the device's screen size (whether large or small) as well as its orientation (landscape or portrait). It takes into consideration usability and changes in response to the needs of the user and the device that they're viewing it on.

An example can be shown in the image below. The text and images were originally in a tight and barely viewable 3 column layout when viewed on a mobile-friendly site. On a responsive site however, the 3 column layout transformed into a single column display, allowing for better readability. Redundant images have also been removed to avoid it from interfering with more significant components of the site.

responsivephone

In summary, here's a breakdown to differentiate the two forms of website design:

Mobile-Friendly:

  • Smaller and compact version of desktop site
  • Rigid and static - content does not change and adjust for usability

Responsive:

  • Fluid and dynamic - content adjusts to user needs and platform
  • Optimized images; padding and spacing corrected

Topics: Advisor Websites, Design, General, responsive design, Technology, web design, mobile friendly, websites