WEBSITES
VOCAB: RESPONSIVE DESIGN
Responsive design refers to a web design that automatically adjusts to the size of the device being used to view the site. Instead of designing one site for laptop and desktop computers, and another for mobile (which can be a nightmare, because you then have to update twice every time you make a single change), responsive design allows you to manage only one site, and that site resizes automatically for desktop computers of all sizes, large and small laptops, tablets, and smartphones. Whereas separate mobile sites were all the rage just two years ago, responsive design has gained ground fast. Over the next couple of years, expect separate mobile sites to be a thing of the past, as responsive design takes over.
The challenge with responsive design? As you're creating or making changes to your site, you'll want to keep verifying that your content looks good in all sizes. Just when you get a section of your site to look good in one size, you realize that it looks terrible in other sizes. But once you get used to this additional work up front, you'll find that responsive design is much easier in the long run, what with eliminating the separate-but-equal sites that were required in the past to optimize mobile.
Terestouffer.com is responsive, so try resizing it in your browser to be as narrow as it can be, and as wide as it can, and you'll see the content shifting around to adjust. Pretty cool, eh? Here's the blog page when viewed on a desktop.
And here's that same page when viewed on a smartphone, without my having to do anything different when inputting content. You can see that the image scales down automatically, and that the side and top navigation bars both disappear and are replaced by a drop-down menu (shown as three bars, and often referred to as a hamburger).
Notice, however, that I designed the page image so that it would work in all sizes, without having the sides cut off or having the entire image rendered as tiny-looking on a smartphone or tablet. This means the image looks a little skinny on a desktop or laptop, and just right on a smartphone or tablet. Those are exactly the types of tradeoffs you make with responsive design.
How do you get responsive design for your website? If you're using SquareSpace, Wordpress, or one of the dozens of other web-design sites out there, choose a template that has responsive design baked in. (Keep in mind that many build-it-yourself sites don't yet offer this option, and those companies that do may have only a few responsive-design templates in their line-up. Expect this, too, to change in the coming years, when you'll have many more DIY options.) If you're hiring an individual or agency to create or update your site, be sure to add responsive design to your requirements. (The coding isn't that hard and shouldn't affect your price too much.) The same applies if you hire in-house coders to run your site: be sure you require responsive design for your site, and then give your web team any additional training they may need to make it happen.