*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

Put our experts to work

Contact Us