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

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

2. 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
Designer-Friendly EE Engine Summit 2

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

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

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

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

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

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

9. ☺
Projects
☺
Designer-Friendly EE Engine Summit 9

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

11. 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
Designer-Friendly EE Engine Summit 11

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

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

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

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

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

17. 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/
Designer-Friendly EE Engine Summit 17

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

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

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

21. 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
Designer-Friendly EE Engine Summit 21

22. 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
Designer-Friendly EE Engine Summit 22

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

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

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

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

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

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

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

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

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

32. Low Variables
Designer-Friendly EE Engine Summit 32

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48. 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
Designer-Friendly EE Engine Summit 48

49. 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
Designer-Friendly EE Engine Summit 49

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

51. ☺
thanks
Designer-Friendly EE Engine Summit 51