Building Design Bricks

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.

iPhone Means Never Designing For a Mobile Device Again

If you’re like me and a Mac user, you probably were glued to blow-by-blow accounts of Steve Jobs’ Keynote on Tuesday. I didn’t know Apple was going to announce the phone at this time–I was just wanting to know if they were going to update the Mac Book Pro line as I would like a suped up Mac Book that runs on Intel chips so I can run Windows and Mac OS on one machine. 

Instead of news about the laptop line of products, Apple released the news of it’s forthcoming revolutionary product, the iPhone, this past week. 

If you’ve own a cell phone for longer than six months, you should have realized it’s limitations. Unless you use a smart phone, it’s like we are carrying around, for the most part, hard-to-use calculators that have captured the voices of our friends, families and coworkers. The user interfaces are bad, internet connectivity is painful (if you have it), and good luck trying to keep your contact listings in any semblance of order.

After 2.5 years of development, Apple seems to have an overnight hit on their hands. An amazing user interface for an all-in-one device: an ipod, phone and internet communication tool. No more strapping an iPod mini to the cell phone with a rubberband! True integration.

The main point I want to address is the internet communication device. On the iPhone will come with a modified version of Safari that’s running on modern Mac computers. So, if you have a web site right now that works fine on Safari, it should work just fine on the iPhone. 

The catch is that the browser doesn’t support Flash. Well, at this moment anyway. This could change when the browser ships in June, but I’m not really sure that it will. It could be that the developers for the iPhone have pinned Flash-support as a low level priority. Or they’ve looked into Flash support and it may simply drain an already limited battery life (5 hours) even more.

One reason I believe is that the many multimedia-geared web sites like YouTube use Flash to deliver their content. 

If Apple allowed people to view this content through means other than the iTunes-approved method, why on earth would people buy music and videos to then have on their iPhone? Simple. They wouldn’t. And I know I wouldn’t. I already have a stack of CDs in MP3 format. I’m just waiting to get unbusy in order to put them into a system where I can pull them on a home network accessible by just me anywhere in the world.

Lack of Flash support is just one downside in Web development for mobile devices. 

The upside counters the bad Flash news, IMO, since you no longer will have to design a web site version for a mobile device.

If you never had to design a web site or web application for a mobile device, count yourself lucky. It’s somewhat painful to see a beautiful, working piece of art barely looking like it’s former self. 

The news of Apple’s almost-too-good-to-be-true browser on a cell phone proves that a rich internet surfing experience can be placed on a phone. There’s no need to strip down a browser and then put it on a phone. There’s no more need to strip down a web site to make it somewhat usable on a mobile device. Now that Apple has shown the way, its competition will be revving up their own versions. Just like Microsoft did with its Zune to compete with the iPod. 

In the meantime, we will just have to bide our time till the phone is available for sale.