It slices, it dices, it adjusts to the size of your screen. Well, maybe just the last part. I finally had an opportunity to redesign the VWS website using responsive design techniques.
What does “Responsive Design” mean?
Well, it means that no matter the size of your browser window or what device you are looking at the website in, the site should look good to you and show you relevant information formatted for your screen.
Interaction Time! If you are looking at this site on a regular computer (desktop or laptop) – visit my home page and try resizing the browser window. See how things move, resize, reformat, and even disappear altogether to better accommodate the current screen size? That’s responsive design.
You are probably thinking that your site shows up on your phone or tablet. No problems. Maybe there isn’t. But is it optimized for the user on those platforms? Is the text big enough without zooming in? Are you showing a bunch of graphics that may take a long time to load on a mobile device? Maybe you are using Flash which doesn’t work on some devices (notably the iDevices – iPhone and iPad)?
Mobile Browsing is On The Rise
Tailoring your website to perform on mobile devices shouldn’t just be an afterthought. Mobile browsing now accounts for nearly 20% of web traffic 1. And that number is growing every year 2. It can be even higher depending on your site and the demographics of your users. Take a look at your site statistics (you do have some installed, right?) to see how many mobile users are visiting your website.
I know I appreciate a simply design when I’m browsing on my phone. Mobile users browse the web differently. They usually have a specific mission. Usually to contact you, or maybe just to get a quick idea of if they want to contact you, or even just quickly browsing for some basic information on your services. It’s much more important to present users with exactly what they want so they can access it quickly on mobile devices since download speeds can fluctuate and attentions spans are short.
The First Step is Admitting You Have a Problem
Responsive.is is a great way to do a preliminary check of your website to see if there’s any way it can be improved. Give it a visit and put your url (without the http://) in the box in the upper right and click Go. Like some kind of dark magic, there’s your site. It gets better though – see those icons in the center portion of the header? One is a laptop, tablet horizontal (landscape), tablet vertical (portrait), phone landscape, and phone portrait. Give those a click. Pretty amazing, right? One caveat, you can’t really judge what text will look like completely with this tool. It will give you an idea, but you should take a look on a phone or tablet for the most accurate representation. What does your site look like? Is there room for improvement?
So maybe you see some issues, but how do you fix them? It would be impossible to address all possible issues in one blog post, but seeing how other people have adjusted their sites to work on mobile devices may help you. Take a look at MediaQueri.es. Here you can see how other websites have adapted to their mobile users. Sometimes the information is formatted differently. Sometimes some information is hidden (or at least not presented up front to mobile users). It really is different for every site.
My Solution
My old website (created about 4 years ago – ancient in web development) worked fine right down until the tablet portrait size. Then only a portion of it was viewable to the user. Not really what people are looking for. But more then that, I was still presenting a mobile user with the same exact information, formatted in the same way – even though though they were using a mobile device with a different aspect ratio (and overall screen size) and a completely different context.
Without responsive design, the site was hard to navigate and links were hard to click on. Plus, I was probably presenting them with too much information, so I went the extra mile to fix the issues this time around. It really wasn’t a huge ordeal, and if your site was designed properly from the get-go, it probably won’t be for you either.
In general the adjustments for my site include:
- Reformatting the menu as the browser size shrinks to make it easier for the user to click and so it looks attractive on all screen sizes.
- Tailoring text and image sizes to each screen size.
- Removing the Blog Bites and Tweet Tweet sections from most mobile sizes. I just didn’t want to waste the real estate on the site with those. I doubt either section would reason someone would come to the site.
- Completely reformatted the portfolio section (Great Feats) to display horizontally instead of in side-by-side blocks.
- Reformatting text sections for size to better take use of the available space.
- Removing the form for most mobile screen sizes. It just didn’t fit, and there are easy ways for mobile users to contact me – they can just click on the phone number, send me an email, or contact me on any of the social networks.
- Updating the footer (especially the links) to something more traditional for phone browsing.
Those are just the steps I took, each site will be completely different. Ready to get started? If you are serious about working to improve your website on mobile devices, talk to your web developer.
References & Footnotes
1 Mashable – 17.4% of Global Web Traffic Comes Through Mobile