Creating websites with a mobile first web design mindset is a must in 2020 and beyond.
The mobile device has changed so much of our everyday lives, from the way we search for information, to stay connected, and for entertainment. For “consumers of the Internet,” the mobile phone or tablet is just as good as a computer, if not better.
It allows anyone to quickly lookup restaurants nearby, request emergency services, navigate anywhere there is a GPS signal, find prices for gas in real-time, and so much more.
Phones are so helpful at connecting people (web searchers) with information (websites). People are constantly looking at their phones.
Whether it is dipping into a quick Internet search while waiting for food at a restaurant, standing in line at a cafe, or anywhere they find downtime in their lives. We are addicted to our mobile devices! Table Of Contents
- How do you know if your website is mobile-ready?
- How can you make your website load faster for mobile users?
- What are good examples of websites that are built with a mobile-first mindset?
- How do you implement mobile-first web design?
How could Google’s mobile first index impact my small business website?
If your website does not work well on phones, and it is not fast on a mobile network, the website may lose rankings when Google implements mobile-first indexing for every website in its search engine.
How do you know if your website is mobile-ready?
Does it offer a smooth user experience for mobile visitors?
If your website was built before 2017, it is likely time to rebuild your website. You might like how it looks, and it might even load fast, but it’s likely not going to be competitive in 2020.
Web design in 2020 is focused on the mobile user first, and computer users. Your website needs to be easy to use on all devices, and it needs to load as quickly as possible. Google says that if a web page takes longer than 3 seconds to load on mobile, you are losing business.
If you have not checked your website on a mobile device, go ahead and do that now. Ask yourself these questions:
- When the page loads, before you scroll at all, is it immediately clear what the page is?
- How long did the page take to load? Did it seem slow?
- Is it easy to navigate the website with one hand and read your page content?
How can you make your website load faster for mobile users?
There are many techniques used to make a website fast for mobile users. However, it does go back to the same core principles of website optimization.
- Keep images scaled small for mobile screens and compress all images.
- Use SVG and WEBP image formats whenever possible. These are generally smaller than PNGs and JPGs.
- Modify the server’s .htaccess to allow better caching and script compression.
- If the website is built with WordPress, WP Rocket is an exceptional tool for fixing a slow WordPress website.
After your website assets are optimized, the next step is to optimize content and page layouts for mobile devices.
What is content optimization?
Optimizing content isn’t just about SEO. You need to be mindful of how your content looks on smaller screens.
When people say optimizing content, they usually mean targeting better keywords for SEO purposes. Content optimization also means making sure the content loads quickly and is easy to read on mobile devices.
We make content friendly for mobile traffic by keeping primary pages easy to navigate on the phone by reducing the number of images and by splitting the written content into shorter paragraphs and bullet lists when possible. This content is easier to consume on mobile devices. Keep content on-point and as thorough as it needs to be, just be mindful of how the formatting you chose.
The content above the fold needs the most attention when approaching design with a mobile-first mindset. This content has to load as quickly as possible and provide enough value to keep the visitor on the web page. It should answer the questions:
- “What is the purpose of this page?”
- “How is it going to help me solve my problem?”
- “How can I get started?”
This information has to exist in a space smaller than the size of a mobile phone screen, AND the user needs to absorb it in less than 5 seconds to be effective.
What are good examples of websites that are built with a mobile-first mindset?
Here are two websites that have good examples of mobile first web design, ready to conquer the mobile web!
Apple.com – It should be no surprise that Apple’s website is an excellent example of a mobile-first web design, prepared for anything 2020 has to throw at it! It only makes sense that one of the largest electronics companies has a website that works great on mobile devices.
Evernote.com – Evernote’s website works great on mobile phones, as you’d expect. For us, the way Evernote presents content for the mobile visitor is why we’ve selected them. Their design uses just the right amount of color, spacing, and bold typography to keep readers engaged and to persuade them to take action.
How do you implement mobile-first web design?
We’re always thinking about the mobile experience when designing websites.
Several years ago, the term responsive web design was commonly found and meant that your website would work on any device by responding to the screen size. This is widely known as being “mobile-friendly.” Responsive web design means the website is automatically resizing written content, image, and stacking material vertically.
Flash forward a few years to 2018. In 2018, we started taking responsive web design to the next level and shifting towards a mobile first web design process.
When we create new websites or pages, we’re thinking about the mobile experience more than the experience for people on computers. We’re mindful of the total data size of each page and making sure any content we’re including carries enough value to warrant being present. Mobile users have less real estate available on their screen and are often looking for quick answers. Remove the fluff and keep it easy to navigate with one hand.
When it comes to mobile navigation, the hamburg is still considered best practice, but that doesn’t mean it’s the only option. Over the years, we’ve experimented with alternatives to the hamburg menu, such as using a floating menu button, a menu bar at the bottom of the page, and other off-canvas navigation systems. At the time of writing this, we’ve swapped out the hamburg menu icon on our website with the text MENU, and it appears to be working out great for us.
There is no one size fits all solution to mobile navigation systems!
Every website is different, and based on who you’re customers are, you’ll have to figure out which navigation system is going to be best for your mobile users.
How else do we implement mobile-first web design techniques?
Optimize for screen sizes and data loads.
We mention keeping page sizes smaller. This is done by compressing and resizing images while using SVG and WEBP image files when possible.
On longer pages, like an archive on a blog or in a collections page of an e-commerce store, a feature called lazy load can help offset the page size.
Lazy loading only forces the content to load when the user scrolls down the page.
A pagination system can keep these pages loading quickly by breaking the big categories or collections into several pages.
If your site has several blog posts or products, you’re going to need an easy to use filter tool system. Traditionally on a desktop computer, the sidebar would be used for filtering.
When designing category or collection pages with a mobile-first mindset, a filter tool should be present near the top of the page.
These category pages need to have the name of the category, a brief description if applicable, and a filtering system (for websites with many posts or products in categories) all available above the fold.
Google wants you to use AMP
Google AMP works but isn’t for everyone.
We can’t talk about mobile-first web design practices without mentioning the big elephant in the room. Google’s accelerated mobile pages system, also known as AMP.
Google wants you to use AMP because they benefit greatly from it, but it can also help your page rank higher on mobile searches.
AMP pages are extra light, mobile-ready web pages on your site that offer less functionality in exchange for rapid loading times on Google searches.
What to know before you add AMP to your website
AMP is not suitable for every website. If your website can load in just a second or two on mobile devices, switching to AMP is unlikely to make a positive impact. We’ve had clients see decreases in conversions after using AMP as part of their mobile strategy. When you have to remove functionality from your website or create an extra step in the user experience to reach the primary parts of your website, you run the risk of losing people’s attention. This is why it’s critical that you test, and test again!
You don’t necessarily need AMP when if you plan ahead with your mobile first web design layouts.
We’re Living in a Mobile-First World
Enough said. You can’t ignore mobile users anymore.