Tag Archives: friendly-navigation

The post What Is A Mobile Friendly Website? appeared first on HostGator Blog . What Is A Mobile Friendly Website? Spend some time researching how to build a website and you’ll see terms like mobile-optimized, mobile-friendly, and “mobile first.” Mobile is a hot topic in website design because we do most of our searching and a lot of our shopping on our phones now, but most websites were built with desktop users in mind. Mobile users need sites that work well on small screens, use touch controls, are easy to navigate, and load fast. What does your site need to be mobile-friendly ? Let’s go over the basics.   What Does a Mobile-Friendly Website Look Like? Let’s focus first on the way a mobile-friendly site looks, because visitors will decide at a glance whether they want to stay on your site based on its appearance. There are four basic elements a good mobile-friendly template or custom design will include: 1. Responsive Page Display Responsive design is the foundation of a mobile-friendly website. Without it, a smartphone or tablet user who visits your site will see a miniaturized version of your desktop site, which means they’ll have to scroll vertically and horizontally to find anything—and that means they’ll just leave and go somewhere else. A responsive site design, whether custom-built or based on a template, automatically displays your site properly on whatever type of device a visitor is using, whether they’re using it in portrait or landscape orientation. 2. Readable Fonts Mobile friendly templates will include fonts that are easy for mobile users to read, but you may want to play around a bit with the fonts, especially if you have a logo that uses a particular typeface. Sans serif fonts with clean lines are generally the easiest to read on mobile devices, where glare and screen size can make serif fonts and novelty fonts like script hard to see clearly. And go up a size on your fonts—no one wants to try to read tiny text, even if it’s sans serif. 3. Proper Text Formatting. Keep your blocks of text short and break them up with headlines and bulleted lists when it makes sense to include them. It’s hard for our eyes to track close-together lines of text on small screens, so big paragraphs make it more likely that your visitors will lose their place and get frustrated. 4. Optimized Media Display. Test your images, infographics, and videos to make sure they look right on phones and tablets, without requiring users to scroll or resize their display to see your media.   What Does Mobile-Friendly Navigation Mean? Once your mobile visitors arrive, how will they find what they need? Mobile friendly navigation factors in the hardware and user-interface differences between desktops and mobile devices. Think Touches and Taps Rather Than Mouse Clicks. Websites designed for desktop users are easiest to navigate with mouse clicks, not swipes, taps, and touches. There’s no mouse on a smartphone, so you’ll need to give mobile users a way to navigate using touch controls. Reduce the Need for Data Entry. Trying to type on a smartphone keyboard is just the worst. Between the tiny keys, random auto-corrects, and auto-fills that may or may not populate fields correctly, it’s something most mobile users prefer to avoid. Voice-to-text isn’t much better, and it’s not always an option (say, on the train during morning rush hour). Organize your mobile site so people can find what they need without having to type in the search field, or contact with you without filling out a contact form. Shorten the Distance from Point A to Point B. Flat site architecture is your friend, because it helps mobile shoppers find things on your site without having to tap through too many layers along the way. A retailer that does this well is 6pm.com. Their store contains a vast number of items, but the mobile site’s menus and filters are easy to access, so it only takes a few taps to go from the home page to sandals in my size. The mobile site also offers visitors the option to download a lightweight (17 MB) app, which offers a modular menu design that’s easy to read on a phone.     How Fast Does a Mobile-Friendly Website Need to Be? Faster is always better. A mobile-optimized template or design that streamlines the number of requests a user’s browser makes to load your site, plus a web hosting service that loads your pages fast, will go a long way toward making your site more mobile-friendly. Want to see how your site fares now and track improvements? You can use Google’s PageSpeed tools to compare how quickly your site loads on mobile and desktop devices . There’s also a Mobile-Friendly testing tool that evaluates speed plus other elements. Both of these tools give you a list of tips to make your site faster and more mobile-friendly, along with links to resources to help you make those changes. Want to really speed things up? An accelerated mobile page (AMP) is a lightweight app-like tool that’s easy to build and use. The AMP was created to help solve the problem of laggy load times on mobile devices, and if your current mobile site isn’t performing well on Google’s page and mobile tests, an AMP may be the answer.   How Does a Mobile-Friendly Website Help Your Business? All the work you put into making your site mobile-friendly can pay off in the form of more business. Google says that 94% of American smartphone users “ search for local information on their phones,” even if they have access to a desktop. And when people are searching for local businesses, they’re usually ready to make a purchase . By making your site easy to find and easy to use on mobile devices, you’re more likely to earn their business. To rank well in local searches, claim your Google My Business listing and make sure you’re following other SEO best practices .   Build Your Mobile-Friendly Website Get started on your mobile-friendly site today with the HostGator Website Builder . Choose from over 100 mobile-friendly templates! Find the post on the HostGator Blog Continue reading →