If you’re using a mobile theme, you tell WordPress to switch themes if the visitor is using a mobile, and stick to the desktop theme if he/she’s using a—yes you’ve guessed it—desktop PC.

A responsive theme, on the other hand, uses the same theme and similar styling for both sites, but uses a combination of a fluid layout and media queries to make the layout and content different on different-sized devices. It doesn’t just work for mobile web development; responsive themes can change the look of a site on tablets or on really large screens, too.

Responsive design – Important Concepts

To get to grips with a responsive design, you’ll need to understand the following web development concepts:

1. Fluid layout: This is a site layout that uses percentages for widths instead of pixels. The effect of this is that when the browser window changes width, so does the site.

2. Media queries: We use media queries to add extra changes to the CSS for devices of a particular width. The widths most commonly targeted are:

3. Mobile devices such as smart phones: These are 320px wide and 480px high, which means the width of the screen, will change when the device is turned around. It is imperative to note this before you get started with mobile web development.

4. Tablet devices: These vary in size but the screen on the iPad, which is by far the most commonly used, is 768px wide by 1024px high. Other tablets such as the Kindle Fire will be smaller.

5. Desktop computers: Their width ranges from 1024px and above. It’s common to set a maximum width for our layout so that on very large screens (for example, over 1200px), the site doesn’t layout so far that it makes the content difficult to read.

Before starting, it’s a good idea to think about your website, its content and functionality, and consider what the best approach might be. Let us assess the web development options available to us. There are five main options for developing a mobile site as follows:

1. Using a mobile plugin: This gives us a mobile-friendly site with the minimum of effort, but doesn’t give us much scope to incorporate our own design into the mobile site. Many mobile plugins also don’t target tablet devices.

2. Using an off-the-shelf responsive theme: There are a number of free responsive themes available in the WordPress plugin repository. You must know how to tweak them so that your mobile site is more consistent with your desktop site.

3. Using an off-the-shelf responsive theme for mobile devices and our existing desktop theme for desktop computers: We achieve this by using a theme switcher. The advantage here is that we can quickly install a free responsive theme, tweak it to look how we want, and don’t lose the benefits of our existing desktop theme for desktop visitors.

4. Making our own theme responsive: We do this by adding a fluid layout and media queries to the desktop theme we’re already using.

5. Building our own mobile theme and using a switcher to activate it on mobile devices: This is a useful approach when we want our mobile and desktop sites to look different or contain very different content.