Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Best Practices for WordPress

1,371 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×