Updated flexible design inspiration

I just updated my post on sites to explore for liquid and elastic web design inspiration. Web sites are constantly being redesigned and added to, of course, so I intend to keep updating the original post periodically. Please check it out, and post in the comments there if you have other resources you think we should all know about.

A new addition

You may have noticed that this blog is not frequently updated. This used to be because I was working on my book. Now, it’s because I’m a mom. On December 21, I gave birth to my first child, a daughter named Asha.

Asha Mickley Gillenwater

Asha Mickley Gillenwater

Once we’re out of the newborn fog a little bit more, I hope to get this blog cranking again, and I’ll be posting much more frequently than ever. In the meantime, happy new year!

Flexible Web Design is out

My book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, is now out! It doesn’t appear to be in brick-and-mortar bookstores yet, but you can buy it online.

If you want to learn more about the book, check out the Flexible Web Design companion site. You can download the example and exercise files from the book as well as some sample content.

(By the way, I’m having my first baby any day now, so please be patient with me regarding site updates and responses to email. I’ll be back to the world of the living soon enough!)

Living, breathing design comps

In my book Flexible Web Design, I give lots of reasons why liquid/elastic layouts make sense. While this will hopefully convince you, the designer, to give them a try, it’s not necessarily going to convince your client that a flexible layout is acceptable for his or her own site—especially if you present comps to your client as static images created in Fireworks or Photoshop. Andy Clarke makes a great argument against presenting clients static design comp images because they set up expectations in the client’s mind that the design is always going to look exactly that way, instead of varying based on the user’s browser, text size, installed fonts, monitor colors, etc.

While Andy’s proposal doesn’t just pertain to the design process for flexible sites—he seems to advocate it for all types of sites—Andy does ask:

Is the fact that so many web pages are fixed width and centered a direct result of clients signing off fixed width design visuals?

I’m willing to answer yes to that question. Not that this is the only reason fixed-width designs get created, but I’m sure it plays a role in many of them. As I talk a great deal about in my book, as well as the presentation I’ve made at a couple conferences lately, you can’t build a flexible page unless you’ve designed it to be flexible in the first place. You may design a page that must be fixed-width inadvertently, and won’t catch it until you go to build the page in (X)HTML and CSS. But if your client already signed off on the design when it was a static image, it’s now too late to change the design to make it liquid-compatible. Forcing yourself to build at least a rough version of the page before you present the design to the client is a great way of checking if your design is truly flexible-friendly. If you find that it isn’t, you can make design changes to avoid CSS headaches later.

A lot of the commentary surrounding Andy’s proposal has been that building pages for clients will take a lot more time that isn’t in the budget. I think this is a valid argument. But, I also agree with the arguments that this workflow method can actually be a time-saver—or at least that the extra time spent making the (X)HTML/CSS comp can be made up later. Andy says:

As I work almost as fast in markup and CSS as I do in Fireworks, I find that the overall time that I take designing and implementing that design is dramatically reduced as I am not duplicating work. It leaves me free to spend more time on fine tuning a design and I’m sure that my designs are all the better for that.

I’m right with Andy on this one. I’ll spend a lot of time futzing with the perfect border color or the perfect amount of spacing under a heading; when it comes time to build the page, I’ll have to do all that futzing over again in the CSS to find the perfect em measurement, for example, that matches the spacing I created in the Fireworks comp. It’s often faster for me to just leave all the work on these design details to my CSS development stage.

Another argument for time-saving comes from Kyle Weem’s response to Andy’s original post:

…you can absorb that extra time spent in the budget that would have been wasted on extravagant solutions generated to create identical rendering where it need not exist.

Another argument I totally agree with, especially if you are trying to create flexible designs. When you build the (X)HTML/CSS before showing to the client, you catch things in your design that are going to be tough and time-consuming to build—either because you’ve designed them in such a way that you can’t make things flexible, or it’s just going to take a lot of hacking to get it looking the same cross-browser.

All this said, this method of showing (X)HTML/CSS pages to clients instead of static design comps is not something I’ve actually done (though I do sometimes show wireframes before design comps). But as someone who primarily designs liquid layouts now, I can see it being really beneficial to the way I work, and I’m definitely going to give it a try soon.

Revised presentation slides available

On September 10, I presented Designing CSS Layouts for the Flexible Web at the National Association of Government Webmasters 2008 Annual Conference. This was a slightly revised and lengthened version of my presentation from the Voices That Matter conference.

The slides PDF has quite a large file size, due to all the graphics in the PowerPoint, but I didn’t want to compress it very much and have all those graphics look distorted.

Designing CSS Layouts for the Flexible Web (PDF, 6.9 mb)

Should web designers build their own pages?

There’s a recent debate in the web design blog world about whether web designers—those who create the actual visual designs in Fireworks or Photoshop—must or should know HTML and CSS. I suppose the actual thrust of the debate is whether it’s necessary or desirable to use Fireworks/Photoshop at all as part of the web design process—but I’d like to focus on this little sub-debate of designers knowing how to write HTML and CSS. Is it necessary?

My answer in a nutshell: Ideally, yes.

I’ve been lucky enough to always design the pages that I build. I’ve worked at a design agency, as part of in-house design teams, and freelance, but never have I had a separate designer create comps to then hand off to me to build.

I call myself lucky in this regard because even though I’ve never experienced this design process firsthand, I’ve seen how frustrating it can be for other web designers. (Note that I said “can,” not “is.”) When the visual designer doesn’t know how to actually build web pages, he or she frequently designs in elements that just don’t work well on the web. Either they’re things that cannot be built with HTML and CSS—such as elements that depend on an exact font size—or they’re things that can be done but are either difficult or unwise to implement, due to current best practices in the areas of standards, usability or accessibility.

It’s been my experience that the more experience a designer has actually building web pages, the more successful he or she is in designing interfaces and graphic elements that work well with its strengths and constraints. That doesn’t mean that every designer should build his or her own pages; it’s fine to have a division of labor, and I’m sure it’s actually the smartest process in many teams. Nor does it mean that the designer has to be an advanced HTML or CSS developer. It simply means that the designer ought to have some idea how to build the page if he or she really had to.

Mark Boulton argues in his post “Design isn’t about tools” that “knowing how to build things in HTML/CSS limits your creativity.” I see his point and think it’s a really good one. We all have to be careful to not just keep designing things the same tired way because we’re used to building things a certain way. It can be a really positive, fun experience to drop a print designer into your comfy design nest to force you to consider new design possibilities, even if you can’t use them exactly as-is on the web.

But at the same time, it’s unrealistic to think that you can design without the constraint of any tools. At the Voices That Matter conference I was just at, Jason Cranford Teague gave a presentation on web typography in which he said that design is about constraint—working within it as well as overcoming it—and that if you want to work without constraint you’re an artist, not a designer. I think this applies to the question of whether designers should feel constrained by HTML and CSS, and I think the answer is yes. Architects don’t have to be qualified to build houses, but they have to have some idea of what construction techniques are possible, the physical characteristics of the materials they’re designing with, general physics, etc. They can’t just design buildings without any knowledge whatsoever of how they will ultimately be built.

Mark uses a print design analogy to ask “do print designers need to know how to build a press?” This analogy makes no sense to me. It’s like asking if web designers need to know how to build a browser, or a computer even. Of course not. The real question is “do print designers need to know how a press works”—and the answer to that is an emphatic yes. They don’t need to be qualified to actually operate a press, but they need to know the limitations and strengths of the printing press they’re work is going to be produced by. Print production processes are a pretty important part of the curriculum of any good graphic design program. (That last sentence had a lot of p’s in it!) Print designers need to know practical things like not to design important info within 1/8″ of the edge of a piece, not to run something that must be matched up perfectly across the fold of a multi-page book, what type of paper they’re going to be printing on, etc. I suppose you could call this being constrained by your tools—but it doesn’t necessarily follow that that’s a bad thing.

(On a little tangent, I applaud Jon Hicks for pointing out during this whole debate that Fireworks is a better tool for creating web comps than Photoshop. I switched to Fireworks for web work almost five years ago and can’t imagine going back.)

Voices That Matter slides available

The slides from my presentation Designing CSS Layouts for the Flexible Web at the Voices That Matter Web Design Conference are now available to download. It’s a pretty big file, due to all the graphics in the PowerPoint, but I didn’t want to compress it very much and have all those graphics look distorted.

Designing CSS Layouts for the Flexible Web (PDF, 4.8 mb)

Inspiration for flexible web design

This post was last updated April 2009

Flexible web sites—sites that are liquid or elastic—have the unfair reputation of being ugly and plain. There are certainly lots of flexible sites that fit this stereotype, just as there are tons of ugly fixed-width sites. But flexible design doesn’t have to be unattractive. There are lots of really beautiful, graphically rich liquid and elastic web sites, which are all the more impressive to me because of the extra skill it often takes to pull off these graphic techniques in a flexible environment.

Here are some web design galleries that showcase flexible design:

No Resolution
This is an entire site devoted to showcasing liquid and elastic designs. Unfortunately, you have to register to submit entries, so things have been slow lately. Still, lots of great stuff in the archives, and new additions from time to time.
CSSGlance, liquid layout category
CSSGlance categorizes all entries as fixed-width, liquid, or elastic, which is really nice. They have a pretty good collection of liquid layouts.
CSSGlance, elastic layout category
Only a few things here, but elastic layouts are pretty rare in general, as well as hard to recognize with only a glance.
CSS Drive, liquid layout category
This category seems to have been mostly forgotten about recently, but it does have a good collection of liquid layouts from 2007 and earlier, and new entries do show up occasionally.
Unmatched Style, entries tagged as liquid layout
A very small collection of liquid layouts that is very rarely updated, but I include it here in case it takes off one day. Let’s hope so!

I keep my own collection of designs I find attractive and inspiring in del.icio.us. I have a number of liquid layouts saved as inspiration, as well as a few inspiring elastic ones. I’ll point out a few of my favorites:

View more posts: