Or has it really been solved?

Typekit released a blog post on May 27th introducing their solution which is supposed to revolutionize the way fonts appear online.

Looking at their promo image, I am initially and admittedly thrilled to see the words “Simple, Fast, Bulletproof.” because… if that’s true, then we’re in for a treat. But let’s think about this for a minute. As designers, most of us know how marketing works, and we know not to take it at face value. Upon further inspection, it seems to be without substance.

While most of the reactions I’ve read online have been “Hallelujah!” and “You guys will be rich when this takes off…” I’m glad to see some more intelligent, thoughtful reactions to this. With any vaporware (yes, this is vaporware right now) We shouldn’t buy the hype till it’s working. Making baseless statements like “it will change everything” should be something that people know better not to do by now when it comes to trumpeting software releases on the web.

I see several problems with this, many of which have already been touched on in the last 24 hours. From the description, this obviously has some sort of DRM. That’s not good no matter how you slice it. Just like a certain popular president, He’s saying one thing about DRM and describing the very opposite in the same breath.

“That’s where Typekit comes in. We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.”

They just can’t have it both ways. Don’t be fooled… Digital Rights Management comes into play in the above statement: “a consistent web-only font linking license.”

The problem seen with Typekit’s proposed solution is obvious to folks who don’t jump so quickly onto hype wagons. It’s hard to discern the exact details, but we’re looking at a centralized library of sorts with DRM-enforced font files served up to websites via extra javascript. Is reading a page in a special font so much better than reading it in one of the commonly available ones so much of a benefit that designers and web developers are willing to spend money and add more encumberances to their website? Will the cost be passed on to the site owners? I don’t think that I could sell this “benefit” to the majority of my clients, and I sure wouldn’t use it for my own purposes.

If you must force a certain font on your viewer, making them download a bunch of code or some other encumbrance, and have to pay for it in the process, then you’ve put a speed bump into the simple and clear communication that should be happening online.

And that’s what it’s all about – communication.

commercial_fonts css drm drm_fonts font fonts font_use hype vaporware web_design

• Increase website load times
• Save bandwidth (bandwidth costs money)
• Help the website look more professional
• Help visitors have a much better experience

Here are some general image-use guidelines:

1. Never re-size images in the content manager.
   The image must be sized properly in a graphic program such as PhotoShop before it is uploaded into a website. The reason is that when you scale down an image that is too big, the user still has to download a big image even though they only see it small. This slows down the website and harms the user experience. In addition, the image will appear “jaggy” and looks unprofessional.
2. Don’t use a transparent image saved in “24-bit PNG” format.
   A lot of people still use Internet Explorer 6, and it doesn’t support that image format. Images saved in this format also tend to have a large filesize. Unless you are a web developer and know what you’re doing, don’t use this image format.
3. Compress your images properly.
   No normal image should be over 100K. If it is, then you can usually optimize it by compressing it a bit more. This is often seen as a percentage slider when making JPG files – set this to 80 or less. There are exceptions to this rule, such as showing a large photograph.

Here is a general guideline to help you decide what image type to use:

• JPEG: Good for photos, bad for logos, text and artwork with hard edges
• PNG: Good for text, logos, and images with hard edges or solid colors, bad for photographs. Also the preferred format for images with transparency (PNG-8).
• GIF: Good for small animations, text, logos, and hard-edged artwork.

artwork bandwidth_costs_money format_images image_format image_type png_format transparent_image web_images best_practice

It’s much easier and more cost-effective to hire a professional freelancer rather than hire an employee. All it takes is a bit of communication and an IRS form 1099 a year later.

Let me state the benefits of going with a freelancer:

1. Freelancers have less overhead.
   Skip the red tape and the layers of bureaucracy. We’re leaner, faster, and better. On average, you’ll spend about 60% of the cost of going with a web firm.
2. Freelancers have a greater desire to excel.
   I’m a freelance- and my livelihood rests on doing a great job. When you call, I am the one who answers. Going with a larger firm, your project might be handed to an intern with nothing on the line.
3. Freelancers provide a wide range of services.
   Anything a media firm can do, a qualified freelancer can do. This is because most freelancers are entrepreneurial go-getters who used to work for those same media firms.
4. Freelancers are cool.
   Well, some are nerds… but I digress.

So, just because you have to be careful with your marketing dollars, doesn’t mean you can’t get some quality work done. Contact an independent contractor (such as myself) and we’ll fix you up good.

business_trends economy freelance freelancer independent_contractor job marketing media_firm small_business web_firm

While I’m not privvy to the conversations that were had with my various competitors and their clients, I hope the clients aren’t being fooled into thinking that they are buying custom design.

While using a pre-made web design templates is a good idea when the client wants to save money, taking credit for these designs and removing the original credits is usually illegal and unethical, as it can violate the original designer’s terms of use.

Let’s go ahead and review some basic ethics:
When using a ready-made template,

• Notify the client
• Don’t call it custom design
• Pass the savings on to the client
• Don’t claim the design as your own
• Stick to the copyright obligations regarding the display of original design credits

Tags: web_design web_development custom_design design design_fraud ethical ethical_practices ethics fraud template templates copyright

A whole lot has been said about Web 2.0 as a design style, and I won’t go deep into that or try to rehash all that has been said.

The Smashing article in question was written a full year ago, so that is a factor in this conversation.

Web 2.0 is certainly running it’s course, and may be heading out to some degree – but “Web 2.0″ as a style is mostly a misnomer.

Good information design will never go out of style.
Simplicity, clarity, lack of clutter, and accessibility – all hallmarks of the “Web 2.0″ style – are cornerstone factors of good information design. When it comes to web design, students should first learn something about good information design for communication’s sake, THEN learn about design for art’s sake… in that order.

“Web 2.0″ as a style is becoming more and more diluted as us web artists ache to go exploring into rougher, more exciting terrain again.
Real grunge (distressed typewriter text and splatters and other such stuff from the 90′s) was completely played out around 2001. We had a waves of tech and uber-tech-splatter-grunge in there, then grunge resurfaced in the form of “coffee house” type stuff. Hallmarks of the coffee house style are floral shapes, hand-drawn elements, swirlies, and “starburst” radiation backgrounds. This stuff has been popular with CD covers and t-shirts for years now.

About the time Web 2.0 started, this “coffee house” grunge was close to full stride.
I even recall conversations about this very thing with my wife (she’s a designer as well) which we had a two years ago. We talked about how popular the “coffee house” style was getting, and wondered how long it would remain in stride.

I still see this “coffee house” grunge a lot, but not in any amounts I’d call a resurgence. I would even say go as far as to disagree with the article and state that what they’re calling “grunge” was starting to fade even a year ago.

Thoughts? comments? feel free to share :)

The Vineyard’s website design was one of these satisfying projects. The slate was almost totally blank; and what little restrictions I had were more or less my own; as my wife and I are solely responsible for the branding of all the church’s materials.

Visually, the overall goal was to capture the “coffee house” feel of the Vineyard. This is pretty clear in the use of colors and textures. (My wife really got me into textures last year). The design strives to capture the artistic nature of the church. It’s one of the most artistic churches I have ever personally seen, with regular integration of fine art and multimedia into special events and other programs. I was asked to enlarge the logo, but I resisted.

In order to keep things as usable and as accessible as possible, I opted for good semantic markup and tried-and-true tab navigation for global levels, with sub pages being listed on the side for flexibility. I make no use of flash except for video content, and kept the javascript minimal – using it only to fade in the randomized homepage images and to display flash with swfobject, to get any flash used to validate. The homepage at 150k is a little heavy on the bytes for my taste; but it is a sight better than many new CSS websites I see going up these days. I still believe in being nice to the few folks left on dial-up – perhaps out of sheer habit. The images could use a little less compression, but I’ve reached a nice balance of “looks nice” and “under 200k.”

The site is run by Etomite, one of the best kept secrets in Content Management and best known for it’s extreme flexibility; and is tweaked to be as automated as possible so that the editors only have to worry about their content. Multiple editors each have rights to manage their own sections, and have access to automatic image handling and the ability to add photo galleries and flash content with no knowledge of html. Sermons are handled by a nifty mp3 management snippet, which also generates a podcast feed for those who want to subscribe.

I made use of Google for the events calendar and the maps page… you gotta love Google. Initially I searched about for a good solid open source calendar, but did not find anything that I was comfortable with (if you know of something nice, post a comment and let me know.).

Technorati Tags: Castleton, church_website_design, css, Etomite, Indianapolis, sermon_podcast, vineyard, indy_vineyard, web_design, xhtml

Being no programmer, I am personally unable to shoehorn this editor into my favorite CMS, Etomite. I do know CSS however; and that allowed me to change Xinha’s text edit area to operate in a “what you see is what you mean” mode. This makes an excellent tweak to Etomite, and I am trying to get this added into the official Etomite Xinha editor package.

The ramifications of this really come into play when you deal with the usual markup quirks – extra carriage returns, broken lists, extra empty paragraphs, pasting in from Microsoft Word, and degraded accessibility. Any web developer can attest to this: the content styles get corrupted when the end user pastes in from Word or mangles up their content. This CSS mod goes a little way towards the process of training them to have good clean markup.

You can grab the CSS and all support images Here.

Technorati Tags: text_appearance, cms, etomite, markup, stylesheets, valid_content, valid_text_editor, website_editor, wymeditor, xinha, css, wysiwym

I know Ben and Dan are great designers as well, and they have come up with a simple, cool and creative design for the FAB Crew website.

From the website:

Indianapolis-based artists Ben Long & Dan Thomson started the graffiti mural crew FAB (Fantastic Aerosol Brothers) in 1998. They have been working together and separately since. Their site presents their collaborative work and their strengths as individuals.

Pay them a visit, drop them a line, send them some love.

Technorati Tags: aerosol, artwork, fab_crew, graffiti, Indianapolis, web_design

Stepping out of my clean and organized world of validating XHTML, CSS, and good design, I entered a world where it just didn’t matter. Before stopping by several shops, I went online and hit every website I could find. I found that roughly 50% or less of the companies I went to see has websites; and the ones who did, were terrible things; old table-based layouts using templates that may have been designed 10 years ago. Content was sparse, uninformative, and out of date.

Of course my eyes lit up as they always do at the opportunity – all of these companies in need of what I provide.

My outlook quickly changed however, as I stopped by each business. These independent business owners looked up at my arrival like I was bothering them, turned me away because they were heavily backlogged, or paid scant attention to me at all.

A well-designed and smooth-running website was the last thing on these people’s minds. Validating XHTML? They don’t need it. Their websites, where they exist, were like a discharged fire extinguisher sitting in the corner. They thought they needed it once, may have a nagging suspicion that it’s still important, but over the years they’ve done just fine without it.

I suspect this is pretty normal for much of the service industry.

Technorati Tags: web_design, service_industry, perspective

The website is chock-full of “Web 2.0″ goodness – if you can find your way around it.

Web 2.0

We collaborated with design partner Studio Blue and the IMA’s marketing and technical staff to develop a highly functional and visually engaging site that incorporates many of the hottest “Web 2.0” technologies like folksonomic tagging, blogs, podcasts, YouTube integration, and AJAX-style visual effects. The use of Drupal 5 was instrumental to the success of this highly ambitious project.

They’ve got Webisodes, folksonomic tagging, blogs, podcasts, mash-ups. It’s like two web 2.0 buzzword-laden semi trucks collided on the way to Indianapolis. Apparently the valid XHTML truck was nowhere to be seen, however:

Layout
First and foremost, I’m a designer- paid to make sites usable, paid to make information clear and presentable, paid to make things better and clearer for the audience. Before I look any further under the hood, let me just say as a usability proponent, this site is a tough one to grasp. I felt like a mentally-challenged monkey on crack with an attention-span of 0.039 seconds trying to make sense of the home page. The barrage of squares is an assault on my senses. Then I started rolling over stuff – things start changing… things away from my mouse. My eye bounces around in a random, confused headache-inducing manner, due to the lack of visual hierarchy.

Navigation
31 requests and 347 K gets you three, no, make that four or five areas of navigation. The header (in two parts,) broken by a large roman head , A “blue boxes” navigation in the upper-left, and a prominent “red boxes section” to the right and slightly lower; and a footer. The navigation is all rectangles and squares – but look out, all rectangles and squares are not navigation. No, there are many more rectangles and squares that do things, flash, blink, hover, animate, twitch. They look like close-up shots of TV static- and static is something you’d not expect to see on the website of an art museum.

Image Compression
Then we have this green calendar. the first thing I notice is that it’s very poorly compressed, and looks terrible. I run super-high 2560×1600 resolution so things really tighten up on my monitor, but it’s still pretty glaring. The compression issue lives in other places too: in the little “static” boxes as well… all over the page. This poor compression would be even more obvious on a lower resolution. Why the poor compression? According to the writeup at Drupal, they had so much javascript (Thanks, Web 2.0) that they had to install a backend javascript compressor. I think that all of this javascript, combined with an overall bloated design, left them with little choice but to compress the heck out of their static images. Funny how they never looked at this from the top down- there are many ways to skin a cats and I guarantee there’s a way that didn’t involve javascript bloat.

But wait- why are those solid color blocks jpg files? Didn’t the intern who generated the design realize that the basic stuff web developers were learning since 1995 is true – that indexed image formats are way better for non-photo images? Why not use 8-bit PNG files? They could have cut those image sizes in half- or more, and it would have looked perfect in comparison. After seeing that the largest image on the page is one of those “TV-static” animated gifs at 40K, I have to throw my hands up and end my compression rant. The page is just simply not built well at all, in terms of compression.

Legibility
You may have noticed from my screenshots that the text seems “clogged,” primarily in the calendar and headers. At first I thought that I may have had my browser text-size turned down a notch. This was not the problem, however. I visited a few of the interior ages and was glad to see that this problem did not transfer to the body copy. Digging deeper, I see that this is because they spec Helvetica as the first choice for these areas, bolded, and shrunk to 85%. Having used Helvetica online myself, Helvetica is not a web-friendly font and shouldn’t be shrunk too much. The anti-aliasing of this font at small/bold is just terrible. It looked bad in FF2 and IE7.

IMA, why did you have to go out of town for this sub-standard work? Indianapolis is full of her own talented designers and web developers.

Drupal Writeup on the IMA >

Technorati Tags: art_museum, bad_web_design, ima, Indianapolis, museum, usability, web_design