ZURB Blog

Remember the scene toward the end of "2010: The Year We Make Contact" where Hal asks Dave what's going to happen? And Dave just says, "Something wonderful."

2013 may not be the year we make contact as predicted by Arthur C. Clarke. However, something wonderful is going to happen. Last year, we made great strides in responsive design, some of which we recapped already. This year, however, is where we take it to a whole new level.

After all, 2013 has already been proclaimed the year of responsive design. We no longer live in a singular device world. As Mashable points out, tablet sales are expected to exceed 100 million this year and majority of US mobile users own a smartphone. We have to design responsively, and we're going to start to see some significant efforts in this area over the course of this year. Here's a peek into what is to come.

Mobile First, Content First

This year, more and more designers are going to experiment with how things look on mobile. With that, we'll see more of a push into mobile-first responsive design where we're working from the smaller device up to the larger ones. Which is something we'll be doing ourselves with the next iteration of Foundation with more emphasis on mobile first.

That being said, we'll also see sites that focus on content more than superflous design elements. In other words, content will help drive design decisions.

Responsive Typography

In the latter part of 2012, we started to talk more and more about responsive typography. There are two schools of thought, as Webdesigner Depot points out. One, the type can be resized for the device it's being viewed on or by the reader themselves. The other involves optimized line lengths to maintain readability.

In any case, responsive typography is going to be a hot topic as we focus more and more on how our content appears across devices.

Better Media Support

Flexible media, images and videos, are responsive in HTML to the width and height of a screen. They're set at their max-width of 100% so they can nest within a variety of screen sizes. But this is hard to do right.

We can either use CSS and scaling with the grid, or we can load the right resource for a particular device. The latter is a bit of a pain because even with swapping smaller images for larger ones, both resources will load and choke the performance of the page.

However, in the coming year, there will be much better image/media support for handling small and large images on mobile. We'll also see see support for HiDPI devices as well. We're doubtful that this will include an official, WC3 sanctioned standard, but hopefully browser and device makers will circumvent this issue like they have in the past.

Other Framework Offshoots

We're looking forward to seeing other frameworks build off of what we've done with Foundation. What's exciting about an open-source project like our responsive framework is seeing how others take it, improve upon it and add to it.

Better Understanding of Device Capabilities

Last year, we were beginning to understand all the capabilities and affordances of other devices — such as swiping on a touch screen or not, or where controls ought to be based on how we hold a smartphone. Now we get to fully delve deep and understand more on how our design decisions are influenced by them.

More Variations in Layout

Another thing we're going to see in 2013 is more variations in layout. More folks are going to start experimenting, breaking away from just a multi-column shrinking into a single column.

Down the Road

This is only the beginning. We're going to start to see newer, smaller and more varied types of devices out there. We're already aware of Google Glasses, but what about our cars, watches or ears?

The only way to meet the ongoing challenge of a multi-device world is through responsive design. We're really on the forefront of something wonderful.