Everything In Flux

By admin

When I design for for my own personal site, I am excited. I love the freedom that such an assignment provides as I head down one path for a personal identity and then another.

In this design process, I reach the usual point. The point where I become bored with the design and design never sees the light of day again.

That’s one of the reasons why I flipped the switch for the new design. I needed to get the site design out there before I lulled myself into sleep about the design. By rushing out earlier than I would have normally, I settle (or trick) myself into owning this design. Since it’s out in the open, I feel more of a need to finish it up and show how cool this design can be rather than letting it collect dust on some hard drive or DVD‑R.

So, there are going to be some bumps along the way as I wrap up the site design. I need to finish assembling some content and salt and pepper the final design to taste.

In the meantime, let me know how you design for yourself? Do you have a hard time designing for yourself as do I?

Nintendo’s Wii Strategy? The Web circa. 2000

By admin

Some news from Nintendo regarding their popular Wii gaming system:

During a speech at the Game Developers Conference in San Francisco, Nintendo game creator Shigero Miyamoto said the channel, to launch soon, will enable gamers not only to share their custom avatars, but to vote on them in popularity contests, adding another level of stickiness to the online functionality of Nintendo’s $250 next-generation console.

So, what is old again is new again? HOT or NOT came on the Web scene in late 2000.

It will be interesting to see if voting on people’s Miis will be as popular as voting for photos of real people.

Know Your Adoption Rate

By admin

Know Your Adoption Rate
Originally uploaded by teleject.

This week Angelina Jolie adopted another child, Pax Thien Jolie. (This time the child came from Vietnam.)

While not tied directly to the Web design or development industry, I thought it would be a good idea (or laugh) to contrast Jolie’s adoption rate with that of Internet Explorer 6 for Windows.

Please note that I included Brad Pitt as one of Jolie’s adoptions for my data. 

The ABC’s of Online Customer Service

By admin

I opted to use two different types of companies for two different work-related projects. 

Offering distinctly separate services and deliverables, the only similarity is that both Company A and Company B were both found online and I had never used their services before. After a while, though, I found they had another item in common: poor customer service.

Company A

Company A claimed quick turn-around times. So, it was a nice surprise when I found out through a direct message from them that they offered even quicker turnaround times if I simply inquired. 

So, I did. My only concern was it an upsell pitch for faster service, but I didn’t let that bother me as I was willing to pay to get this phase of the project over with as soon as possible. 

Turns out, however, that Company A does not offer a quicker service (even if you are willing to pay for it like I was). Their response was that they are too swamped with other orders to offer quicker turn around times. 

While that’s a good problem for Company A to have, why send a communication to a client (even if it’s a boilerplate copy sent via an auto-responder) saying you could offer something that you couldn’t deliver?

Company B

Company B produces quality products. However, working with them has become a nightmare. Every person in the company gets to send an email to me with their own questions and concerns about their own piece of the project. 

When I do answer one person, it’s as if the communication gets trapped in a sandbox. The other people that are involved in the project from Company B don’t get notified. 

Why do I need to be not only my own project manager for my side of the project, but step in and fill the role as project manager for Company B?

Is Crud the Name of Your Customer Service?

Other people and publications have written about customer service and its value to any business. My only contribution to this discussion is that based on recent personal experience, I can only concur.

If you do business online, you need to be make sure the communication to customers is consistent and clear.

Color Shades

By admin

During my brief talk at SXSW Interactive, I mentioned that you could use color shades. Color shades are small PNG images filled with a black or white color set to a certain opacity which can be used for tinting background colors or images. 

In this example, a color shade is placed in the background image of a heading that rests on top of a photo. 

Color Shade Demo

For another example, check out the CSS Cookbook site. There I use color shades to retain the gradient within the unordered lists that are placed in background of the design. 

If I used the traditional slice-and-dice/Image Ready method for production, I would need to have different background image for each list item. With color shades, I simply use two images: one color shade and the background image. 

A benefit of color shades is allowing site visitors to resize their fonts while maintaining the cohesive site design. 

Another benefit is the as ease of site maintenance. I can easily throw in an extra list item if I need to without breaking a sweat or opening Photoshop.

Downloads

To save you time, I’ve created a set of color shades (~171 KB) that are free for downloading and use. I’ve included shades of both white and black with stops at every 10 percentage points. Also included are color shades set 33 and 66 percentages as well as the original Photoshop source file.

Note: you will still need to use a method for supporting PNGs in IE6, if you still want to support that browser.

SXSW07: Unleashing CSS

By admin


How I Learned To Stop Worrying And Love IE7
Originally uploaded by chasingfun.

It’s only the first day of SXSW Interactive 2007 and you can tell how popular this event has become over the last few years. Thankfully, I had the pleasure of talking earlier today regarding CSS and IE 7 to a sizable portion of the largest SXSW Interactive conference I’ve every seen. 

The slides from the talk, “Unleashing CSS: How I Learned to Stop Worrying and Love IE7″, are available as a PDF (~2MB).

In my talk, which was shortened for time, I glossed over the finer details of IE7 and some CSS tricks. If you would like to know more about the talk, please take a look at my ebook, Releasing CSS, available from O’Reilly. In the ebook I go through some of the main points I made in my talk as well as cover the basics of the new things one can do in IE7.

CSS Cookbook, Second Edition

By admin

CSS CookbookIn late 2006, my new book, the second edition of CSS Cookbook, came out by O’Reilly. While the CSS Cookbook provides hundreds of practical examples with CSS code recipes that you can use immediately to format your web pages, I’d like to point out some of the other positives from this updated edition:

  1. Expanded. Coming in at 538 pages, the second edition is almost twice as large as the first edition.
  2. Revised and Updated. The book didn’t just add more pages to the previous edition. Not one chapter went untouched in the second edition. While we added more to the book, some recipes were thrown away if it was deemed out of date (like the hybrid, HTML table layout).
  3. New Chapters. Also included are two new chapters: one chapter geared for general CSS knowledge to help the beginners and another chapter for techniques centered on images.
  4. Bears. On the cover is the Grizzly Bear. TV star Stephen Colbert states that the Grizzly Bear is one of those “godless killing machines without a soul”. Sounds like all the backup you need to squash bugs, the web development kind and any cockroaches your girlfriend finds in the bathroom.
  5. Form Elements. Web forms makes the ecommerce world go ‘round. So knowing how a form element will or won’t be affected by CSS properties becomes paramount to any Web designer. That’s why I included in the second edition an appendix dedicated to detailing how form elements were affected by CSS properties.

    Screenshots showing how 20 CSS properties on eight form elements (checkboxes, file upload elements, radio buttons, text fields, multiple options, select elements, submit buttons, and text areas) were affected by in ten modern browsers (Windows Internet Explorer 5, 5.5, 6, and 7; Mac Safari 2; Windows and Mac Firefox 1.5; Windows and Mac Netscape Navigator 7.2; and Opera 8.5).

    In all over 1,600 screen captures were taken to get this job done.due to printing costs, the entire 160 page appendix had to be reduced to make room for other parts of the book, …like chapters one through ten. 

    Thanks to the phenom known as the World Wide Web, such physical limitations are mere annoyances. Therefore O’Reilly has graciously allowed the unedited 160 page version to be downloaded from their web site.

  6. Code Download. With a book that goes through code samples like they were going out of style, the new edition organizes the code in a much more orderly fashion. Now you can find the code sample as easily as you an find the recipe in the book.
  7. Thud. It seems like there are dozens of books coming out every month all geared at helping Web designers and developers make a better Web experience. That’s why I was floored when the editors at The Designers Bookshelf honored the CSS Cookbook, Second edition, as The Web Design Book of the Year.

Client-Side Digital Imaging with Flash: The swFIR

By admin

If you run a blog or a web site you might have run into is the need to make sure images that are placed in the content areas of your web site (like a blog post entry), that you will have to modify the images to fit in with the rest of the design. This attention to detail is one area where I look to see if a web site design is really good.

To make the process easier, web designers can use CSS rules to apply padding and borders to create some effects to the images. But at the end of the day, you are still placing boxes around a box‑y images.

From Jon Aldinger, Mark Huot and Dan Mall, a new solution has come about: the swFIR. With some JavaScript, some minor changes to markup and a Flash file, you can add rounded corners and rotate images while leaving the image itself on its own. 

Here’s a listing of the effects that can manipulated:

  • border-radius
  • border-width
  • border-color
  • shadow-offset
  • shadow-angle
  • shadow-alpha
  • shadow-blur
  • shadow-blur‑x
  • shadow-blur‑y
  • shadow-strength
  • shadow-color
  • shadow-quality
  • shadow-inner
  • shadow-knockout
  • shadow-hide
  • rotate
  • overflow
  • link
  • elasticity

If you will, you could think of this as client-side digital imaging. Leave the user’s browser, browser’s JavaScript engine and Flash plug-in do most of the work, while you get back to work on your Web 2.0 IPO.