RocketTheme Blog
Five Ways to Make Your Site More Mobile Friendly
- Friday, 19 September 2014 14:19
Today's Web is explored through a variety of screens ranging from small smartphones to giant big-screen televisions. Designing your site to work consistently across various screen sizes makes it a more pleasant experience for all visitors, regardless of the device they use to access it.
In this article, we will take a look at five ways you can make your site more mobile friendly.
Responsive Design
Modern Web design includes responsive elements that automatically adapt to the width of the browser window. As the device's screen or width of the browser shrinks, the design changes to create an experience better suited for the small screen.
Images shrink, columns might line up vertically, and the menu may change to a more standard mobile-friendly menu accessible through a single icon.
An alternative to a responsive design would be Adaptive Design, which detects the type of device being used to access the page and delivers an optimized experience specifically for smaller devices. This requires additional development to create what is essentially two different user experiences.
With RocketTheme responsive themes, you can use classes that hide or display elements of the page depending on the device used. For example, using the hidden-phone class on a module or widget will hide it when the user is on a device with a browser width of 480px or below.
This enables you to hide widgets or modules that wouldn't work well on a mobile device, while keeping the ones that do. You want your mobile layout to be as streamlined and simple as possible, without sacrificing the full experience of the desktop version of the page. Here is a quick breakdown of how responsive elements are handled by Gantry.
| Label | Description | Layout Width | Column Width |
|---|---|---|---|
| Smartphones | Standard smartphones | 480px and below | 100% fluid |
| Smartphones to Tablets | Larger smartphones and small tablets | 767px and below | 100% fluid |
| Tablets | Larger tablets | 768px and above | 64px |
| Desktop | Standard desktops and laptops | 960px and above | 80px |
| Large Display | Large desktops and high-resolution laptops | 1200px and above | 100px |
Image Optimization
Optimizing images to minimize the amount of data transfer required to display them is a critical step in improving the mobile experience. Even on modern, fast mobile networks, loading pages with large image files can be cumbersome for the device.
In addition to longer load times, the experience of scrolling and navigating through the site can be jittery and unpleasant if images are not optimized.
Take some time to run images on the site through an image optimization program. We have listed several excellent options in a previous blog post.
Keep the amount of images that appear on any one page down. If you can get away with using CSS elements or font-based icons rather than physical images, this can cut down on the amount of data packed into each page.
Setting image widths to 100% creates a dramatically more mobile-friendly look, giving each image more space to display and avoiding unpleasant text wrapping as the width of the browser shrinks.
The
Caching and Code Optimization
Caching is a big part of optimizing any Joomla or WordPress site. A good caching plan will significantly improve the loading time and efficiency of your site.
Caching stores frequently requested information (especially that information which doesn't change) and feeds it out to visitors.
Images, text, and other elements of the page can be cached and served much more easily than if the server had to seek out and pull this information with each page load.
CMS platforms like Joomla, WordPress, and Grav have integrated systems for caching, as well as the ability to cache through alternative methods via plugins or extensions.
In addition to caching, compressing elements such as CSS and JavaScript can be a useful step in optimizing your site an improving page load times.
RokBooster is one such solution made by RocketTheme for Joomla. It compresses CSS and JavaScript, and converts applicable files such as inline or background images to inline data. It's a great way to reduce the HTTP calls as well as reduce the overall data load size of each page.
Form Input Attributes
Input fields asking for specific information such as someone's name, email address, and/or password can be problematic for mobile users when elements such as autocorrect or autocapitalize are not set.
<input type=text size=18 autocapitalize=words>
If you want to make a user's experience just a little better, take advantage of these input attributes. For example, setting autocapitalize=words capitalizes the first letter of each word. In a field requesting the user's real first and last name, this will automatically capitalize the first letter of these names, making it an easier experience on the user.
Turning off autocorrect is another good practice when asking for information such as names and email addresses which don't often include words found in the dictionary. This will avoid those annoying autocorrect typos that have become such a common frustration these days.
The type of input is also important. Mobile devices typically have different on-screen keyboards depending on the type of input field assigned. A form with type=email set will often produce a keyboard with an easily accessible @ character. A type=url field may produce a keyboard that has a pre-defined .com key.
Use Whitespace Appropriately
One of the most aggravating things about using sites that are poorly optimized for small touchscreen devices is having multiple buttons or clickable elements located in a short distance from one-another.
Consider how much whitespace exists between buttons, and how easy it might be to accidentally tap the wrong thing.
Ideally, buttons and other clickable elements should remain large and easy to tap on, regardless of the size of the screen.
While you don't necessarily want too much whitespace on any given page, keeping the design simple, and setting buttons apart from one-another goes a long way towards making your site more mobile friendly.