WordPress for Designers

12,073
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
12,073
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress for Designers

  1. 1. A DESIGNER’S GUIDE TO WORDPRESS WordCamp Toronto 2014
  2. 2. JAMES HIPKIN Started in traditional advertising Moved over to direct marketing Been involved with digital for over ten years Currently owner and Managing Director at Red8 Interactive
  3. 3. OVERVIEW What you need to know about websites The WordPress Content Management System (CMS) Implications for designers Things to watch out for
  4. 4. WEBSITES Understanding how websites are built makes building them easier (less expensive) using WordPress or any other technology
  5. 5. SOME BROAD POINTS Websites are integrated systems—a small change in one place can have a big impact in other, often unexpected places Design for mobile first Design for 72 dpi A change is never a “little thing”
  6. 6. STRUCTURE HTML is the framing—it uses “elements” to tell the browser what to display
  7. 7. STYLE CSS tells the browser how elements will be displayed
  8. 8. HTML and CSS work together to create both an aesthetic and functional end result
  9. 9. FONTS Web-safe fonts are, well, safe Fonts treatments are not rendered consistently across browsers
  10. 10. FONTS Font services can help add variety—use them for Headers and Subheads Design so the site won’t break if the desired font isn’t available
  11. 11. FONTS Use font effects carefully • Modern browsers support many new treatments (CSS3) but older IE browsers don’t • To achieve font effects in older IE browsers, shadows, glows, etc., we need to use images, which don’t scale, affect performance and aren’t SEO friendly • Design sites to degrade gracefully in IE browsers
  12. 12. MOBILE FIRST 50%+ using smartphone/tablet over desktop users Mobile devices outnumber PC/ Mac sales Mobile designs should not be an afterthought Share of U.S. Time Spent on Digital Media by Platform Source: comScore Media Metrix Multi-Platform Total Desktop Audience and Mobile Audience Age 18+ Date: June 2013
  13. 13. MOBILE FIRST When designing for mobile, keep in mind the core functionality of your site • what will the user need on each device? Design for hand position Use a 12-column grid Keep it simple
  14. 14. RESPONSIVE OR ADAPTIVE?
  15. 15. RESPONSIVE Responsive—adjusts the size of elements, it can be fluid, or not, and repositions them based on screen size
  16. 16. ADAPTIVE Adaptive also adjusts the size and repositions elements, and it changes what content is available based on the device (break points)
  17. 17. WORDPRESS
  18. 18. CONTENT WordPress manages content in two ways: • static content—content that isn’t managed using WordPress, it’s held within the HTML • dynamic content—content that is managed by WordPress, it’s held in a database
  19. 19. THEMES WordPress uses a theme to create a specific look for the website—you are designing the theme Think of WordPress as the operating system, and the theme is the software that determines how the site looks, and what and where content is displayed
  20. 20. THEMES A theme is a collection of templates and stylesheets There are a lot of pre-built themes available • some are free, and some are premium • some are good, and some, not so much… A custom theme gives you the greatest flexibility, will make the site unique, and performs better
  21. 21. TEMPLATES Templates manage the structure of pages, and provide page-level functionality
  22. 22. PLUGINS AND WIDGETS Plugins and widgets extend WordPress’ functionality • most are free, some are premium • they can add functionality easily and quickly • they can also add bloat, affect performance, and impact security
  23. 23. POSTS Posts are used to add specific, dynamic, or time sensitive content to pages • custom post types give designers a lot of flexibility and control
  24. 24. PAGES Pages are a specialized form of post • prebuilt templates provide functionality and structure to the page
  25. 25. IMPLICATIONS FOR DESIGNERS
  26. 26. EXISTING THEME VS. CUSTOM Consider designing with an existing theme in mind • quality varies so before you start customizing, have your developer check it out to be sure it’s stable and supported
  27. 27. PREMIUM THEME SOURCES Select a theme from an established theme vendor— the code is solid and support is available Some to consider: • Studio Press • iThemes • Elegant Themes • Woo Themes
  28. 28. CUSTOM THEMES If your site is complex, and/or you need a lot of control over how content is displayed a custom theme will be required Custom themes also tend to be lighter, which improves performance
  29. 29. TEMPLATES Control the number of templates • a change in page structure or functionality requires a new template • build wireframes first
  30. 30. VARIETY Involve a WordPress developer early and often —they will help you understand: • when a new template is required • how to create a variety using Custom Post Types, Hooks, Filters and styles
  31. 31. STYLE The stylesheet is used to customize a theme • plan how dynamic content will be styled • consider all the controls on the visual editor and provide style direction The Wordpress visual editor
  32. 32. PLUGINS AND WIDGETS Know your plugins Design to their capabilities
  33. 33. ≠ Snow Report Plugin GoTahoeNorth.com Design
  34. 34. THINGS TO WATCH OUT FOR
  35. 35. WHEN YOU DESIGN Think about the Navigation • show us how you want it to work • custom navigation is possible but expensive • mobile navigation should push content over or down
  36. 36. WHEN YOU DESIGN Footers are often forgotten • a lot of info of secondary importance can be located in the footer • footers need design love too!
  37. 37. WHEN YOU DESIGN Provide a font hierarchy • Especially important when using a font service Test the design using the fonts in the hierarchy
  38. 38. WHEN YOU DESIGN Think about how you want links to display • there are four states: resting, hover, active and visited • no hover on mobile, just say’n • give links and action buttons enough space to be practical on mobile devices
  39. 39. WHEN YOU DESIGN Secondary and error pages need to be considered • 403 Forbidden, 404 Not Found, Privacy Policy, etc.
  40. 40. WHEN YOU DESIGN Design the forms • keep plugin capabilities in mind • external connections to CRM or email services can dictate form structure
  41. 41. WHEN YOU DESIGN Design the login screen—give yourself some credit
  42. 42. WHEN YOU DESIGN Please, please follow Photoshop best practices Read and follow the guidelines at Ps Etiquette
  43. 43. ASK EARLY, ASK OFTEN If in doubt, check with an experienced WordPress developer—there is almost always a solution
  44. 44. THANK YOU! Red8 Interactive San Francisco St. Louis James Hipkin james@red8interactive.com 415.789.3685

×