Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime. Content Management Presentation


Published on

In 1999, this presentation was given to the Chase Manhattan internet project team which was made up of over 30 VPs.

Published in: Business
  • Thanks for the help. I also ordered from
    Are you sure you want to  Yes  No
    Your message goes here
  • If you need your papers to be written and if you are not that kind of person who likes to do researches and analyze something - you should definitely contact these guys! They are awesome ⇒⇒⇒ ⇐⇐⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • Writing good research paper is quite easy and very difficult simultaneously. It depends on the individual skill set also. You can get help from research paper writing. Check out, please ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • Find coupons for your hosting. Get a promo deal before you purchase hosting
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this Content Management Presentation

  1. 1. Template Review Meeting Presentation & Discussion presented to Chase Manhattan Bank Site Strategy & Direction Team & The Content Migration Team March 29, 1999
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><ul><li>Provide History and Context </li></ul></ul><ul><li>Templates and Design </li></ul><ul><ul><li>Content Management System </li></ul></ul><ul><ul><li>Template Objectives </li></ul></ul><ul><ul><li>Content Types </li></ul></ul><ul><li>Break </li></ul><ul><li>Template Functionality </li></ul><ul><ul><li>Gather Input and Recap </li></ul></ul><ul><li>9:00 - 9:15 am </li></ul><ul><li>9:15 - 10:15 am </li></ul><ul><li>10:15 - 10:30 am </li></ul><ul><li>10:30 - 12:00 pm </li></ul>
  3. 3. How do Templates fit in the Bigger Picture? Content reconfigured into “new” design and information architecture Existing Content Moving to New Chase.Com New Content Created for New Chase.Com Finalized “New Chase.Com” Designs Content Management System Search Metatags Functional Templates Coded
  4. 4. Templates <ul><li>Separate the content from the presentation of the content </li></ul><ul><li>Include predefined areas for text and graphics </li></ul>
  5. 5. Why Move to a Template-based Site? <ul><li>Increase speed of publishing new content </li></ul><ul><ul><ul><li>Eliminate the need to create custom code for each new piece of content </li></ul></ul></ul><ul><ul><ul><li>Enable non-technical resources to update content </li></ul></ul></ul><ul><li>Encourages consistency in: </li></ul><ul><ul><ul><li>Look and feel: users experience consistent Chase identity </li></ul></ul></ul><ul><ul><ul><li>Navigation: users have a stable structure and are less likely to get lost or be confused </li></ul></ul></ul><ul><li>Enable Chase to quickly make global changes </li></ul><ul><ul><ul><li>Save money and time for updates </li></ul></ul></ul><ul><li>Common Process throughout the Enterprise </li></ul><ul><ul><ul><li>Save money and time on training and support </li></ul></ul></ul>
  6. 6. About Content Management Systems <ul><li>Supports workflow to publish new content in a timely manner </li></ul><ul><li>Allows for version control and archiving of web-related files </li></ul><ul><li>Minimizes the possibility of overwriting files when multiple people are working on the same file </li></ul><ul><li>Dynamically publish web pages </li></ul><ul><ul><li>Assures users see the freshest content </li></ul></ul><ul><ul><li>Provides a platform for future Personalization </li></ul></ul>
  7. 7. About FutureTense: <ul><li>Developed the FutureTense Internet Publishing System (IPS) </li></ul><ul><ul><li>Provides services for high-quality, high-volume environment: </li></ul></ul><ul><ul><ul><li>for Web production staff </li></ul></ul></ul><ul><ul><ul><li>for delivery of content to end-users </li></ul></ul></ul><ul><ul><li>Enables Chase to: </li></ul></ul><ul><ul><ul><li>streamline production </li></ul></ul></ul><ul><ul><ul><li>index information to make it searchable </li></ul></ul></ul><ul><ul><ul><li>feed information into standard templates </li></ul></ul></ul><ul><ul><ul><li>support workflow processes </li></ul></ul></ul><ul><ul><ul><li>track revisions to web-related files </li></ul></ul></ul>
  8. 8. iXL & FutureTense <ul><li>iXL: </li></ul><ul><ul><li>Has translated designs for pages into templates. </li></ul></ul><ul><ul><li>Has worked closely with FutureTense to insure templates work within the IPS. </li></ul></ul><ul><ul><li>Will deliver templates and specifications to Chase and FutureTense. (Planned 4/1) </li></ul></ul><ul><li>FutureTense and Chase: </li></ul><ul><ul><li>Will integrate the templates into IPS. </li></ul></ul><ul><ul><li>Prepare the templates and system for the migration of content. (Planned 4/15) </li></ul></ul>
  9. 9. Template Specifications based on Design Guidelines <ul><li>Design Guidelines : (flexible) </li></ul><ul><ul><li>are recommendations to follow when designing a page to insure maximum usability and consistency </li></ul></ul><ul><ul><li>include “soft” guidelines such as: </li></ul></ul><ul><ul><ul><li>whenever possible, use lists instead of dropdowns </li></ul></ul></ul><ul><ul><ul><li>place emphasis of usable information, rather than sales </li></ul></ul></ul><ul><ul><ul><li>minimize usage of paragraphs on “directory pages” </li></ul></ul></ul><ul><li>Specifications: (less flexible) </li></ul><ul><ul><li>are the detailed, technical instructions needed to create a page of the design </li></ul></ul><ul><ul><li>include “hard” data such as: </li></ul></ul><ul><ul><ul><li>image size has a maximum width of 350 pixels </li></ul></ul></ul><ul><ul><ul><li>header typeface is Verdana, 18 point bold </li></ul></ul></ul>
  10. 10. Template Design Process <ul><li>1. Consider previous input and learning </li></ul><ul><li>2. Break Pages into Components </li></ul><ul><li>3. Identify Variability </li></ul><ul><ul><li>Flexibility </li></ul></ul><ul><ul><li>Standards </li></ul></ul>
  11. 11. Template Design: Page Analysis, Step 2 <ul><li>Breaking down each page into it’s component parts, including the following: </li></ul><ul><ul><ul><li>Navigation </li></ul></ul></ul><ul><ul><ul><li>Header </li></ul></ul></ul><ul><ul><ul><li>Body </li></ul></ul></ul><ul><ul><ul><ul><li>Text </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Bulleted Lists </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Images </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Links </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Linksets </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Sub-Headers </li></ul></ul></ul></ul><ul><ul><ul><li>Footer </li></ul></ul></ul>
  12. 12. Template Design: Page Analysis, Step 3 <ul><li>Identifying the trade-off between Standards & Flexibility </li></ul><ul><ul><li>Areas for Standards </li></ul></ul><ul><ul><ul><li>Presence of Chase logo and other branding elements </li></ul></ul></ul><ul><ul><ul><li>Location and functionality of Navigation (breadcrumbs) </li></ul></ul></ul><ul><ul><li>Recommended Areas for Standards </li></ul></ul><ul><ul><ul><li>Font size for header, body, and footer sections </li></ul></ul></ul><ul><ul><ul><li>Aspect ratio of photographs </li></ul></ul></ul><ul><ul><li>Areas for Flexibility </li></ul></ul><ul><ul><ul><li>Number of images </li></ul></ul></ul><ul><ul><ul><li>Length of pages/Layout in content area </li></ul></ul></ul>
  13. 13. Break 15 Minutes
  14. 14. Today
  15. 15. 6.15
  16. 16. After 6.15
  17. 17. Today
  18. 18. 6.15
  19. 19. After 6.15
  20. 20. Today
  21. 21. 6.15
  22. 22. Templates & Sub-Templates <ul><li>Templates can be made up of Sub-Templates </li></ul><ul><li>Templates and Sub-Templates: </li></ul><ul><ul><li>Define Visual Geometry </li></ul></ul><ul><ul><li>Provide code to talk to the “Back-end” </li></ul></ul><ul><li>Usage of Sub-Template provides flexibility </li></ul>
  23. 23. Global Templates: Overview Left Navigation Top Navigation Content Area Specialty Navigation Below Left Navigation
  24. 24. Global Templates: Top Navigation (TN)
  25. 25. Global Templates: Left Navigation (LN)
  26. 26. Global Templates: Specialty Navigation (SN) <ul><li>Reserved for Middle Market, Private Bank, CMS, etc. </li></ul><ul><li>Should not be used to feature functionality, products, special offers, etc. </li></ul>
  27. 27. Global Templates: Below Left Navigation (BLN) - Option 1 <ul><li>Option 1 is a linkset: </li></ul><ul><ul><li>has fixed width </li></ul></ul><ul><ul><li>has varying height </li></ul></ul>
  28. 28. Global Templates: Below Left Navigation (BLN) - Option 2 <ul><li>Option 2 is 1-3 graphics: </li></ul><ul><ul><li>have fixed width </li></ul></ul><ul><ul><li>have varying height </li></ul></ul>
  29. 29. Sub-Template G1: Overview Header Body Footer
  30. 30. Sub-Template G1: Header Options or or or or
  31. 31. Sub-Template G1: Header Option 1 <ul><li>Option 1 is a one column, one row solution. </li></ul><ul><li>This option can contain either text or a graphic. </li></ul>Chase Credit Cards or or
  32. 32. Sub-Template G1: Header Option 2 CDs & Rates Chase Liability Products CDs & Rates or or
  33. 33. Sub-Template G1: Header Option 3 Valued Card Members The Service you deserve from your Chase Gold Bell Atlantic Credit Card or or
  34. 34. Sub-Template G1: Header Option 4 <ul><li>Can contain HTML </li></ul><ul><li>End user sees normal display </li></ul><ul><li>Must know HTML to use </li></ul><ul><li>Maximum Flexibility </li></ul>
  35. 35. Sub-Template G1: Header Option 5 <ul><li>Used for pages with log-in box only </li></ul>
  36. 36. Sub-Template G1: Body Options or or
  37. 37. Sub-Template G1: Body Option 1 <ul><li>1. Choose Content , Content Component, Content Order </li></ul><ul><li>2. The system links your choices to form an Article </li></ul><ul><li>3. The Article is presented in the Template </li></ul>
  38. 38. Sub-Template G1: Body Option 1 <ul><li>1. Choose Content , Order, and Type </li></ul><ul><ul><li>Text, Bulleted Lists, Images, Links, Linksets, Sub-Headers </li></ul></ul><ul><ul><li>Choose any mix of 5 to create an Article </li></ul></ul><ul><li>A Group of Articles is a Collection </li></ul>Article A - Graphic, Text, Text, Linkset, Bulleted List % Order - 1, 2, 3, 4, 5 Article B - Graphic, Graphic, Graphic, Graphic, Graphic Article C - Sub-Header, Text, Bulleted List, (BLANK) , (BLANK) Article D - Graphic, (BLANK), Text, (BLANK), Linkset } Collection
  39. 39. Sub-Template G1: Body Option 1: 3 Column Article Example <ul><li>1. Choose Content </li></ul><ul><ul><li>Pick 5 Content Types and Content </li></ul></ul><ul><ul><li>Pick Order of the Content Types </li></ul></ul><ul><li>2. The system creates an Article </li></ul><ul><li>3. Article is published into the Body Template </li></ul>Graphic, (BLANK), Text, (BLANK), Linkset Article D
  40. 40. Sub-Template G1: Body Option 2 <ul><li>Build a collection of articles to present in a body template </li></ul><ul><li>Any Questions? </li></ul>Article A - Graphic, Text, Text, Linkset, Bulleted List Article B - Graphic, Graphic, Graphic, Graphic, Graphic Article C - Sub-Header, Text, Bulleted List, (BLANK) , (BLANK) Article D - Graphic, (BLANK), Text, (BLANK), Linkset
  41. 41. Body Example <ul><li>Homepage </li></ul><ul><ul><li>Personal </li></ul></ul><ul><ul><ul><li>Credit Card </li></ul></ul></ul><ul><ul><ul><ul><li>Bell Atlantic Gold Card </li></ul></ul></ul></ul>
  42. 42. Body Example
  43. 43. Graphic Text Graphic Link Empty Empty
  44. 44. Graphic Text Graphic Empty Empty Empty
  45. 45. Sub-Template G1: Body Option 3 <ul><li>Can contain HTML </li></ul><ul><li>End user sees normal display </li></ul><ul><li>Must know HTML to use </li></ul><ul><li>Maximum Flexibility </li></ul>
  46. 46. Sub-Template G1: Footer
  47. 47. Sub-Template G1: Footer Page Specific Content Area (LOB) Specific Content
  48. 48. Post 6.15 <ul><li>6.15 is a direct migration </li></ul><ul><li>Post 6.15 you take advantage of more features of the template </li></ul>
  49. 49. Sub-Template G2 <ul><li>H </li></ul><ul><ul><li>Same with less width </li></ul></ul><ul><ul><li>No </li></ul></ul><ul><li>B </li></ul><ul><ul><li>Same with less width </li></ul></ul><ul><ul><li>only two columns in an article (“2 in a row”) </li></ul></ul><ul><li>F </li></ul><ul><ul><li>Same with less width </li></ul></ul>
  50. 50. Sub-Template G2: Header Options or or or
  51. 51. Sub-Template G2: Body Options or or or
  52. 52. Sub-Template G2: Footer
  53. 53. Sub-Template G2: Right Side Bar
  54. 54. Sub-Template G2: Right Side Bar
  55. 55. Sub-Template G2: Right Side Bar Background Graphic with linkset HTML Bucket Graphic Header <ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul>Text Header <ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><ul><li>Link </li></ul></ul>
  56. 56. Questions
  57. 57. Next Steps <ul><li>Receive Feedback </li></ul><ul><li>Finalize Specifications </li></ul><ul><li>Deliver Template Specification and Code to Chase and FutureTense </li></ul>