*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:
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.
Continue reading: The Need for Speed