How readers read our posts

A sharing to inspire readers to think again the post creation and sharing process. How our published post would finally be read by readers.

Transcript

1. Thomas Mak How readers read our posts. 15th Jul, 2014
2. I’m Thomas Mak.
3. • Technical background. • Author of 3 books. • Course instructor for app and web development. • Web designer that trains award-winning students.
4. How readers read our posts.
5. Inspiration.
6. 1. How we write online. 2. Different types of content. 3. How readers read. 4. How our posts get shared.
7. 1 How we write online
8. Web log and internet
9. Web log and internet • In the past, only web designers can make website. • In 1990s, there was geocities. • In early 2000s, online journals, web logs • In late 2000s, blogs
10. Web log and internet Search result of “geocities”
11. Web log and internet Screenshot by Billy Au.
12. Macauplus entry in Wikipedia http://zh.wikipedia.org/wiki/Macauplus “Macauplus是澳⾨門⾸首個⾃自創新聞台的網站，曾⼀一 度吸引⼤大量會員申請。新聞台多以⽇日記使⽤用，或 是⽤用來寫下⼼心情⼩小記。”
13. Web log and internet Screenshot by Billy Au.
14. Hosted blogging services • MPlus 新聞台 • PChome 個⼈人新聞台 • Xanga • Google Blogger • Posterous
15. Issues of hosted services • You don’t store your data. • You can’t customise everything. • Service may shut down.
16. Issues of hosted services Posterous was a simple blogging system since 2008. At around 2012, it was acquired by Twitter and the service shut down.
17. • We can host the blogging platform. • Create our own themes. • Choice of plugins, widgets, domain. • Our content will not be deleted when the service goes down. (But we have to maintain and backup our own hosting machine) WordPress
18. Tons of themes Search result of “wordpress themes”
19. Web log and internet Screenshot by Billy Au.
20. Web log and internet Screenshot by Billy Au.
21. Web log and internet Screenshot by Billy Au. Powered by WordPress.
22. WordPress enables • Non-technicals to write online. • Our own design and branding (without knowing web design). • Everyone posting something online.
23. Often share something! On the internet, you need to
24. Turing blog into book When bits of content become a collection.
25. Do you have a blog? Are you still writing? Discussion time
26. tumblr.
27. tumblr. 6 types of posts: • text • photo • video • chat • quote • link
28. 2 Different types of content
29. Different forms of information • Web Article • Video • Short Video • Image • Audio (Podcast) • Email Newsletter
30. BBC News on Instagram
31. The Big Picture http://www.boston.com/bigpicture/2014/07/hurricane_arthur.html
33. Podcast • Timeless Radio.
34. Live post http://www.macrumors.com/2014/06/02/wwdc-2014-keynote-live/
35. Live post • Reporting event live. • Transcript and images. • Auto-refreshing.
36. Email newsletter Sidebar.io provides 5 links about design every day.
37. Course in email We can even deliver an entire course via email.
38. Video For the same event that was reported with live text and images feed, Apple provides real-time video streaming.
39. Can you list 3 pros and cons for the post types we discussed? Discussion time When shall we use video? When shall we use text?
40. Thinking outside the box
41. Ikea “website” inside Instagram
42. Ikea “website” inside Instagram
43. Imagine now you need to report sport news in Instagram. How can you make it creatively? Discussion time
44. 3 How readers read our post
45. Readers used to read on desktop. Now they read on mobile.
46. Your browser may provide an article-only view, which extracts the content and gets rid of the clutters such as header, navigation, ads and footer.
47. Correct HTML structure <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Window title here</title> </head> <body> <!-- headers and navigation code goes here --> <article> <h1>Heading 1 here</h1> <p>content</p> <p>content</p> <p>content</p> </article> <!-- footer and ads code goes here --> </body> </html>
48. Correct HTML structure <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>Window title here</title> </head> <body> <!-- headers and navigation code goes here --> <article> <h1>Heading 1 here</h1> <p>content</p> <p>content</p> <p>content</p> </article> <!-- footer and ads code goes here --> </body> </html>
49. Web site may have their own presenting way for mobile view.
50. This is a good website example on providing a delightful reading experience in mobile screen.
51. Given this website screenshot, which one do you think is the heading of the article?
53. When Evernote process the content of this web page, it guesses the incorrect heading. (Because web developer set a wrong <h1>)
54. Another example, given this website that shows both text and images.
55. The photos are missing in the article view, because the HTML code that displays the photos does not related to the article.
57. Try to fit the desktop website into mobile screen. Working time
60. Version 1 Version 2
61. Image (and Poster Frame) is important.
63. The BBC Twitter timeline at a glance.
64. When your post are shared in social network, which photo you want reader to share? When reader doesn’t choose the photo when sharing, Facebook guesses it and provides a default one.
65. Your post shows in everywhere.
66. Facebook Paper app displays news in the same way displaying your friends feed. Card view showing an attached news and the post comment.
67. Posts may be stored into reader’s reading list. This means that your post may be read 3 days later, 3 months later or even 3 years later. (At that time, your original post may even been deleted, but your reader are still reading it)
68. Your posts are often display in different collection view. Some with large photo cover. Some with only heading text.
69. Example of posts being displayed in heading only. This is hacker news where geek posts are listed and readers rate the post to raise the post ranking.
70. When you click on a link inside Facebook, it immediately expand that section and display related content beside the one you clicked.
71. Google is testing to change your promotion emails into card view too.
72. Next time when you read a post online, try to put the post URL in the Facebook status box and see how Facebook chooses the default post image for you. Homework
73. 4 How readers share our post
74. Different ways to comment • Traditional comment area below the article. • Share with comments. • Retweet with comments. • Comment on part of the content. • Comment the post in community.
75. The traditional way to comment.
76. The traditional way to comment.
77. When sharing post in Facebook, we can choose to share instantly or as a new post to add our own opinion besides the original post.
78. Author encourages readers to comment via Twitter.
79. Some websites shows a call-for-action box when reader finishes reading the post.
83. Which commenting system fits your needs? Discussion time
84. Social networks provide guide on optimising the sharing presentation.
85. Open Graph Meta tag lets author give more descriptions to the post. Facebook uses these information to optimize the newsfeed. http://davidwalsh.name/facebook-meta-tags
86. <meta property="og:image" content="http://davidwal <meta property="og:title" content="Facebook Open G <meta property="og:url" content=“http://davidwalsh <meta property="og:site_name" content="David Walsh <meta property="og:type" content="blog"/> Code from DWB: http://davidwalsh.name/facebook-meta-tags The code to archive Facebook Open Graph-supported newsfeed.
87. Twitter also provides different cards type for author to specific. https://dev.twitter.com/docs/cards
88. <meta name="twitter:card" content="gallery" /> <meta name="twitter:site" content="@fodorstravel" /> <meta name="twitter:creator" content="@fodorstravel" /> <meta name="twitter:title" content="America's Best Small Towns <meta name="twitter:description" content="For the second year <meta name="twitter:url" content="http://www.fodors.com/news/p <meta name="twitter:image0" content="http://www.fodors.com/ee/ <meta name="twitter:image1" content="http://www.fodors.com/e/s <meta name="twitter:image2" content="http://www.fodors.com/ee/ <meta name="twitter:image3" content="http://www.fodors.com/eid Code from Twitter: https://dev.twitter.com/docs/cards The code to archive the gallery card view.
89. Fake news
90. Fake twitter accounts
91. –Cult of Mac “It has amassed more than 14,000 followers in less than two weeks and looks legit at first glance, but don’t be fooled.” http://www.cultofmac.com/282540/fake-craig-federighi-twitter-account-fooling-thousands/
92. Determining fake news • Who told you the news? • If the source is a website, is it the official website? • Check the URL carefully to determine if it’s official. • When you search this news online, are they all clones or do you find different parties reporting the same thing in different ways?
93. A Chinese fake news helper
94. Inspiration
95. Think how we post. how readers read.
96. Think outside the box.