While there are many reasons and methods for implementing responsive web designs, there are also some challenges of which developers and clients need to be aware. While these may not be a concern with every project, you can safely assume that, implementation and/or design, could suffer from these pitfalls and it’s a good idea to at least consider them up front. Before committing to a responsive design or redesign, consider the complexity, costs, and performance impacts compared to the needs and goals for your website.
Complexity of Responsive Design
Gone are the days where websites are designed and tested only on desktop browsers at resolutions of at least 1024×768 and higher. The current state of the web includes displays on desktops and laptops of all sizes, as well as tablets, cell phones, MP3 players, watches, glasses, and any combination of therein. This post isn’t intended to teach you that traffic from mobile devices is skyrocketing – it’s to teach you that you need to address those displays and interfaces head on. There’s a delicate balance that needs to be found in responsive design. The end goal is not to have a site (or web application) that is designed for every device. The goal is to have a site that looks good and functions well on whatever device people are using, whether that’s today or next year. This balance reflects the complexity of your site and design. The best way to manage this complexity isn’t some secret formula. There’s no “responsive site generator” (and if you find one, be wary). The best way to manage the complexity is to first understand it, and then address it. Yes, that’s a vague copout of an answer, but it’s also the truth. You need to analyze your site and how your visitors use it, to understand how your responsive design needs to either preserve or enhance the user experience as varying screen sizes. You also need to understand where your visitors are coming from, what they are using to view your site, and the actions they are most commonly taking. I suggest checking our posts on using site analytics to guide your responsive website to get an idea of how to understand the complexity and break it down. Then read the post on the importance of wireframing and mockups for a responsive website to understand how to address it.
Cost Factors of Responsive Design
The increased complexity can have a direct impact on total project cost. More complex code takes longer to write, is more difficult to test, and has higher maintenance costs associated with it. Relatively simple responsive sites can be tested with desktop browsers and a subset of mobile devices. Sites that perform advanced device detection, utilize mobile device-specific functions (e.g. camera, GPS, etc.), or redirection services require more hands on testing time with actual devices. Third party services exist to help here, but there are costs associated with them as well. I suggest reading our write up on testing responsive websites for additional information and consideration. Because costs are one of the main constraints for our clients, it is extremely important to understand the complexity up front, make important decisions up front, and focus on delivering the most value to your users without going overboard and creating a separate version of your site for every conceivable device.
Performance Impacts with Responsive Design
One issue many responsive websites currently face is that they can become very bloated very quickly. HTML, CSS, and JavaScript for the site must be delivered to the devices and then rendered for that display. While this varies from implementation to implementation, the fastest (read: cheapest) way to make a site responsive is to deliver all of the content, regardless of whether or not the device displays it. Previously, desktop sites would only send the desktop version of the site to the desktop browsers. Dedicated mobile sites (or “m dot” sites) would only send streamlined content to the mobile browsers. Responsive sites have to package all of these versions (and those in between) and send it all to the browser and let it figure out how to display it. This leads to increased load times for all users.If the performance achieved from sending all content to all visitors is not good enough, there are technical approaches that can help reduce HTML packet sizes, select JavaScript libraries, and optimize image sizes, those add complexity to the implementation (see above). Ironically, if not used correctly, they can also potentially reduce performance by requiring pre-processing and device detection to be performed. This also increases complexity (read: cost). In the end, responsive design can make your site’s content available to everyone, regardless of the device used – you just need to watch out for a few roadblocks (or money pits) along the way. I think we’re going to start seeing changes to HTML/CSS/JavaScript very soon to help accommodate these variations in content delivery natively. In the meantime, however, we need to take what we have now and make it work for our users in the best way possible.