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.
So Let’s Get Started with HTML 5—or HTML5….Huh?
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.
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
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.
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.