Design in the browser

This article first appeared in issue 235 of .net magazine – the world's best-selling magazine for web designers and developers.

I’ve never been a big fan of doing any more work than needed. I tend to evaluate methods and tools based on their ability to make me, or my team, more effective. How quickly do they get us to a working product? How effective are they at communicating? Do they stay out of our way?

Over the years, I’ve adjusted my design process and tools. I imagine I’ll continue to do so. That’s the nature of designing for technology and the web. This industry is constantly evolving; our process and tools need to evolve as well.

HTML5 and CSS3 make it easier to transition more of the design process upstream – away from Photoshop and more towards a living, breathing design. Tools such as Foundation, Bootstrap, and jQuery make moving more of your design process to code more approachable.

Benefits to designing with code

First, I’m not advocating dropping Photoshop, or any other visual design editor from your workflow. Instead, I’ll focus on the benefits of moving that design into code sooner than later.

Data first

The thing I’ve always liked about designing with HTML is that it encourages thinking from a data-first perspective. In contrast, using drawing programs such as Illustrator, OmniGraffle, or Balsamiq, you start with a box and fill it with data.

In HTML you construct the DOM (document object model), kind of like building a table of contents. It’s a return to true information design with meaningful hierarchies. HTML5 takes it a step further with the addition of new semantic elements: article, section, header, aside, footer and so on. This data-first approach blends nicely with mobile first, responsive designs.

Mobile goodness for free

If you’re reading this, you’re probably designing for mobile. And chances are you’re going to have to design a form or two. With HTML5, you’re in luck. Prior to HTML5, your input types were pretty much either a text or password field. HTML5 introduced a number of additional input types, including:

<input type="email"><input type="tel"><input type="url"><input type="date"><input type="date-time">

What’s really awesome about these additional, unique input types is that mobile browsers on iOS and Android recognise them and automatically swap out a contextually aware keyboard – with no special jQuery plug-ins or hacks required. Oh, and if your browser doesn’t know what an <input type="email"> is, then it just defaults to a text input.

Finding a common language

“It’s awesome how our designers and developers can work in the same language” – John Drago, application developer at Inflection.

See if this sounds familiar. I’m in a conference room with a half-dozen server-side application devs who can code circles around me in Ruby, Python, Java or .NET. I’m the only designer. A few of my suggestions are initially dismissed as being too complicated to implement. I walk up to the whiteboard and start writing some HTML and CSS on the board for how the design could be implemented. Suddenly the conversation tone changes and one of the developers reluctantly says, “Well, yeah – if we do it that way, it could work.”

Moving more of my design process into code has improved conversations with developers. There’s an added layer of respect earned by knowing how to craft your designs in code. You don’t have to be an expert to earn that respect. While my HTML and CSS skills are rock solid, my JavaScript skills are mediocre at best. And I’m not shy about admitting that. Still, when working with frontend, or server-side developers, the fact we can speak in a common language, or meet halfway, is a huge advantage.

Learn faster

While wireframes and visual composites can help in planning, these static artifacts are theoretical. How many times have you tried explaining an interaction to someone, only to have them respond, “I guess I’ll have to see it.” The sooner you get to a prototype, something people can interact with, the sooner you can experience the design and see if ideas work.

Rapid iteration

When was the last time a final design that shipped to production matched your Photoshop comp exactly? Almost never. With digital product design, change happens constantly. Furthermore, changes such as increasing the size of your headings from 22pt to 24pt across a couple of dozen screens can take hours in Photoshop. Smart Objects give you some level of object-oriented design in Photoshop. Unfortunately, most visual designers I know don’t utilise Smart Objects enough. With CSS, because it encourages a more systematic approach to design, typographic changes take minutes instead of hours.

What about changing the linear gradients on all of your buttons? Or the size of a border? How about changing from squared corners to 2px rounded ones? In Photoshop, this can take hours and you still have to code it. The ability to design in code helps avoid the round trip of going back into Photoshop for iterating on the visual design. When you move those changes upstream into code, using CSS3 and Sass (which I’ll cover later in this article) they can happen in real-time and only take a few minutes.

Faster time to launch

Over the years, as I transitioned more of my design workflow upstream into code, I experienced a real improvement – about a 20 to 30 per cent reduction in time to market. The more I do this, the less time I spend duplicating efforts. I’m spending fewer cycles going into Photoshop or Fireworks and then repeating the work in code.

At some point the design has to interface with some type of backend, whether that’s a CMS, Rails app or something else. As most of my design work is in code, integration happens sooner than later. A couple of years ago, one of my clients, PointRoll, went from prototype to production in five days.

Why HTML5?

HTML5 is easier than previous versions of HTML. Take for example the document type declaration. In previous versions of HTML, the DOCTYPE looked something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

And there were six different versions. Luckily the HTML5 DOCTYPE looks like this:

<!DOCTYPE HTML>

Seriously. That’s it. Shockingly simple.

When creating a standard HTML page, there are a number of common elements, such as a header, main content area, sidebar and footer. I’m sure you’ve seen something like this before:

<div id="header><div id="nav"></div></div><div id="main"><div id="sidebar"></div></div><div id="footer"></div>

Nothing out of the ordinary there. But once filled in with content, this template turns to div soup. In contrast, with HTML5’s new semantic elements, you get something much simpler and easier to scan, like this:

<header><nav></nav></header><article><aside></aside></article><footer></footer>

Look at that. Something that makes sense.

The magical data- attribute

HTML5 comes with another awesome hook that gives you the ability to craft your own semantic meaning: the data-. Previously, if you wanted to assign something meaningful to a DOM element, you were limited to IDs, classes, and roles.

Unfortunately, IDs must be unique. Classes are universal (yippee!), but using them can quickly turn into a mess. Roles are an underutilised asset that provide significant meaning for ARIA. Recently, I’ve been using data- for an event tracking analytics platform we’re developing at Inflection. We’re big fans of testing our designs. When working on applications or pages that have a great deal of interactivity, we’d like to have more granular insight into customer engagement within the page.

Enter the data-. With it you can assign, pass along, and hook into a ‘define your own’ meaning model. So, for example, you can do this:

<input type="button" data-id="facebook" dataregion=" main" data-event="register"><input type="button" data-id="twitter" dataregion=" main" data-event="register"><input type="button" data-id="linkedin" dataregion=" main" data-event="register">

We can attach a listener with JavaScript to the page and any time a customer hovers over, or clicks this button, we can track that activity. Instead of only being able to track that someone registered via OAuth with Twitter, we can see that they hovered over Facebook, then Twitter, then LinkedIn, and then finally decided to choose Twitter for their OAuth model.

Imagine extending this to a site like Pinterest, or the new Myspace design where customers drag and drop tiles to reorder them based on interest. Or possibly hiding tiles they’re not interested in. The data- attribute enables you to attach or assign an additional layer of semantic meaning to things that you can define. For sites and apps that rely heavily on Ajax it opens up limitless opportunities.

CSS3 – it’s the new Photoshop

CSS3 brought a whole new level of designing look-and-feel that used to require background images, slices, and the infamous ‘sliding doors’ technique. Thankfully, that’s all a thing of the past.

Let’s take a look at making a fancy button with a linear gradient, rounded corners, text shadow that gives it a nice letter press effect, and a glow on hover. Learning these techniques will go a long way. Each of them can be used independently, or in various combinations to pull off just about any of the current visual hotness trending the web today.

First, let’s make a few adjustments to the default <button> and <input type="submit"> elements. Assuming you use one of the standard CSS resets, we’ll just add a little sizing and breathing room.

/* Buttons buttons, whose got the buttons.======================================= **/button, input[type="submit"] { height: 2.7em; padding: .4em .7em; line-height: 1.9; }

Protip: Buttons and inputs that are submits can be tricky to restyle. I’ve found by adjusting the line-height to 1.6 or greater, you can avoid the hack of needing an extra div or span inside the <button> tag.

Now we’ve ‘fixed’ our button issue, we can create a .btn class to give us a nice clean button with rounded corners, a linear gradient, outline, and that letterpress look.

.btn { display: inline-block; border: 1px solid #d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: .4em .7em; background: #edeff2; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), color-stop(0.55, #edeff2), to(#e4e6e9)); background: -moz-linear-gradient( center top, #fefefe, #edeff2 55%, #e4e6e9); -moz-box-shadow: rgba(160,172,187,.7) 0 0 .2em 0; -webkit-box-shadow: rgba(160,172,187,.7) 0 0 .2em 0; box-shadow: rgba(160,172,187,.7) 0 0 .2em 0; color: #6c7786; font-size: 1.1em; text-shadow: #fefefe 1px 0 1px; line-height: 1.375em; cursor: pointer; }

And then a nice hover effect with a subtle glow using the box-shadow method:

.btn:hover, .btn:focus { -moz-box-shadow: #129ceb 0px 0px 2px; -webkit-box-shadow: #129ceb 0 0 2px; box-shadow: #129ceb 0 0 2px; background: #e6e9eb; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), color-stop(0.55, #f6f6f7), to(#e6e9eb)); background: -moz-lineargradient( center top, #f7f7f7, #f6f6f7 55%, #e6e9eb); color: #45484b; text-shadow: rgb(255,255,255) 1px 1px 0; border-color: #c9c9c0; }

Now, I’m not a big fan of writing the linear gradient code. It’s long and confusing. As you can see, I’ve only included the version for -moz, -webkit, and the standard model. If you want to include -o and -ms versions, you’ll need to double the code.

There are two other options. One is a CSS3 generator; there are several available on the web, including ColorZilla. But if you want to step up your game a bit, consider diving into Sass: combined with Compass, it’s a godsend.

Sass+Compass: magically delicious

You can stop hoping for CSS4 unicorn edition. It’s here and it’s called Sass+Compass. Sass stands for Syntactically Awesome Stylesheets: you inherit all the traditional benefits of CSS3 with the added joys of variables, mixins, extenders and other goodies.

I recently refactored a 5,000-line CSS file that had more than 30 variations on the same shade of blue. With Sass, I replaced every variation with this code:

color: $blue;

By defining $blue in my _variables.scss file, I can create a default colour that every CSS or SCSS file can reference. Anyone writing CSS can use $blue and not have to worry about using an eyedropper, finding a hex code, or RGB, RGBA or HSL colour.

Remember that linear gradient code? Instead of writing several lines of code, how about this:

@include background(linear-gradient(#b1cfdc, #7a9cac));

Let Sass and Compass do the heavy lifting and generate the correct syntax for you: done. Let’s say you want a darker or lighter version of a colour. You could move the eyedropper around in Photoshop, or just use the lighten/darken commands in Sass:

@include background(linear-gradient(darken($litegray, 2%), darken($off-white, 5%)));

That will create a linear gradient with a 2% darkened $lite-gray and 5% darkened off-white. Voil! You don’t even need the HEX or RGB codes.

jQuery: oh, yes you can

I have a confession to make. JavaScript used to intimidate me. Then I found jQuery. I won’t claim to be a JavaScript guru, but I’m pretty confident I can pull off just about any kind of transition, or function I need to using jQuery.

Take, for example, the ability to display a secondary phone number input on screen by clicking an Add New number link. Using jQuery, you simply write this:

//-- Progressive reveal --//$('.new-number').click(function() {$('.alt-number').fadeIn('fast');});

Looking for something more advanced? There’s probably a plug-in for it. Basic behaviours are easy and complex ones are approachable with jQuery.

Frameworks

Two of the most robust frameworks today are Foundation and Bootstrap. Now, before you dismiss CSS frameworks, let me ask you something. Do you use jQuery? Ruby on Rails? Django? All frameworks.

Just like jQuery and RoR, Foundation and Bootstrap were born out of recognising that there are a fair number of things we do over and over again (such as resets, typography, grids, forms, buttons, nav and lists). Foundation and Bootstrap both offer support for responsive designs through the use of helper classes. Both are well documented and have been road tested, so you can use them with confidence.

One key difference between the two: Bootstrap is based on the LESS system for CSS preprocessing, whereas Foundation is based on Sass. I prefer Sass to LESS owing to its additional capabilities, but both Sass and LESS squash traditional CSS to pieces.

One last thought on frameworks. For those who don’t want to inherit the extra bloat of someone else’s framework, consider picking an existing one and stripping it to the bare bones, or cherry picking from a few to roll your own. Either way, there’s really no reason to start from scratch every time.

Final thoughts

Want greater control over how your design finally turns out? Move more processes upstream to code. HTML5 finally brings some sense to the DOM. Good riddance to nonsensical DOCTYPEs and divitis. CSS3 is the new Photoshop: linear gradients, borderradius, and box-shadows FTW! And with tools such as Bootstrap, Foundation, Sass and jQuery, moving design upstream to code has never been easier.

Discover 55 amazing examples of HTML5 over at Creative Bloq.