From 1" to 100"

How to design responsive for every screen

Håkan Reis Challenge

Accepted! Perpetrators

Wearables

Smart phones

All the other smart phones Tablets

TV

The future

Defense strategies Optimize display

Optimize input

Optimize capabilities

Adaptive UI Reflow Expand Transform Reveal Divide Responsive design Reposition Resize Reflow Replace Reveal Re-architect Reflow / Reposition Expand / Resize

Bacon ipsum dolor amet Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground rump kevin ball tip jowl round drumstick. Boudin beef ribs kielbasa cupim sausage frankfurter flank cow strip steak boudin alcatra turducken venison meatball hamburger pastrami ground round tongue. Beef ribs brisket pork chop jerky bresaola, ground round pancetta fatback, corned beef kielbasa. Leberkas hamburger pancetta, porchetta brisket drumstick. Boudin beef sausage pork belly beef ribs salami rump ham hock meatloaf meatball. Alcatra turkey corned ribs kielbasa cupim beef, short ribs pastrami kielbasa beef ribs sirloin. Filet mignon frankfurter chuck ham hock sausage frankfurter flank short ribs corned beef pastrami ball tip tri-tip hamburger shankle ground round pork belly. cow strip steak venison Brisket ham pancetta, drumstick turducken biltong bresaola ribeye spare ribs kevin pork jowl meatball hamburger doner ground round chuck. pastrami ground round tongue. Beef ribs brisket Jowl ground round sausage filet mignon hamburger. Ribeye flank tongue bresaola, salami pork chop jerky pancetta strip steak ball tip hamburger. Salami chuck doner alcatra turkey pork loin ribeye brisket. fatback, corned beef Pancetta pork chop tri-tip cupim. Meatball ham biltong brisket t-bone shoulder turducken kielbasa. Leberkas drumstick short ribs spare ribs. Shankle porchetta tongue, landjaeger turkey tenderloin pork hamburger pancetta, belly strip steak leberkas chicken bresaola meatball. Pig shankle ham hock alcatra chuck porchetta brisket sausage leberkas boudin rump sausage pork andouille capicola porchetta. pork belly beef ribs Beef turkey tail, pork loin venison tenderloin porchetta pastrami jowl meatloaf pork fatback salami rump ham hock shoulder short loin alcatra. Drumstick tenderloin ham bresaola rump swine, pork loin kielbasa meatloaf meatball. jowl. Cupim landjaeger flank, short ribs sirloin drumstick cow meatball boudin beef ribs shankle. Reflow

Bacon ipsum dolor amet Bacon ipsum dolor amet frankfurter chuck ham hock shoulder turducken drum- rump kevin ball tip jowl rump kevin ball tip jowl short ribs corned beef stick short ribs spare ribs. boudin alcatra turducken boudin alcatra turducken pastrami ball tip tri-tip Shankle porchetta tongue, bresaola, ground round bresaola, ground round hamburger shankle ground landjaeger turkey tenderloin drumstick. Boudin beef drumstick. Boudin beef ribs round pork belly. Brisket ham pork belly strip steak leberkas ribs kielbasa cupim kielbasa cupim sausage pancetta, drumstick tur- chicken bresaola meatball. sausage frankfurter flank frankfurter flank cow strip ducken biltong bresaola Pig shankle ham hock alcatra cow strip steak venison steak venison meatball ribeye spare ribs kevin pork chuck leberkas boudin rump meatball hamburger hamburger pastrami ground jowl doner ground round sausage pork andouille pastrami ground round round tongue. Beef ribs chuck. capicola porchetta. tongue. Beef ribs brisket brisket pork chop jerky pork chop jerky pancetta pancetta fatback, corned Jowl ground round sausage Beef turkey tail, pork loin fatback, corned beef beef kielbasa. Leberkas filet mignon hamburger. venison tenderloin porchetta kielbasa. Leberkas hamburger pancetta, porc- Ribeye flank tongue bresaola, pastrami jowl meatloaf pork hamburger pancetta, hetta brisket sausage pork salami strip steak ball tip fatback shoulder short loin porchetta brisket sausage belly beef ribs salami rump hamburger. Salami chuck alcatra. Drumstick tenderloin pork belly beef ribs ham hock meatloaf meatball. doner alcatra turkey pork loin ham bresaola rump swine, salami rump ham hock Alcatra turkey corned beef, ribeye brisket. Pancetta pork pork loin kielbasa jowl. Cupim meatloaf meatball. short ribs pastrami kielbasa chop tri-tip cupim. Meatball landjaeger flank, short ribs beef ribs sirloin. Filet mignon ham biltong brisket t-bone sirloin drumstick cow meatball. Transform / Replace

frankfurter strip steak meatball pastrami Reveal / Reveal

frankfurter strip steak meatball pastrami

menu Divide / Re-architect

frankfurter stripfrankfurter steak Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. Boudin beef ribs kielbasa cupim sausage Bacon ipsumstrip dolor steak amet frankfurter flank cow strip steak venison meatball hamburger pastrami ground strip steak rump kevin ball tip jowl round tongue. Beef ribs brisket pork chop jerky pancetta fatback, corned beef boudin alcatrameatballturducken kielbasa. Leberkas hamburger pancetta, porchetta brisket sausage pork belly meatball bresaola, ground round beef ribs salami rump ham hock meatloaf meatball. Alcatra turkey corned drumstick.pastrami Boudin beef beef, short ribs pastrami kielbasa beef ribs sirloin. Filet mignon frankfurter pastrami ribs kielbasa cupim chuck ham hock short ribs corned beef pastrami ball tip tri-tip hamburger sausage frankfurter flank shankle ground round pork belly. Brisket ham pancetta, drumstick turducken cow strip steak venison biltong bresaola ribeye spare ribs kevin pork jowl doner ground round chuck. meatball hamburger pastrami ground round Jowl ground round sausage filet mignon hamburger. Ribeye flank tongue tongue. Beef ribs brisket bresaola, salami strip steak ball tip hamburger. Salami chuck doner alcatra pork chop jerky pancetta turkey pork loin ribeye brisket. Pancetta pork chop tri-tip cupim. Meatball ham fatback, corned beef biltong brisket t-bone shoulder turducken drumstick short ribs spare ribs. kielbasa. Leberkas Shankle porchetta tongue, landjaeger turkey tenderloin pork belly strip steak hamburger pancetta, leberkas chicken bresaola meatball. Pig shankle ham hock alcatra chuck porchetta brisket. leberkas boudin rump sausage pork andouille capicola porchetta. More strategies Cards !1!!!!

meatball pastrami Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. meatball pastrami Bacon ipsum dolor amet rump kevin ball tip jowl boudin alcatra turducken bresaola, ground round drumstick. meatball pastrami

Uses the agent

Does it work?

Card-based design

överblicken

lagret

under färd hos slutkunden

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 tack!

Håkan Reis [email protected] @haqwin Jayway blog 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/UserExperie nce/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/