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 • …?
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
Technical Elements of Design• Content and Content Types• Page Templates• CSS Grid Systems• Stylesheets• Web Fonts
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
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.
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/
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)
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
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/
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