WordPress Responsive Web Design Workshop by Dan Gavin

| Live Blog Posts

This is our live blog of the session “Responsive Web Design Workshop” by Dan Gavin. It was given at WordCamp Birmingham.

This was Dan’s first WordCamp presentation but it was hard to tell. He was organized and spoke really well.

What is Responsive Web Design?

Ethan Marcotte wrote “We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

Twenty Eleven, the current WP theme and also the admin area, are both now responsive.

Check Jasonsantamaria.com for a great example from a WordPress developer:

Also Strangenative.com whose creator now works with Facebook.

What do you need to be responsive?

  1. Adaptive grid system
  2. Scalable images / video
  3. Media queries
  4. Organization
  5. Crying

1. Adaptive grid system

Gridulator.com helps with your math for creating grids.

Alistapart.com/articles/fluidgrids is a great introductory article.

Avoid using pixels sizes on your fonts.

2. Scalable images / video

Doing media is often the trickiest part of responsive design. WordPress doesn’t help by adding it’s own custom classes.

Video is tricky because you need to deal with so many different embed options and different players.

FitVid.js is a big help in solving videos: Fitvidsjs.com. It supports YouTube, Vimeo, Blip.tv, Viddler and Kickstarter.

3. Media queries

These are like conditional comments in your CSS. They will look like this:

/* Media = iPad */
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

You will of course see more for the phones, large desktops, laptops and others.

css3-mediaqueries.js is a good solution for older browsers.

4. Organization

Being responsive does require you to be better organized. Dividing your work into files such tablet.css, mobile.css and similarly named files. This helps your work load quicker and also helps you debug more quickly.

5. Crying

It can be tough and experimental work. Keep at it!

Responsive WordPress Themes to Try

Final Thoughts

Not every website should be responsive. Not all website have a large enough mobile audience to justify it.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.