Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ready to go Mobile? 
Jeremy Johnson 
Director of User Experience @
@jeremyjohnson 
(yes, we’re hiring)
http://www.slideshare.net/jeremy/presentations
WORKED FOR
WORKED WITH
Uncover user needs, 
Design great solutions, 
and build out solutions to launch.
https://twitter.com/designoutloud/statuses/480785095331037184
*
http://www.cultofmac.com/145083/what-phones-looked-like-before-and-after-the-iphone-transformed-the-industry-image/
email web browsing 
video 
music 
messaging 
camera
http://www.picsean.com/device-and-screen-size-proliferation-a-challenge-to-magazine-publishers/
http://www.techetron.com/13443/iphone-6-know/
“What would you like to do on 
your mobile devices?”
“Or why Responsive Design is a magic bullet”
3 Tips for going 
Mobile / 
Responsive
“Mobile First”
Limiting feature set (MVP) 
Simplifying experiences 
Mobile not an “after-thought”
“MVP” 
Most Viable Product 
vs. 
Most Valuable Product
3 Tips for going 
Mobile / 
Responsive
#1 CONTEXT
CONTEXT 
I’m at home I’m on the road I’m at work 
When you’re at home your usage could be different from 
when you’re on t...
*COUCHING 
A number of people are reaching for their phone instead of 
going to their desks, or using their laptops (or ev...
https://twitter.com/lukew/status/509063072162775040/photo/1
How do you 
create feature 
parity across 
devices?
*SNACKING 
Remember before smartphones? Waiting in line, waiting for a 
meeting to start, waiting to pick up our kids, in ...
How do you 
create content 
that can be 
consumed 
quickly?
Questions to ask? 
Does your experience need to work in 
different contexts? 
A User’s Location? Time of day? Different de...
“Tell me about how you use your devices 
at different times of the day?” 
Morning Afternoon Night
“Tell me about how you use your devices 
at different times of the day?” 
Morning Afternoon Night
Morning Afternoon Night 
Home Work Outing 
Process 1 Process 2 Process 3
http://www.slideshare.net/burinb/designing-for-time-travel-when-responsive-design
Questions to ask? 
Do you need to shorten your experience? 
Is this something they’ll focus on? Or something 
they just ne...
“Will you use these features on mobile?” 
Yes No Maybe…
“Map each feature to how much time 
they’ll spend using it on a mobile device" 
1-5mins 20mins 45+mins
CONTEXT = 
Determining if your users need all of the 
things all of the time - and will they 
need specific interfaces or ...
https://twitter.com/WhytheFux/status/431449112589111296
PERSONAS
http://jackfruitmalaysia.wordpress.com/2011/04/02/how-is-jackfruit-prepared/
“Dashboard” 
Time on Task 
Alerts 
Communication 
Full Application 
Order entry 
Lookup 
Maps 
MANAGER AGENT
“All the Things!” 
“AT HOME” AGENT
Speed 
Accuracy 
Company Policy 
Sales Quota 
AGENT 
Service 
Knowledge 
Complex Trips 
Packages 
“AT HOME” AGENT
“James” “Randy” “Bobby”
http://blog.mailchimp.com/new-mailchimp-user-persona-research/
#2 PREPARE 
YOUR CONTENT
CONTENT 
Will your content scale to mobile? Do you have legacy 
content you need to reformat or even rethink? Are 
your im...
Is your content ready for mobile?
RESPONSIVE
■ Services / APIs 
■ Video compression 
■ Content size / compression 
■ Vendors (chat, reviews, images, 
“widgets” etc…) 
...
#3 PROTOTYPING
CONCEPT 
What is the best way to create usable, enjoyable, fast 
experiences for your users or customers? Do you need 
new...
“Agile methods like Scrum and 
XP both rely on a close and 
collaborative relationship and 
continual interaction with the...
(literally 100s) 
http://looksgoodworkswell.blogspot.com/2012/11/list-of-mockupprototyping-tools.html 
http://www.adaptive...
are we building the right things? 
valuable 
usable 
enjoyable 
Is it easy to use? 
Do they want to use it?
Keep/Kill Prototype 
Evaluate 
(Build) 
Test 
(Measure) 
(Learn)
3 Tips for going 
Mobile / Responsive 
#1 CONTEXT 
#2 CONTENT 
#3 CONCEPT
Austin / Dallas / Seattle
Design + Technology
People + Technology
We don’t just ask. We observe.
Concept Validation 
Contextual Inquiries 
Usability Study 
Customer Validation
http://www.mindtheproduct.com/2012/08/how-user-research-can-help-prioritise-product-requirements/
I’m ready. 
What’s next? 
■ Do I go native? 
■ What about Hybrid solutions? 
■ Can I just go web?
NATIVE. 
Why Native? 
■ Most fluid/fast experience 
■ Easier to move to new iOS versions 
■ Not dependent on 3rd party API...
HYBRID. 
Why Hybrid? 
■ Less burden on native resources 
■ More reuse across properties 
■ Use native where it makes sense...
HYBRID CAN MEAN… 
■ Written in JS, but compiled to native Android & iOS 
(ex. titanium) 
■ Written in C#, but compiled to ...
Native Component 
Native Component 
Web Content 
(webview) 
Native Component 
“…we doubled down on 
native navigation, whi...
WEB. 
Why Web? 
■ Reuse your current base of web developers 
■ Have a product reason to have the same 
experience on a .co...
RESPONSIVE 
= 
ADAPTIVE
RESPONSIVE 
Responsive is where you have all the same features of 
your current site but via breakpoints it “responds” 
do...
OUR RESPONSIVE APPROACH 
OUR APPROACH 
■ The biggest mental shift in design/dev for responsive is learning to think fluidl...
RESPONSIVE IS BECOMING MORE MATURE 
A number of good, solid frameworks (if needed) 
http://getbootstrap.com/ 
http://found...
Google: Bad User Experience For Mobile Users 
May Lead To Ranking Issues 
“Because at Google we are aiming to provide a 
g...
http://www.google.com/think/multiscreen/whitepaper-sitedesign.html
ADAPTIVE 
Adaptive is where you have custom templates per 
device type you want to target. This works best when 
you have ...
ADAPTIVE 
How do I know what our user’s needs are, 
and if they’re different? 
Qualitative Quantitative
ADAPTIVE 
ex. “Via observation we found out that your users will 
only use alerts and limited content when on the go.” 
ex...
Concept Validation 
Contextual Inquiries 
Usability Study 
Customer Validation
Web Hybrid Native
Web Hybrid Native
DESIGN
Fluid Breakpoints 
#1 #2 #3
#1
#2
#3
Fluid
#1 
Business Innovations 324,872 45% VIEW 
Business Innovations 324,872 45% VIEW 
Business Innovations 324,872 45% VIEW 
B...
#2 
Business Innovations 324,872 45% VIEW 
Business Innovations 324,872 45% VIEW 
Business Innovations 324,872 45% VIEW 
B...
Business Innovations 
324,872 
VIEW 
45% 
#3 
Business Innovations 
324,872 
VIEW 
45%
CASE STUDY 
(RESPONSIVE)
Start with a fluid grid
Content Inventory
Breakpoints for devices 
(But, keep it fluid) 
1 2
Be thoughtful about your breakpoints and how 
it works with your content. 
1 2
Tools 
OUR TOOLS 
■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org 
■ It allow...
Responsive, Live Style Guide
Device / Browser Testing 
http://mattkersley.com/responsive/
Chrome Tools
Launch & Learn
The future?
http://gigaom.com/2014/06/20/android-wear-features-on-display-in-new-google-made-video/
http://www.slideshare.net/philiplikens/stitching-together-a-ux-strategy-for-wearables-and-the-mobile-mainframe
https://twitter.com/lukew/status/479649353791836160/photo/1
Thanks! 
Questions? 
Jeremy Johnson 
Director of User Experience @ 
@jeremyjohnson 
214-228-2894 
.com 
@projekt202 
jerem...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native
Upcoming SlideShare
Loading in …5
×

Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native

1,332 views

Published on

There are a number of options when going mobile, and it's not slowing down. Why choose one over the other? What are the strengths and pitfalls? What's right for your customers and users? We'll go over each option, with examples of how you can come to the right strategy around your mobile offerings.

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, and Native

  1. 1. Ready to go Mobile? Jeremy Johnson Director of User Experience @
  2. 2. @jeremyjohnson (yes, we’re hiring)
  3. 3. http://www.slideshare.net/jeremy/presentations
  4. 4. WORKED FOR
  5. 5. WORKED WITH
  6. 6. Uncover user needs, Design great solutions, and build out solutions to launch.
  7. 7. https://twitter.com/designoutloud/statuses/480785095331037184
  8. 8. *
  9. 9. http://www.cultofmac.com/145083/what-phones-looked-like-before-and-after-the-iphone-transformed-the-industry-image/
  10. 10. email web browsing video music messaging camera
  11. 11. http://www.picsean.com/device-and-screen-size-proliferation-a-challenge-to-magazine-publishers/
  12. 12. http://www.techetron.com/13443/iphone-6-know/
  13. 13. “What would you like to do on your mobile devices?”
  14. 14. “Or why Responsive Design is a magic bullet”
  15. 15. 3 Tips for going Mobile / Responsive
  16. 16. “Mobile First”
  17. 17. Limiting feature set (MVP) Simplifying experiences Mobile not an “after-thought”
  18. 18. “MVP” Most Viable Product vs. Most Valuable Product
  19. 19. 3 Tips for going Mobile / Responsive
  20. 20. #1 CONTEXT
  21. 21. CONTEXT I’m at home I’m on the road I’m at work When you’re at home your usage could be different from when you’re on the road, or at work. Or as research shows - in some cases, like shopping - you could be browsing anywhere and expect the same experience.
  22. 22. *COUCHING A number of people are reaching for their phone instead of going to their desks, or using their laptops (or even tablets!) when at home on the couch. Where before, we may have made a specific mobile version, with specific mobile tasks or content, today phones are good enough, and many times people expect the same content no matter where they are or what device they’re using.
  23. 23. https://twitter.com/lukew/status/509063072162775040/photo/1
  24. 24. How do you create feature parity across devices?
  25. 25. *SNACKING Remember before smartphones? Waiting in line, waiting for a meeting to start, waiting to pick up our kids, in a drive-thru? Now this is a prime opportunity for short bursts of online activity. I need to pay a bill. What’s on TV tonight? Where are my friends? Does the local store have that dress on sale today? I’m shopping for new insurance. All happening on-the-go, wherever you have the time.
  26. 26. How do you create content that can be consumed quickly?
  27. 27. Questions to ask? Does your experience need to work in different contexts? A User’s Location? Time of day? Different devices?
  28. 28. “Tell me about how you use your devices at different times of the day?” Morning Afternoon Night
  29. 29. “Tell me about how you use your devices at different times of the day?” Morning Afternoon Night
  30. 30. Morning Afternoon Night Home Work Outing Process 1 Process 2 Process 3
  31. 31. http://www.slideshare.net/burinb/designing-for-time-travel-when-responsive-design
  32. 32. Questions to ask? Do you need to shorten your experience? Is this something they’ll focus on? Or something they just need updates for?
  33. 33. “Will you use these features on mobile?” Yes No Maybe…
  34. 34. “Map each feature to how much time they’ll spend using it on a mobile device" 1-5mins 20mins 45+mins
  35. 35. CONTEXT = Determining if your users need all of the things all of the time - and will they need specific interfaces or features when mobile.
  36. 36. https://twitter.com/WhytheFux/status/431449112589111296
  37. 37. PERSONAS
  38. 38. http://jackfruitmalaysia.wordpress.com/2011/04/02/how-is-jackfruit-prepared/
  39. 39. “Dashboard” Time on Task Alerts Communication Full Application Order entry Lookup Maps MANAGER AGENT
  40. 40. “All the Things!” “AT HOME” AGENT
  41. 41. Speed Accuracy Company Policy Sales Quota AGENT Service Knowledge Complex Trips Packages “AT HOME” AGENT
  42. 42. “James” “Randy” “Bobby”
  43. 43. http://blog.mailchimp.com/new-mailchimp-user-persona-research/
  44. 44. #2 PREPARE YOUR CONTENT
  45. 45. CONTENT Will your content scale to mobile? Do you have legacy content you need to reformat or even rethink? Are your images legible at smaller sizes, are your videos compressed well enough, are your workflows able to move to a smaller screen?
  46. 46. Is your content ready for mobile?
  47. 47. RESPONSIVE
  48. 48. ■ Services / APIs ■ Video compression ■ Content size / compression ■ Vendors (chat, reviews, images, “widgets” etc…) “How about…”
  49. 49. #3 PROTOTYPING
  50. 50. CONCEPT What is the best way to create usable, enjoyable, fast experiences for your users or customers? Do you need new services? Does it make sense for all your features? Do you need new mobile specific features? Are your features, UI, workflows ready for mobile?
  51. 51. “Agile methods like Scrum and XP both rely on a close and collaborative relationship and continual interaction with the customer – the people who are paying for the software and who are going to use the system.” 2001 http://swreflections.blogspot.com/2012/02/agiles-customer-problem.html
  52. 52. (literally 100s) http://looksgoodworkswell.blogspot.com/2012/11/list-of-mockupprototyping-tools.html http://www.adaptivepath.com/ideas/rapid-prototyping-tools#thelist
  53. 53. are we building the right things? valuable usable enjoyable Is it easy to use? Do they want to use it?
  54. 54. Keep/Kill Prototype Evaluate (Build) Test (Measure) (Learn)
  55. 55. 3 Tips for going Mobile / Responsive #1 CONTEXT #2 CONTENT #3 CONCEPT
  56. 56. Austin / Dallas / Seattle
  57. 57. Design + Technology
  58. 58. People + Technology
  59. 59. We don’t just ask. We observe.
  60. 60. Concept Validation Contextual Inquiries Usability Study Customer Validation
  61. 61. http://www.mindtheproduct.com/2012/08/how-user-research-can-help-prioritise-product-requirements/
  62. 62. I’m ready. What’s next? ■ Do I go native? ■ What about Hybrid solutions? ■ Can I just go web?
  63. 63. NATIVE. Why Native? ■ Most fluid/fast experience ■ Easier to move to new iOS versions ■ Not dependent on 3rd party APIs ■ More likely to get App Store attention ■ Can use new phone features faster
  64. 64. HYBRID. Why Hybrid? ■ Less burden on native resources ■ More reuse across properties ■ Use native where it makes sense / use web where it makes sense ■ Reuse some current skill-sets
  65. 65. HYBRID CAN MEAN… ■ Written in JS, but compiled to native Android & iOS (ex. titanium) ■ Written in C#, but compiled to native Android & iOS (ex. xamarin) ■ Written in HTML/JS but wrapped in native, with some hooks to native functionality (ex. phonegap) ■ Written in native iOS and Android, but with some screens or flows rendered in HTML (ex. using webview)
  66. 66. Native Component Native Component Web Content (webview) Native Component “…we doubled down on native navigation, while reaffirming our webview-core architecture. In the jump to our 3 [Generation] app, we’re taking our productivity spoils and spending them where they can make a difference.” https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content
  67. 67. WEB. Why Web? ■ Reuse your current base of web developers ■ Have a product reason to have the same experience on a .com ■ Already have a web property ■ Accessed from a URL ■ Reuse across web / app ■ Responsive or Adaptive
  68. 68. RESPONSIVE = ADAPTIVE
  69. 69. RESPONSIVE Responsive is where you have all the same features of your current site but via breakpoints it “responds” down to different devices. Why Responsive? ■ Customers expect the same content and features ■ One set of templates to maintain ■ Works across a number of devices
  70. 70. OUR RESPONSIVE APPROACH OUR APPROACH ■ The biggest mental shift in design/dev for responsive is learning to think fluidly. ■ The question "How many pixels wide?" is now a red herring. ■ Instead, you have to think proportionally, and in percentages. OUR TOOLS ■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org ■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't) have media queries. ■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as well as modern browsers that do understand media queries. ■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass compilation, as well as JavaScript minification and concatenation. / http:// middlemanapp.com / http://get-serve.com OUR STACK ■ Irrelevant. Except that Sass (and Compass) require Ruby to compile. ■ Any server-side stack should be able to support a responsive approach.
  71. 71. RESPONSIVE IS BECOMING MORE MATURE A number of good, solid frameworks (if needed) http://getbootstrap.com/ http://foundation.zurb.com/ A number of good 3rd party solutions (if needed) http://www.highcharts.com/ * We tend NOT to use large frameworks, but lighter smaller components as needed.
  72. 72. Google: Bad User Experience For Mobile Users May Lead To Ranking Issues “Because at Google we are aiming to provide a great user experience on any device, we're making a big push to ensure the search results we deliver reflect this principle.” https://www.seroundtable.com/google-user-experience-ranking-19278.html
  73. 73. http://www.google.com/think/multiscreen/whitepaper-sitedesign.html
  74. 74. ADAPTIVE Adaptive is where you have custom templates per device type you want to target. This works best when you have specific features or interactions you want across different devices. Why Adaptive? ■ Custom experience per device / time / location ■ You don’t have the frontend skill-set for Responsive ■ You already have a m.dot site
  75. 75. ADAPTIVE How do I know what our user’s needs are, and if they’re different? Qualitative Quantitative
  76. 76. ADAPTIVE ex. “Via observation we found out that your users will only use alerts and limited content when on the go.” ex. “Via data we’ve found that tablet usage increases 200% after work hours, we need to make sure all our features work well on tablets.”
  77. 77. Concept Validation Contextual Inquiries Usability Study Customer Validation
  78. 78. Web Hybrid Native
  79. 79. Web Hybrid Native
  80. 80. DESIGN
  81. 81. Fluid Breakpoints #1 #2 #3
  82. 82. #1
  83. 83. #2
  84. 84. #3
  85. 85. Fluid
  86. 86. #1 Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW
  87. 87. #2 Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW Business Innovations 324,872 45% VIEW
  88. 88. Business Innovations 324,872 VIEW 45% #3 Business Innovations 324,872 VIEW 45%
  89. 89. CASE STUDY (RESPONSIVE)
  90. 90. Start with a fluid grid
  91. 91. Content Inventory
  92. 92. Breakpoints for devices (But, keep it fluid) 1 2
  93. 93. Be thoughtful about your breakpoints and how it works with your content. 1 2
  94. 94. Tools OUR TOOLS ■ Sass (and Compass) have been invaluable. / http://sass-lang.com / http://compass-style.org ■ It allows you to have small, topical (S)CSS files, and combine them into larger files that (don't) have media queries. ■ This approach has allowed us to support older versions of Internet Explorer (prior to IE9) as well as modern browsers that do understand media queries. ■ Also, just for front-end templating, Middleman (or Serve) is helpful. It handles Sass compilation, as well as JavaScript minification and concatenation. / http:// middlemanapp.com / http://get-serve.com
  95. 95. Responsive, Live Style Guide
  96. 96. Device / Browser Testing http://mattkersley.com/responsive/
  97. 97. Chrome Tools
  98. 98. Launch & Learn
  99. 99. The future?
  100. 100. http://gigaom.com/2014/06/20/android-wear-features-on-display-in-new-google-made-video/
  101. 101. http://www.slideshare.net/philiplikens/stitching-together-a-ux-strategy-for-wearables-and-the-mobile-mainframe
  102. 102. https://twitter.com/lukew/status/479649353791836160/photo/1
  103. 103. Thanks! Questions? Jeremy Johnson Director of User Experience @ @jeremyjohnson 214-228-2894 .com @projekt202 jeremy.johnson@projekt202.com

×