The idea of a responsive WordPress theme, or responsive website design in general, is very simple, but very powerful. However, before explaining “responsive design” there is another quick term that needs defining: viewport. The “viewport” is simply the area of a web page that is currently viewable within the web browser.

As you can imagine, the viewport is dependent on the size of the “window” that the web browser is in. An end user has the ability to maximize the window (or web browser), as well as resize it to just about any other size. Naturally there is a minimum size that is realistic, and the maximum has to do with the upper limitations of the computer, or other device, that is being used to view the web page.

responsive design samples

With that said, it is obvious that a viewport can change in size for a given web page to wide numer of sizes (and shapes for that matter). Is it reasonable then to try to design a web page to be “responsive” to those sizes? Well, yes and no?

Just like anything in life, it’s difficult and often near impossible to cater to everything (or everyone), all of the time. Luckily though there are a set number of “default” viewports that can be catered to, and the ones in between naturally adjust well too. A responsive design, and therefore, a responsive WordPress theme, by using CSS and some JavaScript, will “respond” the the size and shape of the viewport, and display a web pages content accordingly.

So, why is resposive design important?

The obvious answer to why responsive web site design is important, is to have a web site cater to many devices with one set of code. The devices can include mobile devices like smartphones and tablets, and of course desktops and notebooks including MACs and PCs, plus large TV screens, all in a variety of resolutions that are creating new standards.

1) The world is going mobile, that’s a given. In many cases, more mobile users are accessing a given web site than “desktop users.” And if the design is not properly responsive, or not responsive at all, this could mean a bad user experience for the visitor (i.e. the customer). Commonly, web site developers would create an entirely separate mobile version for a web site, but today, especially when starting from scratch, building/using a responsive web site or WordPress theme is the best way to go.

2) Also, Google recommends responsive design for “sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device.” Responsive design means just one version of a web site exists. This means only one set of code for the developer to deal with. There is no redirection to the “appropriate” version of a web site. Also, it offers only one site to crawl for Google and other search engines.

There may be specific functionality that is left out (or even added in) when a browser is viewing the site from a mobile device, but different areas of a web page, just like they can contain “location-specific” content with geo-targeting, they can contain “mobile-specific” content for mobile-targeting. While this isn’t a recommended approach by Google, it is still possible. If there is too much mobile-specific functionality that is required, then a mobile app may be something to consider as an extension to the mobile experience.

Best strategy for responsive design

It is a WordPress theme that determines the design of a WordPress web site or blog. Sometimes it is called a template, and that is the name often used when designing for standard web sites. Also, the term “skin” is sometimes used. Regardless of what you call it, arguably, the best approach for responsive design is what is called “Mobile First.” Luke Wroblewski is credited for coining the term Mobile First, which simply means to start the design to cater to the smallest (mobile) device first then work up towards the largest device (TV perhaps). The standard approach has been to work outwards from the “mid-sized” screen which would be the desktop. Advantages of Mobile First:

1) Mobile forces you to focus Building for mobile forces developers to prioritize and implement only the most important features which offers a “good user experience” which is “good for business.”

2) Mobile extends your capabilities While focus and prioritization are key, there are still some enhanced capabilities that give developers an opportunity to build context-aware applications, when developing for mobile. So, rather than tweak a PC-based design to be equally as “smart” (read: not smart) for mobile devices, a developer can build smart first, then hide the mobile-specific enhancements when tweaking for larger devices.

In conclusion

With a properly designed responsive WordPress theme or web site, the user is able to view the page on different sized viewports and screens without the design breaking, all the while maintaining a consistent viewing experience.