“It’s 120F. The stink radius of the porta-potties is 150yards.
There’s a porta-potty every 140yards = nowhere is safe.”

I quickly replied with the image below and this note: “Your logic here isn’t entirely accurate. To illustrate, I’ve created the following infographic.”

…and then I realized I made a major geometry fail (radius, not diameter!) and posted the following correction:

New to SXSWi this year is the concept of workshops. With the huge scope of interactive programming at the festival, it’s sometimes difficult to find talks and panels to attend that are relevant to your specific interests. Once you have determined which talks you want to attend, they’re often located on opposite sides of the massive Austin Convention Center. Workshops will help alleviate some of the selection woes and hallway sprinting by offering 3 consecutive talks on a given theme in the same room.

As an attendee, I’m excited about this concept, but I was even more excited when they asked me to choose the programming for a “Beautiful Web Design” themed workshop. The lineup for the workshop, which will take place in Ballroom E from 2-6pm on March 12th consists of 3 talks I wouldn’t have missed and if you’re going to be at SXSW, you won’t want to miss them either:

• Beauty in Web Design
  Cennydd Bowles, UX Designer at Clearleft
• Get Stoked on Web Typography
  Samantha Warren, Web Designer at Phase2 Technology
• Simple Steps to Great Web Design
  Matthew Smith, Principal at SquaredEye

I’ve created a promo site for the workshop at http://sxswdesignworkshop.com and you can RSVP for the event on Facebook. It should be a great way to kick off SXSW this year, so be sure to get your badge early and book it to Ballroom E by 2pm! Seeya in Austin!

I just read the July issue of Laptop magazine and Mark Spoonauer (editor in chief) said that netbooks are here to stay. With this trend do you think the 1024×768 res will be reduced to 800×600 to capture this growing market? The mobility and internet access makes me think twice what would be the more popular resolution. Do you have any of the latest numbers? – Maria

Here’s what I replied:

“That’s a great question. I personally would not revert to designing sites to fit within an 800×600 resolution unless the website or app I was developing specifically targets the Netbook or mobile demographic. On the flip side to that argument, w3schools reported that as of January 2009, 93% of web browsers had a resolution of 1024 or higher with 57% being higher. Last year, they reported that only 38% of computers had a resolution higher than 1024 x 768. Even with that increase, I still default to designing sites at 960px wide. From what I’ve seen, 960 is still the industry standard because it fits within 1024 and is divisible by so many potential grid widths. (See: http://960.gs/ & http://www.cameronmoll.com/archives/2006/12/gridding_the_960/ ) While this does mean that visitors with an 800×600 resolution will see a horizontal scrollbar, the actual content of most 960px wide sites does not stretch the full width of the site and should still be readable without scrolling.”

Is it really that simple?

After sending that reply I started re-thinking my answer. While I don’t have a netbook, I know they’ve become insanely popular over the last few years and I’ve seen them take the place of big, bulky laptops at conferences and coffee shops. Should we be catering to this growing market? If so, what exact resolutions are we dealing with. After doing a little research, I discovered that most netbooks have a resolution of either 1024×600 or 800×480. Sweet, 1024 should display my 960px sites just fine, but…Eight hundred by four eighty! In Firefox with all my toolbars and status bar turned on, I’ve got over 150px of vertical chrome – that would account for about 30% of the 480px height. Yikes! Would anybody really ever buy a computer in 2009 with a screen resolution of 800×480? If so, they might as well just get a smart phone.

Let’s take our research to the Amazon, shall we?

Amazon.com has exactly 221 netbooks available from 11 different manufacturers. What matters most to me on this matter is what’s selling. They have 100 netbooks listed in their netbooks bestsellers list. I browsed all the way down to #50 and didn’t find a single product with a resolution lower than 1024×600. I even found a few with resolutions up to 1366×768. If people really do buy netbooks with an 800×480 resolution, they are the minority…and they’ll just have to work that horizontal scrollbar.

What do you say?

Is anyone out there giving love to those poor 800×480 users out there? …all 5 of them.

I’d like to see night-mode as an option for online mapping. I know that customized embedded maps are possible by overlaying tiles as described in the APIs of Google/Mapquest/Yahoo and the recent ALA Article. I actually like the fact that this is a little complicated to implement because the average user shouldn’t have the power to tweak standard base map colors – think MySpace profiles <shudder />. However, if you own a vehicle GPS, it probably has a day and a night mode. In night-mode, the color of the map tiles are inverted to decrease the brightness of the screen for nighttime driving. Why is this a necessary feature for online maps?

1. To embed on websites with dark backgrounds. – Embeddable interactive maps are a huge asset to website developers and Google has made these very easy to implement. If you embed these maps on a sites with dark backgrounds though, you’ll create quite a visual magnet due to the sharp contrast of the light colored maps. While an inverted map may not mesh exactly with a website’s color scheme, the reduced contrast would make an embedded map much easier on the eyes.
2. For nighttime users of the mobile web. – While I don’t have an iphone yet, I would love to have one simply for access to Google Maps. Imagine if Google Maps on the iPhone (or even the entire interface) could automatically switch into night-mode at dusk like a vehicle navigation system.

Seems obvious and increasingly necessary to me. To demo what this might look like, I’ve set up a simple HTML mockup – with a dark background of course. What do you think?

Update 4/5/08: Apparently while I was cheering on my wife, sister-in-law and friends at the BridgeRun, my site went naked a bit early. Thanks to the person who let me know about my preemptive nudity.

Update 4/2/08: Ok folks, show’s over, move along. WHAT? You really want the 90s April Fools version back? Just go back to the homepage and select “1998″ from the dropdown on your right.

I couldn’t exactly encourage you all to get experimental last week without doing something a little off the wall myself. If you saw me speak at SXSW or at the Webmaster Jam Session, you’ve probably seen this version of my personal site straight from Geocities in 1998:

Inspired by Cameron Moll’s classic suggestion to steal from my own work, I’ve extracted the late nineties flare from the above design and injected it into my current site. Rather than starting with a clean slate on this site, I thought I’d update (or revert in this case) the CSS alone. Yes that’s right folks, the glorious design you see before you was possible simply by swapping the stylesheet. I was tempted to bring in the good ole’ blink and marquee tags, but that would have violated my self-imposed rule of not touching the existing HTML. I hope you’ll find that the site is still quite functional. You can even swap the stylesheet back to the original default by returning to the homepage and selecting “Contemporary Home” from the dropdown in the sidebar.

For those of you who are suddenly inspired to redesign your own sites – Really now, who isn’t? – I’d like to encourage you to check out my book: “The Principles of Beautiful Web Design“. I’m sure my tips about layout, color, texture, type and imagery will be just the help you need to tweak your own website design into something of this level.

I believe my work here is done. I’m gonna go rummage through the attic now to see if I can find my Garbage Pail Kids stickers, Soap shoes, Hypercolor shirt, pogs, and slap-bracelets. Peace!

In the words of Levar Burton, “Don’t take my word for it!”

For the last few years, it seems the web-design community has been in a bit of a rut. I’ve seen a lot of unique design flicker through the CSS galleries, but we (myself included) have been relying too much on cozy conventions. We know the principles of beautiful design, but we’re too stuck on standard site structures, browser limitations, and popular opinions to really put those principles to test. It seems the times they are a changing though as Bryan isn’t the only high-profile blogger pushing the envelope:

• In January, Dan Cedarholm realigned with a gridlastic (grid-based, but scalable) version of his current site design.
• Then, in February Jeff Croft unveiled a redesign consisting of brown, pink, and yellow. While that isn’t a color combination I recommended in my book, he pulled it off and it looks great.
• Finally, Nathan Smith created a whole new CSS Framework in response to a personal “design itch”, and has announced that he’s using that new framework in his latest redesign.

That’s by no means a cumulative list; I’m just saying that exciting, industry-changing experimentation is coming back into style. I’ve personally had the redesign bug crawling around on my back for over a year now, but the desire to do something “different” has been keeping my mind churning and my hand from moving. Recent redesigns like Bryan’s are definitely fuel for the fire, and I’d love to see this glimmer of change flame up into a revitalization of the personal website. I think it’s time for us all to take a a step back and realize that, “We are the music makers, and we are the dreamers of the dreams!”

Click the images to see full-size versions in Flickr.

The Design Process

Hand-Scribbled Calcite Pro

One-Color Vector Design

T-Shirt Preview & Official Entry

With that said, I’m not some design prodigy. I just learn as much as I can and apply it to what I already know. I like to think I’m becoming a better designer every day, but even though I wrote a book on the subject, I still don’t consider myself a guru.

Somehow though, I tend to get a lot of emails like this one:

Hey Jason,

I was wondering if you could help me in my quest to make my website look better. I’m designing a website for my scout troop, I’ve got the design done, I’ve just got to make it look good. This is where I get stuck. I’m not very creatively minded, so if you could give me some pointers I would be very grateful. If possible id like to get my groups colours into the design, which are yellow red and blue, but that’s going to be hard. Somewhere in it id like to have the scout logo, but I’m at a loss of how to implement these design ideas. Any tips would be very much appreciated!

John Doe (Name changed of course…)
(website url removed)

P.S. Don’t look at the css unless you would like a heart attack – its still coming from the design phase – its all there and working, I just want to make it look good before I start to clean it up.

P.P.S The Scout logo can be found at: (url removed)

P.P.P.S This email is just a last ditch effort to make my website look good, I don’t really mind if you delete it!

Although he said I could just delete his email, I never do. I always take the time to reply, but I tend to write something similar every time. Here’s what I wrote this time:

Hey John,

Being a scout leader, I’m sure you’ve heard the old proverb “Give a man a fish and he’ll eat for a day. Teach a man to fish and he’ll eat for a lifetime.” For that reason, I try not to give advice on “how to fix your particular design problem”. Instead, I try to get people to understand the design process so they can do it themselves. My general advice is to ignore the working website, start on paper, and work up a layout concept. Don’t worry about the colors, just try to find a good location for the scout logo, the nav, the content, any subcontent, etc… Once you’ve done that, try to think about where you can work in some of those colors and some decorative textural elements. Open up whatever graphics program you have available (be it Photoshop, Fireworks, MS Paint, whatever…) and create an image of what you want to make the website look like. If you can’t create it visually, you’ll never be able to make it work in HTML and CSS.

If you haven’t already checked it out, the book I wrote for Sitepoint is basically a detailed explanation of the process I described above and I think it may be just what you need:

The Principles of Beautiful Web Design
http://www.principlesofbeautifulwebdesign.com

Best of luck with this and future projects,
Jason Beaird

I’m posting this here for two reasons:

1. So I can point future design-help requesters here instead of writing the same thing over and over again.
2. To emphasize the need for more introductory design resources and tutorials.

I know there are tons of good resources out here on the web, but novice and wannabe designers have to sift through a lot of crap to find good, solid advice; especially within the personal blogs of designers like myself. I treat this website more like a personal journal than a design resource. I guess that’s because putting my thoughts in a textbox is a whole lot easier than planning out design tutorials. There are a lot of designers out there (like Veerle) who are constantly writing fresh, new tutorials but posts like that are few and far between here. I hope to change that here in the future, but in the mean time, I’ll probably keep pointing people to my book.

If you look really closely, you’ll see something other than a Hoodia patch plastered over this tummy:

Yep, it’s a watermark. And now that I know which stock phography site they stole the image from, it’s not hard to find the source image.

While Shutterstock operates on a membership fee rather than a pay-per-image model like iStockphoto, their prices are far from expensive when you compare them to traditional stock photography. I guess the moral to this story is pay for your stock images. Getting rid of the watermark isn’t the REAL number one reason to paying for good photos, but it will certainly keep you from looking like a cheapskate. If you don’t do enough design work to justify $199/mo for a membership to Shutterstock, then go to iStockphoto. If you can’t afford to pay $1/photo, check out stock.xchng, but don’t steal images.

Our shiny new Adobe Creative Suite 3 boxes arrived here at work yesterday and we while Micah was upgrading, something about the installer menu art immediately caught our attention. I’ll leave it up to you, dear reader, to let me know what you see in this image.

As far as I know, nobody has posted anything about this yet. So, just to be sure I wasn’t making a fool of myself, I asked a few random people what they saw in the image before posting this. Five of the eight people who I’ve asked so far immediately saw it. One person said “a crayon?“, but once I beat around the bush a bit, the universal response was basically “now I can’t NOT see it”. I guess what I’d really like to know is whether the designer knew what he/she was doing and how this got slipped in as the background image on the CS3 installer.

Still don’t get it? Click the image to see the original size.