Every year between Christmas and New Year I seem to rework one of my own websites. This year it was Dandelion Web Design. Did you notice the new responsive WordPress theme?
What is a responsive website?
image from cyberchimps.com
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 re-sizing, 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. We currently use this as the parent theme in our LearnWP WordPress Intensive – a 2-day workshop.
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.
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. I believe that it is time to choose responsive.
The post Responding to the Changing Web appeared first on Dandelion Web Design.
