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.

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.

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