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.
What Is Responsive Web Design?
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 <head> tag
<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 min-width and max-width to
- resize headings and text to be more appropriate for devices
- stack elements instead of float wherever necessary
- modify the width of the grid
Watch out for an entire practical series dedicated at teaching on how to build a responsive web design using this particular framework
Why Is RWD Important?
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
Increase in Mobile Usage
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.
Greatly Increase Conversion Rate
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.
Improved Ranking in Search Engines
A search engine like Google openly advocates for responsive web design for a number of reasons:
- It is much easier to crawl a responsive website, index it, and organize the site content in a simpler way. This is made possible by the fact that a responsive website uses only one URL across all platforms as opposed to in a scenario where there are different versions of the same site across different URLs.
- User experience can easily be assessed by looking at the bounce rate of a site. A site that has low bounce rate means that users stay on it for a period of time hence higher search ranking.
Cost Effective
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.
Considerations for a Responsive WordPress Site
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
- Performance
- Context
- Progressive enhancements
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.
Summary
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!
Comments