OM Digital Guide
OM_Digital_Guide
OM_Digital_Guide
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 78
| Download | |
| Open PDF In Browser | View PDF |
OLD MUTUAL DIGITAL BRAND GUIDELINES FEBRUARY 2015 VERSION 2 CONTENTS 01 INTRODUCTION Overview of what to expect in this document 05 Other partnering documents 05 02 OUR BRAND Our brand promise 07 03 USER EXPERIENCE Overview 09 04 DIGITAL COMMUNICATION 06 DESIGN. OLD MUTUAL LOGO Digital communication strategy 12 Creating engaging web content 13 Copy tone 14 Videos 15 Examples of using the logo in a digital space 27 Common information 16 Our sub-brands 28 Search engine optimisation 17 Incorrect usage 29 What is accessibility 18 07 DESIGN. BRAND ELEMENTS Colours for digital application 31 Horizontal logo 24 Stacked logo 25 The difference between RGB & CMYK 33 The Old Mutual brand icon 26 Incorrect colour usage 34 Digital fonts 35 Heading styles 36 Paragraph styles 37 Underlined headings & lists styles 38 Typography signature style 39 05 ONLINE MARKETING Brand device - the line 40 Image usage 41 Banner advertising 20 The grid 42 Social media 21 Tables 43 Paid search 22 Icon styles 44 Web page examples 45 CONTENTS 08 DESIGN. FUNCTIONAL ELEMENTS Button & text link styles 47 Navigation 49 Site search 51 Links to our businesses globally 52 Forms 53 Carousel banners 54 Promotional elements 55 Information / call to action elements 56 Login facility for transactional pages 57 (CONTINUED) 09 DEVELOPMENT Cross-browser testing & compatibility 10 ONLINE ANALYTICS 59 CSS naming conventions 60 JavaScript integration 62 Doc type and validation requirements 63 Accessibility standards 64 Front-end testing 66 Version control 66 Directory structure 66 SEO coding good practice 67 Core measures 70 Best practice 71 Examples 72 11 CONTACT INFORMATION Group Head Office 74 Emerging Markets 75 Old Mutual Wealth 76 01 INTRODUCTION 01.1 Overview of what to expect in this document 05 01.2 Other partnering documents 05 01.1 WHAT’S IN THIS DOCUMENT This document defines the brand assets which make up Old Mutual’s digital presence. It goes on to show them in action, as well as serve as a guide to their correct use. The document itself is not exhaustive, however it does detail the core capability and design elements that should be considered should you be embarking on a new online proposition or a change to your existing space. 01.2 OTHER PARTNERING DOCUMENTS These digital guidelines should be read in partnership with the brand guidelines and the two documents together should drive your online proposition. 5 OLD MUTUAL GROUP DIGITAL GUIDELINES Download the brand guidelines on the Old Mutual Group Intranet BRAND GUIDELINES QUARTER FOUR 2013 OLD MUTUAL BRAND GUIDELINES UPDATED 10/12/13 02 OUR BRAND 02.1 Our brand promise 07 02.1 OUR BRAND PROMISE Our brand promise is core to everything we do, and our websites need to reflect: MOST ACCESSIBLE wn “financial advice’ O on search engines ne stop shop for O consolidation est web content on B financial planning Best online tools nly ask once for O information (pull through data) Find an advisory network vailable on the web, A mobile and tablet Peer to peer forums onsistent online and C offline integration igital means 100% D digital (ie. digital signatures) ustomer experience on C line that is easy, valued, peace of mind* lain english and visual P clarity 7 BEST FINANCIAL ADVICE dvisor integrated with A self service offering est online financial B planning process SOLUTIONS THAT DELIVERS lear, outcome based, C financial planning and illustrations ost reliable digital M services (secure, up to date, 24/7) asy access to funds / E claims through digital channels OLD MUTUAL GROUP DIGITAL GUIDELINES ADVISOR Best integrated platform Integrated web-presence capability for advisors nline training / O accreditation for advisors ccess to client A information online and in one place Why COMMUNITY How L ink to Foundation, community and sponsorship micro sites What EASY VALUED Convenient, fast and simple registration and interface Tailored and relevant information PEACE OF MIND Internet data security 03 USER EXPERIENCE 03.1 Overview 09 03.1 OVERVIEW WHAT IS USER EXPERIENCE (UX)? User experience is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. UX is part of the customer experience, and both are part of the company’s overall brand experience. CX UX OUR BRAND 9 WHY IS UX IMPORTANT TO US? INCREASED CUSTOMER SATISFACTION. The better experience you create for our customers, the happier they will be. And the opposite is also true: the worse experience we provide to our customers they will become more and more frustrated with what we are providing them. REDUCED COST OF OWNERSHIP AND SUPPORT. If we produce a product that has an easy-to-learn (and easy-to-use) design, you will have to support that product less. Good design also reduces your total “cost of ownership”, in that you will need less documentation, a smaller support staff, and less salespeople. OLD MUTUAL GROUP DIGITAL GUIDELINES INCREASED SALES. Happy users share their happiness with their circle of friends and family. They also review your offering online. Providing a good experience helps build positive word of mouth, and increases sales. It also often results in increased customer loyalty and therefore repeat business. WHAT IS A GOOD USER EXPERIENCE? A good user experience meets the exact needs of the customer, without fuss or bother, simply giving customers what they want. UX is the what, when, where, why, how, and who of a product or service. It is practically everything that affects a customer’s interaction with our organisation. At the core of UX is ensuring that users find value in what you are providing to them. SEFUL Your content U should be original and fulfil a need. SABLE Your site or app U must be easy to use. ESIRABLE Image, D identity, brand, and other design elements are used to evoke emotion and appreciation. F INDABLE Content needs to be easy to navigate, both onsite and offsite. CCESSIBLE Our content A needs to be accessible to people with disabilities. REDIBLE Customers must C trust and believe what we tell them. WHAT ROLE DOES UX PLAY? Customers do not only buy products because of the features but also because of the experience delivered. Products are seen as vehicles to construct and deliver an experience for the user, making it one of the most important factors in a product’s success. The purpose of a UX vision, or strategy, is also its primary benefit: a human-centered approach, or roadmap, to a product or service that an entire enterprise can rally around and work to achieve. This includes marketing, development, sales, and executives. UX design means taking your users’ needs into account at every stage of your product lifecycle. This 03.1 OVERVIEW would be from usability of your website’s home page, to buying an investment product and receiving email correspondence. WHEN DOES UX COME IN TO PLAY? UX comes into play at the beginning of the launch of a new platform, campaign or online service, just after the idea has been conceived. This is where UX can start influencing the direction of the delivery in a positive way, leading to project cost savings and ultimately a better outcome for Old Mutual and our customers. UX BASICS Start with needs. Use research to identify real user needs and design around those. (CONTINUED) DESIGN WITH DATA. Use real world behaviour and user testing to aid the development process. DO THE HARD WORK TO MAKE IT SIMPLE. With great power comes great responsibility - very often people have no choice but to use our services. ITERATE. Then iterate again. The best way to build effective services is to start small and iterate. BUILD FOR INCLUSION. Accessible design is good design. We should build a product that’s as inclusive, legible and readable as possible. UNDERSTAND CONTEXT. We need to think hard 10 OLD MUTUAL GROUP DIGITAL GUIDELINES about the context in which they’re using our services. Are they in a library? Are they on a phone? Are they only really familiar with Facebook? MAKE THINGS OPEN: IT MAKES THINGS BETTER. We should share what we’re doing whenever we can, with colleagues, with users, with the world. BE CONSISTENT, NOT UNIFORM. Wherever possible use the same language and the same design patterns - this helps people get familiar with the services. SIDENOTE UX GUIDELINES We are preparing a full UX guidelines document, which will also be used to update content in this section. In the interim, please contact Robert Hermanie (rhermanie@oldmutual.com) or Susan Clements (susan.clements@skandia.co.uk) for more information on UX at Old Mutual. 04 DIGITAL COMMUNICATION 04.1 Digital communication strategy 12 04.2 Creating engaging web content 13 04.3 Copy tone 14 04.4 Videos 15 04.5 Common information 16 04.6 Search engine optimisation 17 04.7 What is accessibility? 18 04.1 DIGITAL COMMUNICATION STRATEGY A digital communications strategy formalises your communications across all digital platforms. By examining what your goals are with your communications, you can best determine who your audience is, and what the best way of communicating with them is. It documents which channels will be used and who is responsible for maintaining those channels. A strategy helps you communicate as effectively as possible. If you haven’t thought about what the purpose of each of your communications is, you won’t be communicating as well as you could be. Having a digital communications strategy in place makes sure that your efforts are co-ordinated, that the correct channels are used and that your audience can be assured that they are dealing with an official channel rather than a rogue member who has decided to simply start something up without consulting the board. HOW DO YOU CREATE A COMMUNICATIONS STRATEGY? 1. SET GOALS First of all, determine what you hope to achieve through your communications. What is the tangible outcome that you are aiming for? Are you trying to: 12 OLD MUTUAL GROUP DIGITAL GUIDELINES source new members? re they from a specific A country or culture? keep in touch with attendees) attract donations? hat is the best way of W reaching them? nd potential applicants fi for a program? What’s in it for them? y our Facebook page (for periodic reminders about why the event will be worth attending) increase attendance at events? s ource more volunteers to help with a local project? nd partners for an fi international project? 2. DEFINE YOUR TARGET AUDIENCE Once you know what your goals are, then you can determine who exactly are the people that you want to reach to achieve them. You should consider: How does your target audience like to communicate? What motivates them? 3. DETERMINE WHICH TOOLS TO USE When you know who you want to communicate with and where to find them, then you can determine which is the best tool, or set of tools, to use to reach them. For example, if your goal is to increase attendance an an event, your tools may include: y our website (which has detailed information about the event) a Facebook event (to T witter, for brief reminders in the lead up, with regular updates during the event s poradic opt-in email updates for those that don’t use Facebook or Twitter, which refer to the web page for full details 4. ASSIGN RESPONSIBILITY After you have selected the platforms you will use, then you can determine who is responsible for the communications on each of those platforms. 04.2 CREATING ENGAGING WEB CONTENT 1. KNOW YOUR AUDIENCE Before you create any kind of content you need to think of who you are writing it for. Do you have a broad target audience or one that’s more specific? It’s very important that your content can be understood by users of all abilities within your target audience. 2. KEEP IT CONCISE Users are impatient and will often skim read content. If your page is a solid block of text you can expect a user to click back straight away. Due to several factors such as screen glare, small text, and varying contrast with displays, reading content on a screen is not as comfortable as print. Be sure to break things up with headings, shorter sentences, paragraphs, and bulleted lists. 3. INTERESTING TITLES This is the first thing your users will read, and often may be a deciding factor for whether they read on. It also might be what users see in their RSS feeds, a catchy title may just be the factor to direct people to your page. 4. CLEAR LANGUAGE It’s called the World Wide Web for a reason. You need to bear in mind that users could be visiting your site from anywhere in the world. Make sure you write with the correct grammar and spelling. International users may not understand your local slang or abbreviations 13 OLD MUTUAL GROUP DIGITAL GUIDELINES 5. CHECK YOUR FACTS Most users of the internet are very sceptical about what they read. If you display any facts, figures or statistics be prepared to back them up with references or links. Make sure you are knowledgeable on your subject and that everything you say is correct before you publish. 6. KEY WORDS AND SEO Be sure to include keywords relating to your topic to improve search engine results for your content. Bear in mind that you are writing for people, and not exclusively for search engines. Ensure you find the right balance so that your content is still clear, concise and engaging. 7. IMAGES Inserting images relating to your content can improve the look and feel straight away. Users are more likely to remain on your page if the content is visually appealing and it will assist in getting your message across. 8. LINKS If any of your content relates to other areas of your site, then link it! It will help the user discover more of your site. Your links should be named appropriately. Just linking the words “click here” really doesn’t mean much when you look at it and it’s also not very accessible for screen readers. Let the user know where they are going before they click a link and don’t make it a guessing game. 9. REVIEW You may have spent a while creating your page, but don’t be in too much of a hurry to publish it. Proof read, and have it checked through by somebody else who also has editing privileges on your site. They may pick up mistakes that you missed! 10.UPDATE When you have published your page, don’t forget about it. Some of the links on the page may become broken over time, and facts or information may also change. Occasionally reviewing your content keeps it tidy and will minimize inaccuracies. 04.3 COPY TONE All copy should be written in line with our brand promise, and our websites need to reflect: Individualism, talk to me as an individual and recognise that my needs are unique. The first requirement of good writing is that is should be readily understandable: clarity of writing follows clarity of thought. OUR STYLE SHOULD ALSO BE onnect with me in C the channels that I want and build Trust, deliver on your promises, do what you say, become somebody I can rely on. ocial responsibility, S I want to see that you are a good corporate citizen. Our style needs to reflect our values. So the way we write needs to be honest and transparent, using clear crisp sentences and avoiding jargon where possible. 14 OLD MUTUAL GROUP DIGITAL GUIDELINES Bold but not arrogant. dult (treating the A audience as intelligent) but simple. ccessible but not A patronising. In the first person rather than the third person where possible (ie use „we”, „our” and „us” rather than „the Company”, „its” and „their”) but avoiding too much use of „I”. risp and uncluttered C – using short sentences and short, simple words. ctive, not passive (eg A „we decided” rather than „it was decided” – it’s more dynamic, and indicates clearly who was responsible). ngaged, not remote E (eg „we delivered sales growth of X” rather than „sales grew by X” – it didn’t just happen, we made it happen). ositive, aspirational P language and imagery – celebrating the best of who we are without being boastful. IT SHOULD AVOID nnecessary words (eg U „regularly” rather than „on a regular basis”, „we see no need at present” rather than „we do not think there is a need at the present time”). xcessive use of E acronyms, which can make text look dense and unapproachable – avoid them unless you’re sure your audience knows what they stand for. Jargon wherever possible (if essential then define). F ormality in naming our people: we want to be seen as accessible, so use “Julian Roberts”, not “Mr J Roberts”. SIDENOTE OUR LOGO IS MORE THAN A TRADEMARK It is a trustmark. Every piece of communication we produce needs to be responsible for enhancing the trust our customers and stakeholders have in us. AND ALWAYS Write out Old Mutual in full (do not write OM) and do not split over two lines. It is our company name and we need to be proud of it. 04.4 VIDEOS Video is gaining popularity with the improvements of bandwidth availability. Use video on your site to create a real, personable impression of your business. UALITY IS KEY Q Ensure your video is high resolution with a clear audio track but optimise for your audiences bandwith limitations. hoot video with S professional equipment EEP IT SHORT K Keep video length under 2min30seconds. E PROFESSIONAL B If using video of staff, ensure they are dressed professionally and speak clearly. 15 OLD MUTUAL GROUP DIGITAL GUIDELINES O ADVERTS N If you use YouTube to deliver your video online, do not allow YouTube to display adverts over your video (do not monetise your content). CCESSIBILITY A When selecting video platform, consider if it is available to staff internally OUTUBE Y We recommend using the Youtube channel to embed your videos from. 04.5 COMMON INFORMATION It is important that our businesses identify themselves as part of the larger Old Mutual Group, and to achieve this common Old Mutual information needs to be installed on all websites in the About section. For the latest copy of the common information contact Graham Beverley at graham.beverley@omg.co.uk 16 OLD MUTUAL GROUP DIGITAL GUIDELINES 04.6 SEARCH ENGINE OPTIMISATION By using the correct keywords within your content, you can channel more users to your page through search engines. nsure H1, H2, E H3 follows correct HIERARCHY (reference page 41). ages should have P CORRECT META DATA (keywords and description) for search engine indexing. nsure your site contains E a ROBOTS.TXT file. onsider using a C reputable consultant to assist with SEARCH ENGINE OPTIMISATION on your site. CASE STUDY iWYZE, the South African short-term insurance business, uses up to 25 keywords per page on their website. These keywords are based on research into what customers are searching for using search engines, such as Google. The SEO challenge is writing content so that it makes sense after you include all the relevant keywords in the body copy. Adding these keywords into your content improves your page ranking on search engines which in turn gives you more volume/ traffic coming to your page. 17 OLD MUTUAL GROUP DIGITAL GUIDELINES Adding these keywords into your content improves your page ranking on search engines which in turn gives you more volume/traffic coming to your page. 04.7 WHAT IS ACCESSIBILITY Online accessibility means that people with disabilities can perceive, understand, navigate, and interact with our online spaces. Web accessibility also benefits others, including older people with changing abilities, such as eyesight, due to aging. Businesses must also ensure they comply to local territory accessibility regulations, e.g. in the UK all websites must be at least Level A accessible. For more in depth information about accessibility, see the different sections: We are committed to being inclusive and are, in some countries, required by law to be accessible. Old Mutual websites should adhere to a minimum of Level A accessibility compliance as defined by the W3C. 18 OLD MUTUAL GROUP DIGITAL GUIDELINES COLOUR - page 36 TEXT USAGE - page 40 AVIGATION - page N 54 Basic CODING accessibility standards - page 69 05 ONLINE MARKETING 05.1 Banner advertising 20 05.2 Social media 21 05.3 Paid search 22 05.1 BANNER ADVERTISING 216x36 168x28 120x20 300x250 728x90 se Google’s advertising service to deliver U your banner and advertising content. nsure a strong call to action in your display E advertising 300x600 20 OLD MUTUAL GROUP DIGITAL GUIDELINES Banner advertising can be created and placed on various websites, such as news websites or financial advice websites (e.g. www.moneyweb.co.za or www.fin24.com) 05.2 SOCIAL MEDIA Social media marketing refers to the process of gaining website traffic and engaging with customers through social media sites. RO-ACTIVELY LISTEN – this allows P you to understand what people say about you, your competitors and the wider landscape. LLOW NEGATIVE COMMENTS – A this improves your reputation by being transparent AVE A PROCESS IN PLACE TO H RESPOND TO SOCIAL MEDIA QUERIES – this needs to be fast and professional. NSURE YOUR ORGANISATION E HAS A SOCIAL MEDIA POLICY IN PLACE – only official, trained, representatives should be speaking for the company. 21 OLD MUTUAL GROUP DIGITAL GUIDELINES 05.3 PAID SEARCH Paid Search looks at search advertising programs and how to most effectively use them. CPC (cost-per-click) advertising involves selecting a set of keywords and writing an ad to appear when someone searches for that keyword in the major search engines. CPC advertising requires you to set a cost that you are prepared to pay for a click. then only show your ads during these times. CHOOSE KEYWORDS CAREFULLY Various tools will help find specific keywords or phrases that are being used by your audience. You can pay to use tools such as Keyword Discovery, but a free and easy way to find out is to use Google’s Keyword Tool. Here are a few guidelines to make your paid search campaigns worth while: SELECT LONGER TAIL TERMS Longer Tail terms are ones that appeal to users searching for very niche or specific items. SHOW WHEN IT COUNTS Adjust your campaign to consider user peak times. If your target audience is primarily searching for your products between 7 a.m. and 7 p.m. on weekdays, GO NEGATIVE TO BE POSITIVE Adding negative keywords is an ideal way to exclude your campaigns from areas that are not relevant to you and enquiries you cannot fulfill. 22 OLD MUTUAL GROUP DIGITAL GUIDELINES THINK SEASONAL Some products/websites are going to be more or less popular depending on certain times of the year due to holidays, weather, or major events. It may be worth upping your spend in the months leading up to high-demand times to reap the extra traffic. AD COPY IS KEY To help improve your copy, try Google’s Dynamic Keyword Insertion Tool. Try to use distinctive, even quirky, verbiage to catch your prospect’s eye. Include a major call to action; if you have a unique selling proposition or new offer, say so. BACK IT UP Don’t think of your other promotions, be they offline or online, as separate entities. If they typed your latest marketing slogan into a search engine, would a recognisable CPC ad appear for your company taking them to your site for more information? Make sure your ads are appearing when someone is searching for you by name. GO VERTICAL Another option for reaching a more focused, relevant audience is vertical search engine advertising. Because of their more segmented nature, vertical search engines reach a very targeted audience, and often produce far better quality traffic at the same or smaller spend levels than you’ll find with their general search engine counterparts. GO LOCAL VERSUS INTERNATIONAL Is your business local or international? If it’s international, you may need to set up campaigns on a country by country basis and tailor your keywords and ads to the various languages, time-zones, product variations, specific landing pages, etc. USE CPC MANAGEMENT TOOLS (GOOGLE ADWORDS) In addition to Google’s keyword tool, there are two others that are particularly helpful. The first is AdWords Editor. It’s a free tool that offers you great control over multiple and/or large campaigns. The second tool is Google’s Search Query Performance Reports. These reports show you what people are searching for to trigger your ads, which you can then use to adapt both your CPC words and the content on your site for SEO. 06 DESIGN. OLD MUTUAL LOGO 06.1 Horizontal logo 24 06.2 Stacked logo 25 06.3 The Old Mutual brand icon 26 06.4 Examples of using the logo in a digital space 27 06.5 Sub-brands 28 06.6 Incorrect usage 29 06.1 HORIZONTAL LOGO ON SCREEN y minimum size - 198pxls y y y y y y With of ‘O’ = y y lways use the digital version of the logo online (RGB) – the colours for digital and A print logos are different. Minimum size on all digital applications: 198 pixels wide Source digital versions of the logo from Graham Beverley 24 OLD MUTUAL GROUP DIGITAL GUIDELINES Ensure that for all digital applications the correct digital (RGB) version of the logo and our colours are used. The preferred logo layout is horizontal with clearly defined spacing. Sub brands are accommodated with clear spacing. Reference the Brand guidelines for more logo rules. HE REVERSED T OUT WHITE LOGO should be used in exceptional circumstances where the full colour format isn’t applicable, for example use the white logo on applications using a dark background. T he logo is always surrounded with CLEAR SPACING, taking reference from the width of the ‘O‘ of ‘OLD MUTUAL‘. SIDENOTE DIGITAL APPLICATIONS INCLUDE Television Monitor Projector Tablet Smart phone DF files created to be P read on screen r any other display o technology Digital values also refer to the greens for the vignette and all greens and colours used on your intended digital application. 06.2 STACKED LOGO y minimum size - 198pxls y y y y y With of ‘O’ = y 25 OLD MUTUAL GROUP DIGITAL GUIDELINES y inimum size on all M digital applications: 112 PIXELS wide T he logo is always surrounded with CLEAR SPACING, taking reference from the width of the ‘O‘ of ‘OLD MUTUAL‘. L ogo mark is always HORIZONTALLY CENTRED T he reversed out white logo should be used in EXCEPTIONAL CIRCUMSTANCES where the full colour format isn’t applicable, for example use the white logo on applications using a dark background. The stacked logo is the secondary version of the Old Mutual brand. This is used as an alternative, where the application requires it. This logo should only be used when the primary version can’t be used. For example, on extreme formats such as narrow banner adverts or other vertical layouts. 06.3 THE OLD MUTUAL BRAND ICON 1/5 of x 1/5 of x 1/5 of x 1/5 of x Minimum size for standard Old Mutual icon: 36 pixels wide 1/5 of x 1/5 of x 16 x 16 pixels icon: for website favicons and small icons. This favicon has no white space included in the .ICO file. 1/5 of x x 1/5 of x inimum size for M standard Old Mutual icon: 36 PIXELS wide. n ADDITIONAL A ICON must be used for smaller sizes, for example the website favicon which uses a 16 x 16 pixel size. T he brand icon is always surrounded with CLEAR SPACING, using 1/5 of the width of the Old Mutual icon. T he Old Mutual brand icon is NEVER used reversed out white on a dark background. 26 OLD MUTUAL GROUP DIGITAL GUIDELINES The Old Mutual brand icon is the visual representation of the Old Mutual brand. This is used as the brand persona in social media and on small places where icons are used. This logo should only be used when the application requires small spaces. For example, on extreme formats such as browser favicons or on small square spaces ie. Facebook profile area. 06.4 EXAMPLES OF USING THE LOGO IN A DIGITAL SPACE Old Mutual logo on website Browser favicon Old Mutual brand icon in Social media 27 OLD MUTUAL GROUP DIGITAL GUIDELINES 06.5 OUR SUB-BRANDS y x 3/5 of y 1/5 of x Sub brand name is left aligned underneath the logotype O NOT ADJUST D our logos, always use the artwork supplied and never create your own version. lways use the A RGB version for all DIGITAL APPLICATIONS. L ogotype and sub brand lock-up is VERTICALLY CENTRED against the logo mark. These rules apply across all three sub brand logos. 28 OLD MUTUAL GROUP DIGITAL GUIDELINES These are the new sub brand logos. There are two arrangements of these logos, but these are the primary, preferred versions. Always try to use these versions on all of our collateral. This logo should only be used when the application requires small spaces. For example, on extreme formats such as browser favicons or on small square spaces ie. Facebook profile area. 06.6 INCORRECT USAGE Do not distort the logo Do not alter the proportions of the logo Do not change the colour of the logo DO NOT obscure the logo and do not place the Old Mutual logo on busy backgrounds, images or colours other than our primary palette 29 OLD MUTUAL GROUP DIGITAL GUIDELINES Do not use the print logo in any digital application. Ensure that for all digital applications the correct digital (RGB) version of the logo and our colours are used. 07 DESIGN. BRAND ELEMENTS 07.1 Colours for digital application 31 07.8 Tables 43 The difference between RGB & CMYK 33 07.9 Icon styles 44 Incorrect colour usage 34 07.10 Web page examples 45 07.2 Digital fonts 35 07.3 Heading styles 36 Paragraph styles 37 Underlined headings & list styles 38 07.4 Typography signature style 39 07.5 Brand device – the line 40 07.6 Image usage 41 07.7 The grid 42 07.1 COLOURS FOR DIGITAL APPLICATION Please ensure that for all digital applications the digital (RGB) version of the logo and our colours are used. PRIMARY COLOUR PALETTE HERITAGE GREEN #006150 R 0, G 97, B 80 FUTURE GREEN #6EAB24 R 110, G 171, B 36 WHITE #FFFFFF R 0, G 0, B 0 OLD MUTUAL DARK GREY | #333333 | R 51, G 51, B 51 31 OLD MUTUAL GROUP DIGITAL GUIDELINES ERITAGE GREEN AND H FUTURE GREEN are used to create impact, complemented by the crispness and clarity of white space. ERY DARK GREY (#333333) V is used for body copy only. ID AND LIGHT GREYS can M be used in backgrounds to create definition and bring attention to specific detail on a page. It is important that this is used minimally and subtly, and should never be used for text yperlink in body copy H #027864 SIDENOTE DIGITAL APPLICATIONS INCLUDE Television Monitor Projector Tablet Mobile DF files created to be P read on screen r any other display o technology Digital values also refer to the greens for the vignette and all greens and colours used on your intended digital application. COLOURS FOR DIGITAL APPLICATION (CONTINUED) SECONDARY COLOUR PALETTE DEEP RED #830051 R 131, G 0, B 81 FRESH ORANGE #FF9900 R 255, G 153, B 0 VIBRANT BLUE #00A7CA R 0, G 167, B 202 Our secondary colour palette has been modified to complement the greens and white within our primary palette. Our secondary palette consists of: DEEP RED inimal M usage example FRESH ORANGE VIBRANT BLUE T he secondary colours are only used in applications such as graphs, bar-charts, piecharts or login buttons. Use of these should be kept to an absolute minimum. 32 OLD MUTUAL GROUP DIGITAL GUIDELINES THE DIFFERENCE BETWEEN RGB & CMYK HERITAGE GREEN RGB 0, 97, 80 #006150 HERITAGE GREEN CMYK 100, 30, 70, 0 FUTURE GREEN RGB 110, 171, 36 #6EAB24 FUTURE GREEN CMYK 50, 0, 100, 0 CMYK IS BASED ON INK Red (R) light plus Green (G) light plus Blue (B) light all projected together create white. Black is encoded as the absence of any color. Colours made out of light is used for digital screens only. Superimpose Cyan (C) ink plus Magenta (M) ink plus Yellow (Y)ink, and you get black, although this format also encodes Black (K) directly. White is encoded by the absence of any color. Ink is used for printing purposees only. 33 OLD MUTUAL GROUP DIGITAL GUIDELINES ACCESSIBILITY In line with your brand promise of “Most accessible, face-to-face and digital”, we always make sure that visitors with vision challenges are not limited by the colours we use. See page 52 for an expanded description. Consideration should be given to the use of colour in any online space. RGB IS BASED ON LIGHT Always use the RGB colour versions of our logo and colours for the digital applications. SIDENOTE olours that are very light in contrast C should be AVOIDED for text as they can be difficult to see on a device screen, even without any visual impairment of the user. EVER reference colour as interactive N visual cues on account of visually impaired users. nsure the contrast of your text colour E to its background is high to ensure LEGIBILITY. INCORRECT COLOUR USAGE o not stray D from the Old Mutual Brand colours 34 OLD MUTUAL GROUP DIGITAL GUIDELINES o not use D excessive grey on backgrounds. Always use white o not use grey D headlines 07.2 INTRODUCTION TO OLD MUTUAL DIGITAL FONTS Aa Aa FUTURA LIGHT, HEADLINES 17 - 40PX FUTURA BOLD, HEADLINES 17 - 40PX Aa Aa ARIAL REGULAR, HEADLINES & BODY 14 27PX ARIAL BOLD, HEADLINES & BODY 14 - 27PX ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (.,:;?!$&@*) 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (.,:;?!$&@*) 0123456789 35 OLD MUTUAL GROUP DIGITAL GUIDELINES ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (.,:;?!$&@*) 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (.,:;?!$&@*) 0123456789 ld Mutual’s PRIMARY O FONT is Futura. We use two primary weights, light and bold to maintain a consistent approach that is visually linked to our logo. The Futura font is mainly used for heading styles in the Old Mutual signature Heritage Green #006150 or Future Green #6eab24 colours. ld Mutual’s WEB SAFE O FONT is Arial, and is used as a secondary font on digital applications. It is used with a minimum height of 14px, using hex colour #333333 to ensure clear legibility. Old Mutual’s logo has a distinctive typographic style in the wordmark, using a combination of light and bold weights of the same font. This typographic style is an ownable and unique visual asset for our brand, and has been applied to our visual identity, and digital applications. 07.3 HEADING STYLES HEADING ONE FUTURA BOLD (H1 27PX) Heading two Arial regular 27px (H2) Heading three Arial regular 24px (H3) Heading four Arial regular 20px (H4) Heading five Arial regular 17px (H5) Heading six Arial regular 14 px (H6) HEADING SEVEN ARIAL BOLD 14PX (H7) 36 OLD MUTUAL GROUP DIGITAL GUIDELINES SIDENOTE ACCESSIBILITY In line with your brand promise of “Most accessible, face-to-face and digital”, we always make sure that visitors with visual challenges are not limited by the typography we use. See page 52 for an expanded description. hilst we design our digital spaces to a set text W size, the user should have the option of adjusting this either via an on-page tool or through their browser settings directly. In doing so we need to consider this within our page designs, particularly around reducing the amount of important text that we place within an image, as image text will not re-size. PARAGRAPH STYLES This is an illustration of the maximum allowed size for use in paragraph text. (24px) Over here we have the medium allowed size for use in paragraph text. (18px) Body style (14 px) most commonly used text for general reading text. Please note that any of the text sizes may be linked, italicised, bolded or underlined. Other special characters are allowed. Footnotes look like this² (14 px) Text at this size is only to be used in secondary text or link groupings and fine print. (12px) 37 OLD MUTUAL GROUP DIGITAL GUIDELINES Block quote “Block quotes are used to highlight a significant piece of copy . It can also be used to pull quotes from individuals who can then be referenced in the finefrint at the base of the quote. Thjis text does not have to be in italics. However, italics do work well for people quotes” — sub descriptor for a person’s Name UNDERLINED HEADINGS & LISTS STYLES Underlined heading (can be applied to all headings) Lists Unordered Ordered ● Lorem ipsum dolor sit amet ● Consectetur adipiscing elit ● Integer molestie lorem at massa ○ Facilisis in pretium nisl aliquet ○ Nulla volutpat aliquam velit ● Phasellus iaculis neque 1. 2. 3. 4. 5. 6. 38 OLD MUTUAL GROUP DIGITAL GUIDELINES Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Consectetur adipiscing elit The underlined heading style can be used to emphasise important information. 07.4 TYPOGRAPHY SIGNATURE STYLE YOUR FUTURE OUR INSIGHT YOUR VISION OUR FUTURE TODAY TOMORROW 39 OLD MUTUAL GROUP DIGITAL GUIDELINES YOUR VISION OUR FUTURE YOUR VISION OUR FUTURE YOUR VISION OUR FUTURE Old Mutual’s distinctive typographic style derived from the wordmark, is used mainly on web banners, main headings, or advert banners. Our new logo has a distrinctive typographic style that is ownable and unique for Old Mutual. This is our typogrpahic ‘signature style’ that complements our modern and contemporary look and feel. ON’T MIX colours and weights in D the same heading. EEP THE SAME COLOUR for K the whole line, and only change the weight. Different colour can be used but be consistent. lways make the KEY WORDS A BOLD 07.5 BRAND DEVICE – THE LINE PRIMARY VIGNETTE LINE 20% of overall length Our brand device, the line, has been created to add a distictive element to the visual identity that is ownable to Old Mutual. It can be used in a VARIETY OF WAYS, for example to frame web banners or seperate copy to add clarity and focus to layouts. 20% of overall length v hen using two lines, use DIFFERENT DEPTHS W with the deepest positioned at the top of the layout. hen setting the line depth make sure its NOT W TOO HEAVY within the overall layout. T he primary vignette line should always have 20% FUTURE GREEN AND 20% HERITAGE GREEN of the overall lenght at the end before the vignette is applied. hen using the vignette lines to frame images or W text, the bottom line height is ONE THIRD of the top line’s height. 1/3 of v 40 OLD MUTUAL GROUP DIGITAL GUIDELINES 07.6 IMAGE USAGE PEOPLE We have two image categories: ‘People’ and ‘Life’ to support our brand positioning. The images reflect our brand promise of ‘Enabling positive futures’ and express our personality ‘Genuine Guiding Growing’.Our photography style is fresh and modern with content that reflects the brand. Cut-out / deep etch where possible (white background) Context For more guidance, see the Old Mutual Brand Guidelines and your business unit guidelines. OUR STYLE IS Future positive LIFE Contemporary and vibrant Guiding and uplifting Human and genuine Bold and dynamic Details Human touch THE IMAGES SHOULD enable positive futures, achieving lifetime goals have a sense of contentment, security and confidence portray our customers and our partnerships 41 OLD MUTUAL GROUP DIGITAL GUIDELINES OUR STYLE IS NOT ld fashioned and O dull Dreamy Cluttered Staged Fresh and crisp white backgrounds. Bright and showy esaturated warm natural tones with a D crisp focal point Overtly colourful Nostalgic 07.7 THE GRID The grid is utilised as a structural foundation for a website. It takes the guess work out of deciding where to place elements on a page. It also creates standard proportions which become the underlying visual language of any Old Mutual website. The grid can be a useful tool when finding solutions to visual and organizational problems. They help in the following ways: CLARITY/ORDER Grids bring order to a layout making it easier for visitors to find and navigate through information. 42 OLD MUTUAL GROUP DIGITAL GUIDELINES EFFICIENCY Grids allow designers to quickly add elements to a layout because many layout decisions are addressed while building the grid structure. ECONOMY Grids make it easier for other designers to work and collaborate on the design as they provide a plan for where to place elements. CONSISTENCY/HARMONY Grids lead to consistency in the layout of pages across a single site or even several sites creating a structural harmony in the design. 07.8 TABLES Tables should be used for tabular data only. T he first row of the table should contain the COLUMN HEADINGS for the data in the table. Use thetag to indicate header cells. se ALTERNATING U BACKGROUND COLOURS when necessary to create a visual hierarchy and group information within a table. 43 OLD MUTUAL GROUP DIGITAL GUIDELINES 07.9 ICON STYLES ACTION ICONS Social media elements are for sharing the main content of the page. T he share icons should appear UNDERNEATH other information components on the page efore starting a social media activity, B ensure your business has a SOCIAL MEDIA POLICY with allocated resources to ensure the presence is properly managed. HEADING ICONS ll navigational buttons and links must A have clearly contrasted NORM AND OVER STATES. Icons can be COLOURED with reference to our colour guide. SOCIAL MEDIA ICONS Active state example Active state example OR Hover state example 44 OLD MUTUAL GROUP DIGITAL GUIDELINES Hover state example ICONS COMMUNICATES THE CONTENT ESSENCE With icons you can quickly sum up what your text is about. Sometimes, icons can even be enough to communicate content, which makes reading additional text unnecessary. A great approach to relevant icons are metaphors. One of the most important things about icons is that you choose metaphors people can relate to, like a cart or an old fashioned letter. ICONS CAN DRAW ATTENTION Pictures are worth a thousand words. So are icons. Websites without icons and pictures can be boring. Imagine a newspaper without any images. Besides catchy headlines, images draw our attention to certain content, which is why we tend to read articles showing an appealing image first. Icons can draw attention, but at the same time they can help you structure content and separate different functions or services. Clearly illustrate ICON PURPOSE. se a U CONTRAST of green and white VOID A complicated shapes or using a multitude of colour shades. Icons need to be BOLD AND STRIKING. Icons can be COLOURED with reference to our colour guide. 07.10 WEB PAGE EXAMPLES DESKTOP 45 OLD MUTUAL GROUP DIGITAL GUIDELINES TABLET (PORTRAIT) MOBILE 08 DESIGN. FUNCTIONAL ELEMENTS 08.1 Button & text link styles 47 08.2 Navigation 49 08.3 Site search 51 08.4 Links to our businesses globally 52 08.5 Forms 53 08.6 Carousel banners 54 08.7 Promotional elements 55 08.8 Information / call to action elements 56 08.9 Login facility for transactional pages 57 08.1 BUTTON & TEXT LINK STYLES BUTTON STYLES Arrow button Arrow button BUTTON STYLES Arrow button Arrow button Arrow button with icon Arrow button with icon Arrow button with icon Arrow button with icon Bigger arrow button Bigger arrow button Bigger arrow button Bigger arrow button Bigger arrow button Bigger arrow button Info button Info button View more news View more news 47 OLD MUTUAL GROUP DIGITAL GUIDELINES CUSTOMER QUERIES INVESTOR RELATIONS MEDIA CONTACTS The arrow button style’s are strong call to actions. The dark green draws the eye of the user to primary function on a page. Because these buttons are so imposing, they must be used sparingly. No more than two of these should be used on a page. Use HERITAGE OR FUTURE GREEN for static or hover states. RROW BUTTONS bring attention to the core call to action on a A web page. ll navigational buttons and links must have clearly contrasted NORM A AND OVER STATES. INFO BUTTONS can be used for additional information requests. BREADCRUMBS have links to the previous level. BUTTON & TEXT LINK STYLES (CONTINUED) TEXT LINK STYLE EXAMPLES BREADCRUMS STYLE EXAMPLES In content links Bread crumb / Bread crumb (Normal) 10px Normal state - text colour #027864; line colour #dadada Normal state A new link colour (#027864) is incorporated to make the link stand out from the rest of the dark grey text. Home / Media Centre / Group profile / What we do In content links Normal state Hover state - #6eab24; line colour #dadada ACCESSIBILITY Bread crumb / Bread crumb (Mouse Over) Hover state > Promotion Text link – Sub promotions Normal state > Text links – Sub promotions Hover state SIDENOTE In line with our brand promise of “Most accessible, face-to-face and digital”, we always make sure that visually challenged visitors are not limited by the interactive elements we use. See page 52 for an expanded description. yperlinks need to be contextual H and indicate to the user what their action will return. E.g. use “View our contact information” rather than “click here”. Never use “click here” as an action. 48 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.2 NAVIGATION MAIN NAVIGATION AIN, HORIZONTAL M NAVIGATION should be in Arial and have a text size of at least 14px / 0.875em SECONDARY NAVIGATION ECONDARY, SECTIONS SPECIFIC LEFT-HAND NAVIGATION should be in Arial and have a text size of at least 12px / 0.75em SE + AND – SIGNS to U indicate expanding navigation items 49 OLD MUTUAL GROUP DIGITAL GUIDELINES NAVIGATION (CONTINUED) ACCORDIANS Although developing concise body copy is recommended, if there is a large amount of copy on one page, an accordion structure can be used. ontent can be EXPANDED OR COLLAPSED depending on what C the customer is interested in reading. T he title for each section must CLEARLY DESCRIBE the content that will be revealed when it is expanded. section is COLLAPSED either by clicking the section title or by A clicking on a different section title. MEGA MENUS ECONDARY MEGAMENU NAVIGATION should be in Arial S and have a text size of at least 12px / 0.75em. T he mega menu helps users ACCESS SPECIFIC PAGES FASTER by minimising the amount of interactions required. 50 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.3 SITE SEARCH The search component on a website should be globally available in a predictable location. F or heavy content or documentation sites you should incorporate a SEARCH FACILITY. earch facility S consists of a INPUT FIELD AND SEARCH BUTTON (in the shape of a magnifying glass) to commence search. 51 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.4 LINKS TO OUR BUSINESSES GLOBALLY Include links to other global group websites in the header section of your website – see www.oldmutual.com for an example and the full list of businesses worldwide. 52 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.5 FORMS Used for gathering data online, web forms offer convenience and speed for both the user and the form owner. Web forms can be used to: Capture data (visitors’ information), communicate with website visitors, conduct surveys, respond to user questions, generate online sales and receive online feedback. Here are a few guides to create well functioned forms: learly HIGHLIGHT C required fields. rovide IN-LINE P VALIDATION messages. rovide USER-FRIENDLY P AND DESCRIPTIVE validation messages. ON’T CLEAR existing D fields after validation fails. OINT OUT LABEL FIELDS P where possible so that they are clearly understandable. In-line validation message example how users the PROPER S INPUT FORMAT. ie. Date: dd/mm/yyyy. VOID too many required A fields and keep the form short and simple. rovide LINKS AND HINTS P to fill fields where necessary. PTIMISE FORMS for O mobile and ensure auto suggest is disabled. 53 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.6 CAROUSEL BANNERS Use carousel banners to showcase your current key campaign or messages. These should change at least once a month. PROMINENCY Generally, this component is the largest element of the homepage and should be static content. 54 OLD MUTUAL GROUP DIGITAL GUIDELINES USE VARIETY Up to 3 revolving messages should be used. GIVE TIME TO OBSERVE 5 second time delay to each transition. GET THE MESSAGE ACCROSS The headline messages should be clear, with minimal text . CALL TO ACTION A prominent call to action button must be used to direct visitors to further information. 08.7 PROMOTIONAL ELEMENTS Promotional elements are secondary, smaller banners or pieces of information. n the home page, promotional components O are used to MESSAGE OTHER PRODUCTS that are not featured in the main carousel promotion area. romotions are normally related to products, P but if there are not enough products to fill the space, then INFORMATIONAL CONTENT can be used instead. T his component can be populated with a STATIC image and text. SMALL AMOUNT OF COPY can be used A to elaborate on the headline. CALL TO ACTION BUTTON can be used A or a secondary text link, depending on the page of placement. 55 OLD MUTUAL GROUP DIGITAL GUIDELINES 08.8 INFORMATION / CALL TO ACTION ELEMENTS Information components provide useful information that is often not necessarily product-related. T hese components appear in the RIGHT COLUMN and can appear throughout the site. T he headline of the element should be a CLEAR SIGNPOST of what it contains. E.g. “Advice” clearly offers the user a form to get advice. T he form must be EASY TO USE with a clear point to submit. Call to action 56 OLD MUTUAL GROUP DIGITAL GUIDELINES Information element 08.9 LOGIN FACILITY FOR TRANSACTIONAL PAGES For transactional websites, ensure the login facility is positioned near the top right of your website’s home page. This should at all times be clear, large and visible. Refer to page 37 for COLOUR SPECIFIC GUIDELINES 57 OLD MUTUAL GROUP DIGITAL GUIDELINES 09 DEVELOPMENT 09.1 Cross-browser testing & compatibility 59 09.2 CSS naming conventions 60 09.3 JavaScript integration 62 09.4 Doc type and validation requirements 63 09.5 Accessibility standards 64 09.6 Front-end testing 66 09.7 Version control 66 09.8 Directory structure 66 09.9 SEO coding good practice 67 09.1 CROSS-BROWSER TESTING & COMPATIBILITY Internet users have wider choice of browsers when it comes to surfing the net. It is our responsibility to ensure that websites we’ve created are compatible for most of the commonly used browsers these days. Taking your usage statistics into account, ensure your website supports the latest 3 browser versions for: FIREFOX NW N CHROME NE W E SAFARI SE INTERNET EXPLORER 8 AND UP S SW It’s almost impossible to install all different browsers in one machine. But thanks to some tools and web services out there, finding out how your website looks like in other browsers is possible. Use one of the following cross-browser testing tools: Browser Shots (free) BrowserStack (subscription) Virtual Box (best for extensive Internet Explorer testing) 59 OLD MUTUAL GROUP DIGITAL GUIDELINES Taking your usage statistics into account, ensure your website supports the latest 3 browser versions 09.2 CSS NAMING CONVENTIONS Cascading Style Sheets is a style sheet language used for describing the presentation semantics of a document written in a markup language. When writing CSS it is a good idea to follow a naming convention right from the start. This will involve a little thought in the early design stages but can save significant time when maintaining the finished code. It’s less important which exact conventions you choose to follow - but this page has a few suggestions. NAMES Name CSS Class selectors and ID selectors in lowercase and use dashes to separate words .social-header {…} When choosing a name don’t describe the values that the selector will apply (color, position etc) as these may change in a future redesign. When writing CSS rules, it is good for performance to minimise the number of selectors (at most 3 selectors in each rule). To facilitate this you may wish to add additional; more specific; Classes or IDs to the HTML markup: /* Bad */ header nav ul li a {…} /* Good */ .social-link {…} Place any vendor-prefixed properties before the non-prefixed property in the style sheet. This ensures that when a browser starts to support the official W3C property then the W3C property will take 60 OLD MUTUAL GROUP DIGITAL GUIDELINES precedence. (the last style definition wins). PUNCTUATION Include one space before the opening brace of declaration blocks my-style {width: 3000em;} Include one space after the colon in each property width: 3000em End all declarations with a semi-colon width: 3000em; (semicolons are in fact only required between declarations, but using one everywhere will reduce errors when editing the stylesheet.) Comma-separated values should include a space after each comma {font-family: Helvetica, Arial, SansSerif;} but don’t include spaces after commas in RGB colors, and don’t prefix with a leading zero {color: rgb(255,12,5);} Lowercase hex values CSS NAMING CONVENTIONS (CONTINUED) color: #ff00aa Quote attribute values in selectors (quotes are in fact only required if the value contains whitespace, but using them everywhere will reduce errors when editing the stylesheet.) e.g. Match SPAN elements with a “class” attribute having the value “example”: span[class=”example”] {…} Don’t specify units (px, pt etc) for a zero value margin: 0; MULTI-LINE CSS Each declaration should appear on its own line (i.e. don’t randomly mix multi-line and single line CSS declarations) indent multi-line CSS with 2 spaces (soft tabs) Indent any vendor prefixed properties, so that they line up with the equivalent non-prefixed property. Place the closing brace on a new line } List all CSS properties in alphabetic order. This makes it easy to spot any duplicate or conflicting definitions. 61 OLD MUTUAL GROUP DIGITAL GUIDELINES 09.3 JAVASCRIPT INTEGRATION jQuery is the preferred choice when adding interactive functionality due to its large global use. This ensures continual improvement on the core engine and offers a countless number of components and support found across the internet. Whichever scripting engine is used it should be loaded via an online hosted code repository to minimise load times. All JavavScipt code should be loaded in external files, except on specific cases such as Google Analytics and per component specific needs. All jQuery files and other script files should be added to the footer of the HTML document to ensure that the content loads first and that the larger script files do not clog up the website’s loading. Before deploying run the completed JavaScript code through JSLint to insure code integrity. CODE CONVENTIONS This is a set of coding conventions and rules for use in JavaScript 62 OLD MUTUAL GROUP DIGITAL GUIDELINES programming. It is inspired by the Sun document Code Conventions for the Java Programming Language. It is heavily modified of course because JavaScript is not Java. The long-term value of software to an organisation is in direct proportion to the quality of the codebase. Over its lifetime, a program will be handled by many pairs of hands and eyes. If a program is able to clearly communicate its structure and characteristics, it is less likely that it will break when modified in the never-too-distant future. Code conventions can help in reducing the brittleness of programs. All of our JavaScript code is sent directly to the public. It should always be of publication quality. Neatness counts. 09.4 DOC TYPE AND VALIDATION REQUIREMENTS A strict doctype should be used, with an HTML5 doctype (recommended), and the HTML written following XHTML standards. This ensures compatibilty across browsers and devices by having wellformed HTML, whilst following a forwardthinking approach wide range of applications and future devices. Custom attributes are allowed for jQuery components in specific cases but should be avoided where possible. The HTML and CSS should validate with no errors and only browser-specfic CSS property/attributes warnings are permissible. WHY VALIDATE? If it looks OK in the browser, why bother validating? is a common response to validation. Remember that a website isn’t all about how it looks. A HTML page is made to present data, not visual graphics, so this data should be written correctly to ensure it’s readable by a wide spectrum of people who use the web. These people might not be browsing the same as you, instead of seeing the visual website you’ve designed in 63 OLD MUTUAL GROUP DIGITAL GUIDELINES a browser, they might be hearing the site through a screen reader. An error free HTML page is much more likely to be rendered correctly by a range of browsers, and maintain compatibility with future versions. Not to mention the search engine bots for all you SEO people – You wouldn’t want to put obstacles in their way, a clean and valid page is going to be much easier for the bots to read and scan. There’s also the aspect of professionalism. We see invalid HTML a little like spelling mistakes, although the client probably won’t see a mistake in your code, the idea is still the same. You wouldn’t want to supply a design full of typos or spelling errors, so you shouldn’t really settle for a HTML page full of little validation issues. 09.5 ACCESSIBILITY STANDARDS 12 COMMON HTML MISTAKES 2. MISSING CHARACTER ENCODING Below are some common HTML mistakes that affect accessibility of web content. Review these carefully and be sure to validate your page for proper HTML. All Web pages should define the character set that they are currently using. Though character sets are rather technical, they simply tell the Web browser what set of characters are used in the page. 1. MISSING OR INCORRECT DOCTYPE. The DOCTYPE tells Web browsers what version of HTML your page is using. Technically, it refers to a Document Type Definition (DTD) that basically specifies the rules for that version of HTML. 3. UNSUPPORTED TAGS OR ATTRIBUTES Use of code that is not part of the HTML standards is not appropriate. These include the