Designer-Friendly EE

Designer-friendly tips and tricks for working with ExpressionEngine and making your clients happy. Presentation for 3rd annual Engine Summit

Transcript

1. Some rights reserved
   Designer-Friendly
   Engine Summit May 29, 2012
   Environments for Humans
   

   View Slide

2. Designer-Friendly EE Engine Summit
   Web Designer Writer Instructor
   emilylewisdesign.com
   Co-host, EE Podcast
   ee-podcast.com
   Author, Microformats Made Simple
   microformatsmadesimple.com
   Contributing author, HTML5 Cookbook
   oreilly.com/catalog/0636920016038
   Email: emily@emilylewisdesign.com
   Blog: ablognotlimited.com
   Twitter: @emilylewis
   

   View Slide

3. Designer-Friendly EE Engine Summit
   Designer Friendly
   
   ☺
   ☺ ☺
   

   View Slide

4. Designer-Friendly EE Engine Summit
   • User-friendly interfaces
   • Standards-based front-end
   • Organization and planning
   What I’m Good At
   

   View Slide

5. Designer-Friendly EE Engine Summit
   • User-friendly interfaces
   • Standards-based front-end
   • Organization and planning
   What I’m Good At What I’m Not
   • Programming
   • Databases
   • Servers and hosting
   

   View Slide

6. Designer-Friendly EE Engine Summit
   • User-friendly interfaces
   • Standards-based front-end
   • Organization and planning
   What I’m Good At What I’m Not
   • Programming
   • Databases
   • Servers and hosting
   ✓
   ✓
   ✓
   OB
   OB
   OB
   

   View Slide

7. Designer-Friendly EE Engine Summit
   Designer + EE =
   Advantages (?)
   
   ☺
   ☺
   

   View Slide

8. Designer-Friendly EE Engine Summit
   http://flic.kr/p/4iFgSi
   • ExpressionEngine
   • Add-Ons
   • User Experience
   

   View Slide

9. Designer-Friendly EE Engine Summit
   Projects
   
   ☺
   ☺
   

   View Slide

10. Designer-Friendly EE Engine Summit
    Plan of Attack
    
    ☺
    

    View Slide

11. Designer-Friendly EE Engine Summit
    Documentation
    
    • Process - installation, configuration, go-live
    • EE dev - channels, custom fields, categories ...
    everything
    • Server environment, version control
    My Tools of Choice
    • Basecamp - basecamp.com
    • Dev Docs - devot-ee.com/add-ons/dev-docs
    

    View Slide

12. Designer-Friendly EE Engine Summit
    Basecamp
    
    • Installation
    • Configuration
    • Go live
    • Everything in between
    To-do List Templates & Projects
    Project Management
    

    View Slide

13. Designer-Friendly EE Engine Summit
    Dev Docs
    
    • Naming conventions
    • Server environment
    • Channels
    • Custom fields
    • Categories
    • Templates
    Project-specific Development
    • Snippets
    • Global Variables
    • Add-ons
    • File manager upload preferences
    • Control panel customizations
    eeinsider.com/articles/the-dreaded-documentation/
    

    View Slide

14. Designer-Friendly EE Engine Summit
    Dev Docs
    
    Project-specific Development
    

    View Slide

15. Designer-Friendly EE Engine Summit
    Dev Docs
    
    Project-specific Development
    

    View Slide

16. Designer-Friendly EE Engine Summit
    Projects
    
    ☺
    ☺
    http://flic.kr/p/88pYrq
    ExpressionEngine
    

    View Slide

17. Designer-Friendly EE Engine Summit
    Installing/Upgrading
    
    • Remove files you don’t need
    ee-podcast.com/episodes/time-saving-tips-techniques
    • Upload compressed file
    ee-spotlight.com/tutorials/a-better-way-to-ftp-your-
    expressionengine-site-use-zip-files
    • Expansion script
    ngenworks.com/blog/ee-upgrade-script/
    

    View Slide

18. Designer-Friendly EE Engine Summit
    Security
    
    Post-Installation Best Practices
    • Rename system directory
    • Move system directory above the web root
    • Rename admin.php
    expressionengine.com/user_guide/installation/best_practices.html
    

    View Slide

19. Designer-Friendly EE Engine Summit
    Security
    
    Recommended Settings
    mijingo.com/products/ebooklets/securing-expressionengine-2/
    

    View Slide

20. Designer-Friendly EE Engine Summit
    Security
    
    Recommended Settings
    mijingo.com/products/ebooklets/securing-expressionengine-2/
    

    View Slide

21. Designer-Friendly EE Engine Summit
    Templates & Groups
    
    • Chunking
    train-ee.com/.../02-chunking-up-the-
    main-template-into-a-collection-of-
    embedded-templates
    • Limit embeds, try out
    Snippets and Global
    Variables*
    loweblog.com/downloads/ee-parse-
    order.pdf
    

    View Slide

22. Designer-Friendly EE Engine Summit
    Templates & Groups
    
    • Smart conditionals
    devot-ee.com/add-ons/ifelse
    derekallard.com/blog/post/simple-vs-complex-conditionals-in-
    expressionengine-templates
    • Organization and naming conventions
    

    View Slide

23. Designer-Friendly EE Engine Summit
    http://flic.kr/p/chdd4
    Add-Ons
    

    View Slide

24. Designer-Friendly EE Engine Summit
    Text Editors
    
    • v2.5 Rich Text Editor*
    vimeo.com/37280018
    • Wygwam
    devot-ee.com/add-ons/wygwam
    

    View Slide

25. Designer-Friendly EE Engine Summit
    Matrix
    
    devot-ee.com/add-ons/matrix
    

    View Slide

26. Designer-Friendly EE Engine Summit
    Matrix
    
    devot-ee.com/add-ons/matrix
    

    View Slide

27. Designer-Friendly EE Engine Summit
    Playa
    
    devot-ee.com/add-ons/playa
    

    View Slide

28. Designer-Friendly EE Engine Summit
    Playa
    
    devot-ee.com/add-ons/playa
    

    View Slide

29. Designer-Friendly EE Engine Summit
    Matrix & Playa & Wygwam
    
    

    View Slide

30. Designer-Friendly EE Engine Summit
    Low Variables
    
    devot-ee.com/add-ons/low-variables
    

    View Slide

31. Designer-Friendly EE Engine Summit
    Low Variables
    
    devot-ee.com/add-ons/low-variables
    

    View Slide

32. Designer-Friendly EE Engine Summit
    Low Variables
    
    

    View Slide

33. Designer-Friendly EE Engine Summit
    Single Entry
    
    devot-ee.com/add-ons/single-entry
    

    View Slide

34. Designer-Friendly EE Engine Summit
    Navigation
    
    • NavEE
    devot-ee.com/add-ons/navee
    • Structure
    buildwithstructure.com
    

    View Slide

35. Designer-Friendly EE Engine Summit
    Devot:ee Monitor
    
    devot-ee.com/add-ons/devotee-monitor
    

    View Slide

36. Designer-Friendly EE Engine Summit
    http://flic.kr/p/4NWv4G
    User Experience
    

    View Slide

37. Designer-Friendly EE Engine Summit
    Custom Fields
    
    • HTML allowed
    • Instructions on steriods
    ee-garage.com/nsm-publish-hints
    Better Publish Forms
    Good Field Labels & Instructions
    

    View Slide

38. Designer-Friendly EE Engine Summit
    Custom Fields
    
    • VZ Address
    devot-ee.com/add-ons/vz-address
    Better Publish Forms
    The Right Fieldtype for Your Client
    

    View Slide

39. Designer-Friendly EE Engine Summit
    Publish Layouts
    
    Better Publish Forms
    eeinsider.com/blog/help-troubleshoot-publish-layouts/
    

    View Slide

40. Designer-Friendly EE Engine Summit
    Title & Title URL Labels
    
    Better Publish Forms
    devot-ee.com/add-ons/mx-title-control
    

    View Slide

41. Designer-Friendly EE Engine Summit
    Title & Title URL Labels
    
    Better Publish Forms
    devot-ee.com/add-ons/mx-title-control
    

    View Slide

42. Designer-Friendly EE Engine Summit
    Main Menu Buttons
    
    Better Control Panel
    

    View Slide

43. Designer-Friendly EE Engine Summit
    Access
    
    Better Control Panel
    

    View Slide

44. Designer-Friendly EE Engine Summit
    • Modified install/upgrade
    • Security changes
    • Good templating practices
    • Add-ons
    • Dev Docs
    • Matrix
    • MX Title Control*
    • VZ Address
    • Wygwam*
    • Devot:ee Monitor*
    What I Will Always Do What I Might Do
    • Low Variables
    • Playa
    • Single Entry
    • NavEE/Structure
    

    View Slide

45. Designer-Friendly EE Engine Summit
    ?
    
    How Far Do You Go
    

    View Slide

46. Designer-Friendly EE Engine Summit
    Know Your Project!
    • Budget
    • Timeline
    • Functionality requirements
    • Content authors - number, skill
    • Publishing workflows
    • Your own skill level
    
    

    View Slide

47. Designer-Friendly EE Engine Summit
    • Document, document, document
    • Plan, plan, plan
    • Get out of your comfort zone
    • Try add-ons
    • Focus on user experience
    http://flic.kr/p/5WrMdi
    

    View Slide

48. Designer-Friendly EE Engine Summit
    More Info
    • NSM config bootstrap
    ee-garage.com/nsm-config-bootstrap
    • ExpressionEngine Site Strategy with Dev Docs
    expressionengine.com/blog/entry/
    expressionengine_site_strategy_with_dev_docs
    • EE, Faster
    speakerdeck.com/u/jacobrussell/p/ee-faster
    • Parse Order and Low Variables
    gotolow.com/blog/parse-order-and-low-variables
    
    ☺
    

    View Slide

49. Designer-Friendly EE Engine Summit
    More Info
    • Relationships with Playa
    mijingo.com/products/screencasts/playa-relationships-expressionengine/
    • Switchee
    devot-ee.com/add-ons/switchee
    • NSM override.css
    ee-garage.com/override-css
    • Nerdery Theme
    github.com/litzinger/Nerdery-Theme
    
    ☺
    

    View Slide

50. Designer-Friendly EE Engine Summit
    Questions?
    
    emily@emilylewisdesign.com @emilylewis
    

    View Slide

51. Designer-Friendly EE Engine Summit
    ☺
    thanks
    
    

    View Slide