3 Beginning Steps to Responsive Website Design

According to a study by BuzzCity, 45% of people on the internet have a smartphone and 85% of users prefer access to websites on a mobile phone.  Within the last week I’ve used my smartphone to look up the happy hour at a restaurant, read the news, compare prices for ink cartridges, accessed my appointment information for my dentist, and looked for store hours for three local businesses.

Of those sites, few were optimized for my phone, in fact my local newspaper is nearly impossible to use on a smartphone.  How about your website?  Do you know what it looks like on a tablet or smartphone?  How do you go about making your website flexible for use on multiple platforms?

1. What Does Your Site Look Like Now?

Don’t have a smartphone or tablet?  Using your computer browser,  iPad Peek will render your website on a virtual iPad and iPhone.

MobiReady will make various compliance checks as well as emulate very small phone screen sizes. Mobile Phone Emulator is probably my favorite and will show you site at actual size on Android devices:

2. Use Flexible Layouts

When working with a designer, make sure they understand flexible layout design.  This means that as you change the size of your browser, the website resizes, without needing scrollbars.  Take a look at CSS-Tricks.   Try making your screen smaller and wider  and notice how the page (including images) change to accommodate.  At the narrowest width notice that the sidebars move from the side to below the main content.  Additionally, some images disappear completely at narrower widths to give a cleaner look.  (Here are a few additional responsive websites to look at: Andersson-Wise Architects, The Work Cycle,  Smashing Magazine)

Many designers are just designers – creating the layout and look for a site, which is then passed on to the web designer or programmer to make into actual web pages.  Make sure both your designers understand that you want a responsive web design from the very beginning.  Like your current design, but want it responsive?  Your designer can tell you if it can be converted to a responsive web design. (Or contact me for a free consultation).


3. Be Flexible Yourself

Responsive website design depends upon percentages and proportions – this isn’t a place for pixel perfect layouts. (Actually web design never was, but that’s another article).  Realize that how you view your site and how your customer views it will be different and let go of finding to perfect pixel size for that font.  Instead, concentrate on content, overall feel and usability.




Follow me

Submit a Comment