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.


















Great article, most of the points you've touched on are quite sound in terms of where the web is heading. I'm sill wondering if responsive is really the way for business, especially as it's difficult to convince clients to spend more sometimes. I wrote about the subject here if you could give me feedback that would be very helpful.
http://www.phoenixstudios.co.uk/blog/2011/12/20/is-responsive-designright-for-business/
- spam
- offensive
- disagree
- off topic
LikeThis is a ridiculous article. THIS ARTICLE ISNT EVEN RESPONSIVE.
WHAT THE FUCK?
- spam
- offensive
- disagree
- off topic
LikeNicely done. ashoklalla
- spam
- offensive
- disagree
- off topic
LikeGood article! A good quick intro to a lot of the big ideas being thrown around right now.
@ThomasPhinney is right, Open Type is just a format, not a licence. Many browsers now support and prefer WOFF, or Web Open Font Format that has a lot more control built in for web-specific. Internet Exploer was the first to implement @font-face since version 4 with the file type .eot or Embedded Open Type.
hope this gets fixed soon!
- spam
- offensive
- disagree
- off topic
Like"In 2011, open-sourced Web Fonts, also known as Open Type fonts"
Well, no. OpenType is a font format. Despite the name, a font being an OpenType font is unrelated to the question of whether the font is open source or not.
"from the likes of Typekit and Google Web Fonts liberated web designers."
Google Web Fonts uses entirely open source fonts, but services such as Typekit (and our own @WebINK) rely primarily or exclusively on retail fonts.
Cheers,
Thomas
- spam
- offensive
- disagree
- off topic
LikeThomas Phinney gotchya.... thanks TP
- spam
- offensive
- disagree
- off topic
LikeIs this just a copy and paste? " For example, when Apple upgraded the resolution on the iPhone 4s this year"
The didn't update the resolution... It literally had no impact on web or responsive design.
- spam
- offensive
- disagree
- off topic
LikeManik Rathee i meant the 4 last year.
- spam
- offensive
- disagree
- off topic
LikeConversation from Twitter
pdehaan i need to talk to you about something big im working on>>>new website!!! i did alot of birdeye ravis
RT EricssonLabs The Future of Web Design | TNW http:\/\/t.co\/oLXqRZl2
sonjavanvuren leuk artikel thanks!!
TweetDiscovered A great article
SpearsMarketing tnwdesign the irony is the website is not working....is this the future?
ColinMeTierney Who knows...maybe? (P.S. mobile apps, CSS3, HTML5, and responsive design are my predictions.)
tracitoguchi Hope all is well with you Traci! Have a fantastic weekend!!
Aceman808 Thank you, you too! #TheGoodWife just manages to get even greater, doesn't it? I'm such a fan. ^_^
tracitoguchi great writing.... love the show! The double twist of the prosecutor now going after Peter...nice
Aceman808 The writing, acting, production... Yes, & that Will can't be bought, hehe. #TheGoodWife
ScottKellum The phrase “open-sourced Web Fonts . . . from the likes of Typekit . . . ” strikes me as odd.
litherland yeahhhhh, its a bummer that is right at the start, hope that gets fixed soon cc cbm
ScottKellum litherland fixed!
shishev Thank you..