We’ve hit the tipping point. The number of users on mobile devices has surpassed desktop users. More importantly for businesses, the use of mobile devices to access the Internet has accelerated. I’m really hoping that this is old news to you and that you’ve already taken steps to make your Drupal website mobile-friendly. 

If not, read on. 

For small to medium size businesses (SMBs), the most cost-effective way right now to serve both desktop and mobile users is to adopt responsive design. This approach allows you to maintain a single website with layouts and navigation designed to re-arrange and resize to support all screen sizes. This won’t give mobile device users as optimal an experience as a dedicated mobile site, but it’s far more affordable for SMBs than building and maintaining both a desktop and a mobile-only site. A well-crafted responsive site delivers a more than acceptable mobile user experience. (Related article: Three Drupal Performance Enhancers for Site Admins). 

Best Option for SMBs: Start with a Ready-Built Theme
The Panels module in Drupal does let you create a responsive design. However, you’ll save time and money by using a ready-built responsive theme. 

Most responsive themes include responsive elements for critical attributes such as: menus, blocks, content nodes, tables, image placeholders, and so on. However, not all themes are created with equal attention to detail so you may find that once you’re past the Home page, the theme’s support for sub-pages or unique pages is not as strong. 

You’ve probably seen such mobile websites. The homepage looks great, but as you drill down, some of the sub-pages look terrible. This generally happens when a theme provides minimal mobile-friendliness beyond the Home page. That’s where modules help you get around the problem. 

Enhance the Theme
How do you go about enhancing a ready-built theme? Fortunately Drupal allows multiple themes and modules to be applied to different parts of a website. This means you can override the main theme for specific pages by applying different sub-themes and/or attribute-specific modules to parts of the website to make them more mobile-friendly.

Here are some of the most popular and useful modules for extending more mobile-friendliness to your website. Rendering images for responsive design is quite challenging, so many of these modules deal with images.

1) Mobile Tools is a Drupal toolkit that lets your site detect whether the user is on a desktop or a mobile device, then serves up content in your mobile-optimized theme. This module lets you create contextual rules with “mobile devices” as a condition to let you switch to a specific theme or sub-theme which you have crafted to be more mobile-friendly.
2) Breakpoints A breakpoint is just that – the equivalent of a page break but for the width of a screen view. In responsive web design, you need to set breakpoints that are optimized to different screen widths. You can define multiple breakpoints on a single page, each one optimized for a specific width. You might have breakpoints for mobile phones (320 pixels), one for tablets (1024 pixels) and one for desktops.
3) Picture lets you define different image styles for different screen sizes. You could resize images using CSS but it means users still have to download a full desktop-sized image – a negative user experience on slower mobile connections.  Picture + Breakpoint lets you display the appropriate resized image depending on screen size, rendered with different breakpoints. The module provides the HTML5 compliant <picture> tag and the script to make it work for older browsers. 
4) Context Breakpoint Drupal allows you to present content based on context. With this module, the context is screen size, which means you can specify the page based on screen resolution, browser window size, or aspect ratio. 
5) Adaptive Image is considered one of the best modules for image handling because it’s so easy to use. Just download and enable, and from there on, you can make any image style adaptive by adding ‘adaptive’ as an effect to the style, then setting the breakpoint. 
6) FitVids lets you serve up videos to small screens, resizing them automatically. This takes care of videos with specific sizing, such as those hosted on Vimeo and Youtube.
7) Flex Slider does just what it sounds like it should do – it’s used to create slideshows that can be resized. It integrates with the Flex Slider library and supports touch-based navigation as well as keyboard navigation, multiple sliders on a single page and configurable slide animations. 
8) Tinynav lets you transform your menu into dropdown menus that work well for small screen sizes. 
9) Fences is a timesaver. For each field, it keeps track of which custom tpl file to use, which is set in the field configuration. Each time there is output to a field, Fences uses its tpl. In effect, Fences lets you specify an HTML element for each field and uses this element wherever the field is used (Views, RSS feeds, etc.) saving you the work of re-configuring the same HTML element each time you display the field.

If your website isn’t convenient for mobile users, you risk giving visitors a bad impression. Worst case, you risk turning an eager customer into one who goes to adru competitor’s website out of sheer frustration. The bar keeps moving higher for websites and mobile-friendliness has become essential for business websites. 

A well-planned, well-built website is the hub of your digital marketing activities. Our web development services can transform your website into a marketing platform that delivers measurable results and insights. Contact us if you want to know how Smartt web design and development can make your website an effective business tool that attracts both mobile and desktop users.