I have been busy the past three months working on a site optimization project for a startup company where the code had been written by 10+ programmers who had come and gone over the last year. That left a big site with lots of unused and crazy CSS, images, javascript, and nasty HTML structure. I approached this project with two stages in mind:
- Start clean with CSS and XHTML. The first thing I did was unlink the main 5 thousand line CSS file along with a handful of others which was wreaking all kinds of havoc. I then went into every view, standardized the overall HTML structure (so it could hold it’s own without any CSS), and then only added in the CSS that was used.
- Maximize HTTP requests. The next phase will involve spriting images and pairing down and combining javascript so the number of HTTP requests goes way down.
The initial results:
Total HTTP Requests: 192
Total Size: 1353141 bytes
After the first stage (finished today), the general results:
Total HTTP Requests: 67
Total Size: 693064 bytes
After stage two is completed – I think I can get those numbers down by another half.
From Yahoo!:
“80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.”
Why does all this matter? Think of a big, busy site. Think about the number of users – and then multiply that by the number of requests as well as the size of each page load. If you want good performance from your site – the pay off from optimizing your site will really pay off. It is pretty easy to go through your site and cleanup small things that over time will really add up. Not using a javascript you once did? Remove it from the header. Redid the site but still have a link to the old CSS “just in case”? Get rid of it! Remember, a little goes a long way.
SDAC Inc. provided:
- Web/Graphic Design
- XHTML/CSS programming
- CMS (XOOPS) configuration
- XOOPS/SMARTY theme
- Custom PHP programming
technologies used:
XHTML, CSS, PHP, MySQL, XOOPS, SMARTY, PhotoShop Elements
user interface:
This web site was for my consulting company. I wanted to create a web site that was easy to navigate, and professional looking. This site uses SMARTY templates so I was able to edit a small number of templates that are used with all new pages – allowing me to have consistency throughout the entire web site.
lessons learned:
More and more clients wanted greater control over their content, so I wanted to learn a new Content Management System. This web site was my first attempt to roll out a CMS (content management system) using (XOOPS). A good lesson for CMS developers (which I learned), even though there is a lot of built in functionality with CMSes, it still takes several hours/weeks to customize the framework.
random thoughts:
CMSes like XOOPS can sometimes be overkill for small companies like mine. I ended up moving everything to WordPress (see SDAC 2006) after I learned XOOPS and implemented another XOOPS web site.
SDAC Inc provided:
- Web/Graphic Design
- HTML/CSS programming
technologies used:
HTML, Adobe GoLive, gimp.app
user interface:
This web site was created for a researcher who, because of a grant, was trying to bring attention to his research. Dr. Talley (who’s resume I also designed) wanted to use earth tone colors and have multiple pictures available on the web site from his research. I provided Dr. Talley with a basic template for the site that was well documented so he, someone who was not very familiar with web development, could add, modify, and delete content with a little HTML experience. Once again, I chose to put the navigation at the top of the page for easy access.
lessons learned:
This project was very simple and fun to work on, but what I think Dr. Talley really needed was a content management system. This was the first project I worked on where I wished I had more time to donate to build him and his team of researchers a content management system he could have quickly and easily used to update web pages from any browser on any computer. (Dr. Talley is most often found in the field with his iBook and not in front of his desk.)
random thoughts:
I hope, in the next few years to start working on more educational based web sites, as I like to know I am able to help people learn in some way or another.
SDAC Inc. provided:
- Web/Graphic Design
- HTML/CSS programming
technologies used:
HTML, PHP, Adobe GoLive, gimp.app
user interface:
This web site was created for someone who wanted a web presence as she started her own massage therapy business in Las Vegas. When I asked her to give me a list of web sites she liked, I was surprised to see that all of them looked, in my opinion, like they were from 1998 (contained neon colors, animated gifs, and looked a little unprofessional). I had to convince Karen that she would benefit more from a more professional looking web site, but as you can see, she still wanted a neon-ish color. I wanted to create three columns, the left for basic information and navigation, the middle for the content, and since Karen had pictures she wanted to present, I put those in the right column.
lessons learned:
If I had complete creative control over this web site, this web site would different. I spent many days on the phone with Karen making suggestions, showing her several options, and working through our differences. In the end, she liked the web site, and I was happy to see her happy. I also helped her with search engine optimization, on-line marketing, and pay-to-list options.
random thoughts:
Karen’s business is booming now and I am quite happy for her!
SDAC Inc provided:
- Web/Graphic Design
- XHTML/CSS programming
- CMS (WordPress) configuration
- Custom WordPress theme
- Third Party Plugin integration
- Custom PHP programming
technologies used:
XHTML, CSS, PHP, WordPress, gimp.app, MySQL
user interface:
What you see here is about the 5th design I produced in a matter of two or three months. I spend many hours looking at some of the best designed web sites on the web and taking note of each part I liked and did not like. Since blogging has become so popular, web sites have starting mimicking the general blog layout. Experienced (my target audience) web surfers’ eyes are trained to look for navigation at the top of the page, the body of the page in the middle, and static links to be available on the left side of the screen. I added the idea of having section specific information available on the right hand side. The year 2004 was the year of the blog for me.
lessons learned:
Even if I QA my work on Safari, Netscape, FireFox, and Mac IE 5.x with code that is validated by the W3C, it is inevitable that IE for Windows will still display things different. It is all about learning CSS tricks and being patient. May hours went into the CSS, but at the end, it is a great feeling to know it works on 99% of the browsers. I also learned the valuable lesson of using multiple style sheets to combat some CSS issues in IE.
random thoughts:
Jappler.com is a return to one of my favorite colors to work with: grey. I like to work with grey because, without bright and interesting colors, you are forced to be creative and focus on other aspects of the design. I think this design displays clean lines, clean code, and hopefully interesting content.
RSS Feed
