1. Using Responsive
WordPress Themes
WordCamp Ottawa - April 27, 2013
Clarissa Peterson
clarissapeterson.com
@clarissa

2. "So you’re going to make websites
work better on mobile phones?
Because right now they mostly all suck."
- my friend who's not a web designer

3. Fixed-width Site
Before we started designing websites for mobile phones, sites were nearly always fixed-
width.

4. You can view the site, but everything is really tiny to fit on the screen.

5. When you zoom in, it’s hard to read because lines of text are wider than the screen.

6. Separate Mobile Site
Then web designers got the idea to make a separate mobile site that would work on
smartphones. But this means maintaining two separate sites, which is a lot of work.

7. Mobile-only sites are made to work well and look good on mobile phones of a certain
size.

8. But all of this content that’s on the main desktop site isn’t available on the mobile site.

9. There’s a link to view the “Full site,” but then you’re stuck back on a design that doesn’t
work well on mobile devices.

10. Content Parity
Content parity is the idea that everybody should have access to the same content
regardless of what device they’re using. A separate mobile site often means there isn’t
content parity. A lot of people are now using a mobile device for most or all of their web
browsing -- even if they also have a desktop/laptop computer available to them.

11. One Website
Responsive web design allows you to create one website that will work well and look
good across all screen sizes.

12. What you seen on the screen will change, depending on the width of your browser
viewport. At mobile-phone width, all the content on this WordPress site is in one column.

13. The photo and content get wider along with the browser window, and now there’s room
for some small thumbnails and headlines above the top story.

14. At a wider viewport width, the content moves into two columns instead of one.

15. The header changes, and the weather section moves from the header into the main
content area.

16. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
There are a lot of different devices, and we need to make websites that work on all of
them, rather than mobile-only sites that are optimized for only one size of phone.

17. Responsive Design
Responsive design is a set of techniques that allow you to create sites that work across
device sizes.

18. There are three main parts of responsive design.
1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

19. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
Flexible grid and flexible images/media do similar things. They allow page elements to
change size to make best use of available screen space.

20. http://ribot.co.uk/
In this WordPress site, the image and the text below it are just large enough to fit in the
width of the browser.

21. http://ribot.co.uk/
As the browser viewport gets wider, so does the picture and the text, so they’re making
best use of the space.

22. http://ribot.co.uk/
When the site switches to two columns, the content is still the best width to fit in the entire
column width.

23. http://ribot.co.uk/

24. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
To have a flexible grid, you need to use percentages instead of pixels to set the
horizontal width of page elements and margins.

25. article {
width: 30%;
float: left;
margin: 5px 2.5%;
}
This content is styled to take up 30% of the width of the containing element, no matter
how wide the page is. The left and right margins are 2.5% of the containing element.

26. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
With flexible images/media you can make sure that images (and videos, etc.) always fit
inside their containing element -- but never get too big. Images should never be displayed
at a size larger than the actual width of the image file, otherwise they’ll get blurry.

27. img, object, video {
max-width: 100%
}
By not manually setting width/height on the IMG element, and setting max-width:
100% in the CSS, you’ll give the image the ability to change size to take up the available
space in the containing element, but the image will never be larger than the actual
dimensions of the image file.

28. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries
Media queries are the “magic pixie dust” of responsive design. This is what allows the
page to change depending on the width of the browser viewport.

29. @media screen and (min-width: 300px) {
...
}
Media queries always start with @media. The important part is min-width: 300px.
This is essentially a question that the CSS is asking the browser. Is the browser viewport a
minimum of 300 pixels wide? If the answer is yes, then render the CSS that’s inside the
media query (where the dots are). If the answer is no, then ignore the CSS inside the
media query.

30. @media screen and (max-width: 300px) {
...
}
You can also use max-width. Is the browser a maximum of 300 pixels wide? In other
words is it 300 pixels wide or less?

31. @media screen and (max-width: 18.75em) {
...
}
It’s becoming more common to do viewport width media queries using proportional ems
instead of fixed-size pixels. This helps with device compatibility.

32. This WordPress site uses media queries to change the layout based on viewport width.
http://thisisyoke.com/

33. At a narrower viewport width, the navigation moves to the top of the screen, and the
images at the bottom are three-across instead of four-across.
http://thisisyoke.com/

34. At this width, there’s only room for two images across.
http://thisisyoke.com/

35. When the site gets even narrower, there isn’t room for a horizontal navigation, so it
switches to a vertical list, next to the site logo.
http://thisisyoke.com/

36. #header {
position: fixed;
top: 0;
left: 0;
width: 170px;
height: 100%;
}
.menu li {
display: block;
}
The CSS starts with the widest screen width, for which no media queries are needed. The
site header is essentially in a box in the top left -- using fixed positioning and a fixed
width. The list items are display: block; so that they are displayed vertically.

37. @media screen and (max-width: 985px) {
#header {
position: relative;
width: 100%;
height: 186px;
}
.menu li {
display: inline;
}
}
When the viewport is 985 pixels or narrower, this media query is true, so additional CSS
is rendered. Remember that because of the cascade, it overrides previous CSS. The
header now has relative positioning instead of fixed, so it’s at the top of the page. The
list items are now inline, so they are in a horizontal row.

38. @media screen and (max-width: 510px) {
#header {
height: 300px;
}
.menu li {
display: block;
}
#site-info {
float: left;
}
}
When the viewport is 510 pixels or narrower, this set of CSS is rendered, overriding the
previous CSS. The header is now given a fixed height and floated against the site logo.
The list items are again block, so they’re vertical instead of horizontal.

39. min-device-width: 00px
max-device-width: 00px
orientation: landscape
orientation: portrait
device-aspect-ratio: 16/9
min-color-index: 256
min-resolution: 300dpi
These are some of the other types of media queries. Not all of them are currently
supported by all devices.

40. Small-Screen First
As you’re designing a responsive site, you can’t design all widths at the same time -- you
need to start somewhere. It’s easiest to start designing from the small-screen view first.

41. Imagine taking this site design and making a small-screen version of it.

42. It would be pretty much impossible, so The Washington Post chose to make a mobile app
instead. It’s very clean and easy to navigate, but with far less content. They only put in
the important stuff.

43. But if that was the important stuff, what’s all this? This screenshot is of the entire front
page of The Washington Post. There are something like 260 text links, not counting
images and ads. Designing from the small screen first forces you to make decisions about
what’s important. Small screen first doesn’t mean that the small screen is more important
than other sizes, it just means that you’re working on that part of the design first.

44. Breakpoints
Breakpoints are the screen widths at which you add media queries so that something
changes in the layout. Don’t try to make them coincide with device widths -- there are
tons of devices, and they’re always changing. Set your breakpoints at the points at which
the design looks like it needs to change.

45. There are so many different screen sizes and device types --- and new ones being
invented all the time. Web browsers in refrigerators?
Illustration credit:Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL

46. Mobile Plugins
You might have heard that you can use a mobile plugin to make your site “mobile-
friendly.” These plugins are not a replacement for responsive design -- they have a lot of
disadvantages.

47. This WordPress site has a fixed-width theme.

48. This is how it looks on a phone -- everything squished to fit on the screen.

49. With a mobile plugin, you get this. It’s optimized for mobile -- you get all the content, and
it’s easy to read, but all your design and branding is missing.

50. Consistent UI/Branding
It’s a problem that the site looks so different on a phone. Users who visit your site on
different devices expect the user interface (UI) to be similar. Also, if they see your mobile
site with no branding, they might be confused about whether that’s really your website.

51. Device Detection
Mobile plugins do their thing by detecting what kind of device the website is being
viewed on. Unfortunately, it doesn’t work correctly all the time. Sometimes you’ll get the
mobile version on your desktop browser and vice versa.

52. Performance
Adding a mobile plugin also adds a big chunk of code to your site, which means that
your site will take more time to load. If someone is using a mobile phone over a cellular
network to visit your site, this is a big issue.

53. http://mobitest.akamai.com/
Use Mobitext to test the performance of your site. Give it a URL, choose a device, and it
will tell you the average load time and average page size.

54. Choosing a
Responsive Theme
If you search for responsive WordPress themes, you’ll find tons of results. But just as not
all themes are well-designed and well-coded, not all responsive themes are either.

55. With this responsive theme, looking at a preview at various browser widths shows that
the theme creators didn’t put a lot of thought into the design. The content only takes up
half the page, and there’s a lot of weird alignment.

56. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
It’s important to see how your theme looks on your site at various widths (resize your
browser window) and also to test it on real devices, which might render it differently than
your desktop browser. Take a close look at the theme preview at various sizes before you
even get started. Once you’ve installed a theme, make sure you’re testing on different
devices and browsers.

57. Comments
Look at the comments that have been left on the theme page. If there are problems with
its responsiveness, often someone will complain about it. That will give you a clue of
issues to check for, but keep in mind comments are not always accurate, or the
developers may have fixed the problem after the comment was made.

58. font-size
in ems or rems, not pixels
I’ve found that one of the best tests of whether a responsive WordPress theme is really
responsive is to look at the font styles. In a responsive website, font-size should
always be in ems or rems (proportional sizes) rather than pixels (fixed sizes).

59. html {
font-size: 100%;
}
Check this first, in the main theme stylesheet. The html element should have a font-
size based on percentage. If it doesn’t, it’s likely that the rest of the fonts are also in
pixels and not ems/rems. Search the stylesheet for font-size and check.

60. .comment-content th {
font-size: 11px;
font-size: 0.785714286rem;
}
FYI, if the website uses rems, it will also have pixels in the stylesheet, because some older
browsers can’t interpret rems. The pixels are a backup, but the pixel styles will be
followed immediately by rems which will override the pixel measurement for any
browsers that understand rems. Adding pixels for this reason is okay. But if you see pixels
by themselves in the stylesheet, that’s a sign that the theme isn’t responsive.

61. Here are a couple responsive themes, and how they work.
Responsive Theme
Examples

62. This is Twenty Twelve, the current default theme for new WordPress installations. It’s a
pretty simple design, and if you want to create your own responsive child theme, this is a
good place to start.
http://wordpress.org/extend/themes/twentytwelve

63. At the narrow screen width, click the Menu button to get a dropdown of the menu.
http://wordpress.org/extend/themes/twentytwelve

64. Scroll down, and here’s all the content.
http://wordpress.org/extend/themes/twentytwelve

65. At a wider width, you’ll see that the photo (in the post) will automatically change size to
take up the full available width.
http://wordpress.org/extend/themes/twentytwelve

66. Once the viewport is wide enough, the content rearranges into two columns.
http://wordpress.org/extend/themes/twentytwelve

67. At the wider viewport widths, you also see that the menu changes from a button that you
click to a regular horizontal menu bar.
http://wordpress.org/extend/themes/twentytwelve

68. This is another responsive theme. Not all responsive sites have plain, flat designs.
http://wordpress.org/extend/themes/iribbon

69. On this one, when you click the menu button, you get the menu as an overlay rather than
a dropdown.
http://wordpress.org/extend/themes/iribbon

70. All the content is there, if you scroll down.
http://wordpress.org/extend/themes/iribbon

71. At this width, the post image and the slide carousel expand to fit the available space.
http://wordpress.org/extend/themes/iribbon

72. Once there’s enough space, the content splits into two columns.
http://wordpress.org/extend/themes/iribbon

73. On a wide screen, you get a lovely slide carousel that takes up most of the page width. If
you use slides with text on them, make sure they’re readable on every screen size, even
when the image is smaller.
http://wordpress.org/extend/themes/iribbon

74. Responsive plugins
There are many plugins that will help make your WordPress site more responsive. Here
are just a couple examples.

75. The Portfolio Slideshow lets you add a responsive slide carousel on your site.
http://wordpress.org/extend/plugins/portfolio-slideshow/

76. As the width of the containing element gets wider, the slideshow expands to take up the
available space.
http://wordpress.org/extend/plugins/portfolio-slideshow/

77. http://wordpress.org/extend/plugins/portfolio-slideshow/

78. Responsive Page Tester is a plugin that helps you test your responsive design. When
installed, it adds a “Responsive” link in your admin toolbar.
http://wordpress.org/extend/plugins/responsive-page-tester/

79. Click on “Responsive,” and you get an option to view the site at various common device
sizes, or all of them at once.
http://wordpress.org/extend/plugins/responsive-page-tester/

80. Although this isn’t a replacement for testing on real devices, it’s handy to get a quick
view of how your design looks over a range of screen widths.
http://wordpress.org/extend/plugins/responsive-page-tester/

81. http://wordpress.org/extend/plugins/responsive-page-tester/

82. Clarissa Peterson
clarissapeterson.com
@clarissa
coming soon:
Learning Responsive Web Design
O’Reilly Media, 2013