The most popular web development tools are often referred to as WYSIWYG (pronounced Wiz E Wig or what you see is what you get) Editors because they have a mode where you can see exactly how the page looks as you develop it instead of working directly with raw HTML code (another mode). This is both a blessing and a curse. A blessing because it saves designers lots of time as they can see their changes as they work instead of having to publish the site every time they want to view its progress, and a curse because now, it is relatively simple to put together a webpage so lots of people are doing it. That in and of itself is not a bad thing, its how they are doing it that is the issue. The website I am redesigning will help me demonstrate what I am talking about as well as a few things I have talked about in past posts.

The Before

The before example, presented as a screen shot, is a portion of a page from the site. The page was created in Microsoft Frontpage (an older version I think) which is a very popular WYSIWYG editor. Some statistics about this individual page:

• 485 lines of HTML code
• 8 images
• 14 second *download time

The author of the site just let Frontpage do its thing and took full advantage of the WYSIWYG mode.

The Issues
The presentation code was mixed in with the content code (see the background and theory section) and a table based layout was used instead of using cascading style sheet(CSS) positioning, both of which significantly increased the amount of code. The images were created automatically by the software(Frontpage) to replace some of the headers instead of styling them with CSS. Additionally, the images were created specifically for each page and stored in a separate directory. They were not reused on other pages even though similar images were created for the other pages (there were over 50 web pages in this site with similar headers, all of which had images made for them). The use of all these images along with the amount of code caused the larger download time.

The After

My redesign (also presented as screenshot here) was developed in Dreamweaver, another popular WYSIWYG editor. Statistics for the redesigned page:

• 70 lines of HTML code
• No images (see disclaimer)
• 1 second download time

I used the WYSIWYG mode for verifying the design but worked heavily in the code mode and used CSS extensively.

The Disclaimer
Now I have to say there are 2 CSS pages applied to this webpage with 101 and 161 lines of code respectively, each with a download time of 1 second, so I should actually say 3 second download time altogether right?

And how can I say there are no graphics on the page, I mean, just looking you can tell there are graphics. Actually, there are four images placed on the page by the CSS so they are not actually in the page code. These images have a download time of about 1 – 2 seconds a piece, so that adds, lets say, 6 seconds. So where did I get the 1 second download time for the page, looks more like 9 seconds right?

If this was the first page I viewed in my browser for this website, the 9 seconds would probably be fairly accurate, but it is still 5 seconds better than the original version above. That still doesn’t explain the 1 second download.

The Benefits of Coding with Dreamweaver
The benefits are that once the 2 CSS pages and the 4 images (all of which are used by every page) have loaded the first time, they are held in your systems memory and do not have to be downloaded for every additional page you visit, they are just called from your systems memory as required. So, the 1 second download time is correct. Plus, maintenance is easier because the design is stored in the CSS and search engines can rank the site better because they just have to read the content on the page and not the additional 415 lines of presentation code.

Is it really the WYSIWYG Editor?
No, well partly yes, but I bet somebody using Frontpage could probably get similar results. The whole editor thing was just another way to stress the importance of finding a designer who knows how to use those editors properly to create standards based websites so that you benefit in the end. Hopefully, the redesign example helped illustrate those points a bit better.

A lot of geek speak above, I know. Look at it this way, with my design, the user will have to wait about 9 seconds for the first page to load, and then each page after that will be 1 or 2 seconds. With the old design, the user will have to wait 14 seconds for each page to load. How many will they wait on before going to Google and finding another website with similar information? Is this happening with your site?

As always, if I can answer any questions or offer any advice on this subject, just ask. Advice is always free.

* All download time references assume use of a 56k modem to download the page. Your mileage may vary.

Reduced Visual Impact

Some sites have lots of content to deliver and a less visually distracting design helps the user focus on content. In cases like these, graphics on the site are not absolutely necessary to get the websites point across, and just serve to enhance the site without being overpowering. They may also be used to illustrate some aspect in the content, but even then, are kept to a minimum.

This type of design also has a slightly more professional feel to it and I find it is how I approach my more ‘traditionally professional’ clients like doctors and lawyers.

High Visual Impact

This is more suitable when the graphics add significantly to the point the website is trying to make, or, in some cases, deliver a message on top of what the content is trying to say without adding a lot of text. Big graphics can also be used to fill space when there is not a lot of text on the site in the first place.

In my opinion, high visual impact could be used for any type of website but work well for portfolio, marketing and documentary sites.

Everything in between…

Of course there are sites with more impact and less impact and some in between, and although I have put down my thoughts on the subject, there are no set rules of how many pictures a site should have.

A final point to consider…

There are of course pros and cons to adding graphics to a design. Sites with fewer (and smaller) graphics load faster for the user, but, without many images, they tend to be text heavy (a lot of reading) which is actually less appealing to some users. Having great visual appeal might mean a lot of big graphics which will slow website download time and users may not wait around to see what your site is all about. The best mix of course is a nice balance of text and graphics optimized to load quickly.

As always, if I can answer any questions or offer any advice on this subject, just ask. Advice is always free.

You’re going to need a Domain Name

You might already have one before you find the designer, or it may be part of the development process, but either way, you are going to need a domain name (aka dotcom) or people won’t know what to type in to find you. Dotcom is a term derived from the most common type of domain name, those ending in ‘.com’, but it is only one of many ‘top level domain‘ (TLD) types.

In the U.S. .com is probably the most popular however, many other options exist; .net, .org, .biz, .info, .us and .name for example. Each of these have a purpose, .com for commercial sites, .org for organizations etc… but you will find that many sites don’t necessarily follow these guidelines.

And another thing, you don’t really own a domain name, it’s more like leasing and you will pay a renewal each year, although multi year options are available (some with discounted rates). You get the name from a domain registrar and depending on who you choose, you could pay as much as $35 (or higher) a year. This will vary based on the type of TLD you get and what specials are currently available. I always recommend GoDaddy for acquiring domain names at about $8.95.

And you are going to need Hosting

A host is where your website is stored and is basically just a computer with a connection to the internet. There are hundreds of hosting options out there with prices ranging from free to hundreds of dollars per month, depending on your needs. Your web designer may host your site for you or will probably have recommendations, but like everything else, you need to be aware of what to look for. At a bare minimum I recommend a host that provides the following:

• EMail - The number and size of accounts vary per host but you should have the option of setting up email addresses for you and your employees like yourname@yourdomain.com.
• Statistics - These are reports that show you the who, what, where, when and how of people visiting your website, and can provide useful information as to its effectiveness.
• File Transfer Protocol (FTP) – FTP allows you to transfer files up to your website easily.

You might also need to have;

• Databases - an option to use a database on your website to gather/disseminate information.
• Secure Socket Layers (SSL) – An encryption protocol enabling you to have secure communication with your website. An absolute must if you will be accepting credit cards, gathering privacy act information etc…
• Permissions - The ability to restrict portions of your website to authorized users. This can be done programmatically in the code but some hosts have it as an option.

Some things to be aware of;

• Host Operating Systems – It could be Windows or UNIX and this info is more important to your web developer than it is to you, however, the type of server you put your web on dictates the kind of coding language that the developer needs to use to write your site.
• Storage space and bandwidth – These items dictate the amount of stuff you can put on your site and how much traffic your site can get in a specified time period. If you are planning on lots of traffic, you will want to plan for that in your hosting choice. More space and bandwidth programs could up your hosting costs.
• Host backup plan – Hopefully your host will have a daily backup of your site in case of emergency. You would hate to make updates over a week and then find something has happened where you loose all your changes because your host only does monthly backups.

And speaking of hosting costs, I use a provider who provides me with all that for under $4 a month. Keep that in mind and please be careful because a lot of companies take advantage of the fact that most people don’t know what to expect and they charge a lot more.

What else can add to the annual costs?

Hosting and domain names are the bare minimum to run your site. If you are going to run an ecommerce site then you could encounter fees from banking services etc… but for a basic site, this article covers the biggies.

Gotchas

I recently did some logo work for a client who was using Sam’s Club as a hosting provider. Apparently, she had registered her domain name through them and used their services to put up her site by herself. All that considered, it wasn’t a bad site. Sam’s is more of a content management system than it is a full service host. You can easily put your info into one of their templates, and for a lot of people it is a reasonable solution, however…

I found out right away that she was paying twice as much as she should have been (in my opinion) and getting limited services for twice the money. Without going into a lot of details here, suffice it to say that we discussed other options and she found my recommendations to be much more to her liking. She decided to transfer her domain name to GoDaddy so she had more control and ended up getting a run-around from Sam’s with them basically saying that they owned her domain name and that she could buy it from them at an increased price if she so desired. She ended up going with a new domain name as that was just easier. Lesson learned – easy and cheap is not necessarily either.

Is that all?

If you are going to have a basic website, after development fees, these are the annual costs you can expect. Keep in mind you will have the costs of updates to your site and that will vary depending on your developer, but at least for my clients, I tell them that their costs will be about $50 a year for hosting and domain name. Where else can you get worldwide exposure for less than $5 a month?

As always, this is just an overview to help familiarize you with what you need to know. If you have additional questions, advice is always free, just let me know.

So without further ado, a little clarification on what I may have glossed over the last time.

What were we talking about?

If you recall, web standards are technologies used to create and interpret web content and there are benefits to finding a designer who develops standards-based websites. These benefits include;

• Simpler development and maintenance
• Faster download and rendering of web pages
• Compatibility with future web browsers
• Better accessibility
• Better search engine rankings

A little background and theory…

Web page code can fall into 3 categories;

• formatted content – the content on the website formatted with headers and paragraphs.
• the presentation – the code that is used to style the formatted content by adding colors, layout, images etc…
• scripts – code which helps make the web page interactive (not required).

When the web was young, having all this code on one page was the norm because the code was relatively simple, as were the browsers used to display it. As the web and all its parts continue to get more complex, designing a web site like this is still acceptable, but it is not the most efficient way to do things. One of the goals of standards based design is the help remove some of this complexity by separating these 3 code types into their own files, especially the presentation and scripting, which can then be easily reused throughout the website.

How do standards do all that?

When these 3 parts are separated, the benefits just start rolling in.

The webpage has been reduced to just the main message of the page formatted into headers and paragraphs without all the presentation code that used to be intermingled with it. Scripts have also been removed. This can literally cut the amount of code on a web page in half which;

• Simplifies maintenance due to less code on the page – saves you development costs.
• Helps your web pages download faster – keeps your website users happy.
• Makes your site more accessible because the removal of extra code helps other technologies (like screen readers for visually impaired users) work better – more reasons for users to be happy.
• Improves your search engine rankings because search engines actually read your website to rank you. With less to read, your message is clearer and can rank better – more hits for you.

The presentation code and scripting (if used) is now in one (or possibly several small) file(s). These files are referenced on each webpage and you benefit because;

• Simplifies maintenance and design changes to your site because now, how the whole site looks is controlled by the presentation files. To change the color of a header throughout the site the designer simply needs to go to one place and make one change, instead of editing the values on every page in the site – saves the developer time and you development costs.
• Helps your web pages download faster because the presentation code is read once and then kept in the users computer memory instead of repeated and downloaded with every page – keeps your website users happy.
• Makes your site more accessible and improves your search engine rankings since all this code is no longer on the webpage itself – benefits you and your users.

What about future compatibility?

If you have been following closely, you may have realized I did not mention the future compatibility benefit I referrenced initially. To make it simple, future compatibility is an added bonus of using standards. Web standards require use of specific coding standards and the site developed by the standards aware designer should be free of the issues and deprecated code that could bring it down in the future.

In summary…

This one page post is not meant to be a replacement for all the information available regarding web standards and the reasons you should find a designer who codes to them. Instead, consider it a way to help you be more aware of what to look for in your search for a web firm who has your best interest in mind. As always if you need more info, please contact me. Advice is always free.

What, you might ask, does this have to do with finding a web designer? It seems more appropriate for how to lose a client, but bear with me, there is a point.

What do you need to know?

When searching for a designer, keep in mind there is a lot more to a website than a pretty design. Pretty designs are everywhere and you will find a wide range of designers who can provide that for you. What you need to keep in mind is that that pretty design will have to appear in different web browsers, over broadband and dial-up connections, on millions of computers throughout the world, and at some point in the future, your site will need to change/update. None of that may happen easily if you shop for just a pretty design.

In part one of this series, I mentioned listing what you needed to look for and ask about when selecting a designer, and that can pretty much be summed up in one question, ‘does the designer adhere to web standards when developing your website?’

What are web standards?

You can Google ‘web standards’ and find a lot of information on them but I find that Roger Johansson at 456 Berea St. sums it up nicely;

“Web standards are technologies, established by the W3C and other standards bodies, that are used to create and interpret web-based content. These technologies are designed to future-proof documents published on the Web and to make those documents accessible to as many as possible.”

There is a lot more to it than that, but as definitions go, that one sums it up well.

What do web standards do for you?

Simply put (once again quoting Mr. Johansson) web standards benefit you through;

• Simpler development and maintenance: Using more semantic and structured HTML(HyperText Markup Language – code that makes a web page) makes it easier and quicker to understand code created by somebody else.
• Compatibility with future web browsers: When you use defined standards and valid code you future-proof your documents by reducing the risk of future web browsers not being able to understand the code you have used.
• Faster download and rendering of web pages: Less HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
• Better accessibility: Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.

I know there is some ‘geek-speak’ techno babble mixed in there but the bolded lines sum up in layman’s terms the items that will benefit you and your website users most. It may not seem like much, but trust me, finding a designer who understands and codes to web standards will pay off in the long run in terms of cost savings to you and a more pleasant user experience to your customers.

And what about the client who switched designers?

And so, back to the story… my client received a pretty website. I won’t mention his site or the other designers out of professional courtesy but when my client asked me to make a few updates to the new site I was astonished to find that a reputable firm had coded the website that way.

The site was created in a ‘pre-standards’ fashion, full of extra lines of code that weren’t necessary, making the site bigger (and slower to load) and harder for future developers(in this case me) to update for the client. The biggest issues and consequences I found in the new design were;

• semantic HTML was not used: so my clients new site will probably not work on all browser types, in fact, I have already found a display issue in one of the most popular browsers.
• deprecated HTML was used: deprecated is a word used typically in reference to a computer language which means that it will be obsolete in future versions. In other words, they wrote code that will break in the future, rendering my clients site useless.
• the design code was mixed in with the main content code: so the clients pages will load slower and will not perform as well in search engine rankings. In addition, if I want to make any design changes, I have to edit every page in the website instead of making the change in one place that controls the look and feel for the entire site.

Basically, and I am sorry to say, what worked out for my client initially will have immediate negative impacts (download time and search rankings) and will cost him extra in the long run when he wants to make changes to his site.

To summarize…

This is a very quick overview of what to look for, but if you take nothing else away from all this remember a pretty website does not necessarily mean an effective website. As always if you need more info, please contact me. Advice is always free.

There are literally hundreds of people in your local area (this of course depends on where you live, but generally it’s probably true) who could build a web site for you. A search on Blingo for ‘web design dayton’ returns 595,000 hits. I break them down into a few general categories;

• The large design firm
• The small design firm
• The freelancer
• The geeky ‘kid, co-worker, niece, retiree (choose one or provide your own)’ next door

Actually, any of the above could create a quality web site for you, but at the same time, any one of them could do just the opposite.

Before I get into the distinct qualities I feel you should look for in a web designer(part two of this series), let’s consider the pros and cons of each of the above.

The large design firm
One would assume the reason they got to be a large firm is because they have built up their client base by doing good work. There are probably exceptions to this assumption but generally, if you do crappy work you won’t be around long enough to build your company.

• PRO – Large, established and experienced.
• CON – On the flip side a large firm may use multiple employees to develop your site and you will end up paying for all these employees plus part of the overhead to run that large company.

The small design firm
A small design firm can be small by choice or because they are fairly new. If they are small by choice I tend to make these assumptions:

• PRO – If they have been around awhile they probably fall in to the ‘must do good work category’.
• CON – If they have chosen to remain small, they are probably selective and might be expensive.

The small design firm that is fairly new;

• PRO – Smaller and not as established so the prices may be more reasonable than bigger firms.
• CON – Less established could also mean less experienced and you may not get the quality work you deserve.

The freelancer
The freelancer could fall into many different categories like the college student trying to build a portfolio or the professional web designer who does this on the side for the money, or for the joy of it (or both). In my view, the pros and cons of freelancers are;

• PRO – Does not have the overhead of the big firm so will probably be less expensive.
• CON – May not have the experience found in the large and small design firms.
• PRO – Professionals who do this on the side bring the experience at reduced prices.
• CON – Freelancers have a ‘regular’ job that may impact their turn-around time.
• PRO – May exchange services instead of working for cash which might not be an option for firms.

The geeky kid next door
Everybody knows one.

• PRO – Will work for beer money (or candy bar money), or for free
• CON – Probably no training and little experience and may not be able to meet all your web site needs

Now I reiterate, this is just my opinion and not every scenario above will necessarily be true. Just because a firm is established and has longevity and experience doesn’t necessarily mean that they are up to date in their methods. Some of them are old dogs and there are new tricks in web development every day. You may be comfortable with the geeky kid next door doing your web site for you but remember, the final product might look like the kid next door did it, or, it just might be one of the freshest web sites on the internet.

Your decision needs to accommodate your wallet and your gut feeling about your designer, just remember there are many options to choose from and you CANNOT necessarily tell a book by its cover. So, how to decide? In my next post I will let you know what you should look for, and ask about, when trying to choose a web designer.

Humor me for a minute and let me just lay out some reasons why I think you should have a website.

• It’s helps you look professional and gives you and your company an image of credibility in the market for whatever that “market” might be.
• It is there to inform your customers even when you are not open, and if you are, it can provide information to those potential customers who would prefer to know more before they visit you in person.
• It can sell your product or service (if that is what you do) to anyone, anytime, anywhere in the world with no interaction from you or your staff.
• It can track what your customers are looking for and provide you with information on how to better serve them.
• It can get information or products and services to those customers who are unable to get to you.
• It doesn’t cost as much as you think.
• It puts you up against the “big guys” in the market.
• Your competition probably already has one, and if not, you’ll be the first ‘insert product or service type here’ business on the block that does.

That’s it, in a nutshell and maybe I got you to start thinking about having your own. If I have, you will probably want to know how to find a “web firm” (be it a one person shop or an entire team from a large design firm) that is right for you. I’ll make that the topic of my next post!

If you have questions in the meantime, just ask.