More people access the web with mobile devices such as smartphones and tablets than desktop and laptop computers. Thus, Google requires websites to be mobile-friendly to show up in mobile search results. So, it is essential to have your site optimized for mobile.
To find out whether Google sees your site as mobile-friendly, you can check your site with Google’s Mobile-Friendly Test tool. How did your site fare? If it did well, you are good to go! If it could use some improvements, read on!
Responsive and Adaptive Design
A mobile-friendly website starts with a responsive or adaptive WordPress theme. Responsive design means that as the screen narrows, so do the elements within the screen. This is ideal for smaller screen sizes such as smartphones.
Adaptive design is similar except that when the screen narrows to a specific predefined breakpoint, the elements will adapt. This works well for larger screen sizes. You can even see this at work on your desktop computer. Go to Iceberg Web Design’s home page and then slowly make the browser window smaller. As you do, you will see some changes take place. The menu changes, text, and images get smaller.
If your site is not responsive or adaptive, it was likely built before the responsive code frameworks came out. In that case, it will be easier to rebuild your site with the current code.
Create a Mobile-Friendly Site from the Beginning.
It starts with the design of your site. It helps to keep in mind that your site will have to look good on a small screen. It isn’t just a shrunken version of the way your site looks on PC. Using a grid helps a lot with this. They make your design more balanced and appealing. They offer the ideal adaptable structure that works well for both a full-sized desktop and mobile design.
Make your content Mobile Friendly
Remove distractions on the page. This is clutter on the page that slows load time and makes it harder for users to get to the information they want to find. You can help users find what they need most by showing your most important information at the top of the page. Then, offer additional information when people ask for it.
Use large, standard fonts to make copy easy to read and buttons that are large and ideally at the bottom of the screen and opposite of the thumb.
Don’t just shrink the screen. Stack it.
When adapting a page for mobile, you may come across columns that become too narrow to be of any practical use. You should stack one on top of the other to create a more visually appealing, mobile-friendly page.
Adapt your images for Mobile
As your screen-size gets smaller, you will want to reduce the size of icons, images, and other visual elements. Play around with it a bit because you don’t want these design elements to become so small that they are useless.
Pay Attention to Your Navigation Menu
A full menu isn’t going to span your smartphone’s screen the way it does your desktop screen. It would be much too small to read. At Iceberg, we use something known as a “hamburger menu.” It’s different from the one at your favorite drive-thru. The hamburger menu compresses your menu into a vertical, tappable, drop-down menu.
Keep the Mobile User in Mind.
Desktop users are sitting at home or in their office. Mobile users are usually on the go. It’s essential to keep this in mind when designing your site. On desktop computers, it’s common to see a call to action asking the user to download something free such as an article (usually in exchange for their email address). On a mobile phone, that’s not practical. Sometimes changes must be made right down to the content. In this case, when the screen is a mobile configuration, the call-to-action can change to request “Get the Free Article.” You still request their email address, and the article gets sent to them so they can download or print it later at their convenience.
