Responsive Design vs Mobile Websites
March 23, 2015
Unless you’ve been living under a rock the past five years, you are no doubt aware of the importance of considering mobile devices such as smartphones and tablets when developing a website. It is frustrating trying to view a website on a mobile device that may be difficult to read or navigate, or worse yet, not work at all. As these devices have become a ubiquitous part of everyday browsing habits, we have come to expect that when we visit a website on our iPhone or Android tablet, that it will simply work.
The most obvious solution to enable strong mobile user experiences is to load different design templates programmatically or to re-direct users to dedicated mobile or tablet websites altogether.
Perhaps less obvious, despite it’s growing adoption, is the use of Responsive Design techniques to accommodate the screen resolutions and unique functionality of mobile devices.
A website employing Responsive Design uses CSS techniques to modify its layout in response to the screen resolution of the visitor’s device. This technique allows the website to be served directly from one URL, without directing visitors to mobile sub-domains.
Are you with us so far? What may not be clear are the advantages and drawbacks of the Responsive Design approach and those of a separate mobile site.
Why Responsive Design?
Single code base – The website can be based on a single code instance rather than needing to keep track of and controlling multiple sets of code. This keeps ongoing maintenance and development costs lower overall.
Flexibility – Design changes can be deployed rapidly. New website features can be deployed across multiple devices in one code release, designed to work across all devices.
Not just about mobile – Responsive design is based around resolution, rather detection of device model or operating system. The same approach used to deliver a mobile or tablet layout for smaller screens can also be used to improve usability and aesthetics on larger screen sizes or user-changes to their browser window size as well, allowing designers to make use of high pixel density retina display, 4k devices as well as lower resolution desktop and handhelds.
SEO – SEO is heavily dependent on incoming links to your website from partners, bloggers and social sharing. Creating an m. subdomain for your mobile site can dilute this “link juice”, negatively effecting PageRank as shares of your content may be split between two different URLs. Google also penalises repeated content across different websites. Responsive design with its singular URL avoids this issue.
Easier for repeat visitors – Visitors who are already familiar with your desktop site should have little trouble navigating and using your responsively designed site on their mobile devices. Likewise, visitors switching from mobile to a desktop viewing experience will generally feel right at home.
Why not Responsive Design?
Difficult to implement post-launch – Truly effective responsive design needs to be considered during the initial design phase. Adding responsive design functionality to an existing website can be difficult and time-consuming (read costly!).
Requires a design re-think – A lot of graphic designers seem to have not quite caught up to the responsive design paradigm of grid-based layouts, percentage-based grids, scalable images and re-usable elements. Not all designs will suit this approach.
Visitors can’t easily view the “Desktop version” – Because of how responsive design works, visitors generally can’t access the full desktop version from their mobile device. Because the layout that is loaded is dependent on the device being used.
Why a separate mobile site?
Control – As the layout will be completely unique to the mobile version of the site, every part of the site can be fully mobile optimised and customised. If desired your mobile/tablet site can be radically different to the desktop version.
Easier and cheaper to add post-launch – If you already have an established desktop site you are happy with and want to create a mobile experience for your visitors, it is likely easier and more cost-effective to launch a separate mobile site as it does not require you to recode the existing website.
Users can override the mobile layout – A lot of users hate mobile sites and would much prefer to load your desktop site on their phone or tablet (regardless of how small the text may be). Mobile Safari and Chrome both offer a “Request desktop site” option that will allow for this.
Why not a separate mobile site?
Multiple codebases – Developers will need to maintain multiple instances of site layout code. This can make ongoing maintenance inefficient and create delays in making layout changes.
SEO – There’s rarely a one-size fits all approach to SEO, and there are certainly ??? exceptions, but generally having a separate m. sub-domain is an SEO no-no. As mentioned above, it can greatly dilute your “link juice” and runs the risk of repeated content penalties.
Not future-proof – Your mobile site will be harder to update in the future to accommodate changing trends in mobile devices.
Our Verdict?
In the majority of cases, the Bridge recommends the Responsive Design approach. It is a technically superior and flexible mobile solution and reduces the cost of both up-front development and ongoing maintenance for new website projects.
Dedicated mobile sites still have a place, particularly, as mentioned, as a means of implementing a mobile or tablet experience for an existing website where a full design or code overhaul is not required. Mobile sites, arguably, can provide a more highly optimised, “best-of-breed” user experience, but outside of extremely high-traffic, interactive sites like large careers pages, social networks or other highly interactive concerns, this is an unnecessary solution. In fact, for these sorts of websites, a dedicated mobile app may be an even better solution for servicing their audience. But that’s a topic for another time!
Feel free to call us for a chat on 02 9993 3300 or email lawrence@thebridgedigital.com.au