Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Continue reading 10 Principles Of Effective Web Design

I love this! http://www.pingmag.jp/2005/12/09/the-website-development-process/

CSS Font and Text Style Wizard - a wizard to experiment with font and text styles and generate sample CSS style source code. You may also like the HTML and CSS Table Border Style Wizard. Both of these wizards will generate CSS and HTML code for your web pages.

5 Great Background Masking Techniques in Photoshop - this article/tutorial outlines five methods for isolating and extracting objects from photos in Photoshop. The tutorial covers the following techniques:

1. Magic Eraser tool
2. Background Eraser tool
3. Extract command
4. Quick Mask mode to make a selection and layer mask
5. Pen Tool to make a selection and layer mask

500+ Colours - 500 colours by colour name, Hex value, RGB value and Microsoft Access code number. This site also offers a web safe color chart, web smart colors, information on monitor calibration, and other resources.

Typography Crash Course Roundup - lots of great typography resources.

G2G Exchange - With this website you can share files with others from your Gmail account. If you’re working on a collaborative project with other students in class this is a great way to share source files. If you don’t have a Gmail account, please let me know and I will send you an invite.

Happy Monday everyone! Today we have new student orientation and an advisory committee meeting. Yikes! I would like to ask that you help each other, as I will be pretty tied up with both events. Here are a few web sites to visit while I’m helping our new classmates to get started:

Website Layout Cookbook - A visual reference for the web designer.
This website provides over 500 layouts to use in planning and designing websites. Great starting point!

37 Signals offers dozens of ideas for improving the holiday customer experience at your site.

Paul Stamatiou has an article HOW TO: Make a Blog Header Graphic that will teach you how to dress up a photo to use as a header graphic for a blog or web site.

If you’re thinking about a career as a freelance web designer read Bulletproof Web Design Contracts at SitePoint.com. This article outlines some of the hurdles a freelancer must face when working with clients.

For students who are learning Microsoft Office, you may want to take a look at some of the resources that I have created at http://www.wctrain.net.

Have you installed the Internet Explorer Developer toolbar? I have been using it for the last few weeks and it’s quite helpful. It offers a lot of the same tools as the Web Developer toolbar for Firefox. This is just a friendly reminder that these tools/extensions will really help when developing web sites. You can find additional helpful Firefox extensions here.

I wanted to bring to your attention a job search site called PageBites. PageBites.com allows you to search the Web for job openings and/or résumés. You can also post your résumé and/or job opening on our site. Ralph stopped by and posted some info on this job search site, but I’m afraid that you might miss it buried in the comments. I really liked this job search tool; RSS feeds are available for searches, the interface is clean and simple, and you can get job listings from numerous sources all in one place. You can also easily post your own resume.

MyPimp, the online calendar thing, is an online personal information manager. It offers the following organizational tools:

• Online calendar and todo list - never forget where you need to be or what you have to do
• Alerts - be reminded of important events via alerts sent directly to your cell phone or email
• Group calendars - join a group for your classes at school or create a group for a club, project team, or group of friends
• Address book - link up with friends and colleagues so you always have each other’s contact information
• Free - take advantage of our hundreds of hours of hard work!

Vertical scrolling tables from CSS Playground…Pretty slick, as are the rest of the CSS Playground demonstrations.

TJKDesign presents, One clean HTML markup, many layouts…, a demonstration of one XHTML file and numerous layouts using CSS.

Breaking the Web Wide Open! (complete story) by Marc Canter is an article that describes and discusses the current and future open technologies used on the web. I think this is worth a read.

RobotJohnny.com has some free “toyware” fonts for download. These are some fun fonts.

Some of you have mentioned to me that the current class forum is difficult to navigate. I tend to agree, the forum itself seems to be a bit clumsy. Currently we are using a content management system called Xoops. I decided to test some of the different content management systems to see if another platform would meet our needs. I setup a Mambo site and I am not sure that the forum module is any easier to navigate (but I do like the administrative interface…very easy). I then decided to try Nuke Evolution, a content management system based on the popular PHPNuke and I think this is the forum we may use. The reason that I think this might be a better choice for the classroom is because the forum uses the popular PHPBB.

You can try out the “beta” forum at http://forum.robinsblog.com/index.php. This really is a “beta” site since both the Nuke Evolution application and the site layout are both still being tested and perfected. Please take a look at the forum and let me know what you think about the navigation and ease of use.

Edit: 10/17/05 - The beta forum is giving me trouble (is that why they call it beta?) This is on hold until I can figure out the problem or a more stable version of the software is released.

The nice thing about using content management systems is that they offer a lot of great features for communities. You can add your own recommended links, news articles, downloads, write reviews of software, hardware, book reviews, and web sites, and create your own class journal. There are a lot more modules that I can add to the site, but lets see how you like it first, so visit today. If you like it, we can move the forum posts from the old site to the new site.

More beta news from around the web.

Yahoo now offers Yahoo Podcasts Beta; use this tool to browse or search for podcasts. The site highlights new, noteworthy, and popular podcasts as well. Listeners can rate and review the podcasts. You don’t need special software to listen, so you should be able to check out some of the technology podcasts in class (there is also food podcasts). there is even a tutorial for creating your own podcast!

When CSS hacks begin to fail. The IEBlog requests a Call to action: The demise of CSS hacks and broken pages. If you have been using any of the following hacks in your sites you may want to read this article:

html > body - http://css-discuss.incutio.com/?page=ChildHack
* html - http://css-discuss.incutio.com/?page=StarHtmlHack
head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/
head + body - http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
body > element - http://css-discuss.incutio.com/?page=ChildHack

It seems that in testing the beta of IE7 many sites are failing because of hacks. Surprise, surprise. Besides CSS and IE7 you will also learn about the new browser features that look pretty good. Microsoft also has a “Team RSS” Blog that you may want to check out.

CSSTidy optimizes your CSS documents. It will convert color names to hex values (shorthand if possible), duplicate properties are merged, unnecessary white space is removed, missing semicolons are added, incorrect newlines in strings are fixed, missing units are added, bad colors (and color names) are fixed. I would recommend that you keep a copy of your original CSS document on your hard drive for regular editing, when you are ready to upload, make a copy and run it thru CSSTidy and upload the optimized version. I suggest this because optimized documents are not as easy to read because all extra whitespace is removed.

Remember the Milk - get organized, manage all of your todo lists.

Another weekend just flew by! While I was working on the classroom site this weekend I found a few resources that I thought you might find useful:

Active Meter - tracks web site visitor statistics. There is a free, invisible version of this statistical service and you can track multiple sites. This service is very similar to StatCounter, but the log file size is 150KB (50KB larger).

Inquisitor Instant Seach - an instant search technology that takes the waiting out of searching the web. It is an AJAX-style web application that retrieves web results and suggestions as-you-type. Pretty cool!

OpenOffice.org 2.0 is an open, feature-rich multi-platform office productivity suite. The user interface and the functionality is very similar to other products in the market like Microsoft Office or Lotus SmartSuite, but in contrast to these commercial products OpenOffice.org is absolutely free.

Digg.com - another social networking site with a twist. At digg.com you can submit an article and digg members will comment on it and “digg” stories that they think are cool. Depending on the number of “diggs” a story may be promoted to the homepage. Here is the complete digg tools collection.

As I’ve mentioned in class, I’m working on recruiting more students for the program. I’ve posted ads at Craigslist, Contra Costa Times Online, Backpage, SF Guardian, Bay Area Classifieds, and SFGate. I have not received the overwhelming response that I had hoped for, but it’s still early in the game.

I got to thinking about Google Maps and the Local Search and decided to perform some test searches to see if our program was listed in the results. While the County Office of Education (our parent organization) was listed for training and computer training, nothing was returned for web design training or web development training. This is a shame, since we’re really the best deal in town.

I decided to investigate how Google gets its data for local search and learned that this was derived from web sites and then cross checking against the Yellow Pages. Since this class is not listed in the Yellow Pages, we’re not listing in the Google maps either.

I found out that you can visit the Google Business Center and update or add your business to the Google Local Search. It’s a pretty painless process, complete the contact information and then submit “keywords” that you think others may use to find your type of business. The final step is to select five categories that your business falls under. Within a couple of weeks Google will send a verification letter with activation instructions and your listing should be updated.

I wanted to share this information with you because I know that many of you either have a small business or you’re considering starting one. With the popularity of Google and Google Maps I think it’s important to be listed in their Local Search. I also think if you are working on Search Engine Optimization (SEO) for a company, this should be included in your efforts.

Yesterday I mentioned that Rachel Andrew has a new book available at SitePoint titled Build Your Own Standards Compliant Website Using Dreamweaver 8. I just wanted to let you all know that you can download a sample chapter of this book at SitePoint, it’s 130+ pages. Please don’t print this in class; if you would like to read this in print form I will print a few extra copies and share them with you. Just let me know, I would appreciate your feedback since this might be an excellent choice for adoption in the classroom. You may also want to read Dreamweaver 8 does standards at SitePoint which is also an excerpt of the book.

Google Search Tips 2005

PCWorld shares the 100 Best Products of 2005. Toys, toys, we must have toys!

GmailThis! - Very handy! Have a link that you want to send to someone via your Gmail? GmailThis adds a bookmarklet to your links bar, when you find a page you want to send, click the bookmark and Gmail will open with a new message including the subject and the desired link. This is really handy if you want to quickly email yourself a link to a web site from class. If you don’t already have a Gmail account for class, let me know and I will send you an invite.

TutorialSelect.com has links to a variety (a lot!) of tutorials for Photoshop and PHP.

A List Apart (ALA) has a new article, CSS Swag: Multi-Column Lists, that discusses how to create multiple column ordered and unordered lists. A List Apart also has another new article, Introducing the CSS3 Multi-Column Module. I would recommend this article to students who have experimented with CSS columns and who are interested in what future implementations of CSS may offer.

There are a few “top” CSS tip lists that are circulating around the sites that include “popular” lists (Del.icio.us):

Sitepoint’s My Top Ten CSS Tricks - this includes tips on the following:

1. Block vs. Inline Level Elements
2. Another Box Model Hack Alternative
3. Minimum Width for a Page
4. IE and Width and Height Issues
5. Text-transform Command
6. Disappearing Text or Images in IE?
7. Invisible Text
8. CSS Document for Handhelds
9. 3-d Push Button Effect
10. Same Navigation Code on Every Page

Pete Freitag offers the CSS Techniques Roundup - 20 CSS Tips and Tricks, which is a collection of popular CSS articles from around the web.

Web Graphics offers Maintainable CSS an article that provides tips on writing CSS that will be reusable with new browser implementations.

“The first issue of Treehouse, a PDF magazine dedicated to web development, will be released in early October 2005. To celebrate the creation of something new and good, the Particletree team is giving away the inaugural issue for free. You can sign-up on the site to be notified when the publication is released.”

InetWord offers an online, WYSIWYG HTML editor. This looks pretty good, but it only works in Internet Explorer 6.0 or earlier. You can sign up for a free account today.

I get a lot done, but I am a procrastinator when it comes to getting things that I don’t necessarily “enjoy” doing. Overcoming Procrastination offers tips on how to overcome the procrastination bug.