Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Responsive WordPress Themes


Published on

From WordCamp Ottawa, April 27, 2013.

Your website needs to look good and work well on any size screen, all the way from mobile phones to widescreen monitors. Responsive web design is the best way to make sure that it does, but just choosing a WordPress theme with “responsive” in the name isn’t enough. In this session, you’ll find out how to pick a good responsive theme (and what makes some themes more responsive than others) by learning what’s in the CSS that makes a site responsive. You’ll learn how to make sure any plugins you add to the site are also responsive. You’ll find out what else you can customize to make your WordPress site work better on mobile devices, as well as how to make your site future-friendly to address devices that haven’t been invented yet.

Published in: Design, Technology, Business
  • Be the first to comment

Using Responsive WordPress Themes

  1. 1. Using ResponsiveWordPress ThemesWordCamp Ottawa - April 27, 2013Clarissa
  2. 2. "So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck."- my friend whos not a web designer
  3. 3. Fixed-width SiteBefore we started designing websites for mobile phones, sites were nearly always fixed-width.
  4. 4. You can view the site, but everything is really tiny to fit on the screen.
  5. 5. When you zoom in, it’s hard to read because lines of text are wider than the screen.
  6. 6. Separate Mobile SiteThen web designers got the idea to make a separate mobile site that would work onsmartphones. But this means maintaining two separate sites, which is a lot of work.
  7. 7. Mobile-only sites are made to work well and look good on mobile phones of a certainsize.
  8. 8. But all of this content that’s on the main desktop site isn’t available on the mobile site.
  9. 9. There’s a link to view the “Full site,” but then you’re stuck back on a design that doesn’twork well on mobile devices.
  10. 10. Content ParityContent parity is the idea that everybody should have access to the same contentregardless of what device they’re using. A separate mobile site often means there isn’tcontent parity. A lot of people are now using a mobile device for most or all of their webbrowsing -- even if they also have a desktop/laptop computer available to them.
  11. 11. One WebsiteResponsive web design allows you to create one website that will work well and lookgood across all screen sizes.
  12. 12. What you seen on the screen will change, depending on the width of your browserviewport. At mobile-phone width, all the content on this WordPress site is in one column.
  13. 13. The photo and content get wider along with the browser window, and now there’s roomfor some small thumbnails and headlines above the top story.
  14. 14. At a wider viewport width, the content moves into two columns instead of one.
  15. 15. The header changes, and the weather section moves from the header into the maincontent area.
  16. 16. Photo credit: Brad Frost via Creative Commons are a lot of different devices, and we need to make websites that work on all ofthem, rather than mobile-only sites that are optimized for only one size of phone.
  17. 17. Responsive DesignResponsive design is a set of techniques that allow you to create sites that work acrossdevice sizes.
  18. 18. There are three main parts of responsive design.1. Flexible Grid2. Flexible Images/Media3. Media Queries
  19. 19. 1. Flexible Grid2. Flexible Images/Media3. Media QueriesFlexible grid and flexible images/media do similar things. They allow page elements tochange size to make best use of available screen space.
  20. 20. this WordPress site, the image and the text below it are just large enough to fit in thewidth of the browser.
  21. 21. the browser viewport gets wider, so does the picture and the text, so they’re makingbest use of the space.
  22. 22. the site switches to two columns, the content is still the best width to fit in the entirecolumn width.
  23. 23.
  24. 24. 1. Flexible Grid2. Flexible Images/Media3. Media QueriesTo have a flexible grid, you need to use percentages instead of pixels to set thehorizontal width of page elements and margins.
  25. 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 matterhow wide the page is. The left and right margins are 2.5% of the containing element.
  26. 26. 1. Flexible Grid2. Flexible Images/Media3. Media QueriesWith flexible images/media you can make sure that images (and videos, etc.) always fitinside their containing element -- but never get too big. Images should never be displayedat a size larger than the actual width of the image file, otherwise they’ll get blurry.
  27. 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 availablespace in the containing element, but the image will never be larger than the actualdimensions of the image file.
  28. 28. 1. Flexible Grid2. Flexible Images/Media3. Media QueriesMedia queries are the “magic pixie dust” of responsive design. This is what allows thepage to change depending on the width of the browser viewport.
  29. 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 aminimum of 300 pixels wide? If the answer is yes, then render the CSS that’s inside themedia query (where the dots are). If the answer is no, then ignore the CSS inside themedia query.
  30. 30. @media screen and (max-width: 300px) {...}You can also use max-width. Is the browser a maximum of 300 pixels wide? In otherwords is it 300 pixels wide or less?
  31. 31. @media screen and (max-width: 18.75em) {...}It’s becoming more common to do viewport width media queries using proportional emsinstead of fixed-size pixels. This helps with device compatibility.
  32. 32. This WordPress site uses media queries to change the layout based on viewport width.
  33. 33. At a narrower viewport width, the navigation moves to the top of the screen, and theimages at the bottom are three-across instead of four-across.
  34. 34. At this width, there’s only room for two images across.
  35. 35. When the site gets even narrower, there isn’t room for a horizontal navigation, so itswitches to a vertical list, next to the site logo.
  36. 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. Thesite header is essentially in a box in the top left -- using fixed positioning and a fixedwidth. The list items are display: block; so that they are displayed vertically.
  37. 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 CSSis rendered. Remember that because of the cascade, it overrides previous CSS. Theheader now has relative positioning instead of fixed, so it’s at the top of the page. Thelist items are now inline, so they are in a horizontal row.
  38. 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 theprevious 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. 39. min-device-width: 00pxmax-device-width: 00pxorientation: landscapeorientation: portraitdevice-aspect-ratio: 16/9min-color-index: 256min-resolution: 300dpiThese are some of the other types of media queries. Not all of them are currentlysupported by all devices.
  40. 40. Small-Screen FirstAs you’re designing a responsive site, you can’t design all widths at the same time -- youneed to start somewhere. It’s easiest to start designing from the small-screen view first.
  41. 41. Imagine taking this site design and making a small-screen version of it.
  42. 42. It would be pretty much impossible, so The Washington Post chose to make a mobile appinstead. It’s very clean and easy to navigate, but with far less content. They only put inthe important stuff.
  43. 43. But if that was the important stuff, what’s all this? This screenshot is of the entire frontpage of The Washington Post. There are something like 260 text links, not countingimages and ads. Designing from the small screen first forces you to make decisions aboutwhat’s important. Small screen first doesn’t mean that the small screen is more importantthan other sizes, it just means that you’re working on that part of the design first.
  44. 44. BreakpointsBreakpoints are the screen widths at which you add media queries so that somethingchanges in the layout. Don’t try to make them coincide with device widths -- there aretons of devices, and they’re always changing. Set your breakpoints at the points at whichthe design looks like it needs to change.
  45. 45. There are so many different screen sizes and device types --- and new ones beinginvented all the time. Web browsers in refrigerators?Illustration credit:Anna Debenham via Creative Commons
  46. 46. Mobile PluginsYou 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 ofdisadvantages.
  47. 47. This WordPress site has a fixed-width theme.
  48. 48. This is how it looks on a phone -- everything squished to fit on the screen.
  49. 49. With a mobile plugin, you get this. It’s optimized for mobile -- you get all the content, andit’s easy to read, but all your design and branding is missing.
  50. 50. Consistent UI/BrandingIt’s a problem that the site looks so different on a phone. Users who visit your site ondifferent devices expect the user interface (UI) to be similar. Also, if they see your mobilesite with no branding, they might be confused about whether that’s really your website.
  51. 51. Device DetectionMobile plugins do their thing by detecting what kind of device the website is beingviewed on. Unfortunately, it doesn’t work correctly all the time. Sometimes you’ll get themobile version on your desktop browser and vice versa.
  52. 52. PerformanceAdding a mobile plugin also adds a big chunk of code to your site, which means thatyour site will take more time to load. If someone is using a mobile phone over a cellularnetwork to visit your site, this is a big issue.
  53. 53. Mobitext to test the performance of your site. Give it a URL, choose a device, and itwill tell you the average load time and average page size.
  54. 54. Choosing aResponsive ThemeIf you search for responsive WordPress themes, you’ll find tons of results. But just as notall themes are well-designed and well-coded, not all responsive themes are either.
  55. 55. With this responsive theme, looking at a preview at various browser widths shows thatthe theme creators didn’t put a lot of thought into the design. The content only takes uphalf the page, and there’s a lot of weird alignment.
  56. 56. Photo credit: Brad Frost via Creative Commons’s important to see how your theme looks on your site at various widths (resize yourbrowser window) and also to test it on real devices, which might render it differently thanyour desktop browser. Take a close look at the theme preview at various sizes before youeven get started. Once you’ve installed a theme, make sure you’re testing on differentdevices and browsers.
  57. 57. CommentsLook at the comments that have been left on the theme page. If there are problems withits responsiveness, often someone will complain about it. That will give you a clue ofissues to check for, but keep in mind comments are not always accurate, or thedevelopers may have fixed the problem after the comment was made.
  58. 58. font-sizein ems or rems, not pixelsI’ve found that one of the best tests of whether a responsive WordPress theme is reallyresponsive is to look at the font styles. In a responsive website, font-size shouldalways be in ems or rems (proportional sizes) rather than pixels (fixed sizes).
  59. 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 inpixels and not ems/rems. Search the stylesheet for font-size and check.
  60. 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 olderbrowsers can’t interpret rems. The pixels are a backup, but the pixel styles will befollowed immediately by rems which will override the pixel measurement for anybrowsers that understand rems. Adding pixels for this reason is okay. But if you see pixelsby themselves in the stylesheet, that’s a sign that the theme isn’t responsive.
  61. 61. Here are a couple responsive themes, and how they work.Responsive ThemeExamples
  62. 62. This is Twenty Twelve, the current default theme for new WordPress installations. It’s apretty simple design, and if you want to create your own responsive child theme, this is agood place to start.
  63. 63. At the narrow screen width, click the Menu button to get a dropdown of the menu.
  64. 64. Scroll down, and here’s all the content.
  65. 65. At a wider width, you’ll see that the photo (in the post) will automatically change size totake up the full available width.
  66. 66. Once the viewport is wide enough, the content rearranges into two columns.
  67. 67. At the wider viewport widths, you also see that the menu changes from a button that youclick to a regular horizontal menu bar.
  68. 68. This is another responsive theme. Not all responsive sites have plain, flat designs.
  69. 69. On this one, when you click the menu button, you get the menu as an overlay rather thana dropdown.
  70. 70. All the content is there, if you scroll down.
  71. 71. At this width, the post image and the slide carousel expand to fit the available space.
  72. 72. Once there’s enough space, the content splits into two columns.
  73. 73. On a wide screen, you get a lovely slide carousel that takes up most of the page width. Ifyou use slides with text on them, make sure they’re readable on every screen size, evenwhen the image is smaller.
  74. 74. Responsive pluginsThere are many plugins that will help make your WordPress site more responsive. Hereare just a couple examples.
  75. 75. The Portfolio Slideshow lets you add a responsive slide carousel on your site.
  76. 76. As the width of the containing element gets wider, the slideshow expands to take up theavailable space.
  77. 77.
  78. 78. Responsive Page Tester is a plugin that helps you test your responsive design. Wheninstalled, it adds a “Responsive” link in your admin toolbar.
  79. 79. Click on “Responsive,” and you get an option to view the site at various common devicesizes, or all of them at once.
  80. 80. Although this isn’t a replacement for testing on real devices, it’s handy to get a quickview of how your design looks over a range of screen widths.
  81. 81.
  82. 82. Clarissa soon:Learning Responsive Web DesignO’Reilly Media, 2013