There is no shortage of articles about responsive web design (RWD) out there. It seems like every time that I pick up a trade magazine (automotive industry), there is an article about responsive web design and if you are not doing it - you might as well close your doors. Of course that is a drastic example, but for the most part many of these articles really are missing the point. Too often we get caught up in trends, the latest and greatest, and fail to truly address the root need of the products we “must have.” So, really, why does my website need to be responsive? First, lets dig a little deeper and learn some definitions.
RWD has a different meaning for marketers than it does web developers. To web developers the aspects that define a website as responsive are technical in nature. How content is displayed and by what method is just as import as the look and feel of the site. Ethan Marcotte, a web-designer out of Boston, and an authority on the subject, maintains that a responsive website must utilize certain techniques, such as media queries, flexible images, and fluid layouts to make a website properly functions across different environments. If you do not have any idea what that means, that ok. This is not a discussion about the technical implementation of a website, but it is important to recognize the technical aspects of this concepts as they are seldom discussed in conversations about RWD, especially in the car business. (I am leaving "Adaptive" completely out of this entry)
Why are they important? They are important because if your website does not load quickly or properly you are losing money - regardless of how pretty and functional it looks. Efficient web design has not been a top priority for automotive web vendors over the past several years. The vast majority of dealer websites still focus on an cumbersome desktop model, and with broadband penetration at over 70% website, regardless of how improper the design, pages will still load in an acceptable amount of time. However, on slower connections, the experience will not be so acceptable.
Typically we are given 3 choices as the solution for our mobile customers:
- mobile formatted website, usually via a subdomain i.e. m.stokebrand.com
- adaptive website, which relies on a library of device resolutions, same domain regardless of the device
- responsive website, which resizes for the device and typically uses the same domain regardless of the device
Today, mobile sales representatives are quick to dismiss the old ways of mobile formatted website in favor of the “new” responsive model. In fact, the pitches are very aggressive (or passive aggressive), and are quick to discount the mobile formatted website altogether. Like I said earlier, if you are not doing “responsive” design - you might as well close your doors. Bottom line, if this is the pitch you get – feel free to laugh or hang up the phone, because… They are missing the point.
The purpose of your mobile website should be to deliver the best user experience possible for your customer – regardless of the technique. For marketers, this can be further broken down into 2 elements:
- Speed
- Content (content, functionality, and design)
Speed. Everyone has smartphones with broadband access, so why is speed important? Easy, not everyone has fast broadband access. 4G networks are not available everywhere, in fact only 22% of users have a 4G connection, and 40% of the time they do not have 4G access. If you are located in the city, you probably have better usage numbers than this, but it is still very likely that users will be connecting to your mobile website on a slower-than-4G connection – so design for it. Start by:
- Choosing a vendor that understands this and can offer a mobile product that is responsive to typical and non-typical mobile connection speeds
- Choose a template that is light on high-resolution graphics and backgrounds, and use color fills whenever possible.
- Test, test, test. Tell you spouse. Ask your boss. Ask his teen-age daughter. There is no better way to find performance issues than to have mobile power users test it for you. This is true for performance issues as much as it is “hiveminded” design flaws.
Content. Your index page on your mobile site should never mirror your desktop site unless you only have one page on your desktop site. Even then it still shouldn’t look the same and should at least serve the content differently. The user expectations for a desktop site and a mobile site are different – and both must serve their content effectively. Desktop users are very likely on a broadband connection, and have a huge screen with lots of real estate. Mobile users are on a smaller screen with a slower connection. How will you change your design to accommodate this (check out my upcoming posting on mobile site design tips for more in depth ideas)? To start you can:
- Visit top 100 sites. See what the big boys are doing. This is not to say they are all doing it right, but it certainly will expose you to different designs and techniques.
- Visit your competition, see what you like and don’t like. You are an expert critic here. Don’t repeat their mistakes.
- Do not be pressured to switch to a “responsive” site just because it’s the thing to do. If they tell you that everyone is doing it, tell them that only 12% of the top 10,000 website are actually responsive and send them this link.
RWD is a very effective technique, and is probably the best way to display your company’s digital storefront across multiple devices – if done correctly. The problem is that it is rarely done correctly, and you have to pick out the best vendor or designer available to you at the time. So if that means your mobile site has a separate mobile subdomain, so be it! What is for certain is that when your customers have a terrible mobile experience, they are leaving for good, responsive or not.