There are thousands of Themes available in the WordPress Repository and we know that it’s very hard to choose one. If you’ve been researching WordPress themes, you may have come across some that are responsive.
In this post, we’ll explain responsive web design to help you understand what’s involved.
What is a responsive website?
A responsive website is one that adjusts or “responds” to the size of the device screen displaying it and to the orientation of the device. Images, videos, text, etc., will automatically re-size or re-position as necessary.
The goal of responsive web design is “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).” [Wikipedia]
How does a responsive website work?
Responsive web design relies on three components, fluid grids, flexible images and media queries. This is a very simple introduction…but don’t worry, you don’t have to understand these concepts to use the theme. That said, it does help if you want to start customizing the theme.
The Fluid Responsive Grid:
The Responsive theme is built on a fluid 12 column grid system that automatically scales website elements to container widths. The Responsive theme demo shows this visual example of the theme’s fluid responsive grid.
If your WordPress theme has widgets in a right sidebar, those widgets will stack below the main content area when there isn’t enough width for them to display on the right.
Flexible images:
The key is to define images with percentages instead of fixed pixels. Below is a simple global css rule to add to your stylesheet. Using max-width makes the image relative to the size of the fluid grid container it is in. No image will extend beyond the container and the image aspect ratio will be maintained.
img {
max-width: 100%;
}Media Queries allow us to target the device:
By restricting a CSS rule to the particular width of the device we can target devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolutions. For instance, visit my site on dandelionwebdesign.com on your iPad (or simply re-size your desktop browser window). We turned off the top search box for phones, small tablets and tablets in portrait view; in landscape view it pops back in.
Here is the css code we used.
@media all and (max-width: 1020px) {
#top-widget {
display: none;
}
}Don’t be left behind
Responsive Design has quickly become the industry standard for how a website should be built. If connecting with consumers through your website is important to you, realize that consumers are starting to expect a mobile-friendly web experience.
