You know, the HTML form field that is on almost all the login/signup web forms where you enter your password but you only see some stars instead of characters.

… dead?

Well, yes. I mean, does it still serve its purpose? The purpose of hiding what you type from … err … hmmm … people behind you? While I don’t argue its original purpose, I do argue its purpose in the current times. Initially, there weren’t that many people with computers at home and not all of those that had one at home, also had an Internet connection. Internet cafes were popular and you were standing next to other people or had people walking behind you, therefore when typing passwords it was important to not having to police around first.

However, things have changed and almost everybody has now a computer with an Internet connection at home, so the only people that can steal your password are your kids and your wife … and perhaps your dog if he’s that smart. Even if you access the Internet in public locations, if you feel that someone is breathing down your neck, just turn around and ask for some space. Conclusion? Password field has become useless.

A web developer rant

From a web developer point of view, usually in a sign up form, when you have a password field, you have to put another field called “Re-type your password” or something similar. Why? Because the user doesn’t see what he or she just typed (can only see a bunch of stars) and by asking to type again the password you are trying to make sure that no mistakes have been made (it’s very unlikely that the user does the same mistakes two times in a row)

So, you need to add another field AND do a validation by comparing the two values AND generate the appropriate error message if they don’t match. For what?

To class or not to class? This is the question … for this blog entry. Let’s try and find the answer with the help of an analogy to OOP.

CSS and OOP?

I reckon most of you already know what OOP stands for but for those who don’t, OOP stands for Object Oriented Programming – the classes-objects-inheritance concepts used in code writing and code design with the ultimate goal of maximizing code reuse. So, what do CSS tags and Object Oriented Programming have in common? And most important, how can OOP concepts help us decide which tag is better suited for the job. At a first glance, class is a reserved word in both languages, so maybe we can start from there.

So, class is class?

Coincidence or not, the CSS class has similar behaviour with the classes from OO programming languages. Let’s say you want all the h3 tagged text on the page to be underlined. You could write a CSS class for h3 and specify “text-decoration: underline;”. Each time you will use the h3 tag the text formatting will include an underline. So basically you are using the CSS class “template” to create multiple instances of h3 text and that is exactly what OOP classes are (among other things): templates for objects.

Then id is an object?

The CSS id tag is still used as a class in order to define the “shape” of the element that will have the id assigned. However, the id tag is usually used to pinpoint an unique object on the web page. Tracking elements by unique ids is a useful technique (i.e. when using Javascript methods to update or modify elements, when parsing POST form variables in PHP, etc.). Think of the id tag as a class with a single object or the class/object concept merged. It’s like that philosophical question: what is the shape of a chair? When you think of a chair you think about the shape or the object itself?

Conclusions

The answer to our initial question is now simple: use the CSS class tag when you need to tag or modify the format of more than 1 element in the web page and use the CSS id tag when you need to pinpoint to a specific element in the web page (something like the “You are here!” signs in the shopping malls).

The beginning of every (web development) project consists of info/data gathering from the market/clients (aka “client’s specifications”). The more complete the data is, the less scope change requests we will encounter later on. So, what kind of info/data are we interested in? As there are a lot of resources on the web, I stumbled upon one that has a well built web design survey related to data/info gathering for web development projects:

- Web Design Survey -

Note: The link is a (c) PDF file from ClockTower Media, please use it only as inspiration.

Each project is somehow unique and I reckon it’s safe to affirm that each client (the person benefiting from the project’s outcome) is also unique even if is the same person that did another 10 projects with your team. This “rule” applies to almost all the projects in technical areas such as IT, web development, etc. because of the asymmetry of information between the developers and the clients.

It is important to know, as the developer/project manager, what kind of client you’re dealing with, in order to have a smooth client-development team communication:

1. The type that does not know and does not want/is not capable to learn. He just wants things to get done.
2. The type that does not know but does want to learn. He listens and welcomes your explanations.
3. The type that “thinks” he knows and does not want to learn. He knows that modifying that database table should take no more than 1h, so why are you telling him that it will affect the whole database structure and will have major impact on time and budget?
4. The type that knows what he wants but does not know how it can be done. He can tell you how the thing should work but not how to make it work that way.
5. The type that knows what he wants and knows how it can be done. He’s just a web developer like you.

Handling different types of clients

Identifying the type of client you’re dealing with its just the first step. What you do with that is up to you! Here are some “DoNot”s:

Don’t bother the #1 type with a lot of technical explanations about the project. You need to decide how things are to be done, so keep communication simple and to a minimum.

Don’t keep #2 in “the dark”. He finds the new information interesting and he wants to know more about the project

Don’t take type #3 clients … just kidding. Just make sure you can back up your arguments with the usual technical mambo-jambo, err, I mean scientific data.

Don’t confuse #4 with #1. Although they both don’t know about the technical part of the implementation, #4 knows exactly what needs to be implemented, so don’t go too creative with the features

Don’t try to fool the #5 type into agreeing to a bigger than “normal” budget and project time frame. He’ll smell inefficiency right away.

Do you know other types of clients and/or ways of handling them? Share with us!

A couple of days ago I had to replace on a website with static .htm pages the old Google Analytics tracking code with the new one. And the website was not your friendly, five to ten pages website! So I looked around and found this free tool: Auto Replace. The tool searches and replaces HTML code on multiple files, so with one “move” I replaced the code in all of the pages. I think it’s a nice tool for webmasters and web developers to have around. You never know when you need to modify a link that appears in different web pages or a text in the footer of the page that needs to be displayed all over the website.

Auto Replace 1.0

The tool is written by Andreas Jönsson, is freeware, but no longer available for download on his website, so you can download it here: Auto Replace 1.0 The .zip archive contains an .exe file that will launch the application.

Using the free multi replace tool is easy to:

• select the directory that contains the files and the extension of the files that you will be parsing (i.e. .htm, .php, .txt)
• insert the text to be replaced and the text that is replaced with
• hit [Start]

Tips:

1. It is advisable to back-up the files before applying any changes. Just to be safe.
2. Be careful when changing small words or letters as the tool will replace any occurrence no matter if it’s a stand alone word or if that word is part of a larger word. For example, if you decide to replace the word ‘car’ with ‘bike’ and in your text you have the words cars, carwash and carbide, you’ll end up with bikes, bikewash and bikebide. To avoid this add a space before and after car, like this: ‘ car ‘.

If you like the application or if you find new uses for the tool, please do leave a comment and let us know.

The modern way to design sites is using “web standards”, separating content from style by using Cascading Style Sheets to dictate the appearance of the pages, rather than using “old” nested table layouts or just adding nbsps one ofter the other.

The 4 essentials practices of modern web design are:

1. Standards compliance code
2. Accessible code
3. … and some other two that I don’t remember right now, but the following graph will show us the core practices and time breakdown of modern web design.

At least that is what all that email spam we are receiving is trying to tell us, right? As a web master, maintaining large websites can mean big headaches when it comes to broken links. Web pages get renamed, moved or deleted so it is important that the website’s web master or web developer makes sure that all the links are updated and there are no broken hyper links that lead to dead ends. It is important for your visitors, but also for your SEO efforts.

In a previous article, Good Web Design Practices – Handling Errors, we talked about how to handle broken links when visitors stumble upon one of them. This article is about finding the broken hyper links before the visitors find them. And it’s not that hard to do it; there are a lot of tools that check web sites for broken links, so bigger websites do not necessarily need to be bigger headaches. A free and easy to use tool to find broken links is: Xenu’s Link Sleuth.

Xenu’s Link Sleuth

The program checks web sites for broken hyper links and it checks not only the “normal” links but also style sheets, scripts, frames, local image maps links, etc. It supports SSL websites and detects and reports redirected URLs. You can download the program here and if you need more information there is also a F.A.Q on the page.

Here are some interesting and useful features:

• You can set, depending on your connection, the number of parallel threads before starting the search;
• You can select to exclude certain types of links from the search;
• Selecting Properties for a link from the list of broken links you can see the address of the linking page, the address of the page linked to and the actual code of the link;
• At the end it delivers a nice report which includes, besides the list of broken links, a HTML site map with pages’ titles.

Note:
If you are using Hotlink Protection for your images, you will get a broken link (403 – forbidden access) each time an image is displayed. But, if you have all your images in the same folder (i.e mydomain.com/images); a workaround for this issue is to add the web address of the images folder to the restriction list.

Broken Links and SEO

Because the links are the gateways to your web pages, most of the SEO efforts will concentrate on the links: optimize internal linking, get more “strong” incoming links, do not link to bad neighborhoods, etc. The strength of a link depends on several factors, some related to the webpage/website from which the link originates, and some related to the link itself.

The Out Links and In Links columns in the Xenu’s Link Sleuth’s broken links results table contain valuable SEO information. The number of incoming and outgoing links per page can be used not only to analyze your own pages but the web pages of your competition as well:

• Out Links – represent how many links you have on the page (images links are also included unless they are restricted by the user). Remember that the search engine bots do not usually crawl links in excess of 100 per page. The number of links also influences the strength of the link; the more links on a page, the less strength for each;

• In Links – represent how many internal links are pointing to that page, image, etc. Optimize internal linking; internal links can really drive a page but use this wisely, if every page links to every page, the “link juice” is diluted;

LinkTiger

I was doing some blog maintenance work the other day; I changed the permalinks format for the posts, and something, somehow went wrong, because I had no more “active” links. I didn’t know at that time, because the homepage of the website was working fine, but if someone would have tried to open a post or see the posts in a category, he would have seen a 404 error page (page not found). Luckily I was keeping an eye on the traffic so when I started to see the poor search engine robots getting 404s I knew that something is wrong.

This is something that I could have prevented with an “automatic” link checker, so I did some research and I found this tool: Link Tiger. It’s a free online website broken links checking service so you don’t have to install anything but the good part is that it can automatically run a broken link hunt on your website(s) and alert you via emails. Besides scheduled links checking, I also found a couple of useful features:

• It checks for broken links, not only in web pages, but also within PDFs and MS Office documents;
• Normal view and page source view with highlighted broken links for easy spotting;

The free version has some limitations (i.e. only 1 website, 1000 links maximum) but there are also paid versions of the tool with improved features. So, happy link hunting!

Making your web pages look and behave the same no matter the browser or the operating system your visitor is using, can be a challenge even for the most skilled web developers. With over twenty web browsers on the market and four major Operating Systems (Windows, Linux distributions, Mac and Solaris) the number of combinations browsers-OS is pretty high. But in the beginning there was only one browser, the Netscape navigator (wasn’t that nice?), followed in a couple of years by Internet Explorer.

A Little History

The first browsers war took place in the late ‘90s when Netscape Navigator and Microsoft’s Internet Explorer were competing for Internet browsers market share. Unfortunately, the competition lead to implementation of proprietary features (instead of complying with the standards) and rushed releases (full of bugs), so in the “dark ages” of the first browsers wars crashes, security issues and partial web standards compliance were frequent issues faced by the web developers. Navigator started as incontestable leader (when IE 4.0 was released Netscape had 72% market share compared to Microsoft’s 18%) but the financial power of Microsoft and the fact that IE came bundled with Windows, tipped the balance towards Internet Explorer.

By the end of 2002, Netscape was down to less than 8% of market share. Other browsers like Opera, Safari, Konqueror were still struggling around the 1% value for market share value. The Mozilla project launched by Netscape in 1998, finally broke Internet Explorer monopoly with the release of Mozilla Firefox in 2004. The Firefox release marked the beginning of the second browsers war and since its release in 2004 Mozilla’s browser established a growing niche in the browsers market, ending up with 36.3% market share in December 2007.

Testing Browsers Compatibility

So, with browsers not fully implementing the web standards, web developers are aware of the fact that some combinations of code might result in different displays over different browsers. The solution is to tweak the code so it behaves the same way, no matter the browser-OS combination used.

Here’s a nice tool that “makes” screenshots of your web page in different browsers and different operating systems. It is a free open-source online service that employs a number of distributed computers, each running specific operating systems along with specific browsers. Your request is sent to the computers, they take a screenshot and they upload the pictures to the central server where you can download and check them out.

- Test your web design in different browsers -

Additional reading:

• Wikipedia – Browser Wars
• End of Support for Netscape
• Browsers Usage Statistics

Everybody from time to time, surfing the web, will encounter the famous 404 error page saying that the web page or the document you were looking for was not found. The cause for the error could be a reorganization of the website (the file was removed, renamed or deleted); a user involuntarily mistyping the URL of the page or maybe the web page never existed. No matter the cause, any webmaster will want to avoid having these types of broken links on his website. Besides the 404, “File not found” error code, there are other standard HTML error codes. Here are a few examples:

• A 400 error code indicates that the link or the request could not be understood by the server due to malformed syntax;
• A 401 error code indicates that authorization is required to access the file;
• A 403 error code indicates that the visitor is forbidden to access the file (maybe it’s in a password protected folder or maybe you activated the Hotlink Protection on your images);
• A 500 error code indicates that the web server encountered an unexpected condition which prevented it from fulfilling the request (there are miss configured options on the web server).

Each error code has its own standard page and error message. In order to deliver a better user experience, you might want to customize the error pages with your own messages and directions for the visitor to follow. The idea is that you still need to let the visitor know that something unexpected is going on, but provide him with options.

A good practice is to include the website’s sitemap here (so the visitor can choose a “real” page to go to) or, if you have a website search feature, include it here as well.

If you have cPanel installed on your hosting account, you can see the last 300 errors for your website, by selecting the [Error log] option. Check this log frequently to find out if you have broken links on your site, or, what files do not exist and they should. Use this information to fix the errors and to keep your site running smoothly.