Large vs. Small: Responsive Sites for Many Screens

These days, people access websites using so many different devices and browsers, from any number of locations, that it can seem difficult to accommodate them all when designing a site. But while it might seem necessary to create multiple versions of your site to fit different screens, it’s impossible to predict all the variations of screen sizes and browsers which people might use. And what’s more, the context in which people use these devices is often misconstrued as well; someone might browse the web on their smartphone while sitting on the couch, while another person might use a tablet with a larger screen while riding the train. Instead of trying to come up with variations on your site to fit every context, it’s better to design one site that makes the best use of whatever screen it is being viewed on.

Planning and defining your site’s content is essential. You shouldn’t have to duplicate content or create multiple versions of pages to accommodate different devices. It’s best to maintain continuity between multiple screens; your site is your site, it just looks different depending on how it’s being accessed. Diagram is a big proponent of Responsive Design, which allows a site to be automatically resized and reformatted when it is viewed on differently-sized screens, without having to recreate any content. However, when designing for responsive sites, we need to keep a few rules in mind. Here are some things to consider:

Design Context: Here, we’re talking about screen context, and not necessarily user context. Responsive design reformats the look of a web page when it is viewed on a narrow screen the width of a smartphone. However, when we’re getting an idea of how the smallest view of the site will look, we shouldn’t just shrink our browser to simulate the smaller size; even if a browser is reduced to a width of 320 pixels, it may still be 1500 pixels tall on a desktop screen, which is not a very good indication of how the site will look on an actual phone. In this context, it might look fine, with menus reoriented, images resized, and text shifted to a readable position, but when viewed on an actual narrow viewport like a smartphone, maybe only the site logo and half of the headline will actually be visible without scrolling. And what’s more, you’ll need to make sure text is displayed at a readable size and buttons are large enough to be tappable. It’s important to test the site on actual devices to make sure it looks the way you want it to look and functions the way you want it to function in the wild.

Usability: The conventions of what is visible and what actions must be taken to navigate through a website are different in a mobile context than they are on a desktop, so you’ll want to be sure to consider what people are used to doing when accessing mobile sites. Since screen space is at a premium on smaller screens, it makes sense to do something like tap a button to display a menu; this would be a terrible design decision on a large screen, since there is no need to hide content when you’ve got plenty of space for it. But you also want to remember that conventions are conventions for a reason, because people are used to them and they make sense. You shouldn’t feel like you have to reinvent the wheel and come up with some fancy new method of navigation just to be flashy. Keep things simple and intuitive, and your site will be one that mobile users find enjoyable to use rather than frustrating.

Images and Graphics: Image size is an ongoing concern in discussions about responsive design; is there a way to feed different size images to different devices? Do you need to upload multiple sizes of each image to your site for each screen type? No convention has been settled on yet, although developers are working on finding a solution across browsers and devices, and some workarounds do exist. For now, since you’re going to want to serve the same content to desktop and mobile users, it’s best to accommodate any low bandwidth users and make sure images aren’t too large. Even the largest banners shouldn’t be more than 200 KB, and each page should be no larger than 1-2 MB.

In addition, you’ll want to consider the aspect ratio and art direction of graphics and images. A thin banner that stretches the width of a desktop site can be illegible when shrunk to mobile size, so you might choose to not show that sort of image at certain screen sizes. And while some images might look good on a large screen, they can lose focus on a small screen. If a photo is shot from too far away or has too much detail, it can become difficult to convey the intent of the photo when it is displayed at a small size. You’ll want to make sure you view any images you want to use at multiple screen sizes, including actually viewing them on a smartphone rather than just by shrinking a desktop browser window.

There’s always more to think about when designing a responsive site, but hopefully this will be enough to help everyone realize some of the challenges that must be taken into consideration for sites that will be accessible at different screen sizes. Do you have any thoughts about other rules or guidelines for responsive sites? Are there any other challenges you’ve faced when developing a mobile version of a site? Please let us know in the comments, or contact us if you have any questions.