Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designer-Friendly EE

Designer-Friendly EE

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

Emily Lewis

May 30, 2012
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

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

    View full-size 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: [email protected]
    Blog: ablognotlimited.com
    Twitter: @emilylewis

    View full-size slide

  3. Designer-Friendly EE Engine Summit
    Designer Friendly


    ☺ ☺

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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



    View full-size slide

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

    View full-size slide

  9. Designer-Friendly EE Engine Summit
    Projects



    View full-size slide

  10. Designer-Friendly EE Engine Summit
    Plan of Attack


    View full-size 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 full-size slide

  12. Designer-Friendly EE Engine Summit
    Basecamp

    • Installation
    • Configuration
    • Go live
    • Everything in between
    To-do List Templates & Projects
    Project Management

    View full-size 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 full-size slide

  14. Designer-Friendly EE Engine Summit
    Dev Docs

    Project-specific Development

    View full-size slide

  15. Designer-Friendly EE Engine Summit
    Dev Docs

    Project-specific Development

    View full-size slide

  16. Designer-Friendly EE Engine Summit
    Projects



    http://flic.kr/p/88pYrq
    ExpressionEngine

    View full-size 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 full-size 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 full-size slide

  19. Designer-Friendly EE Engine Summit
    Security

    Recommended Settings
    mijingo.com/products/ebooklets/securing-expressionengine-2/

    View full-size slide

  20. Designer-Friendly EE Engine Summit
    Security

    Recommended Settings
    mijingo.com/products/ebooklets/securing-expressionengine-2/

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

  25. Designer-Friendly EE Engine Summit
    Matrix

    devot-ee.com/add-ons/matrix

    View full-size slide

  26. Designer-Friendly EE Engine Summit
    Matrix

    devot-ee.com/add-ons/matrix

    View full-size slide

  27. Designer-Friendly EE Engine Summit
    Playa

    devot-ee.com/add-ons/playa

    View full-size slide

  28. Designer-Friendly EE Engine Summit
    Playa

    devot-ee.com/add-ons/playa

    View full-size slide

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

    View full-size slide

  30. Designer-Friendly EE Engine Summit
    Low Variables

    devot-ee.com/add-ons/low-variables

    View full-size slide

  31. Designer-Friendly EE Engine Summit
    Low Variables

    devot-ee.com/add-ons/low-variables

    View full-size slide

  32. Designer-Friendly EE Engine Summit
    Low Variables

    View full-size slide

  33. Designer-Friendly EE Engine Summit
    Single Entry

    devot-ee.com/add-ons/single-entry

    View full-size slide

  34. Designer-Friendly EE Engine Summit
    Navigation

    • NavEE
    devot-ee.com/add-ons/navee
    • Structure
    buildwithstructure.com

    View full-size slide

  35. Designer-Friendly EE Engine Summit
    Devot:ee Monitor

    devot-ee.com/add-ons/devotee-monitor

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  39. Designer-Friendly EE Engine Summit
    Publish Layouts

    Better Publish Forms
    eeinsider.com/blog/help-troubleshoot-publish-layouts/

    View full-size slide

  40. Designer-Friendly EE Engine Summit
    Title & Title URL Labels

    Better Publish Forms
    devot-ee.com/add-ons/mx-title-control

    View full-size slide

  41. Designer-Friendly EE Engine Summit
    Title & Title URL Labels

    Better Publish Forms
    devot-ee.com/add-ons/mx-title-control

    View full-size slide

  42. Designer-Friendly EE Engine Summit
    Main Menu Buttons

    Better Control Panel

    View full-size slide

  43. Designer-Friendly EE Engine Summit
    Access

    Better Control Panel

    View full-size 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 full-size slide

  45. Designer-Friendly EE Engine Summit
    ?

    How Far Do You Go

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  50. Designer-Friendly EE Engine Summit
    Questions?

    [email protected] @emilylewis

    View full-size slide

  51. Designer-Friendly EE Engine Summit

    thanks

    View full-size slide