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


Published on

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ●●●
    Are you sure you want to  Yes  No
    Your message goes here
  • 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 ● ● 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:
  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● Google Web Fonts● @Font Face● Web Fonts● Cufon
  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= family=Chau+Philomene+One rel=stylesheet type=text/css>● Compare and Filter Fonts by Type● Downloadable for use in Photoshop or
  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
  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●● Requires WordPress Plugin or Upload of .js files
  21. 21. New Trends in Web Design● Minimalistic● Gradients and Drop Shadows (CSS3)● Noisy Backgrounds● 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● 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:
  28. 28. Responsive Example
  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. WPExpressLane
  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& Twitter: @suzettework Slides will be at: