Responsive Design Essentials For WordPress

Responsive design has taken the world wide web by storm. Not having a mobile-friendly version of your website can hurt your website’s readability depending on the amount of mobile traffic your website receives (which varies by industry).

As of January 2014:

• 90% of American adults have a cell phone
• 58% of American adults have a smartphone
• 32% of American adults own an e-reader
• 42% of American adults own a tablet computer

Source: http://www.pewinternet.org/data-trend/mobile/device-ownership/

With more and more people using mobile devices, the need for responsive websites and apps is growing.

This post will discuss the topic of responsive design as it applies to WordPress.

What is responsive design?

Responsive design is a web design approach aimed at crafting websites to provide the best experience available for the device being used to browser a website. This tailors the experiences for reading and navigating, reducing the need for resizing, panning, and scrolling on small screens.

A typical website design with responsive capabilities is designed using CSS3 media queries, which allow specific CSS styles to be applied at different browser widths. This allow you create different designs for differently-sized screens.

Examples Of Responsive Web Design

1. Our Very Own Divi 2.0

A good place to start is our very own theme library. Check out the new Divi 2.0 theme and resize your browser window. Watch how the design adapts to the width of your browser as your decrease it in size.

As the window decreases in width, we see the CSS3 media queries I mentioned earlier coming into effect. At various breakpoints (or points in which our CSS3 media queries change), our design retains a fluid like feel and adjusts itself based on the media query that is being triggered. The smaller the width, the more the website is optimized for a mobile device such as an iPhone or an Android device.

The design on Divi changes a handful of times because it is optimized for many different widths of devices. You too can optimize your own theme, giving you control over how your website is presented to your users no matter what device they are using.

1. Time.com

Time.com uses the same approach with their latest design by targeting specific widths of the browser in order to display a different design for specific devices like tablets and phones.

Where can I learn more about responsive design?

Test websites you already visit

A great way to explore responsive design further is to start testing each site you visit. This will become a natural habit after a while. Some sites will opt to use a different way of displaying their websites on different devices. Google, for example, uses completely different stylesheets depending on the device the user visits their website with. This method, which requires some additional coding techniques outside of CSS, is used with a lot of larger websites. Google, Amazon, Yahoo, etc…

Other Methods

• Read Blogs and Tutorials
• Take a Course
• Attend a Workshop
• Research CSS3 and how to use Media Queries
• Build something
• Make a simple website with some basic HTML and CSS and start to use CSS3 to understand how they work.

How to make my WordPress website responsive?

To make any WordPress website responsive, you can start by utilizing the CSS3 Media queries I mentioned earlier.

A typical media query looks like this:

@media (max-width: 700px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

By using the @media rule, a website can have a different layout for screen, print, mobile phone, or tablet. You can use more than one and define any width where the media query should come into effect.

Above we have the @media element with a (max-width: 700px) constraint, which essentially means that once the screen size or browser window becomes 700 pixels or less, the styles inside the @media brackets will be applied to the website.

It’s probably best to keep the @media rules to a minimum. In the past I have seen most website using 4-5 @media tags. This includes mobile devices, tablets, larger screens, and print stylings.

Another Example

For a demo I will be using some basic HTML and CSS to show you how we create responsive design rules within our code. The same type of rule applies to your themes inside of WordPress. You will just be applying styles in the style.css file to change your website’s design.

The HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Elegant Themes Responsive Web Design - Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
        <h1>Responsive Web Design</h1>
            <ul>
                <li><a href="#">Sample Link 1</a></li>
                <li><a href="#">Sample Link 2</a></li>
                <li><a href="#">Sample Link 3</a></li>
                <li><a href="#">Sample Link 4</a></li>
                <li><a href="#">Sample Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

The HTML above is pretty basic. Notice in the are I have included an important tag which helps responsive design happen. The viewport meta tag is used to tell the browser to display our code based on our device’s width no matter the device. There are other configurations for this particular tag but, I’ll leave that explanation for another time. Feel free to read more about it.

After that we have our section with a div containing an un ordered list of links.

Here’s how our webpage currently looks in Chrome with no styles.

What an amazing webpage right? Just kidding! Let’s style things up a bit.

Here’s some basic CSS to kick things off:

CSS

body {
    background: PowderBlue;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}
.container h1 {
    text-align: center;
}
.container ul {
    list-style-type: none;
}
.container ul li {
    display: inline-block;
    padding: 10px 20px;
}
.container ul li a {
    display:block;
    padding: 20px;
    background: Tomato;
    border-radius: 4px;
    color: black;
    text-decoration: none;
}
.container ul li a:hover {
    background: black;
    color: white;
}

With the styles above applied, our page now looks like this:

Great, so now we have some basic styles defined. Lets think for a second about how this design could look on a mobile device. It will be rather difficult to have our links all fit in one row when the width of the device is so small. That looks like it’s going to be messy. So what can we doe?

Let’s introduce a media query to adjust the design so that when it reaches a common width for mobile devices, our design will then respond to the change within our CSS.

Add the CSS below to the bottom of your style.css file.

CSS

@media (max-width: 970px) {

.container {
    width: 100%;
    margin: 0 auto;
    padding:20px 0;
}
.container ul {
    padding:10px;
}
.container ul li {
    display:block;
    padding:10px 0;
}

Now with the CSS added, we can resize our browser to see the responsive effect. Check out the animation below:

Cool! So as you can tell we need to tweak a few things once the browser gets to its smallest width. We can add another media query to help make the transition match the width a bit better. Add this CSS at the bottom of your style.css file.

CSS

@media (max-width: 480px) {
    .container h1 {
        font-size: 22px;
    }

}

From here our styles just makes our heading a bit smaller to adapt correctly. Check out the result:

Awesome! Now our simple demo is fully responsive. Now I realize this example isn’t a WordPress theme, but the same principles apply to any website not matter what the CMS.

From here I invite you to try some CSS3 media queries on your own theme. If you are using one of our themes, try changing some styles around to suit your own design. Make sure not to edit your live site. Install a local copy of your site and go to town. If you don’t know how to install your site locally check out another post I wrote on doing this very thing on a mac and another Kevin wrote on how to do the same on a Windows computer:

• How To Create A Local WordPress Installation On A Mac
• How To Install WordPress Locally On A Windows Computer

Handling Images

Images and responsive web design have been a big topic of discussion in the web design community. There are a lot of topics discussing best practices to use when making imagery responsive on a website. Some solutions involve using some simple CSS, while others get more technical and serve specifically-sized images based on the width of the device or system you are using to access the website.

A common solution is to declare images to have a max width of 100%, which looks like this:

CSS

img {
  max-width:100%;
}

Here’s a quick example of the effect this has on an image.

Legibility

No matter what level of responsiveness you are using, you will want to keep legibility in mind. Your users need to be able to understand your content. On mobile devices, does your text need to be larger to be easily read? What elements need to be visible and what elements don’t? Keep these questions in mind as you plan out your website’s responsive experience.

Usability

How your visitors use your website should be at the forefront of your mind as you think about responsive design. If your website is unusable, then users simply won’t bother trying to navigate it to get the information they are seeking. If you provide an optimized experience, you will get positive results from existing users and even attract new users to your website.

Our Themes

Many of our themes at Elegant themes are optimized for the mobile viewing experience. Our newer themes are fully responsive, which gives you a giant step ahead of anyone else not using a completely responsive theme. Use the methods I’ve outline above to customize the theme you use to your liking. Not every website needs to be the same. Theme’s are meant to be customized after all!

Conclusion

Websites who don’t utilize responsive tactics will likely miss out on more traffic and exposure to their website. Use our pre configured themes, or use this tutorial as a starting point to get your website optimized for any user on any device.

Article thumbnail image by LuckyDesigns / shutterstock.com