WPDFD Issue #82 - April 20, 2007

When most web designers think about css-styled link lists, the mental images that come to mind are of the trusty old horizontal and vertical navigation menus we’ve all become accustomed to building into our sites. That's because the CSS styled unordered list has rightfully become the standard markup for site navigation. There are enough beautifully styled top, left, and right navigation blocks out there that attest to the unlimited styling potential of the unordered link list, but are we really letting them achieve their potential?

We recently spoke with renown usability expert Jared Spool. User Interface Engineering , the firm that he founded in 1988, is the world’s largest research, training and consulting firm specializing in Website and product usability. Jared’s insights have helped countless organizations improve not only their usability, but in doing so he has helped them achieve their business goals.

The ministry I work with recently printed out an ad to pass out at a local jazz festival. As usual, things came down to the wire and the design was awaiting it's last minute approval process before going to print the next morning. Just a week beforehand our facility over-went some massive remodeling. We wanted all our new material to show new pictures of our new building so the marketing department hired a freelance photographer.

Do you need to re-design?

As daunting of a task as it may seem, your website is your company’s image and needs to look presentable. Ask yourself, how long have I had my current web site design? If your answer is more than 3 years, then its time to start thinking redesign. Web technology advancements are very rapid and every year the web breaks through with new and improved web applications, usability, design and back end programming.

Building a great Website can be a lot of work. There is software that makes it a lot easier, but there are some other pieces of the puzzle I would like to tell you about too. I want to share a few secrets we’ve been using for years to help us make great looking Websites with you. Let’s take it from the top down. We’ll look at logos and branding, stock photography and illustrations, color schemes, and a few other ways to snazz up your Website with minimal fuss.

You have a great idea, service or product. Now it’s time to build a Website and realize your dream. The eternal optimists say, “Build it and they will come”. This is easier said than done. There are many frustrations awaiting such an endeavor, but with some guidance, it can be a fun and rewarding experience. In the following column I talk about various ways to build an online business, what to do and what to avoid in Cyberspace.

Writing the Web

Much has been written on the technical and graphical aspects of web design; these are important issues to be sure, but a central point often forgotten is that we read web sites. Jakob Nielson wrote about this way back in the year 2000 : Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text. In general, users were first drawn to headlines, article summaries, and captions.

Validating your HTML documents is an automated process, akin to spell-checking your Word documents. Sounds like a no-brainer that any conscientious Web developer should do, right? However, HTML validators can sometimes return cryptic or arcane-sounding results that may be difficult for Web site developers to determine how to fix. HTML validators may confuse novice Web designers as much as help them.

Link Building

Link Building   Link building is one of the most important factors of Search Engine Optimization (SEO), as Search Engine algorithms take into account when determining the relevancy and, indirectly, page rank of a site on Search Engine Results Pages (SERPs).   How it Works:   Because there are too many websites for critics to visit and individually rank, Google has developed an algorithm that ranks sites based on a number of factors deemed representative of a ‘consumer friendly’ site.

SEO Terms

Important SEO Terms   So you’ve purchased your domain and are ready to write your website content. Before you start writing SEO content anything, there are numerous SEO terms and tips with which you should become familiar:   Keyword – a keyword is a word that is typed into search engines. If you wanted to buy a new car, for instance, you may type ‘car’ in Google’s search window.

Directory Submission

Before I get into the process of building quality links to your website, I’d like to briefly address an often overlooked step in the website creation process: Directory submission. A directory is an online database of categorized websites...like an online yellow pages. Without going into too much detail, it’s important to get listed in directories because a) they provide a means for your site to be found and b) many sites mimic the links found in specific categories.

The Basics of SEO

The Basics of SEO In the SEO World, there is a good deal of debate about where the term ‘Search Engine Optimization’ (SEO) originated. There is no conclusive evidence that a single individual or group of individuals coined this phrase; what is known is that the phrase appeared in the late 1990’s and referred to a process that increased web page rankings on Search Engines. While the methods of SEO have changed, the goal has not – SEO still increases a web page’s ranking.

As with any other business practice, Search Engine Optimization can be performed within or without the boundaries of accepted business ethics. White hat SEO is optimization that follows the guidelines set forth by search engines. Black hat SEO intentionally undermines these guidelines. White hat SEO includes: Increasing keyword density within text in a relatively natural manner Designing keyword friendly Titles, Meta Tags, Meta Descriptions, Headers, and Alt text for your site Natural linking between your site and similar sites Developing new, link-friendly content for your site There are definite advantages to cutting corners and utilizing black hat SEO, mainly that your page will increase dramatically in Search Engine Results Page (SERP) rank within a relatively brief amount of time.

A website’s success is contingent upon countless factors. Of these factors, perhaps the most essential is a site’s Google Page Rank, which is an algorithmic estimation of a site’s relevancy as determined by Google. Now, you may be wondering why all SEO experts refer specifically to Google when talking about optimization and increasing SERP. It’s true that there are thousands of Search Engines out there and all of them have their own algorithms to determine a page’s rank; however, Google dominates the Search Engine marketplace, with approximately 60% of all web searches originating from their site.

Using CSS to center elements on a Web site -- whether it's the entire page or a single block or tag -- can be a little tricky at first, especially if you've only used tables to center elements before. In the long run, though, you'll find it a huge timesaver to not have to keep track of so many tables embedded within tables. Below, we'll look at the markup for centering your Web site while tweaking the CSS to ensure that older browsers will recognize the centering effect you want.

What is SEO

Over the years, I've been approached by countless CEOs and Webmasters who, without any understanding of the term Search Engine Optimization (SEO), tell me that their website needs SEO. "Great," I respond, "which pages require SEO? Are you fond of any particular keywords? Are you running a pay-per-click campaign?" Occasionally, a well-studied CEO actually understands the questions I am asking; rarely, a CEO understands why I am asking the questions.

Want to add a repeating image to your site's header, use custom bullets in a list, or position an image that remains in place on your site even when users scroll down? You can accomplish all of these effects using the CSS background property. You may already be familiar with setting background images in table cells. The CSS equivalent is more flexible, with more options for positioning and displaying that background image.