When Responsive Web Design hit the automotive space over a year ago, it was a brand new concept to many. The idea that dealers no longer needed a separate mobile site, but a single site with a Content Management System (CMS) that automatically adjusted to various screen sizes, seemed too good to be true. Now, a year later, there are a large number of car dealers enjoying this great new architecture. Personally, I have the pleasure of seeing each of Dominion’s responsive sites launch, and the evolving designs that dealers are enjoying. When Responsive is deployed properly, dealers witness both an increase in mobile traffic and site visits. Additionally, home page and landing page bounce rates are reduced.
Designers of responsive websites need to unlearn much of their approach to building websites. Instead of simply focusing on a desktop design, and then later focusing on a stripped down mobile site, responsive design requires a much more holistic development. Designers need to first think through the various devices that will access this site, and decide the design, user interface and user experience needs for each screen size. It’s important to allow the site to fluidly transition from large to small screen, and from small screen back to large. While quality assurance (QA) is important in every product development cycle, it is critical each step of the way in responsive web design. Checking design renderings on various devices to make sure the sites adapt and display professionally for the dealer is crucial.
In testing, first shrink the site from desktop to tablet, then from mini-tablet to mobile, noting the various “breakpoints” inserted for each screen size. The breakpoints are screen sizes in which the websites morph into the various iterations. Shrinking a desktop site to tablet width renders a new look, incorporating swiping gestures and keeping the design clean and easy to navigate. Continuing to shrink the width delivers a mini-tablet version, and finally, a smartphone version. As the website design morphs into smaller and more mobile formats, click-to-call and click-to-map features become more prominent. It’s also noteworthy that the UI should continue to get simpler and easier to navigate as the screen size shrinks. Menus also change; in many cases reducing in complexity as the screen size becomes smaller. For responsive website design, the breakpoints are critical, and vendors need to keep the most popular screen sizes in mind for dealers. Incorporate three to four unique breakpoints in order to address the variety of screen sizes that will be browsing a dealership website simultaneously.
Just like in the early days of Flash website design, a criticism of responsive design has been the potential for slower page loading. If the approach to a dealership’s responsive web design is sloppy, performance problems will occur. Remember, delays in page renderings equals abandoned visitors. Help avoid this by making sure your dealership is only choosing the best and most relevant images for a responsive design site. Don’t clog any of the website pages with too many images. Once the most relevant images have been chosen, properly compress them so they render quickly. For icons or buttons, choose an icon font instead of an image to keep page weight at a minimum. Find a provider who has considerable experience and has launched enough responsive design websites to learn best practices around image sizing, conditional loading, and compressing scripting routines. Test your providers. Ask to see a variety of examples and then load these websites onto various devices yourself to check them. This approach ensures that dealers get all of the benefits of responsive design without the pitfalls.
Responsive website design is definitely here to stay, and major retailing brands continue to migrate to it. However, this powerful new technology also requires specially trained designers with the experience to make sure that the sites created perform well on every different device a shopper may use. Ask your provider for reference sites, and benchmark them against other sites you’ve seen that look impressive. Make sure the breakpoints occur properly by testing sites on multiple devices, and ensure a strong user experience on each device.