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