I've been meaning to write this for a long time as I often hear the question asked "should we have a single responsive website, or a desktop site and a mobile website”. Jay Peak's new responsive website just gave me the motivation I needed to blab about this. First... What is Responsive Design? Responsive web design uses CSS3 media queries to detect the device/screen size and respond with a layout to fit the screen. Such a site is designed from the beginning on a grid with "breakpoints" that tuck and fold content and elements as the page expands or contracts. Appropriately sized images can be swapped to save file bandwidth as well. To determine whether a site is "responsive" or not, resize the window and see whether the page restructures itself to fit. Our website is responsive so try it out. In doing so you'll hopefully appreciate the additional design effort and skill that goes into delivering a fluid experience.
Regardless of solution and discussion, I'm pumped that it puts greater focus on the mobile experience. In our world, there is a movement collectively called Mobile First. This movement suggests that if we start first with designing a great experience for this tiny little screen, it will force us to identify the essentials and allow us to better prioritize content, media and features that will inform the design up stream to desktop and beyond.
Responsive not silver bullet A desktop user in an office in Manhattan and mobile user driving up to vacation in Vermont are very different. They're searching for different information using different devices, so don't hope that a responsive website will be the silver bullet.
There are 3 choices To reach both desktop and mobile visitors you have three choices. First is to do nothing and force your mobile visitor to squint, pinch, and bonk through your website on their smartphone. Not good. Second is to start from scratch and rebuild your website and content using responsive design methods that will enable a single website to display appropriate content and layout for both mobile and desktop users. The Third is to bolt a mobile specific website onto your current website. If the first option sound good to you then please stop reading, and put your head back into the sand.
RESPONSIVE DESIGN APPROACH
Design Not to be critical, but look at Jay's website. Its boxy for a reason (though it really doesn't need to be that boxy). A fluid layout needs to be able to expand and collapse, so layouts rely on content/feature containers laid out to fit the breakpoints of the grid to collapse and expand in an order. Also, the layout may be liquid, but all of the page elements may not be. This can leave you with "awkward moments" when odd sized windows reveal breakpoint issue. As an example, go to our homepage and as you resize the window you'll see how our hero image just doesn't fit all window sizes that well, and the hero headline often drops under body content blocks often.
When we were designing our responsive site, it took six comps for us to get a full hold on where the breakpoints would be.
Yes, the designer does face new challenges and some restrictions such as the grid, but I think this promotes more functional structured design. It should also be clear how hard it is to design for a variable environment, and why this is no territory for traditional graphic designers. Final advice: start with Mobile First.
Content & Navigation Menu Most websites are already bloated with crap content. Crap crap crap. It’s bad enough to force desktop users through menus of junk, but lord, don't do it to your mobile users. In the process of developing a responsive website, the content and navigation should also be adressed. For a mobile user with a small screen, fat thumbs, and not at a desk - make sure you're serving them only the content choices that are relevant ... ie, don't bog Mrs Smith down with long menus if you know what she needs. Most responsive sites fail to pair down their navigation.
So grab your Google Analytics and tag your crap content. Then sharpen your axe and do what must be done.
Administration With one site, you update the content in just one place. Good time savings.
Mobile SEO A single URL (versus redirecting to m.website.com) is Google's most preferred method is to serve up the same content for mobile and desktop. However Responsive alone doesn't equal Mobile SEO as this article from Search Engine Watch points out.
Budget As you might guess, both the design and production of responsive sites take much longer. Consider that each unique template will require 3-6 more layout mockups to show the breakpoint progressions going from desktop to tablet to mobile. Your Content & Navigation (IA) process will also take more time. The added CSS markup will take longer. Time is money. The good news is that you won't need to design and develop a mobile site if you go responsive. All things told, the cost difference is going to be a bit higher for responsiveprogressive but in many cases, not by much.
DESKTOP + MOBILE APPROACH
Bolt on a mobile website designed specifically for a smartphone that runs in parallel with a desktop site. We find that this solution is preferred by clients who are not ready for a full redesign, have very complex sites, can't afford a fully responsive website, or believe that its better to create a targeted experience just for mobile users. We've had good luck with this approach (our mobile site for Stowe Mountain Resort recently won Horizon's Best in Category for Mobile), and lean toward recommending it.
Design Designing specifically for the mobile user inherently means that it will be easier to accurately nail the layout, usability and messaging. Navigation can be specifically designed with big buttons for example.
Compared to the 6 homepage comps we had to design for our responsive site, here are the two comps needed for Stowe:
Content & Navigation Menu Rather than cram a desktop site into a mobile site, this process inherently enables the team to focus specifically on what content the mobile user needs and only serve that. We recommend always providing the link to the "main site" as most mobile users can still functionally navigate the desktop site, and users appreciate having access to all content. On our mobile sites we use a search function that searches mobile and desktop sites and returns results for both in a mobile friendly format.
Administration Unless your mobile and desktop share a CMS, you have to then maintain two separate sites. At Propeller, we develop our custom sites on our own CMS which is multi-site enabled to provide a single point for administration. This capability is the exception however and not the norm.
Consider Mobile SEO Mobile SEO is rapidly growing in significance. Especially for location based companies that need to capture the attention of the geo-based searcher (think searchers for "restaurants in [city]"). Read guidance from Search Engine Watch.
What do I recommend? Its all about mobile, and you must present your brand, offering, and message to that audience as effectively as possible. Tailoring a message when we knew the visitor was either at work or at home was simple. Today, that visitor is on multiple devices and is always moving, so what is important is that what you serve your audience is appropriate given those parameters. Even though its technically possible, I think its very difficult to deliver two experiences through one interface and what you will end up with is compromise.
A website designed only for a mobile user on a mobile device will simply be more effective than one designed for all audiences on all devices.
References & Additional Reading
- Responsive Web Design by Ethan Marcotte (must read... plus he's a Vermonter)
- Smashing Magazine : Do Mobile and Desktop Interfaces Belong Together?
- Fast Company : Hey Dummy, this is what Responsive Design Means
- Search Engine Watch : New Mobile SEO Strategy
Responsive Design Examples