Three responsive design concepts
Responsive design is definitely one of the most talked about industry topics. As I covered in this
Introducing Responsive Design post, it’s an approach to web design that adjusts to the user across varying browser sizes. The popularity of responsive design has grown exponentially with the increasing number of tablets and smartphones and users accessing the Internet with these devices. This has made it essential that developers think about all the ways their information is viewed. This article covers just three questions I often get asked. What others would you add?
Responsive design is not mobile design
While responsive design is a fantastic technique for rendering content on mobile devices, it is not just about mobile design. Responsive design covers the whole web design of a site. Absolutely responsive techniques will work on mobile devices. You may even start the design with mobile first. However, it’s much more than that. The best responsive sites I have seen can be viewed on desktops at a variety of resolutions, and they also look amazing on tablets and smartphones. Any developer who considers responsive design only in relation to mobile is missing a whole web experience opportunity.
Good SEO includes responsive design
Anyone interested in building a website is concerned about SEO and responsive design can help. With responsive design you will get better local rankings and avoid content duplication. However, the easiest way to think about responsive design and SEO is to listen to Google.
-
Google supports smartphone-optimized sites in three configurations:
-
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.
-
Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
-
Sites that have separate mobile and desktop URLs.
Read the rest of their recommendations for Building Smartphone-Optimized Websites
here.
The grid continues as your starting point
Designing with a grid has been around since the advent of publishing. Grids solve a basic alignment problem as I discussed in the
Introducing Fluid Grids post. The best responsive projects have the ability to scale proportionally based on a percentage and avoid pixels. I always recommend as a starting point to use the most common widths users view your site. Most responsive grids include at three different browser widths–768 pixels or more, 480 to 768 pixels, and 320 to 480 pixels. Some developers opt to include additional browser widths for greater than 1000 pixels to explicitly support desktop wide-screen monitors. While each of these will render a website at the best-possible resolution, a fluid background fills any leftover space on the screen. Today there are more than a few choices when it comes to choosing a fluid grid. Twitter's
Bootstrap and ZURB's
Foundation are two of my favorite responsive options and well worth taking a look at.