Using Responsive WordPress Themes

Using Responsive WordPress ThemesWordCamp Ottawa - April 27, 2013

Clarissa Petersonclarissapeterson.com

@clarissa

http://www.clarissapeterson.com

http://www.clarissapeterson.com

http://www.twitter.com/clarissa

http://www.twitter.com/clarissa

"So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck."

- my friend who's not a web designer

Fixed-width Site

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

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

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

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.

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

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

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.

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.

One Website

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

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.

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.

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

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

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.

http://flic.kr/p/cfQwL7


Responsive Design

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

There are three main parts of responsive design.

1. Flexible Grid2. Flexible Images/Media

3. Media Queries


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.

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.

http://ribot.co.uk

http://ribot.co.uk

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.

http://ribot.co.uk

http://ribot.co.uk

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.

http://ribot.co.uk

http://ribot.co.uk

http://ribot.co.uk/

http://ribot.co.uk

http://ribot.co.uk


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.

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.


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.

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.


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.

@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.

@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?

@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.

This WordPress site uses media queries to change the layout based on viewport width.

http://thisisyoke.com/

http://thisisyoke.com


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.




At this width, there’s only room for two images across.




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.




#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.

@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.

@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.

min-device-width: 00pxmax-device-width: 00px

orientation: landscapeorientation: 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.

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.

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

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.

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.

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.

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

http://flic.kr/p/dtMQTL

http://flic.kr/p/dtMQTL

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.

This WordPress site has a fixed-width theme.

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

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.

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.

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.

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.

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.

http://mobitest.akamai.com

http://mobitest.akamai.com

Choosing aResponsive 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.

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.

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.



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.

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).

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.

.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.

Here are a couple responsive themes, and how they work.

Responsive ThemeExamples

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



At the narrow screen width, click the Menu button to get a dropdown of the menu.




Scroll down, and here’s all the content.




At a wider width, you’ll see that the photo (in the post) will automatically change size to take up the full available width.




Once the viewport is wide enough, the content rearranges into two columns.




At the wider viewport widths, you also see that the menu changes from a button that you click to a regular horizontal menu bar.




This is another responsive theme. Not all responsive sites have plain, flat designs.

http://wordpress.org/extend/themes/iribbon



On this one, when you click the menu button, you get the menu as an overlay rather than a dropdown.




All the content is there, if you scroll down.




At this width, the post image and the slide carousel expand to fit the available space.




Once there’s enough space, the content splits into two columns.




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.




Responsive plugins

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

The Portfolio Slideshow lets you add a responsive slide carousel on your site.

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



As the width of the containing element gets wider, the slideshow expands to take up the available space.







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/



Click on “Responsive,” and you get an option to view the site at various common device sizes, or all of them at once.




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.







Clarissa Petersonclarissapeterson.com

@clarissa

coming soon:Learning Responsive Web DesignO’Reilly Media, 2013