Mobile-first Websites – What, Why and How
With Google extending its mobile-first indexing to the end of March 2021, you’ve got enough time to turn your website into a mobile-first design. That is if you are not already there. Google has stressed the importance of mobile-first designs for some time now. So, what does that mean for your website? Our web expert team from Perth decodes all the information around Google’s mobile-first indexing and mobile-first designs.
What is mobile-first indexing and when will it be implemented?
Google has historically used the desktop version of a website to rank for a search query. With mobile-first indexing, it will now use the mobile version of a website for indexing and ranking. Going forward, Google will crawl websites with a smartphone Googlebot.
Google’s mobile-first efforts have been some years in the making. Though Google has used mobile-first indexing for new websites since July 2019, it will be applicable for all websites from March 2021 end.
Why is Google so keen on this?
With mobiles overtaking the desktop as the device of choice to access the internet, it is only natural that most websites are optimised for mobile searches. Google has always maintained that user experience is primary, and the mobile-first initiatives are in line with this sentiment. In March 2020, Google announced that 70% of sites have already shifted to mobile-first.
How do you find out if your website has moved over to mobile-first indexing?
You can check this in Google Search Console. Under Property Settings, you can see whether the Indexing crawler is Googlebot Smartphone or Googlebot Desktop with the date of the switchover. You can also check within the various reports in Google Search Console, the user agent being used for reporting – Smartphone or Desktop – against the Primary Crawler. The various charts also show the date when the switchover happened. These data help you understand how the switchover to mobile-first indexing has affected your site’s performance, and what you need to do improve your site’s performance.
So, what is mobile-first website design? Why it is so important?
Mobile-first design, in simple words, means creating websites primarily for the mobile user. It means starting the website design process for mobile screens first. Creating websites that are optimised for mobile screens ensure that your website performs well across devices.
Apart from Google’s mobile-first indexing, it is also important for business owners to understand the expectations of customers. With mobiles becoming the preferred device for connecting to the internet, customers expect websites that perform well and provide a good user experience on the small screen. If your website is not mobile-first, you lose out on ranking results, and you’ll lose existing customers to bad user experience.
Is your website ready? Free check up.
Why not responsive designs, then? Which brings us to the next point.
What is the difference between mobile-first and responsive designs?
Let’s look at two design concepts that have somewhat lost their buzz nowadays, but can help understand the difference between the two better – Graceful Degradation and Progressive Enhancement.
Graceful degradation is when you create a full standard website with the maximum content and features, and then scale down to fit smaller viewports. Generally, this means creating a website for the desktop and then scale down the site for mobile devices.
Progressive Enhancement is when you create a lean site with the most vital elements for the smallest viewport, use the available screen real estate and processing power in the best way. This way, you can take an already good-looking and fully functional site and scale it up for larger devices.
A mobile-first is a design strategy and largely based on progressive enhancement principles, while a responsive design is a technical approach and largely based on graceful degradation concept.
With responsive web designs, you will get different views on different devices as the designs respond to device display sizes—the content shifts to fit the display size, which causes for bad user experience. The mobile versions are generally watered-down versions of the original site, as it is a tough task to take out features from a fully-functional feature-rich site.
With mobile-first design, you get a website that is designed for mobile device users. It’s not just about websites that work well on mobiles; it’s about proactively creating websites for the mobile user.
Are mobile-first and mobile-friendly the same thing?
Doesn’t it mean the same thing? No, it doesn’t.
While both may look like similar terms, there is a fine difference. Mobile-first site is designed primarily for the mobile device. A mobile-friendly site is one which also works well on the mobile.
Convert your website into a mobile-first one. Start now!
Mobile-first strategies
Lesser content
Yes, longer posts do create more leads than short posts. But readers on mobile devices are looking at small screens. They would expect short sentences, clean fonts, compact paragraphs, and enough whitespaces. Mobile-first design is all about content – concise, informative and short sentences.
Get your CTAs in order
Remember that your audience is responding to CTAs on mobiles. Your CTAs should be mobile-first too. There is nothing worse than filling in a long and impossible to fill lead-generation form. Or clicking on a landing page that does not load on a mobile.
Some tips for effective mobile CTAs –
- Consider placing them on the high thumb and scanning activity area on the screens.
- Use white space around CTAs.
- Use icons to make them more visible.
- Use bold letters and buttons instead of text-only CTAs.
- Try to keep only one CTA per page.
Speed!
Speed is not just important for a good user experience; it is a ranking factor too. The average loading time expectation is 3 seconds. Users are also less likely to revisit a site if they have experienced site speed issues on a previous visit.
Some tips for a fast loading mobile site –
- Compress images to the exact size needed.
- Use CSS wherever possible instead of images for effects.
- Minimise redirects, if eliminating them is not possible.
- Minify HTML, CSS and JavaScript.
- Enable browser caching.
- Installing Mobile Content Delivery Network can speed up your site enormously.
Go simple
Keep only those website elements that are truly needed for your site to be functional. Think from users’ perspective on what they really need to see as soon as they land on your site. You can always add an improved search function for further searches.
A few tips on keeping your mobile-first site simple –
- Use simple and large fonts.
- Keep enough white space to avoid a cluttered look.
- Reduce the number of pages
- Identify the most important elements and add improved search feature for other elements.
- Try for a single column or two columns at the maximum.
- Reduce the number of steps needed from visit to action.
Don’t forget to test
When you design a website for a mobile audience, you need to think from a mobile user’s perspective. So, test your site on a real mobile device and not do guesswork on a desktop. Is the text legible? Are the click elements suitably spaced? Is the CTA suitably placed? Are interstitials causing bad user experience?
You will also need to test your site regularly and across platforms. There are new phones coming out every year. You can use a cross-browser and platform tool to test how your site performs across devices and OS.
Is your website optimised for mobile-first? Test now
Mobile-first best practices
- Google suggests not using separate mobile URLs, as it confuses users and searchbots alike.
- Ensure that Google searchbot can crawl your JavaScript, CSS and image files for optimised rendering and indexing.
- Ensure that your videos are in a mobile supported format. Using HTML5 standards works well across all web browsers.
- Interstitials or overlays that completely or partially cover the page content make for a bad user experience. Use banners for promotions instead.
- Ensure that your touch elements like buttons and links are suitably sized and placed for a mobile screen. Touch elements set too closely can cause users to tap neighbouring elements.
- Use legible font sizes. Too small fonts force users to zoom to read, leading to bad user experience.
- Ensure that ads are suitably placed to avoid bad user experience. A common mistake with mobile sites is setting up the ad at the top of a page. This takes up a lot of space and the user cannot get to the main content as soon as the site opens up.
These are just a few of the things that you would like to keep in mind while designing your site for mobile devices. It’s a big topic and can’t really be fit into a single blog. So, we’ll take you through all that you need to know about web designing for mobiles in a series of posts.
Experience The Computing Australia Group Way
For two decades, The Computing Australia Group has been designing websites for clients that are visually fabulous and technically optimised. Our SEO experts constantly watch what Google says, decode it, and implement them across client websites. Our Webdesign team have the latest technologies and themes at their fingertips. Contact us today or email at sales@computingaustralia.group to find how we can create a fabulous mobile-first site for you.
Jargon Buster
Rendering – Conversion of coded webpage content into readable content for screens and printers by a rendering engine in a web browser.
Interstitial ads – Interactive full-screen ads that cover the interface of the site.
CTAs – Call To Action are buttons, on a webpage (usually landing pages) that a user needs to click to take an action. Examples – Sign up, Subscribe, Learn more.
Crawling– It is the name given to the process by which Google searchbots visit and analyse the content on a page. In simpler terms, crawling = visiting a site.
Indexing – Means that your page is eligible to display in SERPs. It is the collection of contents (found while crawling) to be displayed in SERPs.
Google Search Console – A free web tool from Google to monitor and maintain the performance of your site in Google Search Results.
Content Delivery Network – A system of geographically distributed servers that delivers web content based on the location of the user.
by The Computing Australia Group