An increasing amount of our customers and potential customers are starting to ask us, “How much does a responsive design website cost?” But before I address the factors that affect cost, I will provide some background on why optimizing your users’ experience for different display types is important and briefly discuss the differences between separate mobile sites and responsive design sites.
Unless you are living in a cave (no offense to all of you cave-dwellers out there) you have probably used your mobile handheld or tablet device to conduct research on products, services, or organizational information. These days, the desire for information, and the expectation to immediately find it, is unprecedented. Consumers are no longer tethered to their desktop computer and are constantly using the web on their mobile devices, regardless of location. In the “facts you might not want to know” category, 75% of Americans actually bring their smartphones to the bathroom (Source: 11Mark). That means you might want to think twice about borrowing your friend’s iPhone or Galaxy S7 next time. The main take away here is that the mobile experience cannot be ignored. I can tell you from personal experience that if I’m on a mobile site that is not optimized for my display, I leave quickly. It appears I am not alone, as 57% of consumers won’t recommend a business with a poorly designed mobile site and 40% will go directly to a competitor’s site after having a bad mobile experience (Source: Mobile Marketer).
So what does this all mean? Simply put, if you want to maintain the interest and loyalty of people viewing your site, you need to ensure that it is optimized for the devices they use.Responsive design is a technique that allows web developers and designers to meet this goal, as it allows the layout of the site to “respond” to the screen size of the display (large or small). As mobile became prominent, many organizations created separate mobile versions of their site (initially for the first and second generation smartphones) that pared down content to be properly displayed in a mobile-friendly format. Although this approach “worked”, it required that two unique websites be maintained, it didn’t scale well for the onslaught of new devices (tablets, phablets, hybrid devices, etc.), and it often punished Search Engine Optimization (SEO).
Responsive design seems like the perfect solution right? In my opinion, a development approach using responsive design is currently a best practice, but there are many factors that can impact the cost of responsive design development. Like any custom web developmenteffort, cost will ultimately come down to the requirements and complexity of the project. I think the analogy most often used here to explain the variance in web development costs is –How much does it cost to build a house? I won’t bore you with the explanation of the comparison because I am sure you get the point. Although there are numerous factors that affect the cost of a responsive design website I will focus on breakpoints, content, style and performance, and extent of customization.
Breakpoints, or adaptation points as I prefer to call them, are essentially the pre-defined ranges of browser width where a change in layout is programmed to take place (typically by calling a media query). In simple terms, these are the points that your website begins to display differently. It’s an important concept to understand, because the more breakpoints that are required, the more your responsive design site will theoretically cost. There are many technical articles out there proclaiming best practices for defining breakpoints (often by resolution size of common devices). In my opinion, every site is different and these breakpoints should be defined by how your site information and functionality is best presented at each size.
Content and Functionality
Content is king! The amount, type, complexity, and language requirements of your content can drastically increase development time, and subsequently the cost, of your site. It is rare for a site to contain just text now a days, so it is important to take imagery, video, mapping data, and custom functionality into consideration when assessing scope and ultimately the cost of your site. The visual complexity of your content and the breakpoints that are required to support optimized display, will impact cost, as there is additional work required to create assets of different sizes.
You have probably seen numerous sites that will sell you responsive design templates that are pre-built. If you have a very basic website, simple requirements, and don’t mind the fact that others can also use the same templates on their sites, they might be a decent option. However, in our experience, our customers typically want a design that is customized to their brand. This customization doesn’t always affect the cost of a responsive design but often does.
Style and Performance Requirements
I would like to address style and performance together because they have an inverse relationship with one another. Increased style complexity and quality of imagery/video content requirements can either reduce speed and performance of your site, or make it much more difficult to maintain those at acceptable levels. The effort to optimize performance will ultimately increase costs, particularly as more breakpoints are required. In controlling costs of performance optimization, many organizations choose to stick with three breakpoints to loosely respond to various desktops, tablets, and handhelds. However, there are great examples of sites (such as http://tekroc.com/) that have put a lot of thought into how their site looks on very large screen devices. Although each site is unique to customer requirements and its role in supporting visitors, it is critical to strike a balance between performance (load times) and image quality at various breakpoints, as a site should be as pleasing to use as it is to view
“That’s great Ron, but can you now tell me how much a responsive design website costs?” My mantra for costs associated with custom software development is,” it depends.” At Segue, we have developed smaller websites that didn’t require Content Management System (CMS) integration and only required two breakpoints for under $50K. However, we have also developed larger enterprise-level responsive sites for over $250K, where we integrated a CMS (such as WordPress or Drupal) and developed 5-7 breakpoints to meet the customer’s expectations for the user experience on different devices. If you want to read more on things to consider before getting started, read our blog article on Responsive Design: Getting Started.