7 Tips to Make Powerful Mobile Friendly Website
Unless you’ve been hiding under a rock, you probably know that Google is now using mobile-friendliness as a significant ranking factor. Sites that aren’t properly optimized for mobile devices will achieve lower rankings in mobile search results; and given that mobile internet usage has now overtaken desktop usage, this is no small matter.
If you noticed a drop in your search rankings after Google’s April 21st update, you probably already clued in to the fact that your site isn’t properly optimized for mobile. However, if you’re still in the dark as to whether or not your site is mobile-friendly, this post will help. Here are 7 Tips to Make Powerful Mobile Friendly Website.
Don’t make a separate mobile-friendly website
In the past, when we designed websites for the “mobile web,” we would cut out content to fit for mobile use and argue which parts are more suitable for mobile. However, we can’t control what kind of content our users want, and we can’t say that mobile devices are so fundamentally different from our desktops that mobile has to have its own web space.
Last time I checked, there’s only one Google, and if Google penalizes us for duplicated content already, then having two websites—one for mobile and one for desktops—with the same content defeats the purpose of trying to show up on Google’s search engines. So you shouldn’t create a separate website for mobile.
Use responsive design
Responsive design allows website developers to create a site that will be easily viewable on different sizes of devices. This reduces the amount of work website developers have to do when it comes to creating a website.
The responsive design approach makes use of flexible layouts, flexible images, and cascading stylesheet media queries. When responsive design is used on a website, the web page will be able to detect the visitor’s screen size and orientation and change the layout accordingly.
Always include a viewport meta tag
The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized. Which is why it’s a critical code when building a multi-device experience. Without it, your site will not work well on a mobile device. What the viewport meta tag tells your browser is that the page needs to fit the screen. There are many different configurations that you can specify your viewport to control. Here’s what I recommend in using at the head of the document (this only needs to be declared once):
make your website mobile friendly with the viewport tag
Font sizes and button size matters
Your font size and button sizes matter a lot for mobile devices. For font size, it should be at least 14px. This may seem big, but instead of having your users zoom in to read your content, make it easier for them by adjusting your font size for maximum legibility. The only time you should be going smaller, to a minimum of 12px, is on labels or forms.
As for buttons, the bigger the button, the better—it reduces the chances that the user will miss it or hit the wrong button by mistake. For example, Apple’s design guidelines recommend button sizes to be at least 44px by 44px. Following these guidelines will help you maximize your user’s experience on their mobile device and increase conversions for e-commerce sites.
button size matters to making your website mobile friendly
Use high-resolution images
Just like on Instagram, hi-res images are extremely important on your responsive websites to ensure your user’s experience is of a high standard. The latest models of iOS devices have high-definition screens that require an image double the resolution of a desktop. Having extremely high-resolution images will help you avoid having pixelated or even blurry images when viewed on a retina-quality screen.
Remove the default zoom
Auto-zoom can really mess up your layout elements, especially for images and navigation content. They may appear small or too large in your layout. To remedy this, use the viewport meta tag to set up custom variables within the content. Make sure you include this tag in your <head> HTML.
Remove the default zoom to make your website mobile friendly
Never stop testing
Once you’ve created your responsive website, test it, test it for the second time, and then test it again. I don’t just mean “try it on one mobile device multiple times;” test it out on an iPhone, an Android, a Windows phone, and different tablets. Test every page, user action, buttons; and while you’re testing, it’s always important to put yourself in the position of the user, or ask someone who didn’t design it to test it for you.
I hope these tips provide you guidance into knowing how to make your website more mobile-friendly. With one of the biggest digital marketing trends of 2015 being mobile, there’s no reason for you to not to set your business up for mobile success.