I’m packing up and getting ready to head to Las Vegas for Microsoft’s MIX07, dubbed a 72-hour conversation with “some of the most successful and innovative practitioners on the Web”.
This is the first time I’m attending. I’ve been anxiously awaiting this event after hearing about last year’s event.
Anyone else planning on attending?
Here are a few of the posts I made for Sessions.edu’s blog for design students:
After pulling the switch on the design, the general reaction to the design has been positive. Which is really good since I was worried that it might be too purple. At least, I’m out of my “green period”, Porter, right?
Just to document the changes and in case anyone’s interested, here are are a few things I’ve fixed and/or learned about as I’ve been working on the Flux design for the last couple of days:
The next items on my to do list involve mainly more spring cleaning on the templates. I need to get those cleared before I input the additional content. However, I do have one question I can’t seem to solve to my satisfaction:
Does any one know how to include Gravatar’s into your comments?
Gravatar lists documentation for a WordPress 1.2 plugin, but I’m running a more advanced version. Any chance the old plugin works for the current version of WordPress?
I’d like to know if it does so I know how much time I should invest in incorporating the icons into the site design.
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?
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.
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.
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.
Author and Web designer Dan Cederholm has a new home for his priced-to-go icon sets. Check out the handsome new digs at IconShoppe.
Former Tallahassee resident and fontographer, Fonthead, has released his slick technology-themed icons and arrows, ClickBits.
Today starts the day of a guest blogging stint I’m doing over at Sessions.edu. Their new-ish blog is geared for design students and has already covered a broad range of topics.
Later this week, I’ll be in Austin taking part once again in SXSW Interactive and doing a little book signing as well. Hope to see you there!
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:
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.
I work on a Macintosh. It’s easy for me to check my sites on Safari and Firefox… and maybe even Opera if I’m bored. But how does one check out my designs for the Windows OS? There are a few options to pursue.
The first option is to buy Virtual PC for Mac. It’s from Microsoft so you know it’s legit. However, I’ve found it beyond slow on non-Intel Macs. In this environment, error messages are punchlines from often heard jokes that take too long to be delivered.
If you own an Intel Mac, you should try out Boot Camp, an Apple application that allows you to install a Windows OS on your Mac.
The downside of Boot Camp is that you have to restart and log into one or the other OS. To run both a Mac and Windows OS on the same machine, look into Parallels, which cots about 80 dollars, or Q, which is free.
Personally, I go straight to BrowserCam since I still run on a non-Intel Mac. In one place, I can check the layouts of pages on numbers browsers on the PC without having to resort to buying a separate computer or installing a piece of software on my computer.
If you own a PC and wish to test Mac browsers, you could try iSafari, however I found the web site not to be as responsive as BrowserCam.
These options should cover most of your potential audience. Just in case I missed something, maybe you could tell me how you test your web site designs?
A common style of designers starting out is to build with what I call “design bricks”. A design brick is a Web page design that is a only an image or set of images exported from Photoshop, Illustrator or any digital imaging software.
You can see an example of a design brick at the web site for Cellar Grille. From what I’ve been told by my friend, they have some great food.
Also, I know just by not even going to the place myself (which is about two hours from where I live), that their menu is looks good, too. How do I know that? Well, their designer exported both sides of the menu from their design program and placed both sides as one image each on one web page.
There are several reasons not to design bricks, but I’m only going to touch on a few. (If you are familiar with building sites with CSS, you know these reasons since they are pretty much the same ones.)
For starters, spitting out large images as Web pages is not designing to the medium’s strength. The Web is an imperfect place to design. Where rigid control over the design found in print design is the understood norm, the Web is the wild west. Users have final say in how they view your content and the design that forms that content.
Fonts can grow to be large to help visitors with poor eyesight read your blog. Images might be turned off since they take to long to download. And people might not even want to install Flash because, well, in the wrong hands Flash can be poorly done.
How can you design for this frontier? You can shore up your fonts and presentation through a system that’s come to be called “bulletproofing”. For more information, check out Dan Cederholm’s book called Bulletproof Web Design.
Another reason is maintenance. When you are in charge of several web sites, being able to update the content needs to be a painless process.
I’ve had design students who will promise me that exporting a large design brick is easier than editing a text file. I don’t believe them since some HTML editing software I use has FTP capabilities built right in. In theory, I could open the file directly from the server, edit the content and hit save before the end of television commercial break or before Photoshop has finished loading its menus.
The third reason is copy and paste. I’m reliant on the web for making my life easier. If I need to tell someone about a great product, service or company, I want to be able to shoot over the link in an email, but I also send a snippet from the site’s content to entice my friend to check out the site.
More importantly, there are going to be times when I want to place contact information into my address book. Copy and paste makes that a mindless exercise. If that contact information is trapped into a large image, how long is it going to take me to copy that text into my address book?
The quicker you allow your content to be distributed, the farther your site’s reach will be. Getting a web site design together and putting it on the web is just the start. Making sure people can make efficient use of that content is one more step you can make.
The last reason I’ll touch on is search engine optimization (SEO). By having your content in an image, a search engine like Google won’t be able to know what’s in your site. If it doesn’t know your content, it won’t know how to place it correctly in the search engine rankings. The way to circumvent that is to have the Best Web Site Ever to make sure people all over the world are talking about your design brick. But that’s going to cost money and the last I checked, a 30 second spot for a Superbowl ad is a bit over two million dollars.
So, when you are designing for the web there are challenges, but don’t try to circumvent them by making a web design one large image. Face the wilderness of the web head on. It may feel like you are hitting a brick wall the first few or several times, but you will get the hang of it punching through in no time and become a better designer for it.