Upgrade to Pro — share decks privately, control downloads, hide ads and more …

This Viz

Avatar for Carys Jenkins Carys Jenkins
October 06, 2015
0
120

This Viz

Thesis Presentation

Avatar for Carys Jenkins

Carys Jenkins

October 06, 2015
Tweet

More Decks by Carys Jenkins

See All by Carys Jenkins
thesis-prototype.pdf
Avatar for Carys Jenkins carysjenkins
0
180
Thesis Presentation: Delight
Avatar for Carys Jenkins carysjenkins
0
64
Thesis Presentation: Firmness
Avatar for Carys Jenkins carysjenkins
0
33
Thesis Presentation: Cultural Context
Avatar for Carys Jenkins carysjenkins
0
82
Thesis Presentation: Commodity
Avatar for Carys Jenkins carysjenkins
0
72
'How Our Websites Are Used' - Analytics
Avatar for Carys Jenkins carysjenkins
0
110

Featured

See All Featured
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
It's Worth the Effort
Avatar for 3n 3n
188
29k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k

Transcript

  1. THIS VIZ making infographics interactive

  2. What does This Viz stand for? This Viz looks to

    present interactive infographics that not only tell a story, but engages the user This Visual… Information

  3. 1. What is This Viz? 2. Why? 4. What’s the

    site made from? 6. SVG fun! 3. Aims & Audience 5. Schedule 7. Testing 8. The site!

  4. Why? Most infographics on the web are static… and pixelated!

  5. More and more SVG support! caniuse.com

  6. Aims 1. show ideas, issues, and data in an interactive

    and visual way 2. have users engage with content 3. show what web tech has to offer to the world of infographics!

  7. Audience *Google Analytics Age: 25-35-ish Pinterest & Social Media Addicts

    interested in global issues Loves visual content!

  8. What makes up This Viz? PHP includes SVGs PNG fallbacks

    articles (text) HTML5 CSS CSS Animations

  9. Proposed Schedule…

  10. Reality

  11. Proposed Schedule…

  12. Reality

  13. SVG what?! Scalable Vector Graphics

  14. Keeping SVG… Inline the… DOM

  15. SVG what?! You can target it with CSS! Add some

    id’s! change up colours! Add image files!

  16. We need a fallback for that! PNG

  17. Placing those fallbacks… *thanks Sara Soueidan :)

  18. Let’s test this thing! It works! *browserstack live testing with

    IE 8

  19. Testing YAY! Hmm CSS Anim ations YAY! YAY! YAY! YAY!

    YAY! YAY-ISH! YAY! YAY! SVG

  20. Let’s check it out! thisviz.com