Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
•
0 likes•150 views
Asia Ryćko, Agnieszka Sekuła http://stukotpikseli.pl Trójmiasto, Polska Typography on-line Abstract We will show practical application of typography on web pages. We will present how good on-line typography can impact position in Google search and displaying a web site on devices with varying display sizes. You will also get some tips on how to achieve those benefits. Typografia online Streszczenie Pokażemy praktyczne zastosowanie typografii stron internetowych. Przedstawimy korzyści płynące z dobrej typografii online w zakresie lepszego pozycjonowania w Google i wyświetlania strony na urządzeniach o różnych rozmiarach i formatach ekranów. Podpowiemy, w jaki sposób można te korzyści osiągnąć. http://www.gust.org.pl/bachotex/2015
Report
Share
Related slideshows
Asia Ryćko, Agnieszka Sekuła: Typography online | BachoTeX 2015
- 1. Typography online Asia Ryćko & Agnieszka Sekuła BachoTeX 2015
- 2. Who are we? we love: beauAful design, IT, minimalism, web, good coffee and bicycles
- 3. What do you associate with the following two slides?
- 6. τύπος + γράφειν = τυπογραφία form I write typography
- 7. I say: “typography”. What comes to your mind?
- 8. Maslow’s hierarchy of needs physiology safety love & belonging esteem self-‐actualizaAon beauty & aestheAcs truth & good
- 9. Selec@on physiology beauty & aestheAcs
- 11. physiology beauty aestheAcs Typography online
- 12. physiology beauty aestheAcs comfort percepAon accessibility highlight saleslegibility user-‐friendly relax
- 13. Specificity of web typography
- 14. Informa@on
- 15. TL;DR too long; didn’t read
- 16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis porttitor augue at tempus. Nam id tortor vitae nulla hendrerit sollicitudin. Quisque vitae nisl neque. Maecenas quis velit mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a velit at dolor scelerisque malesuada. Maecenas odio ante, posuere eget lacinia et, dapibus et justo. Suspendisse condimentum, ante ac pharetra blandit, sem tellus euismod lacus, et tristique lorem nisl et justo. Morbi volutpat ex nec auctor faucibus. Vestibulum efficitur lobortis elit quis tincidunt. Vivamus ex velit, vestibulum ut porta id, efficitur eget leo. Aenean eget eros sit amet ante ultricies lacinia.
- 17. Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis por6tor augue at tempus. Nam id tortor vitae nulla hendrerit sollicitudin. Quisque vitae nisl neque. Maecenas odio • maecenas odio ante • posuere eget lacinia et • dapibus et justo
- 18. SEO
- 19. <h1> <h2> <h2> <h3> <h3> <h3> <h3>
- 20. <strong> vs. <b> <em> vs. <i>
- 21. Space
- 30. With correct viewport set smartphone
- 31. Comparision
- 32. SeNng viewport <meta name="viewport" content="width=device-‐width, ini5al-‐scale=1”> Worth reading: h9ps://developers.google.com/speed/docs/insights/ConfigureViewport (more on viewport and different kind of pixels)
- 33. Good prac@ces • base font size about 16px (100%) • font sizes rela@ve to base (rem, em) • line-‐height about 1.2em • restrict number of different typefaces depending on typeface
- 35. Change & mo@on
- 36. InteracAve CSS based animaAon: h9p://www.rleonardi.com/
- 37. An example of a dynamic, responsive web page: h9p://demo.tardigradestudio.com – Keylight No@ce: • different layouts for different media format • dynamic links • animaAons • scrolling • flexibility • interacAve elements increasing sales
- 41. Double func@on
- 43. Tech
- 44. Quality of fonts
- 45. – Jason Santa Maria “On Web Typography” “It doesn’t maeer how well-‐considered your layout is, how wonderful your website’s interacAons, code, colors, imagery, or wriAng are. If your type is bad, the design fails.”
- 46. Contact us: stukotpikseli.pl Thanks to: Łukasz for Lato Kamil for great insights Marek & Miłosz for the photos Hrabia for being a Cat :-‐)
- 47. Pictures in order of appearance • stukot pikseli logo: Stukot Pikseli • Asia & Agnieszka: Marek Ryćko • crowd: Public Domain • pictures wall: Public Domain • woman with baloons: Public Domain • cat: Public Domain • couch & coffee: Public Domain • red piece of architecture: Public Domain • book: Public Domain • black cat: Miłosz Bożeński (cat: Hrabia) • striped cat (gif): h9p://usvsth3m.com/post/61110459038/scienXsts-‐why-‐do-‐cats-‐like-‐boxes • bike party: h9ps://flic.kr/p/99oSj5 Volker Neumann – SF Bike Party 1 – CC BY-‐NC-‐SA 2.0 • flat screen TV: “LG smart TV” by LG전자 – 세계 명화가 LG 스마트 TV 속으로. Licensed under CC BY 2.0 via Wikimedia Commons – h9p:// commons.wikimedia.org/wiki/File:LG_smart_TV.jpg#/media/File:LG_smart_TV.jpg • mobile devices: h9ps://flic.kr/p/pYeY8S Selbe <3 – Comparing – CC BY-‐NC-‐ND 2.0 • iWatch: h9p://technabob.com/blog/2014/09/09/apple-‐watch-‐iwatch/ • think outside the box: h9ps://flic.kr/p/99oSj5 Volker Neumann • screenshots of the viewport sepngs: Agnieszka Sekuła, based on an arAcle: h9ps://developers.google.com/speed/docs/insights/ConfigureViewport • First animated demo: www.rleonardi.com/ – screencast by Asia Ryćko • Second animated demo: h9p://demo.tardigradestudio.com/themes/keylight – screencast by Asia Ryćko • woman with a tablet in the sun – Public Domain • man with a smartphone in the dark – Public Domain • black & white screenshot with links – h9p://poprostu.gda.pl – screenshot by Asia Ryćko, web design Asia Ryćko 2008 • screenshot of Google Fonts – Asia Ryćko