A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 38KB

4 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>A Teenager’s View on Social Media (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://medium.com/backchannel/a-teenagers-view-on-social-media-1df945c09ac6">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. A Teenager’s View on Social Media (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://medium.com/backchannel/a-teenagers-view-on-social-media-1df945c09ac6">Source originale du contenu</a></h3>
  445. <p name="cd73" class="graf--p"><strong class="markup--strong markup--p-strong">I read technology</strong> articles quite often and see plenty of authors attempt to dissect or describe the teenage audience, especially in regards to social media. However, I have yet to see a teenager contribute their voice to this discussion. This is where I would like to provide my own humble opinion.</p>
  446. <p name="c06f" class="graf--p">For transparency, I am a 19-year-old male attending The University of Texas at Austin. I am extremely interested in social media’s role in our society as well as how it is currently evolving. Thus, the views I provide here are my own, but do stem from observation of not only my own habits but my peers’ habits as well.</p>
  447. <p name="02a8" class="graf--p">This article will not use any studies, data, sources, etc. This is because you can easily get that from any other technology news website and analyze from there. I’m here to provide a different view based off of my life in this “highly coveted” age bracket. That being said, I'm not an expert at this by a long shot and I'm sure there will be data that disproves some of the points I make, but this is just what I've noticed.</p>
  448. <p name="854a" class="graf--p">I think the best way to approach this would be to break it down by social media network and the observations/viewpoints I've gathered over the years.</p>
  449. <h3 name="ce63" data-align="center" class="graf--h3">Facebook</h3>
  450. <figure name="b965" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*ckl4MNDTQgGzcLgiGDK9fg.jpeg" data-width="320" data-height="320" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*ckl4MNDTQgGzcLgiGDK9fg.jpeg"/></div></figure>
  451. <p name="b3e6" class="graf--p">In short, many have nailed this on the head. It’s dead to us. Facebook is something we all got in middle school because it was cool but now is seen as an awkward family dinner party we can't really leave. It’s weird and can even be annoying to have Facebook at times. That being said, if you <strong class="markup--strong markup--p-strong">don't </strong>have Facebook, that’s even more weird and annoying. Weird because of the social pressure behind the question, “Everyone has Facebook, why don't you?” and annoying because you'll have to answer that to just about everyone in classes you meet who makes an attempt to friend you or find you on there.</p>
  452. <p name="993a" class="graf--p">Facebook is often used by us mainly for its group functionality. I know plenty of classmates who only go on Facebook to check the groups they are part of and then quickly log off. In this part Facebook shines—groups do not have the same complicated algorithms behind them that the Newsfeed does. It is very easy to just see the new information posted on the group without having to sift through tons of posts and advertising you don't really care about.</p>
  453. <p name="31b7" class="graf--p">Messaging on Facebook is also extremely popular among our age group, mainly because they provide the means to talk to those people who you weren't really comfortable with asking for their number but comfortable enough to send them a friend request.</p>
  454. <p name="c210" class="graf--p">Facebook is often the jumping-off point for many people to try to find you online, simply because everyone around us has it. If I met you one time at some party, I’m not going to try to check Twitter or Instagram to find out who you are. Instead, many opt for the ease of Facebook and the powerful search functionality that gives you results of people who you actually have a chance of knowing (unlike Instagram, whose search functionality, although it improved slightly in the last update, leaves much to be desired).</p>
  455. <h3 name="c943" data-align="center" class="graf--h3">Instagram</h3>
  456. <figure name="54eb" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*Q7Bip063EKCyQJ1mgS8z-Q.png" data-width="320" data-height="320" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*Q7Bip063EKCyQJ1mgS8z-Q.png"/></div></figure>
  457. <p name="61f7" class="graf--p">Instagram is by far the most used social media outlet for my age group. Please note the verbiage there—it is the most <em class="markup--em markup--p-em">used</em> social media outlet. Meaning, although the most people are on Facebook, we actually post stuff on Instagram. It’s always fascinating to me to see a friend with 1500 friends on Facebook only get 25 likes on a photo yet on Instagram (where she has 800 followers) she gets 253. I have a few ideas as to why this could happen:</p>
  458. <ul class="postList"><li name="91bc" class="graf--li">I'm not terrified whenever I like something on Instagram that it will show up in someone’s Newsfeed and they'll either screenshot that I liked it or reference it later. The same goes for commenting.</li><li name="c120" class="graf--li">I am not as pressured to follow someone back on Instagram, meaning my feed is normally comprised of content I actually want to see. That being said, I will come back and scroll through an application that has content I enjoy rather than one where I have to find the occasional diamond in the rough.</li><li name="4928" class="graf--li">The content on Instagram is usually of higher quality. People take time to edit their photos with filters, use different brightness/contrast settings (it’s even one of the steps to posting a photo), etc., to make the pictures look the best they possibly can. This means the content on Instagram is normally “better” (photo-wise), so I am more likely to go back to the application.</li><li name="bea0" class="graf--li">Instagram hasn't been flooded with the older generation yet (not <em class="markup--em markup--li-em">everyone</em> has an Instagram) meaning it’s “hip” and “cool” to the younger crowd. However, it is popular enough that if you have a smartphone it’s almost unheard of for you not to have Instagram, if not to take pictures, but to at least tag people in photos.</li><li name="af05" class="graf--li">Another point: tagging. I don't have to constantly check Instagram to make sure I wasn't tagged in any awkward or bad photos. That’s because <em class="markup--em markup--li-em">you can't easily see them in your feed</em>, making the whole experience seem way more private. Am I looking weird in a photo you posted? Who cares—I can just delete the tag if I really am that upset about it without fear that my friends from another social circle (who don’t follow you) will get to it first. I know Facebook has the ability to let you check every single photo tagged of you before it appears on your profile, but many people I know do not have that enabled or know it even exists.</li><li name="d662" class="graf--li">People do not post 10000 times a day on Instagram. Many are much more polite about posting, either doing once a day, a few times a week, etc. This means that there isn't a constant flow of content being shoved down my throat every time I open the application, and it is possible to be “caught up” with my Instagram feed.</li><li name="8af7" class="graf--li"><strong class="markup--strong markup--li-strong">There are no links on Instagram, meaning I'm not being constantly spammed by the same advertisement, horrible gossip news article, or Buzzfeed listicle about the </strong><a target="_blank" href="http://www.buzzfeed.com/peggy/28-ingenious-things-for-your-dog-you-had-no-idea-you-needed#.duEe4PrJD" data-href="http://www.buzzfeed.com/peggy/28-ingenious-things-for-your-dog-you-had-no-idea-you-needed#.duEe4PrJD" class="markup--anchor markup--li-anchor" rel="nofollow"><strong class="markup--strong markup--li-strong">“28 Ingenious Things For Your Dog You Had No Idea You Needed”</strong></a></li></ul>
  459. <p name="e90a" class="graf--p">Those are some reasons why many people my age tend to <em class="markup--em markup--p-em">use</em> Instagram more than they do Facebook. Everything about the application makes it less commercialized and more focused on the content, meaning more teens are inclined to visit it. When we do visit the application it is a much more pleasant experience so we are more inclined to Like and interact with the posts more. This increases our interaction with the application, meaning we will use it more, etc.</p>
  460. <p name="e45b" class="graf--p">Facebook gets all of the photos we took — the good, the bad, etc—while Instagram just gets the <strong class="markup--strong markup--p-strong">one </strong>that really summed up the event we went to. It is much more selective, and honestly people spend more time on the captions to make them relevant/funny. On Facebook we just throw up everything we got so people can tag each other and show our family members that we're still alive.</p>
  461. <p name="195d" class="graf--p">Many of those younger than me (10–16 years old) who I've talked to about this matter don’t even have a Facebook — Instagram is all that they need.</p>
  462. <h3 name="87db" data-align="center" class="graf--h3">Twitter</h3>
  463. <figure name="3007" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*lpbk6h08dnpoOXiFCFmKLw.jpeg" data-width="628" data-height="432" data-action="zoom" data-action-value="1*lpbk6h08dnpoOXiFCFmKLw.jpeg" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*lpbk6h08dnpoOXiFCFmKLw.jpeg"/></div></figure>
  464. <p name="3e0e" class="graf--p">To be honest, a lot of us simply do not understand the point of Twitter. There is always a core group at every school that uses it very religiously to tweet and another group that uses it to simply watch or retweet, but besides that many don't use it. It also isn't extremely easy to find friends on the site and many just use it to complain about school in a setting where their parents/family members (not necessarily employers) are likely not to see it.</p>
  465. <p name="a8cd" class="graf--p">Twitter is a place to follow/be followed by a bunch of random strangers, yet still have your identity be attached to it (this distinction will be important later on). Your tweets are also easily searchable on Twitter which is good but not good if you want to be yourself and not have it follow you around when you're trying to land a job. Thus, to others Twitter is used like Facebook—you post with the assumption that your employer will see it one day.</p>
  466. <p name="df11" class="graf--p">There are then three main groups of Twitter users: the ones who use it to complain/express themselves, the ones who tweet with the assumption that their prospective employer will eventually see whatever they are saying, and the ones who simply look at other Tweets and do the occasional RT.</p>
  467. <h3 name="0c73" data-align="center" class="graf--h3">Snapchat</h3>
  468. <figure name="45c1" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*_DiEH1gakyUbeFQ_s8mjrQ.png" data-width="512" data-height="512" data-action="zoom" data-action-value="1*_DiEH1gakyUbeFQ_s8mjrQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*_DiEH1gakyUbeFQ_s8mjrQ.png"/></div></figure>
  469. <p name="cba4" class="graf--p">Snapchat is quickly becoming the most used social media network, especially with the advent of My Story. If I could break down a party for you in social media terms, here’s how it would pan out:</p>
  470. <ul class="postList"><li name="a89c" class="graf--li">You post yourself getting ready for the party, going to the party, having fun at the party, leaving at the end of the party, and waking up the morning after the party on Snapchat.</li><li name="a001" class="graf--li">On Facebook you post the cute, posed pictures you took with your friends at the party with a few candids (definitely no alcohol in these photos).</li><li name="5080" class="graf--li">On Instagram you pick the cutest one of the bunch to post to your network.</li></ul>
  471. <p name="2d1d" class="graf--p">Snapchat is where we can really be ourselves while being attached to our social identity. Without the constant social pressure of a follower count or Facebook friends, I am not constantly having these random people shoved in front of me. Instead, Snapchat is a somewhat intimate network of friends who I don't care if they see me at a party having fun.</p>
  472. <p name="396f" class="graf--p">On no other social network (besides Twitter possibly) is it acceptable post an “I’m soooo bored” photo besides Snapchat. There aren't likes you have to worry about or comments—it’s all taken away. Snapchat has <strong class="markup--strong markup--p-strong">a lot less social pressure</strong> attached to it compared to every other popular social media network out there. This is what makes it so addicting and liberating. If I don’t get any likes on my Instagram photo or Facebook post within 15 minutes you can sure bet I'll delete it. Snapchat isn't like that at all and really focuses on creating the Story of a day in your life, not some filtered/altered/handpicked highlight. It’s the real you.</p>
  473. <p name="287b" class="graf--p">Another quick aside about Snapchat—I only know a handful of people (myself included) that believe Snapchat does delete your photos. Everyone else I know believes that Snapchat has some secret database somewhere with all of your photos on it. While I will save that debate for another day, it is safe to say that when photos are “leaked” or when there’s controversy about security on the app, we honestly do not really care. We aren't sending pictures of our Social Security Cards here, we're sending selfies and photos with us having 5 chins.</p>
  474. <h3 name="387a" data-align="center" class="graf--h3">Tumblr</h3>
  475. <figure name="38c6" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*2-qNWX9Warx8Ii85_Fr6FA.png" data-width="405" data-height="405" data-action="zoom" data-action-value="1*2-qNWX9Warx8Ii85_Fr6FA.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*2-qNWX9Warx8Ii85_Fr6FA.png"/></div></figure>
  476. <p name="8aa1" class="graf--p">Remember in the section on Twitter I said, “Twitter is also a place to follow/be followed by a bunch of random strangers, yet still have your identity be attached to it”? Tumblr is a place to follow/be followed by a bunch of random strangers, yet <strong class="markup--strong markup--p-strong">not</strong> have your identity be attached to it. Tumblr is like a secret society that everyone is in, but no one talks about. Tumblr is where you are your true self and surround yourself (through who you follow) with people who have similar interests. It’s often seen as a “judgment-free zone” where, due to the lack of identity on the site, you can really be who you want to be. The only Tumblr URLs I know of people in real life are my close friends and vice versa.</p>
  477. <p name="2190" class="graf--p">Plus, it’s simple in Tumblr to just change your URL if anyone finds you. Your name isn't attached to that profile at all so without that URL it is pretty difficult to find you again, especially for the typical parent snooping around. This really helps make the site a place where people can post and support others posts. There is a lot of interaction on this website in the form of reblogs because people just simply have feeds of only things they care about (and are then more likely to support with a like/reblog). I wouldn't say a lot of “socializing” — at least in the way we've defined it in our social media society—occurs on the site, but people can really easily meet others worldwide who hold similar interests. This makes it a very alluring site to join for many teenagers, even just to make new friends.</p>
  478. <h3 name="98a3" data-align="center" class="graf--h3">Yik Yak</h3>
  479. <figure name="0d83" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*USOid9QsRcX-Yz-sPqz_pw.png" data-width="3349" data-height="3349" data-action="zoom" data-action-value="1*USOid9QsRcX-Yz-sPqz_pw.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*USOid9QsRcX-Yz-sPqz_pw.png"/></div></figure>
  480. <p name="1ac7" class="graf--p">Yik Yak is a rather new contender, however, a ton of friends in college have the application. It has gotten to be so addicting because it focuses solely on the content of your posts—there are no followers, no profiles, nothing. Whatever is funny/relevant is at the top and everything else is at the bottom, whether Kanye West is the one who is writing it or some random kid who never talks in class.</p>
  481. <p name="3995" class="graf--p">There’s an advertisement I see often on Twitter for Yik Yak that says something along the lines of “Everyone’s on it before class starts.” I can 100% reaffirm that this is true. And everyone’s on it during class, talking about the class they are in. And everyone’s on it after class to find out what else is going on around campus.</p>
  482. <p name="2bec" class="graf--p">While it hasn't reached the popularity of the other networks, Yik Yak is a powerful contender that people actually use. Often I see people post about the fight for anonymity with other applications such as Secret. I can tell you that I do not know a single person in my network who uses that application. People reference Yaks all the time with each other or send screenshots, I have yet to ever hear of a hot post on Secret that everyone’s talking about.</p>
  483. <p name="3b1e" class="graf--p">A negative to Yik Yak, however, is how unused the application is whenever there is a school holiday. Yik Yak is only as good as the 10 mile radius around you, so if you are in an area with a low population of Yik Yak users, you won’t really be using the application much. The same can't be said for the other social media sites on this list.</p>
  484. <h3 name="3166" data-align="center" class="graf--h3">Medium</h3>
  485. <figure name="5c6c" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*b24WgjiInDNnS54B35vc4w.png" data-width="417" data-height="417" data-action="zoom" data-action-value="1*b24WgjiInDNnS54B35vc4w.png" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*b24WgjiInDNnS54B35vc4w.png"/></div></figure>
  486. <p name="299d" class="graf--p">Many of my peers look for platforms to begin a writing blog that they can share with their friends and family. When I hear my friends say this, they automatically think of creating a WordPress site. For some reason, Wordpress seems like the more “sophisticated” website to begin a blog. Others who have had experience with Tumblr will choose to open up a separate blog on there, one that is not connected to their “personal” blog on the platform.</p>
  487. <p name="31da" class="graf--p">However, once I have introduced Medium to those my age, I have never seen them turn back in terms of a platform to publish a blog.</p>
  488. <p name="5b2f" class="graf--p">What Medium does right is the “recommend” function. This is unseen on Wordpress (besides the typical website sharing buttons) and is really what makes Medium a community, not just a bunch of individual sites. Having a simple “Follow” system also makes it so that you come back to Medium even if you aren’t looking to write a blog. Medium also has an emphasis on commenting right next to the text (as opposed to a lengthy comment section at the bottom).</p>
  489. <p name="386c" class="graf--p">Medium’s only challenge is becoming known to the teenage audience. The layout of the site as well as the content is all there, what is needed is just the recognition of our age group. I feel that over time as more teenagers begin to discover Medium, many of my peers will begin blogging here.</p>
  490. <h3 name="2db1" class="graf--h3">The Others</h3>
  491. <p name="a06f" class="graf--p">Here are other social media networks that some teens use but that don't really require a full-length discussion:</p>
  492. <ul class="postList"><li name="7855" class="graf--li"><strong class="markup--strong markup--li-strong">LinkedIn — </strong>We have to get it, so we got it. Many wait until college to get this (as they probably should, it isn’t for this demographic anyways).</li><li name="a0a4" class="graf--li"><strong class="markup--strong markup--li-strong">Pinterest</strong>—It’s mainly female-dominated and is for those who have an artsy/hipster focus. Not too many people talk about it.</li><li name="bfd9" class="graf--li"><strong class="markup--strong markup--li-strong">Kik</strong>—It’s a messaging application that is mainly used for messaging people on Twitter I guess? I don't know anyone who uses it. The only time I ever hear this application is for the joke, “Aye you got Kik?”, normally seen as someone trying to “spit game” to attract a partner. It’s really difficult for me to describe it here but it isn't super relevant.</li><li name="0cf5" class="graf--li"><strong class="markup--strong markup--li-strong">WhatsApp</strong>—You download it when you go abroad, you use it there for a bit before going back to iMessage and Facebook Messenger, then you delete it. I know tons of people who use it to communicate with friends they made abroad, but I feel like Messenger is beginning to overshadow it. For international students, however, WhatsApp is a pivotal tool that I’ve heard is truly useful.</li><li name="f8fe" class="graf--li"><strong class="markup--strong markup--li-strong">GroupMe</strong>—By <strong class="markup--strong markup--li-strong">far</strong> the most used group messaging application in college. Everyone has one, uses it and loves it. GIF support, the ability to “like” others messages, even trivial things such as being able to change your name between group chats all make this both a useful and enjoyable application. GroupMe also works for literally any phone or device…it is on desktop, iPhone, Android, and can work over text as well for those who may not have a smartphone.</li></ul>
  493. </article>
  494. </section>
  495. <nav id="jumpto">
  496. <p>
  497. <a href="/david/blog/">Accueil du blog</a> |
  498. <a href="https://medium.com/backchannel/a-teenagers-view-on-social-media-1df945c09ac6">Source originale</a> |
  499. <a href="/david/stream/2019/">Accueil du flux</a>
  500. </p>
  501. </nav>
  502. <footer>
  503. <div>
  504. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  505. <p>
  506. Bonjour/Hi!
  507. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  508. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  509. </p>
  510. <p>
  511. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  512. </p>
  513. <p>
  514. Voici quelques articles choisis :
  515. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  516. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  517. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  518. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  519. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  520. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  521. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  522. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  523. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  524. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  525. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  526. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  527. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  528. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  529. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  530. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  531. </p>
  532. <p>
  533. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  534. </p>
  535. <p>
  536. Je ne traque pas ta navigation mais mon
  537. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  538. conserve des logs d’accès.
  539. </p>
  540. </div>
  541. </footer>
  542. <script type="text/javascript">
  543. ;(_ => {
  544. const jumper = document.getElementById('jumper')
  545. jumper.addEventListener('click', e => {
  546. e.preventDefault()
  547. const anchor = e.target.getAttribute('href')
  548. const targetEl = document.getElementById(anchor.substring(1))
  549. targetEl.scrollIntoView({behavior: 'smooth'})
  550. })
  551. })()
  552. </script>