A Beginner’s Guide to Responsive Web Design in WordPress

To view the data, open your Google Analytics dashboard and navigate to Audience –> Mobile –> Overview. Then, you would be able to view analytics for desktop, mobile and tablet devices. Check out the report and analyze how people interact with your site. If you find users’ experience on mobile and tablet devices negative, you seriously need to think about making your WordPress site responsive.

What Should You Do to Make Your WordPress Site Responsive?

To make your WordPress site responsive, you just need to follow any one of two ways mentioned below:

Upgrade to a Responsive Theme:

This is probably the easiest, quickest and most efficient method to make any WordPress site responsive. Simply pick a free or paid pre-built responsive theme, upload and activate it via WordPress dashboard and you’re good to go. There are more than a thousand free responsive themes available on WordPress.org theme directory, which you can use to turn your WordPress site into a responsive one. However, if you’re in mood of using a premium responsive theme, I recommend you “only buy from a trusted theme provider”. Whatever kind of theme – free or paid – you’re going to use, just make sure it’s fully responsive, highly customizable and fast enough to load.

Make an Existing Theme Responsive:

If you’re happy with your current WordPress theme, you may consider converting it into responsive. However, this route requires you to have considerable knowledge of CSS and web design. You would have to go through and fix every single element of your current theme. Practically speaking, this method involves working with three key principles of responsive web design:

• Fluid Grids: Instead of defining a layout in terms of fixed units like pixels, fluid grids allow you to design a layout based on relative units like percentages. Since a fluid grid is designed in terms of proportions, a responsive site renders perfectly on all kind of devices ranging from a tiny mobile device to a wide screen monitor. To calculate the percentage value for each page element, you need to divide the target element by its context:

Target Element/Context = Percentage Value

• Flexible Images: Making imagery responsive is quite a big challenge while working with responsive web design. You need to resize images proportionally along with keeping their performance up on every device. There are a number of techniques available to deal with images in responsive design, out of which the most simple and popular is setting the maximum width of an image to 100%:

img { max-width: 100%; }

This simple CSS rule will instruct the browser to keep any image as large as its pixel value. This way, the image will never look “pixelated” or “stretched” to the viewer.

• CSS Media Queries:

The next interesting part of responsive design is media queries, which are currently supported by almost all modern browsers. They are used to define CSS styles for a specific device based on its characteristics like screen width or resolution. A typical media query looks like something like this:

@media only screen and (max-width: 320px) {

.content {
                        float: left;
                  }

.sidebar {
                      display: none
                  }

// and so on…

}

Using a set of media queries like this, you can easily achieve different layouts for difference devices.

To know what media queries you should use for your website, go to Audience –> Technology –> Browser & OS in your Google Analytics dashboard and switch to the Screen Resolution tab. Analyze what screen resolutions your website is being accessed most on and apply CSS3 media queries accordingly.

Conclusion:

Needless to say, responsive web design will get more advanced in future with the introduction of new devices like watches, TVs, glasses etc. As a beginner, working with responsive design technique might seem a bit overwhelming to you at first, but the entire process would become a breeze if you know how to take full advantage of responsive design resources available.