responsive webapp designd3mvk1t0iovct7.cloudfront.net/.../jvhouten_responsivewebappdesign.pdf ·...
TRANSCRIPT
![Page 1: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/1.jpg)
Responsive WebApp Design John van Houten
Order Entry…: http://52.4.123.133/synergy/ Contact Management: http://52.4.123.133/cmsynergy/ Open these links on your smart phone!!
![Page 2: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/2.jpg)
Responsive Web Design
◦ What is Responsive Web Design? • Design approach • Multiple techniques • Not new
◦ 2013 – mashable.com
http://thisismadebyhand.com/ http://www.planetary.org/
![Page 3: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/3.jpg)
Design Considerations
◦ Physical keyboard, mouse ◦ Smaller screen ◦ On-screen keyboard ◦ Touch actions ◦ No hover
![Page 4: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/4.jpg)
Responsive Layout Adjustments
◦ Navigation ◦ Item Repositioning ◦ Item Resizing ◦ Items Disappear
![Page 5: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/5.jpg)
Application Cases
◦ Entire Web Application o Desktop, Tablet and Phone
◦ Discrete Additional Modules o Customer Facing, Web Shop, Out of Office
![Page 6: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/6.jpg)
Media Queries
![Page 7: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/7.jpg)
Responsive Breakpoints
Important Screen Sizes ◦ iPhone 3-4 portrait (320 x 480), landscape (480 x 320) ◦ iPhone 5 portrait (320 x 568), landscape (568 x 320) ◦ iPhone 6 portrait (375 x 667), landscape (667 x 375) ◦ iPhone 6+ portrait (414 x 736), landscape (736 x 414) ◦ iPad mini portrait (768 x 1024), landscape (1024 x 768) ◦ iPad 1-4 portrait (768 x 1024), landscape (1024 x 768) ◦ Notebook 1 (1280 x 950) ◦ Notebook 2 (1440 x 900)
![Page 8: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/8.jpg)
Responsive Breakpoints 2
More Important Screen Sizes ◦ Samsung Galaxy Note (400 x 640), landscape (640 x 400) ◦ Samsung Galaxy Note II, 3 (360 x 640), landscape (640 x 360) ◦ Samsung Galaxy S, SII, W (320 x 533), landscape (533 x 320) ◦ Samsung Galaxy Tab (1024 x 600), landscape (600 x 1024) ◦ Samsung Galaxy Tab 7.7+ (800 x 1280), landscape (1280 x 800)
![Page 9: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/9.jpg)
DataFlex Responsive Breakpoints
◦ Desktop ◦ Tablet
• Tablet Landscape • Tablet Portrait
◦ Mobile • Mobile Landscape • Mobile Portrait
![Page 10: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/10.jpg)
WebSetResponsive
WebSetResponsive {property} {mode} to {value}
Web Property piColumnCount, pbRender Responsive Mode
rmMobile, rmTablet, rmDesktop rmDesktop
rmTablet
rmMobile
![Page 11: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/11.jpg)
CSS “.df-Mode” Classes
◦ Responsive behaviour built into Df_Flat_Touch • White space around views • Header tab style • Label Caption
![Page 12: Responsive WebApp Designd3mvk1t0iovct7.cloudfront.net/.../JvHouten_ResponsiveWebAppDesign.pdf · What is Responsive Web Design? • Design approach • Multiple techniques • Not](https://reader031.vdocuments.site/reader031/viewer/2022022721/5c66d56009d3f20f218cdd4f/html5/thumbnails/12.jpg)
Conclusions
◦ Use piMaxWidth (only) to set your view width ◦ Organize your controls into groups ◦ 80-20 rule - Don’t get too fancy! ◦ Utilize as few breakpoints as possible
◦ Test using Google device simulator ◦ Final testing on “real” devices!