Design Best Practicesfor WordPress Websites Presented by Suzette Franck
This is a Car        ●   Standardize!        ●   Dont Make Users            Relearn Web        ●   Be Inventive           ...
Why Standardize?●   Less Time to Code●   Easier to Update and Maintain●   Helps Search Engine Optimization●   Painless Plu...
The Basics...Website Anatomy
Standard Formats   Left Navigation
Standard Formats   Top Navigation
Standard FormatsTop Navigation w/ Side Sub Navigation
Things You Dont See But Exist●   Active, Link & Navigation    Hovers●   Drop Down Menus●   Outside of the Container●   Spe...
Grid Theory         ●   Rule of Thirds/             Golden Ratio         ●   1.6180339 ɸ             (Phi)         ●   Lin...
Nathan Smiths 960 Grid             ●   http://960.gs             ●   12, 16, or 24                 columns             ●  ...
Twenty Eleven Grid Template              ●   Container              ●   Header (Logo, Navigation,                  Social ...
Above The Fold       ●   First 600 Pixels       ●   Sliders take up a lot           of space       ●   Idea of What       ...
PSD Organization   ●   Neatness Counts   ●   Name Your Layers   ●   Use Groups/Folders   ●   Include Fonts (licensing)   ●...
Print vs. Web                              PRINT                        WEBScreen Resolution        300dpi             72d...
Web Typography●   Web Safe Fonts    http://www.w3schools.com/cssref/css_websafe_fonts.asp●   Google Web Fonts    http://ww...
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    <link ...
@font-face●   Way to Embed Fonts into Site●   Must be Licensed for Web Embedding●   Add Code to top of style sheet, use li...
Cufón●   Use for Headlines, Navigation●   Delay in Rendering of Fonts●   Check EULA for Web Embedding●   Javascript conver...
New Trends in Web Design●   Minimalistic●   Gradients and Drop Shadows (CSS3)    http://css3generator.com/●   Noisy Backgr...
Minimalistic
Drop Shadows
Noisy Background
Expansive Footers
Intro to Responsive Design●   Article by Ethan Marcotte in 2010    http://www.alistapart.com/articles/responsive-web-desig...
Media Queries●   Target Device Based on Screen Width●   Bottom of Twenty Eleven Style Sheet    @media (max-width: 800px) {...
Responsive Example   http://colly.com/
What Coders Need●   Site Map (Flowchart or Bullet List of Pages and Hierarchy)●   PSD with Layers Intact●   Background Ima...
WPExpressLanehttp://wpexpresslane.com
Prevent Catastrophes●   Save Work Often●   Take Snap Shots●   Revision Control●   Strong Passwords●   Backup Often●   Keep...
Recommended Books
Q&Asuzette@kussner.com       Twitter: @suzettework          Slides will be at:http://www.slideshare.net/bdollproject
Upcoming SlideShare
Loading in …5
×

Design Best Practices for WordPress

1,184 views
944 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,184
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design Best Practices for WordPress

  1. 1. Design Best Practicesfor WordPress Websites Presented by Suzette Franck
  2. 2. This is a Car ● Standardize! ● Dont Make Users Relearn Web ● Be Inventive When Budget & Purpose Allows ● Standard does not have to be Boring
  3. 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 Dont Label the Cart “Pink Bicycle Basket”● Faster Loading
  4. 4. The Basics...Website Anatomy
  5. 5. Standard Formats Left Navigation
  6. 6. Standard Formats Top Navigation
  7. 7. Standard FormatsTop Navigation w/ Side Sub Navigation
  8. 8. Things You Dont See But Exist● Active, Link & Navigation Hovers● Drop Down Menus● Outside of the Container● Special Functionality● No Background on Logo● Favicon 16x16 Icon
  9. 9. Grid Theory ● Rule of Thirds/ Golden Ratio ● 1.6180339 ɸ (Phi) ● Line-up Components ● Proportion
  10. 10. Nathan Smiths 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. 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. 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. 13. PSD Organization ● Neatness Counts ● Name Your Layers ● Use Groups/Folders ● Include Fonts (licensing) ● Dont Use Layer Effects that are dependent on other layers to display ● Keep It Simple
  14. 14. Print vs. Web PRINT WEBScreen Resolution 300dpi 72dpiMeasurements Inches or points Pixels or EmsBackgrounds Go Crazy! Size MattersLayers & Blending Mode Use if Needed AvoidPage Width 8.5 inches 960pxPage Height 11 inches VariableDrop Shadows, Outer Use anyway you Must have transparentGlow like backgroundGradients Use anyway you Should be linear, repeatable likeFonts Rasterize or Web Safe Fonts, Google Web embedded Fonts, or @font-face
  15. 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. 16. Web Safe Fonts● Body Text● Fastest to load● Display Inconsistent (Browser, OS, Hardware)● Readability is Key
  17. 17. Google Web Fonts
  18. 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. 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. 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. 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. 22. Minimalistic
  23. 23. Drop Shadows
  24. 24. Noisy Background
  25. 25. Expansive Footers
  26. 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. 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. 28. Responsive Example http://colly.com/
  29. 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. 30. WPExpressLanehttp://wpexpresslane.com
  31. 31. Prevent Catastrophes● Save Work Often● Take Snap Shots● Revision Control● Strong Passwords● Backup Often● Keep Software Updated● Develop A Process
  32. 32. Recommended Books
  33. 33. Q&Asuzette@kussner.com Twitter: @suzettework Slides will be at:http://www.slideshare.net/bdollproject

×