Chris Converse on HTML5 and CSS3

Ever notice how so many veteran web designers—you know, people who’ve been designing for screen and device for more than, oh, two years—are also the best teachers? Chris Converse is one of them: a 15-year veteran of graphic design and interactive media who devotes a lot of his time to teaching and writing. So we’re excited that he’ll be in San Francisco for the HOW Interactive Design Conference, sharing knowledge about CSS3 and HTML5. In a recent e-mail dialog, Chris talked about how technology has always influenced design (think: printing press).

What’s keeping you busy these days?

We have been working on a few different things, but all have a common theme around HTML5, CSS3 and JavaScript. Our Flash work has dried up almost completely in the past two years, and our clients are asking for that work to be converted to “something that runs on our sales teams’ iPads.” In addition, we’ve been working quite a bit with multiscreen, or responsive, web design, and even developing templates for Adobe Systems to distribute in hopes of promoting better browsing experiences across various screen sizes.

I have also been doing a lot more writing and screen recordings this year, especially with organizations such as Lynda.comUdemy.com, and Adobe Systems, via the Adobe Developer Community. My target audience for these tutorials is designers, and teaching them to use the technologies that bring their designs into the interactive space.

At the conference, you’ll be speaking about how HTML5 and CSS3 have given designers even more freedom to create the sites they want to make. What can designers do with these tools now that they couldn’t do two years ago?

We’ve seen a real surge in the support for HTML5 and CSS3 in many browsers in the last few years, which has lead to more confidence in using these techniques for our websites. CSS3 is especially valuable for designers, giving us the ability to adjust layout based on screen size, specify gradients and custom fonts, round corners, and even add shadows without using any web graphics. This greatly speeds up website development, lessens the sites’ bandwidth footprint, and allows faster, and more productive design experimentation.

The greater advantage, however, is that websites that rely on dynamically generated content can be designed to look as beautiful as content that has been crafted. In the past, we’d need to use graphics to achieve specific fonts or make gradients. Now, aspects of a site’s design can be updated with the same ease as updating the text.

What are the design principles that apply to any interactive design, regardless of the screen size or device that it’s to be viewed upon?

As we learn in design school, size, shape and color are the core aspects in designing our mesage. When you add varying screen sizes to the mix, we lose the shape aspect. We can still control our design element’s relative size and color; however, the overall shape they conform to changes.

HOW Design Conference

Get the MP3 of Chris Converse’s session on Transforming Your Print Designs on the Web at MyDesignShop!

This can be very difficult. We’re used to having these three aspects when designing our messages, and in many cases, changing to shape, or layout, can alter our message by implying things like relative importance. When screen sizes decrease, designers and writers need to make decisions on what is important enough to be displayed first, and what needs to be moved below the fold, or to another screen. In some cases, a tech solution such as rotating, or randomizing the content can be a solution, while rewriting the main content as linked teasers may be another.

You’ve written a lot about the intersection of design and development. What do designers need to know about the development side of an interactive project?

I hear a lot of art directors and creative directors say things like “let’s push the envelope on this,” or “let’s ignore the technology while we’re designing.” When we’re talking about technology, there’s no such thing as pushing the envelope. Something either works, or it doesn’t … that’s it.

Graphic design has always been technology-dependent. As methods of replicating our designed messages advance, our abilities to become more expressive advance along with that. This was true of the first printing presses, it is true of HTML5 and CSS3, and everything in-between.

While I do think it is necessary to envision only the ultimate design and user experience, this can’t be done in a vacuum. Once the creative team’s vision starts to take shape, they need to involve the folks who will be writing, animating, photographing and developing for the project. With good communication between these disciplines, designers can take full advantage of everything the chosen interactive medium has to offer.

As you scan the technology landscape, what are you seeing that really excites or intrigues you?

For web design, I’m excited by the new visually based tools that are starting to emerge for creating dynamic content with JavaScript and CSS3 animation. For the past two years, we’ve been hand-coding our more customized designs and user experiences. In recent months, we’ve seen web-based tools for aiding in CSS3 development, as well as commercial tools, such as Sencha Animator and Adobe Edge, for creating JavaScript- and CSS3-based animation and interactive experiences.

I’m also excited by all the new tools available for digital publishing, especially for tablet devices. The speed at which tools like Adobe InDesign allow us to create animated and interactive content across Flash, interactive PDF and tablets is truly amazing. With much of the technical barriers being lowered, designers will be able to play even greater roles in creating interactive projects.

What’s your favorite:

  1. website?
  2. Hmmm … this one is tough. At the risk of being boring, I love any site that lets me get things done, or creates more personal time for me. So considering this, I really like my banking website, I like Google Docs, and I’m hoping to love Peapod—once they deliver to my area.

  3. mobile app? 
    Flipboard.
  4. book? 
    Bill Bryson’s “A Short History of Nearly Everything.”

Learn more about the HOW Interactive Design Conference and sign up for the event here.

This post originally appeared on the HOW blog.

COMMENT