Consider the Future
You are embarking upon a website redesign for your business or organization, and you want to invest your time and money wisely.
You know that next year there will be a slew of snazzy new devices that people are using to access the Internet, and you don’t want your website to suddenly be obsolete just because Google Glass is finally on the market.
Good news: you are already ahead of the curve in considering how future-proof your website will be.
This is not a new problem, by the way. As long as there has been an Internet, there has been a wide variety of ever changing devices (hardware) and browsers (software) used to access it. And for just as long, the smartest people in our industry have advocated techniques that embrace this essential nature of the web.
But the issue has more urgency now, as mobile devices and tablets have penetrated the market to such a degree that some are heralding the end of the PC. One of our clients in higher education is regularly handing out iPads to students and staff alike. If you are creating a web site or web application, making sure it looks great and works well on phones and tablets is a sine qua non.
What is Responsive Design?
So how do you get there? The basics remain the same: start with content first, and make sure you and the people you are working with are designing with web standards and using best practices such as progressive enhancement. Then take it to the next level using responsive design.
Responsive design is just what it sounds like: your website responds well to different situations. For most of your viewers, this is dominated by differences in screen size, pixel density (eg retina displays), and orientation (landscape or portrait). Viewing a web site on a desktop computer with a large monitor is a different experience than viewing it on an iPad, or an iPhone, or an android tablet, or a kindle, or a blackberry, etc, etc, ad infinitum.
How Does Responsive Design Work?
Responsive design utilizes three main techniques:
- Fluid Grids: a common example would be a two column layout that collapses to one column on smaller devices.
- Flexible Images: not only changing the size of an image as the layout changes, but also providing the correct resolution image for the device and making sure you aren’t forcing phone users on cell networks to download images that are sized for the desktop.
- Media Queries: attributes of the viewing device (e.g. maximum device width) that allow styles to transition between different states
Here’s an easy way to see how responsive a website is. Pull up your favorite site in a browser on your desktop computer. Maximize your browser window. Now start to scale down the size of your browser. You’re approaching tablet territory. What happens to the site? Does it break? Is it readable? Continue to scale the browser window down horizontally until you can’t go any further. You’re in cell phone territory. How does it look now? Is it usable at all or do you have to scroll to see anything?
The site you’re on right now has been designed with responsive principles, so you can do that demo if you’re on a desktop computer. If you’re on a phone or tablet, you should be having an enjoyable reading experience that feels like it was meant for your device. This is the main goal of responsive design.
Get Moving, Responsively
There are a lot of other considerations that come into play when you are making decisions about how to design or redesign your site or application. There are even use cases where separate sites for specific devices might make sense. But it’s hard to go wrong with web standards and responsive design, which are not only the quickest solutions to building a site that can be comfortably viewed by anyone, but also the most future proof.
