Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

This Viz

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Carys Jenkins Carys Jenkins
October 06, 2015
150
0

This Viz

Thesis Presentation

Avatar for Carys Jenkins

Carys Jenkins

October 06, 2015

More Decks by Carys Jenkins

See All by Carys Jenkins
thesis-prototype.pdf
Avatar for Carys Jenkins carysjenkins
0
190
Thesis Presentation: Delight
Avatar for Carys Jenkins carysjenkins
0
69
Thesis Presentation: Firmness
Avatar for Carys Jenkins carysjenkins
0
37
Thesis Presentation: Cultural Context
Avatar for Carys Jenkins carysjenkins
0
86
Thesis Presentation: Commodity
Avatar for Carys Jenkins carysjenkins
0
84
'How Our Websites Are Used' - Analytics
Avatar for Carys Jenkins carysjenkins
0
110

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
280
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
36k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
340
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k

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