Web Content Management Systems from a Designer’s Perspective

Saturday, March 13, 2010 9:30am
Presenters:
Scott Fegette – Adobe
Chris Charlton – XTND.US

The biggest shift in CMS since the 90’s is designers coming over in droves from the static world.

Why CMS?

• Rich Functionality
• Content Centralization
• Client Management – great way hand over the keys to someone
• Designer/Developer Communities – lots of shared code and expertise
• Open Platform

The Big Four

• WordPress – simple
• Drupal – very powerful
• Joomla – a bit more designer focused
• Expression Engine – very rich (commercial)

Decisions, Decisions

• Run-time System – all live, pages generated when called for
• Publish-time system – all the heavy lifting is done when you publish – a bit static, and maybe more robust
• Style Management
• Deployment – critical part when deciding, how difficult is it to get out there and maintain

Static Design

Static design starts to break down in a CMS, not just a design wrapper for flat pages any more.

Design States

• Navigation States – buttons/breadcrumbs/drop-down menus need to be designed around
• Presentational States – the guts of the CMS, all the pages/posts of the site.
• Logical States – session login, showing slightly different content based on roll
• Dynamic Content – not a print layout. You need to adapt to the type of content being desgned

Themeing

• Encapsulated design system
• Fast design iteration – allow you to create a design quickly, or swap through them to see how different things interact. It’s easy to mock up certain things (larger headlines) and go back and fourth to see how things react.

What’s in a theme?

• System-specific metadata
  WordPress – CSS comments
  Drupal – .info file
• Physical directory structure
• Markup/Logic/CSS assets
• External Modules (as required)

Theming Wokflow A

• Use baseline theme for markup
• Design primarily in CSS layer
• Working ‘within the box’ – pushing things in the direction they need vs. from scratch
• No control over dynamic classes

Theming Workflow B

• Start from HTML/CSS comp
• Integrate directly into PHP
• Less constraints, more risk
• Requires knowledge of system architecture

Markup Challenges

• Generated vs. On-disk markup
• Code Fragmentation
• Dynamic Styles
• Real-time previewing issues

CSS Challenges

• Inline vs. Included Styles
• Themes vs. Core
• Module CSS

Being Efficient

• Encapsulated CSS Layer
• Flexible, Straightforward Markup
• Comments & Generated Code
• Version Control (easy ti back out quickly if something gets messed up)
• Subthemes and Design Abstraction

Building Better Mousetraps

• Saving and previewing app states
• Real time DOM Access
• Dynamically-related Assets
• Framework-specific configuration
• Work more freely

The Technical Stuff…

• HTML/XHTML (markup) + CSS
• JavaScript (optional)
• Basic PHP
• Source Code Management (subversion – SVN)
• Multiple environments discipline (local, dev, staging, live)