Are you thinking about jumping on the responsive design bandwagon? Performance should be at the top of the list when designing a site for mobile users, and responsive design doesn’t necessarily always lead to a better performance. One thing to keep in mind is that as LTE becomes more prevalent worldwide, faster connection speeds and load times can give a boost to responsive design. Here are five ways to successfully use this design strategy and avoid its potential pitfalls.
1. Understand how network speed impacts conversion rates
As all web developers understand, load time is very important to the user experience. According to research from Aberdeen Group Inc., even a 1-second delay in load time can translate into a 7% loss in conversions. And on mobile sites, this is perhaps even more important. Smartphone users are highly unlikely to stick around for a site that won’t load after several seconds. The problem with responsive design is that it often weighs down a page to the tune of 18 second load time, as research from Keynote shows. This is reduced with 4G LTE availability, so connection speed must be taken into account to determine whether or not responsive design is worth it.
2. Put navigation tools front and centre
Another factor to consider with your responsive design is the user experience. Although aesthetics are undoubtedly important, the area you have to use for your design is reduced on a mobile screen. The content above the fold will receive the most user attention, so you might want to consider putting navigation up there to enhance performance. Sticky navigation, or keeping navigation options in full sight no matter where you are on the page, is one way to solve this.
3. Take latency of 3G, 4G, and LTE into account
If you’re using responsive design, it’s important to understand the difference in latency between a home DSL connection vs. a 3G or 4G connection. Mobile networks will have greater latency than other types of networks. For example, typical latency on a 3G network is between 150 and 450 milliseconds, while on a Nokia Networks LTE or typical 4G network it hovers between 100 and 180. The difference between 100 and 450 can make a big difference in the mobile experience, so you’ll need to compensate by using other techniques to improve performance.
4. Consider combining responsive design with other strategies
Boost the efficiency of responsive design whether a user is accessing your site via LTE or other networks by using other mobile design strategies. To boost performance, some options include starting with mobile before working up to other devices, testing performance on real devices, and using conditional loading.
5. Optimize font size for readability
No matter what type of connection speed you anticipate your user having access to, you’ll want to make sure your site looks great and is readable. It’s generally a good idea to keep the length in a mobile view between 40 and 60 characters. Keep your base font about 16px on both desktop and mobile screens for best results, with a line height of 1.2em. These figures can of course be adjusted depending on your overall design.
Responsive design can be a great way to optimize your site for ease of use between devices, but it’s essential to keep load time and performance in mind as well. LTE networks enable more fluid design, but until these are worldwide you should balance responsive design with other strategies for the best results.
Comments