What You USE Is What You Get…

In some of my past posts, Searching for a web designer, part two and part two and a half I talked about standards and separating presentation from content, and threw out words like download and rendering. I still believe that finding a designer who understands all that is extremely important, but a redesign project I am currently on brought another point to my attention. The software a designer uses may have considerable impact on the final project.

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.

This entry was posted in Articles and tagged . Bookmark the permalink. Both comments and trackbacks are currently closed.

One Trackback