Web Design Archives

Time Magazine prematurely posted a list of the 50 best websites for 2007. I say prematurely for two reasons:

1. 2007 is far from over
2. Bust Out Solutions is still developing our niche social networking website that will launch later this year

Either way, cast your vote. There are some good ones in the list for sure!

Smashing Magazine has done it again, with an article that lists over eighty AJAX solutions that include widgets, tool sets, libraries, and effects. I know the list is a bit overwhelming, but if you’re a professional web programmer I recommend at least trying out 5-6 of the listed solutions. For a quick highlight list, just go to these sites. I’ve used these tools extensively and find them to be very useful:

• script.aculo.us
• Lightbox
• MooTools

In my recent experience with designing business applications, there’s a natural tendency amongst many programmers to create complex user interfaces to solve complex business problems. The approach that I have been taking in designing applications is to start with the business problem, and, with my limited knowledge of how these businesses actually run, distill the problem down to it’s fundamental elements. Usually this process involves dumbing myself down (hold the jokes back) in order to eliminate and ignore all the complicated business requirements that tend to get in the way of clean interface design. Oftentimes during this exercise I can even simplify the way the business operates by giving them my watered down version of their process and showing how it still fulfills their requirements.

Technically, this has little to do with software design and a lot to do with business process analysis. By approaching application design with a laser focus on the business process you ultimately end up with several benefits:

1. You create software that directly addresses a business problem. No frills.
2. With a preference for clean, simple user interfaces, I do everything I can to simplify the business process, which ends up making everybody’s life easier.
3. Simplifying business process leads to simple user interfaces. Nothing goes on the screen unless there is a direct and deliberate need for it. I mean it.
4. Simple UIs means faster ramp-up time for new users. Only your dumbest employees will need to read the instruction manual. Everybody else should be up and running in no time. Joking. I’m sure you don’t have dumb employees.

Congratulations to all the folks over at Shopify for being chosen as a finalist for the Webware 100 Awards. Based on our recent implementation experience, I think the distinction is well-deserved. We’ll be sure to cast our votes.

We recently launched an e-commerce section of the Point Clinic website. Play handled the graphic design and photography, and Bust Out Solutions implemented the e-commerce functionality. We used Shopify, a Ruby on Rails e-commerce engine built by the folks at Jaded Pixel. Shopify allows you to create a full-blown e-commerce store in literally a few minutes if you use one of their pre-built templates. If your company is like Point Clinic and has a specific look and feel to your website, Shopify provides a template engine called Liquid that allows you to create custom designs. The learning curve for Liquid is rather shallow so I was able to run through several design iterations with Play.

Shopify also comes with an impressive admin interface that allows users to maintain items and item attributes, set stock on hand, create collections, set promotions, define shipping and handling rates, manage orders and backorders, track demand, and even create a blog. All basic retail functionality is available via the Shopify admin pages, giving you full power to run your online store.

We’re now offering Shopify design and engineering services to anybody who wants to get a relatively cheap e-commerce site up and running in no time. Contact us if you’re interested in hearing more.

If you’ve ever worked with images files in Photoshop or Illustrator, you’ve probably experienced some frustration in getting your colors to look right in a web browser, especially on Apple computers. If your images appear washed out or de-saturated, follow these simple steps to fix the problem. Special thanks to Andrew Bessler at Play for the tip.

Once you get the color how you want it Photoshop:

1. Select “Edit→Convert to Profile” in the menubar and change Destination Space Profile to “Color LCD”. (IMPORTANT: Don’t use “Assign Profile” to change the image profile to Color LCD — this will desaturate your pretty, pretty colors.)
2. Use “Save to Web” to export your jpeg.

Here’s an example of the difference. The first file looks washed out whereas the second image should retain it’s brilliant, saturated colors across browsers and operating systems.

Uncorrected

Corrected

One of the most common web design techniques is to add small icons next to hypertext links to give the user some visual indication of what the link does. A common example is to put an envelope next to an email address. There are a few ways of doing this, and with a bit of attention to detail, you can achieve a very nice effect. Let’s look at the most basic way of doing this first:

   
   you@yourdomain.com

The result, without any style:

you@yourdomain.com

Clearly the text needs coloring. A slight tweak in the css give us a color palette that is a bit more pleasing and a simple rollover effect:

a:link, a:visited {
   color:#399DCF;
   text-decoration:underline;
}

a:hover, a:active {
   color:#333;
}

you@yourdomain.com

As you can see, the image and the text aren’t quite lined up vertically, and and in non-IE browsers it looks a bit sloppy with the underline extending underneath the icon. In order to correct these problems, let’s change the markup to remove the image tag and add a class to the anchor tag:

   you@yourdomain.com

The rest is handled by CSS. We give a little left padding to the link and fill that space with a background image that is vertically aligned in the center of the line.

a.email-link:link, a.email-link:visited {
   padding-left:18px;
   background:url(/images/email.gif) center left no-repeat;
   color:#399DCF;
   text-decoration:underline;
}

a.email-link:hover, a.email-link:active {
   color:#333;
}

We now have a clean rollover underline effect and a link with a clickable icon that is aligned properly.

A lot of people ask me what tools I use to build websites, so I thought I’d share with you my basic arsenal of development applications and services that I find to be most useful. When starting a website from scratch, you need to find a domain name, register it, build a website, and then host that website somewhere. Here is a description of what I personally use to get the job done.

Because of its simplicity and ajaxification, I use instantdomainsearch.com when looking for a domain name. I use GoDaddy to register domains and manage DNS for no good reason other than I’m lazy to switch. So far, so good, and the prices are reasonable ($8.95/year per domain). As for hosting, I’ve used several good companies, yet not one is perfect. Dreamhost is the biggest bang for the buck ($7.95/month for shared hosting) while MMMultiworks offers great customer service for mission-critical Rails applications (~$300/month for a dedicated server). Network Solutions has horrible customer service but is technically reliable, Planet Argon is not bad for cheap Rails hosting, and Total Choice Hosting is a waste of your time.

To develop simple sites, I use the code editor in Adobe Dreamweaver. I rarely ever use the WYSIWYG editor, only because I like to have full control over the structure of the markup and CSS. For image processing I predominantly use Adobe Fireworks, but when working with graphic designers I tread water with Photoshop and Illustrator. Iconfactory’s xScope is absolutely indispensable when measuring, aligning and inspecting on-screen graphics and layouts. For all my FTP needs, I use Transmit. By the fact that I use xScope and Transmit, you can guess that my machine of choice is a MacBook Pro. I use Parallels Desktop for Mac extensively for platform testing in Windows, because as a web developer you can never underestimate the stupidity of Internet Explorer.