12 Steps To Professional Web Design

Found this article and thought I’d share. I agree with pretty much all of this. Definitely worth a read. Here it is.

~Charlie

Impressive Flash Sites

I found these pages from a site I included in my final project. They list some flash sites which are creative and are designed real well. As soon as the semester is over I think I might look at making something as interactive as one of these sites for fun.

http://dzineblog.com/2007/12/amazingly-creative-flash-sites-that-i.html

http://dzineblog.com/2008/01/award-winning-flash-websites-of-year.html

Web Developer’s Field Guide

This is an amazing list of pretty much everything you ever wanted to know aboot web dev, all in one convenient location. The Web Developer’s Field Guide.

Liquid Resize Photoshop plug-in: resize an image without traditional geometric limitations while minimizing distortion

Liquid Resize will allow users to resize an image without traditional geometric limitations while minimizing any distortion that would typically result from changing the original aspect ratio of an image.
It’s a free plug-in for Mac and Windows, beta testers are encouraged to participate.

http://www.creativepro.com/article/onone-software-announces-free-liquid-resize-public-preview

User Interface Guidelines

This article caught my eye. You can take what you want from the author’s views on Apple vs. Microsoft, but it was their UI guidelines – the article includes links to both of them – that I found most interesting. Whether you’re developing static web pages, full-blown fully-featured web applications or something in between, these sets of guidelines provide some worthwhile considerations and guidance.Mike A.

CSS Navigation Trick

http://www.sitepoint.com/article/top-ten-css-tricks

Yeah, it’s another top 10. I’m really only looking at Tip #10 this time. It’s a great way to get your navigation hi-lited on each particular page without having to recode the nav on every page of your site. I haven’t tried it yet, but I will on my personal site (which I am currently slowly redesigning anyway) and then I will update this post with the results. I’m hoping it’s a winner.

Design Measurement Units

Hi,

I am searching the web trying to find a good unit conversion table for web & graphic design. Here is an article- I am not sure about the first half in reference to <big> but the rest about defining points or pixels is useful.

http://developers.evrsoft.com/articles/pixel_vs_point_size_fonts.shtml

This article provides a more detailed description of the units.

http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-2-Units-of-Measurement/

It made me think of Edward Tufte

The comment boksoira made on Dorian’s post (re free XHTML and CSS templates) concerning minimalist web page design winning over fancy, flashy, confusing design made me recall some of Edward Tufte’s ideas about information design. Tufte’s perspectives on visual information have always resonated with me, perhaps because what he has to say relates to the presentation of statistical information, an area of responsibility of mine for a number of years of my professional life. I was fortunate enough to have attended a couple of his remarkable day-long seminars; more information about Tufte and his seminars can be found at his website.

While Tufte’s concerns are larger than the web, he has much to say that is very right on about web design. To paraphrase him: never harm the content — the design should be based on the content, not the other way around. He puts a lot of emphasis on making small, subtle visual distinctions in design elements and rails against what he refers to as “chart junk” – over-busy grid lines, redundant overblown representations of the simplest data, the “debris” of computer plotting and the like. It’s easy to relate his thoughts to web presentation.

Tufte developed what he refers to as sparklines – intense, simple, word-sized graphics. I’m not sure if boksoira was talking about Flash when he said “flashy”, but there are good examples of Flash being used to present large amounts of data in a simple, small yet intense manner. A great illustration of that is what looks to me to be a sparkline-inspired graphic that ESPN uses to recap the progress of basketball games. The graphic is called “game flow”. A link to the one from today’s (03/02) Tennessee -Kentucky game is here. It’s down a little ways on the right side of the page. Click on the graphic to activate it. If the link is no longer viable when you’re trying it, just look for another recent recap of a completed basketball game on ESPN.

Free XHTML/CSS Templates For Web Design

I saw this while browsing on my email. It’s kind of cool you just download the css stuff and put it to work. They show you previews and all for it. You might even be able to upload your own onto the site.

http://www.templateworld.com/free_templates.html

- Dorian

Embedding Flash In A Strict Compliant Environment

Ever use those little embed tags to post flash? Well, they’re not compliant.

I have to build a website for my MULT 109 class, and since I’m in WEBT I decided that I would try to make every page strict compliant. Then I got to my flash game page. What a nightmare!!!

Anyway, I did an exhaustive Google search for an answer, and I found these articles:

• The Standards-Compliant Flash Object of Desire
• Flash Satay: Embedding Flash While Supporting Standards
• SWFObject: Javascript Flash Player detection and embed script

The third article is the one I finally went with. It was a bit of a bear, since it involves javascript, and CSS for layout, rather than just a simple cut and paste embed script, but wow it works!

Here’s my Valid XHTML 1.0 Strict webpage for proof. There are a  couple of CSS issues I’m still working on, but the page is valid, AND the flash works in both Firefox and IE. I think that’s worth a little extra credit.