These days everyone is always on the go, working on public transportation, in waiting rooms, and cafes. Work is no longer contained to your desktop computer, meaning more often people are searching for information on the go and viewing websites from their mobile phones. With this new trend, it is important to make sure your website is mobile-friendly. Since screen sizes are smaller than desktops, there are a few things to keep in mind to make your website optimal for mobile viewing.
Don’t create a separate mobile site
Advances in website development mean it is no longer necessary to make a separate mobile site, in fact, it is best not to create a separate mobile site. If you create a desktop version and a mobile version, you will have two separate sites you need to maintain. This means every time you make an update you have to perform the change to the desktop version and the mobile version, doubling the amount of work. Another reason not to have a separate mobile site is Google will actually penalize websites for not having mobile-friendly pages. This means they will decrease a sites ranking in mobile search results. Luckily, the following design tips will help streamline the amount of update work and ensure you stay in good standing with Google.
Using a responsive design is key to building a mobile-friendly website. Responsive design means you can create a website that will automatically adjust to the size of the device the viewer is using. When someone visits the site, it will detect the visitors screen size and automatically adjust accordingly. That is why when you view a website on your mobile phone you can still read all the content even though your screen is significantly smaller than a desktop computer. Responsive design adjusts the website to fit desktop computers, mobile phones, and tablet devices. This means you can create one version of your website that will adjust to display correctly on all devices.
Creating a simple, minimal, site layout will ensure the mobile viewer can navigate through your site with ease. When you are limited to a screen size it is hard to click through multiple pages and people will often lose patience before they get to the content they are actually trying to view. Keeping things simple will also allow for faster load times on mobile. With limited screen space, you want to determine what you want the viewer to focus on and make sure that is clearly displayed on the screen. Creating a complicated, busy page layout will not translate well to mobile, simplifying the design and content will be greatly beneficial and allow the viewer to easily view the content.
Revamp menu for mobile
Removing or reducing the number of dropdown menus will also help optimize your viewer’s mobile experience. Drop down menus you often see on desktop versions will not translate well to a mobile screen where there is limited space to see the drop down options and be able to select one. Reevaluating your menu layouts to work better for mobile will create a smoother end-user experience.
Font and button size
Choose a font size that is large enough to read on a mobile device without zooming and you will instantly have a more mobile-friendly site. Also, make any buttons present on your site large enough to catch the viewers’ attention and allow them to click on them without needing to zoom. This will allow them to follow through on a call to action such as “add to cart” or “buy now.”
Lastly, don’t forget to test your website on several different types of devices. Every phone will display differently, so it is best to view your website on every possible device from Apple to Android and Windows phones. Follow these 5 steps and you’ll be on your way to a smarter, mobile-friendly website.