Designer Friendly EE, Emily Lewis

Designer Friendly EE, Emily Lewis Picture

One of ExpressionEngine’s greatest strengths is that it gives designers and front-end developers the ability to deliver a robust site without knowing a lick of backend programming. EE’s platform, though, is only part of the picture. The key to efficient development and happy clients is *how *you put it all together. Emily Lewis discusses simple, “designer friendly” techniques for creating a great user experience in the control panel with native functionality, as well as with add-ons. Lewis also provides tips to help make your EE development faster and more efficient.

Designer Friendly EE
Emily Lewis
Engine Summit 2012
#enginesummit

Plan of Attack

Leevi Graham - Documentation of channels, custom fields, categories.

  • Done prior to installation

Documentation
Process - Document all of the steps for installation, configuration, go-live. Uses basecmp to-do lists (templates) to document every step of development.

EE - Dev

  • http://eeinsider.com/articles/the-dreaded-documentation/
  • Install Dev Docs - Erik Reagan, textile
  • Especially helpful if you have to hand off the site to another developer.

Installation / Upgrade

Security

  • Rename system directory
  • Move above web root
  • Rename admin.php
  • Create an EE Security list in Basecamp.
  • http://mijingo.com/products/ebooklets/securing-expressionengine-2/

Templates & Groups

  • Chunking - Train-ee.com - Header, footer, sidebar
  • Limit embeds, try out snippets and global variables.
  • http://loweblog.com/downloads/ee-parse-order.pdf
  • Need to have a bit understanding of parse order.

Smart conditionals - complex conditionals degrade performance.
http://devot-ee.com/add-ons/ifelse

Organization and naming conventions
Important for site structure.

Add-ons

Outdated Add-ons can create an upgrade nightmare.

Text Editors

  • v2.5 Rich Text Editor
  • Wygwam

Matrix

  • Great for image uploads.

Relationships

  • Playa
  • Playa, Matrix and Wygwam all work together.

Low Variables

  • More powerful than snippets and global variables.
  • Nice labels and instructions
  • Can be grouped for a single view (ie. Contact includes address, phone, email, etc).
  • Low Variables for testimonials with a matrix field

Single Entry

  • http://devot-ee.com/add-ons/single-entry
  • Makes a channel with one record in it.

Navigation

  • Depends on whether client wants to control navigation. If not, EE is fine.
  • NavEE
  • Structure - tree view makes it easy to manage.

Devot:ee Monitor

  • Looks at add-ons and tells you the status.
  • Not for production sites.

User Experience

  • The cherry on top of developing with EE.
  • Have to focus on how the client is interacting with the CMS.
  • Instructions - Create good field labels which can include HTML. style=“color:red;”
  • Instructions on steroids: NSM Publish Hints
  • Are you using the correct field type?
  • Matrix Field for addresses?
  • VZ Address for address? Will output microformated markup.
  • Aim for the lowest common denominator. Make it easy for everybody.

Publish Layouts

  • Last part of the job.
  • Allows you to control what the user sees on the publish tab based on member groups.
  • Simplify it for the user.
  • Zoo Flexible Admin recommended by John Morton in chat for use with Publish Layouts.

Title & Title URL Labels

  • MX Title Control
  • Changes the titles and the URL titles in the publish page.

Main Menu Buttons

  • Set up member groups to simplify.

You have to know your project to plan out your project.

Slides

Designer Friendly-EE: http://www.slideshare.net/emilylewis/designerfriendly-ee

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins