Helloewy

The Future of Web Design is Now

So what does that mean?

In order to stay relevant, designers, developers, and clients need to start thinking about the Web in a whole new way.

There are three specific catchphrases that are going to help usher in this new era: HTML5, Progressive Enhancement, and Responsive Design. These are the foundations upon which Web design and Web applications will build their future. Bold statement? Sure is. Keep reading—I’m full of them. And on that note, feel free to contradict me; I’m willing to learn.

Screens

So Let’s Get Started with HTML 5—or HTML5….Huh?

Most of the time when you hear “HTML 5” it is being used as an umbrella term, which includes HTML5, CSS3, JavaScript, and a handful of other powerful Web technologies.

HTML5 (the specification) is about making things simpler through standardization, though the attention it has received may make it seem daunting or confusing to some. Fear not. HTML5 has set out to take what we’ve learned over the past decade and implement it in a standard semantic fashion. In other words, the goal is to take commonly used APIs (application programming interfaces) and structural elements and bring them in line across all browsers.

For instance, take form validation—sliders and calendar pickers. It used to be that you would use one of many JavaScript solutions to implement these actions and then hack a bit to make sure users of various browsers would have a consistent experience. HTML5 has taken that out of the markup level and added it to the browser level. This is extremely important for several reasons: It allows mobile devices to initiate the correct keyboard for the specified fields, and it frees developers from the constraints of simple validation issues, allowing them to focus on concerns specific to their sites and content. Ultimately, it benefits the users because we are able to dedicate more time to creating great apps and experiences instead of being bogged down with browser compatibility.

Controversy….No, It’s Not about Flash This Time

Just recently an official of the World Wide Web Consortium (W3C) said that developers should hold off from developing HTML5, explaining that it was a bit too early to let it loose on the general public because the spec is in various stages of approval. W3C might have missed the memo, but Apple’s CEO Steve Jobs, Google’s CEO Eric Schmidt, and other industry heavyweights at RIM, Microsoft, and HP all acknowledge this as the direction the industry is headed. In other words, it’s coming whether W3C is ready or not.

It’s just like the advent of CSS2/CSS3. Developers, Web designers, and browser vendors did not wait for W3C approval; they cherry-picked parts of the spec that were already agreed upon and implemented them. The benefits that HTML5 provides have been well documented, so I’ll offer just a few of the most essential links. (I promise to cover this in depth in a future post.)

Check out these amazing links on HTML5 :)

http://www.apple.com/html5/

http://www.html5rocks.com/

http://www.beautyoftheweb.com/?fbid=9Ive9fIKCfJ#/experience

http://www.alistapart.com/articles/semanticsinhtml5/

Progressive Enhancement and Responsive Design…It’s Time to Get Your Learning On

This is where we have to change our perspective. As designers we can no longer depend on the pretty snapshots we create in Photoshop and Fireworks alone. We need to start thinking about the necessary dynamics that enable a site to be shrunken to the size of a handheld or magnified to fill the real estate of a 60″ TV. (It’s coming sooner than you think.) That means that in the future, a lot of our designing will be implemented in the browser itself. So dust off those books, Web designers, we are going to have to start coding again!

As developers we need to get down to the level of thinking of the user. “Is that jQuery slider necessary for the person with a handheld?” “Does the device support location functionality?” If developers can start building at this level, then users are going to be in for a real treat! And providing the best possible user experience is the whole premise of Responsive Design.

Make Your Site Respond to the Context in Which It Is Being Viewed

Have you ever gone to a site on your mobile device and just said “Forget it!” because it was illegible or downright unresponsive? The old Web wasn’t built for the type of user environment we live in today. Sure, we’ve made do with various scripts and hacks, but why continue down that road when what we want is to make everything work as well as the native apps on our devices? This new generation of design is successful because it gives us such a seamless and rich experience. I can go into an app and it will already know where I am. All I have to do is say “I want sushi” and BAM! Twenty places in the surrounding area are viewable, at my fingertips, with directions! Exciting, I know!

Currently, some of the best examples of this type of design can be found in the new Twitter, Gmail, Yahoo Mail, MobileMe, and of course Facebook on almost any platform. This is what HTML5 provides us with: a platform to develop apps and sites free of browser inconsistencies and restrictions.

FREEDOM!

A lot of this is possible due to CSS3 & jQuery. But one extremely popular browser still doesn’t support all these new tricks and doodads. Internet Explorer :(

I promise it’s okay…that’s precisely where Progressive Enhancement comes in. Like Responsive Design, it’s all about adaptability. The forward-thinking browsers that support these advanced features will have some nice bells and whistles that enhance the users’ experience; those that don’t will still get the content, but the experience will not be so rich. This is okay because with the variety of devices coming to our sites these days, a site doesn’t have to look the same across all browsers (and it shouldn’t). Which brings me to the conclusion of this brief glimpse into the future.

Content and Context

In the future we won’t be able just to request info and slap it in the code editor. We will need to strategize, plan, and design our markups in a whole new way. With HTML5, Microformats, and WAI-ARIA we are now able to make beautifully semantic, accessible websites that have no need for plug-ins and high-speed Internet connections. With Responsive Design we can create experiences based on the users’ contexts, whether they’re on the go or sitting on the couch. Progressive Enhancement will allow sites to provide rich experiences and designs that degrade gracefully in older browsers.

There’s a lot to be said about each one of these subjects, and in future posts I will cover each one in detail as I experiment and navigate my way through the future of Web design.

7
  • Ryan,
    This is one fantastic blog post!
    I had no idea you could write so well.
    Engaging, insightful and really nicely written.
    Congrats!
    Mark

    Mark
    Reply
  • I agree, whole-heartedly, you don’t want to be the last to start factoring this stuff into your designs!!!

    Dan
    Reply
  • Hey Ryan,

    Great article – it’s exciting to see this get pushed forward at the agency level. I know clients are going to love it and it’s going to make the web a lot better place.

    Keep up the good work!

    - Ryan

    Ryan Carson
    Reply
  • Really interesting stuff!

    Gabe
    Reply
  • Excellent article.
    As a designer my question is this: When does one stop calling communicating with your target audience”design” and start calling it marketing strategy?

    Peter Darnell

    Peter Darnell
    Reply
  • Peter –

    I think that the difference between communicating and marketing has to do with context and intention. It is a very fine line but perhaps an ideal scenarios is one wherein the information being communicated is both legit/useful as well as focused/targeted and serves both purposes.

    Gabe
    Reply
  • Well written Ryan. It was an interesting read.

    Sandeep
    Reply

Leave a Comment

Helloewy is the blog of Loewy, a full-service interactive agency. It's a shout-out to what inspires us, to what's new and what’s coming in online media and beyond, an interactive peek into our seething brain-pans.

Newsletter