Style Guide & Specifications

Transcription

1 Style Guide & Specifications

2 Introduction This style guide has been developed to assist you in the production and maintenance of the new MultiChannel Merchant website and newsletters. The recommendations in this guide will help create an enjoyable user experience by establishing a consistent visual design and page structure across the site. Adherence to these guidelines will not only ensure proper implementation of the various interactive features and navigation schemes, but also provide for a consistent page design and an overall visual interface as the site is updated and evolves in the future. Penton Media 2008 Page 2

3 Website Penton Media 2008 Page 3

4 Main Site Guidelines Navigation One-Stop Navigation: Lucida Grande, 11px, #FFF, bold, all caps Background Image: bg_topnav.gif Rollover / Selected state has a background color of # Section Headers Headers: Lucida Grande, 12px, #FFF, all caps Background Color #00508E Main Text / Teasers / Descriptions / Articles Text: Arial, 12px, #222 Only on MCM Top Images: Links - Arial, 12px, bold, #4B739C Image associated with story should be 89 x 89 Other Images: Links - Arial, 12px, bold, #4B739C Image associated with story should be 51 x 51 Media Module Highlight Video: Image associated with story should be 128 x 96 Other Links: Leadin Small selected - Arial, 12px, bold, #4B739C Maximum of 4 other stories House Advertisement Dimensions: Image should be 300 x 100 Site Palette #00508E #AD201D Penton Media 2008 # #EEEEEE Page 4

5 Homepage Content Guidelines This Just In Top Story: Headline - Georgia, 26 px, #4B739C, NEVER BOLDED Should be accompanied by a max of 3 lines of a teaser Image associated with story should be 288 x 262 (If that image size cannot be created, images should be at least the same width) Other Leadin small should be selected for article links (Arial, 12px, bold, #4B739C) Maximum of 4 related / other article links Links to articles should not have teasers Editor s Picks Categories associated with articles should always be present and NEVER BOLDED Categories are Arial, 11px, #999, all caps Headline Font - Georgia 20px, #4B739C, NEVER BOLDED Should be accompanied by a max of 3 lines of a teaser From the Magazine Featured Story: Headline Font - Georgia 20px, #4B739C, NEVER BOLDED Should be accompanied by a max of 3 lines of a teaser Byline should always be selected and included Cover image associated with issue should be 102 x 127 Other Headline Font - Georgia 20px, #4B739C, NEVER BOLDED Should be accompanied by a max of 3 lines of a teaser Byline should always be selected and included Maximum of 3 related / other article links Links to articles should not have teasers Story Headlines Leadin large should be selected for article style (Georgia, 16px, #4B739C) Byline should always be selected and included Articles should not have teasers Links are NEVER BOLDED Penton Media 2008 Page 5

6 Poll Guidelines Daily Special Poll Category: Headline - Georgia, 26 px, #333, NEVER BOLDED Image associated with story should be 117 x 170 Poll Question: Arial, 12px, #333 Question should be kept short; Agree/Disagree questions are best, however, if you want to use multiple choice, there should not be more than two or three options. (If the poll questions are too long, it will break the layout of the entire site) Penton Media 2008 Page 6

7 One-Stop/Category Archive Content Guidelines Latest News Top Story: Headline - Georgia, 20 px, #4B739C, NEVER BOLDED Should be accompanied by a max of 6 lines of a teaser Byline should be selected and always included Image associated with story should be 288 x 262 Other Articles Top Story: Leadin large - Georgia, 16px, #4B739C, NEVER BOLDED Should be accompanied by a max of 3 lines of a teaser Byline should always be selected and included Most Popular Articles / Editor s Picks Headlines - Georgia, 16px, #4B739C, NEVER BOLDED Links to articles should not have teasers Penton Media 2008 Page 7

8 Article Content Guidelines Article Main Story: Headline - Georgia, 30 px, #333, NEVER BOLDED Byline should be selected and always included Image associated with story should be 288 x 262 Default text - Arial, 12px, #222 Most Popular Articles Leadin small should be selected for article links (Arial, 12px, bold, #4B739C) Links to articles should not have teasers Related Articled / Editor s Picks Leadin large should be selected for article links (Georgia, 16px, #4B739C) Links to articles should not have teasers Penton Media 2008 Page 8

9 Newsletters Penton Media 2008 Page 9

10 imerchant Guidelines Table of Contents Article Links: Lucida Grande, 12px, bold, #4B739C Advertiser Index: Lucida Grande, 13px, bold, #FFF Articles Headlines - Georgia, 24px, #4B739C, NEVER BOLDED Article teasers should not be more than 3 lines Teasers - Lucida Grande, 13px, #999 Image associated with stories should be 112 x 119 Read More Links are #A70101 (matches the background of newsletter title) Advertisements Ad Text: Links - Lucida Grande, 13px, bold, #4B739C Teasers - Lucida Grande, 13px, #333, NEVER BOLDED Background block #EEEEEE Paid Content (Webinars / White Papers / Buyer s Guide) Headers: Lucida Grande, 14px, bold, #333, All Caps Links: Georgia, 15px, #4B739C, NEVER BOLDED Penton Media 2008 Page 10

11 List & Data Stategies Guidelines Table of Contents Article Links: Lucida Grande, 12px, bold, #4B739C Advertiser Index: Lucida Grande, 13px, bold, #FFF Articles Headlines - Georgia, 24px, #4B739C, NEVER BOLDED Article teasers should not be more than 3 lines Teasers - Lucida Grande, 13px, #999 Image associated with stories should be 112 x 119 Read More Links are #D7AD02 (matches the background of newsletter title) Advertisements Ad Text: Links - Lucida Grande, 13px, bold, #4B739C Teasers - Lucida Grande, 13px, #333, NEVER BOLDED Background block #EEEEEE Paid Content (Webinars / White Papers / Buyer s Guide) Headers: Lucida Grande, 14px, bold, #333, All Caps Links: Georgia, 15px, #4B739C, NEVER BOLDED Penton Media 2008 Page 11

12 O+F Advisor Guidelines Table of Contents Article Links: Lucida Grande, 12px, bold, #4B739C Advertiser Index: Lucida Grande, 13px, bold, #FFF Articles Headlines - Georgia, 24px, #4B739C, NEVER BOLDED Article teasers should not be more than 3 lines Teasers - Lucida Grande, 13px, #999 Image associated with stories should be 112 x 119 Read More Links are # (matches the background of newsletter title) Advertisements Ad Text: Links - Lucida Grande, 13px, bold, #4B739C Teasers - Lucida Grande, 13px, #333, NEVER BOLDED Background block #EEEEEE Paid Content (Webinars / White Papers / Buyer s Guide) Headers: Lucida Grande, 14px, bold, #333, All Caps Links: Georgia, 15px, #4B739C, NEVER BOLDED Penton Media 2008 Page 12

13 MCM Weekly Guidelines Table of Contents Article Links: Lucida Grande, 12px, bold, #4B739C Advertiser Index: Lucida Grande, 13px, bold, #FFF Articles Headlines - Georgia, 24px, #4B739C, NEVER BOLDED Article teasers should not be more than 3 lines Teasers - Lucida Grande, 13px, #999 Image associated with stories should be 112 x 119 Read More Links are #EB951E (matches the background of newsletter title) Advertisements Ad Text: Links - Lucida Grande, 13px, bold, #4B739C Teasers - Lucida Grande, 13px, #333, NEVER BOLDED Background block #EEEEEE Paid Content (Webinars / White Papers / Buyer s Guide) Headers: Lucida Grande, 14px, bold, #333, All Caps Links: Georgia, 15px, #4B739C, NEVER BOLDED Penton Media 2008 Page 13