As web developers, almost every client we work with expects their site to have a mobile version of his or her website. And with the increasing number of variations of screen sizes and resolutions, it will be impossible or at least impractical to come up with a website for every device and screen resolution that exists.
In this post, we will start with at a basic level by first defining what responsive web design is, why it is important, and some brief considerations one has to make when brainstorming a responsive WordPress website.
Wikipedia defines RWD as:
Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
Responsive web design involves the application of CSS media queries with a mix of flexible grids and layouts. I'm sure you have heard of CSS frameworks like Bootstrap, Foundation and so on. They all use media queries with a mix of layouts to render a page according to the screen size, platform, and orientation.
For example when using Bootstrap, you can simply enable your project to be responsive by inserting the following line of code on the
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
In Bootstrap, media queries allow for custom CSS based on a number of conditions—ratios, widths, display type but usually focuses around
Watch out for an entire practical series dedicated at teaching on how to build a responsive web design using this particular framework
So far in our discussion we have identified that one significant thing about a responsive website is the ability of the site to adapt to any screen size or orientation when a user is viewing the website. Apart from that there other important reasons why you should switch to a responsive website
Today, a significant number of people have access to mobile phones. This translates to a number of this people accessing the Internet via phones. Statistics show that today almost 20% of Google searches come from mobile phones - this should tell you how important it is for users to be able to access your website and interact with it easily.
As mobile Internet usage surpasses the desktop usage statistics, we need to make sure that users are able to identify with our websites regardless of what devices they are using without feeling they are accessing a different or limited version of the main site.
Conversion rate is a term that is mostly used in eCommerce sites, it refers to where you get to turn a regular web visitor to paying customer. In a typical case of an eCommerce solution, think about how many people are doing shopping on their mobile phones.
If a regular web user will be forced to use a desktop version of your site to do a simple checkout, chances are high that they will definitely opt to use other means to purchase the same product. With a well designed responsive site, users shouldn't notice the difference when transacting on your site apart from the fact they are using a smaller screen.
A search engine like Google openly advocates for responsive web design for a number of reasons:
Running multiple of sites for the same content can be expensive, you need double the resources to be able to maintain the two sites. Having a responsive website is much easier as you will be able to dedicate all resources and time to giving users what they really expect.
There are quiet a number of considerations that one has to make before coming up with a responsive web design in WordPress. The fact is, WordPress is now being used to build blogs, sites, an even applications all of which will likely need a responsive implementation.
In the next post, we'll take a look at an implementation strategy for how to achieve this in WordPress development. Specifically, we'll cover
Looking these three critical factors requires and in-depth analysis in order to showcase why responsive design is not just about the design and where exactly WordPress comes in the equation.
In this article, we have briefly introduced the concept of responsive web design, defined what it is, why it is important, and why we should consider it in our future projects.
Feel free to leave any questions or comments below!