Document Table of Contents
In this article you find tips and guidelines to follow when you write on article for one of the KCI brands and websites.
By following these guidelines we keep the KCI brand and KCI branded websites consistent. Also, when using standards we keep our site(s) professional and provide the end-user/visitor a smooth browsing experience.
Photos and Images #
- When you upload an image or photo always use an ALT tag.
- If possible add an Caption to the image. The caption will appear below the image in a smaller italic font.
- Always use a describing filename for an image or photo so don’t use ”201903.jpg” but use ”Stainless Steel World Magazine Cover Story 2019 March” instead. This is better for publishers to find photos and images in the Media Library but also for a better ranking in Google (SEO).
- Only upload an image or photo to a media library with the correct size (height and width). This reduces the filesize and ensures that the page is loaded faster for visitors. Try to keep the filesize for small images around 75 kb, for medium sized images 150 kb and really large images 400 kb.
- For a large image use 1200 pixels width, for a slider image use 1920 pixels width, for an image inside content (full content width) use a width of 800 pixels, for a smaller image inside the text use 250 pixels
- Before uploading an image, compress the image via https://tinyPNG.com. This is a free service and reduces the file size with 10 to 40%. In 99,9% of the cases you will not see a difference in quality. Once you upload the image it will be compressed in the background again. You can alos use other tools to optimize images and photos.
- Try to use the most efficient file type: currently webp (find more information on webp look here https://en.wikipedia.org/wiki/WebP)
- As alternative for webp you may use .jpg, .png or .gif files.
- Avoid animated gifs, emoticons and other animations. In most cases it does not offer any value and after 1 or 2 times, visitors may become annoyed.
- Try to outline images to the left with the text floating around. Images and photos outlined to the right may cause issues on mobile devices. If possible keep the same size for inline images and photos. A good with of these images is 250 pixels.
- Larger images that cover the full width of the content area may be outlined centrally. If the image is centrally outlined and has a large height (400 pixels or more), add text above the image/photo like “Story continues below the image”. People on mobiles devices know that the story continues below the photo and do not stop half way reading the article.
Headings #
- It’s a good habit to use Headings inside a text, especially when it’s a longer text of several pages (screens). It’s possible to use H1, H2, H3, H4, H5 and H6. The settings (font, fontsize, fontcolor) of these headings are controlled centrally and have therefor everywhere (and on every site) the same font-type, font-height, line-height and font-color.
- Do not use H1 inside your text. H1 is reserved and used for the Title of your page or post and is set centrally.
- So the first heading you want to use for a paragraph is the H2. If you then have sub paragrpahs inside the H2 section, you may use H3. When you start another paragraph, use H2 again. This article uses only bold H2 headings.
- Make all headings bold to make them standout and give the visitor a good reading experience. When using correctly the visitor is able to get a quick overview of the content of a post.
- See the bottom for Heading examples.
Links #
- When you add a link to an external page (another KCI website or any other site), open the link in a New Window. This means that the current window stays open so people can easily return to the KCI website.
- When you add a link to an internal page on the same site do not open a New Window.
- Make all links bold to make them more visible for the visitor and more inviting to click on.
Contact information #
- Try to make contact information a generic as possible. When someone leaves the company, all contact information must be changed. This is time consuming and we may forget references resulting in outdated content.
- Also avoid (private) telephone numbers. Instead use general KCI office access numbers, that will not change frequently.
- The CONTACT page on every site will contain general contact information.
Buttons #
- Buttons are very usefull if you want the visitor to perform an action. Sucha an action is also called a CTA or Call-To-Action. To give our site and our pages a consistent look and feel, it’s a good idea to use standard buttons. Buttons have predefined color as background with a white font. Stainless Steel website buttons have a dark blue background with a white text, Valve World buttons will have a red color with a white text. You can use the BUTTON component in the Page Builder to quickly create a great looking button.
- Important buttons for example subscription to a free magazine or newsletter may use the orange color.
- To quickly use a standard button you can also use code. Just add a Text component in the page and paste the code below. Then you only have to change the text on the button and the link where the button will point too. For example, this code creates a blue button with text.
[su_button url=”/advanced-search” style=”flat” background=”#005696″ radius=”0″ icon=”icon: search” text_shadow=”0px 0px 0px #ffffff”]TEXT ON BUTTON[/su_button]
The code for an orange button is #FF5500. - Always use text in CAPITAL on the button.
- Do not use exclamation marks on a button. A button already stands out from the rest of the content and a exclamation mark is not needed.
- If really needed, you can add an icon on a button but it must be functional. See code above with the parameter icon=”icon:search”.
Fonts #
- Fonts are set centrally on every website. All KCI branded website will use the same font which is Open Sans.
- Do not use different fonts in your content. This will not look professional and the look and feel will not be consistent. Also on mobile devices fonts may not be available out-of-the-box. Every font that is not standard and therefor not available may require a download (in the background). This will take time and visitor might experience a slow site.
- Don’t use color fonts in texts or heading. The headings are defined with a black font-color. Do not use any other color like blue, yellow, red or orange headings. This does not look professional and some colors and color combinations are not easy to read by the visually impaired.
Content #
- Try to create posts and articles with at least 300 words.
- If you have an article with two or three pages (screens), use headings to provide a smoother user experiences.
Sample Headings #
Do not use H1 in your content, H1 is reserved for the post/page title. Start with H2 in you article.
