So whether obvious or not, I’ll be adding a statement to this site that the words, views, and opinions expressed here are solely my own, and do not necessarily represent those of my new employer, Google. I’ve been assured that my voice will not and should not be silenced by joining Google. So you should start to see and hear even more from me now that I don’t need to worry about losing a Stopdesign contract just for blogging about working on something post-launch.

It was a tough decision to put the contract work I do under Stopdesign on hold for now. But as many people already know, I’ve been working with Google for the past six months as a contractor, and the relationship has gone quite well so far. I’m actually quite excited about the opportunities and the major challenges that lie ahead for me, the teams I’ll be working with, and the company at large. Here’s to hoping and wishing for a successful adventure and many great things to come.

After three and a half years of running my own business full-time, I’ve learned a few lessons the hard way. One of the lessons I’ve learned concerns money. Specifically, business revenue: where it’s kept, how it’s accounted for, and what other funds it’s mixed with. I won’t go into details. Let’s just say going on an installment plan with the IRS isn’t as much fun as a trip to Disneyland.

Since I keep the books and do my own accounting, I’ve benefited from having several separate bank accounts. And I’m not just talking about one for personal and one for business.

Anyone running a sole proprietor business under a DBA usually has a business checking account that’s separate from their personal account. This past year, I added another account to the mix, in addition to a standard business checking account. This one exists solely to keep Stopdesign’s tax savings separated from any other funds. A certain percentage of revenue is transferred directly into this account immediately upon receiving any payment. The account is only used for paying taxes Stopdesign owes, nothing else.

Even though I use financial software to keep the books and track accounts, I’ve found having this extra interest-bearing account is helpful. I always know exactly how much I owe the IRS. And I’ll always have enough to pay Uncle Sam when tax time comes around. Your mileage may vary.

Make sure you’re not getting dinged with monthly service fees. It should also be paying you interest. The more, the better. But it’s obviously best to stay away from stocks and other high-risk investments if it’s money you owe the IRS.

Stopdesign is actually back in the same building it used to share with Adaptive Path: The Hobart Building. A charming historic landmark, built in 1914, at the intersection of Market, Montgomery, Post, and Second Streets. I haven’t seen it yet, but I’m told repeatedly the Hobart is in the opening scene of The Maltese Falcon. I’ve even seen doors in our building that still say Spade & Archer on the windows. I guess I know my next movie rental.

Sharing the proximity with Adaptive Path founders was a great experience for the first two years for both sides. It’s bittersweet to not be in the same office with them anymore. But it’s time to establish a unique space for Stopdesign that can be made all its own. I can’t express how exciting having this new space is for me, and how much I love the new office, the building it’s in, and the location.

Rather than go on about it for any longer (my last few infrequent posts have been long enough), I’ll let some of the pictures I’ve been taking at the office speak for themselves. If you’d like to get an idea of what the space looks like, have a look at the latest photo gallery, titled, The Office.

Turns out I underestimated. By just a little.

Olivier Vanbiervliet pointed me to a public Microsoft page titled “Inside Microsoft“. The page provides a bit of “backstage” information about microsoft.com, including some detailed stats for the month of May 2004.

Their published traffic numbers actually state that microsoft.com got 1.2 billion page views in May 2004. Divide that by 31, and we’re not just looking at 1 million page views per day, but more like 38.7 million page views per day.

Which, if you do the math, with a potential average savings of 25 KB per page, works out to numbers a little higher that what I originally projected. More accurate savings could actually be closer to:

924 GB per day.

329 terabytes per year.

I updated the article to reflect these more accurate projections.

Stopdesign’s rent collectors at Adaptive Path and I have been hunting around San Francisco for larger, more flexible office space. A commercial real estate agent (pictured left in the suit, facing camera) was patiently herding us on a guided tour around downtown San Francisco, while we looked at pre-screened office spaces currently available for lease, interspersed with stops at Peet’s Coffee (necessary for the sustained endurance of office shopping).

This, folks, I guarantee is an entertaining adventure. Take a few designers, information architects, and user experience professionals. Show them wide-open, unobstructed office space. And you’re guaranteed to see minds churning, scheming and strategizing forty different floor plan layouts, then debating over every possible scenario for traffic patterns, collaboration models, privacy concerns, noise-level management, and of course, proximity to public transportation.

This photo was taken as we were exiting one of our more popular stops from the multiple afternoon tours. Sharp eyes may be able to identify the shifty character exiting the building behind the real estate agent. (Elvis has left the building.)

As I was using iPhoto to scan available imagery for the site design several weeks later, I accidently stumbled across the series I snapped when we were office shopping. I stopped on this photo primarily because of the muted color scheme which fit perfectly with what I wanted for company-related pages. There wasn’t much interesting about the photo until I zoomed in on the top-right corner, then rotated the image to create more dramatic lines and angles.

Reminds us that we can find potential beauty in the places we expect to find it the least — as long as shifty guy™ is cropped out…

Visitors will likely notice a few familiar elements and concepts in this design revived from the previous version. Once again, each section possesses its own carefully chosen color scheme, switchable simply by changing the class on the body element. The primary navigation recycles many of the same style sheet rules written for v2. Typography returns to the original combination of Georgia (regular-weight, never bold) and Verdana.

Certainly new for this design is the reorg of the home page, and the obvious deemphasis of the weblog there. Rest assured, the weblog isn’t going away. Nor does this indicate a desire to write less often. In fact, I’ve rejiggered the Log Archive page to serve as a replacement for those who come only for the weblog. This change in focus simply comes from the need to balance out the offerings of Stopdesign as a business, which I’ll explain in a later entry, already half-written.

Included in this redesign is a completely revamped Portfolio section which makes heavy, heavy use of Brad Choate’s MTKeyValues plugin for Movable Type. In fact, an average piece in the portfolio (comprising of a single entry in MT) with two or three larger-size previews makes use of no less than 21 separate key/value pairs just to generate all associated pieces of content and meta data.

Aside from the changes to the home page and Portfolio section, other interesting bits for this design include alternating background colors for comments, (via a simple PHP variable that toggles back and forth and writes a class to every other comment), exposed company-related navigation that sits in the markup just before the footer, yet gets pushed to the top of the page via absolute positioning, and fixed-width 2- and 3-column layouts that can be toggled independently of the color scheme (via a similar ID-change method).

Over the past few weeks, I’ve given significant attention to improving the search results for much more of Stopdesign’s content. In addition to the main weblog, searching will now return results from Recent Links, Articles, and the Portfolio. Because of the increase in utility to both site visitors and to me, the search form is given more prominent placement on many pages, and will probably start showing up on a few more as I have time to add it in. The results page is now served up within the shell of my own crude templating system via PHP’s virtual() function.

I could probably say a lot more, but at this point, I just want to flip the switch on my style function and get this design live. I’ll share more in future entries. There are a few CSS-related issues I’m aware of in both IE5.0/Win and IE5/Mac that I need to take a look at later. But most everything should be working and displaying properly in the majority of modern browsers. I’ll leave the rest for others to explore and [hopefully] enjoy. As always, feedback and critique are welcome.

The redesign includes a major reworking of Blogger’s home page and sign up process, and a new dashboard for logged in users. With this redesign, we focused on making the Blogger brand and interface much more friendly and approachable. The design features rounded corners, large icons, direct concepts, and helpful directions. Adaptive Path and Stopdesign worked with Google to pare down the sign up process (account creation), making it short, intuitive, and effortless for first-time visitors. We aimed at creating a structure and design that has as wide a range of appeal as possible. From the large base of Blogger’s existing users, to the multitudes arriving from Google on a regular basis who have no idea what the word blog means.

The Blogger home page now promotes the simplicity of creating a new blog by highlighting the short 3-step process. The page also presents a simplified definition of the word “blog” right up front, and directs new users into a short tour if they want to learn more. In addition to the site redesign, Google ups the ante for this relaunch by adding a slew of new features for their users: comments, user profiles, individual post pages, and conditional template tags. On top of that, they’ve significantly revamped the application interface to mirror the new look and feel of the site.

A few additional notes about the redesign:

New Set of Blog Templates

One of the new enhancements Stopdesign worked with Google to complete and include in this launch is the creation of a whole new set of user templates available for immediate use. Rather than have all templates created by Stopdesign, I thought it would be fun to expand the team involved. What if I asked other talented individuals I respected and wanted to work with to join me in designing brand new templates? I wanted to share in the responsibility of template design and creation, providing even more variety to Google and Blogger’s user base. You may know most (or all) of the names of those who graciously accepted to help me create these new templates:

• Dan Cederholm
• Todd Dominey
• Dan Rubin
• Dave Shea
• Jeffrey Zeldman

A peek at a few of the new blog templates:

The full selection of templates (along with their full-size previews) are visible inside the Blogger application. You may see more from the individual template designer on their respective sites about the design choices and techniques each of them used. As for the impact of this part of the project, not only will thousands (millions?) of blog templates now be generated with more flexible, scannable, indexable, and standards-compliant code, but anyone throughout the world can now create an account, start a blog, and have a personal site designed by any of the talented gentleman listed above, all for free.

The Evolved Identity

Sharp-eyed party-goers at the Blogger party in Austin during SxSW may have noticed the signage and multitude of free t-shirts they handed out which featured a new identity with rounded corners and a new type treatment to match. When we set out to establish the new visual identity of the site, we kept running up against the hard corners of the old Blogger logo, and the somewhat impersonal type treatment which limited the friendly qualities we were trying to inject into the brand. We didn’t want to push the logo far from what everyone knows — after all, the big orange B is widely known and loved by many a folk. Instead, we chose to evolve the logo, so it could take on a few new attributes. We sanded down some of the sharp edges and refined a few of the proportions, then carefully selected a typeface more suited to a product targeting the masses.

Home Page

Visitors without Blogger accounts, or users currently logged out will see a different home page at blogger.com than users logged into the system. The logged out page provides answers to the question, “What’s a blog?” and highlights how short and simple the new account/blog creation process is. The logged in page presents a new Dashboard view. The Dashboard acts as an enhanced intermediary between the site and the application interface. It provides a customized view of the Blogger home page by displaying a quick overview of the user’s blogs, related profile information, updated blog content, and Blogger news. Can’t say what else is in the pipeline for additions to the dashboard, but users can most likely expect many more changes and new features in the near future.

The new icons and buttons produced for Blogger (visible on the logged out home page and throughout the site and application) are intended to complement the amiable nature of the new brand. They pick up where I left off on a style I started using about six years ago for the Webmonkey Kids design. Some of the icons were sketched on pen an paper (ahem, numerous times). After finalizing an approximate look, the icons were drawn in Illustrator using a pressure-sensitive Wacom tablet and pen to create the base artwork, then cleaned up by manipulating paths and Bézier curves within Illustrator.

Design Execution

As true to the Design Process article, this project started with discovery and competitive analysis phases, led by the Adaptive Path team. I’ll let them go into as much detail as they want about the early process for this project.

Freeform exploration and brainstorming produced descriptive words, qualities, and elements to be used in the design. This was followed by tiny thumbnail sketches exploring loose layout and composition ideas. A few rough ideas sketched on paper made use of bold lines and thick rounded corners, which eventually led to the final design.

I’m using Adobe Illustrator more and more often for comping designs, and the Blogger design was no exception. It allows for easy object creation, manipulation, and resizing since everything is in vector format. I can easily move whole sets of objects, guides, and paths. The recent addition of the Effects menu allows me to apply a rounded corner appearance to each block without actually rounding those corners, as seen below:

(One gripe about using Illustrator for web stuff: after 11 versions, there’s still no easy way to simulate underlined text without manually drawing lines with the pen tool, then moving them every time the text reflows.)

A few clickable prototypes, several days of user testing, more tweaks and changes, and the down-and-dirty CSS work began. (Note: CSS didn’t really even enter the process until this final stage.)

Technical Insight

I won’t go into much detail here on technical details. But I will confess that this project is what finally prompted me to write about the IE Factor. The frustration of building a design in CSS and getting it to work across all browsers is certainly more apparent when you’re trying things you’ve never seen done or explained before. IE was the main culprit. Both Windows and Mac versions proved exceptionally difficult to bring into submission, but at least the Mac version had known workarounds and filters. Some of the features of the design (like the subtle background changes when hovering over the icons on the home page) were completely disabled for IE because they produced unintended and unacceptable results.

The rounded corners seen throughout the Blogger redesign (and in several of the user templates) make use of an expansion of the Sliding Doors technique written for A List Apart last year. The Blogger design is a fixed width, which means most of the modules of the site exist at pre-defined widths. Since the width of each module is known, one image is used for the top-left and top-right corners of a module, and another image is used for the bottom-left and bottom-right corners. The images are called in as background images for two nested elements. Since these two elements contain all the text of the module, they expand infinitely as the module grows in height. Think of it as Sliding Doors turned on their sides.

For modules requiring a border, the two images are modified to include top and bottom borders connecting the two corners. A third element gets nested in the HTML that uses left and right borders which connect top and bottom corners.

This design posed many other challenges when building it out, specifically because we wanted to allow the text and each of the design elements (header, modules) to be as flexible and scalable as possible. The markup construction was tricky and required compromises in several places. As is evident with the rounded corner modules, extra divs were necessary for each background image called in. In CSS3, border images will certainly help eliminate the need for extra elements. And I’ve been pressuring Tantek to get the CSS Working Group to consider allowing us to set multiple background images on one HTML element.

Wrap Up

As I have the habit of doing on product launch day, I’ve provided more than enough information for anyone to digest. I’ll close it off by saying that it was an incredibly fun project to work on. From the pleasure of partnering with incredibly smart folks at Adaptive Path, to the fun-spirited team at Google we got to work with, to the designers who agreed to help participate in a template project with little knowledge of the entire picture and, initially, not knowing who the client was.

This launch is a huge deal for Blogger. They may not have gotten everything right out of the gate, so I’ll cut them plenty of slack, and I would hope others do the same based on the number of improvements and enhancements they’ve made all at once. For instance, those who know my style and promotion of web standards may immediately try to validate the home page. I’ll save you the time and tell you it won’t validate right now. (If you’ve already visited Blogger and hit your Validate HTML favelet within a minute of seeing the new design, shame on you. Don’t you have better things to do? Aren’t there other things more interesting than making sure a new site launches with valid code the very same day?) A few simple omissions of closing brackets, and use of the target tag within a XHTML 1.0 Strict doctype is preventing the front page from validating right now. They’ll get to it eventually. Bear with them as they try to make sure everything else is working correctly for all the users who depend on the service to publish their thoughts and experiences to the world. Fixes and new features will most likely continue to roll out in the weeks ahead, so expect changes over time.

Overall, what a great project. Despite the frustration with browser rendering consistency that plagued us on the tail end of this project, it was still fun. Good client, good team, good product. What more could you ask for?

For the rest of the story on new features and changes, check out The Great Blogger Relaunch, which tells the story from their perspective.

Go read the article now. Then bookmark it for later when you’re gathering resources for a project manager or other decision maker who questions the value of heading down the standards path. My favorite quote from the essay:

Ever see an IT guy get excited about a new design? You will.

perhaps isn’t the most important point Jeff makes. But nevertheless, the statement is both humorous and entirely true at the same time. I’ve never seen IT managers and engineers so willing to work with a designer/developer on a redesign when they’re shown the stripped down markup and resulting reductions in file size and bandwidth.

If you happen to be in the market, I’d like to give an unsolicited plug for Gary Waterfield and the products he and his team create and sell under Waterfield Designs. The paragraph above describes his products perfectly. Great designs, convenient access, protective, durable, and stylish without looking like a Nike cross-trainer shoe.

I discovered Waterfield a few years ago, while looking for something to lug around the 7.5-pound PowerBook G3 Wired provided for me. With the abundance of bike messengers here in the city, Timbuk2 has always been an extremely popular choice. But I wanted something a little more sturdy, and found a flood of positive reviews of Waterfield’s products with a little research. After I ordered a green-front (um, “celeste”, whatever…) large Cargo bag from them, I found out why everyone spoke of them so highly. Not only did it arrive quickly (they’re based here in San Francisco), and with a hand-written thank-you note on the packing slip from Gary himself (their service is excellent), the bag was a beautifully designed specimen which held everything I wanted it to.

A year later, I purchased my own PowerBook G4. At the time, Waterfield was one of the only companies producing “sleeve cases” large enough to fit the wider Titanium notebook. Soft neoprene insides wrapped in the same Ballistic shell which made their bags so sturdy. These sleeve cases are great for adding that extra level of protection for any laptop. They’ve been so popular, Waterfield now produces them in a wide variety of sizes. The large Cargo bag I already owned featured an inside pocket which holds a G4 PowerBook-sized computer (including the sleeve case) snugly against the back of the bag.

It took me several years to drop down in size, but now that I’m using a tiny 3-pound 10-inch Vaio as a primary machine, I finally switched to an all-black small-size Cargo bag. [Mostly the] same features, but in a much smaller package, and a new sleeve case to match the size of the smaller notebook. The feature which always elicits an unexpected comment from a friend or stranger is the brushed aluminum aircraft seatbelt-style buckle on the front of the bag.

If you’re looking for a bag to protect a newly-purchased laptop, or want a replacement for your current bag/briefcase, like other current customers, I have no hesitation recommending Waterfield hands down, and can’t speak highly enough of them and their products. Excellent value for their slightly higher-than-average cost. They have other cool products too, including a popular iPod case, camera cases, and miscellaneous small gear pouches to hold power cords, external drives, or whatever else you like to keep in your bag of tricks.

Update: The way I originally stated something above is not entirely accurate. I should clarify that there are some differences in features between each size Cargo bag — they’re not exactly alike. The most important being that medium and small Cargo bags don’t have the same extra-protective hard-foam shell the large Cargo bags have. This is a significant factor if protection is a high priority. While I was using the large Cargo, I didn’t see as much need for a separate sleeve case, as it also had a rear pocket that held the laptop securely against the hard foam. The sleeve case is extra protection with the large Cargo. However, since the small Cargo (and medium size as well) has no extra hard-foam padding, I wouldn’t use it without the extra protection of a custom-sized sleeve case. I leave the sleeve case inserted in the bag as sort of a “liner” which my laptop can easily slide into or be pulled back out. I’m also searching for a piece of this hard foam to cut to the right size and place in the bottom of my small bag, primarily for shock absorption when I set it down. Technically, Gary and team may not recommend the small and medium Cargo bags for carrying laptops because of this difference. Just wanted to highlight the difference, especially since I might be using the small Cargo bag beyond its intended purpose and design.

Jeffrey Zeldman and I quietly start a small rumor that Happy Cog Studios and Stopdesign may begin collaborating immediately on a new project. We hear talks have been going on between involved parties for months. Additional details of the rumor will remain under lock and key for now. But you’re smart. Put the two of us together. You can probably imagine what the project might involve.

Update: To clear up some confusion and speculation, this does not imply a visual redesign is in the works.

The building HotWired started leasing in 1996 was more than a cool place to work. Wide, open quadrants in a four-story SOMA warehouse, tall ceilings, exposed beams and columns, brick walls, massive skylights, industrial-grade steel staircases connecting each floor, conference rooms with brightly painted doors and walls to distinguish each from the others. Of course, with Wired roots, when any surface was painted, it was usually coated with the brightest fluorescent color money could buy. Our desks were simple doors on sawhorses. Pens and paper were hard to find in an office which embraced electronic publishing and resource conservation.

In the early days, the cool factor of working in the office stemmed from the tremendous amount of energy and enthusiasm which permeated each floor. Experimentation was a way of life. Ideas flourished. HotWired was high on personality, creativity, and innovation. And very low on rules, process, and corporate cheerleading that plagued so many successive dot-coms several years later.

In latter years of my career at Wired, the office space slid downward in its desirability and enjoyment factors. The bright colors were still present, but didn’t seem as uplifting and edgy as they once did. The open design and casual atmosphere still greeted every person who walked in. But the feeling of emptiness in the space grew continually as a result of accelerated attrition and disgust with the corporate cheerleading introduced by our new parent company, Lycos. Multiple rounds of layoffs dealt continued blows to office morale. Shrinking budgets taught us those once-filled positions had permanently vanished, incapable of being replaced by anyone from the growing community of our nation’s job-seekers.

Though the joy of working in the office dropped considerably, it didn’t entirely cease to exist. The number of people working there had been steadily declining. But there were still interesting, incredibly smart, talented people coming into the San Francisco office on a regular basis. Working directly alongside each of them on various projects was always rewarding and inspiring.

Working in any office is not just about the environment, or the design of the chair one sits in (though physical factors can certainly make the office a more comfortable and enjoyable place to spend multiple hours of the day.) It’s also about the people with whom one gets to work. Good people make suboptimal work places more bearable, and possibly even pleasurable.

When I relaunched Stopdesign as a business late last year, out of practicality, I began working out of my apartment. Not long after leaving Wired, I started missing the energy from working and being around people all day long. I found myself constantly itching to get outside my apartment to work. I like quiet time alone as much as any person. But being so extremely independent was too much for me. I started going to cafes and public spaces to work, just to be around other people. I sought out comfortable spots in the city with open wifi and an array of food so I could camp out for hours at a time. Carry a small laptop, a power adapter, a mouse, and a phone, and you’ve got a mobile office that can go anywhere. That’s just what I did as I started out.

Fortunately for me, a close connection with the fine folks at Adaptive Path yielded an opportunity to pick up office space downtown. Well, it’s more like “desk space”. But it provides a means to help keep work somewhat separated from personal life. And it’s awesome. Not only is it located in the heart of downtown San Francisco with convenient access to public transportation and a multitude of shops and restaurants. [Ack, this sounds like an ad for an apartment.] Sharing office space with the partners of AP is a great experience. Good people. Their areas of expertise complement mine. And, of course, they know how to appreciate good design. So we get along well. Sometimes the office is bustling with people and energy. Other times it’s quiet and peaceful with just one or two people present. A nice mix keeps it interesting.

Having office space again… well, let’s just say I’m enjoying it.

But I’m fortunate right now to be dealing with a small number of good clients with interesting work. Intriguing prospects may be in the pipe for the near future. I’m happily meeting and getting to know many new friends. And having fun with the ones I’ve already known for a while. So I really can’t complain.

After I left Wired in November last year, I decided to take the rest of 2002 off to spend time traveling and visiting friends around the country. I enjoyed my time as much as I could. But the problem with this concept was the guilt I felt for not diving into details of the new business immediately. I’m a workaholic by nature. Unfortunately, I couldn’t stop thinking about all the things I needed to do. Or even the things I still needed to figure out. Friends can testify of my anxiety levels. Nonetheless, the time off was very much appreciated. And certainly the consultation with good friends was exactly what I needed. If nothing more, it showed me my career isn’t going to fall away should I happen to leave it rest for a month or two. Something we should all have the luxury of once in a while.

Since the New Year rolled over, I’ve been busy trying to balance the many tasks and responsibilities of starting a design business. Things like creating Estimate and Invoice templates, talking with contacts, strategizing direction, and even ordering updated business checks. I’ve also jumped into my first couple of client projects, which have swallowed up even more time, but that’s a good thing. Those who do this on a regular basis — and are writing a book — and are speaking at conferences: I’m still wondering how it all gets done.