Contentious Images: Handing Image Content for the Multi Device Web

When did "image" become such a dirty word? In these days of forging a multi-device web, most of the advice regarding handling images has revolved around cutting them down to size, by both pixels and bytes. This advice ignores that images aren't always just supplemental, existing only to accompany articles and add flare to content. There are many situations – such as webcomics, portfolios, and infographics — where images are the content. So let me show you what to do with them.

Transcript

1. STYLE & CLASS Handling Image Content for the Multi-Device Web CONTENTIOUS
2. BEFORE WE GET STARTED… JACKY GILBERTSON jackygilbertson
3. WHAT ABOUT THE IMAGES? Text what if the IMAGES are the CONTENT?
4. WHAT ABOUT THE IMAGES? Text
5. WHAT ABOUT THE IMAGES? Text READABILITY OVERVIEW VS. DETAIL FLOW NAVIGATION
6. WHAT ABOUT THE IMAGES? Text so, how about some EXAMPLES?
7. THE EXAMPLES INFOGRAPHIC Text Source: whoishostingthis.com
8. THE EXAMPLES INFOGRAPHIC Text Source: futurist.com
9. THE EXAMPLES PORTFOLIO Source: eparsonsphotography.ca
10. THE EXAMPLES PORTFOLIO
11. THE EXAMPLES WEBCOMIC Text
12. Source: gunnerkriggcourt.com
15. THE EXAMPLES Text WEBCOMIC Readability, Flow, Navigation PORTFOLIO Overview, Detail, Navigation INFOGRAPHIC Readability, Detail, Flow
16. METHOD ONE... Text THE SCROLL ALL OVER
17. METHOD ONE... FEATURES
18. METHOD ONE... EXAMPLES
19. METHOD ONE... ISSUES
20. METHOD ONE... IMPLEMENTATION & TIPS Check out an example on Codepen: cdpn.io/tDJIg
21. METHOD TWO... THE POP& ZOOM
22. METHOD TWO... FEATURES
23. METHOD TWO... FEATURES Tip! Enable pinch & zoom so the user can see more detail if they like
24. METHOD TWO... EXAMPLES
25. METHOD TWO... ISSUES
26. METHOD TWO... IMPLEMENTATION & TIPS + HAMMER.JS eightmedia.github.io/hammer.js MAGNIFIK mobify.github.io/magnifik
27. METHOD THREE... THE SLICE &SLIDE
28. METHOD THREE... FEATURES
29. METHOD THREE EXAMPLES
30. METHOD THREE... ISSUES
31. METHOD THREE... ISSUES
32. METHOD THREE... IMPLEMENTATION & TIPS SCOOCH mobify.github.io/scooch ›
33. METHOD THREE... IMPLEMENTATION & TIPS
34. METHOD FOUR... THE GUIDED VIEW
35. METHOD FOUR... FEATURES
36. METHOD FOUR... EXAMPLES
37. METHOD FOUR... ISSUES
38. METHOD FOUR... ISSUES
39. METHOD FOUR... IMPLEMENTATION & TIPS ZURB JOYRIDE A feature tour tool that could be repurposed. github.com/zurb/joyride
40. METHOD FOUR... IMPLEMENTATION & TIPS Check out an example on Codepen: cdpn.io/flIyK
41. WHAT ABOUT THE IMAGES? Text so, what’s the SOLUTION?
42. WHAT ABOUT THE IMAGES? Text THANKS questions?