If your website still isn’t mobile friendly, you are far behind in the SEO race – because Google penalizes such websites, which impacts the rankings significantly. Not something you would want, right? After all, more than 50% of the web traffic originates from mobile devices, implying just how essential mobile websites are for any business.
So, how do you create a mobile friendly website? Here are some of our favorite ways of ensuring that your website performs well on simply any device. But before discussing them, let’s see whey mobile websites have created such hype these days.
Like we said, more than 50% of the internet traffic comes from a mobile device. If you still aren’t convinced, check out these stats, and you would want to go mobile right away.
Before you act on our advice, test the current standing of your website with Google’s Mobile-Friendly Test that produces one of the following two results.
When mobile devices were relatively new, separate websites were developed, instead of tweaking the desktop versions. Some businesses still practice this, but it isn’t a great idea because today’s technologies allow you to maintain a single website which is compatible with every device and screen size.
Moreover, let’s not forget that Google also penalizes duplicate content. So if you develop separate mobile and desktop websites, you’d have to change all of the content as well. Too much work and too many hassles. So just have one single website for every single device out there.
And how can this be done? Responsive design – our next tip, and something which many of you would already be aware of.
Responsive design allows you to develop one website which can be viewed properly on any screen size because the frames adjust accordingly. Doing so prevents you from the hassles of maintaining separate websites. Responsive design uses flexible layouts, images, and stylesheet queries, and can detect the screen size of the device from which the website is being accessed. Accordingly, the layout and orientation are automatically modified so as to ensure a consistent user experience for both desktop and mobile users.
Please note that responsive design isn’t the only method for serving mobile viewers. You can also go with dynamic serving, separate websites (they have their cons though like we’ve already discussed) and even a mobile app. But since Google recommends responsive design, it is what we prefer, and you should as well.
Google displays the Mobile Friendly label next to the website on the SERPs. If you want this label to be displayed for your website as well, it should meet the criteria given below.
Viewport is a virtual space which a browser uses for determining the appropriate content scale and size for the device’s screen. For ensuring the same user experience on any device, this tag becomes critical because it is what makes your website perform well on a mobile platform, specifying content that must fit the screen.
A viewport can be configured in many ways, and here is how we usually do this.
<meta name = ”viewport” content = ”width = device-width, initial-scale = 1”>
Desktop users may prefer fancy websites, but for a mobile device, the design of your website should be minimal. Too fancy designs often have large and bulky elements that may decrease the loading speed. Simple designs appear on the screen quickly and garner attention more effectively.
Mobile devices have a smaller screen than desktop PCs, making font sizes and button positions an important element. The recommended font size is 14px, slightly bigger than normal, but that is fairly okay because your website content should be easy to read without the need to zoom in the page. However, if you have uploaded any forms to be filled or have labels, then a smaller font size of 12px is more appropriate.
Like the fonts, bigger buttons are preferable because they are more prominent if they specify any CTAs. Bigger buttons are harder to miss out, and there are fewer chances that a user will press the wrong one. Apple suggests that buttons should have a minimum size of 44px × 44px. As for the positioning, any CTA buttons should be above the fold.
As simple as they may seem, remember that both the font size and buttons do drive conversion rates, especially if your website hosts an online store. So be really careful about where you place them and what size they should be.
High-resolution images are essential if you want your website to perform well and provide a topnotch user experience. And for mobile devices where the images are right in front of the visitor’s eyes, this becomes even more important.
The latest iOS devices feature high definition screens, requiring images of twice the resolution for desktop websites. This ensures that your images are not pixelated or appear blurred when displayed on a retina quality screen.
We already talked about the viewport meta tag, but it alone isn’t enough. Using the same tag, you should set up customized variables as shown below to disable auto zoom.
Enabling auto zoom disrupts the position of various elements, affecting navigation, and hence, user experience.
<meta name = ”viewport” content = ”initial-scale = 1”>
On what platform do you upload the videos featured on your website? If there are too many videos, they are viewed differently on mobile devices, and often affect site performance negatively. Upload all videos on YouTube, and then embed on your website pages. YouTube already runs on a responsive design, ascertaining that all videos are played properly on any device. So you don’t have to take any of the steps that are otherwise required for mobile-friendly videos.
Your mobile website may be designed impressively and may also perform well, but you should still give your visitors the option of switching to the desktop version if they want to. Some of them would want to avail this, so make sure that you don’t constrain their experience in any way.
Great, so your mobile website is already developed. Now make sure that you didn’t make any of these common optimization mistakes.
Generally, mobile browsers face problems when displaying license restricted or Flash content. Issues are also encountered if your website requires visitors to install an uncommon player. Avoid all these things for an impressive mobile experience.
Considering mobile websites, a faulty redirect is one that points users to an incorrect equivalent of the desktop URL. Such issues are reported on the Google Webmaster Tools page, so do a review and rectify them.
Some pages load fine on a desktop browser but may return the 404 error on a mobile device. Eliminate 404 errors and ensure you’re redirecting users to correct equivalent pages.
If you have a mobile app, don’t push your users to download. Yes, you should advertise and promote the app, but this should not include preventing users from viewing content on your mobile website unless the app is downloaded. Doing so generates indexing issues, affecting user experience.
All internal links should take users to pages that have been optimized for mobile, and not the desktop versions.
Speed is an important factor for both desktop and mobile websites. So, test the speed and take the necessary steps, if it requires any improvements.
We just cannot emphasize on this enough. When your mobile website is up and running well, test it thoroughly, first on a smaller scale, and then on a bigger one. And do this on all several devices and platforms including iPhone, Android, Windows, and other mobile operating systems. Test the pages, buttons, navigation, user actions, and other important aspects unless you’re sure that your website will perform as desired.
And by the way, even if you haven’t made any major changes to your website for some time, you should still test it regularly.
You’ve made use of all our tips and have developed a mobile-friendly website. But how much does Google love your site? This is where SEO comes in, and unless, you adopt some best practices, your website rankings won’t improve.
Let’s take a look at some essentials of mobile SEO, but we’ll save the details for another future post.
So what’re your favorite ways of ensuring a mobile-friendly website? Do let us know!
I posted this project and within minutes guys from CodeIT bid on the project. I asked a few questions through Skype to feel confident that they could do the job. I felt comfortable with the knowledge and skills and accepted their offer. I am usually hesitant to hire from offshore. Not because of the work quality but, usually the language barrier and working hours. Guys from CodeIT was available during NY working hours and after pre-screening on Skype, I could tell they know English well.
This was the biggest project I’ve made so far and CodeIT helped me and our company through it in a perfect way.
Working with one very skilled project manager and multiple developers and testers with him made our project fly in a very short period of time, and with a super high quality!
Collaboration with CodeIT gave my business great prospects for its expansion and scaling. Together with CodeIT professionals, we grew our product line from three to fourteen products within only one year. I can rely on these guys to get a high-quality product on time.
I wanted to personally thank you for your hard work on this. Working with CodeIT turned out to be a really pleasant experience for us.
Since the beginning, your team seemed to be really well structured and everyone understood its role and responsibilities.
Also, the quality of the work CodeIt delivered was exactly what we expected it to be.
This really facilitated our daily work and help us to keep the client happy.
I hope this first experience working together help us to build a long-term partnership.
I have worked with CodeIT for over a year now on a complex application development project and they have been excellent. They have been flexible with scaling resources up and down as I’ve needed it, their project managers have been extremely responsive and I hear from them every day and never have to wonder where they are as I have with past outsourcing projects. Highly recommended if you’re considering outsourcing software development.
CodeIT has been working for us for one and a half years. We are ending the project now because it is complete. CodeIT built our platform from scratch and also provided further development and support for the rest of the contract. They are very strong in several areas: back-end development (specialising in Zend Framework); front-end development; server administration; project management. Their project managers speak excellent English and are courteous and professional. Their developers are fast and skilled, and up to date with the latest technologies. Their expertise helped us to build a highly reliable website which can serve a heavy load of traffic. Finally, they are all very nice people, and I cannot recommend them highly enough.
This was our first project, and I am so happy that it had a smooth run and a successful resolution.
I sincerely hope that this is just the first step in our long and mutually amiable partnership.
Thank you CodeIT team for being so thorough and professional.
Feel free to contact us. We will answer all your questions and provide you with fast and thorough feedback.