{"id":273,"date":"2022-03-30T06:59:32","date_gmt":"2022-03-30T06:59:32","guid":{"rendered":"https:\/\/www.normanbalberan.com\/blog\/?p=273"},"modified":"2022-03-29T09:41:50","modified_gmt":"2022-03-29T09:41:50","slug":"designing-your-website-for-readability-you-hold-the-keys","status":"publish","type":"post","link":"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/","title":{"rendered":"Designing Your Website for Readability: You Hold the Keys"},"content":{"rendered":"<figure id=\"attachment_274\" aria-describedby=\"caption-attachment-274\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-274\" src=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/website-readability.jpg\" alt=\"website readability\" width=\"900\" height=\"675\" srcset=\"https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/website-readability.jpg 1200w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/website-readability-300x225.jpg 300w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/website-readability-768x576.jpg 768w, https:\/\/www.normanbalberan.com\/blog\/wp-content\/uploads\/2016\/11\/website-readability-1024x768.jpg 1024w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-274\" class=\"wp-caption-text\"><center><a href=\"https:\/\/www.flickr.com\/photos\/visualpunch\/7166362645\" target=\"_blank\"><span style=\"font-size: small;\">visualpun.ch \/ Flickr<\/span><\/a> \/ <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\" target=\"_blank\"><span style=\"font-size: small;\">CC BY-SA 2.0<\/span><\/a><\/center><\/figcaption><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#A_Must-Read_for_Lawyers_in_Charge_of_Their_Websites_Copy\" >A Must-Read for Lawyers in Charge of Their Website\u2019s Copy<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#What_do_we_mean_by_design\" >What do we mean by design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Slice_and_dice_your_copy\" >Slice and dice your copy<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Hit_readers_with_a_headline\" >Hit readers with a headline<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Draw_readers_in_with_subheadings\" >Draw readers in with subheadings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Reduce_your_line_length\" >Reduce your line length<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Optimize_font_type_and_size\" >Optimize font type and size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Draw_out_your_call_to_actions\" >Draw out your call to actions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/#Next_steps\" >Next steps<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h5 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"A_Must-Read_for_Lawyers_in_Charge_of_Their_Websites_Copy\"><\/span>A Must-Read for Lawyers in Charge of Their Website\u2019s Copy<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p style=\"text-align: justify;\"><strong>Don\u2019t be fooled by the heading. You don\u2019t need to be a designer to boost the readability of your site.<\/strong><\/p>\n<p style=\"text-align: justify;\">Why? Because most of your site is made up of your copy, your powerful words. Take away the images and colors and all you are left with is text, text, and more text; thousands of words and characters. And who controls the text? Yes, that\u2019s right, you. And what can you do to improve the design of your copy for readability? <strong>Follow these simple techniques.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_do_we_mean_by_design\"><\/span>What do we mean by design?<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Let\u2019s take a step back and consider what we mean by design. <strong>Don\u2019t just think of design as flashy images, diagrams, and colors. Think also of font layout, typefaces, and sizes.<\/strong> These are the things that drive your design. Everything else fits in around this stuff, and they all affect readability. The layout of the text is like the trunk of a tree. <strong>Without a good trunk, there are no good branches and leaves.<\/strong><\/p>\n<p style=\"text-align: justify;\">By all means, <strong>engage a good designer to execute your vision<\/strong>. In fact, it\u2019s a must. Work with that designer to add images to reinforce the text, such as photos, videos, vector diagrams, and pie charts. But these things are just the icing on the cake; they cement your messages in your readers\u2019 minds.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Slice_and_dice_your_copy\"><\/span>Slice and dice your copy<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">Nobody wants to read solid blocks of text. So breathe life into your writing by breaking up your text using <strong>headlines and subheadings.<\/strong><\/p>\n<p style=\"text-align: justify;\">Otherwise, you\u2019ll leave it up to your readers to work out what\u2019s important. <strong>It\u2019s your job to control the reader\u2019s focus and highlight the important stuff, the stuff that makes you different.<\/strong> So draw out your key messages and make it easy for readers to digest and remember.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Hit_readers_with_a_headline\"><\/span>Hit readers with a headline<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Start each page with a big and bold headline.<\/strong> Your headline persuades readers to keep reading. Most people only read the headline, and that\u2019s all. Without one, what do you have to draw readers into your copy? They\u2019ll quickly move on.<\/p>\n<p style=\"text-align: justify;\"><strong>The headline is where you put your most important message.<\/strong> For example, if you are stacking your website with Benefits, put the biggest benefit in the headline. If you are telling your story in your \u2018About\u2019 page, <strong>put the moral of your story in the headline.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Draw_readers_in_with_subheadings\"><\/span>Draw readers in with subheadings<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Set your subheadings to bold and to a larger font size than the body copy.<\/strong> That way, you\u2019ll cater for skimmers and hopefully draw them into wanting more. Combine this with plenty of white spaces in between, and you\u2019ll look clean while effectively compartmentalizing the separate elements.<\/p>\n<p style=\"text-align: justify;\">For example, write a subheading for each benefit on your \u2018Benefits\u2019 page. That\u2019s what Gmail has done. And so has Flipboard. <strong>These subheadings make each of the benefits stand out.<\/strong> As a result, the reader is not left to ponder \u2013 \u201cwhat\u2019s in it for me?\u201d<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Reduce_your_line_length\"><\/span>Reduce your line length<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\"><strong>Make your sentences easier on the eye by limiting the number of characters you put on each line.<\/strong> But break them at the right words otherwise you risk disrupting the flow of the sentence.<\/p>\n<p style=\"text-align: justify;\">See how Apple limits the line length of its copy for the iPod touch and caps the number of characters it uses in a line.<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Optimize_font_type_and_size\"><\/span>Optimize font type and size<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">There are so many fonts to choose from that it can be overwhelming. And what <strong>works in one medium might not work in another<\/strong>. This is a lengthy topic in itself. Many studies claim to have determined the optimal reading fonts for the Internet.<\/p>\n<p style=\"text-align: justify;\"><strong>But the bottom line is: avoid tiny font sizes and hard to read font typefaces.<\/strong> From there, you might choose to stick to the popular online fonts or Google the topic and research for yourself. A well-known study that might come up in your search engine results is \u201c<a href=\"http:\/\/usabilitynews.org\/a-comparison-of-popular-online-fonts-which-size-and-type-is-best\/\" target=\"_blank\">A Comparison of Popular Online Fonts: Which Size and Type are Best<\/a>,\u201d which was completed by the Software Usability Research Laboratory. This may prove of use. <strong>Remember that it\u2019s about readability and not just what looks good.<\/strong><\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Draw_out_your_call_to_actions\"><\/span>Draw out your call to actions<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">If you want your readers to take action after reading your copy, make sure to <strong>tell them what steps they must take<\/strong>. And make those actions stand out from your other text. They need to be unequivocal.<\/p>\n<p style=\"text-align: justify;\"><strong>Often these actions will be placed at the bottom of the page<\/strong>, and the reader will be given a few options to take. From there, your prospects should be directed to exactly where you want them to go. What do you want your prospects to do? To contact you? To move to another page of your website? To ask for a quote? Or to read your blog?<\/p>\n<h6 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Next_steps\"><\/span>Next steps<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<p style=\"text-align: justify;\">This is all pretty simple, isn\u2019t it? But you\u2019d be surprised at how many of your competitors continue to persevere with an old design. Why don\u2019t you buck the trend? You hold the keys. You can boost the readability of your website for readers. <strong>Good design doesn\u2019t just start with a good designer. It starts with you.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Must-Read for Lawyers in Charge of Their Website\u2019s Copy Don\u2019t be fooled by the heading. You don\u2019t need to be a designer to boost the readability of your site. Why? Because most of your site is made up of your copy, your powerful words. Take away the images and colors and all you are &#8230; <a title=\"Designing Your Website for Readability: You Hold the Keys\" class=\"read-more\" href=\"https:\/\/www.normanbalberan.com\/blog\/designing-your-website-for-readability-you-hold-the-keys\/\" aria-label=\"Read more about Designing Your Website for Readability: You Hold the Keys\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":274,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,1],"tags":[193,195,191,194,27,192],"class_list":["post-273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide","category-web-development","tag-fonts","tag-headlines","tag-readability","tag-subheadings","tag-website","tag-website-readability"],"_links":{"self":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":0,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media\/274"}],"wp:attachment":[{"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.normanbalberan.com\/blog\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}