Death, Taxes &                      Viewport Chrome                           the only thing certain is uncertainty itself...
About Me                   ✤ Jason Pamental                           Web Strategist, Designer, Technologist              ...
Few Things Are                              Certain                   ✤ We’ll all die eventually                   ✤ Usual...
You Don’t Know                                Jack                   ✤ Where we admit we know nothing                   ✤ ...
But one more little                       challenge...                           .com           #eduiconfMonday, September...
You Don’t Know                           Your User, Either                   ✤ Impossible to know how your design         ...
We’re Not                           Designing Pages                   ✤ We’re designing systems of                        ...
We’re Designing                              Meaning                   ✤ Design is about conveying                        ...
We’re Designing                              Meaning                   ✤ Design is about conveying                        ...
We’re Designing                              Meaning                   ✤ Design is about conveying                        ...
We’re Designing                              Meaning                   ✤ Design is about conveying                        ...
Psychology &                  Cognitive Science                  are The New Black                   ✤ In order to preserv...
Everything’s                                     Relative                   ✤ Every element on screen has                 ...
Location, Location                        Location                   ✤ Desktops are used, well –                          ...
Location, Location                        Location                   ✤ Desktops are used, well –                          ...
Location, Location                        Location                   ✤ Desktops are used, well –                          ...
Location, Location                        Location                   ✤ Desktops are used, well –                          ...
Your Mileage Will                            Vary                   ✤ With every device & kind of usage                   ...
Please Pass the                                Gestalt                   ✤ Our attention is drawn                         ...
Please Pass the                                Gestalt                   ✤ Our attention is drawn          A Big Headline ...
Please Pass the                                Gestalt                   ✤ Our attention is drawn          A Big Headline ...
Please Pass the                                Gestalt                   ✤ Our attention is drawn          A Big Headline ...
Please Pass the                                Gestalt                   ✤ Our attention is drawn          A Big Headline ...
Task-Appropriate                       Design is the                     OTHER New Black                   ✤ A place for e...
Task-Appropriate                       Design is the                     OTHER New Black                   ✤ A place for e...
Task-Appropriate                       Design is the                     OTHER New Black                   ✤ A place for e...
It’s not the What                but the Why & How                   ✤ Josh Clark: ‘I have some attention to              ...
For Example                   ✤ Restaurant site on a phone:                           What I can eat & how do I           ...
For Example                   ✤ Restaurant site on a phone:                           What I can eat & how do I           ...
For Example                   ✤ Restaurant site on a phone:                           What I can eat & how do I           ...
For Example                   ✤ Restaurant site on a phone:                           What I can eat & how do I           ...
The Medium Is the                       Message                   ✤ But the device capabilities should                    ...
Re-think Your                           Design Thinking                           .com              #eduiconfMonday, Septe...
Design by Sharpie                   ✤ Sketch out your design                           with a fat tip marker to           ...
Design by Sharpie                   ✤ Sketch out your design                           with a fat tip marker to           ...
Design by Sharpie                   ✤ Sketch out your design                           with a fat tip marker to           ...
Design by Sharpie                   ✤ Sketch out your design                           with a fat tip marker to           ...
Research, Research,               Research. Repeat.                   ✤ Responsive Design is new                   ✤ UI pa...
Research, Research,               Research. Repeat.                   ✤ Responsive Design is new                   ✤ UI pa...
Research, Research,               Research. Repeat.                   ✤ Responsive Design is new                   ✤ UI pa...
Since We Know Real                  Designers Code...                   ✤ Why not stretch a bit, explore those            ...
Getting Started is                            Getting Better                   ✤ There is no excuse for Arial any more    ...
Why Harp on This?                   ✤ Because designing a page in                           Photoshop is simply fantasy   ...
What’s That                Viewport Bit, Then?                   ✤ A school in Amman, Jordan has over 22%                 ...
You Gotta Know                What You Don’t Know                   ✤ Responsive & Adaptive Design is                     ...
Be Prepared                   ✤ You know design                   ✤ You know your client (or you should)                  ...
and don’t forget...                           .com             #eduiconfMonday, September 24, 12
Declare the Pennies                     on Your Eyes                   ✤ (You need a Beatles reference. Just because.)    ...
Now Get Out & Go                    Make Something                       Awesome                                         H...
Thank You!                                  Jason Pamental (@jpamental)                                   jason@thinkingin...
Resources                   ✤ Mobile UI Patterns:                           http://mobile-patterns.com/dashboard-navigatio...
Books                   ✤ Responsive Web Design                           Ethan Marcotte, A Book Apart                   ✤...
Upcoming SlideShare
Loading in...5
×

Death, Taxes & Viewport Chrome: Designing for Uncertainty

699
-1

Published on

Some things are certain: death, taxes, and–if you’re a web professional–the inability to know the capabilities, access speed, and dimensions of the viewport through which your design is viewed. As a designer, you must know how your content and design will be consumed before you can prepare its presentation. Web CMS’s can deliver on the technology and content management, but you must know how to design and create buildable, sustainable designs that move and scale from the smallest screens to the largest. Remember: you’re designing a responsive system of visual hierarchy, not simply a page.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Death, Taxes & Viewport Chrome: Designing for Uncertainty

  1. 1. Death, Taxes & Viewport Chrome the only thing certain is uncertainty itself edUI Conference (#eduiconf) Jason Pamental (@jpamental) 24 September 2012 thinkinginpencil.com .comMonday, September 24, 12
  2. 2. About Me ✤ Jason Pamental Web Strategist, Designer, Technologist ✤ Have been a strategist, designer, developer & cat-pixel-wrangler since roughly the launch of Netscape 1 ✤ Can be found @jpamental in most places ✤ Post thoughts, work & pics from Instagr.am @ thinkinginpencil.com .com #eduiconfMonday, September 24, 12
  3. 3. Few Things Are Certain ✤ We’ll all die eventually ✤ Usually after paying a lot of taxes ✤ We have no idea how someone is going to view our design – none ✤ Really. Think about that last one .com #eduiconfMonday, September 24, 12
  4. 4. You Don’t Know Jack ✤ Where we admit we know nothing ✤ I kid, I kid... sorta ✤ HTML5, CSS3 & Web Fonts: game has changed in the past year or 2 ✤ Device/Platform multiplier mayhem no way to keep up with all of them ✤ At a bigger inflection point than any before: only a short time from ‘desktop’ being a minority .com #eduiconfMonday, September 24, 12
  5. 5. But one more little challenge... .com #eduiconfMonday, September 24, 12
  6. 6. You Don’t Know Your User, Either ✤ Impossible to know how your design will be consumed ✤ Or what else they might be doing at the time ✤ Desktop/Laptop/Tablet/eReader/ Phone/Console/TV/Car ✤ So what DO you know? Design (and that’s more than coloring pixels) .com #eduiconfMonday, September 24, 12
  7. 7. We’re Not Designing Pages ✤ We’re designing systems of relationships & hierarchy to infer meaning & importance ✤ Good design has structure – but that structure must be fluid ✤ 960 pixels is a copout. Our work will be viewed on phones, tablets, tv’s – more than on computers as we know them .com #eduiconfMonday, September 24, 12
  8. 8. We’re Designing Meaning ✤ Design is about conveying information & understanding .comMonday, September 24, 12
  9. 9. We’re Designing Meaning ✤ Design is about conveying information & understanding ✤ Information & understanding must hold true no matter how its conveyed .comMonday, September 24, 12
  10. 10. We’re Designing Meaning ✤ Design is about conveying information & understanding ✤ Information & understanding must hold true no matter how its conveyed ✤ How users understand & learn is as crucial as how they see .comMonday, September 24, 12
  11. 11. We’re Designing Meaning ✤ Design is about conveying information & understanding ✤ Information & understanding must hold true no matter how its conveyed ✤ How users understand & learn is as crucial as how they see ✤ Start with semantics & adapt your presentation to the Logo Nav capabilities of the device on <H1> <P> which your design is viewed .comMonday, September 24, 12
  12. 12. Psychology & Cognitive Science are The New Black ✤ In order to preserve meaning & reinforce understanding, you must know how learning works ✤ Once you know how learning works, you can tailor your system of design ✤ That system of visual & information hierarchy can survive across platforms & screen sizes .com #eduiconfMonday, September 24, 12
  13. 13. Everything’s Relative ✤ Every element on screen has importance (or it should) ✤ Importance is learned by its relationship to everything else on the screen ✤ Know tools that convey hierarchy: color, type, size, visual cues (underline, shape) ✤ Must hold up when the screen size changes or input mode shifts .com #eduiconfMonday, September 24, 12
  14. 14. Location, Location Location ✤ Desktops are used, well – at a desk .comMonday, September 24, 12
  15. 15. Location, Location Location ✤ Desktops are used, well – at a desk ✤ Laptops might be in a coffee shop .comMonday, September 24, 12
  16. 16. Location, Location Location ✤ Desktops are used, well – at a desk ✤ Laptops might be in a coffee shop ✤ Tablets prefer couches (highest usage in evening) .comMonday, September 24, 12
  17. 17. Location, Location Location ✤ Desktops are used, well – at a desk ✤ Laptops might be in a coffee shop ✤ Tablets prefer couches (highest usage in evening) ✤ Phones fill the gaps... all of them (in line, in the car, on the train, in bed, in the loo – yes, there too) .comMonday, September 24, 12
  18. 18. Your Mileage Will Vary ✤ With every device & kind of usage comes a differing level of focus ✤ Focus of attention & mode of input dictates your design approach ✤ Size matters – but attention matters more ✤ What the user is ALSO doing at the time matters is even more critical .com #eduiconfMonday, September 24, 12
  19. 19. Please Pass the Gestalt ✤ Our attention is drawn by contrast .comMonday, September 24, 12
  20. 20. Please Pass the Gestalt ✤ Our attention is drawn A Big Headline by contrast ✤ An <h1> is bigger than a <p> for a reason .comMonday, September 24, 12
  21. 21. Please Pass the Gestalt ✤ Our attention is drawn A Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress ✤ An <h1> is bigger solely determined by Ahabs level log and line; the Pequod held on her path than a <p> for a reason towards the Equator. Making ✤ Conventions are your so long a passage through such un- Frenemies frequented waters, descrying no ships, and ere long, side- ways impelled by unvarying trade winds, over waves monotonously mild; all these seemed the strange calm things preluding some riotous and desperate scene. .comMonday, September 24, 12
  22. 22. Please Pass the Gestalt ✤ Our attention is drawn A Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress ✤ An <h1> is bigger solely determined by Ahabs level log and line; the Pequod held on her path than a <p> for a reason towards the Equator. Making “ Mend it, eh? ✤ Conventions are your so long a passage I think we through such un- had best have Frenemies frequented waters, a new line descrying no ships, ✦ Use them to reduce and ere long, side- altogether.” cognitive barriers ways impelled by unvarying trade winds, over waves monotonously mild; all these seemed the strange calm things preluding some riotous and desperate scene. .comMonday, September 24, 12
  23. 23. Please Pass the Gestalt ✤ Our attention is drawn A Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress ✤ An <h1> is bigger solely determined by Ahabs level log and line; the Pequod held on her path than a <p> for a reason towards the Equator. Making “ Mend it, eh? ✤ Conventions are your so long a passage I think we through such un- had best have Frenemies frequented waters, a new line descrying no ships, ✦ Use them to reduce and ere long, side- altogether.” cognitive barriers ways impelled by unvarying trade winds, over waves monotonously mild; ✦ Defy them & create all these seemed the strange calm unexpected contrast things preluding some riotous and desperate scene. .comMonday, September 24, 12
  24. 24. Task-Appropriate Design is the OTHER New Black ✤ A place for everything & everything in its place .com #eduiconfMonday, September 24, 12
  25. 25. Task-Appropriate Design is the OTHER New Black ✤ A place for everything & everything in its place ✤ But the place might be different on a phone... or in a car .com #eduiconfMonday, September 24, 12
  26. 26. Task-Appropriate Design is the OTHER New Black ✤ A place for everything & everything in its place ✤ But the place might be different on a phone... or in a car ✤ As may be the importance of some tasks versus others .com #eduiconfMonday, September 24, 12
  27. 27. It’s not the What but the Why & How ✤ Josh Clark: ‘I have some attention to spend’ – but how are they spending it? ✤ @LukeW: with one eye & one thumb ✤ There is no mobile user – there are only mobile devices ✤ Tasks vary by circumstances of use (the why) ✤ How users accomplish those tasks varies by device capability (hover, touch, swipe) .com #eduiconfMonday, September 24, 12
  28. 28. For Example ✤ Restaurant site on a phone: What I can eat & how do I get there? .com #eduiconfMonday, September 24, 12
  29. 29. For Example ✤ Restaurant site on a phone: What I can eat & how do I get there? ✤ Non-profit on a laptop: Are they for real, who’s involved, how do I help? .com #eduiconfMonday, September 24, 12
  30. 30. For Example ✤ Restaurant site on a phone: What I can eat & how do I get there? ✤ Non-profit on a laptop: Are they for real, who’s involved, how do I help? ✤ eBay from either: I want to buy that Ferrari now. Really. .com #eduiconfMonday, September 24, 12
  31. 31. For Example ✤ Restaurant site on a phone: What I can eat & how do I get there? ✤ Non-profit on a laptop: Are they for real, who’s involved, how do I help? ✤ eBay from either: I want to buy that Ferrari now. Really. ✤ Contexts may coincide with one case or the other – but neither should exclude the other behavior .com #eduiconfMonday, September 24, 12
  32. 32. The Medium Is the Message ✤ But the device capabilities should dictate how you present it ✤ Hover on a desktop aids exploration & speeds browsing ✤ Touching/swiping on a small screen is more natural (but don’t forget about fat fingers. Again: size matters) .com #eduiconfMonday, September 24, 12
  33. 33. Re-think Your Design Thinking .com #eduiconfMonday, September 24, 12
  34. 34. Design by Sharpie ✤ Sketch out your design with a fat tip marker to quickly sort out hierarchy .com #eduiconfMonday, September 24, 12
  35. 35. Design by Sharpie ✤ Sketch out your design with a fat tip marker to quickly sort out hierarchy ✤ Try 3 or 4 sizes & adjust relative scale .com #eduiconfMonday, September 24, 12
  36. 36. Design by Sharpie ✤ Sketch out your design with a fat tip marker to quickly sort out hierarchy ✤ Try 3 or 4 sizes & adjust relative scale ✤ Don’t forget about BIG (#RWD isn’t just for smartphones you know) .com #eduiconfMonday, September 24, 12
  37. 37. Design by Sharpie ✤ Sketch out your design with a fat tip marker to quickly sort out hierarchy ✤ Try 3 or 4 sizes & adjust relative scale ✤ Don’t forget about BIG (#RWD isn’t just for smartphones you know) ✤ Now interaction: what’s natural to the device & method of use .com #eduiconfMonday, September 24, 12
  38. 38. Research, Research, Research. Repeat. ✤ Responsive Design is new ✤ UI patterns evolving, but conventions are emerging .com #eduiconfMonday, September 24, 12
  39. 39. Research, Research, Research. Repeat. ✤ Responsive Design is new ✤ UI patterns evolving, but conventions are emerging ✤ Native Apps work: think about why .com #eduiconfMonday, September 24, 12
  40. 40. Research, Research, Research. Repeat. ✤ Responsive Design is new ✤ UI patterns evolving, but conventions are emerging ✤ Native Apps work: think about why ✤ Some App UI patterns can be used on the web .com #eduiconfMonday, September 24, 12
  41. 41. Since We Know Real Designers Code... ✤ Why not stretch a bit, explore those adjacent skills & experiment? ✤ You could even crack a book (or at least watch a video) ✤ One size does not fit all: jQuery Mobile & media queries – appropriate experience based on device capabilities .com #eduiconfMonday, September 24, 12
  42. 42. Getting Started is Getting Better ✤ There is no excuse for Arial any more ✤ Or ‘plug-in not found’ ✤ Or ‘This site best viewed in NetFox Safari Explorer Version 47’ ✤ Modernizr, HTML5 Boilerplate, LESS, SASS/ Compass, Adaptive Images & more .com #eduiconfMonday, September 24, 12
  43. 43. Why Harp on This? ✤ Because designing a page in Photoshop is simply fantasy ✤ Worse: designing just a page is only 1/400th of the answer (or less) ✤ Even prototyping in static HTML only tells part of the story (though doing so responsively is a start) .com #eduiconfMonday, September 24, 12
  44. 44. What’s That Viewport Bit, Then? ✤ A school in Amman, Jordan has over 22% mobile traffic ✤ Ford, Toyota shipping app-filled interfaces in 2012: Pandora streamed to your dashboard ✤ 50% of US mobile subscribers own a smartphone ✤ Kindle Fire: 7” color tablet for $199, Webkit- based browser ✤ The revolution WILL be televised: Samsung has put apps on your TV .com #eduiconfMonday, September 24, 12
  45. 45. You Gotta Know What You Don’t Know ✤ Responsive & Adaptive Design is about anticipating the unknown ✤ This has the benefit of being MUCH more flexible and fault-tolerant ✤ WAY easier when editing a couple files – not a couple hundred ✤ Know what else you don’t know? What comes next .com #eduiconfMonday, September 24, 12
  46. 46. Be Prepared ✤ You know design ✤ You know your client (or you should) ✤ You know the web & what can be done on it ✤ Don’t stop looking, seeing & learning ✤ Use a framework or CMS to help ✤ Design meaning not pages .com #eduiconfMonday, September 24, 12
  47. 47. and don’t forget... .com #eduiconfMonday, September 24, 12
  48. 48. Declare the Pennies on Your Eyes ✤ (You need a Beatles reference. Just because.) ✤ Platforms are smarter: leaner, more semantic markup & more reliable device capability detection ✤ Tons of resources – easy to find ✤ Being curious begets curiosity ✤ Every step reveals a new point of view .com #eduiconfMonday, September 24, 12
  49. 49. Now Get Out & Go Make Something Awesome Hello. make I’m a web professional and I Awesome Uncertainty FTW .com #eduiconfMonday, September 24, 12
  50. 50. Thank You! Jason Pamental (@jpamental) jason@thinkinginpencil.com .com #eduiconfMonday, September 24, 12
  51. 51. Resources ✤ Mobile UI Patterns: http://mobile-patterns.com/dashboard-navigation ✤ LukeW’s Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514 ✤ Navicon (blog post) Jeremy Keith (excellent post w/lots of references) .com #eduiconfMonday, September 24, 12
  52. 52. Books ✤ Responsive Web Design Ethan Marcotte, A Book Apart ✤ Adaptive Web Design Aaron Gustafson, Easy Readers ✤ Mobile First Luke Wroblewski, A Book Apart ✤ Don’t Make Me Think Steve Krug (really - you still have to read it) ✤ The Design of Everyday Things Don Norman (web usability learned from the design of doors) .com #eduiconfMonday, September 24, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×