The Future of Web Design

As the web moves towards an open, content centered existence, the future of its design is unknown. For a long time, typical web design was based on print design practices but the web is not and has never been a static medium. We are seeing a resurgence of rich experiences that are focused on user interaction in contrast to the simplified web design of the past.

In 2011, OpenType fonts liberated web designers. In what was known as “the @font-face revolution” these new embeddable fonts gave designers more beautiful fonts to play with and more control of those fonts. For designers, HTML5 became the most talked about programmer’s language and CSS3 became the lastest standard for CSS. When thinking about devices, Responsive Web Design and Mobile became massively important trends; all of the aforementioned buzz words will shape the future of the web.

The future of web design is about moving beyond designing for one device. Is it all about mobile? No. But mobile is incredibly important. Users are accessing the web from mobile smartphones, tablets, their laptops and desktop computers. The web is not a fixed width and a website needs to respond and adapt to these different platforms in a fluid and effective way. The Web is our only true, universal platform, and its future is in the hands of our world’s designers. They are the humans who will be shaping and crafting and tinkering and toying and pulling and pushing it in an infinite number of directions.

The direction of web design is changing. It’s not just styling something to make it look good; it’s about the bigger picture. Designers can’t just take their knowledge of print design and apply it to the web. Web designers have to think differently; they have to push the boundaries of what was previously thought possible.

-Farah Assir, Designer at The New York Times

Responsive Web Design

In the past, when a user accessed a website, its servers pushed content to them based on what platform they were using- mobile, tablet or desktop web. But over the past year, engineers have begun to adopt responsive web design, which includes fluid widths, scalable images and adjustable layouts that remain consistent across all platforms, whether you’re accessing the site on a mobile phone, tablet, desktop computer or wide-screen.

“Responsive web design is forcing us to design with a more human focused approach. You loose a lot of control over the way people are seeing your work and it has to look and feel equally awesome across all platforms,” says Farah Assir, a Designer at The New York Times.

It’s not just about resizing a site to fit on the iPhone. There are dozens of details that designers have to pay attention to across the board. For example, when Apple upgraded the resolution on the iPhone 4 last year, web designers had to update all their images so the user would have the same brilliant experience across all platforms.

“Back in 2006, I started using my first iPod Touch, downloading apps and using the mobile web. Apps were great… but the mobile web was frustrating. In fact, well designed apps outnumbered good mobile websites, which is strange considering the steep learning curve associated with native apps. So when I started to pick up on the discussion about responsive web design, I saw a chance to design and build mobile content without the headaches associated with native app development,” says Vince Allen, a Senior Developer at Lot18. “Responsive design focuses more on how the site “behaves”, placing the focus on interactivity and the emotional response it evokes.”

Responsive web design not only creates a better user experience, it’s also economical. Companies only need to maintain one code base, which costs much less– and they don’t have to worry about version control. For example, if you have two sites, one for mobile and one for desktop, you carry the extra burden of syncing those builds. For Lot18 or any rapidly scaling company, casting off any unnecessary cycles is a competitive advantage.

And when designers and developers are freed up from chasing platforms and browsers, they can focus on building features and content. “Designers and developers are most effective when they are focused on creating an experience rather than chasing down a million little problems. It also puts us closer to our audience because we’re thinking about how users experience the site beyond the browser. Instead of designing for IE7, we’re designing for context and behavior and getting a clearer picture of our audience,” explains Allen.

Back to Allen’s first iPod Touch: “I thought it was crazy that people would watch movies on such a small screen until I tried it on the subway and missed my stop. I was as engrossed as I was in a theatre,” he says. “Maintaining that same suspension of disbelief is what we’re after. The site should feel natural to the point of a user losing themselves. Once the user has to resize or zoom, it’s like the lights coming on midway through the movie and ruining it.”

Check out a demo of Lot18′s new responsive web design, which was launched in November 2011.

Also see: 60 examples of responsive web design.

Responsive Web Design with Server Side Components (RESS)

We’ve only just begun with responsive web design. The next step might be RESS, which is a customizable web design approach that combines both the old way of serving content with the new responsive design.

Before responsive, there were server-side solutions that detected what device you used and served you different content based on that. A lot of people used that technique and ended up hitting limitations. Now users are combining the best of both worlds- what the server can do with a client responsive web design approach.