Pitfalls of Responsive Design: Speed and Content
Responsive design is something you need to understand if you are taking that dive into developing or designing your first responsive website. However, with any new venture, there are pitfalls and traps to avoid with this new and exciting exploration. Creating great responsive experiences requires more than just simple media queries. If you think that creating nice layouts is all you need to know about responsiveness in design, you’re missing valid information and purpose. The fact is, we all need to deliver a solid user experience for a growing number of web-enabled devices, and creating entirely separate device experiences simply isn’t scalable in the long run.
In this post I'm going to run through a few points of what are some of the easiest mistakes you can make when developing your first responsive website. I have fallen for some of these and it only makes you a better developer or designer once you understand and recognize what to avoid and when.
Does this content make me look fat?
About 74% of mobile traffic will leave your site if it takes more than five seconds to load. Seconds count tremendously in the website world and if you squeeze too much content into a mobile site just because it’s on the desktop version without truly thinking about what the user will want to experience, you will probably never have a fast loading website. For the record, a website’s total resources are about 4MB, which is unacceptable by any standard, but especially falls apart when you consider users who may be on EDGE, 3G or a poor WiFi connection.
The best approach would be to prioritize your content for all devices; if it’s not worth reading on a mobile it’s probably not worth reading on a desktop. Get rid of a few MB’s and follow these performance best practices. One of the biggest challenges of creating responsive web designs is the balancing act of delivering a full experience while still maintaining a snappy user experience across the board. Also, don’t assume a strong connection by default, and look for ways to exploit great techniques like conditional loading to keep initial page sizes down.
I fully admit to falling into this trap. Sometimes you want the same content to show in a different order, or say something differently depending on which device the user is on. But it’s important to remember to not penalize users for the device they happen to be browsing with. People are coming to your sites with expectations and it’s our job to make sure they’re able to achieve their goals. Mobile users will do everything desktop users will do, but it must be presented in a usable way, which makes it important to do all that you can to make sure as many people as possible can access your content and functionality.
The reason you don't want to hide content is because a very large part of users will use nothing but their mobile device to access the web. They're not going to go home and bring the site up on a desktop if there is something missing, and in certain cases, they won’t even be aware there is missing content. If your content is worth showing then it's worth showing to everybody. If something isn't worth showing to mobile users, it's probably not worth showing to anybody.
Also it’s worth noting that even hidden content is loaded by the browser, which speaks to the first point. So why load unnecessary content for users who may be on limited connections?