From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan...
Transcript of From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan...
![Page 1: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/1.jpg)
![Page 2: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/2.jpg)
From 1" to 100"How to design responsive for every screen
Håkan Reis
![Page 3: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/3.jpg)
Challenge
![Page 4: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/4.jpg)
![Page 5: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/5.jpg)
![Page 6: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/6.jpg)
Accepted!
![Page 7: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/7.jpg)
Perpetrators
![Page 8: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/8.jpg)
![Page 9: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/9.jpg)
Wearables
![Page 10: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/10.jpg)
![Page 11: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/11.jpg)
Smart phones
![Page 12: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/12.jpg)
![Page 13: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/13.jpg)
All the other smart phones
![Page 14: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/14.jpg)
Tablets
![Page 15: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/15.jpg)
![Page 16: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/16.jpg)
![Page 17: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/17.jpg)
![Page 18: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/18.jpg)
![Page 19: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/19.jpg)
TV
![Page 20: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/20.jpg)
![Page 21: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/21.jpg)
![Page 22: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/22.jpg)
![Page 23: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/23.jpg)
The future
![Page 24: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/24.jpg)
![Page 25: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/25.jpg)
![Page 26: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/26.jpg)
Defense strategies
![Page 27: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/27.jpg)
Optimize display
Optimize input
Optimize capabilities
![Page 28: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/28.jpg)
![Page 29: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/29.jpg)
Adaptive UI
Reflow
Expand
Transform
Reveal
Divide
![Page 30: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/30.jpg)
Responsive design
Reposition
Resize
Reflow
Replace
Reveal
Re-architect
![Page 31: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/31.jpg)
Reflow / Reposition
![Page 32: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/32.jpg)
Expand / Resize
Bacon ipsum dolor ametrump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupimsausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkashamburger pancetta, porchetta brisket sausage pork belly beef ribs salami rump ham hock meatloaf meatball.
Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupim sausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkas hamburger pancetta, porchetta brisket sausage pork belly beef ribs salami rump ham hock meatloaf meatball. Alcatra turkey corned beef, short ribs pastrami kielbasa beef ribs sirloin. Filet mignon frankfurter chuck ham hock short ribs corned beef pastrami ball tip tri-tip hamburger shankle ground round pork belly. Brisket ham pancetta, drumstick turducken biltong bresaola ribeye spare ribs kevin pork jowl doner ground round chuck.
Jowl ground round sausage filet mignon hamburger. Ribeye flank tongue bresaola, salami strip steak ball tip hamburger. Salami chuck doner alcatra turkey pork loin ribeye brisket. Pancetta pork chop tri-tip cupim. Meatball ham biltong brisket t-bone shoulder turducken drumstick short ribs spare ribs. Shankle porchetta tongue, landjaeger turkey tenderloin pork belly strip steak leberkas chicken bresaola meatball. Pig shankle ham hock alcatra chuck leberkas boudin rump sausage pork andouille capicola porchetta.Beef turkey tail, pork loin venison tenderloin porchetta pastrami jowl meatloaf pork fatback shoulder short loin alcatra. Drumstick tenderloin ham bresaola rump swine, pork loin kielbasa jowl. Cupim landjaeger flank, short ribs sirloin drumstick cow meatball boudin beef ribs shankle.
![Page 33: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/33.jpg)
Reflow
Bacon ipsum dolor ametrump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupimsausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkashamburger pancetta, porchetta brisket sausage pork belly beef ribs salami rump ham hock meatloaf meatball.
Bacon ipsum dolor ametrump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupim sausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkashamburger pancetta, porc-hetta brisket sausage pork belly beef ribs salami rump ham hock meatloaf meatball. Alcatra turkey corned beef, short ribs pastrami kielbasa beef ribs sirloin. Filet mignon
frankfurter chuck ham hock short ribs corned beef pastrami ball tip tri-tip hamburger shankle ground round pork belly. Brisket ham pancetta, drumstick tur-ducken biltong bresaola ribeye spare ribs kevin pork jowl doner ground round chuck.
Jowl ground round sausage filet mignon hamburger. Ribeye flank tongue bresaola, salami strip steak ball tip hamburger. Salami chuck doner alcatra turkey pork loin ribeye brisket. Pancetta pork chop tri-tip cupim. Meatball ham biltong brisket t-bone
shoulder turducken drum-stick short ribs spare ribs. Shankle porchetta tongue, landjaeger turkey tenderloin pork belly strip steak leberkaschicken bresaola meatball. Pig shankle ham hock alcatrachuck leberkas boudin rump sausage pork andouille capicola porchetta.
Beef turkey tail, pork loin venison tenderloin porchettapastrami jowl meatloaf pork fatback shoulder short loin alcatra. Drumstick tenderloin ham bresaola rump swine, pork loin kielbasa jowl. Cupimlandjaeger flank, short ribs sirloin drumstick cow meatball.
![Page 34: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/34.jpg)
Transform / Replace
frankfurter
strip steak
meatball
pastrami
![Page 35: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/35.jpg)
Reveal / Reveal
frankfurter
strip steak
meatball
pastrami
menu
![Page 36: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/36.jpg)
strip steak
Bacon ipsum dolor ametrump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupimsausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkashamburger pancetta, porchetta brisket.
frankfurter
strip steak
meatball
pastrami
Divide / Re-architect
frankfurter
strip steak
meatball
pastrami
Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupim sausage frankfurter flank cow strip steak venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef kielbasa. Leberkas hamburger pancetta, porchetta brisket sausage pork belly beef ribs salami rump ham hock meatloaf meatball. Alcatra turkey corned beef, short ribs pastrami kielbasa beef ribs sirloin. Filet mignon frankfurter chuck ham hock short ribs corned beef pastrami ball tip tri-tip hamburger shankle ground round pork belly. Brisket ham pancetta, drumstick turducken biltong bresaola ribeye spare ribs kevin pork jowl doner ground round chuck.
Jowl ground round sausage filet mignon hamburger. Ribeye flank tongue bresaola, salami strip steak ball tip hamburger. Salami chuck doner alcatraturkey pork loin ribeye brisket. Pancetta pork chop tri-tip cupim. Meatball ham biltong brisket t-bone shoulder turducken drumstick short ribs spare ribs. Shankle porchetta tongue, landjaeger turkey tenderloin pork belly strip steak leberkas chicken bresaola meatball. Pig shankle ham hock alcatra chuck leberkas boudin rump sausage pork andouille capicola porchetta.
![Page 37: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/37.jpg)
More strategies
![Page 38: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/38.jpg)
Cards !1!!!!
![Page 39: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/39.jpg)
![Page 40: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/40.jpg)
![Page 41: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/41.jpg)
meatball pastrami
![Page 42: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/42.jpg)
meatball pastrami
Bacon ipsum dolor amet rump kevinball tip jowl boudin alcatra turducken bresaola, ground round drumstick.
![Page 43: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/43.jpg)
meatball pastrami
Bacon ipsum dolor amet rump kevinball tip jowl boudin alcatra turducken bresaola, ground round drumstick.
![Page 44: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/44.jpg)
![Page 45: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/45.jpg)
![Page 46: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/46.jpg)
Uses
![Page 47: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/47.jpg)
![Page 48: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/48.jpg)
the agent
![Page 49: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/49.jpg)
![Page 50: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/50.jpg)
![Page 51: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/51.jpg)
![Page 52: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/52.jpg)
Does it work?
![Page 53: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/53.jpg)
![Page 54: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/54.jpg)
Card-based design
överblicken
lagret
under färd hos slutkunden
![Page 55: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/55.jpg)
![Page 56: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/56.jpg)
Summary
Plan your target and prepare for suprises
Do learn the strategies
Find your cluster of visual information
Know the context
Identify activates on cards in context
Design the card
![Page 58: From 1 to 100 · 2017-08-31 · From 1" to 100" How to design responsive for every screen Håkan Reis](https://reader034.fdocuments.us/reader034/viewer/2022050109/5f46a86051c1aa08036d6c2c/html5/thumbnails/58.jpg)
Resources
• https://www.google.com/design/spec/layout/responsive-ui.html
• https://msdn.microsoft.com/windows/uwp/layout/design-and-ui-intro
• https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
• https://blog.intercom.io/why-cards-are-the-future-of-the-web/
• http://www.jayway.com/wp-content/uploads/2016/04/From1to100.pdf
• https://design.google.com/devices/