Responding to the Changing Web

What is a responsive website?

An introduction to Responsive Web DesignA 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 reposition 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]

Free Responsive WordPress Theme

One of the most popular free WordPress themes is the Responsive Theme by CyberChimps. But you don’t have to choose this theme to have a responsive site. If you are choosing a theme from the WordPress repository look for any theme with the responsive-layout tag.

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:

responsive web design

image from cyberchimps.com

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.

In responsive styling, relative percentages are used instead of fixed pixel dimensions. For example, instead of defining fonts by pixels we can use relative ems. The “em” is a scalable unit that is becoming increasingly popular in web documents because it is mobile-friendly.  Assume the body’s default type size is 16px this translates to 1em. So if we want our H1 title to be 1.5 times the default body size, we set the H1 to 1.5 em (equal to 24px). You’ll find this px to em converter helpful for this.

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).  I 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 I used.

@media all and (max-width: 1020px) {
#top-widget {
display: none;
}
}

What do you think? Is it time to go Responsive?

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.

One comment on “Responding to the Changing Web
  1. Great article. Thanks a lot, Ruth. It is very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *

*