WordPress Responsive Web Design Workshop by Dan Gavin
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?
- Adaptive grid system
- Scalable images / video
- Media queries
- Organization
- Crying
1. Adaptive grid system
- The 960 grid from 960.gs
- The 1140 CSS Grid from Cssgrid.net
- The Golden Grid System from Goldengridsystem.com
- Less Framework from LessFramework.com
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.
