Coloured bars with text accessibility in design

300 million will see this sentence differently: accessibility in design

In many ways, the web is becoming increasingly accessibleAt last count, it was estimated that almost 60 percent of the global population were active internet usersMuch of that’s been driven by the smartphone, social media and other advances in technology that have opened up a world of digital content, communication and experiences to people everywhere. Today, the way we view and absorb content are continuously evolving and diversifying, faster than ever before. That brings new and exciting possibilities but also fresh challengesHow can we ensure everyone, including people with disabilities, can access, enjoy and benefit from all the content we create?  

Accessibility in design is a topic that’s never been more important to marketers and businesses. Let’s look at exactly why that is.

 

More colours, more challenges

For many peopledigital experiences are now more vivid than ever. With new screen technologieswider colour gamut and the introduction of web styling upgradesthe creative options available to designers and developers is as great as it has ever been. 

This means we can push the boundaries of what we thought was possible even further. As exciting as this can be  especially for brands who are looking to gain an edge in the digital space  it can come at a price for customers with a disability. For example, colour blindness affects an estimated 300 million people worldwide – almost as many people as there are in the USAOur design choices don’t just impact on aesthetics and the average user experience – they can be the difference between some users being able to read and interact with our content at all.

 

Standard accessibility guidelines  

In design, executions rest on visual strategies and rules to help guide people through content. So, if we're looking to encourage inclusive design, these executions should comply to certain standards to help people with colour blindness to navigate content. 

The best source for these standards is the World Wide Web Consortium (WC3). They produce a comprehensive overview of Web Content Accessibility Guidelines (WCAG) which cover a whole range of standards for people with different disabilities. They include guidelines to ensure that content covers their 4 areas of accessibility; perceivable, operableunderstandable and robust.  

 

Understanding the guidelines 

The WCAG is always being updated as accessibility regulations are redefined over time. In a digital world, there are three levels of compliance to be met: 

Level A (minimum compliance)  Necessary for all websites that require accessibility. The criteria are:

  • Navigable with a keyboard 
  • No keyboard traps
  • Non-text content alternatives
  • Video captions
  • Meaning is not conveyed through shape, size, colour etc. alone

 

Level AA (acceptable compliance)  The aim for most websitesStandards include: 

  • Colour contrast is at least 4.5:1
  • Alt text or a similar solution used for images that convey meaning
  • Navigation elements are consistent throughout the site
  • Form fields have accurate labels
  • Status updates can be conveyed through a screen reader
  • Headings are used in logical order

 

Level AAA (optimal compliance)  Ensures that websites are accessible to everyone. Some of the guidelines: 

  • Sign language interpretation for audio or video content is available
  • Colour contrast is at least 7:1 in most instances
  • Timing is not an essential part of any activity
  • Context-sensitive help is available

 

Accessibility in action 

Achieving Level AAA compliance can be tricky and is often a requirement for sites that have commitments for everyday services and important engagements, such as banking or government areas which provide essential access for everyone. A good example of a site that's been designed with accessibility in mind is the UK government’s GOV.UKIn their own words: 

The GOV.UK Design System team wants as many people as possible to be able to use this website. For example, that means you should be able to: 

  • Change colours, contrast levels and fonts
  • Zoom in up to 300% without the text spilling off the screen
  • Navigate most of the website using just a keyboard
  • Navigate most of the website using speech recognition software
  • Listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)’

Furthermore, they state that ‘the team has also made the website text as simple as possible to understand. As any copywriter will tell you, that’s not only important for accessibility but a general principle for any content you create.  

 

Our own experiences

At Fifty Five and Five, we've encountered the challenges of accessibility first-handFor instance, during work on a recent project, we discovered that client suffers from a type of colour blindness. This made the accessibility of our designs a significant talking point While exploring initial concepts, some key discussions revolved around colour and contrast of the content, and these were crucial in making sure our solution was accessible. When we discuss colour in particular, we have to accept that colour will appear different from person to person, and the thing that helps people distinguish content is the contrast between the colours chosen.  

What do I mean by that? Let’s look at some examples of how colour can be used in different ways.

 

The difference colour choices can make 

We’ll look at some calls-to-action (CTAs) – which manifest in web pages as ‘buttons’ to be clicked by the user, taking them into different areas of the site, launching contact forms, and so on.  

Accessibility CTA colours

Although this CTA example may look fine if you aren’t affected by colour blindness, the colours here do not meet accessibility guidelines. That’s because the blue used within the button does not pass AA-level compliance for graphical objects against white backgrounds. Th same also applies for the white text on the blue button.

Accessibility CTA colours

This example is an improvement on the first, as the dark blue text now has enough contrast to meet readability guidelines. But, as a whole, the CTA is still not visible on white, so would still be hard to distinguish as a CTA and would still fail AA and AAA compliance for graphical objects

Accessibility CTA colours

This execution is a good example of accessibility compliance. Each colour now has enough contrast against the background it sits on and passes AA and AAA compliance. Although there are other rules around CTAs such as hover stateswe must make sure that our static version is visually available as these are the primary drivers for navigation. This is a great example of perceivability versus readability. The first CTA option would be perceived as easier to read and packs more of a punch using a brighter colour. Whereas the last CTA option is a good example of great readability as it passes accessibility compliance fully.  

 

Always striving for accessibility in design

As our professional and personal lives become increasingly reliant on a digital worldaccessibility will only become more important to people and businesses all over the world. That’s why agencies like Fifty Five and Five – and designers like me  are evermore focused on creating holistic solutions by achieving the kinds of standards I’ve detailed here. Not every business should tune everything to AAA compliance overnight, but even small steps like colour contrast changes are a way of showing we’re starting to bring a focus to an often forgotten part of design.  Keeping all this in mindupholding accessibility standards and best practice can help guide us to a more inclusive digital world.


how to build a landing page

How to build a landing page: your step-by-step guide for product trial sign ups

  • Your complete guide to creating a landing page that will encourage visitors to sign up for a trial of your product
  • What to include and what it should look like

Free software trials are a great way of converting a lead into a customer. Your product is sure to impress, but you need the user to download your software first to see it in action. This is a guide on how to build a landing page that will maximise sign ups for a free trial of your product. In it, we explore the copy and design elements that you should include to engage visitors and increase the likelihood of them trying your product.

Why do I need a landing page?

Your landing page is a form-enabled web page where prospective customers can sign up for your product (or whatever it is you're promoting). For them to make this decision, they need to be well-informed on what your product can offer and how it will benefit them.

When it comes to designing your landing page, the goal is to make it as easy as possible for the visitor to digest this information, take action and sign up.

how to build a landing page

Not only is your landing page useful for generating leads but added analytics can tell you how well it is performing. Analysing this information can help you improve your landing page in the future.

Why are they so hard to get right?

While it can be tempting to squeeze as much information as possible regarding your company and your product, the notion that less is more certainly rings true for landing pages. The more information you have on your page, the longer it will take the visitor to get to the bottom, which is where your sign up form will be. Instead, keep it short and sweet. Leave company information for the rest of your website.

how to build a landing page

Slack makes use of contrasting type to create a hierarchy and a flow for the visitor, leading them to the Get started button.

With brevity being so important, it can be difficult to know what to include in your landing page. Let’s detail what you should include.

How to build a landing page: what to include

You need to consider the hierarchy of content on your landing page. The most important bits of information should be the most visible: either by being placed further up the page or by contrasting against the rest of the content (or both).

Copy

Your landing page copy must communicate your purpose statement and USP (Unique Selling Point). You need to provide a comprehensive and compelling overview of your product and its benefits in as few words as possible. It’s best to use short paragraphs with action-oriented words and clear value statements.

how to build a landing page

Be sure to identify your target audience and cater to their interests, needs and pain points. As a general rule, your landing page copy should include these elements:

  • Headline

Include your USP (Unique Selling Point) and try to grab the visitor’s attention.

  • Sub heading/intro

Use this space to explain how your product solves the visitor’s problem. This section should be no more than 1-2 sentences long, but if you have more to say here, it might be a good idea to supplement it with a bulleted list.

  • The benefits

People generally buy the benefits of using products, rather than the actual product features. Use your copy to demonstrate how the features can create good results and benefits for the reader. Lay them out using easy-to-read bullets and iconography to make the content as easy as possible for the reader to take in.

  • Answers to common questions

If there are any specific questions that are frequently asked by your customers, be sure to include answers to these in your copy. Or if you prefer, add a short Q&A section towards the bottom of your page.

  • Social proof

If your current customers love your product, make sure the visitor knows it! Make use of testimonials and include current clients’ logos. However, be sure to ask for permission from your customers before publishing anything with their name on it.

Images

Images serve two important purposes: to showcase your product and to break up your landing page copy.

Images could include screenshots of your product, showing off its user interface or a particular feature. If you want to display how users interact with the product, you could include animations. There are free-to-use screen recording apps available which are useful for creating this type of imagery, such as ScreenToGif and RecordIt.

Call-to-action

This is arguably the most important part of your landing page – the action that the visitor will take to sign up to your product. The call-to-action (CTA) is typically formatted to look like a clickable button and can feature repeatedly on your page. It is a good idea to include your CTA at both the top and bottom of the page, so the visitor can immediately see the purpose of the landing page and so they have the option to take action when they have taken in all the information.

how to build a landing page

An example of a simple call-to-action by Asana, using contrasting elements to lead the visitor to the 'Try for free' button.

Some tips for your landing page CTA:

  • Keep it consistent

Your call-to-action should look the same wherever it is used, to send a clear message that it will lead the user to the same destination – signing up for your free trial. You want to make sure your CTA is as visible as possible. This can be achieved by making it larger compared to other elements on the page and styled in a contrasting shape and colour.

  • Surface your sign up form

If the sign up process for your trial is fairly simple and requires no more than a form with just a couple of fields, it can be a good idea to embed it right on your landing page, rather than just link to it. Call-to-actions on the rest of the page can link to the part of the page where the form is placed, using HTML anchor links.

  • Call-to-action copy

Your CTA copy needs to be declarative and instructional. By using actionable language that clearly tells the user what they can expect from clicking your call-to-action, and reassuring them of how easy it is to sign up for your trial, you have a much higher chance of converting that visitor into a lead. For instance, “Start free trial” sounds like less work and commitment than “Register for a trial” does.

How to build a landing page: what should it look like?

Designing your landing page so that it looks attractive and professional will capture your visitor’s interest, and designing it with your target audience in mind can help attract and convert your ideal leads. Your landing page needs to be designed to be effortlessly navigated and easy to read to have the most success.

The branding

It’s important for your landing page to match your company brand, so that users can easily make the connection between your landing page and your brand as a whole.

Keep in mind:

  • Your brand colours
  • The fonts you normally use
  • The type of imagery you normally use

Don’t forget to include your logo in at least one place on your landing page, preferably at the top where it’s guaranteed to be seen by your visitor.

The layout

You should again think about the hierarchy of elements arranged on your landing page, i.e. which are the things that need to be seen by the user first? We read web pages from the top left corner to the bottom right corner, so the placement of your elements should reflect that.

Some tips for your landing page layout:

  • Keep it simple

Make it easy for your visitor to follow the track you’ve created for them by getting rid of distractions. For example, consider removing the menu or navigation bar from your regular site, since it can draw attention away from the landing page.

  • Don’t give your visitor extra work

Scrolling is easier than clicking, since it doesn’t involve making a decision and leaving one page for another – keeping everything visible on the page, rather than hiding some of the content behind tabs is a good example. This means that the visitor can see all of the information they need without having to click. The decision to click is left exclusively for the call-to-action; you want to make sure your reader has taken in all the information by that point.

How to build a landing page: getting started

If your website isn’t set up in a way that makes creating new custom landing pages easy, there are a number of tools you can use. These tools can enable you to build your landing page on a separate domain and link it to your domain so that it looks like it’s a part of your regular website. Leadpages and Unbounce are two examples of tools that do this that don’t require any coding skills to use. However, basic knowledge of how your website is set up is needed to implement your landing pages onto your main site.

Don’t have time to create one yourself?

Getting your landing page just right requires time and effort. With dedicated experts for all branches of digital marketing – copy, design, SEO and more – Fifty Five and Five is perfectly equipped to help you create a landing pages that converts.


Fifty Five and Five is a full-service digital marketing agency that specialises in B2B technology. Get in touch with us today to find out more about how to build a landing page or so that we can help you create one for you.

Need a lead-generating landing page?

We can help! Talk to us about your business and the specific barriers you come up against when trying to generate leads.

Get in touch


The four core principles for designing a blog post

  • Introducing the power of visual information on content
  • The 4 key components of a well designed blog
  • Tips on designing your blog to further increase the readability and SEO 

What’s in an image? You don’t have to search particularly far or wide to find articles heralding the importance of using images in your marketing content. Visual information plays a much bigger role in our lives that it did even just five years ago.

Articles like infographics have seen huge surges in popularity, thanks to their ability to parade facts and statistics in appealing, easily-digestible format. But the term ‘image’ can mean much more than just adding pictures to your blogs or tweets – Ernest Dichter calls the concept of an image as one that describes not individual traits or qualities, but the total impression an entity makes on the minds of others.

“It is a most powerful influence in the way people perceive things, and should be a crucial concept in shaping our marketing and communications efforts”

Much like an image, as Dichter puts it, considers the total impression over individual qualities, your blog content cannot rely too heavily on one medium, but should consider the bigger picture. Designing a blog posts shouldn’t be a singular column of text on a plain background, nor should they be clogged with irrelevant images or overbearing charts that mask the actual point you’re trying to make.

To give your blog posts the perfect total impression requires equal acknowledgement of four key principles. In today’s post, we’ll explore these principles; identifying what they entail and how they can boost the readability and engagement of your blog posts.

Four quarters to a wholly engaging blog

1. Formatting

Increasingly, audiences are scanning web content rather than reading word-for-word, as our collective online attention span is on the decline. To combat this, you need to ensure your blog post is formatted as such that it’s as attractive as it is easy to read. Correctly formatted text will offer your reader visual cues for where they should pay attention, making them less likely to drift off… or worse still, leave the page.

Headers

Headers and sub-headers are rule 101 for organising the text of your post. They’re great for breaking up your content as well as informing the reader of the direction the post is heading. Choosing eye-catching or thought-provoking headers – especially the title of the post – are important for drawing the reader in. Asking a question and using alliteration or sibilance are good methods of doing so.

Your audience might not be facing life or death, but choosing one product over another could have a serious impact on their career. Offer them a solution – via your white paper – which will help them understand more about the world, more about your market and more about the options out there.

  • Write down in free form who you think your audience is. Where are they from? What does s/he look like? What is s/he worried about?
  • Also scribble down some ideas about what your reader is looking for. Do they want simple how-to steps, or do they want a detailed technical guide?

Column width

This is an incredibly simple and effective method for improving your blog’s readability. Wide columns of text are harder to read and give the impression of there being more text on the page. Keep your column width to around 100 characters or less, including spaces.

Paragraph length

Shorter attention spans have resulted in shorter paragraphs. Break your text into as small and as manageable pieces as possible without losing the flow of the post. Avoid conveying multiple ideas in the same paragraph, and try not to go over 5-6 sentences.

Fonts

As a general rule, sans-serif fonts are easier to read on-screen than serif fonts. In terms of size: bigger is better (within reason, of course!) When it comes to accenting your text, make sure you don’t go overboard – use bold text to highlight important sentences, but using it too much will dampen its effectiveness.

2. Layout

Information overload is a very real thing. Make sure your blog doesn’t have too much going on at once, as a plethora of images, charts, text, colours and the like can quickly overwhelm your reader.

Headers part II

The visual equivalent of a text headline is a header image or banner. Particularly useful as a backdrop to your post title, header images are a must in modern blog posts, and come with their own set of rules for making sure you choose the right one.

Sidebars

Sidebars help provide additional content for the reader to navigate elsewhere when they’re finished with the post at hand. Previous blog posts, information on the author or contact details are good options to further your reader’s journey on your site. Plus, they can automatically shrink the column width for the body of your post to improve readability.

Colour

There is a lot of ‘research’ that claims specific colours can evoke certain emotions in people, but in truth colour is too dependent on personal experience to be universally translated to specific feelings. There is no doubt, however, that they can evoke a reaction. Choosing a pastel palette – pale blues, greens or yellows, for example – for the background of your post can look good while avoiding the formality (and glare) of a plain white background.

CTAs

A similar but more direct version of sidebar content, calls to action guide your readers along the next steps to take, which path to travel through your website or where to find further information. CTAs have taken the marketing world by storm, with marketers voicing the numerous benefits they can have on your conversion rates, click-through rates, and overall lead generation. Typical examples include links through to additional blogs or whitepapers – “read more about X” – or asking the reader to “sign up to our webinar to find out more”.

3. Visual

So, how you can implement great aesthetics in in your blog posts? We process visual information roughly 60,000 times faster than the time it takes us to decode text. That’s the science behind the power of visuals – simply put, images are a necessity in modern blog content rather than a preference.

Relevancy

So, posts with images are all but guaranteed to perform better than mere walls of text. However, choosing to use images is only as useful as choosing the right ones. When writing for the ‘business world’, there are a multitude of cliché ‘business style’ images to choose from, most of which provide no context or add anything to the text. The trick is balancing relevancy and originality in your images.

Photography

Illustrations or photography: which one do you go for? Photography can give your piece style, and – if using an internal photographer – is the perfect means for originality, but illustrations are often easier to gather and can be applied on a broader scale. Both have their advantages when used correctly.

So, why not both? This is something that is not often seen, so a combination of photography and illustrations can give your post a unique feel and help it stand out.

4. Infographics

Infographics have proved to be an extremely effective method of influencing audiences. Combining statistical figures, images, colour and text, they can express findings in an easily-digestible, attractive and enjoyable format, and are well worth investing in if you have a design team at hand – which is why we’ve incorporated our own infographic elements in this blog post!