Did you hear about Google’s latest algorithm “Mobilegeddon,” if not, you definitely have missed a lot. Last April, Google releases a new mobile-friendly ranking algorithm that’s designed to give a boost to mobile-friendly pages in Google’s mobile search results; moreover, it punishes any website that lacked mobile-friendly pages by decreasing the site’s ranking in mobile search results.
However, there’s a knowledge barrier when it comes to creating a mobile-friendly website. What do you do first? Unfortunately, the mobile web development space introduces a layer of complexity that can be difficult for some business teams. Developing websites that are mobile-friendly is more than just cross-browser; it’s about cross-platform
We’ve collected below 10 tips to keep you safe from being punished when creating a mobile-friendly website:
1- Be responsive.
Use a responsive technology framework. These frameworks are basically simple ways to lay out elements in a grid and then shift that grid based on different screen sizes, so that elements on a large monitor are spaced just as well as they would be on an iPad or smartphone.
2- 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.
3- Think with your thumb (or index finger).
Make sure your site is completely navigable with one thumb and requires no pinching to use , This is one of the most important tips for any mobile site as you want users to be able to navigate your site with their 'phone hand' without the use of a second hand.
4- Plan Your Site Layout
Mobile web pages will load slower than traditional web pages, so it’s important to keep the number of pages to a minimum. In addition, users won’t have the patience to click several pages deep on your site. Given that, it’s important to keep the site layout as streamlined as possible.
5- 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.
6- 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.
7- Be Clear.
Keep your mobile pages as clear as possible. If it’s needed to access the full information on some issue, there can be a link to the full version of your website.
8- Avoid Flash or Java
The obvious reason for avoiding Flash is that Apple products do not support Flash and have declared that they have no intention to do so in the future. Because iPhones make up about 30% of the smartphone market, a significant portion of your audience may not be able to access your content if you use Flash. Similarly, many phones do not support Java, and even if they do, using Java can be a huge drag on load time.
9- Test Whether Your Pages Are Mobile-Friendly or Not
Google has a simple tool to help you check whether your website is mobile-friendly. This test will analyze a URL and report if the page has a mobile-friendly design.
10- Test for Compatibility.
Define the range of devices so your website could be properly tested on them: various devices, operating system versions and screen resolutions. Development companies have storage of mobile devices for testing, so you only have to choose.
If you adopt all, or even most, of these guidelines you will make design for mobile much easier on yourself.
Can be found on Techwebies
Top comments (0)