14:18 PM

The HTML5 Promise: Responsive Web Design For Any Screen


This article is timely because I just finished building a responsive version of SVW in Zurb's Foundation 4 "mobile-first" framework. Responsive HTML is the future compared to apps because of the huge number of devices.

By Intel Free Press

The difference between a smartphone and a tablet was once clear, but as new device sizes and categories emerge -- such as the phablet -- the line between form factors has blurred. Though hardware may be a moving target, consumers nonetheless expect to faultlessly view Web pages regardless of the screen size, which poses a thorny challenge for Web designers.

"As users have entered the world of Web portability, the expectation is that all content can be viewed properly on whatever device they're using," said Jason East, CEO of For Human Use, a San Francisco Web design agency.

Be it a smartphone, tablet Ultrabook, laptop or desktop all-in-one, the device that consumers choose to use at any given moment is largely defined by their location. Wherever they are, what they're looking for is a consistent online experience perfectly adapted to the size of the screen they're using and the device's user interface.

"Behaviorally, we've seen that people are browsing all the time, and they are flowing from device to device based on where they are," said Suzanne LeGette, Intel digital marketing specialist. "With their portable devices they're able to be just as engaged as when they are at their desk using a desktop device."

To keep pace with this demand for engagement, Web designers are finding new ways to support content that is distributed through multiple devices in multiple formats.

One method is so-called responsive Web design or RWD. Coined in 2010 by Web designer Ethan Marcotte, it refers to a website design approach, not a specific technology. However, responsive design is enabled primarily by CSS3 and JavaScript, which fall under the banner of HTML5.

"HTML5 is the backbone of the new and interactive features of responsive Web design," said Matt Groener, Intel Developer Zone development team manager.

"HTML5 is really maturing in terms of its functionality and, more importantly, its speed. Responsive design uses the same elements that will make HTML5 really successful, namely HTML, JavaScript and CSS3."

"The common denominator with responsive Web design and HTML5 apps is that developers develop to a browser rather than a specific operating system or device," said LeGette. "Responsive Web design is all about creating visual experiences that you can take across all devices."

From the user perspective, the advantages of RWD are essentially invisible, which is exactly the point.

"The benefit is that we can satisfy the end user seamlessly across devices," East said. "The user may not even be aware that their product has been modified to work on their specific device, but they're satisfied with the experience."

To make RWD work, designers need to rethink the content of their sites from the ground up. As the device screen size gets smaller, hard choices need to be made on how to organize and display content.

"Responsive Web design is pushing Web designers in a direction where they have to be visual and flexible, and they have to create something that's dynamic," said LeGette. "That's what the audience expects these days."

Taking user behavior into account is also a vital factor in design.

"Designers need to understand how the devices are used," Groener said. "A person who's walking while looking at their phone needs to be able to read that font really well, because if they have to trade between reading your font or missing a curb and falling they're hopefully not going to read your font. Therefore, you need to make your font bigger.

"You need to understand that people are distracted on these mobile devices, and you need to give them an easy-to-use interface.

HTML5 has momentum

After a rocky start in some quarters, HTML5 is gaining in acceptance and credibility. A February 2013 survey by HTML5 toolkit provider Kendo UI found that 50 percent of mobile developers have already developed in HTML5, and 90 percent have plans to do so at some point this year.

Intel has long supported HTML5 technologies and recently acquired appMobi's HTML5 developer tools division.

"Developing in HTML5 benefits all of the ecosystems because you get to market faster," Groener said. "You don't create an iOS app and then, when time permits, bring it to Android or Windows. You can do it in any or all ecosystems at exactly the same time.

"It will only get better for developers as HTML5 matures, becomes faster and adds more features that put it on par with native application development. The future is more responsive rather than less responsive. I don't see that ever changing."