A responsive site or a separate mobile site?
One of the most common things people have been asking me about lately is responsive design for websites. For a few recent projects at my agency we’ve discussed the pros and cons of creating a responsive website versus creating a separate mobile site for smartphones and small tablets. In the vast majority of cases I advocate for responsive design, and I’ll explain why below.
Let’s start with definitions
A mobile site is just that — a second version of an existing website that’s created specifically to be viewed on mobile devices. These often have a url like m.[brand].com. They’re sometimes referred to as “m-dot” sites.
A responsive site is a website that’s built to rearrange itself depending on the user’s screen size. Think of it as one set of content (i.e. one set of pages) with different styling instructions depending on screen size. The exact same content elements display on your desktop and on your phone, although they are styled and positioned differently for each screen size.
Pros and cons of mobile sites
A separate mobile site is an option when you already have a full-size desktop site and you want to add a mobile-optimized version.
Can be easily added to an already-existing desktop site.
A separate mobile site gives us the opportunity to have different content for the mobile audience, if desired.
- Twice the development time/cost — You’re building a whole second website in addition to your desktop site.
- Twice the maintenance time/cost — Since the content lives in two separate sites, all changes must be made in both versions. If you want to change the ISI, for example, you have to change it on both sites.
Pros and cons of responsive sites
A responsive site is good option when you’re planning a new website (or redesigning an existing website) and want to make it available to all users on all devices.
- One website. Less development time. Less maintenance time.
- Completely fluid and scalable across all screens: desktop, laptop, tablet, phone (portrait and landscape), etc. One site and one set of content for all users.
- Difficult (or sometimes impossible) to implement on an existing site. Only practical when planning a new site or a redesigned site.
What are the time and cost involved in making a responsive website?
If we’re designing and building a new site and making it responsive, my rule of thumb is: 50% more art and dev time; determine the hours required for art and dev for the desktop look of the site, and then add 50% more time for art and dev for the responsive component.
It should be stressed again that responsiveness in most cases is not something that can be tacked onto an existing desktop site.
What’s the difference to the user?
In most cases, nothing at all. The experience for the user is the same. The strategy and the benefit here really pertain to the website owner more than the audience.
What should our recommendation be?
For all new websites, I recommend responsive design. This is the industry standard.
If we’re dealing with an existing website and the client wants to add a mobile component, we can consider just creating a separate mobile site. However, if there’s an opportunity to re-build the existing site to be responsive, this would be more efficient in the long run for the client, and this is what I recommend.
Can we have different content for some parts of a responsive site?
Yes, in some cases, although we don’t want to go overboard with this. A responsive site for the most part should display exactly the same content for all users on all devices, simply rearranged. However, sometimes it makes sense to adjust some content for one audience.
Example: Let’s say the desktop layout includes a chart graphic with a lot of data and small text, which won’t be legible on a phone. We have the option of designing a separate version of the chart for small phone screens. On the dev side, we’ll write some code to display one version of the chart in the desktop layout and the other version on the mobile layout.
Again, we should do this sparingly. If the client wishes to serve significantly different content to their desktop and mobile audiences on many pages, then we should consider creating a separate mobile site rather than a responsive site.
How many different views of the site need to be designed by art?
This is somewhat subjective, but essentially you have two main looks for the website: a larger design for larger screens (desktops, laptops, and tablets in both landscape and portrait mode) and a smaller design for smaller screens (all the various smart phone sizes, in both landscape and portrait mode). Each look is programmed to be fluid and scalable to fit all appropriate screens. The content remains the same; it’s just the styling information that changes from screen size to screen size.
It some cases it’s required that we design and program separate layouts for many different screen sizes (i.e. separate designs for desktop, tablet portrait, phone landscape, phone portrait), but I think this is overkill. If the design is handled right it’s definitely possible to achieve a fully responsive experience with just two main layouts.
How can I tell if a website I’m looking at is responsive?
If you’re viewing a website on your desktop or laptop computer, you can test for responsiveness. (Note, this does not work in most versions of Internet Explorer. It will work in Chrome, FireFox, and Safari.) Drag the corner of your web browser window to resize the website to be smaller and smaller. If the site remains unchanged and you see a horizontal scroll bar at the bottom, then the site is not responsive. If the site resizes and rearranges itself as you shrink the window, it is responsive.
If the site is responsive, as you shrink the window to a very small size you will eventually see the layout suddenly switch to the mobile phone layout. This is because the responsive site is detecting the size of your browser window and applying the correct styling for that size. When you’ve reached smartphone size in your browser, it snaps to the smartphone layout.
The better we understand responsive design, the better we can guide our clients toward the right solution for their brand.
Let’s advocate for a mobile-first approach to web design.
Please see my article about this here.