DMXzone CSS3 Redesign and Site Optimization Live

Maybe you won't see it but we have been working under the hood on the layout engine of DMXzone. It is now very optimized to the latest web standards and specific with CSS3. This will give you as visitor of DMXzone, much more speed and easy navigation. Are you interested in details, then read on ...

Technical stuff - What's been optimized:

CSS3 Rounded Corners and Shadow on our Boxes

We have changed the boxes on DMXzone, to use CSS3 possibilities for rounded corners and shadows. Those are very fast, the html we produced now is cut by at least 20% as we don't need to generate many DIV's for various hacks.

For browser that do not support CSS3, like IE and Opera we just display normal corners. We could use some hacks for those but eventually this only slows things down so we didn't.

Web Optimization Tools

During the optimization process we have used mainly two great tools, both plugins for Firebug:

• Google Page Speed
• Yahoo Yslow

The Best Practices we've applied

• Optimize the order of styles and scripts
  Always add the styles to your document head, the javascripts that you don't need directly at the end of the document body. Javascripts that you do need before the page is rendered (like jQuery) still needs to be in the document head.
  

• Put CSS in the document head
  All CSS should go there as it is needed for the page rendering and should be loaded ASAP.
  
  
• Parallelize downloads across hostnames
  As the HTTP protocol allows only a few downloads at the same time from the same domain, it is very useful to have your resources come from different sub domains. This way those are downloaded much more simultaneous. We have done this for our logos - those come from images.dmxzone.com , the css files come from css.dmxzone.com and our javascript come from js.dmxzone.com
  
  
• Enable gzip compression
  If your server supports it - the html, css and javascript files can be compressed with gzip (a very fast zip like compression) before they are send to the browser. This usually cuts the size by 80% and makes the files transfer faster.
   
• Minify JavaScript
  Most javascript code contains a lot of "white space" like tabs, new lines etc - that is really not needed. You can use a compressor like YUI Compressor to help you with that. Always preserve your original javascript code version as the compressed version is almost unreadable.
  
  
• Serve static content from a cookieless domain
  Static html, css and javascript files do not need cookies so when we send them we have switched off any session cookies on those - to save transfer time.
  

Search Engine Optimizations

Next to the content and download optimizations, we have changed the content structure to allow better indexing for the search engines.

• Improved page titles
  The page titles are now much more clear, containing the article name as well category that it resides. Also the page title is usually listed as H1 tag as well. Read more why H1 tags are important.
  
  
• Improved page description
  The short description of each article is available as meta description as well as H2 tag.

• Reorganized html flow so that content comes first
  Last but not least, we have reorganized our html flow so that the article content comes first, then the sidebar and as last the header. Sidebar and header are still positioned on top and left with CSS. having the content first have many advantages for the search engines as they just read the html in the order it comes. Read more why having your content first is important.

• Improved forums
  Also for our forums we have improved same things mentioned above.