Do you really need an app for that? It’s a question I wish I could ask of a lot of business decision-makers, because the rapid evolution of responsive web design has meant that when the priority is simply to reach users on their mobile devices, the answer is no. At Vibethink almost every project our development team takes on involves responsive web design, because our clients walk in the door understanding the importance of reaching their customers with a brand that’s equally effective experienced on phone, tablet, or desktop interfaces. Responsive web design means your content formats well across a variety of devices. It also means that instead of maintaining separate code bases for desktops, smartphones and tablets (and a coming soon page while we figure out a solution for those people who use the browser built into their smart TV), you’re only maintaining a single codebase to reach your entire audience. But responsive web design is as much about process as it is about outcomes. Ultimately, understanding how your digital message responds to its platforms and users involves asking a lot of really good questions, and the answers to those questions will improve your brand.
What makes design responsive?
The term “responsive web design” was first coined by Ethan Marcotte on May 25, 2010 in an article published on A List Apart (http://alistapart.com/article/responsive-web-design), which states that any responsive design must contain three elements:
- A fluid grid
- Media queries
- Flexible images
On a very basic level, these parameters define the way your site reacts to resizing browser windows, responding to shifting widths in the layout while keeping all of the content appropriately formatted. Any web developer worth his salt can meet these minimum requirements. It’s what you do above and beyond them that makes responsive design a valuable approach to development. At Vibethink, we strive to add a few more requirements to Ethan’s list:
1. Websites should load more quickly on mobile devices than on desktops. What good is a fluid grid that formats all of your content across devices if your page is so heavy that mobile visitors give up before it loads? One common problem in responsive design projects is developers not working hard enough to keep the weight of pages light for mobile visitors. We work hard to ensure that our projects don’t just look great on smartphones and tablets but that they are lighter weight and therefore load more quickly than their desktop counterparts. While we cannot (yet) detect a user’s connection speed to the sites we build, we can infer that small screen sizes have the potential to be on a slower mobile connection and do everything in our power to make pages load quickly such as conditionally serving smaller image assets. It’s important that this be a priority in your project because 74% of mobile users will abandon your page if it takes more than 5 seconds to load (http://bradfrostweb.com/blog/post/five-responsive-web-design-pitfalls-to-avoid).
2. Mobile users should not get a watered-down experience, but instead a contextually accurate one. When it comes to building a mobile experience for projects, many developers and their clients treat mobile devices as an afterthought or some kind of value-add. That’s a mistake. Users of mobile devices deserve to be treated as first class citizens of the web. So far in 2014 mobile browsers account for just under 25% of all global web traffic (http://gs.statcounter.com/#desktop+mobile-comparison-ww-yearly-2014-2014-bar). Wouldn’t it be unacceptable if one out of every four of your customers had a sub-par experience with your business? Simply hiding content from mobile users is a common solution to the problem the platform presents, but it’s an inadequate one. Instead, your design and development team should work to find ways to present the same information in a format that’s appropriate for mobile visitors. It’s not an easy process, but it’s what separates an inspired responsive solution from a technically responsive solution. If you’re getting ready to embark on a responsive web design project, then sear the following truth into your brain and never let it go: “Mobile users will do everything desktop users will do, but it must be presented in a usable way.” -Brad Frost
3. Sites should be developed mobile-first, prioritizing content’s value instead of the way it fits on common screens sizes. There are different approaches one can take building a responsive design project. At Vibethink we believe in creating our designs and our code mobile-first, which means we start with mobile users front and center in our minds. Taking into account their relationship to your business and the constraints of the platform forces us to weigh heavily which content should be front and center. The constraints that a smaller canvas provides lead to many great discussions with our clients about what is truly important and why. When you start with a large canvas such as a desktop screen, it becomes easy to dilute your message with secondary content your customers don’t really need. It is much more difficult to build a great mobile experience when you’re discussing what’s unimportant enough to be cut rather than starting with what’s important enough to take the spotlight.
The bottom line
The devices we use to connect to the internet have never been more plentiful or diverse. Responsive web design is the best solution for accommodating the continuous onslaught of new screen sizes and formats. At Vibethink we are working hard to make sure we’re not just fulfilling a bullet point on a spec sheet with our responsive design projects, but instead that we’re employing all of our diverse skills to ensure that our clients’ critical content shines through on every platform. Take a look at any of our past projects and we think you’ll agree.