h1. Designing websites for readers and writers bq. "Thankfully, we're starting to see something of a Renaissance. Comment-forms are dropping off blogs like vestigial tails. Text sizes are increasing yearly, and sites are being stripped and whitewashed, with most of their old cruft gone without a trace. The medium is starting to disappear again." - "--Content as Medium--":http://mattgemmell.com/2013/08/29/content-as-medium --by Matt Gemmell-- bq. "Strip away the images and gradients and vectors from even the fanciest web page, and you'll find that the web is mostly words." - "--The CODE Keyboard--":http://www.codinghorror.com/blog/2013/08/the-code-keyboard.html --by Jeff Atwood-- bq. "But the most powerful tool on the web is still words. At its heart, web design should be about words." - "--Words--":http://justinjackson.ca/words.html --by Justin Jackson-- bq. "Good design begins with content. Great copy will help a design shine. A stellar design will only get you so far if the content is lacking. more. * "The War on Wordsmiths":https://medium.com/writers-on-writing/436798659dd4 * "The short story of Longreads, according to founder Mark Armstrong":http://gigaom.com/2013/08/05/the-short-story-of-longreads-according-to-founder-mark-armstrong/ * [[Crafting an online media story]] * "The CODE Keyboard":http://www.codinghorror.com/blog/2013/08/the-code-keyboard.html - _"We know how to use the most powerful tool on the web – words. Strip away the images and gradients and vectors from even the fanciest web page, and you'll find that the web is mostly words. If you believe, as I do, in the power of words, then keyboards have to be one of the most amazing tools mankind has ever created."_ * "Content as Medium":http://mattgemmell.com/2013/08/29/content-as-medium/ * [[GitHub system for writers]] * "Words":http://justinjackson.ca/words.html * "Reminder: Design is still about words":http://37signals.com/svn/posts/3404-reminder-design-is-still-about-words * "The honest web design":https://medium.com/i-m-h-o/65a02a631fd6 * "4 Reasons I Use Large Type":http://mikeyanderson.com/optimal_characters_per_line * "Are Current Web Design Trends Pushing Us Back to 1999? ":http://sixrevisions.com/web_design/are-current-web-design-trends-pushing-us-back-to-1999/ ** "Hacker News thread":https://news.ycombinator.com/item?id=5749714 * "Readability":http://www.teehanlax.com/story/readability/ * "The Making of Medium":http://www.teehanlax.com/story/medium/ * "Favorite website":http://simplebits.com/notebook/2013/02/16/food-for-thought/ * "I like blogging software":http://dashes.com/anil/2013/04/i-like-blogging-software.html * "A Reader-First Internet":https://medium.com/i-dont-know-a-thing/9a6c9c04e2f9 * "Subcompact Publishing":http://craigmod.com/journal/subcompact_publishing/ * "Lazy Eyes - How we read online":http://www.slate.com/articles/technology/the_browser/2008/06/lazy_eyes.single.html * Posts by "Matt Gemmell":http://mattgemmell.com/ ** "Designing blogs for readers":http://mattgemmell.com/2013/05/22/designing-blogs-for-readers/ *** "Hacker News thread":https://news.ycombinator.com/item?id=5756815 ** "Comments Off":http://mattgemmell.com/2011/11/29/comments-off/ ** "Comments Still Off":http://mattgemmell.com/2012/01/03/comments-still-off/ ** "Comments Commentary":http://mattgemmell.com/2012/01/07/comments-commentary/ * "Good Writing and Editing Is Part of Great Design"http://designshack.net/articles/business-articles/good-writing-and-editing-is-part-of-great-design/ * new blogging networks: ** http://medium.com ** http://svbtle.com * Planned new personal blogging/publishing platform: http://john.onolan.org/ghost * "Responsive Typography: The Basics":http://ia.net/blog/responsive-typography-the-basics/ * blog design: http://malone.cc * nice blog design: http://sketchingwithcode.com h2. The F-Pattern 6 Tips for a Better Understanding of the User Experience":https://medium.com/tech-talk/95fb018918fc q. People don’t read online, they scan, and they scan in an F pattern. Eye tracking cameras can show us where the user is looking on the screen and generate heat maps they discovered that people tend to look at sites in an F-shaped pattern. They start at top left corner and move across the screen before moving down, and how far they’ll look from left to right shortens as they navigate down the page. Good visual design has the potential to change this pattern. "More on the F-pattern.":http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687 Readability and contrast is key. Short blocks of text are important on the web and even more important on mobile. Make it readable first, pretty second, and ensure that there is room for the text to breathe (e.g. lots of white space). It’s also important to play around with the brightness on your computer and phone to see how it looks in low and high brightness. Tablets and cell phones are a “lean back” experience, where as laptops are “lean in” experiences. When designing for mobile, think about the context, and where the user is likely to be when he/she is using your app. For instance, when a user is accessing your site via mobile, there are likely to be more distractions around so buttons will need to be bigger and the text will need to be clearer. q.. h2. Blogs are my newspapers "Comment":https://news.ycombinator.com/item?id=6549018 in October 14, 2013 Hacker News "thread":https://news.ycombinator.com/item?id=6546701 about the public launch of the [[Proposed Ghost blogging platform|Ghost blogging app]]. 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.. h2. Microsoft Stories Like the format. http://www.microsoft.com/en-us/news/stories/people/andrew-kim.html h2. End Article Pagination Real Pages Are All About Flow - Authors and designers, say goodbye to pagination - https://medium.com/design-ux/398f6a680b49 h2. Jekyll-based blog design http://incorporated.sendtoinc.com/ http://jothut.com/cgi-bin/junco.pl/microblogpost/20591/11Nov2013/http-blogsendtoinccom-http-previewincorporatedgetbarleycom-http-docssubtome http://blog.sendtoinc.com/ h2. Medium.com "Welcome to Medium":https://medium.com/about/9e53ca408c48 - _A better place to read and write_ h2. People Don't Click December 2013 https://medium.com/mind-behavior-and-technology/72b45ef740f h2. Increasing text size "The 100% Easy-2-Read Standard"http://ia.net/blog/100e2r/ h2. Reading longform on phones http://jothut.com/cgi-bin/junco.pl/blogpost/29642/22Jan2014/Reading-longform-on-phones h2. Emotional Web Design "The importance of emotion in design":https://medium.com/i-dont-know-a-thing/ade364e62707 #design - #blogging - #typography - #content - #writing - #longform - #reading - #blog_jr