Schema Let's talk web design Mon, 02 May 2011 22:29:00 GMT Tennessee Vacation This is an oldie, but a goodie, and I would be remiss if I didn’t include these sites. That’s right — this is more than one site — a family of sites that fall under the Tennessee Vacation banner. The credit of these sites go to designsensory for the design and the Tennessee Department of Tourist Development for the foresight to embrace the web.

Main Site

The latest iteration main Tennessee Vacation site has been around since at least 2007, if not longer. For a three-year-old site it still manages to look fresh and relevant for the user. The design takes a photo-realistic approach, and I think it works. It actually makes me want to go to Tennessee! The presentation is arguably cluttered but perhaps intentional; it makes it look like there is a lot to do in the Volunteer State.

Tell a Story

Seasons in Tennessee Fig 1. Seasonal Sites.

The main site does it’s job well, but the site takes it further. Almost every quarter, designsensory comes up with a new design for one of their four seasonal subdomains. Every redesign is a fresh take, and really deserve more attention from the design community at large. Take, for example, this spring’s seasonal site. The site tells me that Tennessee is beautiful in the springtime, and that there is much more do to than just country music. Extra brownie points for using the slogan (Think Spring. Think Green. Be Seen) as the navigation.

It’s Not Flash!

Yet another site that shows Tennessee is light years ahead of other states in the tourism web department is the Tennessee Trails and Byways site. Head on over and you’ll find a site taking full advantage of JavaScript to create a parallax overlay of trails across the state. Designsensory was told to “have fun with this one”, and make it “memorable”. The result really is a fun site — not only does it introduce users to new trails, it takes the experience into Facebook and allows the community to contribute resources that make hiking there even better.


The main goals of the site was to attract visitors to the state. I think the design has achieved that by telling an attractive story, tied together by consistent design and content. Now I don’t have any statistics to show whether it has helped tourism, but if Google is any indication, it has done its job. As of this writing, the Tennessee Vacation site ranks number 1 in a search for “Tennessee”.

Tennessee may not be the first thing that comes to mind when people think about US states. But the Tourism Department has shown that they are serious about the web, and that’s something other states should look up to.

]]> Fri, 16 Apr 2010 16:16:44 GMT David Sutoyo,2010-04-04:dedfd8c3494ee973c846987e7d0a11de/4082f917c38ffef2fda481c4272b7d4a
Learning Web Design Online [1] One of the best things about web design is the low barrier of entry. It’s a double-edged sword, to be sure, as recent discussions have centered around the amount of noise in the community. “Listicles” and round-ups are thriving on the web, so what are we supposed to do?

Increase the Signal, Filter the Noise

I see at least two ways to this. The first and more difficult approach is to write good content yourself. The second is to find and link to high quality content from your blog. For those of you who’ve dug around the site a bit, you may notice a links section. The intent of the section is to link to “classic” blog posts about web design — those articles that helped you learn and discover timeless principles. There are some links to code as well, and those prove to be more difficult as code techniques change with time. But this is the goal — to create a list (gasp!) of articles that we can all benefit from. If round-ups are getting all the attention, let’s give high quality content a boost with some link love.

Suggestions, Please

Please do point me to more of these kinds of articles. Surely I’ve missed plenty of them, and the section will be an ever-growing collection.

Hopefully I’ll have enough to name the section “100 Articles to Make You a Great Web Designer.”

Just kidding.

]]> Fri, 09 Apr 2010 16:22:40 GMT David Sutoyo,2010-04-04:dedfd8c3494ee973c846987e7d0a11de/3818ed08e967378ae4ee34fc93a9660c
960 Blue: a 960+Blueprint Mashup As mentioned in my last post, I created a framework mashup using 960 and
Blueprint. It’s only appropriate that I place it in our Share section.

Custom frameworks via 960 Blue is possible via SASS 3 and Compass. For Mac users, to install SASS 3, type this at the command line:

gem install haml --pre

and follow these directions to install Compass.

With that, you can several parameters for the grid in _base.scss:

  • site width
  • number of columns
  • column width (without paddings and margins)
  • column padding
  • column margin
  • line height
  • default fonts

Unfortunately the code does not check that your math adds up, so do some planning before you generate! The syntax is based on SASS 3 and is not compatible with previous versions of SASS.

]]> Thu, 08 Apr 2010 16:48:14 GMT David Sutoyo,2010-04-08:dedfd8c3494ee973c846987e7d0a11de/10edeaa8bd111faff72d511c5b0d5c9c
Customize Your Grid...and Your CSS Framework Grids, long a fundamental principle in print design, is now widely accepted and used in web design. Easy implementation of grid is partly the reason CSS frameworks have been created and gained their own popularity. For this article, I’ll leave the debate of whether to use frameworks for another time, and instead focus on two issues that arose from that conversation. First, many have criticized that frameworks often become crutches for inexperienced developers. The second is that frameworks encourage boilerplate grids and can stifle creativity. I do agree with these two points, to some extent. The matter of fact is that there will always be inexperienced coders looking for a quick solution, and if they’re not using CSS frameworks they’ll just as likely turn to layout generators and the like. I feel the important task is to educate designers to understand why and how they are using frameworks, and a first step to that is to encourage them to customize the frameworks they are using.

Why Customize?

There is already plenty of creativity to be had in the standard 12-, 16-, 24-column layout using 960 pixels. Good design is not hindered but instead can thrive under these constraints, but there are plenty of situations that can benefit from the use of different widths and a different grid. Furthermore, most of the CSS frameworks I’ve come across don’t include padding in their grids. In Khoi Vinh’s classic presentation on grids he said:

What happens when type needs to be inset inside a box?…The answer is to assume some sort of inset for all elements.

Text with inset using grids with no padding vs with padding Fig 1. Text with inset using grids with no padding vs with padding. Columns are in red with the padding in blue.

It seems like a common practice these days is to inset the type, but at the same time shrink the box. The result is that type inside and outside the box don’t line up (see Fig 1, left side). That’s not necessarily bad, but what if you do want the type to line up? Of course, there are many ways to do this (including a 960 plugin I’ve written about before), but one way to implement this is to actually add padding to your grid (blue bars in Fig 1) and in this example I also decreased margins a little bit. Integrating this with your grid framework saves the trouble of writing workarounds, and for other purposes works pretty much the same as a grid framework using no padding.

Of course, there are more benefits to customizing your framework than just grids. Blueprint provides a fantastic starting point for typography, but obviously their typographic choices do not fit every single design project. Actually, no framework fits every single design project; therefore being able to customize a framework — or even better, write your own library/framework — is crucial to supporting designs that fit the users’ needs.

960 Blue, a 960+Blueprint mashup

Since I’m encouraging people to customize and modify, I’ve included a link to my own mashup of the 960 Grid System and Blueprint. I love the simplicity of 960, but I always found myself adding more spacing between columns. Furthermore, I liked the typography starting point of Blueprint, so I added the two together to create 960 Blue.

960 Blue uses SASS 3 and Compass to generate customized grids and typography. In code/_base.scss you can set site width, number of columns, column width, padding, and margin, and also line heights to generate a custom grid framework using Compass. For more information, please see the readme.

For completeness sake, I’ve also included in the comments the math used to arrive at the various grid widths. Obviously this is no substitute for actual learning, and to do that, one needs to grapple with the code and gain experience. No amount of quick fix tutorials can take the place of that, because if that were the case, I might as well point you to a list blog.

So go on, live free, and customize away.

]]> Tue, 06 Apr 2010 15:58:54 GMT David Sutoyo,2010-04-04:dedfd8c3494ee973c846987e7d0a11de/c8662b381cc19784fae4397ab2408189
Good Designers Code, Great Designers Build [4] Before I start I must admit I’m unsure about the title. I don’t know if it captures my point, and I am quite aware of the irony that I copied the title instead of stealing it. That’s ok — though I wish to become a great writer, I don’t see that happening soon. Anyway, I hope the title does not detract from the main point.

The debate rages on

The topic of whether web designers should know how to code seems to always be a touchy subject. There is such a range of expertise in our field — you have designers who don’t want to learn code, coders who don’t want anything to do with pixel pushing, and a whole bunch of us in between — and as such you also have a range of responses. As far as I can tell, the general consensus seems to be, why not?

On Learning Code

Personally, I feel that web designers should know how to code HTML at the very least. There is absolutely no reason why any good web designer cannot learn good markup. Mark Boulton said:

A designer who is a fant­astic writer, with a flair for typo­graphy — and an under­stand­ing of con­cepts such as semantics and doc­u­ment struc­ture — is no less of a designer just because they can’t write HTML.

and I agree, but an intelligent designer such as that should have absolutely no problem learning HTML. HTML is the common language of the internet and it is easy. Learn it, there really is no excuse not to. With CSS and javascript, I think opinions start to diverge. I do believe web designers should learn CSS and perhaps Javascript, and I think Mike Kus presents some compelling reasons why they should. And while I believe learning to code is good, learning to build a site is better (hence the title).

Building a Website

What do I mean by building? It’s “understanding the medium,” as many involved in the debate would say. We all (should) know that web design isn’t just about pretty. But what exactly is this medium? Again, Mark Boulton puts it eloquently:

The medium of the web, as far as I see it, is only partly defined by tech­no­logy (HTML being a small part of that). It’s defined by people, by stor­ies, by products.

A great designer understands how to tell a story, knows how to engage the user, and designs the site to serve the content. To do so with great effect — to successfully build a website — in my opinion, requires one to understand the technology on which it is built. A great web designer who understands the limits of CSS, Javascript, and browser compatibility is able to work within, and at times extend, the boundaries of web technologies. What better way to gain that understanding than by coding? Yes, a thorough understanding of the medium makes a great designer, and yes, that includes transient technologies as well as timeless principles. Being ignorant of either one only leads to compromise.

]]> Fri, 02 Apr 2010 04:21:04 GMT David Sutoyo,2010-03-31:dedfd8c3494ee973c846987e7d0a11de/a24c347e170342555e5c7312f0c57a6f