h1. Design by Writing Links to external sources of inspiration, along with a few links to my own thoughts. more. https://marco.org/2013/03/02/type-engine http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html h2. Content * "Good Writing and Editing Is Part of Great Design":http://designshack.net/articles/business-articles/good-writing-and-editing-is-part-of-great-design/ * "Content is the hero":http://scotthurff.com/posts/content-is-the-hero * "Content as Medium":http://mattgemmell.com/2013/08/29/content-as-medium * "Words":http://justinjackson.ca/words.html * "Reminder: Design is still about words":http://37signals.com/svn/posts/3404-reminder-design-is-still-about-words * "Subcompact Publishing":http://craigmod.com/journal/subcompact_publishing/ * "6 simple tips for designing copy on the Web":http://thenextweb.com/dd/2015/05/06/6-simple-tips-for-designing-copy-on-the-web/ h2. Design * "Dieter Rams: ten principles for good design":https://www.vitsoe.com/gb/about/good-design * "Dieter Rams – 10 principles for good design - applied to mobile apps":http://www.jeremysanty.com/dieter-rams-10-principles-for-good-design-applied-to-mobile-apps/ * "Learning to See":https://ia.net/know-how/learning-to-see * "Blogs for Readers":http://mattgemmell.com/designing-blogs-for-readers/ - "Hacker News discussion":https://news.ycombinator.com/item?id=5756815 * "This is my favorite website":http://vault.simplebits.com/notebook/2013/02/16/food-for-thought/ * "The 100% Easy-2-Read Standard":http://ia.net/know-how/100e2r from 2006 * "This is a motherf*cking website":http://motherfuckingwebsite.com/ * "This is still a motherfucking website":http://bettermotherfuckingwebsite.com/ * "The Honest Web Design":https://medium.com/i-m-h-o/the-honest-web-design-65a02a631fd6 * "Optimal Characters Per Line":http://mikeyanderson.com/optimal_characters_per_line * "Responsive Typography - The Basics":http://ia.net/know-how/responsive-typography-the-basics * "Web Typography":https://medium.com/@ssoroldoni/web-typography-the-formula-7748b8df363d * "Fonts Have Feelings Too":https://medium.com/who-what-why/fonts-have-feelings-too-1523564d966c * "The importance of emotion in design":https://medium.com/i-dont-know-a-thing/the-importance-of-emotion-in-design-ade364e62707 * "Reader First Internet":https://medium.com/i-dont-know-a-thing/a-reader-first-internet-9a6c9c04e2f9 * "Re-thinking linking":https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930 * "The Value of Content":https://medium.com/i-m-h-o/the-value-of-content-a30bbe8b54a5 * http://www.typewolf.com/cheatsheet * "Readability":http://www.teehanlax.com/story/readability/ * https://www.readability.com * http://www.pearsonified.com/typography * http://www.studiopress.com/design/google-font-combinations.htm http://backstage.pickcrew.com/update-blog/ * http://www.codeitpretty.com/2013/05/blog-font-style-with-css-spacing.html * http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/ * http://typographica.org * http://www.pearsonified.com/2011/12/golden-ratio-typography.php * http://typecast.com/blog/a-more-modern-scale-for-web-typography * http://jothut.com/cgi-bin/junco.pl/blogpost/339/27Jun2013/Resolved-Experiment-with-fonts-and-CSS * https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/ h2. Recommendations * 55 to 75 characters per line on desktop/laptop * line height of 140 to 160 percent * font size of at least 20 px * letter spacing of 0 to 1 px depending upon font type ** letter-spacing: 0.01em; ?? * paragraph spacing? twice the line height? more than two times line height? q. What often gets missed is proportion. On every device, our H1s are three times (3em) the size of the body, every H2 is 2.25em, and so on. q.. q. After a lot of experimentation, 35–40 characters per line on a typical smartphone seems to me to provide the best balance for more legible and readable text. q.. h2. Etc. This page works because it easily provides information that is useful for interested readers. No web-abusive aesthetic cruft is used to infuriate the reader. This single page is more superior in web design than the web sites of Twitter, Pinterest, etc. because those giant properties abuse normal web behavior that has existed for more than 20 years. We don't need websites to act like native apps. http://www.shelaghlewins.com/tablet_weaving/TW01/TW01.htm br. https://news.ycombinator.com/item?id=6549018 q. Blogs are my newspapers, thats why. For me accessibility and downwards compatability outweigh the "product" a lot. I have a low-end smart phone for which most "products" are ununsable. Why do people throw away expensive hardware that woks perfectly fine? Because the modern software doesn't run on it. Take for example the opposite: http://blog.fefe.de That is a product that meets my demands: I can read on any device, using multiple clients. I could read this page with a dual-core as well as with a gameboy. Serve TTF font's, maybe I rather use bitmap fonts? Doesn't matter. I could read that blog using Mosaic, lynx, w3m... kindle displays... It also works fine for braille terminals. I guess I am more interested in powerful systems than the pityful products of the App-bubble. After all I am a programmer. q.. br. http://the-magazine.org -- (oct 15, 2015 : i don't know why i included The Magazine) br. My Sep 8, 2015 ToledoTalk.com "comment":http://toledotalk.com/cgi-bin/tt.pl/article/194907#194952 in a thread about the Toledo Blade's new mobile web format where I mentioned what I would like to see in a Blade web design for article pages. My entire comment: q. I'd pay nice money for a Blade subscription if the article pages looked something like this: bq. http://toledotalk.com/last-alarm.html - --(blatant copyright violation. will remove later.)-- ... instead of this: bq. http://www.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html ... and instead of this: bq. http://m.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html br. I don't need a printed paper version. I don't need an app. I prefer one website that responds *comfortably* on all devices and loads fast with no mountains of JavaScript bilge, no huge irrelevant images, no ads, and no trackers and other gobbledygook that bog down page load speed. It would be nice if the article page contained a large-ish font size and a lot of negative space. I don't understand why some responsively-designed websites use a tiny, uncomfortable font size on mobile. I see no need for a bunch of navigation links in the header and footer areas of an article page. No fixed areas. No hamburger or similar menu icons, like I use here. The only link needed is a link to the home page. The reader can find all the site's link cruft on the home page. Outside of links contained within the article, the only other acceptable link would be to a separate page that contains the Facebook comments, pertaining to the article. If I'm a buying a subscription, I do not want to see Facebook comments loaded on the same page as the article because that slows down the page load and fouls the overall look of the page. On an article page, I want at least 99% of the page to focus on the article: Title, secondary title, author, contact info, publish date, and content. Give non-paying customers the hideous views, and give subscribers something worth buying. Until this utopia exists, I'll continue reading with JavaScript disabled, which improves the web-viewing experience a lot. br. While not perfect, some good design concepts for an article page can be gleaned from this site. bq. http://motherfuckingwebsite.com The humorous content is directed at web designers/developers. Excerpts: q. Let me describe your perfect-ass website: * Shit's lightweight and loads fast * Fits on all your shitty screens * Looks the same in all your shitty browsers * The motherfucker's accessible to every asshole that visits your site * Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee) This is a real, naked website. Look at it. It's fucking beautiful. What I'm saying is that all the problems we have with websites are *ones we create ourselves.* Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch. bq. "Good design is as little design as possible." - some German motherfucker q.. q.. br. My follow-up "comment":http://toledotalk.com/cgi-bin/tt.pl/article/194907#194987 q. The Microsoft Edge browser is intriguing. I use Linux for my desktop/laptop system. On Linux, I use the Chrome and Firefox web browsers. For Firefox, I have JavaScript disabled by default for all websites. I use the NoScript and Ghostery plugins. I can enable functionality as I need it with NoScript. For Chrome, cookies are blocked for all websites by default, but I have JavaScript enabled for all websites by default. Then I use cookie and JavaScript exception rules to allow or disallow those functions for various sites. On my iPhone, I use the Chrome and Safari web browsers. With Chrome, I have the "Readability":https://chrome.google.com/webstore/detail/readability/oknpjjbmpnndlpmnhmekjpocelpnlfdi?utm_source=chrome-app-launcher-info-dialog extension installed, which "cleans up" a web page. Sep 9, 2015 Blade gardening "story":http://www.toledoblade.com/Gardening/2015/09/09/Gardening-with-the-mound-method.html Normal view with everything enabled within the browser. !https://farm6.staticflickr.com/5764/21278939701_43cacc3822.jpg! br. Same page viewed with the Readability extension. !https://farm1.staticflickr.com/612/21082982448_7a665f2dcc.jpg! q.. http://whoo.ps/2015/02/23/futures-of-text http://graydon2.dreamwidth.org/193447.html q. Text is the most socially useful communication technology. It works well in 1:1, 1:N, and M:N modes. It can be indexed and searched efficiently, even by hand. It can be translated. It can be produced and consumed at variable speeds. It is asynchronous. It can be compared, diffed, clustered, corrected, summarized and filtered algorithmically. It permits multiparty editing. It permits branching conversations, lurking, annotation, quoting, reviewing, summarizing, structured responses, exegesis, even fan fic. The breadth, scale and depth of ways people use text is unmatched by anything. There is no equivalent in any other communication technology for the social, communicative, cognitive and reflective complexity of a library full of books or an internet full of postings. Nothing else comes close. So this is my stance on text: always pick text first. As my old boss might have said: always bet on text. If you can use text for something, use it. It will very seldom let you down. q.. A commenter stated what I works for me: q. Everything you say is true; even so, you leave out one point that’s crucially important, at least to me: text is also the most efficient technology when it comes to bridging that last gap between the computer and the human mind. Send me a link to a news story that turns out to be a *video, or an audio file, and I’ll close it unconsumed: I haven’t got that kind of time.* Send me *a transcript: I’ll finish reading in half the time* it would take me to passively sit there while it played, and I’ll more clearly remember it. q.. h3. Rules For Visual Storytelling (2016) edition Image related, but the ideas could apply to text too. https://twitter.com/brianboyer/status/708261070520111105 https://twitter.com/archietse 1. If you make the reader click or do anything other than scroll, something spectacular has to happen. 2. If you make a tooltip or rollover, assume no one will ever see it. If content is important for readers to see, don't hide it. 3. When deciding whether to make something interactive, remember that getting it to work on all platforms is expensive. - Archie Tse, Deputy Graphics Director, NYT Presented at Malofiej 24 http://www.malofiejgraphics.com q. The Society for News Design (SND) is a nonprofit organization that brings together around 2,600 visual journalists (designers, infographers, illustrators,…) from around the world. The Society’s annual activities, its competition and publications have been essential references for newspapers and magazines worldwide since the late 70′s, when it was created with the expressed purpose of fostering publications that are more easily accessible to their readers. q.. br. http://www.bloomberg.com/features/2016-jack-dorsey-twitter-interview/ march 2016 - twitter's 10-year anniversary - quote by jack dorsey: q. "I think independent of the visual medium, text always has a place in the world. I don't think that's ever going away. As we talk about these shifts toward visual, I think it is important to remember that the written word is always going to be something that's important and useful." q.. hr. http://mrmrs.io/writing/2016/03/23/the-veil-of-ignorance/ hr. "Information presented with clear and logically set out titles, subtitles, texts, illustrations and captions will not only be read more quickly and easily but the information will also be better understood and retained in the memory. This is a scientifically proven fact and the designer should bear it constantly in mind" – Josef Muller Brockmann #design - #writing - #reading - #web - #blog_jr