Design, SEO, Lots of Food for Thought Today

There’s plenty of fascinating reading around at the beginning of the week. Here are just a few for inspiration and helpful info:

• Jeffrey Zeldman’s Lecture notes online post leads to plenty of helpful tips for Designing with Web Standards and Accessibility and Section 508. Also available are notes from previous lectures on CSS and the move from HTML to XHTML.
• Using XHTML/CSS for an Effective SEO Campaign
  by Brandon Olejniczak is A List Apart’s latest article where you can learn some tips to improve your search engine rankings with some simple but effective ways to improve your site’s readability for search engines.
• Designing for Search Engines and Stars is a tutorial I wrote for Digital Web with lots of tips for improving your site with search engines, too. Although the tutorial is over 2 years old now and some of the website examples are gone or outdated, most of the tips are still just as valid today as they were two years ago.
• Pixelsurgeon Cured
  Clagnut’s XHTML and CSS markup redo of Pixelsurgeon’s recent interview with Super Furry Animals.

Richard Rutter of Clagnut is back after some time off with plenty of interesting things to say, including comments from others about Todd Dominey’s new tasteful and beautiful design for the PGA Open Championship being too gray “Which is like saying you don’t rate Ferraris because they are red - completely ignoring the inherent beauty and engineering prowess.” I also agree with Richard’s thoughts about the appropriate use of Flash for a site like this. Nice work. I didn’t check it out for accessibility needs yet, though, so I can’t comment on that part.

The above comment about their new design being too gray reminds me of some correspondence over the weekend with someone who mentioned a “zap colors bookmarklet to make pages more readable” who also wrote at being “amazed at how much easier it is to read most blogs after I zap the colors.” Some folks may cringe to think of someone zapping their designs like that, but one of the beauties of reading on the Web is the flexibility like this, too. Personal weblogs often use colors and overall design more creatively than a newspaper- or magazine-based site or more conservative commercial sites, of course.

Additionally, there’s a huge range of readability needs. I’ve seen many people in their 20s wanting smaller font sizes, such as a 10-pixel size for the main content, while people over 40 may prefer or need larger font sizes, many have some form of color blindness, and many have other visual needs that require larger font sizes, more contrast, or something else. And then there are screen readers, voice browsers, and accessing the Web via cell phone or PDA. There are also government guidelines and requirements and other accessibility issues.

One of the many challenges of designing for the Web is the wide range of variability with browsers, screen resolutions and the actual window sizes people use, how monitors and other displays implement colors, personal preferences, and the ability of the user to change one’s own experience by using a customized style sheet and other settings available within browsers and computers, such as that bookmarklet to zap colors.

FeedDemon Beta 3a Release, RSS News

FeedDemon Beta 3a is now available for downloading for all interested in giving it a try. The FeedDemon 1.0 Beta 3a Release Notes reflect quite a few positive changes and fixes for this promising syndicated newsreader/organizer.

I’ve just downloaded it, so I have only my first impressions for the moment. The first impression is good, though, and immediately obvious is the fine tuning to the GUI compared to the previous beta version and how much better everything works. Nick has been attentively listening to beta testers' comments and working away at improvements and fixes, and the results are quite apparent. I’ll write more after I’ve tested it further.

I’ve written more about FeedDemon in previous posts, including links to other reviews, too:

• Upcoming FeedDemon RSS Reader and Organizer
  June 4, 2003
• Friday Feast #47: Web Standards, TypePad, FeedDemon, RSS, Moblogging, and Photography
  June 6, 2003
• More on FeedDemon and Bradsoft
  June 8, 2003
• Friday Feast #50: FeedDemon Beta, WaSP and Microsoft, Weblogs and RSS
  June 27, 2003
• At Work and Home: Synchronizing your RSS Feeds
  July 2, 2003

Cited Links for Bradsoft.com has many more listed, too.

The Latest with Weblog Syndication

Also released today is a story by Paul Festa, Dispute exposes bitter power struggle behind Web logs. Interesting reading.

Friday Feast #54: Design, HTML Editors, MT, Photography, Regex

Today’s Friday Feast covers a fun web design competition, a beautiful photography competition site, rants and raves about HTML editing tools, adventures in prototyping, top-notch design sites, regular expressions, and a few of my own brainstorms, rants, and raves.

And the Winner is...

Zlog’s Ronan won Ben Hammersley’s design competition for a new weblog design. Ben gets a pleasing-to-the-eye new design and Ronan gets an iPod for creating the new XHTML Strict and CSS design. Not a bad deal for both of them. Congratulations to Ronan!

Ben has also provided the CSS and Movable Type templates for the rest of us to check out, too. Some of the other entrants' designs are also available for purchase. Nice work, and it’s clear that Ben had a tough decision indeed.

Prototyping with Style

Prototyping with Style is a new article at Digital Web on design and prototypes written by Jeff Lash. Tools and approaches for prototyping are discussed, including using CSS and XHTML. Jeff explains how CSS can be used easily and effectively for user-centered design work to rapidly develop prototypes for usability testing, review, and analysis.

Jeff’s article hits home with me, too, as I explain below in my adventures with prototyping and Movable Type.

Speaking of Prototyping with Style...

If you looked around my site during July as I was transitioning from Blogger to Movable Type and creating my new design you would have seen that I initially created a simple prototype. I did that to work with Movable Type to set up the archiving, add plugins, and test and implement features. I imported a few of my posts from Blogger to have some content for the initial work, and I later imported all my posts still using the prototype design while I continued to tweak features and work with Movable Type.

Once I had set everything up within Movable Type I then created the new design based on those needs. XHTML and CSS was the logical and easy choice to use for this process, and it worked beautifully. While the new design may visually look quite different from the prototype’s simple layout, the structure for the new design is what I created and tweaked during the prototype process.

Movable Type has many built-in templates already available for use that can be all that many people need. I examined them initially to learn about the tags and see how the program worked with their templates. Being a website designer by profession, though, I naturally wanted to create and develop my own design and approach based on the needs of my particular site.

I’m not yet finished with the site and the new Movable Type implementation even though much of it is already live online. I’m building it out in phases so that I can go ahead and take advantage of Movable Type’s features for my daily posts while I continue to work behind the scenes in my off-time hours to build the entire site with Movable Type, not just the weblog posts. For more on using Movable Type for an entire site, see my mid-July post Creating an Entire Site with Movable Type.

Latest WPDFD

Joe Gillespie posted the August edition of Web Page Design for Designers and I think you’ll find it just as fascinating and insightful as always. The August Editorial leads into an article called Factor-X that highlights the major differences between print and web design. There’s also a review of the latest versions of HomeSite and BBEdit. And there’s plenty more, plus all the previous issues and resources.

Speaking of HomeSite...

As a long-time user of HomeSite I’ve been increasingly disappointed to see this program initially created by Nick Bradbury pretty much stall in its development under Macromedia’s ownership the past few years. Dreamweaver and Contribute most likely have much more of Macromedia’s attention, and these are two products that have made tremendous improvements overall and have loyal followings. I recommend them both to people. At the same time, though, it’s so unfortunate to see HomeSite, such a longtime favorite and popular HTML editing tool, going almost nowhere in quite a long time.

Nick Bradbury also created TopStyle, though, which I’ve used forever for CSS. So when TopStyle became a full blown XHTML/HTML/CSS editor I gradually migrated all my web work to it. TopStyle has an intuitive user-friendly interface, it’s easy to use, and it uses very little system resources (unlike HomeSite). I can’t even remember when I opened HomeSite last. Folks who know me know that I don’t say that lightly, as I’ve written tutorials on HomeSite, I even considered writing a book on it quite awhile ago now, and I used HomeSite right from the start in its early beta days when Nick first created it.

I still think HomeSite is a terrific program and I still recommend it to people, of course. I recommend TopStyle more often now, though, especially for its more user-friendly interface. I hope Macromedia will take notice of the need for solid editing programs for hand-coders and develop HomeSite further, but based on their site information and their product releases it certainly appears that they’re more interested in their other products than putting much into serious development for HomeSite. I’d like to think I’m wrong about that perception, but we’ll see how things go.

Photography

Gorgeous photos at DPChallenge where you can browse the collections, join in the community, and compete with others for the latest photography challenges. Beautifully done site.

Regular Expressions

Users of HomeSite, Movable Type, TopStyle, Abacre’s Find and Replace, and other programs have seen references to using regular expressions, aka regex. I’ve listed below some helpful resources for regular expressions and a couple of books.

Online Resources, Tips, Tutorials

• A Brief Guide to Regular Expressions, by Dorothea Salo, is a terrific introduction that explains how regular expressions work and provides some helpful examples.
• Pattern Matching and Regular Expressions by WebReference.com, is a helpful tutorial that explains how to use regular expressions in JavaScript to analyze the user’s input and verify information, such as an email address or phone number.
• Regular Expression Basics, by Chris Spruck (sprocket) for Evolt.org, covers many examples of how to use regular expressions.
• Regular Expression Library currently has over 300 regular expression patterns available for use, a helpful reference cheat sheet, Web Services, a regular expression tester, and several discussion lists. You can search for regular expressions and browse through them by section, such as email, URI, numbers, strings, dates and times, and a miscellaneous section for everything else, such as a credit card validator just for American Express, MasterCard and Visa.
• Using Regular Expressions is a helpful introduction with examples by Stephen Ramsay, Assistant Director of the Electronic Text Center, University of Virginia.

Books on Regular Expressions

• Mastering Regular Expressions, Second Edition by Jeffrey Friedl, published by O'Reilly July 2002. See also the companion site where you can check out the Table of Contents, the index, and more.
• Regular Expressions Pocket Reference, by Tony Stubblebine, published by O'Reilly, May 2003. You might be interested in Tony’s blog.

More

Friday Feast archives

The Process of Blogging

How do we go about writing for weblogs? How can we enrich our relationships with our readers? How can we improve on the comments capability at our sites? Dave Pollard wrote his thoughts about this, The Blogging Process. Self-described as:

“A pretentious and presumptuous attempt to document what bloggers have learned, without any formal instruction, to do every day.

“And then a description of what’s needed to make blogs a medium for real conversation.”

The Blogging Process, by Dave Pollard

Fascinating reading, including an interesting flowchart and comments.

Semantic Weblogs

Semantic Weblogs is a bookmarkworthy list of weblogs about the semantic web, among other things, compiled by Dave Beckett. Some weblogs you may already be familiar with, such as Danny Ayers' RawBlog, Timothy Appnel’s tima thinking outloud, and Edd Dumbill’s behind the times.

Here’s some info about the Semantic Web, too:

• Semantic Web
  W3C Semantic Web Activity
• SemanticWeb.org
  Semantic Web Community Portal
• What is the Semantic Web
  A good introduction with resources.

[hat tip: bitlab.no]

Movable Type Tags Within Your Text Editor

For Movable Type users: Movable Type Tags for TopStyle, Dreamweaver, and Textpad. Handy! I just downloaded the tags for TopStyle and it’s clear they’re going to be quite handy. For a preview in TopStyle, Paul Smith provides a screenshot of the MT Tags in TopStyle.

To install the Movable Type Clip Library to TopStyle, the instructions tell TopStyle users to install the Movable Type clip library at C:\Program Files\Bradbury\TopStyle3\user\ClipLib. If you installed TopStyle as a single user you will find the rest of your clips there; however, if you’ve installed TopStyle for multiple users as I have you’ll find your Library Clips at C:\Documents and Settings\(username)\Application Data\Bradsoft.com\TopStyle\3.0\cliplib. So you might take a look at both directories first to see where your Clip Library Items are and then decide where to put them. See the TopStyle Forum thead about Clip Libraries for more information if needed.

[hat tip: Personal Design Journal and Growing Leaves]

top