Difference between Mobile-Friendly and Responsive Web Design
Estimated reading time: 3 minutes
Today, we want to share with you a couple of thoughts on mobile-friendly versus Responsive Web Design (RWD) as a web agency. If you have missed our article on Mobile-friendly Responsive Web Design, make sure you read it first.
Mobile-Friendly Aren’t Necessarily Responsive Web Design
Yesterday, we briefly mentioned that mobile-friendly websites aren’t necessarily responsive. Today, we crack into the details.
Mobile-friendly websites may use the same URL but different HTML code for different devices (i.e. dynamic serving), and that use different URLs and different HTML code for different devices with HTTP/HTTPS redirects (i.e. separate URLs).
As for websites with separate URLs, a web page on mydomain.com serve desktop viewers whereas the corresponding web page (with different HTML code) on m.mydomain.com (a different URL) serve mobile viewers.
As for websites using dynamic serving, a web page on mydomain.com serve desktop viewers whereas the corresponding web page (with different HTML code) on the same URL serve mobile viewers.
However, mobile-friendly websites, that use different HTML code for different devices, are not considered mobile responsive and not recommended by search engines. Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain. This is practiced by many professional web studios.
Drawbacks of Not Having Responsive Web Design
Mobile-friendly websites with different HTML for different devices have some drawbacks.
First, they require more coding, server configuration, and redirects. This means higher development cost.
Secondly, there are additional technical challenges to overcome as follows.
- Faulty Redirects: redirecting mobile users on each desktop URL to e.g. home page rather than the appropriate mobile URL
- Mobile-Only 404s: serving content to desktop users accessing a URL but show an error page to mobile users
- Irrelevant Cross Links: having links pointing to an irrelevant page e.g. mobile pages link to the desktop site’s homepage
Thirdly, since each device (smartphone, tablet, and desktop) and viewport (e.g. desktop: 1280-1920px, smartphone: 320-480px, tablet: 600-1280px) has its own HTML version of the web pages, each version needs to be updated and maintained individually. This means higher maintenance cost.
Final Words
Responsive web design is perfect for anyone especially startups and SMBs who want to revamp their existing websites or to build a new website.
However, if your website is complex and a legacy from the last century and you do not have the resources to rebuild a new one, a watered-down mobile version can be an option.
Mobile-friendly responsive web design is the way to go because it is more affordable with lower development and maintenance costs, gives you peace of mind with fewer technical concerns, and above all, is recommended by Google. This is what most of the web studios implement nowadays.
