The document provides best practices for designing WordPress websites, recommending that designers standardize layouts and formats to improve usability, maintenance, and search engine optimization while avoiding unnecessary complexity; it also discusses typography, responsive design, and tools like grids, media queries, and content management to create user-friendly, adaptable sites.

1. Design Best Practices
for WordPress Websites
Presented by Suzette Franck

2. This is a Car
● Standardize!
● Don't Make Users
Relearn Web
● Be Inventive
When Budget &
Purpose Allows
● Standard does
not have to be
Boring

3. Why Standardize?
● Less Time to Code
● Easier to Update and Maintain
● Helps Search Engine Optimization
● Painless Plugin and Software Upgrades
● Pleasant Customer User Experience
● Use Common Names & Icons for Sections
Don't Label the Cart “Pink Bicycle Basket”
● Faster Loading

4. The Basics...Website Anatomy

5. Standard Formats
Left Navigation

6. Standard Formats
Top Navigation

7. Standard Formats
Top Navigation w/ Side Sub Navigation

8. Things You Don't See But Exist
● Active, Link & Navigation
Hovers
● Drop Down Menus
● Outside of the Container
● Special Functionality
● No Background on Logo
● Favicon 16x16 Icon

9. Grid Theory
● Rule of Thirds/
Golden Ratio
● 1.6180339 ɸ
(Phi)
● Line-up
Components
● Proportion

10. Nathan Smith's 960 Grid
● http://960.gs
● 12, 16, or 24
columns
● 960 pixels wide:
divisible by 2, 3,
4,5,6,8,10,12,15,
or 16

11. Twenty Eleven Grid Template
● Container
● Header (Logo, Navigation,
Social Media, Call to Action)
● Body (Content Sidebar,
Widgets)
● Footer (Copyright, Site
Map, Terms & Privacy)
Download PSD Template:
http://wpexpresslane.com/grid

12. Above The Fold
● First 600 Pixels
● Sliders take up a lot
of space
● Idea of What
Website is About in
3 Seconds
● Entice Users to Dig
Deeper

13. PSD Organization
● Neatness Counts
● Name Your Layers
● Use Groups/Folders
● Include Fonts (licensing)
● Don't Use Layer Effects
that are dependent on
other layers to display
● Keep It Simple

14. Print vs. Web
PRINT WEB
Screen Resolution 300dpi 72dpi
Measurements Inches or points Pixels or Ems
Backgrounds Go Crazy! Size Matters
Layers & Blending Mode Use if Needed Avoid
Page Width 8.5 inches 960px
Page Height 11 inches Variable
Drop Shadows, Outer Use anyway you Must have transparent
Glow like background
Gradients Use anyway you Should be linear, repeatable
like
Fonts Rasterize or Web Safe Fonts, Google Web
embedded Fonts, or @font-face

15. Web Typography
● Web Safe Fonts
http://www.w3schools.com/cssref/css_websafe_fonts.asp
● Google Web Fonts
http://www.google.com/webfonts
● @Font Face
http://www.fontsquirrel.com/fontface
● Web Fonts
http://www.dafont.com/
● Cufon
http://cufon.shoqolate.com/generate/

16. Web Safe Fonts
● Body Text
● Fastest to load
● Display Inconsistent
(Browser, OS, Hardware)
● Readability is Key

17. Google Web Fonts

18. Google Web Fonts
● Body, Headlines, Navigation, Logo
● Some Fonts are Inconsistent
● Easy to Add to Web Sites
<link href='http://fonts.googleapis.com/css?
family=Chau+Philomene+One' rel='stylesheet' type='text/css'>
● Compare and Filter Fonts by Type
● Downloadable for use in Photoshop
http://www.google.com/webfonts or
http://joemaller.com/1856/download-google-fonts/

19. @font-face
● Way to Embed Fonts into Site
● Must be Licensed for Web Embedding
● Add Code to top of style sheet, use like any
font using font-family: tag
● Best for for Navigation and Headlines
● Font Squirrel
http://www.fontsquirrel.com/fontface/generator

20. Cufón
● Use for Headlines, Navigation
● Delay in Rendering of Fonts
● Check EULA for Web Embedding
● Javascript converts text to images, but
leaves HTML code intact
● http://cufon.shoqolate.com/generate/
● Requires WordPress Plugin or Upload of
.js files

21. New Trends in Web Design
● Minimalistic
● Gradients and Drop Shadows (CSS3)
http://css3generator.com/
● Noisy Backgrounds
http://www.noisetexturegenerator.com/
● Beautiful Typography
● Expansive Footers
● Responsive Design

22. Minimalistic

23. Drop Shadows

24. Noisy Background

25. Expansive Footers

26. Intro to Responsive Design
● Article by Ethan Marcotte in 2010
http://www.alistapart.com/articles/responsive-web-design/
● Layout Changes Based on Width of Device
● Uses Same Style Sheet for All Versions
● Uses Media Queries & CSS
● Widths and Fonts as % and ems
● Hidden Content Will be Downloaded

27. Media Queries
● Target Device Based on Screen Width
● Bottom of Twenty Eleven Style Sheet
@media (max-width: 800px) {
#sidebar {
float: none;
}
}
● Examples: http://mediaqueri.es/popular/

28. Responsive Example
http://colly.com/

29. What Coders Need
● Site Map (Flowchart or Bullet List of Pages and Hierarchy)
● PSD with Layers Intact
● Background Image if Used
● Special Fonts if Used
● Explanation of Special Functionality
● Deadlines
● Login Credentials for Domain Registrar

30. WPExpressLane
http://wpexpresslane.com

31. Prevent Catastrophes
● Save Work Often
● Take Snap Shots
● Revision Control
● Strong Passwords
● Backup Often
● Keep Software
Updated
● Develop A Process

32. Recommended Books

33. Q&A
suzette@kussner.com
Twitter: @suzettework
Slides will be at:
http://www.slideshare.net/bdollproject