1. A DESIGNERS GUIDETO WORDPRESSWordCamp Toronto 2014

2. JAMES HIPKINStarted in traditionaladvertisingMoved over to directmarketingBeen involved with digital for over ten yearsCurrently owner and Managing Director atRed8 Interactive 3. OVERVIEWWhat you need to know about websitesThe WordPress Content Management System (CMS)Implications for designersThings to watch out for 4. WEBSITESUnderstanding howwebsites are builtmakes building themeasier (less expensive)using WordPress or anyother technology 5. SOME BROAD POINTSWebsites are integrated systemsasmall change in one place can have abig impact in other, oftenunexpected placesDesign for mobile firstDesign for 72 dpiA change is never alittle thing 6. STRUCTUREHTML is the framingituses elements to tellthe browser whatto display 7. STYLECSS tells the browserhow elements willbe displayed 8. HTML and CSS worktogether to createboth an aesthetic andfunctional end result 9. FONTSWeb-safe fonts are, well, safeFonts treatments are not rendered consistentlyacross browsers 10. FONTSFont services can help add varietyuse them forHeaders and SubheadsDesign so the site wont break if the desired fontisnt available 11. FONTSUse font effects carefully Modern browsers support many new treatments(CSS3) but older IE browsers dont To achieve font effects in older IE browsers, shadows,glows, etc., we need to use images, which dont scale,affect performance and arent SEO friendly Design sites to degrade gracefully in IE browsers 12. MOBILE FIRST50%+ using smartphone/tabletover desktop usersMobile devices outnumber PC/Mac salesMobile designs should not bean afterthought Share of U.S. Time Spent on Digital Media byPlatform Source: comScore Media MetrixMulti-Platform Total Desktop Audience andMobile Audience Age 18+ Date: June 2013 13. MOBILE FIRSTWhen designing for mobile, keep in mind the corefunctionality of your site what will the user needon each device?Design for hand positionUse a 12-column gridKeep it simple 14. RESPONSIVE OR ADAPTIVE? 15. RESPONSIVEResponsiveadjusts the size of elements, it can be fluid,or not, and repositions them based on screen size 16. ADAPTIVEAdaptive also adjusts the size and repositions elements,and it changes what content is available based on thedevice (break points) 17. WORDPRESS 18. CONTENTWordPress manages content in two ways: static contentcontentthat isnt managed usingWordPress, its held withinthe HTML dynamic contentcontent that is managed byWordPress, its held in a database 19. THEMESWordPress uses a theme to create a specific look forthe websiteyou are designing the themeThink of WordPress as the operating system, and thetheme is the software that determines how the sitelooks, and what and where content is displayed 20. THEMESA theme is a collection of templates and stylesheetsThere are a lot of pre-built themes available some are free, and some are premium some are good, and some, not so muchA custom theme gives you the greatest flexibility, willmake the site unique, and performs better 21. TEMPLATESTemplates manage the structure of pages, and providepage-level functionality 22. PLUGINS AND WIDGETSPlugins 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, andimpact security 23. POSTSPosts are used to add specific, dynamic, or time sensitivecontent to pages custom post typesgive designers a lot offlexibility and control 24. PAGESPages are a specialized form of post prebuilt templatesprovide functionalityand structure to thepage 25. IMPLICATIONS FOR DESIGNERS 26. EXISTING THEME VS. CUSTOMConsider designing with an existing theme in mind quality varies so before you start customizing,have your developer check it out to be sure itsstable and supported 27. PREMIUM THEME SOURCESSelect a theme from an established theme vendorthe code is solid and support is availableSome to consider: Studio Press iThemes Elegant Themes Woo Themes 28. CUSTOM THEMESIf your site is complex, and/or you need a lot of control overhow content is displayed a custom theme will be requiredCustom themes also tend to be lighter, which improvesperformance 29. TEMPLATESControl the number of templates a change in page structure or functionality requiresa new template build wireframes first 30. VARIETYInvolve a WordPressdeveloper early and oftenthey will help youunderstand: when a newtemplate is required how to create a variety using Custom Post Types,Hooks, Filters and styles 31. STYLEThe stylesheet is used to customize a theme plan how dynamic content will be styled consider all the controls on the visual editor andprovide style directionThe Wordpress visual editor 32. PLUGINS AND WIDGETSKnow your pluginsDesign to their capabilities 33. Snow Report PluginGoTahoeNorth.com Design 34. THINGS TO WATCH OUT FOR 35. WHEN YOU DESIGNThink 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. WHEN YOU DESIGNFooters are often forgotten a lot of info of secondary importance can belocated in the footer footers need design love too! 37. WHEN YOU DESIGNProvide a font hierarchy Especially important when using a font serviceTest the design using the fonts in the hierarchy 38. WHEN YOU DESIGNThink about how you want links to display there are four states: resting, hover, activeand visited no hover on mobile, just sayn give links and action buttons enough space to bepractical on mobile devices 39. WHEN YOU DESIGNSecondary and errorpages need to beconsidered 403 Forbidden,404 Not Found,Privacy Policy,etc. 40. WHEN YOU DESIGNDesign the forms keep plugin capabilities in mind external connections to CRM or email services candictate form structure 41. WHEN YOU DESIGNDesign the login screengive yourself some credit 42. WHEN YOU DESIGNPlease, pleasefollow Photoshopbest practicesRead and followthe guidelines atPs Etiquette 43. ASK EARLY, ASK OFTENIf in doubt, check with an experienced WordPressdeveloperthere is almost always a solution 44. THANK YOU!Red8 InteractiveSan FranciscoSt. LouisJames Hipkinjames@red8interactive.com415.789.3685