• Read more about Literary Aestheticism: Our Designers' Reading Lists

They say you can tell a lot about a person just from their bookshelf. Here is an inside look at our design team's current reading lists!

Our UX Designer, Ben Markowitz, draws much of his design inspiration from comic books:

"I enjoy comics for the intricacies in design and layout more than anything. Comics are a form of visual story telling which is much different from most other mediums; the artists (much like web designers) work elegantly within the constraints of the medium to create the most effective and moving experience for readers. Balancing artwork with content, they leverage limitations in usable space by using only the most poignant and effective elements to tell the story.

I approach UX design in a similar manner: define the optimal experience for users using the minimum set of design elements. This isn't minimalism, it's just responsible design. I aim to deliver a defined and powerful experience to the user by removing unnecessary complexity."

You know him as Chris Tate, our Director of UI, but we know him as Batman. His presence is sophisticated, his designs are rad, and his reading list? A thoughtfully cultivated set of inspirational pieces:

Here is Ted O'Meara, our Director of UX, whom we know as Superman (no, really).

As a graduate student at UMBC in the Human-Centered Computing program he focuses on developing software for the cognitively impaired. Ted's reading list is a reflection of his passion for creating accessible software through intelligent design:

• Generative Art (Matt Pearson)
• How We Decide (Jonah Leher)
• Envisioning Information (Tufte)
• Design Pattern TRABING?: Touchscreen-based Input Technique for People Affected by Intention Tremor (Evaluation, 2010, 267-272)
• The design of a real-time, multimodal biofeedback system for stroke patient rehabilitation (MULTIMEDIA 2006, 763)
• ...and Raising Unicorns.

Ask Ted about his tragic unicorn history at his next conference.

Jurgen Altziebler is our Managing Director of UX and he always means business. His seriousness is visible within his designs; nothing less than pixel-perfect will do for this designer.

His reading list might reveal his Austrian-born penchant for modern, light designs balanced with high functionality and subtle beauty.

• Less and More: The Design Ethos of Dieter Rams (Gestalten)
• Grid Systems in Graphic Design (Josef Muller Brockmann)
• Designing Universal Knowledge (Gerlinde Schuller)
• Ein Handbuch, Gestaltung, Typografie, etc. (Claire & Damien Gautier, Published by Niggli)

Javier Rios, our UI designer, is unambiguous and systematic. Maybe even a little crazy. (Ask him how many times he's been hit by cars while running!)

The practical, heuristic lineup of books in his reading list exemplify his approach to design: functional, clear designs that create a straightforward user flow path.

• HTML5 for Web Designers (Jeremy Keith)
• Responsive Web Designer (Ethan Marcotte)
• Mobile First (Luke Wroblewski)
• Designing For Emotion (Aarron Walter)

Style: The Main Ingredient

Based on their books alone I would conclude our design team is a group of calculated, discerning, artful design addicts. One thing can't be ignored though - they've got some serious style. It's that style that infuses every design they create, every user experience they develop, every carefully colored pixel on a page. As A Softer World once pointed out in their comic, "Everybody dies. Every single person. So, style counts."

Style counts.

• Read more about What the World Needs Now is CSS3

The discussion around HTML 5 has been heating up recently, with people advocating to get it finalized and implemented sooner rather than later (and lamenting the ulterior motives of major browser vendors in lobbying for specs). I simply can’t get passionate about this fight, much as I’ve tried. While some of the things that HTML 5 offers will certainly be a boon for web developers, by and large the issues that it addresses (in terms of interactivity) are surmountable simply by using the excellent Javascript libraries we’ve all become dependent upon. The next version of the CSS specification, however, is an entirely different story.

I recently started a new project and as an experiment decided to play with using the non-final border-radius implementations available in Firefox and Safari. After using it for about 15 minutes, I decided that I would simply forgo rounded corners in the interface for Internet Explorer. After using it for three days, I am wondering why every designer and developer on the internet isn’t simultaneously demanding immediate forced adoption of CSS3.

Styling is Fun Again

Our interfaces and style tastes have grown much more complex as the web has grown up, but the tools we use to implement those styles haven’t been keeping up. It shouldn’t feel like a trip to the dentist just to get a box to have some rounded edges. It shouldn’t be a nightmare to try to use translucent pngs for overlays (admittedly this has nothing to do with CSS3 and everything to do with IE6, the browser that won’t die no matter how much we pray).

I can tell you that styling on the edge doesn’t just feel good, it feels amazing. I’m able to implement in a few seconds what I might otherwise spend three hours styling while polluting my markup with hack tags.

Rounded Corners: Nemesis of Designers Everywhere

There is no good way to make rounded corners. The javascript libraries are buggy, images are limited in practicality, and getting it just right in all browsers is downright painful and usually ends up with markup something like this (and a whole mess of CSS to go with):

<div class='rounded'>   <div class='tl'>     <div class='tr'>       <div class='bl'>         <div class='br'>           So much for semantics...         </div>       </div>     </div>   </div> </div>

In the CSS3 specification, the same effect is achievable like so:

.rounded { border-radius: 10px; }

But it’s not just a convenient way to shortcut the hacks to which we’ve all grown accustomed, it opens up entirely new possibilities for design that would simply not be worth the effort to hack without it.

Lead By Example

Let me explain what I mean by example. Form design has always been one of the trickiest parts of web design, what can we do with a little CSS 3 magic? Let’s say we have a simple form that takes a person’s name:

<form id='sample_form'>   <label for="name">First Name:</label>   <input type='text' name="name" id="name"/><br/>      <label for="name">Last Name:</label>   <input type='text' name="name" id="name"/><br/>      <button type="submit">Submit</button> </form>

Simple enough, this turns out looking something like this:

Now we can add some standard CSS to make it look a little more acceptable:

label {   display: block;   float: left;   width: 100px;   font-weight: bold;   padding: 4px 5px;   font-family: Verdana, sans-serif;   font-size: 12px;   margin-bottom: 5px;   clear: both;   text-align: right; }  input {   font-size: 12px;   margin-bottom: 5px; } button {   margin-left: 115px;   margin-top: 10px; }

And our result is a perfectly usable form:

But what if we use just a taste of what CSS3 has to offer? We can make a form that looks completely unique without using a single image:

label {   display: block;   float: left;   width: 100px;   padding: 4px 5px;   border: 2px solid #037;   background: #06a;   color: #fff;   font-family: Verdana, sans-serif;    font-size: 12px;   margin-bottom: 5px;   font-weight: bold;   clear: both;   text-align: right;   border-radius: 13px;   border-top-right-radius: 0px;   border-bottom-right-radius: 0px; }  input {   background: #fff;   border: 2px solid #8ac;   border-left: 0px;   padding: 5px 5px;   margin-top: 0;   margin-bottom: 5px;   margin-left: 0;   border-radius: 5px;   top-left-radius: 0px;   border-bottom-left-radius: 0px; }  button {   background: #080;   color: #fff;   border: 2px solid #060;   font-size: 12px;   font-weight: bold;   margin-left: 112px;   padding: 5px 10px;   border-radius: 13px; }

It’s a hefty chunk of code, but anyone experienced in writing CSS can knock something like that out in about five minutes. The result is well worth it:

This kind of styling opens up with the application of just a single new attribute from the CSS3 draft specifications. Designers have had to hack, cheat, and wrangle every semi-complex interface that has been developed in the last 5 years thanks to the limitations of CSS (and more specifically the limitations of Internet Explorer), but it doesn’t have to stay that way forever.

State of the Browser

The complete CSS3 spec is not coming to a browser near you any time soon (more accurately not all browsers), and that’s a real shame. It brings to the table powerful new tools that can really enable the kind of semantic markup that we all wish was possible with today’s browsers. Rounded corners are just the “tip of the iceberg”; once CSS3 sees widespread adoption, interface design will take a leap forward unlike any it has seen before.

In the meantime, keep an eye out on the WebKit Nightlies for cutting edge CSS implementations (just added: CSS Variables). Five years from now we’ll look at the troubles we used to have and laugh. Until then, a person can dream…

• Read more about Announcing 'Browserized Styles'

Browser compatibility, the web designer’s nightmare, has always seemed more difficult than it has to be. Why hasn’t there been an industry-standard, simple way to target CSS to specific browsers, allowing one to style the page properly without worrying about hacks and other difficult ways of pulling all the information together? I thought that something should be done about it, so taking Richard Livsey’s ‘browser_detect’ plugin as a starting point, I developed an automatic solution for including browser-specific stylesheets.

Browserized Styles provides a dead simple way to create browser-specific CSS code for
use in a Rails application. All you need to do is create a .css file targeted to
a browser by appending an underscore and identifier to the end.

Installation

 script/plugin install http://svn.intridea.com/svn/public/browserized_styles 

Example

Let’s say I have some complex CSS code that looks bad in some browsers, but works in
others. Let’s also say that i’ve put it into a stylesheet in stylesheets/complex.css.

My stylesheet link tag looks something like this:

 <%= stylesheet_link_tag 'complex' %>

Now all I have to do to target a browser is create a new CSS file with the browser’s
identifier appended to it with an underscore (e.g. “complex_ie6.css”). That’s it!
The same exact stylesheet link tag will automatically check the current user
agent and load a browser-specific CSS file if it exists. Ta-da! One-step browser
styles!

More information is available in the readme, but the end result is browser-targeting bliss.

The plugin is brand new and will probably see some modifications in the future. If you run into any problems or come up with a patch, feel free to submit it to the Intridea Public Trac .