Learn about responsive web design and how you can use it to increase the number of visitors to your WordPress site.

Responsive Web Design

These days everyone is talking about responsive web design, but what exactly does that mean? Responsiveness and website development are so important together that you hardly ever hear of them uncoupled. That’s for a good reason, the influx of devices with different resolution or size. If you want to develop a website to market your business or cause, it would be a waste of time to not consider and implement responsive design. So what exactly does responsive design mean and why does your WordPress site need it?

“Responsive design is one of the most important aspects of WordPress development.”

Responsive WordPress development is the theory that a website’s design and development should respond to a user’s device. The main concept here is that your website should cater for every visitor to your site. Whether they be on a laptop, tablet or mobile phone, or whether they are viewing the site in landscape or portrait. Every instance and every visitor should have the same clean and succinct experience.

Why should we consider it?

So you now understand the basic idea behind responsive website design, but why is it so important for you to incorporate it? A study run by Morgan Stanley Research and published by comScore shows that the number of users accessing websites on their mobile phones surpassed those on desktops between 2013 and 2014. Since then that number has continued to rise rapidly. This means that the greater number of potential website visitors out there will be accessing your site via a mobile device. In my eyes there is no point in creating or maintaining a website that doesn’t incorporate responsive design. We all know how frustrating it can be to visit a website that doesn’t.

Responsive Statistics

Alright, we now know what it is and why we should consider it, but how exactly do we do that? Here are some of the basics:

Flexible Images

Making sure that all images on your site resize proportionately to the visitors device is a must. How exactly do you expect them to see the image if it is three times the size of their mobile phone? One easy way to do this is to size them based on a percentage of the screen size. So, if the image is twenty-five percent the size of a normal laptop screen, then it should be twenty-five percent the size of their mobile.

However, this in theory might work, but in practice might result in some very small images. How do we combat that? Media queries and custom layout structures.

CSS Media Queries

CSS media queries are snippets of code that allow you to change the CSS values of an item depending on the properties of the viewing device. For instance, if the viewing device is a mobile you might use a media query to change the navigational menu to a “hamburger” drop-down menu. Then on a mobile the menu will be collapsed and on a desktop you will see the full menu. Neat. This is similar for altering the size of an image. On a desktop you might set the image to twenty-five percent of the screen size and on a mobile you might set it to fifty or one hundred percent.

Media Query Example

Using CSS media queries strategically can help make your site responsive and in turn look modern and clean across all devices. Now onto custom layout structures.

Custom Layout Structures (Bootstrap)

Ever heard of Bootstrap? It’s a coder’s life saver. Trust me, I have saved countless hours and numerous headaches by using Bootstrap. It is essentially a custom layout structure package. The idea behind Bootstrap is to give developers access to a collection of predefined code to help make responsive websites quicker and easier.

It works by setting containers, rows, and columns. Using these you create somewhat of a grid structure. You input your website elements into these grids, specify what you want to happen at different screen sizes, and voilà. You now have every item on your website snapping and resizing at the click of a finger (well a line or two of code as well). Bootstrap makes it easier and more convenient than ever to make your website responsive. I urge you to check it out, it comes packaged with some other pretty sweet tricks as well.

Bootstrap Example

Meta Viewport

Apple has developed a viewport simulator to help display websites that are not responsively designed. It works by scaling down the entire page to fit within the constraints of the device. However, due to this, there are often problems with overriding the simulator and displaying the mobile site. To fix this all you need to do is change the viewport in your meta tags. Just copy and paste the following snippet into the header section of your files.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

Conclusion

So, after reading all that I hope that you understand how important responsive website design is and why you should incorporate it. Take a look into some of the possible avenues that I mentioned to get a better understanding on how to use them. Feel free to comment or send a message through our contact page to get some more information on responsive WordPress design.

Tags:

Leave a Reply