Mobile - Looking Good (and Easy!)
Date: 5/9/2013 7:53:00 PM
What's all the buzz about?
One of the new buzz words now for sometime has been Responsive Web Design. What does it mean? What does it mean for my business?
First a little back story. Previous to the concept of Responsive Web Design, if you wanted to have a mobile version of your site you had to choose from a couple options.
- Native Mobile App - this meant having an app for Apple, Android, Windows Mobile, etc built as a copy of your website. This could take a fair amount of time, investment, and then you end up with three or more copies of your content you'd need to manage. (Read EXPENSIVE)
- Mobile CSS Version - With a well-crafted website, most of the layout is abstracted into a CSS file. The CSS file defines things like borders, margins, width, etc. You can easily design your website and build a CSS file for viewing on a desktop computer, and a separate CSS file for mobile. When a device requests your site, a small piece of code decides which version of the CSS file to apply to the website. Hmm, but wait, 'mobile' can be different heights and widths. For instance, the size/shape of an original iPhone screen is much different from an iPhone 4, and different yet from an Android Tablet and the Kindle Fire. So again, using this method, you'd need to create CSS versions (and maintain them) for each device you'd want to support. Sounds like a lot of work, right?
- No Mobile - You always have the option of not creating specific support for mobile. In such cases your site would either break when viewed on a mobile device (think of those awful "TAKE OUR SURVEY" pop-ups that you see on your phone sometimes that you just can't close) or it initially renders super tiny and the user has to pinch zoom in/out to navigate your site. This isn't exactly supporting your users, but for many it was the only choice because of the time and money involved with the two other options above.
So now, if you think about it, there is another case you'd want to deal with. I've talked about mobile and smaller size screens, but what about future proofing your website as desktop monitors get bigger, and web on large format TV continues to become more popular??
Enter Responsive Web Design
Here's Responsive Web Design in a nutshell. Using a specially designed layout structure, a small bit of readily available code, and being careful with how you add content, the responsive design will 'fold' up the site as the size of the browser changes. What the heck does that mean?!
Okay, here's an example you can do yourself. On your desktop, with your browser at full screen, open this url http://www.nshealthdept.org. This site is responsive. Now resize the browser window so that the width slowly gets smaller. As you do this, you'll see the layout elements of the site change slightly and start 'folding up' to be better laid out for a smaller screen -- including a easy to use on mobile site menu. Now look at the site on your phone. Nice, right?
So what's the big deal you ask with Responsive Web Design?
The big win is having one set of code, content, and layout to maintain. Specifically responsive website design equates to lower cost of build and maintenance. The North Shore Health Department site was built by Milwaukee PC Connect, and they help their clients focus on content and marketing, instead of paying a web developer over and over for what could be simple updates. When you only have one system to maintain, the client can then focus on the content, their message, and their mission instead of "how does this work?" or "how is this going to look?".
To learn more about getting your website to be Responsive, check out http://connect.milwaukeepc.com or contact me for a free confidential assessment of your website.