*Designing* Websites for Speed

First. Speed is the greatest Keanu Reeves movie ever.

Second. I'm not going to write about how to program a fast site. I am going to write as a designer and how to think when you are crafting that website masterpiece.

I know what you're thinking. 

I'm the designer. I don't need to worry about speed. That's up to the programmer.

Wrong. Your design has a dramatic affect on the user experience and site performance.

The good news is that designing a super-cool, yet efficient and fast-loading site, is not that hard.

There are three rules to remember when designing speedy websites:

• Efficiency
• Simplicity
• Size

Let's break these three rules down further.

Efficiency (in general describes the extent to which time or effort is well used for the intended task or purpose.)

• Design your navigation using HTML fonts and not graphics
  This is a no-brainer. You'll want to be able to easily update navigation and add/edit pages from your CMS.
• Design as much text as possible to use HTML fonts
  Less images to load means faster load time. Use Typekit or Google Fonts for a wide variety of HTML fonts.
• Reuse design elements
  Avoid redundancy by reusing design elements throughout the site design.

Simplicity (is the state or quality of being simple)

• Don't use images for everything
  Where you can, think of how you use CSS for colors, gradients, curves, etc
• Avoid a lot of drop shadows
  Drop shadows can eat up bytes to render. You can still use them, just don't go crazy. And keep them consistent.
• Use the Bonsai method
  Start with a complex design and trim away elements you don't need till you're left with the perfect balance of design and function.

Size (it does matter)

• Optimize your images before uploading to a CMS 
  Don't let the CMS auto-resize your images for you, or use HTML to adjust the sizing. This can really affect the speed of a website.
• If using large images (full browser images) make them as small as possible in Photoshop. Less than 200k is a good rule of thumb.

Remember, It's really not that hard to think about speed when you are designing a website. Keep the rules above in mind as you craft your next website.

Good luck!

Continue reading: The Need for Speed