Hello there.
Maybe it is helpful to know what tools and programs I use for my work.
And maybe it is helpful to know what I do when I am done with the
"basic design" of my sites.
Ok, let's start:
1. Photoshop (I use CS3 in the office and CS5 at home)
2. Notepad++ (for CSS, JS and XHTML coding)
3. Firefox 3.6.8, IE 8, Chrome 5, Safari 5, Netscape 9.0.0.6, Opera 10.60
4. Addons for Firefox
- Firebug (for debugging)
- Firefox Throttle (to limit bandwidth)
- Page Speed
- YSlow
- Measure It
- LORI
- Live HTTP Headers
- FireShot
- Hammerhead
- HTML Validator
- CSS Validator
- ColorZilla
- GridFox
- WebDeveloper 1.1.8
After done with the graphics I begin to "code" the html/css and maybe adding some jQuery stuff, ...
Most of the time I use the following directory structure:
css
images
js
index.html
(other files)
...
When done with that I start to combine the css files. Sometimes this is not really possible when you work with a css framework or some structures like a master page in ASP.NET.
After I combined as much css files as possible I do the same with all javascript/jQuery files.
Now I upload all files to one of our webservers.
When done I open the site in Firefox, starting Firebug and head over to Page Speed ... now I start analyzing.
Page Speed is very very helpful. It shows me exactly what to do and it also minifies css/js files and compresses all graphic files.
I download every minified/compressed file I need (if I did not minify css/js before) and reupload to the webserver.
To find out how my design looks on other browsers I use browsershots.org as next step.
Another nice tool is feng-gui.com where you can "find out" where most of your visitors will look on your website. It is a heatmap tool. Helpful stuff.
Ok, now I think that many people do not have serveral servers with domains and a cookieless domain.
To speed up your site to the maximum you should do every step that Page Speed tells you in it's report.
This is sometimes a long way to go, but Google will say "Thank you" for it
