{"id":72666,"date":"2019-11-09T04:18:20","date_gmt":"2019-11-09T11:18:20","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/"},"modified":"2019-11-09T04:18:20","modified_gmt":"2019-11-09T11:18:20","slug":"what-newspapers-can-teach-us-about-web-design","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/","title":{"rendered":"What Newspapers Can Teach Us About Web Design"},"content":{"rendered":"What Newspapers Can Teach Us About Web Design<\/title><\/p>\n<article>\n<header>\n<h1>What Newspapers Can Teach Us About Web Design<\/h1>\n<address>Frederick O’Brien<\/address>\n<p> <time datetime=\"2019-11-08T11:30:00+00:00\">2019-11-08T11:30:00+00:00<\/time><time datetime=\"2019-11-08T11:30:00+00:00\">2019-11-09T11:06:56+00:00<\/time><\/header>\n<p>It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today <a href=\"https:\/\/www.smashingmagazine.com\/2018\/05\/future-of-web-design\/\">developers have a formidable range of features at their disposal<\/a>. This makes for a forward-thinking, innovative space \u2014 as it should \u2014 but also one at risk of being unrooted. Every art has its ancient masters. In the case of websites, it\u2019s newspapers.<\/p>\n<p>When you dig into the basic principles of news design, overlaps with the web are frequent and oftentimes indistinguishable. Many web design best practices can be traced directly back to news design. When it comes down to it, websites are made for users to engage with, and hopefully return to. Newspapers have been playing that game for centuries, and winning.<\/p>\n<p>Anyone with even a passing interest in web design stands to benefit from knowing how news design works, and why it works. This piece will examine several tenets of newspaper design and show their connection to best practice online. At the core of that connection is a principle childlike in its simplicity, one newspaper and web designers alike would do well to remember.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Hold The Home Page<\/h3>\n<p>Newspapers have been around since the 17th century. They\u2019ve worked hard for their rules, and because their content changes daily the rules have to be abstract. Ninety-five percent of what we see in any given newspaper will not be there the next day. It is what don\u2019t see that is essential for wrangling the contents of newspapers into shape.<\/p>\n<p>This framework is what we\u2019ll be looking at; some of the invisible rules that hold newspapers together. They are concerned mainly with form, and how readers process information. The parallels with web design will soon become clear, and hopefully the lessons too. Let\u2019s start with an obvious one \u2014 above the fold.<\/p>\n<h4>Above The Fold<\/h4>\n<p>If you\u2019ve worked on the web you\u2019ve likely heard the phrase \u2018above the fold,\u2019 meaning the content you\u2019re met with when you land on a web page. It is a newspaper term, and it dates back centuries. Due to their size newspapers are often stacked folded in half, so above the fold literally means the content visible above where they\u2019re folded in half. It is the first thing potential readers see. It is often the one and only chance to make an impression, to get people to buy a copy because they just <em>have<\/em> to know more. If the newspaper isn\u2019t worth picking up for the front page, what reason is there to think it\u2019s worth picking up at all?<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/1-moon-landing-front-page.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/1-moon-landing-front-page.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Cover of The New York Times, 21 July, 1969\"><\/a><figcaption>\n I\u2019d buy that for a dollar! Credit: <a href=\"https:\/\/www.nytimes.com\/\">The New York Times<\/a>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b96d33d8-29ee-449d-acc1-48eae4e294a9\/1-moon-landing-front-page.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>The space above the fold is the domain of the lead story, the most important piece of information in the entire paper. It has to hook the reader. This usually equates to big headlines, key pieces of information, and striking imagery. That said, there is not a rigid format. Whatever grabs people\u2019s attention without distorting the truth is on to a winner.<\/p>\n<p>Above the fold is a newspaper\u2019s first and most important answer to \u2018the pub test\u2019 \u2014 what you\u2019d blurt out if you were telling someone the crux of the story in the boozer. If you had the chance to tell your friends men walked on the moon yesterday, you probably wouldn\u2019t open with the brand of shoes involved. You\u2019d sprint in and yell, \u201cMen have walked on the moon!\u201d That\u2019s above the fold. It\u2019s where newspapers condense the most important story (or stories) of the day to the key points.<\/p>\n<p>The same applies to websites, which no doubt is why the terminology has carried over. \u2018Above the fold\u2019 in web design (which online means what you see before scrolling) is the website\u2019s answer to the pub test. What\u2019s the single most important thing people should know? Though this is particularly relevant to home pages, it applies everywhere.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/2-apple-above-the-fold.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/2-apple-above-the-fold.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Apple website homepage\"><\/a><figcaption>\n Three guesses what Apple wants you to know about right now. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/69d7aa48-1479-4bb3-9c58-d0e98b3f7244\/2-apple-above-the-fold.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>According to <a href=\"http:\/\/blog.chartbeat.com\/2013\/08\/12\/scroll-behavior-across-the-web\/\">a study of 25 million browsers last year<\/a>, \u2018above the fold\u2019 is comfortably the most viewed part of a web page, with engagement peaking just below. From news to ecommerce to social media, the same principle applies: get to the point.<\/p>\n<p>If you\u2019d like to read more above the fold and front pages generally, <a href=\"https:\/\/www.newseum.org\/wp-content\/uploads\/2014\/08\/education_resources_frontpageposter.pdf\">Newseum\u2019s Front Page poster<\/a> is a good place to start.<\/p>\n<div><\/div>\n<h4>The Gutenberg Principle<\/h4>\n<p>So you\u2019ve grabbed someone\u2019s attention. Congratulations. You\u2019ll need to know about the Gutenberg Principle \u2014 or Z-pattern. Championed by \u2018the father of newspaper design\u2019 Edmund C. Arnold (more on him later), the Gutenberg Principle is a good rule of thumb to follow when thinking about how people engage with a page of content, be it paper or pixels.<\/p>\n<p>The Gutenberg Principle states that when faced with homogenous content, we start at the top left hand corner and finish at the bottom right hand corner, flicking from right to left as we go. This stems from an idea called reading gravity. We in the western world spend our lives reading from left to right, flicking down and to the left to get to the start of the next line. Newspaper design tends to ape that flow.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/3-gutenberg-diagram.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/3-gutenberg-diagram.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Gutenberg diagram\"><\/a><figcaption>\n The Gutenberg diagram, courtesy of Steven Bradley. (Read his Smashing Magazine article <a href=\"https:\/\/www.smashingmagazine.com\/2015\/04\/design-principles-compositional-flow-and-rhythm\/\">here<\/a>) (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/200edbe9-9235-44c8-851d-11ece37007da\/3-gutenberg-diagram.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Take the <em>New York Times<\/em> front page shown earlier for example. Your eyes zig-zag with each line. Where does your eye flick after \u2018PLANT FLAG\u2019? Almost certainly to \u2018Voice from Moon.\u2019 Breaking this flow tends to be jarring for readers because it\u2019s at odds with a lifetime of reading habits. How often do you see the lead story hugging the right hand side of the page rather than the left? Not often.<\/p>\n<p>The same flow applies to web design. <a href=\"https:\/\/www.smashingmagazine.com\/2015\/04\/design-principles-compositional-flow-and-rhythm\/\">Steven Bradley\u2019s <em>Smashing Magazine<\/em> article on compositional flow and rhythm<\/a> explores the principle in an online context, and certainly deserves a read, but I would add that there\u2019s huge value in looking at its application in print. This is a principle that was being applied for decades before the world wide web came along, after all. Any given shortlist of <a href=\"https:\/\/www.snd.org\/\">Society for News Design<\/a> finalists will be a masterclass in content flow. Here are <a href=\"https:\/\/www.snd.org\/2017\/04\/best-of-news-design-snd38-worlds-best-designed-newspapers\/\">some recent winners<\/a> to whet your appetite.<\/p>\n<p>Now to be clear, reading gravity isn\u2019t quite as binding as, say, gravity. The eagle eyed among you may have noticed the qualifier that this applies mostly to \u2018homogenous\u2019 content. What\u2019s more, it isn\u2019t based on something innate in human nature \u2014 it\u2019s guided by language. In languages that read right to left (Arabic for example) the same principle applies, but it is flipped.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/4-al-ghad-newspaper-front-page.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/4-al-ghad-newspaper-front-page.png?w=900&ssl=1\" sizes=\"50vw\" alt=\"Cover of Al Ghad newspaper\"><\/a><figcaption>\n Right-to-left languages provide a mirror image of western newspaper layouts. Credit: <a href=\"https:\/\/www.atrissi.com\/\">Tarek Atrissi Design<\/a>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a08e34c5-40d2-46a7-a646-bbc8728ee4e0\/4-al-ghad-newspaper-front-page.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>This mattered less in the day of print. Papers were generally limited to a geographical region and could reflect the primary language of that region\u2019s audience. In the online realm anyone, anywhere could be visiting your website, so it\u2019s not only valuable to understand the Gutenberg Principle, but to design websites that change shape depending on the language they\u2019re being read in.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/5-al-jazeera-english.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/5-al-jazeera-english.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Al Jazeera website homepage - English\"><\/a><figcaption>\n (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/ca5bac5b-c17a-45fb-ab86-1183eb68626f\/5-al-jazeera-english.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/6-al-jazeera-arabic.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/6-al-jazeera-arabic.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Al Jazeera website homepage - Arabic\"><\/a><figcaption>\n Al Jazeera flips its content based on the language it\u2019s viewed in. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75588c33-362d-479c-b438-baa0a345d4c4\/6-al-jazeera-arabic.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>The Gutenberg Principle is not the only way people engage with content. <a href=\"https:\/\/www.nngroup.com\/articles\/text-scanning-patterns-eyetracking\/\">Eye tracking studies<\/a> have shown F-shaped patterns are also common online, for example, with more and more \u2018hopping\u2019 the further down the page readers go.<\/p>\n<p>These patterns are all useful to know. They are not rules, just trends. Strong news design does not blindly adhere to the Z-pattern come what may; it uses it as a foundation. The same is true for web design. If in doubt, remember it, but don\u2019t worship it. The human eye has an ingrained reading gravity, but great design leads rather than follows.<\/p>\n<p>The adaptability of the web opens up amazing new possibilities for content presentation. The lessons of the Gutenberg Principle are starting points which can and should be played around with. The best rule breakers usually know exactly what the rules are.<\/p>\n<p><em>For more information on the Gutenberg Principle follow the links below:<\/em><\/p>\n<ul>\n<li><a href=\"http:\/\/people.sunyit.edu\/~lepres\/thesis\/principles\/119_pdfsam_POD.pdf\">The Gutenberg Principle explained by the SUNY Political Institute<\/a><\/li>\n<li><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/understanding-the-z-layout-in-web-design--webdesign-28\">Understanding the Z-Layout in Web Design<\/a> <em>by Brandon Jones<\/em><\/li>\n<\/ul>\n<h4>Nameplates<\/h4>\n<p>Every newspaper has a nameplate. It\u2019s just about the only thing you can guarantee won\u2019t change from edition to edition. It\u2019s the bit at the top (or very occasionally, along the side) of the front page, and comprises of the publication\u2019s name and logo.<\/p>\n<p>A lot of these are iconic in their own right. The nameplates of publications like <em>The Washington Post<\/em> and <em>The Sun<\/em> are seared into the public consciousness. Nameplates are the branding, the bit that says, \u2018We\u2019re not that other newspaper. We\u2019re <em>this<\/em> newspaper.\u2019 It communicates who you are and what you\u2019re about.<\/p>\n<p>It also serves as a kind of directory. Newspapers often have teasers in their nameplates, pointing readers to stories that don\u2019t quite warrant a spot on the front page, but are still worth knowing about. It\u2019s a key player in the above the fold game. Stick around. Keep reading. There\u2019s something here for you. Keeping in mind the Gutenberg Principle, the nameplate is likely the very first thing readers will see.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/7-nameplate-collage.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/7-nameplate-collage.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Nameplate collage\"><\/a><figcaption>\n Newspapers and websites alike understand the value of nameplates for both branding and navigation. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d3ee0a40-d2ca-4f66-87ac-ac999d3dbdf1\/7-nameplate-collage.PNG\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Practically every website has a nameplate, only on websites we call it the header. <em>Smashing Magazine<\/em> has one, Amazon has one, Facebook has one. It\u2019s weird for a website <em>not<\/em> to have one, and for it not to appear on every page. On the web every page has to have a bit of the front page about it. A lot of users arrive at a site via the root domain, but a lot don\u2019t.<\/p>\n<p>This is one reason why nameplates online tend to be busier than their print elders. They are able to do more, which is just as well given more is asked of them. But in news and web design the underlying purpose of the nameplate is the same: get the brand front and centre and guide users to something they\u2019ll care about.<\/p>\n<div><\/div>\n<h4>Grid Systems And Content Blocks<\/h4>\n<p>Newspapers are pure content. From cover to cover, they are packed with information, information which needs to be well organised and well presented. The grid system is foundational to newspaper design. As water shapes itself to a bowl, news content shapes itself to grid systems.<\/p>\n<p>Columns are the most important element of this. Depending on a newspaper\u2019s format (tabloid, broadsheet, etc.) it might have anywhere from four to fourteen columns. It is rare for the content of newspapers not to shape themselves to these columns one way or another. Text flows down a column then resumes in the next one. Images can span multiple columns, especially if they\u2019re eye-catching.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/8-dagbladet.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/8-dagbladet.png?w=900&ssl=1\" sizes=\"50vw\" alt=\"Front page of Dagbladet newspaper\"><\/a><figcaption>\n Early publications, like this 1905 edition of Norwegian newspaper Dagbladet, often stuck very closely to their grid systems. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a583d70b-3e37-48a9-a788-85f114cadae4\/8-dagbladet.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Newspapers have evolved beyond the strangely rigid stream of consciousness affairs you\u2019ll find in earlier efforts like those above. Now it is generally accepted that newspaper content should be organised in blocks, with each story forming its own box. This is called modular layout, and there are several reasons why it is the standard.<\/p>\n<p>First, it is easier to organise. If every story fits in a clean, tidy space, they can be rearranged with relative ease. When you\u2019re trying to fit dozens (or hundreds) of stories into a finite space with the clock ticking, this is a godsend.<\/p>\n<p>Second, it is clearer. Good information is only worth so much when it\u2019s presented badly. Blocks create pages within pages, where each piece of information is distinct and easy to follow.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/9-modular-layout.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/9-modular-layout.png?w=900&ssl=1\" sizes=\"50vw\" alt=\"Modular layout in The Guardian newspaper\"><\/a><figcaption>\n Modular layout in action in The Guardian. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7247b3ee-67d8-4677-9904-7f241be66fb8\/9-modular-layout.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>These standards have always played a role in web design, but they are particularly useful to understand now we have <a href=\"https:\/\/www.smashingmagazine.com\/2016\/11\/css-grids-flexbox-box-alignment-new-layout-standard\/\">CSS Grid<\/a> at our disposal. Not only do newspaper grid systems offer guidance for arranging content neatly and clearly, they show how content blocks interact with each other, and with advertising. The wrong alignment can look very silly indeed, while the right arrangement is a joy to read.<\/p>\n<p>As ever, there are differences. For example, online there are rarely jumps (when you reach the bottom of a column and continue reading at the top of the next one) because web pages can go down indefinitely. This kind of layout generally makes less sense online because it leads to readers scrolling up as well as down to get through a single piece of content, which is pretty counterintuitive. <a href=\"https:\/\/www.smashingmagazine.com\/2019\/01\/css-multiple-column-layout-multicol\/\">As Rachel Andrew demonstrates<\/a>, jumps can be just the thing for listings and small amounts of content, but the practice is generally a product of print\u2019s physical limitations. The main value of jumps in web design may well be for stacking blocks of content, rather than organising copy.<\/p>\n<p>What\u2019s more, both in print and online abandoning the grid system can be striking in its own right. Just as Dada art recoiled from aesthetic norms of the early 20th century, so do <a href=\"https:\/\/brutalistwebsites.com\/\">brutalist websites<\/a> invert the grid system to offer something more\u2026 unconventional.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/10-dada-print.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/10-dada-print.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Dada print by Theo van Doesburg\"><\/a><figcaption>\n A Dada print by Dutch artist Theo van Doesburg. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/08e32a48-f5f1-42f2-bd02-7c68e8663560\/10-dada-print.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/11-yale-art-school.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/11-yale-art-school.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Homepage of the Yale School of Art\"><\/a><figcaption>\n Yale School of Art sticking it to the man, man. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/97670f32-66ca-48ca-a506-54ac0110deb9\/11-yale-art-school.PNG\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>As noted already, to break the rules first you need to know them. For this and everything else, Tim Harrower\u2019s <a href=\"https:\/\/archive.org\/details\/newspaperdesigne00timh\/page\/n7\"><em>The Newspaper Designer\u2019s Handbook<\/em><\/a> is a superb place to start. For a more sweeping introduction, Carrie Cousins\u2019 <a href=\"https:\/\/designshack.net\/articles\/layouts\/utilizing-grids-in-print-design\/\">Utilising Grids in Print Design<\/a> over at <em>Design Shack<\/em> is excellent.<\/p>\n<p>And how much does this all matter when you move over to the web? Well, more and more. CSS properties like Grid, Shapes, and Flexbox makes it easier than ever to both follow <em>and<\/em> break the rules of the grid system. Just as newspapers routinely venture outside the invisible lines of their wireframes, so too can websites push the boundaries of their own medium.<\/p>\n<p>In his book <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/art-direction-for-the-web\/\"><em>Art Direction for the Web<\/em><\/a>, Andy Clarke dives head first into the lessons of print media (and others), showing how advances in CSS can add whole new dimensions to the grid system. <a href=\"https:\/\/stuffandnonsense.co.uk\/blog\/a-memo-to-product-and-website-designers\">As Clarke himself puts it<\/a>:<\/p>\n<blockquote><p>For years we\u2019ve told each other the web isn\u2019t print. We\u2019ve told ourselves the things we admire in other design media cannot \u2014 and sometimes should not \u2014 be used online. We needn\u2019t think that anymore.<\/p><\/blockquote>\n<p>Hear, hear.<\/p>\n<p>For more inspiration, <a href=\"https:\/\/noti.st\/jensimmons\/GUfxi4\">watch Jen Simmons live code a print layout in CSS Grid at Smashing Conference 2019<\/a>. Beautiful. And for a more in-depth history of the grid system and its usage, check out this <a href=\"http:\/\/www.thegridsystem.org\/pdf\/grids_are_good.pdf\">\u2018Grids Are Good\u2019 presentation by Khoi Vinh and Mark Boulton<\/a>.<\/p>\n<h3>Look Forward\u2026 But Look Backward First<\/h3>\n<p>The conventions above were forged by decades \u2014 in some cases centuries \u2014 of experience, and there\u2019s plenty more where they came from. What they all essentially boil down to is understanding content, and how people are likely to engage with that content.<\/p>\n<p>Newspapers at their best follow a cartoonishly simple principle: present information in ways that are as clear, as attractive, and as accessible as possible. That\u2019s a worthy goal for any website. And don\u2019t take my word for it. These ideas were championed by Edmund C. Arnold, the aforementioned father of modern newspaper design.\u2019 Arnold designed or redesigned hundreds of newspapers during his career, including <em>The Chicago Tribune, The Boston Globe, The National Observer,<\/em> and <em>Newsday<\/em>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/12-edmund-c-arnold.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/12-edmund-c-arnold.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"Portrait of Edmund C. Arnold\"><\/a><figcaption>\n Edmund C. Arnold, \u2018the father of modern newspaper design.\u2019 Credit: Josh Meltzer\/The Roanoke Times. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3d082c8d-74af-446b-b14e-1aca1f141e3f\/12-edmund-c-arnold.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>He pushed for designers to have more influence, for newspapers to have flair as well as substance. He was also a journalist, and an academic, and wrote numerous books about newspaper design and typography. He knew his stuff. It is no coincidence that the Society for News Design (SND), of which he was a founding member in 1992, now holds two awards each year \u2014 one for news design, the other for digital.<\/p>\n<p>Anyone keen to learn more about Arnold and his work could do a lot worse than starting with the resources below:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/Modern-Newspaper-Design-Edmund-Arnold\/dp\/0060302410\"><em>Modern Newspaper Design<\/em><\/a> by Edmund C. Arnold<\/li>\n<li><a href=\"https:\/\/www.snd.org\/pdf\/Arnold_Interview_Design77.pdf\">Edmund C. Arnold interview<\/a> by the Society for News Design<\/li>\n<li><a href=\"https:\/\/www.poynter.org\/reporting-editing\/2007\/remembering-the-father-of-modern-newspaper-design\/\">Remembering the Father of Modern Newspaper Design<\/a><\/li>\n<\/ul>\n<p>Newspaper designers are students of the web \u2014 so too should web designers be students of newspapers. As improvements in web technology open up new frontiers, it pays to know whether someone else has been here before. We are all looking for the same thing, after all. It\u2019s all, fundamentally, the same language.<\/p>\n<p>You can see this playing out in real time as newspapers adapt to the web. The gold standard of news design online at the moment is probably <em>The New York Times<\/em>, <a href=\"https:\/\/www.snd.org\/2019\/04\/worlds-best-winners-in-print-and-digital-honored-at-snd41-opening-reception\/\">which was a finalist in the print <em>and<\/em> digital SND awards this year<\/a>. What\u2019s interesting about the <em>Times<\/em> online is the blend between classicism and innovation. The homepage still essentially looks like the front page of a print edition, while individual stories, like <a href=\"https:\/\/www.nytimes.com\/interactive\/2018\/09\/20\/us\/politics\/russia-interference-election-trump-clinton.html\">\u2018The Plot to Subvert Democracy\u2019<\/a>, immerse themselves in the new possibilities of the web.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/new-york-times-home-page-screenshot.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/new-york-times-home-page-screenshot.png?w=900&ssl=1\" sizes=\"50vw\" alt=\"Homepage of The New York Times\u2019 website\"><\/a><figcaption>\n The New York Times blends best practice of news and web design to make something entirely new. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9ea76841-4281-48a2-923a-6d800d698a48\/new-york-times-home-page-screenshot.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Or take a newspaper designer like Mario Garc\u00eda \u2014 part of the generation after Edmund \u2014 who\u2019s most recent book, <em>The Story<\/em>, was <a href=\"https:\/\/www.garciamedia.com\/blog\/the-story-glimpses-of-my-new-mobile-storytelling-book\/\">designed to be read on mobile phones<\/a>. The best news designers relish change. The proof is in the pudding. (For those interested, Garc\u00eda blogs daily about the overlap of news and web design.)<\/p>\n<p>This, in a lot of ways, is the main takeaway of news design. Its top practitioners are not dogmatists \u2014 they are students. <a href=\"https:\/\/www.snd.org\/pdf\/Arnold_Interview_Design77.pdf\">When asked at the twilight of his career<\/a> what his advice was to the next generation of designers, Edmunc C. Arnold\u2019s answer was not a series of rules. It was far simpler than that: know where you came from.<\/p>\n<blockquote><p>My message to young designers is this: look, kids, you can do better, but the only way to achieve your potential is to go back to \u2014 and understand \u2014 the basics. That sounds boring, but it\u2019s reality.<\/p><\/blockquote>\n<p>Newspapers don\u2019t hold all the keys to great web design, but understanding the principles that guide them can only benefit web designers. There are plenty of kindred spirits in those two worlds. I\u2019m no web designer, but I recognise good web design when I see it in part because of what I know about newspapers. Purpose and style has a way of looking, well, stylish.<\/p>\n<p>Web design guru Jeffrey Zeldman hit the nail on the head when he tweeted this more than a decade ago:<\/p>\n<\/p>\n<blockquote data-lang=\"en\">\n<p lang=\"en\" dir=\"ltr\">Content precedes design. Design in the absence of content is not design, it’s decoration.<\/p>\n<p>\u2014 zeldman (@zeldman) <a href=\"https:\/\/twitter.com\/zeldman\/status\/804159148?ref_src=twsrc%5Etfw\">May 5, 2008<\/a><\/p><\/blockquote>\n<p>Vitaly Friedman was bowing to the same altar when he said, <a href=\"https:\/\/www.smashingmagazine.com\/2010\/05\/web-design-trends-2010\/\">\u201cGood design is about effective communication, not decoration at the expense of legibility.\u201d<\/a> Both he and Zeldman would find plenty of allies in the news design space. Few, if any, mediums have a richer history wedding content and design than newspapers do. That struggle is all they have.<\/p>\n<h3>To The As Yet Unimagined<\/h3>\n<p>It\u2019s worth reiterating here that there are clear and undeniable differences between news design and web design. In newspapers the dimensions of the space are always the same, while websites must adapt to radically different screen sizes and devices. In newspapers what you see is what you get, while websites can hide all sorts of useful features out of sight until they\u2019re prompted to appear. The aim of this piece is not to convince you that news and web design are the same. They are, however, often very similar. To be master of one does not make you master of the other, but it helps.<\/p>\n<p>Perhaps this is why Friedman <a href=\"https:\/\/www.smashingmagazine.com\/2008\/02\/award-winning-newspaper-designs\/\">collated a selection of award-winning newspaper designs<\/a> all the way back in 2008. Back then he rued the fact that print techniques weren\u2019t applicable online. Back then CSS wasn\u2019t sophisticated enough. Well, its is now, and that\u2019s really exciting.<\/p>\n<p>The process never ends. It can\u2019t end. No newspaper or website worth its salt is ever truly \u2018done.\u2019 It is always evolving. Look at the first ever newspaper and the first ever website and it\u2019s fair to say a lot has changed in both worlds since then:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/14-the-first-newspaper.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/14-the-first-newspaper.png?w=900&ssl=1\" sizes=\"50vw\" alt=\"The first newspaper\"><\/a><figcaption>\n 1609 edition of Relation aller F\u00fcrnemmen und gedenckw\u00fcrdigen Historien, widely considered the first newspaper. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/26428451-8631-4b4d-815c-33eaaddbccc5\/14-the-first-newspaper.png\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG?ssl=1\"><\/p>\n<p> <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/15-the-first-website.png 400w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG 800w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG 1200w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG 1600w,\n\t\t\t https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/15-the-first-website.png?w=900&ssl=1\" sizes=\"100vw\" alt=\"The first website\"><\/a><figcaption><a href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\">The first ever website<\/a>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a93a930d-eaae-48f6-a5a8-8a536c56c8d8\/15-the-first-website.PNG\">Large preview<\/a>)<br \/>\n <\/figcaption><\/figure>\n<p>Both formats have improved massively since those humble beginnings, and there\u2019s an awful lot left to achieve. As <a href=\"https:\/\/www.smashingmagazine.com\/2016\/04\/design-or-get-undesigned\/\">C. Y. Gopinath traced out beautifully in 2016<\/a>, the parameters are always changing; web technology, screen sizes, devices, internet speeds, you name it. In the mobile age <a href=\"https:\/\/www.smashingmagazine.com\/2019\/08\/bottom-navigation-pattern-mobile-web-pages\/\">maybe the nameplate belongs at the bottom<\/a>. Who knows? It all lies ahead.<\/p>\n<p>In many respects a torch has been passed from news design to web design. If developers can push forward with the knowledge of their elders on hand, they\u2019ll achieve things previous generations couldn\u2019t even have imagined. What an incredible opportunity. I can\u2019t wait to see what they come up with.<\/p>\n<div>\n <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/logo-red-8.png?w=900&ssl=1\" alt=\"Smashing Editorial\"><span>(ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\" rel=\"noopener noreferrer\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What Newspapers Can Teach Us About Web Design What Newspapers Can Teach Us About Web Design Frederick O’Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00 It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative…<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/\"> Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":72667,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-72666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-09T11:18:20+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-11-09T11:18:20+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#article\",\"name\":\"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies\",\"headline\":\"What Newspapers Can Teach Us About Web Design\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/1-moon-landing-front-page.png?fit=400%2C312&ssl=1\",\"width\":400,\"height\":312},\"datePublished\":\"2019-11-09T04:18:20-07:00\",\"dateModified\":\"2019-11-09T04:18:20-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#listItem\",\"name\":\"What Newspapers Can Teach Us About Web Design\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#listItem\",\"position\":3,\"name\":\"What Newspapers Can Teach Us About Web Design\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/\",\"name\":\"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies\",\"description\":\"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \\u2014\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/1-moon-landing-front-page.png?fit=400%2C312&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#mainImage\",\"width\":400,\"height\":312},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/11\\\/what-newspapers-can-teach-us-about-web-design\\\/#mainImage\"},\"datePublished\":\"2019-11-09T04:18:20-07:00\",\"dateModified\":\"2019-11-09T04:18:20-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies","description":"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#article","name":"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies","headline":"What Newspapers Can Teach Us About Web Design","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/1-moon-landing-front-page.png?fit=400%2C312&ssl=1","width":400,"height":312},"datePublished":"2019-11-09T04:18:20-07:00","dateModified":"2019-11-09T04:18:20-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#listItem","name":"What Newspapers Can Teach Us About Web Design"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#listItem","position":3,"name":"What Newspapers Can Teach Us About Web Design","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/","name":"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies","description":"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/1-moon-landing-front-page.png?fit=400%2C312&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#mainImage","width":400,"height":312},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/#mainImage"},"datePublished":"2019-11-09T04:18:20-07:00","dateModified":"2019-11-09T04:18:20-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies","og:description":"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/","article:published_time":"2019-11-09T11:18:20+00:00","article:modified_time":"2019-11-09T11:18:20+00:00","twitter:card":"summary","twitter:title":"What Newspapers Can Teach Us About Web Design | Design for Immersive Technologies","twitter:description":"What Newspapers Can Teach Us About Web DesignWhat Newspapers Can Teach Us About Web Design Frederick O'Brien 2019-11-08T11:30:00+00:002019-11-09T11:06:56+00:00It\u2019s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space \u2014"},"aioseo_meta_data":{"post_id":"72666","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:53:39","updated":"2026-09-02 11:10:11","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">»<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tWhat Newspapers Can Teach Us About Web Design\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"What Newspapers Can Teach Us About Web Design","link":"https:\/\/www.taterboy.com\/blog\/2019\/11\/what-newspapers-can-teach-us-about-web-design\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iU2","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/11\/1-moon-landing-front-page.png?fit=400%2C312&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=72666"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/72667"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=72666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=72666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=72666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}