3. What is a CMS?
• Database-driven framework for creating dynamic websites
• Allows clients to edit their own content
• Saves time on site edits and updates post-launch
• Many options available:
• Wordpress
• Drupal
• Expression Engine
• Joomla
• …?
4. Which CMS to choose?
• Wordpress
• Good for basic promotional sites and blogs; can be expanded with
custom code
• Drupal
• More flexible & secure than Wordpress, but more complex to get up
and running
• Good for sites that require distinct “sections” of content that have
different display requirements
• Expression Engine
• More flexible than both Wordpress and Drupal, but requires
extensive customization
• Not open source; requires a license fee
16. Technical Elements of Design
• Content and Content Types
• Page Templates
• CSS Grid Systems
• Stylesheets
• Web Fonts
17. Know your content types
• Start with a few examples of real content:
• Blog posts
• Projects
• Image Galleries
• News Items
• Events
• Each will have its own needs for formatting and display
18. Working with page templates
• Average CMS will have 1-3 page templates MAX
• Code in template pulls content from database to create
HTML pages
• Goal: 1 page template that outputs clean, semantic code
• Let CMS handle element positioning
• Let stylesheets handle text formats, background images,
etc.
19. Why use a grid?
• Simplify major layout decisions to focus on details
• Prevents accidental misalignment of page elements
• Faster coding and iteration
• Some grid systems are set up for responsive design
patterns:
• http://cssgrid.net/
• http://unsemantic.com/
• http://goldengridsystem.com/
20. Working with Stylesheets
• Separate content from presentation
• Can add effects like borders, drop shadow, transparency
and round corners with CSS3
• Think global (body type, lists, callouts) to local (page-
specific elements)
21. Web fonts!
• No need to stick with Helvetica and Georgia
• Focus on readability for body copy; add visual interest in
branding, site header, etc.
• May require special code in page templates or CSS
• Resources:
• Typekit.com
• Google Fonts
• FontSquirrel
• League of Movable Type
22. Additional Resources
• A List Apart, Strategic Content Management:
http://www.alistapart.com/articles/strategic-content-
management/
• CMS Myth, Responsive Design and Content Management
Systems:
http://www.cmsmyth.com/2012/03/content-on-all-the-
things-responsive-design-and-content-management-
systems/
• Smashing Magazine, Designing for Content Management
Systems:
http://coding.smashingmagazine.com/2010/11/22/
designing-for-content-management-systems/
23. Additional Resources
• FontSquirrel.com – free web fonts with @font-face-kit
downloads
• Typekit.com – fonts hosted by Typekit (less code)
• Google Fonts
• LeagueofMovableType.com – free and beautiful fonts
• 0to255.com – find hex value of multiple colors
• Kuler.adobe.com – find color palette inspiration by
keyword or color
• Lorempixel.com – generate placeholder images for design
comps and layouts