L00 Big Top Banner
DefinitionBig Top banners draw attention to primary content such as core site sections (gateways), featured articles, major promotions and SMI initiatives. They provide an opportunity to convey the Sun brand in a loud and clear voice and are used sparingly on a defined - finite - set of pages. UsageBig Tops always appear at the top of a page, directly below the page title or directly below the breadcrumb if it's a gateway or feature story page. As stated above, Big Top Banners are used sparingly and on a defined set of pages. To ensure consistent style, all Big Top banner production for sun.com must be overseen by Corp. Emarketing, Brand Design, .Sun Visual Design teams. Request a Big Top banner for promotional content by using the banner service request: http://webmaker.eng.sun.com/wrc/publish/services/banners/request.cgi For non-promotional Big Tops, please contact bigtop-requests@sun.com. Do not create or reuse Big Top graphics without permission. To ensure consistent style, production of Big Tops with promotional content is overseen by the corporate eMarketing team. Additionally, the corporate eMarketing team manages campaign strategy, placements and tracking of all promotional banners on sun.com. The corporate team works with the various product, program and event teams to shape content and determine placements and frequency for banners. Non-promotional Big Tops used for IA or with editorially-oriented content are managed directly by the Brand Design team and .Sun Visual Design team. Contact bigtops@sun.com for more information. Examples:
EditorialL0 graphics often link to a Feature/Promo landing page and use a brand image and wording. Style differs, depending on whether content is editorial or promotional. Feature Big Top -- Headline is in the feature story style, which is a regular sentence with punctuation. Feature big tops can support multi-sentence headlines to express Sun Brand. Deck can be up to 3 lines long. Example headline: Gain an unfair advantage. Promo Big Top -- Headlines for promotions should be short: 2-5 words. They use the headline style, which is initial capitalization for all words, per Chicago Manual. Decks can be up to 3 lines long. Example headline: Enterprise-Class 64-Bit Computing GraphicsBig Top Banner imagery must comform to standards for brand photography [https://brand.sun.com/secure/idsystem/photography.html] or product photography. Sun.com country websites should use the following resources when creating or adapting Big Top Banners: Master html code - see below. Master templates for photographic element - see Graphic Library repository. Source files for existing banners (including html and image (psd) files) - see Banner repository To assure proper style, ALWAYS start production using a master template file or a source file for existing sun.com banner. These files contain brand compliant design and typography specs - i.e. format, style, color, size, spacing and position. Do not make material changes to the design and type style represented in the master templates. Do not use animation unless reviewed and approved by banners@sun.com. If you have questions about format or style, please contact webdesign@sun.com. Do not use animation unless reviewed and approved by bigtop-requests@sun.com. If you have questions about format or style, please contact webdesign@sun.com. Note: Big Tops that appear on gateway pages have the page title "embedded" in the graphic file. Big Tops are always 780 px wide. The standard height is 165px. Occasionally we use 225px height if content or page template requires, e.g. 225px is the height for the big top on a product page overview. 
Links and buttons should be in Arial Bold (to match the HTML button style used everywhere else on the site.) 
Rotating banners should use 3-4 banners. Each banner may be one large link, or you may use an image map as shown in the second banner in this example. Each DIV surrounding every banner should have an ID of l0Banner1, l0Banner2, etc. The "l0Banner1" DIV should have a class set to "xfadefirst". All other banners should have a class of "xfade". In the "l0Banner1" DIV you can see another class, "pause6". This refers to the six second pause between each banner. This value may be altered to fit the content of the banners. To change, use values such as "pause4" or "pause10", etc.  
 This banner uses HTML to overlay the banner image, allowing easier updates to price, buttons and secondary calls to action. Each of those three features are optional, however at least a price or button is required for all banners. Only one secondary call to action ("l0extralink") is allowed for any banner. The text of the "l0extralink" link should not wrap to two lines. 
This banner uses HTML to overlay the banner image, allowing easier updates to price, buttons and secondary calls to action. Each of those three features are optional, however at least a price or button is required for all banners. Only one secondary call to action ("l0extralink") is allowed for any banner. The text of the "l0extralink" link should not wrap to two lines.
This example shows the list of links with icons instead of chevrons. If only one link exist and it needs to have an alternate icon this variation may be used with only one link.
|
 |