Anyone who is involved with building websites these days has probably heard the term “responsive web design.” Responsive web design (RWD) is a term coined by Ethan Marcotte in his A List Apart article that refers to using various techniques and technologies to serve different visual presentations of a website to various devices.
What this really means to most of us right now is: we can use RWD to create mobile versions of our websites.
And we can! With a combination of CSS3 media queries, smart, flexible front-end coding and maybe a bit of Javascript, we can now realistically serve the same HTML to various devices (with various screen sizes) and customize the layouts to look and work how we’d like them to in those environments. Very cool!
Here’s a nice example of some swell responsive web design: CSS Tricks. Open this in your browser and then reduce the window size and check it out! The layout for the narrowest window (for a smartphone) would look great on a phone. And watch how the navigation and page layout changes as you open the window back up. Really well done.
Responsive web design brings with it some new challenges and ways of thinking. Here are a few things to consider:
1. We’re Building Experiences
For a long time, we have had one main goal: to create a website that looks great and works perfectly in desktop browsers. We’ve spent years learning CSS and Javascript tricks and slicing up graphics to get our sites “pixel perfect” in the browser. There were definitely fluid sites out there but, at least in my experience, fixed-width sites, with an almost obsessive eye for pixel detail, has been the name of the game. But, this kind of thinking looks to be on its way out.
Instead of thinking about creating a “website” that looks good in a desktop web browser, we need to start thinking about creating good “experiences.” We want our users to have a good experience in a desktop browser but, when they visit our site on a smartphone, we also want them to have a good experience. Anyone who has visited a normal website on a smartphone has experienced the frustration of trying to tap impossibly small links or having to zoom in on elements to find out what they are. Not a good experience.
So we need to think about what kind of experiences can we build for our users.
2. More Research and Planning
We’ve always done research and planning when we’ve started a web project but now we’ve got a few more things to think about. We now need to be sensitive to how our users are accessing our site. We can review our analytics and see where our traffic is coming from. You’re probably starting to see an uptick in mobile browser access. And the prevailing wisdom is that mobile web access is on the rise and will only keep growing in the future.
After identifying how our users are accessing our site, we need to decide what kind of devices we plan to make layouts for and how those layouts are going to be structured. This means wireframes for each layout for each device. It is just good to plan for the fact that you may be creating 2 or 3 times more wireframes than before.
3. Time to Consider Dynamic Prototyping
Static wireframes are common in planning a website. But my feeling is that static wireframes will eventually be phased out in favor of dynamic prototypes. A dynamic prototype is built with HTML and CSS and, like a wireframe, is a very simplistic model of the site. And by making this prototype responsive, the different layouts will show the client the layouts intended for each screen size.
There are some fantastic tools out there to get things started. Among the best I’ve seen:
Twitter Bootstrap
Foundation
Less Framework
320 and Up
And it must be mentioned that, since you are wireframing in HTML/CSS code, you are getting a head start on your theming/front-end coding work. For some projects, this could be a massive development time saver.
4. Grids
If you haven’t been using a CSS grid system before now, you’ll probably want to start. A flexible grid system is extremely useful for RWD projects as it is a framework to build your various layouts upon. A lot of the benefits to be found in the prototyping tools above are due to the grid systems they employ. There is not one grid system that is better than another – they all have their strengths and weaknesses. But it is fair to say that if you are taking RWD seriously, you’ll want to learn about grid systems.
Some grid systems (all of the prototyping frameworks above have grids too):
960 Grid System
CSS Grid
Frameless
Skeleton
5. Mobile Layout Considerations
There are many things to consider when you’re wireframing and designing your mobile layouts. This is a large topic unto itself but I’ll hit a few points that will definitely come up:
What do your mobile users do on your site?
The needs, wants, and habits of your mobile users should influence your mobile layouts. The most useful and pertinent information or actions need to be front and center.
Navigation
Navigation takes up a lot of screen-space. You’ll want to think about ways to get it out of the way so it doesn’t degrade your user’s experience.
Touch
People using touch screens are using their fingers to click on items. Items need to big enough to click and spaced apart enough to prevent mis-clicks. Also, people are becoming familiar with touch gestures (for example, swiping, dragging, pinching, etc). These can be used to enhance your user’s experience.
Images
This is a big can of worms right now. There is no perfect way to deal with the serving of smaller images to bandwidth-constrained users. But, as time goes on, a de facto standard will emerge as a way to solve this issue. But, for now, you’ll want to consider what to do about large images and their impact on bandwidth-constrained users.
There are many other considerations, of course. For an in-depth look, please buy and read the books at the end of this article.
Conclusion
This is certainly an exciting time to be building and using websites. How very cool it is to be served layouts that are customized to your device! We have come a long way since the days of content and presentation being garbled together in one, impossible-to-maintain, HTML table. Now we can take one HTML document and serve up as many variations as we want. This is the promise of CSS at its best and it will be very exciting to see how responsive web design grows and improves in the coming years.
Must-Read Resources:
Responsive Web Design by Ethan Marcotte
Mobile First by Luke Wroblewski
