Water

Design Best Practices
for WordPress Websites

Presented by Suzette Franck

This is a Car

Standardize!

Don't Make Users Relearn Web

Be Inventive When Budget & Purpose Allows

Standard does not have to be Boring

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

The Basics...Website Anatomy

Standard Formats

Left Navigation

Standard Formats

Top Navigation

Standard Formats

Top Navigation w/ Side Sub Navigation

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

Grid Theory

Rule of Thirds/ Golden Ratio

1.6180339 (Phi)

Line-up Components

Proportion

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

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

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

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

Print vs. Web

PRINTWEB

Screen Resolution300dpi72dpi

MeasurementsInches or pointsPixels or Ems

BackgroundsGo Crazy!Size Matters

Layers & Blending ModeUse if NeededAvoid

Page Width8.5 inches960px

Page Height11 inchesVariable

Drop Shadows, Outer GlowUse anyway you likeMust have transparent background

GradientsUse anyway you likeShould be linear, repeatable

FontsRasterize or embeddedWeb Safe Fonts, Google Web Fonts, or @font-face

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/

Web Safe Fonts

Body Text

Fastest to load

Display Inconsistent
(Browser, OS, Hardware)

Readability is Key

Google Web Fonts

Google Web Fonts

Body, Headlines, Navigation, Logo

Some Fonts are Inconsistent

Easy to Add to Web Sites

Compare and Filter Fonts by Type

Downloadable for use in Photoshop
http://www.google.com/webfonts or
http://joemaller.com/1856/download-google-fonts/

@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

Cufn

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

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

Minimalistic

Drop Shadows

Noisy Background

Expansive Footers

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

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/

Responsive Example

http://colly.com/

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

WPExpressLane

http://wpexpresslane.com

Prevent Catastrophes

Save Work Often

Take Snap Shots

Revision Control

Strong Passwords

Backup Often

Keep Software Updated

Develop A Process

Recommended Books

Q & A

suzette@kussner.comTwitter: @suzetteworkSlides will be at:
http://www.slideshare.net/bdollproject