Tag Archives: design

A quick book review: Responsive Web Design

Just finished reading an excellent book: “Responsive Web Design” by Ethan Marcotte. If you build web pages, I want you to read this book. Here’s a few of my thoughts on what I just learned, and why you should read this one too.

The book begins with an overview of the evolution of page layout in web design, starting with it’s roots in printed page design and moving on to today’s reality that there is a multitude of screens and devices out there, with more on the way. We cannot predict what type of device our readers will show up with, and must adjust our belief system (if we have one) to accommodate the new realities that the various screen widths and mobile device sizes present us with.

The second chapter discusses the idea of designing within the constraints of a flexible typographic grid. Grid systems are somewhat of an artificial constraint that designers place on themselves to provide balance and symmetry to page layout, and on screen a new challenge is presented in that the page size is no longer fixed. The main takeaway here is to design content in flexible porportions to the variable screen widths that might be used to access your web pages. Mr. Marcotte puts forth some simple, accessible ideas for developers to leverage, making text more readable on unknown devices by putting forth a formula that I’ll repeat here mostly for the purposes of getting my own head wrapped around it:

target ÷ context = result

To decode Mr. Marcotte’s example, he begins with an assumption of a base font size of 16px. The headline in the comp is defined to be 24px. So to make it flexible, divide:

24 ÷ 16 = 1.5

And so the headline should be defined as 1.5em. Simple and elegant rule of thumb. Now we just need to remember to do it.

Chapter 3 applies this principle to flexible images, and expands upon it. There is the inevitable Questionable Functionality Challenge™ presented to us by Internet Explorer, which is quickly defused. That’s a lot of ink to dedicate to an obsolete web browser and the example demonstrates where the real problem lies by showing how awful text looks in resized images. But you aren’t locking up text in your images, right? I know, I know, it’s an academic example and clearly illustrates the failings of IE’s image resize capabilities. Let’s move on.

Chapter 4 introduces media queries. We’re finally at what I consider to be the coolest and most important part of the book – how to progressively enhance your web page layouts through the media query construct. Mr. Marcotte makes the argument in favor of using the min-width property instead of things like max-width (which tends to yield excessive code) and min-device-width (which only pertains to devices and doesn’t take into account variable web browser windows.) The max-width property is introduced for those that want to stop the insanity. (I do know people that expand their web browser to the full width of their 27″ high resolution monitors.)

Chapter 5 pulls it all together with strategies to integrate responsive design into your team’s workflow; how to make your design process itself a responsive one. He builds the case for Luke Wroblewski‘s “Mobile First” philosophy (a case that was already built up a bit in chapter 1) and finishes it all of with how to incorporate progressive enhancement using JavaScript to selectively pull in a slideshow component only when JavaScript is available and all the stars are in the proper alignment.

Overall, my belief has always been somewhat of the philosophy that there should be just “one web”; no “mobile web” or any other sort of alternate web reality that we should somehow slip into. Today’s mobile devices that are in fact being used to access the web are billed as fully capable web browsing devices, and indeed they are. Why deliver a shrunken-down version of your website just because they have a 3″ wide screen these days? It no longer makes sense in most cases; just reposition your content to accommodate their view. Every chapter includes simple, usable techniques that work, and I feel that these gems of advice should be a core part your future projects.

Lastly, I am very thankful for the appearance of the A Book Apart series. Each one of these volumes is, I believe, how a tech book should be: concise, full of valuable, practical, actionable information. I have read several of these so far, and each one has been a hit. I look forward to more.

iPhone icons

Here are some lovely PSDs available for download; excellent for picking apart how to create great iPhone icons:

http://christianbaroni.me/?page=downloads

(Found via http://twitter.com/flyosity/status/15798736074.)

This will be important for iPhone apps but even more important down the road (in my opinion) for web apps that have custom icons associated with them. If you’d like to learn more about this technique, full instructions for creating a custom desktop iPhone icon for a web page or web app are right here in Jonathan Stark’s excellent go-read-this-now book on building web apps with HTML, CSS, and JavaScript:

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932602

The gist of which is essentially you are creating a 57 x 57 icon and then adding one of the two following HTML lines to identify it:

The first option inherits the glossy light effect and corner radius from the iPhone OS. The 2nd one does not, so you have to handle corner radius and any desired light effects manually. iPad icons use 72 x 72 pixel resolution. I’m not sure yet, but I’m betting the new OS will have something closer to the 72 px size. Anyone know the answer?

Dogs and cats, living together. Mass hysteria.

Wha?

There has always been somewhat of a dichotomy in the world of web professionals between design & development.

Designers do their thing making pretty pictures, drinking cocktails at lunch, having social cliques, and little romances within the group. They frolic away in the meadows of Photoshop and Dreamweaver Design View, paying little attention to the nuances of the mechanical underpinnings of their creations. Or so I hear…

Meanwhile, the code monkeys toil away in the dark, unseen from the public eye, in caverns and closets and in back alleys where you dare not travel. Typically found unshaven in the wild, they hack away in text editors such as TextMate and Vim, write their code from scratch, and make jokes about algorithms in C in an Erkel-esque voice from behind Coke-bottle glasses. (Mexican Coke bottles, since apparently north of the border we’ve lost our flair for nostalgia and authenticity and now mostly distribute the plastic bottles which are unfit for ocular correction.)

I’ve had this debate at least six or seven times in my career, in some form or other, about this separation of church and state. Oil and water. Dogs and cats.

Stephanie Sullivan recently wrote this:

The root of my story and my point is — it’s the rare individual that has all the strengths needed for one web site. It’s the team that matters. Should everyone have a basic understanding of the other member’s jobs? How they work? What they can accomplish. Oh yes. Absolutely. Should they be able to do them? That’s just ludicrous. Absolutely not. Surround yourself with people more brilliant than yourself. Always learn. Work hard. You, and those around you, will be enormously successful.

Now granted, she’s posting this in response to the guys at 37signals, who by definition are an opinionated group making opinionated software. That’s why their stuff is so great – they set some constraints and they live by ’em. I’m not sure which posts she was referring to, but this could be one of ’em. And this is true. Designers who have strong developer kung fu are better designers for it. And developers who understand the issues of design are correspondingly empowered.

But I tend to agree with Stephanie. The reality of it is that there are a wide variety of personality types out there, and that translates into varying abilities and motivations for crossing over into the design or development realms one way or another. As a musician, I myself come from a deeply creative side (with some early code hacking expertise in the Atari days,) but have come around to being mostly a developer at this point in my career. I draw heavily on my design background when working today. But I certainly would want to get a good, web-experienced designer on my project. And I think that’s where the core of the debate has led to: Web designers who understand The Code create designs that make better sense within the constraints of the digital medium, and understand what the user interface objects are that the web-surfing masses are familiar with. Conversely, pencil-necked code monkeys understanding design principles won’t shackle their creations with masses of cruft and flotsam just because it worked 9 years ago and why not copy/paste that in?

There are so many faceted roles now applied to the web production line. We are all part designer, part coder, part marketing stooge, part librarian. There is no escaping that. But if the Industrial Revolution has taught us anything, it is that things will continue to specialize in the name of efficiency and progress. Multitasking sucks. For some of us (moi,) it sucks more than for others. It takes time for the brain to switch gears between the too-sexy-for-my-shirt design aesthete and the l33t h4x0r. Throw having to be a project manager, writer, or manager into the mix and you get all kinds of crazy flying around.

My take on it all is: Embrace what you are good at. Do what your passion dictates. Challenge yourself frequently, but never lose sight of your foundation. If your foundation migrates, then great! But always be aware of yourself and live in The Now™. If you do what you love, you are more likely to get good at it, more likely to stick with it for the long term, and good things will tend rise up around you.

Researching web information architecture, usability, and standards

If you are a web developer, web designer, web architect, web usability expert, in a similar role, or just have an opinion on the subjects of web architecture, usability, and standards, I need your help! I am doing a research paper on the arguments in favor of having large enterprise organizations develop policies for the following issues:

  • Implementing and enforcing a standardized user interface for an enterprise web presence.
  • Developing an enterprise web information architecture.
  • Developing and enforcing a web style guide.
  • Enforcing web standards (i.e. valid XHTML, CSS, DOM scripting using ECMAScript standard, etc.
  • Usability and accessibility issues (Section 508, case law, etc.)

Broad category? Yes. But hey, it’s easier than writing about how to curb global population growth or global warming. I’m trying to positively influence the world through better enterprise web strategy. My goal is to bring standards-based web design out of the sidelines and fully into the mainstream at the enterprise level. I think the case has been made clear for small web infrastructures and web 2.0 plays, but the enterprise still lags in this area and it is a far more challenging problem due to the information and organizational complexity of such behemoths.

I need your help! If you have any suggestions, opinions, recommended books, citations, essays, or good URLs to post, please let me know in the comments! Any opinion on this topic is welcome.

Thanks!