Your website should look its best on any device.
How we consume the web has changed significantly over the last few years with the widespread adoption of internet connected mobile devices. Visitors to your website are viewing it on all sorts of devices that have different screen sizes and resolutions.
The prevalent thought in the past was to offer users a mobile site or an app that would give them an experience optimized for their mobile device. One issue that arose out of this is the ubiquity of the web. Users are more likely to use the web than to download an app; out of habit and because of ease of use, especially in instances where they are trying to find out information about a local business.
I am reminded of a local tow company that developed a mobile app that allows users to call, book an appointment, give their location via GPS and go to the business’ website for more information. I do not have exact usage statistics, but the combined downloads from Google Play and the Apple App Store over four years appear to be in the 1,000-2,000 range. The feedback from users provides great insight as to how the app might have missed the mark, and probably is not be the best solution for this local business.
Realizing that not everyone would download their app, and since their website was not displaying properly on phones, tablets and other mobile devices, the tow company had a mobile website developed that allowed users to access their information on mobile devices. At this point the tow company essentially had three completely independent websites, which would force them to update and change information in three different places in order to have consistent information on their website, mobile website and app.
( I am sure their web developer loved the billable hours that accumulated! )
If your content is important enough to be on your main website, shouldn’t it be available for users on your mobile site or your app as well?
One of the most frustrating experiences I have had with this lack of consistency of information with multiple websites is on the Missouri Mavericks website. They employ the have two independent websites strategy, which causes issues when you click on shared links as well as in search results for their website. The links all go to their main (non-mobile) website, which is great if you are on a computer, but when on a mobile device, a redirect pops up saying “Use Our Mobile Site” which when clicked goes to the homepage of the mobile site. Whatever you were searching for or trying to go to is inaccessible through the mobile site since the content is not consistent across both platforms. This creates the worst possible user experience, since the user is more likely to quit trying to find the information than they are to access it through a desktop computer.
If the link structure were the same, then the information would be accessible on both sites. For example if we were looking for their schedule, on a desktop computer we could go to http://MissouriMavericks.com/schedule. This page redirects to http://MissouriMavericks.com/mobile when used on a mobile device. The user then has to begin searching for how to get to the schedule instead of the website either redirecting to the correct page or showing the correct information.
Fortunately, there are ways to strategically work around these issues using modern coding practices. This is where mobile-first responsive design comes into play. The size of the user’s screen should not dictate what the user can access as much as it should change the resources it uses to deliver the information more quickly. Large images and complex code should be either omitted or sized down to deliver files that are much smaller in size to make up for the bandwidth and hardware restrictions on a mobile device.
By using responsive design principles, you not only create a more fluid user experience between mobile and desktop, but you also create a streamlined process for creating and updating content. This allows you to maintain your content in one centralized place, while the code transitions the size of the elements of your website to be optimized for the users computer or device. The website link structure stays the same, so http://page.com/about-us is the same on a phone, a computer or a tablet. This allows your content to actually be shared and engaged by users on any device without the restrictions of the desktop website / mobile website / app conundrum.