Reading time 5 min

Stijn Schutyser

People don’t really read online. Instead, readers ‘scan’ web content for useful bits and pieces. If you truly want to cater to your website’s visitors, you should make their lives as easy as possible. How? By making your texts as scannable as possible and making it easy for your readers to find the information they are looking for. In this blog post, I’ll tell you the best ways to do that, give you some concrete tips from our own web designers and copywriters, and give you a checklist to see whether your website is as scannable as possible. Paper vs. screen If you write texts for websites, you should probably take into account that your reader reads very differently on a screen compared to on paper. Like I said, readers scan a lot more on tablet, smartphone and pc screens . If they do decide to really read something, they do so 25% slower compared to reading on paper . Reading tests also revealed that reading on a screen is more tiring and that readers tend to remember less from what they’ve read. Use screen fonts Screens and paper handle the legibility of letters differently. Microsoft fonts such as Verdana (instead of Arial) and Georgia (instead of Times New Roman) are designed specifically for screens by Matthew Carter . The Dutch Lucas de Groot designed the Calibri screen font for Windows Vista. For your online writing, it’s best to choose a font that has been designed for screens instead of paper . Define what the most important information or task is Why do people visit your website? Check your website statistics (through Google Analytics , for example) or log files and think about the following questions: How do people navigate to your website? Referral, organic search, social media, …? What are your most popular pages? From what pages do people leave your website? Where do they stop reading? Find out what the most common pieces of information are that visitors are looking for on your website and make that information easiest to find. For example, people usually call a school to tell them their kid feels sick. The school’s homepage might include something like this to cater towards their audience then: Will your child be absent from school? Call or send a text to [phone number] before 8:30 AM. Don’t forget to mention: your child's full name, class reasons of absence. Thank you! This is much more informative than a homepage that starts with ‘Welcome’, which doesn’t really help out with your SEO (Search Engine Optimization) either. It’s important that every single one of your web pages displays the call to action as clearly as possible, e.g. click a button. Visitors want to get started immediately, so make the most important information or task stand out . Make your web content as scannable as possible The internet is a quick search medium, pretty neat for whoever needs to look something up quickly. But ill-considered web content gets lost quickly, both in search engines and in the reader’s mind. More than on paper, the reader needs short pieces of text, titles and white space. A title summarizes a whole paragraph in just a couple of words. Your titles should be informative and include the most important information. Something important is of course what the reader thinks is important or what they are looking for, not necessarily what you think is important . This provides the reader with structure and makes your text much more scannable. Other significant information should be in headings, photos and captions, short paragraphs, buttons and links. You can also use bullet lists like the one above. Arrows are particularly useful for highlighting something important. Numbers in digits work better than numbers in words. To make your web content more scannable, write 100% instead of one hundred percent. Numbers are more striking than words. 7 tips from the ACA web designers and copywriters Limit your web page length to 3-5 screen lengths If your web content is longer and all information is relevant, consider altering your website’s structure and adding more web pages. Say the most important things first Web surfers look at the left side of their screen for 70% of the time. A visitor glances over your web page roughly in the shape of an ‘F’: they start at the top left, then look at the top right, go down from the left and next glance at the right again somewhere in the middle (see heat map to the right). It’s worthwhile to put the most important information at the top left of the page and less important information towards the bottom right of the page. Write your web text from short to lengthy The first paragraph should be the shortest. The reader will only continue to read the other, longer paragraphs if this one is interesting enough. Mind the imagery Pictures, hyperlinks, bullets, … Provide one absolute eye-catcher and at most 7 visual accents per web page. Take the text-to-imagery ratio into account and the fact that text to the right or under a picture gets read much more than other texts. Provide contrast between text and background color For paper, it’s black on a white background. On a screen, however, this is too taxing for your eyes. Dark grey on a white background is a much better option. One line should include 75 symbols or less, including spaces A sentence should never be smeared over more than 2 lines. The amount of lines per screen length should be 23 or less. A line should contain about 75 symbols or less, which comes down to about 12 words per line. Links should tell readers what they do Don’t use ‘Click here’ links, but rather use ‘Click here to learn how to write reader-friendly emails’. Use buttons for actions like searching and registering, and hyperlinks to navigate to other pages.

Reading time 6 min

Stijn Schutyser

Robin Williams – no, not that one – is one of the most interesting authors about text and layout design. Her book , The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice , is a true gem. In the book, she explains the 4 basic rules for effective graphical design: c ontrast, r epetition, a lignment and p roximity ( CRAP ). In this blog post, we’ll go over those 4 basic rules and how you can easily implement them in your layout design. I’ve already taught you how to write scannable web content , but that blog post didn’t cover the layout of texts all that much. So let’s set the record straight! While scannability in a text itself is key, it is also closely tied with the layout of the text. After all, a text that’s a joy for the eye is a text that is inviting to be read! 1. Contrast Let’s start with the first rule for effective layout design: contrast. If elements on your page (such as type, color, size, shape and so on aren’t identical, let them differ extremely from each other. Don’t be a wimp. Let contrast shine! A good example is the size of the letters in a newspaper headline versus the ones in the article itself. In contrast (see what I did there?), a headline typed in Constantia 11 above an article in Constantia 10 doesn’t show enough difference between the two, making it difficult to differentiate. So how do you add contrast to your page? Contrast can be created in many ways. You can contrast large type with small type, a graceful oldstyle font with a bold sans serif font, a thin line with a thick line, a cool color with a warm color, a smooth texture with a rough texture, a horizontal element (such as a long line of text) with a vertical element (such as a tall, narrow column of text), widely spaced lines with closely packed lines, or a small graphic with a large graphic. Again, don’t be a wimp. You cannot contrast 12-point type with 14-point type, you cannot contrast a half-point rule with a one-point rule and you cannot contrast dark brown with black. Get serious! Contrast is crucial to the organization of information (its scannability): a reader should always be able to glance at a document and instantly understand what’s going on. The information in this resume is all there, but it doesn’t look inviting to read and it doesn’t grab your attention. In this example’s layout, there is a lot more contrast, which improves its scannability enormously. 2. Repetition The second rule of effective layout design is the rule of repetition. It states that you should repeat some aspect of the design throughout the entire piece . Repeating visual elements in your brochure, newsletter or blog post helps to develop a structure and strengthens the feeling of a unified piece of content. The repetitive element may be a bold font, a thick rule (line), a certain bullet, design element, color, format, spatial relationships, etc. It can be anything that a reader will visually recognize. You can think of the rule of repetition as a reminder to stay consistent. When you get to the end of the information on this card, your eye just kind of wanders off. Now when you get to the end of the card, your eye bounces back and forth between the bold type elements. That’s the point of repetition — it ties a piece together and provides unity. Het It’s like accenting your clothes: if you wear a black outfit, you might accent it with jewellery and shoes in the same shade of red. However, be careful to not repeat an element so often that it becomes annoying or overwhelming. Think of rule #1 and be conscious of the value of contrast! For instance, if you wear the same black outfit, but now with a red hat, red earrings, a red scarf, red shoes, and a red coat, the repetition would not be a stunning and unifying contrast: it would be overwhelming and the focus would be confused. 3. Alignment Nothing is ever allowed to ‘just end up’ on your pages, no matter the medium you’re writing for. Every element should have a visual connection with another element on the page. This way, you create a fresh and clear look and feel. When items are aligned on the page, the result is a stronger cohesive unit. Even when aligned elements are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind. Although you might have separated certain elements to indicate their relationships (using the rule of proximity ), the rule of alignment is what tells the reader that even though these items are not close, they belong to the same piece. The elements on this card look like they were just thrown on and stuck. None of the elements have any connection with another element on the card. Some items are left-aligned, some are right-aligned and others are centered. By moving all the items on the card over to the right and giving them one alignment, the information is instantly more organized (also because they’re grouped together). The text items now have a common boundary which connects them together. Avoid using more than one text alignment on the page. For example, don’t center some text and right-align other text. 4. Proximity Items on your page that belong together or have a connection in one way or another, should always be close to each other. Remember: proximity implies a relationship. That applies to people in relationships, for words in a sentence and for headlines and bodies in a text. That also means that items or groups of information that are not related to each other should not be in close proximity to other items. This gives your readers an instant visual clue to the organization and content of your page. Let’s take a simple example to illustrate the rule of proximity. I’ve put 2 lists below, both containing the same information. What do you assume about the flowers on the first list? Probably nothing much, right? What about the flowers on the second list? It appears that the last four flowers are somehow different from the others. You understand this instantly. And you understand it without even being conscious of it. You know the last four flowers are somehow different because they are physically separated from the rest of the list. 🚀 Takeaway Rarely is only one rule the only answer to a page. The other three rules are intrinsic to the design process and you will usually find yourself using all four. But take them one at a time. It’s a good idea to start with proximity first and then go from there. C ontrast: If elements on your page (such as type, color, size, shape and so on) aren’t identical, let them differ extremely from each other. R epetition: repeat some aspect of the design throughout the entire piece, such as bold font, a thick rule (line), a certain bullet, design element, color, format or spatial relationships. A lignment: every element should have a visual connection with another element on the page. P roximity: items on your page that belong together or have a connection in one way or another, should always be close to each other. I hope these 4 rules serve you as well as they do me. Apply them to your layout design and watch how it improves them! 💩

Reading time 3 min

Ibn Renders

Y ou can’t design or develop something for all 7.9 billion people on the planet. So when we start a project, we decide on a target audience to narrow it down. From there we build our features and designs in a way that seems fitting for that audience. However, what we can’t narrow down on are the accessibility features. Everybody needs to have the possibility to use or experience your said creation. Some devices have built-in features like Google Talkback , where your device can tell you what’s happening on screen and even use that information with a digital braille reader. Or sometimes we make sure our platforms are accessible to use, such as our website, which by the way has a Google Lighthouse accessibility score of 98! But why stop there? Every piece of content should be accessible for everyone. This also counts for PDF files. Get started with these 3 tips we’ve gathered using a MediMarket Case Study : Do an accessibility check with Acrobat Pro First things first: do an accessibility check with Adobe Acrobat Pro. This check immediately indicates in a clear list which issues you need to face. Some of these issues can be solved directly in Acrobat Pro, and others require you to go back to your source file or check manually. You can gather a bit more knowledge by clicking the Autotag Document option. This will read the PDF and give you another accessibility summary about missing alt text, but more about this later. Realize the importance of the reading order Ever heard a screen reader freak out because it doesn’t understand your reading order or structure in the PDF file? Well, imagine someone talking way too fast, without stopping and without any clue what they want to say. Sounds chaotic, right? Now think about the users that really depend on these types of digital aids. Your PDF is basically useless when this happens. So be certain you have a structured document with the right identity headings, paragraphs and sections when creating the PDF. Want to add this to an existing PDF? With Acrobat Pro, you can read the reading order later thanks to their accessibility options. In this screenshot you can clearly see what the screen reader will read first, second, third and so on. Did you know Alt Text is also possible in PDF files? Is this the surprise of the day, or did you never bother to add an alternative text in your documents? Well, start by adding alt text on images or interactive fields. A screen reader can’t read your JPEG files and you need to explain what is shown to them. Don’t overdo it though, your user doesn’t really need to know you added that cute cat photo as filler. Don’t do this just with images. Audio and video elements are also in need of alt text. This isn’t only necessary for users with bad eyesight or hearing, but also for users with bad internet connection who only can download the text of your PDF. There is a lot more to this, but these 3 tips can certainly get you started! However, what I really wanted to achieve with this blogpost is that you start thinking about making all your content more accessible. Do you want more information about accessibility, for example in mobile applications? Go to our services and see for yourself what we can help you with!