Designer-Friendly
             Engine Summit May 29, 2012
                 Environments for Humans




                               Some rights reserved
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
☺

Designer Friendly
   ☺       ☺




               Designer-Friendly EE   Engine Summit   3
What I’m Good At
•   User-friendly interfaces

•   Standards-based front-end

•   Organization and planning




                                Designer-Friendly EE   Engine Summit   4
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
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
☺

Designer + EE =
   ☺




Advantages (?)

           Designer-Friendly EE   Engine Summit   7
• ExpressionEngine
• Add-Ons
• User Experience




                     Designer-Friendly EE         Summit    8
                                            Enginehttp://flic.kr/p/4iFgSi
☺

Projects
   ☺




       Designer-Friendly EE   Engine Summit   9
Plan of Attack
     ☺




          Designer-Friendly EE   Engine Summit   10
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
Project Management

Basecamp
To-do List Templates & Projects


•   Installation

•   Configuration

•   Go live

•   Everything in between




                                  Designer-Friendly EE   Engine Summit   12
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
Project-specific Development

Dev Docs




                              Designer-Friendly EE   Engine Summit   14
Project-specific Development

Dev Docs




                              Designer-Friendly EE   Engine Summit   15
☺

    Projects
       ☺

ExpressionEngine


           Designer-Friendly EE   Engine Summit 16
                                       http://flic.kr/p/88pYrq
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
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
Recommended Settings

Security
mijingo.com/products/ebooklets/securing-expressionengine-2/




                                                   Designer-Friendly EE   Engine Summit   19
Recommended Settings

Security
mijingo.com/products/ebooklets/securing-expressionengine-2/




                                                   Designer-Friendly EE   Engine Summit   20
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
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
Add-Ons


      Designer-Friendly EE   Engine Summit 23
                                   http://flic.kr/p/chdd4
Text Editors
• v2.5 Rich Text Editor*
  vimeo.com/37280018


• Wygwam
  devot-ee.com/add-ons/wygwam




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




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




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




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




                             Designer-Friendly EE   Engine Summit   28
Matrix & Playa & Wygwam




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




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




                                     Designer-Friendly EE   Engine Summit   31
Low Variables




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




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


• Structure
  buildwithstructure.com




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




                                       Designer-Friendly EE   Engine Summit   35
User Experience


          Designer-Friendly EE   Engine Summit36
                                    http://flic.kr/p/4NWv4G
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
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
Better Publish Forms

Publish Layouts
            eeinsider.com/blog/help-troubleshoot-publish-layouts/




                                                Designer-Friendly EE   Engine Summit   39
Better Publish Forms

Title & Title URL Labels
devot-ee.com/add-ons/mx-title-control




                                        Designer-Friendly EE   Engine Summit   40
Better Publish Forms

Title & Title URL Labels
devot-ee.com/add-ons/mx-title-control




                                        Designer-Friendly EE   Engine Summit   41
Better Control Panel

Main Menu Buttons




                       Designer-Friendly EE   Engine Summit   42
Better Control Panel

Access




                       Designer-Friendly EE   Engine Summit   43
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
?
How Far Do You Go


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


                                    Designer-Friendly EE   Engine Summit   46
• 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
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
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
Questions?
emily@emilylewisdesign.com @emilylewis




                                Designer-Friendly EE   Engine Summit   50
☺
thanks


         Designer-Friendly EE   Engine Summit   51

Designer-Friendly EE