In my job as global front-end lead for the L’Oréal WSF program I have worked with many different creative agencies. While some people call me lucky to have this experience, I call it the reason for my grey hair. Cultural differences and fluctuating skill sets cause problems with the delivery of creative assets.
The WSF (Website Factory) program is the new vision for L’Oréal’s digital landscape. L’Oréal is huge and they have an impressive 3000 websites up and running. Most of these websites are quite old and they do not meet the standards of the modern web. They are written in different programming languages and have become hard to maintain. We also like to call them “the black hole of lost money”.
By reducing redundancy the WSF program aims to deliver ~800 high quality websites. All these sites will share the same tech stack. From continuous integration, hosting, CDN, CMS platform to front-end code and its toolsets. Projects have the same foundation while the design and tone of voice are unique for each website.
L’Oréal also has to deal with an increase of one billion visitors from Asia and South America in the coming years. It’s safe to say they need a solid plan to cope with this amount of new users.
Almost all L’Oréal brands are globally represented by different creative partners. Some are tech focused and others are story telling focused, the best partners focus on both. Creative deliveries tend to vary in quality and we never know what to expect.
Some delivery variations we’ve seen (among many others):
- A 150 page, non-searchable pdf document. This was delivered to us 276 times over 6 months. Ouch.
- An Excel file with a list of component names and jpgs for reference.
- Multiple 1GB photoshop files with all pages versions and copy.
- An Atomic Design based delivery in Invision with versioning, specs and comments.
Valtech uses a global approach with squads all over the world to service the L’Oréal WSF program. There is a cultural difference and a skill gap between these teams and their creative partners. With this in mind we’ve created a standardised way to deal with creative deliveries. If you want to know more about how we manage these squads read this.
This post will go into the best practices about working with creative agencies at scale. Happy web developers and business analysts are a very good thing for a project. You’ll see that the rules below are common sense but they’re not always easy to enforce. They can also be applied to smaller teams.
Prerequisites for development
A production team needs some design basics to start their work. Things like a grid, a choice of fonts and a vertical rhythm are important. An amazing design has its rules broken where appropriate. Before breaking the rules you first need a system in place that dictates those rules.
Grids connect different elements to achieve effective hierarchy, alignment and consistency. A grid is a series of lines that divide a page into columns. These columns help designers to arrange content on a page.
Columns, gutters and margins change how they behave based on responsive web design. On big screens you likely scale columns and gutters in percentages based on screen width. On small screens margins might disappear and gutters become a fixed width.
We have found that the optimal amount of columns is twelve. Twelve is dividable in two, three and four and six and is the most component friendly. Make sure the creative agency considered the grid.
Fonts have a complicated history on the web. Browsers used to implement them in different ways and with different file formats. Rendering fonts for the web is a delicate balance between quality and file size. Let’s not dive into the crazy history of web fonts here and get right to the point.
We have found that the font has a big impact on the build process when it is delivered late. Line-heights and vertical rhythm are impacted by changing out a font. Make sure you get the font before the production work starts.
Keep the following things in mind when you receive a font:
- Is the font an officially created web font by a font foundry? If not it might be pirated or it doesn’t render as intended.
- Make sure the font only contains the charset you need for the language of the page. Request localized versions in separate font deliveries.
- Make sure that the font supports ligatures (think about the German ß)
- To avoid FOUT (flash of un-styled text) try to host the fonts on your own server and serve them from your own CDN. This gives you the most control over serving the files fast. Try to find a font license deal where you get the physical fonts without ties to a third party vendor.
- Asian fonts tend to have a small latin charset to serve websites that need some latin characters. Generally these glyphs are terrible. The solution is to load your latin font first and the Asian font second.
The Vertical rhythm is defined by a number that creates the spacing around text elements. This common number is generally derived the line-height property. To keep your layout in rhythm, you need to set the total vertical spacing for each element in proportion to your grid’s baseline measure. This means working in multiples of that value. Use gridlover if you need some extra help.
If you supply the creative agency with real life content the design is more realistic. Having correct content requires a mature client that does their homework. This is always a challenge. Developers should help the client to add good content to user stories. With this the creative agency can use this in their work. The better the content, the more complete the creative delivery. Good content has real copy, real images and multiple languages.
The words “design approach” have a wide ranging meaning. In this case they mean page context versus component context. The tricky thing is that a design is only good when it tells a story on page level.
We tend to work with a big component based CMS systems so we need the assets delivered in components. Delivering components is a challenge as creative minds work differently than technical minds. Based on the maturity of the creative agency we request either Atomic Design or components (organisms in Atomic Design).
Additionally we request a page design to make sure the agency knows how all components fit together.
Naming of elements should be the same across disciplines. Components should be similarly named in user stories, design documents, CSS, unit tests, the CMS interface, documentation, tagging, accessibility reports, bugs and so on. Make sure the creative team is aware of the naming conventions set by the production team.
To be sure a creative direction works the production needs a component in multiple states.
Where applicable the following points need to be addressed:
- Does the component scale with content edge cases (too much or too little copy; a video without a poster or a product without s buy button)
- Does the design scale with different Languages? (German has long works without spaces)
- Does the component work in RTL?
- Are :hover, :focus and :active states delivered?
- Are there any fixed heights anywhere? If so, make sure that there is a solid reason for this. Fixed heights always give issues with content or localisation.
- Is there a design system for spacing around components? If not, make that happen. We generally see issues with spacing between components at the midpoint of a project. We always loose time.
The most important part of the delivery of creative assets is that it doesn’t happen by emailing physical files around. The naming of files is always a challenge. Examples of filenames (I corrected the spelling mistakes in the filenames):
01/02/2018-desktop-homepage-herobanner-sprint1-FINAL-V1.psd 08/02/2018-desktop-homepage-herobanner-sprint1-FINAL-V2.psd 12/02/2018-desktop-homepage-herobanner-sprint1-FINAL-FINAL.psd
Next to inconsistent naming it is hard to keep track of files in folders. PSD files often have either ‘layer comps’ or folders that show different states of the design. It requires too much brainpower of business analysts and developers to stay up to date with the state of the design.
Use a tool like Invision, Zeplin, Sketch cloud or Figma to deliver work. Most of these tools allow you to sync your local designs to the cloud where you can organize the delivery. In a special interface the designs can be tagged, arranged, versioned, commented on and inspected by developers. Gently force the creative agency to deliver their work in a tool that is design to deliver creative assets.
Some quick tips for when a design is delivered in one the the tools mentioned above:
- Are the content image assets extractable/downloadable?
- Are icons extractable and in SVG?
- Are the layers understandable?
- Are all design elements inspectable? Sometimes designers merge layers so the individual items are no longer available.
If Accessibility (a11y) is not death with creatively it becomes a bottleneck in production. Not following a11y best practices burns time as more creative work has to be done during development. Teach the creative agency about the a11y basics so the back and forth stays at a minimum.
A11y issues we see all the time
This is a simple list of things we see most often. A11y is subjective and I will therefore not go too deep into each item.
- Text over images is used without providing sufficient contrast between text and background.
- Colour Contrast ratios not correct
- Wrong sizes for buttons, links, editorial copy
- Auto playing videos / carousels
- Wrong usage of alternative texts or descriptive elements for images and videos.
- No focus / active states on buttons / links
- No skip to content button
- No skip list buttons
In 2019 we see more focus on a11y but also more workarounds. We have inaccessible websites that get away with it because they have an ‘accessibility switch’. This is the answer to most creative accessibility problems:
Images are generally complex subject. These are common questions:
- How to crop them so they work in a design but stay meaningful
- How to make them responsive
- How to optimize them
What most people never think about is media accessibility. The one we all know is the alternative text to images. Beyonce was once sued for a LOT of money due to a wrong alternative texts on images and bad dropdown menu’s.
But what we almost never consider is colorblind people. What if you have ‘Achromatopsia’ and you need to select a color for a lipstick or a t-shirt? Alternative texts or colour indicators are important in a design.
An alternative to explaining what is on the screen is adding color blindness helper filters to images. Cloudinary has amazing tools which add different patterns to color groups.