It’s amazing how the web has transformed the way we do business. Today companies have extended their reach and found opportunities on the web never thought possible. This article is one of a series that aims to help web leaders focus on specific strategies to optimize web delivery – of content, theory, design or implementation.
The pace of modern web development is relentless and ever increasing. The devices used to access your content are constantly changing. How do you ensure that your customers are getting the best experience on any device they use?
Enter responsive design techniques, pages that detect how much real estate they have and adjust accordingly. It’s done with a combination of page formatting (CSS) and scripting (JavaScript) that looks at the screen width and applies either scripting, formatting or both to optimize the page display for the screen size. Desktops, tablets and smartphones are shown the same page, but one tailored for best fit.
How does this affect your current web site? The short answer is in every way. Your current designs, if developed for a stellar desktop experience may need tweaking or a major overhaul. Try resizing the browser window to a tablet or smartphone width. If all you see is a background image and one sixteenth of your web content, that’s probably a bad sign.
Pages that shift or collapse when resized will fare better, they may have been designed to use fluid techniques. Fluid means that the markup uses full widths and the actual content of each element to determine how screen elements are shown. Elements are “floating” and if they exceed the available space, they shift in a [hopefully] logical way.
Fluid design is a must for a responsive website design, but controlling how the site floats and shifts for each screen size is tricky. That’s why you need a combination of fluid and responsive to get it right. The fluid nature of your pages will allow dynamic resizing based on the screen size and the responsive part will make sure it looks good for a variety of devices. Fluid design will make sure it appears in the available screen area, responsive design ensures content is where it should be.
You may ask if anyone has done something to simplify this. Perhaps created some sort of framework to allow our web content to live in a totally responsive world? Yes, there are a number of frameworks that give you all this and more. Twitter Bootstrap is a great web development framework that not only gives you responsive templates and ready-made tools but a great CSS and component base for all your web pages. Foundation is another framework that will give you a head start building good looking responsive web pages.
These frameworks won’t design pages for you, unfortunately. How you represent your ideas on each device is something you’ll have to work on. Here are some things to keep in mind:
- Start your design with the small screen. Allow more or expanded display based on available screen space (“mobile first”).
- Use best practices. Get more familiar with html5 and check out the html5 boilerplate.
- Keep modern and legacy environments in mind. If your audience uses IE8, your site needs it’s full support. Choose your framework based on the support you need.
- Give special attention to content popular on alternative devices. Emails are often overlooked but are viewed on smart phones a lot, so optimize that experience!
- Rethink your “mobile” website plans. The concepts may be great, but do they offer the same service level as your regular site? Customers are known for wanting more, so an attractive tablet website is great, but only if you can browse, order and query with the same precision as the current site. Customers that see “coming soon” may be “leaving now”.
Using these principles, your users can get the most of whatever device they are using. Your customers will notice and your customer service will thank you.
Jeff is an Application Architect at Middleware 360 Solutions Inc. He's interested in how web development best practices improve products and make customers happier.
Leave a Reply