What We Talk About When We Talk About Design

You tell him I said to take a long unstructured walk around his city. Talk to strangers. Take pictures. Visit at least one museum. Pretend like he’s from somewhere else for an hour. Stop in a park to read Raymond Carver’s “What we talk about when we talk about love.” outloud would be rad, but I leave that up to him. Go into a music store, find two people who seem completely different from him and buy whatever they are buying. And then end his travels at your house where he’ll tell you the story of his day over a bottle of Bombay Sapphire Gin. The story should last as long as the bottle.

Maggie, the fifth commenter on the article One List to Rule Them All

I link to the article for the commentary more than the post, which is a brief rundown of resources for people interested in Interaction Design. The heart of the matter is the fact that Maggie’s instructions apply to anyone interested in becoming a designer, whether print or interactive, an architect or for that matter a strategist of any field.

We all follow the precedents of those who came before, but we lose sight of the road others walked before us, and the paths others take alongside us, as we look toward the road we must walk ourselves.

John Wayne, Fish Scales and Type

I recently discovered a great link in my design feeds, pointing me to the site I Love Typography, which is well on its way to becoming a great resource for designers and all those with an interest in type The most recent post, Who Shot the Serif?, is a tremendous introduction to the terminology used to describe serif fonts and makes any typographic discussion a bit more accessible to those without formal education in the field. Add a pinch of humor, and you’ve got a rocking article! Check it out, even if you aren’t a designer, you’ll learn something interesting for the day.

My OS X Software Setup

It’s been about 13 months since I detailed various OS X apps and software packages that had caught my eye as I transitioned from Windows to OS X, so I believe it is time to review that list and expand upon it. I would definitely appreciate your recommendations of other applications to check out , and am also more than happy to answer any questions you may have.

I will add detail where I can, with the goal of publishing this post quickly and expanding upon it over time. I may make this a series if it grows long and/or detailed enough to warrant it.

Pre-installed / Part of OS X

Every Mac comes pre-installed with some amazing software, and I highly encourage you to check it out. Here are some of those apps that I use regularly.

Mail.app

MAil is surprisingly powerful as I noted when I made the switch from Thunderbird. I haven’t looked back since.
Cost: Free

iTunes

Simply the best music player on any platform. If you haven’t played with Smart Playlists you are missing out on one of the most important features.
Cost: Free

iCal

The built in calendar application is as simple or feature-rich as you want it to be. It interacts with the address book and many applications.
Cost: Free

The Keychain & Keychain Access

There is no need for a separate password manager as you can easily tap into the one that the system uses. Even better, you can secure other sensitive data such as credit card numbers, PINs or important notes.Check out this great walk-through to see the power of the Keychain. The important thing is to set up separate keychains with unique passwords to ensure that logging in, which will unlock the system keychain, doesn’t unlock the keychain you use to store other sensitive data. Using separate passwords will also ensure that if someone manages to get access to your machine in a logged-in state, or learns of your password, they are unable to get to other sensitive information.
Cost: Free

Address Book

The address Book is an unsung hero of the OS, as it unifies all of your contact information across applications, ensuring they all have and use the same data. It also ensures that your contacts are searchable.
Cost: Free

iChat

I don’t use iChat too often, preferring Adium’s capabilities for day-to-day instant messaging, but every so often its great to kick start a video chat with someone. IT is super-simple to initiate and works surprisingly well. This must be a wonderful tool for independents and small firms that do not have a single office.
Cost: Free

The Console

The console is an invaluable tool for developers of all stripes, and for the power user trying to track down a system problem. It can be found in the Utilities directory within the Applications folder.
Cost: Free

Boot Camp

This is solely for Intel-based Macs. Boot Camp lets you boot straight into Windows. Beautiful! That said, I’ve opted to erase the Boot Camp Windows partition, preferring to use Parallels, which runs within OS X. As I don’t need to run any powerful Windows-only apps, and I don’t run any Windows games, I found that I just wasn’t using the functionality.

General

Quicksilver

This is a must-have for anyone doing more than checking e-mail and browsing the Web. Quicksilver make it simple and fast to search for anything on your system and then do something with it, or to it. For example, I can keep things as simple as typing the letter ‘m’, which pulls up a quick search of anything on my drive with that letter in it (don’t worry, Quicksilver is smart, and prioritizes the list), which brings up Mail.app as the first result. I simply hit enter and my e-mail program is launched. Two seconds and done, without having to move my hands to the mouse. For a more interesting example, I can type a period, which brings up a text box in which I write a note. I can then hit the tab key to decide what I want to do – I can have the system automatically create a text document with the note, send it to my To Do list application, or display it on screen in a large font, so I can see it across the room. I can also use it to look up contact info without opening the Address Book. This really should be built into OS X.

Cost: Free

The Optimized Build of Firefox, a.k.a. Bon Echo

Cost: Free

Growl

This is another great utility that should be built into OS X. Growl isn’t actually used directly, instead it provides a platform for “applications to provide you with new information, without you having to switch from the application you’re already in.” It allows you as the user to customize the presentation and ensures the notices are consistent across all applications. Examples of usage are download notifications from Firefox and FTP clients, Twitter update notices and information about the song that just started playing in iTunes.
Cost: Free

Witch

Witch provides a granular alternative to the CMD-Tab combination of application switching, making it easier to shift to different windows within the same app or access minimized windows. It has other window-manipulation abilities too, though I haven’t tested them as of yet.
Cost: Free

Actiontastic

While I have read Getting Things Done, I haven’t gotten into the whole GTD habits as deeply as so many others, but I have picked up some tips that make life a lot easier. I now follow the core practices for my basic project management and to-do lists and lucked out when I found Actionatastic, a great GTD app that works well for me and works seamlessly with QuickSilver and iCal. This will be even cooler when actionatr debuts, providing the capability to modify the tasks on-line and synced up with Actiontastic.
Cost: Free

iTerm

I like iTerm over the built in Terminal as it has a tabbed interface which is invaluable in Web Development.
Cost: Free

Parallels Desktop

Parallels is simply amazing, and with each new release impresses me even further. Not only can you run another operating system (or multiple) within a window of OS X, you can eliminate the window altogether, eliminating the separation. This is great when I’m debugging a problem between browsers, as I can run copies of IE 6 and IE 7 right next to Safari and Firefox for OS X. For those folks in an environment that requires Windows-only apps, it is a perfect compromise.
Cost: $80

Adium

The best instant messaging client on any platform. I really wish it was available on Windows as I would drop Trillian for it in a second.
Cost: Free

NetNewsWire

NNW is a great RSS reader, though I tend to use the Web version far more than the desktop version as I can access it from anywhere. Luckily, the purchase of NetNewsWire guaranteed that the two are synced up.
Cost: $30

Twitterific

For those who use Twitter, this little app makes life much easier. With its integrated Growl support and ability to set the time between updates, you can see what your friends are up to whenever they post an update.
Cost: Free

iBackup

What a great backup application! I use it to run regular backups of my system. It allows me to choose what I want backed up, and it only copies files and directories that have been modified since the last backup. I’ve set up two tasks – the normal backup that ensures I always have a copy of my files on an external drive, and a rolling archive that takes a copy of the backup and creates a snapshot, allowing me to keep older versions of files around.
Cost: Free

PandoraBoy

As I discussed on my post Pandora on My Box, this is a great little app that brings the joy of Pandora out of the browser, encapsulating it in a small app.

Web Development & Design

TextMate

A powerful text and code editor that continues to reveal more features and capabilities as I use it. as their site puts it, “TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide features that even a language specific IDE lacks. It has enough project management features to keep most users happy, but is otherwise kept lightweight with a clean and minimalistic GUI.” Depending on how you like to work, TextMate may not be your cup of tea – it is purely a text editor, do not expect the ability to drag pictures around or resize DIV with your mouse. If you prefer a more visual interface, check out Panic’s Coda, which recently debuted and looks amazing.
Cost:

Headdress

Headdress makes it simple to work with virtual hosts on your Mac, which is invaluable when you are developing sites locally prior to pushing them to production. With Headdress you do not need to worry about file paths changing when you upload, as each site is treated separately, accessible through separate URLs (using port numbers). I used the demo version of Headdress for quite a while as I was only working on two sites at the time. Then I started to dig into other code branches and realized that the convenience that the app brings to my life was well worth the small amount of cash, so I bought it. Not only is this a great app, the guys at Twinsparc are genuinely good folks.
Cost: Free for two sites, $15 for unlimited

MAMP

MAMP is a handy package that allows you to effortlessly install Apache, Mysql and PHP on your Mac and start the servers with just a click of a button. It doesn’t screw with the built-in functionality that ships with OS X. This is an indispensable tool for PHP Web Development.
Cost: Free

Locomotive

Locomotive provides a super-simple way to install a Ruby on Rails development environment. It eliminated a lot of stress I experienced compared to the first time I set up RoR on my box and had to resolve all of the configuration hoo-hah. If you are interested in Ruby on Rails, download this app, it will make life much much much easier.
Cost: Free

Adobe Creative Suite

I currently run CS2, though I beta tested Photoshop CS 3 and was blown away by its performance on my MacBook Pro (the CS2 apps were never compiled for the Intel-based Macs, so they run slower than they should). The new palette system was a major step up for those of us on laptops.
Cost: Ranges depending on the apps/package you choose

Yummy FTP

I tried out a bunch of FTP apps early on, and as I wrote in my post about Yummy FTP, the app is “fast and has a wealth of features, including FTP Aliases with Autorouting to make it easy to upload files without opening a connection to the server and then navigating to the proper location. Sweet! The smooth integration with other apps (like TextMate for remote editing) and the command line are just a couple of other features worth the price. Yet, even with all of the functionality it packs, Yummy FTP feels good to use – unlike so many apps from my Windows past.”
Cost: $25

The Console

Yes, this is a repeat, but I want to ensure you see it if you’re a developer. The Console provides a handy way to keep an eye on your log files as you are writing/debugging server-side code. It works with all of the different log files you may deal with (Ruby on Rails, PHP, Apache etc.) I open it automatically when I start working on PHP or Ruby code.
Cost: Free

Subversion

I use Subversion for version control in my local development environment, and it has saved my butt a couple of times already!
Cost: Free

svnX

I use svnX to interact with Subversion instead of relying on the command line.
Cost: Free

FontExplorer X

This free font manager from the fine folks at Linotype, is much more powerful than the built-in FontBook and unlike the expensive font packages (hello Extensis), hasn’t given Sarah, nor I any problems.
Cost: Free

CocoaMySQL

A great MySQL database manager.
Cost: Free

Widgets

It took me a while to discover the usefulness of Apple’s Dashboard and the widgets it contains, but once I found a few of the truly useful little apps I was hooked. They stay out of the way but are available at a key-press. Please note, these are not all of the widgets that I’ve installed, just the ones I find useful. Also, I do not run most of these all of the time as each Widget takes up a bit of processing power, so I’ve indicated my “always on” widgets by making them bold.

  • Airport Radar is a “free and convenient tool for quickly scanning the area for AirPort and other wireless networks.”
  • App Update automatically checks for “updates to your installed software. It supports Apple’s software directory, MacUpdate and Version Tracker. It will present you with a tidy link list of all the updates found, enabling you to read release-notes and download the the updates quickly and painlessly.”
  • Calculator
  • Calendaer
  • Capture is a great tool for snapping screen shots.
  • ColorBurn displays “a new color palette every day, along with the hexadecimal color values for web designers and developers.”
  • ColourMod is a handy color chooser, which works with and convert between Hex, RGB, CMYK, and HSV values.
  • Corporate Ipsum “is a Lorem Ipsum generator Peter Gibbons might use in a TPS Report…if he were a graphic designer and had a need for a Lorem Ipsum generator.”
  • CSS Tweak provides “CSS optimization with the drop of a file.”
  • Dashalytics “offers quick access to Google Analytics statistics.”
  • Dashflix / Dashflix Mini provide a view into your Netflix queue – the only difference is the size of the widget.
  • Delivery Status provides an “all-in-one delivery tracker”for those of us who can’t wait for oru packages to arrive. “The status will update automatically for you, and even count down the days! It also works with Growl to give you pop-up message, email notifications, and more, whenever your package status changes.””
  • Dine-O-Matic is a “fun Dashboard widget for Mac OS X that randomly selects a place to eat out when you just can’t make up your mind.”
  • Gamer Card let’s you see “your XBOX Live Gamer Card”
  • Gas “delivers information from GasPriceWatch.com in order to provide you with the most up to date gas prices available.”
  • Image Shackle
  • iStat Pro is “the ultimate system monitoring widget, consisting of nine sections which can be shown or hidden.”
  • Kuler displays “color themes from kuler (kuler.adobe.com), an online application where members explore, create, and share color harmonies.”
  • MAMP Control makes it easy to “start and stop the Apache and MySQL server provided with MAMP. Also you can switch the PHP versions”
  • Minutes is a “countdown timer widget featuring simple interface, polished graphics and many functionalities”, including iTunes integration
  • Photo Drop let’s you “[d]rop or paste a photo, resize & trim it, and export to another application or widget directly by mouse dragging with outstanding 8 effects. You can also take a screenshot of windows behind Photo Drop (excluding your scattered desktop).”‘
  • SeeSS “is a quick and handy reference sheet for 140 CSS (1, 2 & 3) properties (proprietary extensions are not included). Each property includes information on its inheritance, CSS compliancy, Safari support, all values (including defaults), some examples and an extensive description.”
  • Stop Dashboard “allows you to stop the Dashboard. All running widgets will be removed from memory. Re-enable the Dashboard via F12.”
  • Symbol Caddy keeps “HTML entity codes at your fingertips. Just click the symbol to have the HTML code copied to your clipboard.”
  • Type Cast “allows you to quickly move through font families, styles and sizes using only your keyboard. In addition, Type Cast offers helpful information such as font type, family and can even reveal font files in the Finder.”
  • Unit Converter
  • Weather
  • Web Monitor “[m]onitors your servers or any other web site. The widget checks the response time periodically with a HTTP HEAD request ” I discovered this as I was writing this post, so I haven’t tried it yet, but it looks very useful!’

Apps that I Don’t Use, But Have Good Reputations

There are so many applications out there that it is hard to try every one that I hear about, plus there are certain apps that that app grabs you and there isn’t a desire to check out the others. So, here is a list of software that I’ve heard good things about, but do not have personal experience with, or that I have tried but opted for a different package (you’ll see some great freeware apps in here that I ultimately passed up for an application that I paid for). Give ‘em a shot if you have a chance.

  • Fugu – FTP utility [Free]
  • Cyberduck – FTP utility [Free]
  • Coda – Web development package [$]
  • Open Office – A multi-platform, open source office suite. [Free]
  • Delicious Library – This program harnesses a Web cam (in this case, the built-in iSight) as a barcode scanner. Simply point the camera “at the barcode on the back of any book, movie, music, or video game. Delicious Library does the rest. The barcode is scanned and within seconds the item’s cover appears on your digital shelves filled with tons of in-depth information downloaded from one of six different web sources from around the world.” I’ve wanted to play with this for quite a long time! [$]
  • VirtueDesktops – virtual desktop manager. [Free]

Handy Tips and Hacks for Working in OS X

Here is a list of good things to know in order to improve your workflow and/or enjoyment of the world o’ Mac.

Web Sites

Important Note

All prices listed are accurate at the time of writing, so don’t be surprised if they’re different by the time you hit their sites.

Style Evolution – Dynamic CSS Part 2

Please note that this assumes you have read Part One of the series.

Also, I have taken to calling this Evolved CSS, as the word “dynamic” is a bit too close to the old days of DHTML (Dynamic HTML) for my liking. Let’s jump right in shall we?

Files

Download this zip file if you would like to see a running example of this project and/or have a foundation for your experimentation.

Reduce Server Calls Without Sacrificing Ease of Maintenance and Organization

Web Developers follow many practices in their organization of style sheets. Some put everything in a single document, while others create separate style sheets for each of their major page types or templates. In addition, most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer’s version) to make life easier.

And..?

Well, if you’re in the practice of using multiple style sheets, your sites may be taking longer to render than they need to, no matter how compressed your CSS may be. This is due to the fact that the browser needs to communicate with the server to snag each individual document, and most browsers only allow a few connections at a time. As noted on the Yahoo UI Blog, a lot of performance issues are directly related to front-end engineering. That’s actually a big win for those of us on the front-end as we don’t have to shell out for better servers or faster pipes. We can simply improve our code to make life easier for our users.

Example of HTTP Requests from FireBug
Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you’ll care about, so to break it down, here’s the key point in regards to this write-up: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document.

The code

For this example, let’s assume your site has the following set up:

  • reset.css – Resets all styles to eliminate browser inconsistencies
  • core.php – Includes the global layout rules (navigation, header, content area etc.) and text formatting
  • scheme.php – The colors and images used for your site, this could easily be a script that provides the end-user the ability to choose their own colors.
  • home.css – Home-page specific layout/formatting rules.
  • archive.css – Layout and formatting rules for your archive pages.
  • gallery.css – The rules used to display your photo gallery.
  • print.css – Defines the layout for the page when it is sent to a printer.

You may have noticed the combination of PHP and CSS for those file types – you can easily use either as Part One demonstrated, but keep in mind that you should use flat CSS files over PHP where you are able to reduce the time required to process and render the final style sheet.

Section-Specific vs. the Kitchen Sink

Evolved CSS works well with the practice of using a single global style sheet to define your general layout and styles and section-specific style sheets to serve up rules that are unique to different areas of your site, as you can pass parameters to your main style sheet in order to define which style sheets to include. The Browser will still cache it. Here’s an example of how you could pass these parameters, in this case pulling in the styles for your gallery and a blue color scheme.


<link href="/css/style.php?include=gallery,blue-scheme" rel="stylesheet"
       type="text/css" media="screen" />

The file styles.php includes this code to take those parameters and pull in the appropriate style sheets:


/* -=-=-= Import Styles =-=-=- */
// Grab the parameters clean them up and add them to an array

$cssToInclude = split(',', makeSafe($_GET['include']));

/* -=-=-= Core Styles =-=-=- */
// Core will be included every time

include_once 'core.php';

/* -=-=-= Additional Styles =-=-=- */
// Check the array to determine which style sheets to include

if (in_array('home', $cssToInclude)) {
	include_once 'home.css';
}

if (in_array('gallery', $cssToInclude)) {
	include_once 'gallery.css';
}

if (in_array('archive', $cssToInclude)) {
	include_once 'archive.css';
}

That’s all You Need to Start

Well, this is a pretty short example, but I think it gets the poitn across and sheds some light on the possibilities available to you when you harness the power of server-side scripting languages to serve your CSS.

Note: This code is for example purposes only – it could be a lot cleaner, but at this point I am keeping it simple for explanation’s sake. I’m including the function makeSafe() to clean up the parameters. You can see the code in styles.php, contained in the source file package, if you are curious about it.

A Word on Media Types

This practice can only be used style sheets of the same media type – do not merge your screen style sheets with your print styles or you will get all sorts of ugliness.

What about priority and inheritance?

That’s a damn fine question! At this point, this structure works exactly the same as using multiple style sheets does. Most browsers will use the last rule defined, but you shouldn’t rely on that. As a good developer you should know where your conflicts may be and resolve them intelligently. The !important declaration can be used where needed to resolve specific conflicts.

Conclusion

Well, that about wraps it up for today kids, thanks for reading! Please leave your comments, suggestions and/or questions as I would love to expand the discussion. Also, I would love to hear your thoughts on what I should address next.

Future Evolved CSS Topics

  • Let the server do the math – auto-generating widths for your grid
  • Using Evolved CSS to improve debugging
  • CSS Compression

Kuler Dashboard Widget

Kuler Desktop WidgetAdobe has released a Dashboard widget for Kuler, it’s beautiful, and very useful Web-based color picking app. The widget consumes RSS feeds from the site to display the most downloaded, highest rated and newest color schemes. In addition to the abiliy to search the tags that are used to organize the color palettes, each scheme in the widget provides a direct link to that scheme in Kuler, making it very easy to modify the scheme to fit your needs, and of course save it to Kuler for future reference and sharing amongst the community.

Another great feature is the ability to click a button and have the HEX values of the currently selected scheme copied to your clipboard. If you only want one of the colors, it’s easy to see its HEX in the widget screen without copying it to the clipboard.

If you have yet to play with Kuler, give it a try. It’s well worth the time for every designer…well, as long as you don’t get lost in it for a couple of hours playing with color. Not that I did that or anything… Really.

Hrrm, okay back on track. It is functionality like this that makes Dashboard worthwhile in my book. For those on a Mac, this is yet another reason to include Kuler in your design process. For those on PCs, you may want to drop Adobe a line to encourage them to release the widget for you to consume.

Dynamic CSS A.K.A. CSS Variables

Cascading Style Sheets are an amazing tool, having transformed Web Design as an industry and the Web as a communications medium. But in all of its glory (and it is glorious), CSS has some flaws. The most frustrating for me is its static nature. I want to be able to reuse values (CSS variables if you will), I want to make use of browser detection instead of CSS hacks, or IE’s proprietary conditional comments and I want to use logic to serve up specific rules in certain situations. Enter PHP (or your server-side langugage of choice), which will provide us a wealth of new options for working with our CSS, including the ability to adapt to our end-users’ needs.

Hello…. JavaScript Can Do That Already!

Yeah, client-side scripting can handle most of these requirements, but I don’t want to rely on a technology for my presentation that can be disabled by the user or their corporate IT department and frankly the JS support of mobile devices is poor at best. Enter server-side languages, which cover all of these bases without impacting the program or device rendering the site.

What I’ll Cover

The Setup

This article assumes that you have a Web server at your disposal that is running one of the aforementioned scripting languages and that you have a basic understanding of scripting in that language and know a bit about CSS. For the purpose of this write up I’ll be using PHP, but I have implemented versions of this system on production sites running JSP, and there’s no reason the same couldn’t be done with Ruby on Rails, Python, ASP or any other server-side solution.

This system can be as detailed or relaxed as you’d like, so I’m going to keep this write-up relatively simple with a few interesting bits thrown in. If it proves to be an interesting subject I’ll write a follow-up showing advanced usage. Let’s hit it!

Serving a Dynamic (PHP) File as CSS

In your editor of choice create a new PHP file. I’m calling mine styles.php. Paste this line at the very top of the document:


	<?php header('Content-type: text/css'); ?>

This tells the server that the page should be sent to the browser as a CSS document, so the file won’t need the .css extension. All of our work will be done in this bad boy. So, on to the next step.

Useful Variables and Practices

So, we have a PHP file that has a serious personality disorder, thinking that it’s a style sheet. What the hell are we going to do with it? Well, we’re going to set a few key variables that will make life much easier. Specifically, we’ll set variables for common measurements (columns, containers and the space between) and some colors from the site’s palette:



$gutter           = '10px';   /* Used to separate visual blocks */
$pageWidth        = '1000px'; /* Width of the Web page */
$pageWidthPadded  = '980px';  /* $pageWidth minus padding ($gutter x 2) */

$col1             = '800px';  /* Width of the main content area */
$col1Padded       = '780px';  /* $col1 minus padding ($gutter x 2) */
$col2             = '180px';  /* Width of the sidebar area */
$col2Padded       = '160px';  /* $col2 minus padding ($gutter x 2) */

$lightGray        = '#e5e5e5';
$charcoal         = '#464646';
$orange           = '#f60';
$darkBlue         = '#0059b2';

Dynamic CSS Illustration The width variables will prove useful in creating a site as they guarantee consistent presentation from page to page and template to template. This model can easily be extended for multiple column widths, so if you want to subdivide Column 1, you only have to set it up once, creating the variables ($col1A, $col1B etc.) and setting their values to the appropriate widths. For you folks who love them grids, this should make life pretty easy.

Setting up color variables simplifies the initial site build-out and future revisions. When you return to the style sheet six months from now, you’ll notice $darkBlue is much easier to remember than #0059b2.

So, now that we have width and colors, it’s simple to use these new variables in the style sheet, all you need to do is use PHP’s echo shortcut (<?= 'print this' ?>):


#Wrapper {
	background-color: <?= $lightGray ?>;
	border 1px dotted <?= $darkBlue ?>;
	margin: <?= $gutter ?>;
	width: <?= $pageWidth ?>;
}

Advanced: I’ve begun to separate the measurement value (px, em, pt) from the actual numerical value so I can harness the power of PHP to do my math for me. That’ll be the subject of a future write-up.

Implementing Browser Detection to Avoid CSS Hacks

I’ve used a couple of different packages in the past; at the moment I use BrowsCap, which covers these needs nicely, but use whatever fits your needs best. Place this code at the top of styles.php, after the PHP header line:


require_once('Browscap/Browscap.php');

// Create a new Browscap object (loads or creates the cache)
$bc = new Browscap('Browscap/cache/');

// Get information about the current browser's user agent
$current_browser = $bc->getBrowser(null,true);
$browser_platform	= $current_browser['Platform'];
$browser_name		= $current_browser['Browser'];
$browser_ver_major	= $current_browser['MajorVer'];
$browser_ver_minor	= $current_browser['MinorVer'];
$browser_ver_full	= $current_browser['Version'];

$is_ie6 = false;
$is_ie7 = false;
$is_safari = false;
$is_ff = false;

if ($browser_name == 'IE' && $browser_ver_major == 6) {
  $is_ie6 = true;
} elseif ($browser_name == 'IE' && $browser_ver_major == 7) {
  $is_ie7 = true;
} elseif ($browser_name == 'Firefox') {
  $is_ff = true;
} elseif ($browser_name == 'Safari') {
	$is_safari = true;
}

So we now have a few variables that will allow us to quickly determine whether the user’s browser is IE 6, IE 7, Firefox (any version) or Safari (any version). You can extend this model to fit your specific audience and needs.

Putting it All Together

Sweet, now we can rock the styles all dynamic-like! Here are a couple of examples for you to nibble on:


body {
<? if($browser_platform == 'MacOSX') { ?>
  font: .85em/1.4 normal "Lucida Grande", Verdana, sans-serif;
<? } else { ?>
  font: .75em/1.4 normal "Lucida Grande", Verdana, sans-serif;
<? } ?>

That block outputs a larger font size for folks who are on a Mac compared to folks on PCs or other devices.
The next one modifies the value of a top margin, serving up 5px for IE 6, and zero for all other browsers.


#NavWrapper1  {
  display: block;
  height: 18px;
  <? if ($is_ie6) { ?>
    margin-top: 0;
  <? } else { ?>
    margin-top: 5px;
  <? } ?>
  margin: <?= $gutter ?>;
  width: <?= $pageWidthPadded ?>;
}

Advanced: This method can be used to detect alternate browsers as well. So, you could detect a mobile browser and serve up a separate style sheet. Or if you detect a screen reader you could serve up a style sheet with proper aural rules defined.

That’s it, we’re rolling with dynamic CSS, harnessing the power of both PHP and Cascading Style Sheets. There is a lot more that can be done, but I hope this opened a few avenues for experimentation on your future projects.

In Moderation: Too Much Considered Harmful

It would be really easy to overuse this method. Do not try to replace proper use of grouping and the cascade with PHP. You won’t gain anything but frustration and larger style sheets. Take the time to think through the variables that you are going to create to make sure they make sense and are not simply recreating existing CSS functionality.

Acknowledgments

I am by no means the only person to think of this, there are many others who have covered the topic on their sites, but I felt that there were a few components missing, so here we are. I hope I added to your toolbox. It is also very important to note that there are some great folks with whom I’ve worked who have expanded on the concept and helped me flesh it out to be a viable and reusable tool in the Real World ™, most notably the inestimable Leesa of Red Velvet Cafe.

Your Turn

I look forward to your feedback and questions, so please leave a comment.

Redesign '007

Redesign ’007 has hit the site, it’s first form known as Ashes. In time I plan to add its alter-ego, Frost. For now though, let me provide a quick write-up on what has changed beyond the obvious aesthetic shift.

The Engine

The site continues to run on WordPress, but now utilizes the new hotness that is version 2.1. The upgrade is most significant in the speed increase for building and delivering the pages that you see. The connections to the database have been vastly improved which translates into faster load times. Rejoice!

Tags

Screenshot of tagsI have begun to apply tags (information labels) to individual entries to improve the classification of my content without expanding my categories to the nth degree. This cloud displays the tags I have used on my site and provides a rough visual representation of how often each has been used. I’ve also added the capability to search by tag for those who are interested. At this point I have only added tags to a small fraction of the 900+ entries on this site, but the number will improve over time.

Syndication Feeds Powered by Feedburner

I’ve updated the entry and comment feeds on this site to use Feedburner as it provides some great statistics and functionality beyond the standard feed set up. If you subscribe to my main feed, you will now see a daily summary of new links added to my Ma.gnolia bookmark list. The process was surprisingly smooth, especially with the help of Steve Smith’s Feedburner plugin.

Ma.gnolia

Ma.gnolia LogoI love Ma.gnolia, and am very active, managing several groups, including those focused on Web Design and Austin. With my recent integration of my Ma.gnolia bookmarks you can see an up-to-date list of the sites that interest me. Even better, when browsing archives, you will see bookmarks specifically related to that archive’s topic. If you use Ma.gnolia, please add me as a contact as I’d love to see what you bookmark as well!

BrowseCap

I’ve used browser detection to serve up browser-specific pages and style sheets for a number of years now to avoid the use of CSS hacks. This site design is no different, though I no longer use the BrowserSniff class, having switched to Browscap as it does a great job of avoiding the “the limitations of get_browser() and… offers methods to update, cache, adapt and get details about every supplied user agent on a standalone basis.”

Moo.fx

Screenshot of the Navigation DrawerThe moo.fx Javascript library, built upon Prototype, is responsible for adding two fundamental bits of functionality: the tool tips used throughout the site (most notably in the side bar blocks) and the sliding navigation drawer. The library was simple to implement and is a small download, so it was a no brainer to integrate it with the site. While I am not currently utilizing its AJX functionality, I will soon.

sIFR

The headers displayed in the sidebar and used to present each entry’s date and comment count on the home and archive pages make use of sIFR 3 (beta at the time of writing), providing me the ability to use the font I want without forcing you to download a ton of images.

Modifications to WordPress Core and Plugins

WordPress LogoThe majority of changes revolve around modifications made to HTML output by WordPress or its plugins to add the nice tool tip functionality you see throughout the site, most especially visible in the side bar.

wp-includes/bookmark-template.php

I modified the HTML output to the browser in order to add tool tip capabilities.

Previous Posts Plugin

I changed the Previous Posts plugin in a couple of ways. First, I altered the function, allowing me to pass values for markup to be used before and after each line of output and the ability to set a minimum and maximum value. This has given me the ability to show the five most recent posts throughout the site, while ensuring I don’t show duplicates on the home page, which will show the five most recent plugins that aren’t displayed on the page already. I also modified the output to implement tool tips and grab comment counts to be used within the tips.

Amazon Media Manager

I added a new output format to AMM in order to use the tool tip functionality.

Ma.gnolia Plugin

I’ve modified the Ma.gnolia plugin to use the tool tip functionality and made changes to the output format of the date. I also included a link to my Ma.nolia account. I may well adopt this plugin as its creator, Barry Price has stated that he won’t be updating it.

Recent Comments Plugin

Recent Comments is another plugin modified to make use of tool tips.

SilverSpider Play List

I added another output format to my recent song list package to make use of tool tips.

Site Cleanup

I am reviewing each post on the site to clean up old formatting issues, many due to the period in which I used Markdown (a mistake, I really should have kept to HTML). So, individual posts will look nicer in time, though I am specifically not updating the content as I do not want to inadvertently re-write my own bits of history.

In Closing

The overarching goal of this redesign was to ensure the site stays fresh. As the archives show, I often go through periods where I don’t post to the site. Yet, during that time I am actually pretty active in various spots on the Net. This redesign adds focus to the conversations that occur on the site (please add your comments to this and other posts) and my interests, as can be seen in the recent bookmark, music and reading lists. While the Web is a often a one-way medium, it doesn’t have to be. So, welcome to the site, please jump into a conversation!

Firebug Beta 1 Released

The beta of Firebug 1.0 has been released and comes with some amazingly useful features. For those unfamiliar with this Firefox extension, Firebug provides a wealth of tools for developers to debug, monitor or edit portions of a site. Portions of it overlap the Web Developer’s toolbar, and in several cases, Firebug surpasses it hands down. Some of the features include:

  • Inspect & edit HTML & CSS within the browser to see how changes will impact the current page.
  • Visualize CSS metrics, including box model shading, measurements for each edge of a box (and the ability to edit those measurements in-line) , rulers and guides
  • Monitor network activity to see why a page takes too long to load, broken down by type. You can also see which items are cached or not and examine HTTP headers and XMLHTTP Requests.
  • Debug JavaScript, including the ability to set breakpoints and conditional breakpoints and line-at-a-time code execution. Additionally you can view JS stack traces broken down into the functions within the stack. Use tooltips to see the value of any variable within the JS, log function calls and profile the performance of the scripts. The improved JavaScript logging is amazing in its own right.
  • Explore the DOM and edit as you go (including auto-complete) with handy JS code navigation.
  • Vastly improved error handling and details.

This extension will actually reduce the need for several others you may have installed.

Raising the CSS B.R.A.T.

CSS B.R.A.T. is a great idea, but one that should be seriously thought about before implemented. For those Web folks responsible for supporting intranets, having to wrangle many editors, this is a great tool, but it should be avoided for anything that faces the public. The implementation could inflict much more harm on the presentation and usability of the site in ways far worse than the non-standard markup.

I like to implement styles that override WYSIWYG markup on sites that provide others to include HTML, and I highly recommend that others do the same. For example, Webby folks should ensure the font tag is styled to match the site’s standard font (font family, size, weight…) with !important to ensure it overrules the deprecated tag and its attributes. Other tags can be covered as well including crowd favorites like blink and layer.

As Marco rightly noted “The process of educating editors on the benefits of a standards-based design can be tough enough to do, especially when working with various levels of HTML knowledge. This method is meant to show, educate, and be passed on to other editors for an exponential improvement on the state of web documents. ” It’s also important to think about this as an opportunity to learn which tools your internal clients need. They may have valid reasons for attempting to modify the standard presentation. B.R.A.T. provides a great incentive for editors to contact you, so make sure you capitalize on it! A few well built classes will do wonders for proper implementation down the road and perhaps encourage those clients to give you cookies.

Screens around town

37signals has set up a flickr stream showing screenshots of various UIs, most of which are Web-related (tag: screensaroundtown). There are some nice components in there, though some of the shots don’t seem to fit the group, like the install window for Adium.

I like the concept for its simplicity of purpose and implementation – it’s a refreshing break from the large sites that gather cool designs from around the Web.

Found via JD on EP.

Are you the GuideMaster?

Both Draftsman and GuideMaster from AV Bros. look to be very useful for users of Photoshop when the need to create horizontal and/or vertical grids arises, which is damn near every project. Draftsman creates selections within your document, while GuideMaster places guides. I just downloaded the demo versions of each to tinker with them and have been pleasantly surprised. There are a couple of features I would like to see, namely I think Draftsman should provide the option to output as vector objects instead of selections. Also, I think it should mimic Guidemaster’s functionality which allows the designer to use percentage-based values (one third, a quarter…) in addition to the currently supported fixed values (24px). I need to do a bit more testing, but one, if not both should prove to be a worthwhile investment.

Software for a Switcher

Update

I’ve published a new list of software: My OS X Software Setup

In the not-so-distant future I’ll pick up I’ve just purchased a MacBook Pro, cementing my switch from the world of Windows to that of OS X (well, with occasional visits to the land of Gates). The switch brings the opportunity to try, and adopt new software, so here’s a list that I’m compiling of software that I will install, or at the very least, try on my new Mac:

  • Quicksilver – “A unified, extensible interface for working with applications, contacts, music, and other data.” Additional info available:
  • Firefox – The ultimate browser
  • Camino – Another great browser that “combines the awesome visual and behavioral experience that has been central to the Macintosh philosophy with the powerful web-browsing capabilities of the Gecko rendering engine.” I look forward to running it through its paces.
  • Thunderbird – My favorite e-mail client on any every platform!
  • Adium X – A great chat client that I’ve used on the battered ol’ beige Mac in the past. It is the equivalent of the Windows-only Trillian.
  • TextMate – Considered the editor for developing with Ruby on Rails on OS X
  • Apple Developer Tools (Xcode)
  • DbVisualizer – “a feature rich, intuitive and cross-platform database tool for developers and DBAs, providing a single powerful interface for a variety of databases. DbVisualizer supports simultaneous database connections, it lets you explore and manage database objects, execute SQL queries, visualize information and a lot more.”
  • Netflix Freak – “a full-featured Mac OS X application for managing your rental queue that enhances the Netflix experience. The program offers many unique features not available on the Netflix website.”
  • Dock Dividers – Visual dividers to organize the dock.
  • BootCamp – Dual boot windows XP and OS X!!!!! The last piece has fallen into place.
    • Windows XP Home – Seein’ as I won’t be running my ol’ PC any longer, I can just move the install over to the Mac.
    • IE 6 – For testing
    • Mozilla Firefox – For testing, though it shouldn’t vary much, if at all compared with Firefox on OS X
  • Web Development
  • Open Office – A multi-platform, open source office suite, compatible with the big boys.
  • Delicious Library – This program harnesses a Web cam (in this case, the built-in iSight) as a barcode scanner. Simply point the camera “at the barcode on the back of any book, movie, music, or video game. Delicious Library does the rest. The barcode is scanned and within seconds the item’s cover appears on your digital shelves filled with tons of in-depth information downloaded from one of six different web sources from around the world.” I’ve wanted to play with this for quite a long time!
  • Open Terminal Here – An AppleScript that sits in the tool bar of finder windows, allowing an easy way to open a terminal session in the directory being viewed.
  • FontExplorer X – A free font manager from the fine folks at Linotype. This is another app that I’ve wanted to use for quite a while, but have been unable to as it’s Mac-only.
  • Carbon Copy Cloner – Creates an exact replica of your hard disk. Ideal for creating a restore-image.
  • RSync – RSync already comes with OS X, but I’m noting this for the helpful tutorial.
  • NetNewsWire – I’ve used the light version of this news aggregator in the past, and am looking forward to trying out the full version.
  • Disk Inventory X – ‘[S]hows the sizes of files and folders in a special graphical way called “treemaps“.’
  • Fugu – A spiffy little FTP utility.
  • Cyberduck – Another FTP utility I plan to try.
  • Launchd Editor – Launchd replaces cron in OS X. This app is a “graphical editor for launchd’s property list files. It makes sure that the proper keys are of the proper values and lets you enter in whatever information you want in those keys.”

Useful Customizations & Recommendations

I’ll be adding more over the next few days, and appreciate any suggestions you may have!

Design and Web Books

While I don’t have much time to actively participate in the Designers in House List, to which I subscribe, I enjoy reading many of the threads. One recent thread from a while back, titled “Your favourite web design book” served as a reminder that I should update my list of Web and design-related book recommendations. It’s been quite a while. So, here is a brain dump of the tomes on my bookshelf and ones that should be. The list is by no means comprehensive – I would love to hear your recommendations!

Items without a rating indicates that I do not own the book, but believe it is worth attention due to recommendations from other Web-type folks, or that I hold the author in high respect due to their other work and contributions to our industry.