- Our Work
- Industries We Serve
- Services We Deliver
- Why Work with Us
- Our Thinking
- Week in Review
- 5 Ways Design Systems Create Business Value
- 5 Ways to Make Your Nonprofit Engage Using Facebook Timeline
- 6 Great Interactive Data Visualization Tools (Part 1)
- 6 Great Interactive Data Visualization Tools (Part 2)
- Announcing the First Brands Behaving Badly Awards
- Best of 2011 Roundup
- Brands Behaving Badly, Summer 2010 Bronze Medalist, Lebron James
- Brands Behaving Badly, Summer 2010 Gold Medalist, BP
- Brands Behaving Badly, Summer 2010 Silver Medalist, Toyota
- DIY Communications: Multitasking Your Way to a Mediocre Brand
- Five Things to Consider as You Dive Into Responsive Web Design
- Getting High on Your Own Supply
- Intervention: Identity Crisis Edition
- Invest in Partners, Not Products
- Is Your User Experience Degrading Your Brand?
- Labeling for Good: White Paper
- Maximizing Design Firm Relationships During the Budgeting Process
- Maximizing Design Firm Relationships by Managing Stakeholder Input
- Maximizing Design Firm Relationships by Setting Appropriate Success Metrics
- Putting Pinterest to Work for Your Business or Nonprofit Brand
- Putting Pinterest to Work for Your Business or Nonprofit Brand Part 2
- Responsive Design Planning: More Than a Line Item
- Rethinking the Traditional Policy Report
- Show Your Nonprofit's Brand a Little Love!
- Speaking a Client's Language
- State of the State of the Union: Power(Point) to the People?
- Stepping Back From Komen's Brand Disaster
- The 5 Benefits of Designing a Consistent Brand
- The Fundamentals of Developing a Strong Brand
- The Website RFP - Basic Best Practices for Small Businesses and Non-Profit Organizations
- Three Ways for Nonprofits to Maximize Design Firm Relationships
- Three Ways to Future-Proof Your Content Management System
- Web Typography Part 1
- Web Typography: An Important Way to Strengthen Your Brand Online (Part 2)
Five Things to Consider as You Dive Into Responsive Web Design
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.
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
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 & 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.
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.
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.
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 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.
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.
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.
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.
Posted by Paul Chamberlain
May 9, 2012
Categories: Design, Process, Technology, User Experience, Web Design
InsightsThe 4 Strategic Foundations of Effective Websites InsightsGetting Buy-In: How to Galvanize Stakeholders and Create an Army of Support for Your Project InsightsThe Real Climate Change Crisis InsightsInsights From The 2014 NTC & GMN Conferences InsightsMSDS Presenting on Branding, UX and Dataviz at Upcoming Nonprofit Conferences InsightsIndexes are the New Infographics Insights6 Ways to Tell Your Story With Interactive Maps InsightsHow Brand Strategy Leads to More Effective Website Design Insights3 Non-Technical Solutions to Some of Obamacare's Biggest Website Problems