Style Guide for Websites

Transcription

1 Style Guide for Websites

2 Content Content Management Systems 3 Process for Building a New Website 4 Training for Sitecore 5 Capabilities Available within Sitecore Responsive Web Design 6 Social Media Integration 7 Sitecore Architecture 9 Images 10 Global Elements for All Websites 11 Navigation Main Navigation Standard and Flyouts 12 Secondary Navigation 13 Templates Standard Templates 14 About Us 17 Contact Us 18

3 Content Management Systems A content management system (CMS) is software that allows for the publication, editing and modification of web content as well as maintenance from a central interface. AMETEK uses Sitecore as its content management system for managing websites. AMETEK will be migrating away from our legacy CMS and solely utilizing Sitecore for new websites. Sitecore CMS provides a number of key and valuable capabilities not available through our legacy CMS: responsive web design, social media integration and Amazon cloud hosting. All business units and corporate websites are required to use Sitecore for development. No other investments should be made by the business unit for deploying a new site, or updating/refreshing an existing site other than those within the Sitecore structure. Managers of current AMETEK websites should contact the Corporate Web Services Group to inquire about migrating sites to Sitecore.

4 Process for Building a New Website Notify Corporate Notify the Corporate Web Services Group that you want to start the process for migrating a website over to Sitecore. Templates Assessment Review the available templates in this document and determine which are the most suitable. Features If a feature is needed that is not included in this document, please gather all the requirements for the new feature and discuss with the Corporate Web Services Group. SEO - Take a look at competitors website to see what they are doing. Do they rank higher in the Search Engines results? Are they doing Adword campaigns? Review the SEO section of this document and discuss with Corporate Marketing to develop your SEO Strategy. Storyboard Use the templates in this document to storyboard the new site. If new templates become available, a communication will be sent out with an updated version. Work directly with the Corporate Web Services Group and Corporate Marketing Communications Manager if help is needed storyboarding a website. Graphics Determine the graphic requirements and whether or not there are inhouse capabilities within your business unit or if Corporate support is required. Development/Programming - AMETEK has partnered with Mindtree in Bangalore, India, a certified Sitecore partner. All Sitecore development work must be handled by Mindtree. We have negotiated preferred pricing with Mindtree. See Pricing Structure for websites cost. Requirements Meeting Work with the Corporate Web Services Group to setup a requirements meeting with Mindtree to discuss the requirements of your new website. Proposal After all the requirements have been established, Mindtree will submit a proposal. Once the proposal is approved Mindtree can start building the site. Training If this is your first Sitecore website you must first be trained in order to gain access to the system.

5 Training for Sitecore A list of available training from Sitecore can be found at the following location: The training is broken down into six categories. Click on the Business User tab and look for the class labelled Sitecore XP7 Advanced User. This class is for Content Editors who have no Sitecore experience and is a good place to start training. Search to see if the class is offered at a location near you. If not, you can purchase a license to the e-learning module. AMETEK has negotiated a corporate discount rate of $500 per license. This license gives access to the training material for six months. Please do not purchase the e-learning module until the storyboard is completed for your site. AMETEK Training Coordinator with Sitecore: Ola A Hassanein Sitecore Training Sales Manager ola@sitecore.net Contact Ola Hassanein directly to register for classes or to inquiry about the e- learning module.

6 Capabilities Available Within Sitecore Responsive Web Design Responsive web design is an approach in which websites are crafted to provide optimal viewing experiences legible and navigable with little resizing, panning, and scrolling across a wide range of platforms (from desktop computer displays to mobile devices). The development necessary to accommodate responsive web design is programmed into AMETEK s templates, so all websites built using our templates utilize responsive design and any future templates will also support responsive design. One of the important roles of Content Editors is to understand that the material put into a website will be scaled to fit different-sized devices. There are four responsive sizes: Computer - widest view Landscape - second widest view Portrait - third widest view Mobile - narrowest view Google has recently announced that they are penalizing sites that are not responsive web design.

7 Social Media Integration If you need to create Social Media pages, please review the Social Media Guidelines at There are two ways to add Social Media to a website. You must use the icons below to represent your Social Media links. Social Media icons may be added to the footer of each page and link to your Social Media pages.

8 You may also add Social Media icons to the following pages: About pages News pages Product pages Tradeshow page Contact Us page The social icons below are links so the customers can add content to their own social media pages directly from the site. The tweets that display on the web pages are restricted to only display tweets from an AMETEK account. A customer has the option to send a tweet from this page and that will show up on their Twitter account but not as a tweet on your web page. If you use this option on your website, you must tweet at least two to three times a week. It is not good web practice to display old tweets.

9 Sitecore Architecture AMETEK has set up the following three environments: Development this environment is hosted at the Wilmington, MA, USA Data Center Staging this environment is hosted at the Wilmington, MA, USA Data Center Production this environment is hosted at Amazon and utilizes their Content Delivery Network (CDN) Being hosted by Amazon in the cloud allows a site to have a faster load time in all the regions of the world, along with achieving better Search Engine rankings. CDN enhances this capability by having a network of servers deployed across different geographical regions that directs local traffic to the nearest server to increase a site s response time.

10 Images Before an image is uploaded for web viewing, it should be optimized for web and mobile devices in a photo editing program and resized (outlined below), then "saved for web". This process reduces the file size, compresses the image, and performs color correction. Image requirements are as follows: RGB color spectrum 72 dpi resolution JPG (quality set to 80) or PNG-24 Maximum image size 1200px width by proportional height Full Width Defaults Any image inserted into the content area automatically fills the content area width. The width depends upon the column layout. 3 Column Layout Standard image width 300 px 2 Column Layout Standard image width 900 px 1 Column Layout Standard image width 1200 px

11 Global Elements for All Websites All AMETEK websites must have the following global elements. While content can be modified to reflect the site, the look and feel of these elements can not be modified. These elements use a standard style across all AMETEK websites. 1. Utility Navigation This area is to inform the customer of the different languages offered on a site. The Search box is a standard search function that is built into all of the templates. 2. Main Navigation You are limited to 6 Contact Us must be the last navigational choice 3. Primary Footer This area is to display the Main Navigation and links to the Social Media pages. 4. Secondary Footer The Terms of Use and Privacy Policy are standard AMETEK pages. These pages must be included in the site and the content can not be changed. A Sitemap for the website can be created. The copyright must reflect the year the new website goes live.

12 Navigation Fly Out Menus for the Main Navigation 1. Drop down from main navigation black and upper and lower case. Must have the red underline for selected menu items. The triangle symbol is used for submenus. 2. Fly Outs black and upper and lower case except for brand names which can be all caps. 3. Secondary Fly Outs Contains a short headline, a couple of bullet items and a picture

13 Secondary Navigation The secondary navigation is defined as the content in the left hand side column of each web page. There are two designs for the secondary navigation Secondary Navigation Option 1 1. Header The header must be the AMETEK red which is #ED1C24 and upper and lower case. 2. Second Tier Must be black and upper and lower case. These words will be bolded to reflect the page the customer is viewing.

14 Secondary Navigation Option 2 1. Header The header must be the AMETEK red which is #ED1C24 and all caps 2. Second Tier - Expansible List These lists are represented by a black up or down arrow and all upper and lower case. 3. Third Tier Upper and lower case except for brand names. These words will be bolded to reflect the page the customer is viewing.

15 Templates Standard Template Homepage 1. Business Unit logo/ AMETEK logo This area is used to display the business unit logo and the AMETEK logo. The AMETEK logo must be at least 75% of the size of the business unit logo. 2. Flags Display flags to show the different language choices. Use the appropriate country flags within Sitecore to display different languages for your site. 3. Search function This search box is generated from the Sitecore Solr search feature. 4. Main Navigation Refer to the Global Elements section. 5. Opening Graphic Area This area is designed to display a graphic that shows customers all the products/services offered. This can be accomplished by using the Carousel feature built into Sitecore. Do not use Flash. 6. Content for the Main Header Graphic This content should only be three to four lines with a Read More button at the bottom. 7. Business Unit at a Glance Content This content contains information about the business unit. The first sentence or two should be bold. 8. Recent News Each News Article must contain a photo, headline and brief content to display on the homepage. 9. Primary Footer Refer to the Global Elements section.

16 10. Secondary Footer Refer to the Global Elements section.

17 About Us Template 1. Left Side Navigation Refer to the Global Elements Section. 2. Headers All headers must use the H1 style. (refer to the.css file) 3. Header Image All pages using this template must have a header image no larger than 600px. 4. Download icon These icons are used on the About Us page to show information the customer can download. 5. Social Media Icons Refer to the Global Elements Section.

18