If you’ve never given responsive design a try because it seems too hard, you’re not alone. I’ll admit that it took me a long time to work up the nerve to try it. Everything just seemed so complicated.

But it doesn’t have to be. I’m going to show you how to build a responsive site from scratch, the easy way. No math, and no formula.

If you keep reading, you’ll download code for a demo website that you will edit on your own computer so you can see exactly how everything works. This tutorial is based on a presentation I gave at MobileUXCamp DC in September 2012.

Is Responsive Design Really This Easy?

Remember when you learned HTML? You didn’t try to learn all of it in an hour. You started with a few tags like <p>, <b>, and <center> (depending on how long ago you learned). You learned how to add links and images. And it was pretty cool because that was all you needed to make a web page.

If you’ve tried to learn responsive design, you may have been overwhelmed by all the words coming at you: fluid grids, frameworks, retina images, targets, contexts, breakpoints, load times, conditional loading, viewports, polyfills, and seriously yes that makes even my head hurt.

So forget all of that for now. Today you’re just going to learn how to make a responsive website.

Read more ›

If you missed my sold-out responsive design workshop last month, you’re in luck — DC Web Women has asked me to do a repeat of Introduction to Responsive Web Design for the Tuesday, Sept. 11, installment of their Code(Her) workshop series. But sign up ASAP, as tickets are going quickly. This is a 2-hour hands-on coding workshop, so bring your laptop. And FYI, even though DC Web Women are sponsoring, the event is open to people of all genders.

Later in the month, the UX & Mobile Creatives Meetup group is hosting a before-work gathering on Tuesday, Sept. 25, titled Responsive Design Heaven and Hell, where you can hear the positive and negative sides of responsive web design. I’ll be speaking on behalf of Good, and James Baldwin from agencyQ will be speaking for Evil — I mean, he’ll be representing the negative view. And it’s a free event, so you should definitely go even though it means waking up super-early.

Also this month is MobileUXCamp on Saturday, Sept 15. I won’t tell you to register for this one, because it’s already sold out. If you’re going, there will certainly be a few sessions on responsive design, including one from event sponsor agencyQ called Responsive Design is not the Silver Bullet to Mobile Strategy. MobileUXCamp is a barcamp/unconference, so most of the schedule isn’t set until the morning of, but maaaaaybe if you’re lucky you’ll get to hear me say a little something about responsive design, like perhaps my Responsive Design is Easy presentation.

Anything else going on that you know of? Let me know and I’ll post it here.

Earlier this summer I attended Wikimania, the annual conference of the Wikipedia community, and went to a session demonstrating a new interface for editing Wikipedia pages.

Editing Wikipedia needs to be more intuitive, the speaker pointed out in his presentation. Currently, when editing pages on Wikipedia (which anyone can do), you need to use what’s called wikicode, a complicated markup that can seem baffling to new users. For example, text is made italic by enclosing it in double apostrophes, hyperlinks are enclosed in double brackets, and headings are enclosed in multiple equals sign symbols.

So of course it should be more intuitive.

But next the presenter told us, “The interface should be more like a word processor.”

Wait. No, it shouldn’t.

Actually, not even word processors should be like word processors. Much less all the websites with content editing interfaces.

I mean, can’t we get past the point where the entire web has to be modeled on what things were like before we had the web?

Read more ›

Thanks to everyone who came to my Introduction to Responsive Web Design workshop last night. If you missed it, I’ve posted the slides for you to view online or download:

• Slides from Introduction to Responsive Web Design

Here’s what we talked about:

• Responsive web design (RWD) is a collection of techniques that allow your website to respond to the device that it is being viewed on. This allows all users to have an optimal experience without creating separate sites for different devices.
• The three pieces of RWD are: a flexible, grid-based layout; flexible images and media; and media queries.
• You don’t need to learn new technologies or programming languages. Responsive design is mostly comprised of HTML and CSS, with a little bit of JavaScript thrown on top.
• We’ve always thought of web design as decorating a fixed-size page like a painter does a canvas. But we’ve moved to an era where web sites are viewed on a wide range of devices and screen sizes, so we need to change our thinking.  The web is free from the physical restraints of a canvas. 
• Responsive web design is about being able to respond and adapt so that each user can get the best possible experience. It’s like Frank Lloyd Wright building a house on top of a waterfall.
• Mobile strategy is important because the number of people accessing your site with mobile devices is only going to keep increasing. Having a responsive site is a start, but it shouldn’t be your entire mobile strategy.
• Your workflow needs to change to accommodate responsive design. We are now free of the canvas, so don’t limit yourself to a Photoshop canvas. Think from a content-first perspective to make sure your site can meet the needs of your users, rather than just looking pretty.

We also went through a hands-on demonstration of converting the DC Web Women site design from fixed width to responsive. All of the demo code, as well as a link to the files so you can try it yourself, are in the slides from the workshop.

Thanks to DC Web Women for organizing the event and Living Social for hosting us. Stay tuned for DC Web Women Code(Her) workshops on the second Tuesday of every month.