why Drupal sites need to be mobile-friendly
Mobile and tablet screens are substantially smaller than desktop screens. This means that your Drupal website needs to be displayed differently in order to be viewable and interactive for mobile and tablet users.
If you don’t have good user experience on your mobile site, users will be likely to exit. For example, when mobile visitors have to keep zooming in/out or can’t see important information, they’ll probably give up and find an alternative website.
Mobile optimisation is also an important factor in search engine algorithms, with Google prioritising mobile-friendly sites in its search results. In fact, Google works on a ‘mobile-first’ basis when indexing and ranking websites. Therefore, if your website isn’t mobile-friendly, you’re probably losing a substantial amount of organic traffic.
how to check mobile-friendliness on Drupal
There are two great, free tools that you can use to check your Drupal website’s mobile-friendliness.
The Responsive Test shows how your site is displayed on screens of all sizes. This gives a great insight into what users are seeing when they access your site from different devices.
The Google Mobile-Friendly Test looks at specific URLs, checking whether they’re mobile-friendly. It also highlights any errors and page loading issues which may need to be addressed.
mobile-friendliness for Drupal 8 & Drupal 9
If you have a Drupal 8 or Drupal 9 site, then you’re already well on the way to mobile-friendliness! These versions of Drupal were made with mobile in mind and have more than 100 features to ensure your site is displayed effectively across devices.
The Drupal 8/9 core features include:
- mobile responsive themes
- automatic imagery scaling and resizing
- responsive elements and tables
- mobile back-end administration
However, you can still further optimise your Drupal website for mobile. To keep mobile visitors happy, try to focus on your key messages and avoid surplus information that may distract or confuse on a smaller screen.
Mobile visitors also expect rapidly-loading webpages, with 50% of people leaving sites which take longer than two seconds to appear. So make sure to read our blog about how to increase Drupal website speed too.
mobile-friendliness for Drupal 7
If you have a Drupal 7 website (or earlier Drupal version), the best way to ensure mobile-friendliness is with a responsive theme.
By using a responsive theme – rather than creating a separate mobile version of your site – you only need to make site changes once. The theme will adapt your content so it’s displayed appropriately and appealingly on different devices.
You can check whether your current theme is responsive in this Drupal.org list. If yours isn’t responsive, you can either switch to a different theme or install modules with mobile-friendly features. For example, the Mobile module removes CSS so that your site displays more easily on mobile.
As well as optimising how your site is displayed on different screens, it’s also vital to optimise your Drupal images for mobile. Mobile visitors generally expect sites to load quickly, and bulky, oversized images are the top culprit for slowing down Drupal sites.
Ideally, you should crop and compress images before you upload them to Drupal, using a tool such as Photoshop or Resize Image. We also recommend adding an image optimisation module, such as as Image Optimize to further compress images for different devices.
the take-home message
With more than half of browsing sessions taking place on mobile devices, having a mobile-friendly Drupal website is essential for success. Whatever version of Drupal you’re using, make sure to optimise messages for visitors on smaller screens, ensure images are appropriately-sized, and keep checking and improving your page speed.
For more expert Drupal tips, read our ultimate Drupal optimisation guide, which includes everything you need to know about optimising and maintaining your Drupal website.