5 Ways to Optimize a Mobile Site
Mobile-first isn’t just an empty design trend. It’s an all-encompassing design and development philosophy that adequately addresses the needs of the modern user and how we all consume websites. While the majority of us understand mobile’s magnitude, if not defacto primacy, it’s nonetheless still approached as an afterthought when it comes to design and usability.
All of this is to say that you should treat mobile designs and interactions with the utmost importance. When designing a site, every style or development change should be viewed on desktop and mobile, in parallel. This brings our conception of mobile design up to level of significance it deserves based solely on site traffic.
The following are a few design, development, and marketing tips to optimize your mobile site. By following these concepts, you should make significant inroads with your mobile site’s usability and search engine optimization.
Start by Designing for Mobile
The first rule of thumb is essential: start by having mobile designs. When it comes to a website design or redesign project, designers often start with a general wireframe of the site’s layout. At this stage in the project, it is absolutely crucial to make sure there is a definite mobile-first design in place and that there is a strategic approach to how the site will render of mobile devices.
When making these designs, there are some fundamental concepts that should be implemented. First, don’t forget about ensuring there is adequate padding from the edges on mobile devices. Text that with zero padding makes it incredibly difficult to read and looks inelegant. Similarly, make sure your elements are appropriately large enough on mobile devices. This includes your text and various actionable buttons. If your mobile users can’t legitimately read your content or press links/buttons, then you have an enormous user experience problem on your hands.
Lastly, it’s important to strip away as many absolutely unnecessary design elements as possible. This all comes down to that question of readability. Remove unnecessary graphics, use icons instead of bulky text, and make sure only the most pertinent pieces of information are displayed.
Add Device Specific Classes
Ideally, all styling changes would be simply handled by media queries and would globally affect all devices the same. Unfortunately, not all devices react the same nor do they have standardized dimensions or support the same libraries. While the vast majority of design elements will appear the same on different brands, there will be the odd outlier that will require its own device-specific solution.
One way to account for this is to apply a global class that includes the device or viewpoint. Using some JavaScript, you can detect the device in use and have your CSS handle those unique cases. Similarly, you can use an external toolset, such as Modernizr, which creates a number of classes depending on what device/browser in is use which allows you to specifically target devices that, say, don’t support Flash or HTML5 videos.
Don’t Forget about Forms
As web designers and developers, are primary goal is to create web experiences where users have the freedom and capability to interact. One of the clearest examples of this interaction is filling out a simple form, such as a contact or lead generation form. It is essential to make sure your forms are optimally styled for mobile devices so that your users can submit information when needed.
The simplest method to do this is to ensure that your form fields stack upon one another. Some common problems that arise, however, is that there’s not sufficient padding between the fields or that the field inputs themselves expand outside the horizontal viewpoint, requiring the user to scroll horizontally. You should be able to address these problems directly with media queries. Of course, a prebuilt mobile-first design framework such as Bootstrap should adequately handle these scenarios.
Don’t Use Popups on Mobile — EVER
You may be tempted to add popups at various points on your website. They can encourage user interaction, add to newsletter subscriptions, or drive the consumption of specific content. This is all fine on desktop views, where the user has enough screen space to close the popup and move on with their web experience. On mobile devices, however, it’s a completely different story.
Popups on mobile devices simply create bad user experiences. They often are impossible to manually close, they often extend outside of the viewpoint, and they generally make things more difficult for the end user. Additionally, Google has specifically targeted mobile popups as a point of contention and will actively penalize your website. All that being said, don’t use mobile popups. Hide them or actively disable them for specific responsive viewpoints.
Analyze and Find Drop-off Points
Lastly, it’s important to analyze your mobile data and find drop-off points for your mobile visitors. This analysis should provide critical information as to where your users get hung up, frustrated, or otherwise decide to leave. Finding these pages can lead you to discover specific design elements that are not mobile friendly and which otherwise disrupt your experience.
Within Google Analytics, you can add a segment to your Behavior Flow to specifically see the overall progression of your mobile viewers. Diving into these specific mobile interactions is the first step to the continued optimization of your mobile websites.
It goes without saying that your mobile web experiences are a huge deal. With the trend of mobile traffic continuing, you don’t want to miss out on losing potential users due to either bad design elements or broken functionality. It’s absolutely crucial you to take the time to optimize and analyze the specific mobile view of your website. Following these basic tips, you should be well on your way to fully optimizing your mobile site.
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
