Like many designers, I prefer my computer desktop to stay clean, organized, and clutter free. It’s not a place to hold files or applications, and it’s definitely not a place for a splashy, obnoxious image. Still, the desktop is a nice place to express creativity, so lets not be boring here.

Even though there are many places to get quality, free, minimalist desktop images (try Simple Desktops), I usually roll my own. If you’d like to roll the same way, feel free to download, use and abuse our Free Minimalst Desktops*.

Here’s an initial set to get started with. I’ll add more to spigotdesign.com/desktops/ as I feel moved.

Holiday 2011

The Spigot

Simple Blue Gradient

*Warning: Some of these may contain the Spigot Logo and/or attribution.

It turns out my interior design sense is as clean and simple as my graphic design style. I prefer design that is modern and uncluttered; breathable yet punctuated with contrast.

I’m also a fan of the Macintosh. While I haven’t been using one since 1984, it’s been a big part of my life and career for over a decade.

So when I came across @kottke‘s article on Susan Kare’s sketchbook, and it led me to Susan’s Limited Edition Print site I immediately began making note of all the places in the office these prints would fit.

Here’s a few of my favorite:

Can’t wait to see some of these on the wall.

A Book Apart released Responsive Web Design today and I picked up a copy. I’m excited to get a better understanding of the whole responsive web picture – but I’m especially interested in hearing Ethan’s ideas on flexible grids and images (an area I’m still foggy about).

I’ve read two other A Book Apart releases (HTML5 for Web Designers and CSS3 for Web Designers) and find that they offer a quick understanding of the subject without bogging me down. Definite cover to cover and read again material.

Even though I haven’t finished Responsive Web Design, I’m sure I’ll be recommending it based A Book Apart’s track record. It’s available in both print and digital – including epub, mobi, and pdf versions.

I’ve recently been involved in a project with a company who had interest in my work with mobile design with media queries. Before I began we talked what tools we wanted to use to create clean, lean code that worked across as many devices as possible. I of course suggested using HTML5 Boilerplate as they wanted to use HTML5 tags such as <header> and <section>.

I also suggested that we take a look at an extension to HTML5 Boilerplate called 320 and Up by the supersmart guys at Stuff and Nonsense.

The Designing Up Idea

The idea behind 320 and Up is to design for the tiny screen first to prevent the loading of elements for devices that don’t need them:

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

While this is a noble cause in and of itself, I found that there was another potentially more important reason to do this: It forces a designer to think about the mobile experience first.

Designing upside down inside out and backwards

Designing for User Experience has always been desktop-centric for me. Yes, the mobile web has been here for many years now, but is has always come secondary ( or third or forth-dary). Add in that it’s not been a high priority for most of my clients and it’s no reason my portfolio lacks great mobile examples.

Now that CSS3 Media Queries have gained major browser support, there really is no reason to not design every website with the small screen as the starting point.

Designing for the web has always been like catching a greased chameleon – as soon as you get a good grip everything changes and you’re looking for the elusive lizard on some new technological rock.

Varying screen resolutions, user preferences, and browser inconsistencies are just a few of the variables that have made designing for the web something a little left of eternal. Now that the mobile web has exploded you might as well add all the new screen sizes found on the iPhone, iPad, Android, Kindle, Blackberry, and Netbooks to the crazy mix. In the next few years there will probably be a dozen other new devices that we’ll need to design for. Will the madness ever end?

Responsive Web Design

Fortunately we are blessed with quite a few really smart people in this field. Ethan Marcotte wrote an article almost a year ago for A List Apart introducing the us all to what he called Responsive Web Design. Like all A List Apart articles this one goes in depth into the tools, the how-to, and the why. It’s definitely worth a read (or two) but it basically boils responsive design down to these three elements:

• Flexible Grids
• Flexible Images
• Media Queries.

You could even make the case that it’s just two elements: Flexible Everything and Media Queries.

See it in Action

To see this technique in action, I invite you to take a look at our front page, or our portfolio*. Resize the browser window by dragging the bottom right corner and watch as elements move and re-stack themselves. Look at it on a mobile device and remember that there are not separate sites built for each device.

*Yes I’m a little lame in that I don’t have each and every page of this site set up for this.

Get Yer Resources Here

Smarter folks than I have written clearer and more useable information about responsive web design. I encourage you to get it straight from the horses mouth:

• A List Apart: Responsive Web Design
• Smashing Magazine: Responsive Web Design: What It Is and How To Use It
• Six Revisions: Understanding the Elements of Responsive Web Design

Other Useful Resources

The following resources have been very helpful in making HTML5 and responsive design work for us:

• HTML5 Boilerplate: A Rock-Solid Default for HTML5 Awesome
• 320 and Up: Responsibly Responsive

Media Queries has kindly featured spigotdesign.com in their gallery of sites that use media queries for responsive web design. It’s a great place to go for inspiring designs that use @media in their development. I’ll be writing more about what that means in the near future.

Take a look at the latest, or spigot’s feature page. Click on the love if you like it (Twitter account required).

With the launch of the new spigotdesign.com site I was very excited about the possibilities of using @font-face to spice up the typography on the site. Typekit was to be my weapon of choice here but it turns out that it’s still unusable (for now).

Dejected, I went back to the old web-safe font stack and resigned myself to be ok with it. Then one fine day,  this article, Opera loves my webfont showed up in my feedreader, which pointed me to www.fontsquirrel.com as a way of rolling your own @font-face stacks.

FontSquirrel claims to offer “Only the best commercial-use free fonts” in an “easy to use format.” They’ve gathered what they feel are the best free fonts out there that have been licensed for use commercially on the web, and packaged them up into ‘@font-face kits.’

Each @font-face font kit come with:

• Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• Demo.html and stylesheet.css so you can get going fast

As great as the font kits are, the highlight of the site for me is the @font-face Generator, which allows you to upload your own fonts (provided they are properly licensed) and the system will generate a full kit, complete with all the web fonts you’ll need and the css code. Upload the fonts to your server, place the code into your stylesheet, and away you go!

Cross browser/OS font rendering

The real test is how well the fonts render across browsers and operating systems. I’m very happy to say that the fonts FontSquirrel generates render beautifully in every browser I’ve tested. And that was that, I was a FontSquirrel convert.

What do you think?

These fonts render great on every system I’ve tested, but I’m still interested in what you think. Do the fonts on this site render ok for you? If not I’d love to see a screenshot and a rundown of the system you’re using.

So I got myself a free (hey, you got to try it first, right) typekit account and loaded up my font stack. Plugged in the requisite javascript, aligned the stylesheet code, and crossed my fingers as I refreshed the browser.

As expected, things looked great in Safari. (Ah Safari, how I adore thee). Unexpectedly, things looked like crape everywhere else. Firefox, IE8, IE7, IE6 (Ha HA! Gotcha, I didn’t really check IE6). The text was largely readable, but too many characters looked fuzzy, or had specks of lint stuck in the corners. Opera looked ok, but who uses it? I was confused (still am) as to what all the buzz about typekit was if it wouldn’t even render nicely in Firefox, and prompted me to question the true issue with @font-face.

Briefly, I wondered whether I could live with it. Slightly unreadable text vs some KICK ARSE design! Saying I pondered it briefly is a stretch. No design is worth poorly rendered text. So typekit was scraped and reverted to the fallback stack. And keeping the faith in the Holy and the Mighty became just a little harder.

Then a couple of days later, this article, ‘Opera loves my web font‘ showed up in my feedreader… Read part 2 of this post: FontSquirrel.com saves @font-face.

Much time was spent researching WordPress frameworks, spurned on by the WordPress Theme Development Frameworks post over at Smashing Magazine. My thought at the time was to learn a system that could speed up development time – automation of some of the more tedious tasks. But what I found was worth so much more.

Starting from that Smashing Mag article, I narrowed my targets down to just the most powerful and feature rich from the list. I then ran across a comparison of three of the most popular frameworks at WordPress Tavern. The article provided a nice side by side table of features, and while the decision wasn’t easy, I ultimately settled on Hybrid.

I chose Hybrid for its overall feature list, its insistence on the use of child themes, and most of all, the robust support. There is a $25 annual subscription to the support forums, worth every cent as the developer was there to answer all my silly questions. I say silly because I came to find that before diving into this framework, I knew very little about the true power of WordPress.

Here are some of the highlights of the new system:

• Wigitized sidebar – Gives me the power of drag and drop over sidebar items.
• Widgets everywhere – Before content, after content, footer, and on and on.
• Child theme integration.
• A search function that just works.
• Breadcrumbs.
• The ability to add pages without them showing up in the main navigation (This was always possible, but only by directly editing the theme files).
• A greatly expanded knowledge of WordPress

It also gave me a chance to do a little design reshuffling. I added some things and subtracted some things, but hopefully overall the site is easier to use, easier to read, and for me, easier to maintain.

Over a year later, Safari is still the only browser to support @font-face embedding, but the next versions of Firefox, Opera, and Google Chrome are planning support. Microsoft’s Internet Explorer does currently support @font-face embedding, but only when using a special font format (Embedded OpenType). If you’re a Firefox user and can’t wait for the next release, you can download the version 3.5 beta now, which does support font embedding.

So to prepare for the day when we can enjoy these fonts en masse, I’ve designed the new version of spigotdesign.com using Fontin Sans, by Jos Buivenga of exljbris Font Foundry. exljbris is one of the growing number of font foundries that are beginning to allow their fonts to be embedded.

As a preview of what you could be seeing (if your not using Safari) here’s a screenshot of this site, as viewed in Safari:

Fontin Sans on spigotdesign.com

And for those of you who are viewing this with Safari or Firefox 3.5, here’s what everyone else sees:

Helvetica instead of Fontin Sans

Hopefully in the next few months all this will change, and nearly everyone will get to enjoy Fontin Sans (except IE viewers).

11/07/09 UPDATE: We no longer use Fontin Sans on the site. There are still too many issues with browser support, as well as the resulting load time issues.

For those who liked the site just fine the way it was, check out the link on the home page that will allow you to switch it back (and forth). Give it a click and you’ll be taken back to the dark design, and should remain that way the next time you happen to grace these pages again.

The new design also sports a special font called “Fontin Sans” from font designer Jos Buivenga (Exljbris Font Foundry). Exljbris has allowed @font-face embedding of many of their fonts into websites. Unfortunately, unless you’re viewing this site with Safari, you’ll be seeing good old Helvetica instead, as @font-face support is very thin at the moment. The good news is that the next versions of Firefox and Opera will be supporting it. As for Internet Explorer… well, who knows…

Any feedback would be well appreciated, especially if you find a bug.

This isn’t a showdown

Make no mistake, this isn’t a shootout between templates and custom design. There are very few instances where I’d recommend using a template. Custom design wins every time. This is about why you should ultimately choose to have your site custom built, and the instances where you might want to think otherwise.

Custom website design

Most business owners realize that a custom website is the way to go, as long as the budget calls for it. For posterity, here are a few advantages a custom site has over a template:

1. It’s custom – It’s created just for your business and will not look like anyone else’s. It will help maintain and enhance your brand.
2. Search Engine Friendly – By hiring the right designer, you ensure the site is encoded to enhance your success with search engines
3. Built for your needs – A custom site contains the features that you and your clients are looking for.
4. Scalability – A custom site is built with the future in mind, and can grow with your business.
5. Maintainability – If you are planning on updating the site yourself, a CMS will be a must.

A custom built website provides you with more value for your money over the long haul. It’s an investment into your business that takes seriously the intricacies of the internet and your customers perceptions.

Template based websites

Website templates do have some advantages over custom design. They are very specific however:

1. Lower Initial Costs –  If budget constraints are keeping your business from getting online, then templates should be considered.
2. Faster Development Process – If you need it up tomorrow, a template can help speed the process.

It’s important to note that both these points are easily trumped in many circumstances. A website template may be cheaper in the short run, but long term costs in both maintaining the site, as well as losing customers due to a potentially less than professional perception must be considered.

If you need your site up quickly, remember that the most time consuming portion of web development is the content of a website. If you don’t have your site structure and content laid out in advance, a template based site won’t save you much time.

Custom or Template?

I recommend hiring a professional to build a custom site in all but a few circumstances. The value you get far outweighs the initial costs. That said, if you have a budget of $500 for a website, a template would be a better option. There are some decent looking templates out there that, while not unique, will present your business with a professional web presence.

If you are tempted to try and find someone to build a custom site for $500 or less, be aware of the ‘You Get What You Pay For’ rule. This article about avoiding hiring someone who is less than professional outlines a few issues if you choose this route.

Remember, which ever route you choose to go, owning and maintaining a website is an investment. What you don’t spend out of your pocket will be spent in time and effort. And vice versa.

From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

After reading the article, I may think so too.

After pouring through this Top 12 list of CSS Frameworks, the two that stand out the most are Blueprint and YUI Grids. I’ve boiled it down to these two because of their wide spread popularity, and there are one or two things about each that I really like. Deciding between the two though, will be a tougher pick.

YUI

YUI has quite a few things going for it. The documentation is superb, relative to other frameworks, and they lay out their reasons for structuring their system the way they did. They combat the non-semantic argument by claiming their grid system is a microformat which attempts to define the structure.

The biggest advantage YUI offers is em based layouts. I’ve long subscribed to sizing in ems over pixels and YUI would help continue that.

Blueprint

Blueprint too, has quite a few things going for it, but the Blueprint Grid CSS Generator might be the slickest tool for setting up a flexible grid system that fits your current project. This tool will create a new version of the grid.css file that replaces the standard file downloaded with the framework. It also creates a grid.png file that can be used in Photoshop comps to help ensure everything lines up properly.

The Differences

While both have advantages, they each have shortcomings that the other just happens to overcome. I haven’t yet found a Photoshop template for use with YUI. That may be because it doesn’t use set columns for layout, but some kind of template, or directions for newbies on how best to create one would help.

Blueprint uses pixels to set sizes for layout. This makes elasticity not happening.

Conclusions?

None yet. Daily, it seems I vacillate between the two.

Do you use a CSS framework? Which one, and why?

UPDATE: After trying out both on a recent project, I’ve gone with YUI for the most part, but have swiped a couple of the css files that come with Blueprint, namely the forms.css and typography.css. These give me a nice start on forms and fonts as well as extra control.

UPDATE #2: Frustration with YUI’s stylesheets not being self hosted has made me rethink my choice. Since I’m already using some of Bluprint’s elements, I’ve decided to just use it outright.

UPDATE #3: After discovering Justin Tadlock’s Hybrid framework for WordPress, I’ve pretty much given up on grids all together. Hybrid doesn’t really replace a grid, but it turns out most of my layouts are not complex enough to warrant a grid, and it ends up adding unused elements and needless complexity.

No related posts.

It’s been an on-again off-again search for me, but Dan Benjamin’s article Is Flickr Still “The Place” For Online Photos? got me thinking about finding the perfect online photo gallery solution again… the one that has thus far eluded me.

I’d like a system that is attractive and easy to use, for both me managing, and my friends and family perusing. I should be able to upload photos easily from Aperture or iPhoto, and there should be a community aspect that allows for collaboration and comments. Simple, right?

What about Flickr?

As the title of Dan’s article suggests, Flickr at one time was, or perhaps still is, the place most people turn to for photo sharing. After all they have the ‘community’ thing, with lots of users to intermingle with, and tools that integrate with nearly any system to make uploading easy. They have covered all my above criteria… except for one thing.

The interface sucks. Period. It sucks to browse, and it sucks to manage. Second period.

And now I come to find out from Dan that they strip EXIF data. I never knew I needed EXIF data, or if it’s important, but now that it’s gone, this may be yet another reason to leave Flickr.

I do applaud Flickr for all they have done, especially making the community thing work well, and for a long time (relatively).

What about MobileMe gallery?

I signed up for MobileMe right out of the gate, mostly for the ‘push’ calendars and contacts capabilities. The gallery was just a bonus. It connects seamlessly with Aperture, and uploading couldn’t be any easier. The interface is attractive, and for friends and family, its easy to use.

Managing  my images, on the other hand, is fairly rudimentary. I can create ‘albums,’ but they appear in a long list. The ability to group albums in my own folders would go a long way in solving this issue, but who knows when or if Apple will ever feature this.

MobileMe gallery is also an island within itself. If I don’t send you a direct link to my gallery, you’ll never find my photos. MobileMe suffers greatly from the lack of community aspect.

The real need

I think for most of my friends and family, having multiple places to go to view photos of the kids or our adventures is cumbersome. Why should they have to leave one website (and interface) for another, and then have to figure out how to navigate back when they’re done. Getting people to check up on a site is hard enough, I really should make it easier by keeping it all in one place. But how?

You can see here, perhaps, the beauty of a community like Facebook, a place that allows you to post all sorts of information about yourself in one central place. A place that you know your friends will be checking in on without the need to notify them. No need to send an email, no need for RSS.

Conclusion

Flickr and MobileMe are two galleries I’ve used. Neither one is quite the answer. Neither one serves both my need for a community, and the need to make sharing my life easier for visitors. Facebook is great for what it is, but it doesn’t allow for the deeper conversations that a blog and a full fledged image gallery allow for. And so the search will continue.

What do you use, and why?

No related posts.

Checking the stats for spigotdesign.com today revealed that less than 10% of the visitors here are using Internet Explorer 6. This is great news!

This means we can now officially drop support for this outdated browser, at least on this site. Now that I’ve reached the vaunted 10%, and with newer browsers continuing to improve rendering consistency and support for standards based techniques, continuing to support an aged browser simply doesn’t make sense.

I’ve come to this decision with hesitation, and also relief. I hesitate because I pride myself on designing websites with accessibility and usability in mind. Dropping support for any percentage of users doesn’t jibe with those ideals. I’ve continued on in this decision because I’m confident that while I’m ostensibly ‘dropping support’ for IE6, users of that browser will not notice a difference in how this site looks and functions than it did yesterday. Freedom and relief are what I feel when I realize that I will not have to spend countless future hours, at least when working on this site, on supporting a browser that doesn’t support me.

What does this mean to you?

For most of you it means absolutely nothing. For the 90% of you that are viewing this site on a modern browser (including Internet Explorer 7) – spigotdesign.com supports you. For the rest of you – you don’t have much to worry about either. ‘Dropping support’ sounds so harsh and violent, but I’m really just trying to make a point. I won’t be pulling out my .png fix support, nor will I take out my IE6 specific stylesheet. In fact, you won’t notice any difference from my previous ‘IE6 support’ days. In the future, however, I will not be going out of my way to make sure this site looks as good on IE6 as it does on any other modern browser.

Of course, I will continue to support IE6 for all of my existing and future clients sites. 10% is still a large enough portion of visitors on any site. Completely leaving them in the dark would be counter to our philosophy of building sites that are as usable as possible for as many users as possible.

Some helpful links

Get yourself a ‘modern’ browser

• Firefox
• Safari
• Opera
• Google Chrome (Windows only)

Join in on the IE6 bash

• Facebook Uninstall IE6 Day
• 37signals phases out IE6 support
• Apple’s MobileMe drops support for IE6
• LessEverything drops support (Good explanation on why they’re doing it)

Counterpoints of view

• Stop the Hate – IE6 Isn’t So Bad!
• Actually had a hard time finding any more… sorry.

No related posts.

The old version was drawn in one quick motion and was meant to be a playful representation of the company. It’s served us well for the last 4 years, but we decided it was time to clean it up a little. We’ve smoothed out the curves, and tucked in the points:

old vs new

No related posts.