How to Customize Responsive WordPress Themes – Part 3

Style rules to look out for… and why.

This is the 3rd part of the series on “How to Customize Responsive WordPress Themes“. In this article, we’ll be taking a look at some style rules that you can use “risk free” when customizing responsive WordPress themes, as well as some that should maybe be avoided, and what you can do instead.

Before we begin though, I think it’s important to note the distinction between responsive and fluid layouts. In a fluid layout, the contents of a webpage will simply stretch or contract width-wise depending on the width of the viewport (browser window) and the minimum/maximum width settings in the style-sheet.

A responsive layout goes a few magnificent steps further: page elements can be re-sized, displaced elsewhere on a page, eliminated from view or replaced with other elements. Display rules can be defined so that any of those wonderful things happen according to the size and/or orientation of the viewport, or even the type and/or capabilities of the device being used. Very cool.

To begin, let’s set ourselves a few simple guidelines:

• Anything to do with what page elements look like can be used pretty much ad nauseum.
• Style properties that affect dimension, position or behavior of containers should be used with care.
• Properties that attribute fixed values should only be used under very specific conditions.

Sounds simple enough, right? Good. Now, let’s open up those guidelines and see what’s inside. Note that all CSS properties mentioned below link to pages at w3schools.com where they have fun “Try it yourself” editors so you can fiddle around with stuff.

“No risk” style properties

There’s actually a whole boatload of style rules that you can use willy-nilly throughout your responsive style-sheet, with zero worries of breaking your layout. Basically, any style rule that affects only the appearance of the contents is a safe bet.

For example, anything to do with setting the colors or backgrounds of elements can be used with impunity. Eg – background, color, border-color, opacity.

All text, font and generated content properties can also be attributed or modified with no effect on the page layout. Just be sure to preview stuff at different viewport sizes to be sure it’s still readable!

Other properties that only affect the contents (and not containers) that can be used with no worries include:

• Overflow
• Flexible box properties
• Lists (obviously)

Caution: potential wonkiness here

We can now see that contents can be styled pretty liberally, even in responsive WordPress themes. Where we can easily get ourselves into trouble is when we start styling the containers or the HTML elements (tags) our content sits inside. Some of the most commonly used elements include:

• body (the main page container)
• div (divides a page into sections)
• p (ooh… paragraphs)
• span (used mainly to attribute different styles to sections of text within paragraphs)
• button (clickable stuff)
• article & aside (often used in WordPress themes to identify the main content area & sidebars)
• ul & ol (containers for ordinary lists & numbered lists)
• li (items within lists)
• table (umm… tables)

Where the trouble can start is when we attribute fixed widths to things, and then forget to adapt those widths to different size viewports. Or neglect to account for elements that are floated within other floated elements. If you want to learn more about floating elements, MaxDesign.com has an excellent tutorial.

Additional issues can arise if display or position properties are incorrectly defined.

Finally, there are a couple of very cool CSS3 effects that can be potentially troublesome when customizing responsive WordPress themes, or modifying static ones. Note that these effects are not yet supported in Internet Explorer.

Animation – Enables you to set animation properties on an HTML element that will automatically play each time that element is viewed in a webpage.

Transition – Quite similar to the animation effect, transition enables you to set animation properties on an HTML element to trigger when a user hovers their mouse pointer over the element. The transition property is becoming more and more popular with WordPress theme designers to offer more interactivity in themes. Example uses include menus, other navigational elements, call-to-action buttons, expandable content areas, content highlighting or dimming, etc.

Calculator, ruler and forward-thinking required here

As mentioned above, when you are customizing a responsive WordPress theme, or adapting a static one, it is very important to watch out for fixed pixel values, wherever they may occur. Your first thought may be that fixed widths applied to container elements are particularly problematic. While they can create issues, you will likely spend much more time on border, padding and margin values. Watch out especially for those sneaky negative margins!

There are alternatives to fixed-pixel values for various elements in your theme. These are %, em and rem. There’s an simple yet informative article here to help you understand the difference between em and rem (also follow the links in that article to other useful ones).

One final caveat I really want to include here at the end: you may be tempted to use certain CSS properties or plugin shortcodes to arrange your content in columns. While this can be very desirable in fixed-width layouts, even fluid ones, it can wreak havoc in a responsive layout. In my opinion, CSS3 columns should be avoided at all costs in responsive WordPress themes. Imagine setting a 3-or-4-column display that looks really nice on your laptop. Now check it out on your iPhone… yikes!

---

In the next 2 articles of this series on customizing responsive WordPress themes, we’ll be taking a closer look at media queries. That’s when the magic happens. It’s gonna be fun!

As always, I hope you found this article helpful and, if you have any comments or additional insight, please don’t hesitate to post below. Thanks for reading!

Tags:

• design
• responsive