AngelWithCrookedFeet.org

The Site

AngelWithCrookedFeet.org is the online home to the Angel With Crooked Feet Foundation providing support, guidance, and counseling to youth and their families who are victims of sexual abuse and more. The Foundation was started by Anthony V. Sarjant Ph.D. of Show Low, Arizona and Gus Koernig of Mesa, Arizona. Together Tony and Gus authored Angel With Crooked Feet which chronicles the life of Tony, born with a club foot to a mother who didn’t want him. Through his years, Tony has suffered through time in and out of hospitals, petty crime, time in a juvenile detention center and later prison, sexual assault, the occult, marital infidelity, alcoholism, and suicide attempts.

It’s a story that proves, again and again, that God never gives up on us, even when we want to give up on ourselves. It is the story I’m telling because I know that reading about my experiences, my ordeals, my challenges, and my victories will help thousands of people, young and old, overcome the challenges in their lives.

The Design

AngelWithCrookedFeet.org was actually a website redesign that we did. The site was originally built by the client using Yahoo!’s SiteBuilder. As is generally the problem with site builders, the site was chunky and contained a large amount of extraneous code that not only cause the site to have the look it did (alignments were off, elements overlapped each other and burst out of their parent elements, hovers didn’t work properly, etc), but also increased the load time. So, the majority of the work was simply taking the existing website and the intended layout, and converting it to a small, fast-loading, clean, and of course, standards-compliant website.

In this redesign, the client did not wish to change the layout. He simply wanted a nice clean website. The first step in this redesign was to discern which elements/data on the page would be kept, and which images would be needed. After gathering the required elements and files, the next step was to redesign the layout based off the intentions that the client had with the original build. The layout for the most part was there, it was just clunky. In a redesign like this, I didn’t bother with the CSS at first, I simply wanted to get the code for the structure in place. After I had a lean standards compliant base to work off of, the CSS would be very easy to write and display the website in the intended manner.

The general structure of the website includes a main wrapper <div> that encompasses all the content on the website, a sidebar <div> with a navigation <table>, a main content <div>, and a footer <div> and that’s basically it. The reason for the main wrapper <div> is that the Yahoo! SiteBuilder had aligned all the content flush left leaving approximately 40% of the screen blank on the right hand side. Having this much blank space is almost standard for websites now, or at least is common, due to making sure the website will display fully on varying screen resolutions. However, the better way to display this much space is to center the content and have the space divided equally on each side which gives the appearance of the content taking up more space that it does.

So the design and the CSS weren’t to difficult for this site. The main thing I wanted to focus on for the client is getting that lean and clean website I was talking about. The two biggest differences between the Yahoo! site and the current site is the amount of code that was removed, and the navigation hover technique. As I said, the Yahoo! site had a lot of extraneous code in it, over 300 lines per page on such a small site. The current size of the site is just barely over 50 lines for the ‘home’ page and the ‘about’ page and just under that for the content page, and of course is 100% W3 HTML 4.01 Standard Compliant.

The second reason for the smaller sizes is I changed the mouseover technique used on the navigation links. Previously the mouseover was handled via Javascript. Currently with the use of Image Sprites (post to come soon about these) and the CSS 2 :hover pseudo-class, we were able to duplicate this same functionality without all the Javascript getting in the way. Basically what CSS Sprites do is takes multiple images and combines them all into one, then uses the :hover pseudo-class to reposition the background image when hovered over or selected to show the current image “state.” There is one minor drawback to the :hover element. It is not supported in IE 6 and below on any elements other than <a> tags. To quote Andy Budd from CSS Mastery: Advanced Web Standards Solutions

This is an embellishment rather than an important feature…Users of more modern browsers will appreciate the added usability benefits, while those using IE 6 and below will be unaware they are missing anything

However, using Dean Edwards’ IE 7 scripts gives this functionality to versions of IE that are missing it using just a small 30KB Javascript file.

Overall this was a simple redesign for us that took just over 3 hours to complete, but was a huge improvement for the website and the client was extremely satisfied, not only because of the vast improvement in his website, but also because of the cheap price of the redesign since it didn’t take us long to make these changes. All in all, AngelWithCrookedFeet.org includes the following services:

• HTML
• CSS
• Javascript

P.S. We are currently working on two corollary sites to go along with AngelWithCrookedFeet.org. These are AngelWithCrookedFeet.com and AngelWithCrookedFeet.info, which will have information articles about the Foundation, Inspirational/Motivational Speaking, Surviving Sexual Abuse and Child Abuse, and more, as well as give users the ability to schedule Tony for speaking engagements and the like.

CSS Mastery: Advanced Web Standards Solutions

by Andy Budd with Cameron Moll & Simon Collison

This was the first CSS book that I purchased. I was always hesitant to purchase a book on CSS because most of the resources that I’ve found have been mostly beginner’s tutorials or instruction and I felt that I had at least a “beyond beginner’s” understanding of CSS. I wouldn’t go as far as saying I’m an expert at CSS, but at least mid-level to advanced. However, this book had some previous good recommendations from amazon.com so I bit the bullet and bought it. I must say that I was NOT disappointed!

This book starts off with a very quick introduction/recap of CSS basics including good code structure and organization, validation, DOCTYPES, common selectors including IDs and classes, pseudo-classes, and the advanced selectors such as universal, child, attribute and more, and some wonderful reference on the specificity and inheritance, or the “Cascade”, the core of CSS. Although this introduction is provided, it is relatively short at about 25 pages and I would suggest a good working understanding of these basics first, as it will help understand the rest of the book easier as opposed to trying to learn CSS for the first time from this book. The following chapter is another quick 15 pages with on “Visual Formatting Model Recap” including the Box Model and Positioning, two EXTREMELY important concepts to understand CSS properly. Although it is short, it is an extremely powerful section.

Chapter 3 finally jumps head first into the code with “Background Images and Image Replacement.” With the movement towards “Web 2.0″ websites, one of the most common features you’ll see in these websites is rounded corners. These can be difficult to achieve successfully and the authors make it very easy. This chapter also touches on different drop shadows and image replacement techniques, which are useful for placing a logo in place but still having the text remain search engine friendly. Chapter 4 is a fairly short chapter on “Styling Links” with some interesting uses of attribute selectors.

Chapter 5 is all about “Stylig Lists and Creating Nav Bars” including the popular “Sliding Doors” popularized by Douglas Bowman of Stopdesign and first published in October of 2003 in A List Apart online magazine. During the section on creating nav bars, this chapter shows how to use CSS sprites for rollovers and visited links, something which I’ll be blogging about soon. Chapter 5 also shows how you can use CSS to create image maps, something I’ve never even thought of doing with CSS.

The next two chapters are two of the best in the book I think. Chapter 6 deals with “Styling Forms and Data Tables”, while Chapter 7 tackles “Layout”. I think that styling forms properly can be one of the most difficult things to do in a website Chapter 6 shows some good tips and tricks to handle this properly. After all the chapters on styling elements, comes the final code chapter which deals with Layout and shows how to center designs, create two and three column layouts, and liquid, elastic, and hybrid (elastic-liquid), or fluid, layouts.

As any web designer knows, IE doesn’t do the best job of displaying HTML and CSS properly according to the W3C. Fortunately, the last two chapters in the book are about “Hacks and Filters” and “Bugs and Bug Fixing”, two excellent chapters for dealing with the countless IE CSS bugs. Finally, the last two chapters of the book are Case Studies that put everything together and take you through building two different web sites in a Web Standards way with CSS.

Overall, this is an excellent book, one I’d highly recommend to any web designer, or CSS developer, looking to expand their knowledge of the powerful language that is CSS. Definitely worth adding to your library. On an additional note, this book is published by Friends of Ed, a fantastic publisher of technical books, and one of my favorites. I currently own 8 books published by “Friends of Ed” and 2 more from their parent company Apress, all of which are excellent books.

Paperback: 280 pages
Publisher: friends of ED (February 13, 2006)
Language: English
ISBN-10: 1590596145
ISBN-13: 978-1590596142

Book Review for:

Professional Search Engine Optimization with PHP: A Developer’s Guide to SEO

by Jaimie Sirovich & Christian Darie

A quick note about this review. This review was written approximately a year ago when I was still new to, and learning, PHP and SEO. I am posting it here now as I am starting a new Book Reviews category for this blog.

I am still somewhat new to PHP and this was my first book I’ve read on SEO. However, this book was packed full of great information for programmers. I never realized that there’s so much that can be done from a architectural standpoint for SEO. I will definitely be referring back to this book on a regular basis in my future web developments.

One thing to keep in mind, this book is not for search engine marketer’s. Although the authors do explain the reason behind the methods they provide, about half of this book is PHP code. This book is designed for improving ranking during development and design of the website, and not after publication. I learned that there are two facets to SEO; the architecture and design of the site and the marketing of the site. This book addresses the former.

The only thing that kept me from giving this book 5 stars is that the book was primarily geared towards an e-commerce site with a majority of the examples directed as such. Now, most e-commerce sites do implement PHP, there are plenty of other sites that implement it as well that do are not e-commerce. I understand that SEO is relatively easier on these sites, but there are plenty of methods and examples that can be implemented on any site, not just e-commerce such as; URL Rewriting via mod_rewrite, 301 redirects, duplicate content, sitemaps, link bait, and more.

Overall, still a great book and well worth the price and the read. I will definitely looking for more titles from these authors.

P.S. Author Jaimie Sirovich has a tremendous SEO Blog site that while reading this book quickly became one of my favorite sites.

Paperback: 350 pages
Publisher: Wrox (April 16, 2007)
Language: English
ISBN-10: 0470100923
ISBN-13: 978-0470100929

Now, I don’t know about you, but I don’t happen to just have $8,000 lying around, although I wish I did. So, to help raise the money, Chad created a website SaveBigDaddy.com. As of this posting, Chad and his family have raised around $6,000 towards the surgery, scheduled for July 11th. Now obviously when one of your best friends is in a situation like this, you want to do what you can to help. However, my wife and I are in the process of buying our first house (yay us!), so we don’t exactly have money coming out our ears either, not that we do normally. So I thought the least I could do is extend my services to Chad and offer to host his site for him. It’s not much but it will save him $50-$100.

Second, Chad had a fundraiser last night at the bar he hosts karaoke at, The Reagle Beagle. They were hoping to raise the remaining $2000 needed through drink specials, donations, raffles, a dating auction and more. I just got word that $1400 was raised leaving them with about $500 to go. As part of the raffle, we donated a free 5-page website design, plus domain name and hosting for 1 year, an approximate $500 value. No word yet from the winner, but we’ll keep you posted as to the winner and their site.

And to quote Chad, “After the surgery instead of calling me ‘Big Daddy’, you can just call me ‘Daddy’.”

I was reading some science & tech news postings at google today and came across an article posted at ChannelWeb. The purpose of the article is to promote Mozilla’s efforts to set a Guinness World Record highest number of software downloads in a single day with the release of the new Firefox 3.0 web browser on June 17th, 2008.

For those of you living under or a rock, or hopelessly devoted to Microsoft, or if you just have never heard of it, Firefox is an award-winning open-source web browser from Mozilla. According to the W3C statistics, Firefox currently has a 39.1% market share of web browsers as of April 2008. When compared separately to the two major versions Internet Explorer (6 and 7), Firefox is the most popular browser in use on the internet. I can’t say for sure when I first started using Firefox, but it’s been at least 3-4 years, if not more, and I havn’t looked back since. I am a strong supporter of Firefox for a number of reason, most of which come from a web development standpoint. I thoroughly enjoy Firefox mainly because it has better support for web standards. (Read more about Web Standards in my post “We’re getting NAKED!! But don’t get too excited.“) Not only that, but as an open-source web browser, Firefox has a plethora of user-developed add-ons and themes available to customize your the look, feel, and performance of your browser. One of my favorites is the Web Developer Add-On (for obvious reasons). There are plenty of other add-ons for assisting with bookmarking features, managing feed subscriptions, toolbars, search tools, social networking management, and many more. See the full list of Firefox Add-ons.

As if all that isn’t enough, Mozilla is releasing the new Firefox 3.0 this Tuesday June 17th, 2008. Currently, Firefox 3.0 is in its 3rd Release Candidate stage, basically a testing version. I have been using Firefox 3.0 for the past couple weeks as it is the default browser shipped with the newest version of the Linux Ubuntu 8.04 Operating System. So far, I have been pretty happy with what I have seen. One of the first things I noticed was the improved history recollection. From the Mozilla website:

Location bar & auto-complete: type in all or part of the title, tag or address of a page to see a list of matches from your history and bookmarks; a new display makes it easier to scan through the matching results and find that page you’re looking for. Results are returned according to their frecency (a combination of frequency and recency of visits to that page) ensuring that you’re seeing the most relevant matches. An adaptive learning algorithm further tunes the results to your patterns!

Another thing I noticed is when you close the browser with multiple tabs open, you are presented with the option to remember the tabs for the next time you open the browser. This is a very useful feature when the browser needs to be restarted after a plugin or add-on installation so you don’t have to reopen all the pages you just had up. There are plenty of other new features in Firefox 3.0 and you can check them all out at the Mozilla Firefox 3.0 release notes page.

This Tuesday, June 17th, 2008 has been coined “Download Day” by SpreadFirefox.com and is Mozilla’s attempt to set a world record for the most software downloads in 24 hours and will occur on Firefox 3 launch day. To take part in the world record attempt, and to assist in spreading the word about Firefox, simply download Firefox 3 (preferably from the Download Day Headquarters) on launch day this Tuesday. You can pledge your support to download and help set the world record by going to the Download Day Home Page. As of the writing of this article, there are approximately 1.3 million pledges worldwide. You can view a breakdown of the numbers by country around the world there as well.

For more information about “Download Day”, visit the Download Day FAQ.

AllOutdoorsPhotography.com

The Site

AllOutdoorsPhotography.com is an online photo gallery displaying the photographs of Mesa, AZ photographer Gus Koernig. Gus’s portfolio features photographs from around the United States, including Arizona, Utah, Wyoming, Montana, North Carolina, and more, as well as Australia and New Zealand. AllOutdoorsPhotography.com focuses on capturing the beauty of the world that we live, from Mountains to Streams, Waterfalls to Seascapes, Sunrises and Sunsets to Cityscapes, these images will take your breath away. All photos on the site are available for sale with options of a print only or a beautiful museum-style mounting for easy display. All photos come hand-signed by the photographer.

The Design

Our design process for AllOutdoorsPhotography.com started a little different than most. First off, Gus was fairly open to the design of the site and didn’t really have anything in particular in mind with regards to the layout/design of the site. This left us not only with an option to experiment, but also didn’t give us a lot of direction to start with either. The ultimate goal of the site was to display the images in a gallery format with the implementation of a shopping cart functionality to allow for the purchase of the photos.

We started out by coming up with a number of different layout ideas in a process called “wireframing.” Wireframing involves creating

“black-and-white diagrams that illustrate blocks of content, navigation, or functionality…used as a tool to communicate content and structure without the distractions of color and imagery.”

Transcending CSS: The Fine Art of Web Design by Andy Clarke

Here’s an example of some of our wireframes

With a layout selected by Gus, we set forth on creating our website comps. The comps were the basic structure and layout of the site as actual web pages for Gus to get a feel for how the selected wireframe would translate to an actual working web site. The comps were designed in basic HTML and CSS and, once approved by Gus, were very easy to convert into PHP by taking our duplicate content (page headers, footers, and navigation bars) and copying them into a PHP include file. This took care of the majority of the site

The remainder (and bulk) of the site involved displaying the photos from stored database information and creating the shopping cart. By storing the image information in a database, it allows Gus to login to the CMS we created for him to upload new photos, remove existing, change prices, on his own. It also cuts down on the amount of code required for each page of the site. From there, it was simply a matter of creating the shopping cart (which is not as easy as I’m making it sound) for purchasing the orders. There are a lot of caveats to creating a custom shopping cart and, as a designer/developer, you need to make sure that all of those are covered. I won’t cover those here, but let’s just say that the attention to detail is a high priority and can make or break a custom shopping cart. For more information about creating shopping carts, I recommend Constructing Usable Shopping Carts by Clifton Evans, Jody Kerr, and Jon Stephens

All in all, the site for AllOutdoorsPhotography.com took us approximately 45 hours to complete and included the following services:

• HTML
• CSS
• Javascript
• PHP
• AJAX
• MySQL
• Flash
• Custom Shopping Cart
• Custom CMS
• Logo Design

“I’ve gone through and optimized my website for the keywords that I want, and I’m still not getting the traffic I think I should be getting (or the traffic that I expected, or wanted, etc). How come?”

Read through that quote again closely, and see if you can figure out the problem. Did you find it? Ok, I’ll help. The customer/client is using “the keywords that I want.” The problem here is that the customer is optimizing for the keywords that he wants to get listed under. What he should be targeting is the keywords that his potential clients are searching for. It doesn’t matter how well you’ve optimized your site, if you’re not targeting the keywords your customers are searching for.

I recently came across an excellent article about this topic from Terri Wells of Developer Shed* titled Think Like a Searcher to Increase Your Traffic. Terri has written a number of great articles for SEO Chat which I would highly recommend checking out. In that article, Teri mentions “SEOs and site owners fight hard to get a top position on the search engine results pages for their chosen keywords. But that’s only half the battle at best……if we’re building and optimizing our sites for Google’s eyes alone, we’re only doing half the job.” So, it doesn’t matter if you rank #1 for every term you’re targeting if no one is searching for that particular keyword. Remember, our ultimate goal is making our site as visible as possible to searchers. I would rather take a lower ranking for a keyword that is searched more often, than a higher ranking for a keyword that is searched less often. Teri makes an excellent argument about this point specifically in her article. #1 isn’t always the best.

This obviously begs the question “How do I know what Mr. Customer is searching for?” There are tons of free keyword suggestion tools out there including Word Tracker that can assist with finding that out. We also offer a tool called Traffic Blazer starting at $29.99/year which not only contains a keyword suggestion tool powered by Yahoo! Search Marketing, but it also has a keyword analysis which will assist you in making sure that you are targeting the keywords you have selected correctly, search engine submission links, reporting features, and more.

In closing, the main point to take from this is: Put yourself in your customer’s shoes. You have to put your wants/needs aside. You will serve yourself and your website better by optimizing for the keywords your customer is searching for as opposed to the keywords that you would like to see yourself listed under and ultimately see better traffic results.

*For those of you unfamiliar with Developer Shed, they manage “20 high-technology websites collectively known as the Developer Shed Network.” There are many fabulous websites, many of which I frequent myself including Dev Articles, SEO Chat, Tutorialized, and Codewalkers. These are all sites I highly recommend and are worth checking out and worthy of being included in your bookmarks.

The long and short of this answer is “No! Having a shared IP address will not adversely affect your search engine ranking.”

The flip side to this question is “Will having a dedicated/unique IP address help my search engine ranking?” Again, the answer to this question is a resounding “No! Having a dedicated IP address will not give you a boost in the search engine rankings.”

Now are their benefits to having dedicated IP addresses? Yes. Are their SEO benefits to having a dedicated IP address? Minimal at best. Will it hurt you by not having one? No.

In a 2003 interview with Slashdot, Google Director of Technology Craig Silverstein answered this specific question accordingly:

Actually, Google handles virtually hosted domains and their links just the same as domains on unique IP addresses. If your ISP does virtual hosting correctly, you’ll never see a difference between the two cases. We do see a small percentage of ISPs every month that misconfigure their virtual hosting, which might account for this persistent misperception.

Now I know some of you skeptics out there may be thinking “Well that was 5 years ago, that’s a long time ago in a rapidly changing environment such as the internet.” And you’d be right. It’s very likely that in 5 years Google has changed their ranking algorithm. However, at the end of 2006, Google software engineer and head of their Webspam team, Matt Cutts answered that question in his blog post “Myth busting: virtual hosts vs. dedicated IP addresses”

There is no PageRank difference whatsoever between these two cases (virtual hosting vs. a dedicated IP)…I’m happy to affirm that this statement which was true in 2003 is still true now. Links to virtually hosted domains are treated the same as links to domains on dedicated IP addresses.

While searching for these articles, I came across another blog post from SEO/SEM specialist Jim Boykin who takes the exact opposite approach in his blog post “SEO Tip - Get Your Own IP Address.” Jim recommends getting your own dedicated IP address for every website you own. Now obviously I’m in no position to argue with someone who has been doing this much longer than me, but the fellows at Google are. I’m not saying that Jim is wrong, all I’m saying is his advice contradicts the information from Craig and Matt.

Looking at the PageRank of Jim’s site versus mine, Jim’s site reports a PageRank of 5 while mine shows a PageRank of 3. Now there are some other contributing factors here. Primarily the fact that Jim’s site has been around 2 years longer than mine which gives more time to link build and gain PageRank. I’m not saying that it’s impossible for me to have a higher PageRank than Jim, I just don’t put much time into the marketing of my site because of the workload I have. It would not be beneficial to myself or my clients (current or future) to actively advertise and gain more work at this time. I’m not trying to make excuses for my lower PageRank, just stating the facts. But I don’t think that the dedicated IP address accounts for the difference.

In closing:
Are there web site benefits to having a dedicated IP address: Yes.
Are there SEO benefits to having a dedicated IP address: No.

Standards based design is web site design that follows and conforms to current web standards recommendations, as set by the W3C. According to their website, the W3C’s mission is:

To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

Some people may ask, why are web standards important? Same reason any set of standards are important: To promote continuity and uniformity. Think of all the standards in place in the world today: Standard Units of Weight and Measurement, Street sign colors/shapes, building/construction code, and even our state/local laws are all systems of standards. Without systems of standards, people would be free to do things as they wish. Ultimately, it would result in utter chaos. Unfortunately, that’s what happened back in the days of the browser wars in the mid-to-late 90’s.

Those of you who are fortunate (or unfortunate) enough to remember, know what I’m talking about. Different browser manufacturer’s did things their own way when it came to displaying web pages as web standards had not been published or were not widely known. Now, things are still far from perfect when it comes to browser support for HTML/CSS standards, but they are definitely better than they used to be. Browser manufacturers are getting better at their support for current design standards and W3C recommendations. A W3C Recommendation is the name for a current internet language standard and guideline, and over 110 recommendations have been published since 1994.

So, why standards based design? Simple. Standards based design provides a number of benefits not only to designers, but also to users.

• Insure that web pages will display in the way that the designer intended regardless of browser.

• For instance, when I was designing my site, I was only able to view my website in Firefox 2.0 and Internet Explorer 7. Now, I can check sites in IE5.5, IE6, Safari, and Opera browsers on my computer. However, because I used standard based code, when I was able to view my site in all these additional browsers, it displays just fine without error.

• Web sites are easier to update.

• By keeping your style and structure markup separate, it makes it easier to edit/change styles in one place than searching for inline style references or <font> tags in your code

• When it comes to search engines, content is king!

• Search engines index you based on content, not fancy layouts, colors, and design. By utilizing standards based design, you are insuring that search engines see strictly your content without any non-semantic code added in. Using CSS, you can replace the text of an <h1></h1> tag with an image that contains a fancier typeface, but the text is still in the <h1></h1> tag and that’s what the search engines will see (more articles about SEO tips can be found in our SEO articles category).

• Standards based design promotes web site accessibility

• Using only semantic standards based code will help to maintain usability and accessibility to your site for non-visual users and mobile devices. Not everyone who uses the internet is a visual user (some are blind), and not everyone uses a computer (blackberry, treo, iphone, etc). Not all these devices have full css support and allow users to still view your sites properly. Blind users also use a device called a screen-reader that literally reads the site content to the user. Some of these screen reader technologies will place different inflections for different tags like <strong></strong>, <em></em>, and header tags.

• Web sites are forward compatible for new browser updates and backwards compatible for legacy browsers

• This one is pretty self-explanatory. Generally, standards based web sites will still display as intended in future browser updates, and will display as intended in older legacy browsers. The reason I say generally is because all browsers, especially older browsers such as IE6 and before and early versions of Netscape, have their quirks. For instance, IE6 and before don’t support CSS adjacent-sibling selectors, child selectors, and attribute selectors, among others, even though they’re all part of the CSS 2 Recommendation and they support other CSS 2 selectors. Because of these quirks, many designers used non-standard hacks, filters, and work-arounds to get around these quirks in IE6. Because of IE7’s increased CSS and standards support, many of these sites broke when viewed in IE7. If they were using standards based code for IE6, they would’ve displayed just fine when viewed in the newer IE7. Instead, these designers had the fun task of fixing all the invalid code to make it display properly in IE7, and then making it backwards compatible to IE6. Most of these designers ended up using propietary IE conditional comments, which are not part of the current W3C HTML Recommendation.

Obviously there are a lot more benefits to using standards based design, too many to list here. For further reading, I recommend the following books I’ve read for designing with Web Standards using HTML/XHTML, CSS, and DOM Scripting:

• Web Standards Solutions: The Markup and Style Handbook - Dan Cederholm
• CSS Mastery: Advanced Web Standards Solutions - Andy Budd, Simon Collison, Cameron Moll
• Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting - Andy Budd, Andy Clarke, Ian Lloyd, Cameron Adams, Rob Weychert, Ethan Marcotte, Dan Rubin, Jeff Croft, Mark Boulton, Simon Collison, Derek Featherstone
• DOM Scripting: Web Design with JavaScript and the Document Object Model - Jeremy Keith

There are plenty of other quality books out there written by excellent writers and web standards proponents including Jeffrey Zeldman, Molly Holzschlag, Dave Shea, and more.

By this time you may be asking yourself what this has to do with getting naked. In 2006, Google Developer and author Dustin Diaz came up with the idea for CSS Naked Day in which web designers and developers “strip” their websites of all CSS code leaving only the un-styled HTML code underneath. CSS Naked Day was started in order to promote standards based design, accessibility, and to display web sites in all their unstyled glory. By turning off CSS, users (and designers) will see web sites in the ways that search engines see them, as well as users who are using assistive technologies such as screen readers. CSS Naked Day is a great way to help promote web standards based design as well as using semantic markup and keeping structure and style separate.

I first heard about CSS Naked Day in Andy Clarke’s book Transcending CSS: The Fine Art of Web Design and as a proponent of web standards, I thought it was a great idea and decided to participate. This year, CSS Naked Day will be observed on April 9th according to the XHTML.com site and Dustin Diaz’s Naked ‘08 post. So, don’t be shocked if you show up to our site on the 9th-10th and see no styles at all (CSS Naked day is observed for one international day, or 48 hours).

One of the biggest mistakes you can make is putting your site or company name in the title bar. This is almost as useless as having the phrase Welcome to in the title bar of your pages. If you clicked the link, you would notice that 54 million pages returned with the phrase “Welcome To” in the title? How are you supposed to compete with that? Why would you want to compete for the phrase “Welcome To”? Does it have anything to do with your business? My guess is probably not.

As I said before, putting your domain or business name in the title tag is one of the biggest mistakes many people make…At least to a point (I’ll explain this in a minute). Why? Consider this: If someone knows your business/domain name, are they going to be searching for it in Yahoo! or Google? No, they’ll go directly to it. So why would you want to use that in the title tag and waste the keyword space? According to the W3C, a good title tag should be 64 characters, spaces included, so don’t waste it. If someone is running a search for your business or business type you want to be optimized for the phrase that they may be searching for, not for your business name. Of course you’ll come up ranked very high for a search containing your specific business name. But where you really want to show up is under the phrase that people would find you were they searching for businesses of your type. The reason I say “to a point” is that I’m not saying you should exclude your title altogether. Having it in the title bar is fine, but I would recommend putting it after your keyword words/phrase.

When it comes to search engines, content is king, and a good title bar should mirror the page’s content. Not only should a title bar contain quality keywords for search engine optimization, but should still be easily readable to a search engine visitor. A title bar should, in essence, be similar to a newspaper headline. If someone is browsing through the SERPs, your title bar needs to grab their attention that it piques their interest to the point they want to click the link to your page.

Look at it from a user standpoint. If you were searching for a website for classes say on “Underwater Basket Weaving” and came across two websites, one said “Home Page” in the title bar and was ranked a couple places higher than one that says “Underwater Basket Weaving Classes and Instructional Material”, which one would you be more apt to click on? I’m gonna put my money on the one that is ranked a little lower but is more descriptive. I’m also going to bet that the second would be ranked higher than the first, but there could be other factors at play that would cause otherwise. But that’s another blog.