Brian Fitzgerald

I’ve always wanted to get better at creating a portfolio of good designs that I find. A friend that I used to work with had a file cabinet full of magazine clippings and other things that that they had stored away for inspiration. This was a great resource to spread out on the floor when getting started on a new project.

If you are looking for some inspiration, here is a page of business card examples. Even if you aren’t designing cards, it is a great thing to look through for fonts, colors, alignments, and everything else you need to get the creative juices flowing.

I just said that I’d stop posting constant lists of links… but these are from somebody else, so it’s okay. Chris Pultz (trainer extraordinaire) sent me some great links through del.icio.us that would be useful to anybody getting started in designing with cascading style sheets

• Keep It Simple, Stupid showcases 49 site designs that are beautiful for what they did not do to their sites more than what they did do. The easiest thing you can always do to create a great looking site is create strong alignment and not litter the page with widgets, type and color. Many of these do it very well.
• Stripe Generator: Along with text/icons reflected off a surface, you can find a striped texture in many sites that could be considered a part of web 2.0. If you're looking to look cool and trendy, this site will help you get your stripes.
• Faux Column CSS Layouts: Columns in CSS tend to only be as long as the contents of that column dictate. This causes you to have columns of different lengths when you really want them to all be the same length. The easiest trick around this is to visually fake the columns by placing a columned image background behind the layout. This site provides many examples to help you get started.
• 25 Code Snippets for Web Designers: For the intermediate web developer, these are some useful code bits that will help you add some interactivity and pieces of flair to your web site. An AJAX contact form, sIFR and examples of CSS unordered lists are just some of the things that you will find here.
  

I really see my blog as the center of my life on the web. My blog is the first place I search when I want to recall something that I did months or years ago. For this reason, I have often muddied my posts with everything I have been bookmarking and more. Throwing all of this information in one pot can discouraging to those that are looking for some perspective.

One of my favorite sites to read these days is our local police chief’s blog and I’ve had to ask myself why I find it so interesting. I’m drawn to it in the same way that some may be drawn to shows that you see on Discovery and other like-channels where you get to see inside another profession. I don’t think that it would matter if it were the president of the united states or the guy that cleans the toilet of the president, it is fascinating to know what people are thinking, what challenges they face and what they find interesting each day when they go to work.

For this reason, I’m going to try (TRY) to change the nature of my blog a little bit. For those that are interested, I am going to post the exciting and the boring things that I have the opportunity to do as a part of my job as a web developer. If there are things that you are interested in knowing about, please let me know.

The beginning of this summer has been hectic as I have launched a couple of sites already including the new Lincoln Public Schools web site. The new site is a little wider than the old site, now being 990px wide. We had quite a bit of discussion about this before we went live wondering if it was the right decision to do this. Interestingly, since then Apple has launched their new site and CNN has released the beta of their new site. Both are the same width as the new LPS site. This was some appreciated validation of the width and certainly a sign that this new size is becoming a standard size for current sites.

Interested in what a month of traffic at the LPS web site looks like in terms of screen resolution? Here it is.

It may not be often that you give your mouse a lot of thought, but I just had one of those moments where I thought “Wow! What a great mouse."

I use a Logitech VX when I’m portable and a Logitech MX at my desktop. These are basically the same mouse with some small differences that make each better for the environment they were designed to be used in. The key feature on both is a scroll wheel that is able to work (as many scroll wheels do) in a mode that sort of clicks as you scroll, and a mode that is unique where it is free to spin like the Price-is-right Big Wheel. This last mode is by far my favorite. When you are on a long document of any sort it is really nice to be able to give the wheel a little flick and have the page scroll along until you stop the wheel. The wheel is weighted to keep it moving and has a good-enough build quality that it doesn’t feel like a cheap feature as one might expect that it would.

Thanks again to those of you that attended my workshop in Columbus on Tuesday. Here are some of the resources that I told you I would post here:

Firefox Add-ons

• Firebug (Firebox-based CSS Inspector)
• Firefox Web Development Toolbar
• MeasureIt (screen ruler)
• ColorZilla (Color grabber)

Browser Testing

• Evolt.org (Browser Archives)
• Install multiple version of IE on Windows XP

Web Sites

• CSS Zen Garden
• CSS Beauty: CSS Design Showcase
• CSS Vault: Inspiring Creativity
• CSS Hack
• Glish: CSS Layout Techniques
• Layout-o-matic
• A List Apart
• Digital-Web Magazine
• Stylegala
• The Web Standards Project

Useful books

• Designing with Web Standards — Jeffrey Zeldman
• Bulletproof Web Design — Dan Cederholm
• Don’t Make Me Think: A Common Sense Approach to Web Usability — Steve Krug
• CSS Mastery: Advanced Web Standards Solutions — Andy Budd, Simon Collison, and Cameron Moll
• Access by Design : A Guide to Universal Usability for Web Designers — Sarah Horton
• CSS Pocket Reference — Eric Meyer
• HTML Pocket Reference — Jennifer Niederst

Workshop Files

• America — Finish
• America — Start

Digital-Web Magazine offers an educational article about PNGs and how to use them in ways that no other web image format can be used.

I’m not sure how long Contribute 4 has been out, but it has not been a long time. Six months? I was surprised to see, during the Adobe CS3 launch event yesterday, that a new version of Contribute (Contribute CS3) was being bundled with the web studios. I wanted to give Adobe the benefit of the doubt and assume that they were just renaming the product, but after a visit to their web site it is clear that this is considered a full upgrade and an owner of version 4 has to pay the same to upgrade to this new version as an owner of any previous version. While, neither I or Lincoln Public Schools (where I work) purchased any version 4 licenses, I can’t help but feel bad for those that have.

I guess this is Apollo day. Learn more about Apollo from these videos created at Adobe’s ApolloCamp.

See ‘em here

I had forgotten about this supported feature in Firefox 2 - microsummaries. It allows people to create bookmarks of your page that you can later change the titles of - live.

Christian Cantrell: Firefox 2 Live Titles

Mike Chambers has a set of training/introduction videos up on Lynda.

Apollo Alpha Preview - lynda.com Online Training Library ™

Adobe has released a public alpha of it’s upcoming Apollo development software / runtime. This looks to be an incredible technology with wild possibilities. With Apollo, HTML and Flex developers (among others) can write code as they usually do, but then have it compiled into a distributable application that people can run on their computers outside of a web browser. I really expect many cross-platform applications that are generally written in Java or even REALBasic to begin showing up in this environment instead.

Go ahead. Even if you don’t develop, you can grab the runtime and try out some of the sample applications.

Adobe Labs - Apollo

Looking for some ideas for that next site navigation you need to build. This article from Smashing Magazine displays a whole bunch of good-looking ones.

CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine

Chris Pultz hit me with this incredible list of 53 CSS techniques. A couple of the methods listed here are duds, but most of them are fantastic. If you don’t do CSS yet, you should look through these to see what you’re missing. If you are on CSS, then get to using them!

powered by performancing firefox

Mike Potter from Adobe demonstrates Apollo at FlashInTO.

Macintosh users can now download the “WPF/E” beta from microsoft. This allows Macintosh users to play files created by Microsoft’s new “Flash Killer” application Sparkle. Once you have installed it, the plugin works with both Safari and Firefox. You can see examples of it’s use here (note the first video in the second example where they talk about the number of Macs that have been appearing in Redmond). This is exciting only because it offers hope that whatever development platform content developers use in the future, the mac should be able to display them all. I really hope that this doesn’t start pushing Flash out of the way too much, but I’d be happy just to see a lot less sites that say “Sorry, Microsoft Windows/Internet Explorer Only”.

I’m working today on designs for the next www.lps.org and this morning trying to establish a target width. To get started, I’m examining some of the best sites on the web to see what width they are using. Here’s what I’m finding.

    * ESPN, MLB, NFL: 990px     * New York Times: 973px     * ABC News: 770px     * ABC: 803px     * Cnet (including drop-shadow): 990px     * Washington Times: 980px     * Apple: 781px     * UNL (including drop-shadow): 1000px     * NBC: 971px     * CBS: 977px

So that’s what we’re seeing on the web. How does that match up against the traffic we see at Lincoln Public Schools? Here’s our visitor resolution breakdown (timeframe is 8/1/06 - 1/29/07), provided by Google Analytics:

I’m kind of depressed to see this chart. In my dreams most people are at 1280x1024 but we see it coming in here at 5%. Even if we lump all of the 1280ish and larger resolutions, we come to 20%. So, in general 65% of our traffic is at 1024 x 768 with the remaining 35% being split about 2/3 larger and 1/3 smaller.

A piece of information that I haven’t provided yet is the current size of the site, which is 897 pixels. This means that for the past couple of years, I have already been in excess of what a 800 x 600 screen can display. I am going to work on the assumption that as we improve computers in the district that this number will continue to fall. I think that a site can establish some visual credibility simply by exhibiting traits of sites that have credibility. If many solid sites work at 990 pixels, simply using that width can piggyback on their success subliminally.

So I think that’s where I’m going. I’m going to shoot for 990 pixels. For those that can not display this width, it is only 100 pixels larger than what I was doing before. For others, I think that it will be a forward-looking design that will provide room for a lot of flexibility in content delivery.

Chris Pederick has updated the invaluable web developer toolbar for Firefox and Flock to version 1.1.

I've been working today on building a new LPS WWW box that will use ColdFusion as it's primary scripting language since the NetCloak that we have used for around 10 years has been discontinued. Here are some quick notes of things that I have either learned or been reminded of today.

• ColdFusion MX7 and lower do not work with Java 1.5
  http://www.talkingtree.com/blog/index.cfm/2006/5/17/CFMX-MacOSX-JVM142
• Getting ColdFusion to process html files is not hard, but was tricky to find
  http://cfblog.com/dave/index.cfm?commentID=3

Thanks to Bret Hermsen in our Systems group for reading my mind throughout today and offering perfect help at the perfect time.

One of the greatest things about CSS is the ability to create styles for non-screen delivery. Digital-Web features has a new article called “CSS Styling for Print and Other Media”.

Google’s code search allows visitors to search publicly accessible code for answers. It now includes ColdFusion.

technorati tags:coldfusion, google

Adobe has launched a new design center on their web site specifically for Fireworks. If you are looking to get the most out of Fireworks, this will be the place to stay tuned to. There’s already some neat articles up there including one on how to “Create a night scene with Fireworks” and “Creating lens flares using Fireworks”. Interested in participating in the Fireworks 9 beta? You can sign up for that also.

technorati tags:fireworks, adobe

Adobe put out the first non-beta release of the Flash 9 player with full-screen video this week. Brightcove is already utilizing it.

Try it out here…

technorati tags:flash, brightcove, adobe

Ryan Stewart uses Google Trends to compare Rich Internet Application technologies and shows that Adobe Flex is ranking best compared to other environments like OpenLaszlo. I ran his query then added AJAX and they were blown out of the water - basically flatlined at the bottom of the graph.

technorati tags:flex, apollo, ajax, openlaszlo

I attended a session today covering the use of HTML and Javascript with Adobe’s upcoming Apollo product. Among many other things, Apollo will allow web applications to be deployed as desktop applications. For this to happen, Apollo must have its own HTML rendering engine. To my great surprise, that chosen HTML renderer is WebKit (the same used in Apple’s Safari). Want to make a web application apollo-ready? Design for Safari. Cool.