In the past, most site owners who wanted a mobile-optimized site used a separate mobile theme for the site with a mobile-specific design. Some would also use different mobile domains. Mobile web development is an important concept that can influence the success of your online business.

If you’re using a mobile theme, it tells WordPress to switch themes if the visitor is using a mobile phone, and to stay on the desktop theme if they’re using a desktop PC, yes, you guessed it.

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 look different on devices of different sizes. It doesn’t just work for mobile web development; Responsive themes can also change the look of a site on tablets or really big screens.

Responsive Design – Important Concepts

To get familiar 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 additional changes to the CSS for devices of a particular width. The most commonly targeted widths are:

3. Mobile devices such as smartphones: These are 320px wide and 480px tall, which means that the width of the screen will change when the device is rotated. It is imperative to keep this in mind before getting started with mobile web development.

4. Tablet devices: These vary in size, but the iPad’s screen, which is by far the most widely used, is 768px wide by 1024px tall. Other tablets like the Kindle Fire will be smaller.

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

Before you start, it’s a good idea to think about your website, its content and functionality, and consider what might be the best approach. We are going to evaluate 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 minimal effort, but doesn’t give us much scope to incorporate our own design into the mobile site. Many mobile plugins don’t target tablet devices either.

2. Using an out-of-the-box responsive theme – There are a number of free responsive themes available from the WordPress plugin repository. You need to know how to adjust them so that your mobile site is more consistent with your desktop site.

3. Using a standard responsive theme for mobile and our existing desktop theme for desktop – We achieve this by using a theme switcher. The advantage here is that we can quickly install a free responsive theme, modify it to look the way we want, and not lose the benefits of our existing desktop theme to desktop visitors.

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

5. Build our own mobile theme and use a toggle to activate it on mobile – This is a useful approach when we want our mobile and desktop sites to look different or contain vastly different content.