Have you ever gone to a website on your phone and had to zoom in, and in and in to read it…….annoying isn’t it. Does your website have the same problem? In most cases I would guess “yes”. It is not your fault. Making a new website for mobile is daunting. Copying all the content, rearranging it to fit mobile. Smaller images, different font, different layout. Ahhhhhhhhhhh.
BUT there is hope!! Go “responsive” and much of the hassle will disappear.
Responsive Websites are all the rage in web design, and for good reason. Smart phones and tablets are taking over the earth. They walk the streets like never before. So ignore mobile and smaller screen sizes at your peril.
Behind the scenes many of the top web designers have been tinkering to find a reasonable solution. Afterall how can you know exactly how big the screen of your customer’s device will be. Well you can’t, but you can make some good guesses and set up some boundaries to cope. If you are techy and interested in knowing how it’s done – check out media queries. But for those of you who just want a glimpse of the magic here goes.
The key to responsive web design is the word responsive. What happens in simple terms is that as your browser gets smaller (either by making it smaller on a PC or by using a smaller device), the elements of the page shrink and re-arrange themselves in a predetermined way. The result is that you see a nicely formatted, less cluttered site on each device instead of, for example, the whole PC version on a mobile device. Most web designers choose 3 ranges to work within in order to accommodate the PC (including large screens), tablets, and smart phones.
Below is an example I found on the web that helps demonstrate the 3 layouts you should have for your responsive website.
This is the general layout and view you will get on a larger screen such as a PC monitor. It has fully visible menus, multiple content areas and wider images.
Next is a tablet layout where you will notice the header is smaller (logo above menu) and the four content menus (Portfolio, Journal etc) are now two per row instead of four. The content is now stacked below the menu instead of side by side, saving space.
Finally we have the mobile version where space is very limited, so the menu is now stacked vertically, the title is now on two lines and the content is below with limited width.
Sometimes you will see a dropdown menu replacing the menu to save more space, or an icon (like in the facebook app) with three lines, and the menu then slides in from the side.
So now you have seen the magic of reponsive websites, the big question is, how can you do it, without hiring a web developer?
The simplest way you can apply responsive design at the moment, is to use predefined templates developed by experts for frameworks such as WordPress.
When you are looking at the current themes on the WordPress Theme sites you will see a lot of them are “responsive”. This generally means that the above 3 general sizes are taken care of for you. My site uses a free theme from MyThemeShop and it has a basic application of the Responsive Design principles. If you wish to go all out (your site is for your business or you just like it to look great for everyone) I recommend taking a look at some more professional examples at ElegantThemes or StudioPress.
If you are developing your site yourself, and are very comfortable with CSS, there are a number of articles on the Smashing Magazine website you should read. (Hint: bookmark this site as it is a veritable font of wisdom on web design). Here are a few I found useful. Some are more general, while others will help with the specifics of what boundaries to set in your media queries.
If you want to get the full low-down on responsive design from the founder himself, along with ideas on image resizing and fluid layouts (which is the basis of responsive design) check out this fantastic book from Ethan Marcotte – Responsive Web Design (Brief Books for People Who Make Websites, No. 4)
Now you have your website ready for mobile, or you are in the process of checking out some themes, you will want to see how it looks.
The simplest way to do this in a rudamentary fashion is to reduce the width of your browser on your PC. This will give you a rough idea of how things look, how the flow when the browser is reduced and if you have any general layout issues.
However, if you really want to see how it looks you need to test it on some devices. If you have a smart phone try out your site on it. A tablet would be useful too (an IPad with and without Retina display – makes a huge difference) and something smaller like a Samsung galaxy or Kindle Fire.
If you want to get more exact though, you really need to use some testing tools. After all, you can’t test all the devices.
Here are a couple of great tools I use to help test responsiveness.
For a general idea of the various sizes try Matt Kersley’s Tool (just type your URL at the top)
For exact pixel testing, here is fantastic tool which scales as you move the border-cursor (again URL is at the top)
Mobile traffic is growing at an astonishing rate. Just take a look around you when you are out and about. Ignoring it means losing customers. Try Responsive Design out on your site and let me know if you have any questions or are just excited with the result.
Have you had success with Responsive Design?
Ashley is obsessed with SEO and WordPress. He is also the founder of Mad Lemmings. When he is not busy helping clients get higher on Google he can be found doing crazy sports in the Swiss Alps (or eating too much chocolate - a habit he is trying to break).