SMC WEB CONTENT MANAGEMENT GUIDE BLOOMREACH

m/f

SMC WEB CONTENT MANAGEMENT GUIDE BLOOMREACH

European Marketing Centre

v.1 – August 2018

2

Index

1. Naming and organizing content ........................................................................................ 3

1.1. Documents ................................................................................................................... 3

1.1.1. Document names ................................................................................................ 4

1.1.2. What document types are used by each component .................................... 5

1.1.3. Organizing documents ....................................................................................... 6

1.2. Images names and organization .............................................................................. 7

1.2.1. Products images ................................................................................................. 8

1.3. Assets names and organization ............................................................................... 8

1.4. Resource bundles ........................................................ ¡Error! Marcador no definido.

2. Uploading and using images ............................................................................................ 9

2.1. Image variants in BloomReach ................................................................................ 9

2.2. What variants are used in each case (component + viewport) ......................... 10

2.2.1. Recommended image sizes ............................................................................ 12

2.2.2. Using images in Rich Text .............................................................................. 13

2.3. Recommendations producing images ................................................................... 14

2.3.1. Images for hero banner / carousel ...................................................................... 14

2.3.2. Images for wide overlapped banner ................................................................... 16

2.3.3. Images for wide banner (parallax effect) ............................................................ 16

2.3.4. Images for blue box banner ................................................................................ 16

2.3.5. Images for navigation component ...................................................................... 17

2.3.6. Producing product images .................................................................................. 18

2.4. Images processing (Brand Identity Manual) ......................................................... 20

3

1. Naming and organizing content

In this section we will explain EMC procedure for naming content and how we recommend to store it inside the CMS.

1.1. Documents

Documents are each piece of content that we can add/use in a BloomReach page. There are different TYPES OF DOCUMENTS defined in BloomReach, either standard or specifically configured for SMC solution:

Document type Identifier Comments Advanced Rule - Not in use Article art_ Banner ban_ bannerset Not in use CallToAction cta_ CE Certificate Used in DoCs pages defaultset Not in use Event Used in events area Form for_ Installations&Maintenance Manual Used in IMMs pages Manual Not in use MultipleLinks ml_ Navigation News Item Used in news area Operation Manual Used in OM pages Product Resource Bundle Not in use Rich Text rt_ Rule Not in use Simple Document Not in use Title tit_ Value list Not in use Video vid_ XML Rule Not in use

This list can be extended / modified in the future. Each of these documents have different fields (simple strings of characters, HTML expressions, dates, images, links, etc.) that are fed in a relatively intuitive way. You can refer to SMC BloomReach user manual to learn more about how to feed them. We are not taking about images or files. Those are named ASSETS and we will explain more in detail about these other types of content later in this same guide.

4

1.1.1. Document names

In order to facilitate content identification and search, we suggest to start the name of the document by the identifier corresponding to its document type (watch table above).

In addition, we suggest to follow these simple principles when naming a document:

• Use descriptive names • Use English. Only in very specific folders the name of the document is relevant

for the front page (e.g. News). • Avoid using spaces. Use low dash ( _ ) instead. • Avoid strange symbols (~, $, &, /, \, ?, etc.) or not ISO characters (â, ł, ş, etc.) • Name the document with the same URL that identifies it. • Avoid using numbers identifying the order of content in one page. Take into

account that the order might vary or that you might use the same content in a different place where the order number makes no sense.

These are just recommendations based on how EMC is naming the content we produce. You can follow similar rules or skip one of these recommendations if the occasion deserves it.

Some examples we have defined when working in the first pages of our web:

5

1.1.2. What document types are used by each component

As commented, each COMPONENT we can add into a webpage takes advantage of a different DOCUMENT TYPE:

This list and the settings of each component might vary in the future.

Article

Banner

CallToAction

Banner

special

Form

Event

special

special

not in use

not in use

MultipleLinks

Navigation

News

Product

Rich Text

special

special

not in use

special

Title

Video

6

1.1.3. Organizing documents

The subfolder structure inside each of your local folders is free. Now, from EMC we suggest that you follow these principles, specially for those countries that are getting duplicated content from “SMC Global” content folder.

Basic principles

- Use capital letters at the beginning of each word: Title case methodology - Separate words by spaces (in contraposition to document names with low

dashes) - Follow menu structure, except for very specific content (e.g. videos) - Simplify the number of subfolders - Define top level folders for specific content (manuals, videos, home page

articles, etc.) - Avoid strange symbols (~, $, &, /, \, ?, etc.) or not ISO characters (â, ł, ş, etc.) - Name the document with the same URL that identifies it. - Use English, except for those rare folders where name is used in the web. - Order folders:

o Corporate folders first o Then local ones o Finally the ones for tests and drafts (identify these ones somehow)

See example from “SMC Global”:

You can rename folders at will and you can also reorder them.

7

1.2. Images names and organization

The subfolder structure inside each of your local folders is free.

Few recommendations in relation to images and subfolders names:

- Use low case letters (it helps difference these folders from those of documents) - Use spaces between words in folders - Use low dashes between words in image names - Use descriptive names (names and alternate texts can be searched) - Avoid strange symbols (~, $, &, /, \, ?, etc.) or not ISO characters (â, ł, ş, etc.) - Name folders and images with the same URL that identifies it.

We strongly recommend that you use the images in SMC Global folders. You can also add images into those folders. Please, contact EMC content team for confirmation / validation.

A few examples from SMC Global:

- automotive.jpg - quote_automotive.jpg - tab_body_shop.jpg - tab_final_assembly.jpg - tab_power_train.jpg - tab_press_shop.jpg

8

1.2.1. Products images

In SMC Global we have created a specific folder for PRODUCT IMAGES. Path is exactly that "SMC Global > product images".

It already contains more than 100 images by now, thoroughly treated and validated. Take full advantage of them!

1.3. Assets names and organization

Similar to images, the subfolder structure inside each of your local folders is free.

Few recommendations in relation to files and subfolders names:

- Use low case letters and low dashes for documents - Use sentence case (only the first capital letter) and spaces for folders - Use descriptive names when possible (names and alternate texts can be

searched) or keep the document original name (e.g. files copied from SMC-JP). - Avoid strange symbols (~, $, &, /, \, ?, etc.) or not ISO characters (â, ł, ş, etc.) - Name folders and images with the same URL that identifies it

EMC will add in SMC Global all the files (.PDF, .ZIP, .DXF, .XLS, etc.) we normally produce and work with, in ALL AVAILABLE LANGUAGES. We strongly recommend that you use those files in SMC Global folders. You can also add files into those folders. Please, contact EMC content team for confirmation / validation.

9

2. Uploading and using images

BloomReach provides some features to take advantage of good quality images in our website. In this section, we will explain EMC experience producing images and using them in different pages of the website.

2.1. Image variants in BloomReach

When you upload an image into BloomReach, the CMS creates the following variants of that image:

This SET OF IMAGES has been customized for SMC solution. It could be modified and other sets of images created in the future.

These variants of each image are automatically generated and will be the ones presented by the CMS depending on the case (component used in the webpage and viewport in user’s device). We will explain more about this in the next section of this guide.

Thumbnail: Width: 60 pixels Height: 40 pixels

ORIGINAL: (dimensions of the image you have uploaded)

small: Width: 150 pixels Height: 200 pixels

medium: Width: 400 pixels Height: 256 pixels

Height:40pixels

large: Width: 800 pixels Height: 532 pixels

Inline: Width: 1200 pixels Height: 800 pixels

Extralarge: Width: 2800 pixels Height: 1867 pixels

10

Now, as an editor, you have 2 ways of editing each of the variants:

a) You can “Crop Image” any of the variants, using CMS simple editor. This allows you select the piece of the image you want to show in that variant.

b) You can upload a different image into any of the variants.

You can restore (undo) these adjustments whenever you want. This will return the variant to the image automatically produced by the CMS based in ORIGINAL image.

2.2. What variants are used in each case (component + viewport)

Very rarely, the ORIGINAL uploaded image is the one that the web user sees when visiting our website. The different variants of each images are shown in different components. The most relevant cases on our website are the following:

In banner component:

Inline Banner Template


11

Blue Box Banner Template

Wide Banner Template

Wide Overlapped Banner Template




12

In Navigation Component:

2.2.1. Recommended image sizes

Taking the above conditions into consideration we recommend to upload to the CMS images of the following sizes depending on the most common case you plan to use it:

Carousel / Hero Banner * 2800 x 1867 Pixels (extralarge variant)

Wide banner (Parallax) 2800 x 1867 Pixels (extralarge variant)

Wide Overlapped banner 2800 x 1867 Pixels (extralarge variant)

Inline banner 1200 x 800 (like extralarge variant)

Blue Box banner 1200 x 800 (like extralarge variant)

Navigation Component 800 x 532 (like large variant)

The principle is that we upload an image one level bigger than the use it will have, so that we are ready for a possible evolution of needs (e.g. bigger viewports).

*The banner for the mobile version uses LARGE variant. As commented, we can use the one automatically generated by BloomReach, crop a different view or upload a different image into this variant to ensure appropriate display.

Medium: Width: 400 pixels Height: 265 pixels

13

2.2.2. Using images in Rich Text

In Rich Text component, the use of image is more flexible.

When we insert the image, we can choose:

- the image variant (size) that we want to use

- how we want to align it with the other content in the Rich Text

You can even adjust the integration of the image in different ways:

- moving and resizing the image presentation (drag & drop) - editing the HTML code of the Rich Text

14

2.3. Recommendations producing images

The configuration of SMC website imposes some constrains / rules to ensure uploaded images work fine. These are a few of the findings by EMC so far:

2.3.1. Images for hero banner / carousel

Hero banners uses EXTRALARGE image variant (2800 x 1867 pixels) for most of the viewports (desktop and tablet). Now, it does not show the whole image:

- The integration of the hero banner with the web top menu hides the top part of the image: initial 400 pixels are hidden and another 50 pixels are slightly veiled.

- The banner shows up to 1200 pixels high.

Taking this into account, there are 3 relevant things to consider:

a) although we suggest to upload recommended size images (2800 x 1867 pixels), you could upload shorter ones (2800 x 1250 pixels).

b) Text and CTA takes the right half. Put relevant things to the left (e.g. product). c) you might need to play a trick and add a “white” section on top of your image to

ensure the relevant content ins shown in the website (e.g. Life Science image)

When we uploaded the first image we produced, the eyes of the girl were hidden:

15

In order to get the desired frame into the banner, we had to add some white lines on top of the image:

For mobile version of the web, hero banner uses LARGE variant of the image. When producing this image, take this into account:

- Title and call to action button goes below the image (e.g. you have to center products into the image)

- Device and viewport is quite smaller (e.g. any text or symbol needs to be enlarged)

16

2.3.2. Images for wide overlapped banner

Wide Overlapped Banner Template uses EXTRALARGE image variant (2800 x 1867 pixels). However, displayed height depends on the length of the text. Thus, you need to play with the image and text (e.g. including extra line breaks) to get the desired display.

The height of the image will be based on the number of lines:

There is a minimum height that displays the initial 350 pixels of the image:

2.3.3. Images for wide banner (parallax effect)

[We will complete this section in a future update of this document.]

2.3.4. Images for blue box banner

Blue Box uses INLINE variant (1200 x 800 pixels). 2 things to take into account:

a) The system resizes the image to the assigned space (e.g. 350 x 233 pixels in 1 column) b) The system takes advantage of image full height. You can play with that to get taller or

lower quotes. Now, in search of coherence we suggest that you keep recommended 4x3 proportion most of the time.

17

2.3.5. Images for navigation component

Navigation component uses MEDIUM variant (400 x 265 pixels).

This component is a bit tricky, because it displays different size images depending on the case (device, viewport, number of columns in the page, number of elements by column, etc.). In order to ensure the appropriate part of the image is correctly displayed in most of cases, we have collected a short list of recommendations:

As we have mentioned before, we suggest uploading, at least, LARGE size images (800 x 532 pixels) when working with this type of content / component. All dimensions in the following examples and recommendations are referred to images of this size: 800 x 532 pixels.

When we put 4 navigation components, CMS hides 100 pixels on each side of the image (watch the following example). Thus, ensure the relevant elements of the image are centered and out of those 100 pixels in the borders.

If we put only 3 elements, we can display practically all the width of the image.

Also the height is not fully displayed in some occasions. We recommend “leaving some air” up and down the image.

18

2.3.6. Producing product images

For product images and specially for those we use in navigation component, we produce LARGE size images (although we then use the MEDIUM size variant).

In order to present the product properly, take into account the following points:

a) Put product on white background (watch BIM for more details) b) Put a shadow below the product (watch BIM for more details) c) Check BIM also for:

a. Product orientation b. Number of products in an image c. Treatment of the image colors, brightness, etc.

d) Place product on an imaginary line 50 pixels away from the image base e) Center the product and try to leave 100 white pixels on each side

In addition, we suggest to fill different spaces in the image to represent the different scales of SMC products. Our product range is very wide and with very different sizes, it is difficult to establish a faithful scale. The area of the image is 700 pixels wide and we should take advantage of it and not put too small images, we will keep a minimum size.

Lateral margins (this area will not be seen in some occasions)

Baseline, line where we support the product

Guide lines try to indicate the product size scale

19

Model 1, it is taking advantage of all available space to present SMC biggest products:

Model 2, to be used with most of the standard products of SMC:

Model 3, to be used for the smallest products in our portfolio:

These guidelines are only general recommendations. In particular, scales effect might be difficult to achieve. Sometimes images require certain size adjustments to ensure the appropriate layout of the whole webpage.

1

2

3

15 pixels

54 pixels

93 pixels

20

2.4. Images processing (Brand Identity Manual)

As commented in some of the sections above, all images in the website should be processed following the Brand Identity Manual. Please, refer to BIM for explanations and example procedures. Here are just a few examples of the images EMC has treated:

For general communications

SMC WEB CONTENT MANAGEMENT GUIDE BLOOMREACH

Documents

Transcript of SMC WEB CONTENT MANAGEMENT GUIDE BLOOMREACH