Blog Posts

Responsive Design: What it Means & Why You Need it

07 May Responsive Design: What it Means & Why You Need it

Responsive design is hot right now. But, what does it mean? And how can you implement it using WordPress? And why should you implement it?

If you were to survey 100 different designers they may all give you different answers as to what “responsive design” really means. In short, it means giving your visitors the best experience possible, regardless of device. If someone views your site on their phone, the site doesn’t just shrink in size, it literally changes in layout. Making things more readable and easier to navigate.

This phenomena didn’t exist two years ago, when I first started. Thanks to CSS media queries, and frameworks like Twitter Bootstrap implementing responsive design into your (WordPress) site has never been easier. Since tablets and phones have less space, we need to be aware of that, and adapt accordingly. So what can you do? Lets take a look at an example: my homepage. On a regular desktop, or laptop it looks like this: keganquimby

On a tablet it looks like this (both vertical and horizontal views):

ipad-vertical

 

ipad-horizontal

And on a phone it looks like this (vertical only):

iphone-vertical

So you can see it’s similar, but looks different on different devices. The most noticeable differences are on the iphone, where content has been stacked, and text is actually enlarged. This allows users to very easily read everything, without having to zoom in, but rather just scroll down.

In general some things you can do, to make your site responsive:

  • Stack content: sidebars should fall under the main content.
  • Shrink menu: you’ll notice on the iphone version of my site the menu has been shrunk to a single button. Clicking that pops down all the pages. This saves a ton of space.
  • Hide unnecessary content: readers don’t want to see ads on your mobile site, for example.

Many WordPress themes are now responsive out of the box. Keep in mind, that building and customizing a responsive theme will take about 3x longer, as each device has to be accounted for.

A quick test to see if your site is responsive: shrink your browser window, and if a horizontal scroll bar appears, your site is more than likely not responsive. Of course, you can have a mobile version of your site (m.keganquimby.com for example), like Facebook does, but most smaller sites have no need for this, and can simply use the above mentioned CSS media queries to make their site responsive.

Tags:
No Comments

Leave a Reply