Is Your Website and Mobile Devices BFF?
As a web developer for many years, one of the most important things I focus on is accessibility. It is crucial for your visitors to be able to access your website regardless of what device they are using. Before mobile devices, the big question with compatibility involved browsers – in particular, Internet Explorer. Eventually, I dropped support for users using IE8 or older. Actually, I don’t support IE anymore – as in, I don’t test my website on IE. If you check browser trends, IE market shares are declining even if Windows is still the “popular” OS. Here’s a nice page that show trends for several years – http://www.w3schools.com/browsers/browsers_stats.asp.
As of late, mobile device internet usage is increasing – http://gs.statcounter.com/press/mobile-internet-usage-soars-by-67-perc. What does this mean? Well, if your website isn’t mobile friendly, users may not want to visit your website when they’re on their mobile devices. People want a great experience, they want ease of use. This is how Google is ranking mobile search results. If in the past your website ranks high in search results, your ranking may be different in mobile search result ranking if Google considers your website not mobile friendly. Starting April 21, 2015, http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html. If you are unsure how this will affect your website, you can test to see if it is mobile friendly at https://www.google.com/webmasters/tools/mobile-friendly/. It will scan a web page to see if it is mobile friendly.
So how would you go about improving your website to be more mobile friendly? There are a couple of ways to address this.
1. You can leave your website as is and create a version for mobile devices. What you can do is have code that detects the viewport of the device and have them redirect to your mobile version of the website if it’s necessary. So you’ll have something like domain.com for desktop users and m.domain.com for mobile.
2. You can do adaptive design. How this works is your website will have several different layouts that address different devices. If it detects a desktop is being used, it will use the layout for desktop. If it’s mobile, then the mobile layout will be used.
3. Responsive web design. This is the approach I personally prefer. You pretty much design with mobile first intention. This blog uses responsive web design and has been mobile friendly for quite some time.
I am not a great designer, but I am better at development. A great help to achieve responsive web design is Bootstrap. It is free and open source. If you haven’t heard about it, you should check it out. There is also Foundation. You don’t have to use these tools but it can help you save time on development or you can use the techniques as reference and roll out your own.
The most important thing to get out of this is to improve online experience regardless of the device you are using. Otherwise, people may not visit your site or stop going to your site.