How Much Does a Responsive Web Design Cost?

Share on FacebookTweet about this on TwitterShare on LinkedIn

Share on FacebookTweet about this on TwitterShare on LinkedIn

segue-blog-how-much-does-responsive-web-design-cost

 

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

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.

Customization

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.

Share on FacebookTweet about this on TwitterShare on LinkedIn

About the Author

Ron Novak leads the Commercial and Non-Profit customer verticals as a part of Segue's leadership team with the guiding principles of innovation, exceptional customer support, and customer value. His diverse experience in Information Technology has been formed through a consistent desire to understand the total picture with respect to information exchange, security, and the end-user experience. Ron is currently focused on leading development of Mobile Technologies to help businesses reach their customers in exciting new ways and supporting Non-Profits in better serving their members. Mobile application development is a natural extension of Segue's capabilities in Web development; Ron is applying this Segue experience to rapidly develop exceptional applications at low cost. Under his strategic direction, Segue's Mobile Application Development Team has grown from a small two-person operation to a cohesive development team that is releasing capability-specific mobile apps for Android and iOS platforms. Read more from Ron Novak