getting from design to implementation how to get to the finish line with responsive and mobile...
TRANSCRIPT
![Page 1: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/1.jpg)
GETTING FROM DESIGN TO IMPLEMENTATION
How to get to the finish line with Responsive and Mobile Development
![Page 2: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/2.jpg)
How the PQRC Sidebar became real:1. A couple looks at the PQRC Sidebar 2. Implementation and Technology3. Testing and Debugging
Overall Process
![Page 3: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/3.jpg)
Sidebar - Expanded
![Page 4: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/4.jpg)
Sidebar Mobile - Expanded
Sidebar is the same fully expanded on desktop or mobile. (except on mobile is takes up the entire screen)
![Page 5: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/5.jpg)
Sidebar Mobile - Collapsed
Basic Requirements
1. Mockup must reflect a transition style
2. Text removal3. Style changes
![Page 6: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/6.jpg)
Sidebar Mobile - Collapsed
Usual Solution Can Be:
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
Problem: Doesn’t Handle User Initiated Change:
Resolution: Use JavaScript
![Page 7: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/7.jpg)
• Achieving the same functionality on smaller screens means:–Compressing Information–Multiple Views– Transitions
Large Functionality, Tiny Screens
![Page 8: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/8.jpg)
TECHNOLOGY IMPLEMENTATION
WEAPONS IN THE WAR AGAINST COMPLEXITY
![Page 9: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/9.jpg)
CSS Frameworks– Bootstrap – UXD Framework (based on Bootstrap)– Foundation– Pure/Base
Client Side Rendering -- JavaScript MV? Frameworks– Angular.js– Backbone.js– Ember.js/Polymer/React– Many, many others
Common Tools
![Page 10: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/10.jpg)
• Provides a – Base structure for sizing/flexing of all the usual HTML elements– Automagically Adusting Layouts – CSS which (generally)
• Is cleaner• follows a convention!
• A consistent color schemes• Well thought out font design• Yet can be divorced from it’s JavaScript implementation• Can cut what you need out of it – underlying value though is in the base
http://www.sitepoint.com/common-techniques-in-responsive-web-design/
CSS Frameworks (Bootstrap)
![Page 11: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/11.jpg)
Internal Tools?
![Page 12: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/12.jpg)
1. Scaling2. Breakpoints3. Fluidity and Sizing
Three Key Responsive “Techniques”
![Page 13: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/13.jpg)
Problem: Text will be tiny when using pixels to layout if adjustments aren’t made.
Solution:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
That’s it. (mostly)
Handling “Retina” (High DPI Devices)
![Page 14: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/14.jpg)
Breakpoints
![Page 15: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/15.jpg)
Common Breakpoints
Smaller Screens/* Smartphones */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* Your Style Here*/}
/* iPads (old) */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Your Style Here */}
Larger Screens/* Desktops/laptops */@media only screen and (min-width : 1224px) {/* Your Style Here*/}
/* Large screens (4k! Nice) */@media only screen and (min-width : 1824px) {/* Your Style Here*/}
![Page 16: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/16.jpg)
- Resizing widths of a container within a breakpoint to give maximum viewable space
Fluidity
img, canvas, iframe, video, svg { max-width: 100%; }
/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }
![Page 17: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/17.jpg)
• JavaScript Frameworks Provide:– Simpler ways to transition from one state to another (Routers)– Templating systems to render data via the DOM– Models and some form of communication for them via AJAX
• Sometimes:– Controllers– Routers– Two Way Data Binding from Model to DOM– Dependency Injection
• Projects include:– Angular.js– Backbone.js– Ember.js/Polymer/React– Many, many others
JavaScript (Client Side Rendering)
![Page 18: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/18.jpg)
Old is new
Return to Certain Fundamentals– Use HTTP as it was intended– Use HTML as it was intended. Use new semantic tags!– Tiny sessions, store less state, if any– Serve plain/static HTML. Have client generate dynamic
aspects– Communicate with services, not to web appliances• Software as a Service (SaaS)
Try out some new ideas:– Begin to componentize web development
![Page 19: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/19.jpg)
TESTING FOR MOBILE
Lets add in another 8 platforms to test on.
![Page 20: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/20.jpg)
There are a lot of devicesDevice OS
Samsung Galaxy III LTE 4 Android Browser™ V4.1.1 (Jelly Bean)
NOKIA - Lumia 822 Windows 8 - IE 10
iPhone 7.0 Safari (IOS 7)
iPod 6.1.3 Safari (IOS 6)
Samsung Galaxy Tab 2 10.1 Android Browser™ (4.3)
Samsung 3G Galaxy Tab 7" Android Browser - version 2.2
iPad Mini Safari and Chrome (IOS 7)
Google nexus 7.0 Chrome (4.2.1)
iPad 3 Safari (IOS 7)
Surface IE 11
Kindle Fire Silk 1.0.127.66-Gen5_10817910
![Page 21: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/21.jpg)
• Limiting the Cost of Testing (while retaining maximum coverage)– Restrict to the two latest versions of IOS (iPhone 3g was sold until mid-
2013) (iPad 1 is version 5 ) This will test most everything Apple produced in the last 3 years. (not a huge timeframe, but most reasonable)
– Restrict to Android 4.0+ (80% of market) and Android 2.3. Market segmentation is more complicated but 4.0+ versions tend to be pretty consistent
– Microsoft and Kindle are both special cases where testing on a single device is likely good enough. They are generally a very small portion of the overall share in any case.
Mitigating Device Overload
![Page 22: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/22.jpg)
Debugging Mobile
![Page 23: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/23.jpg)
IDE Alternative: Weinre
![Page 24: GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development](https://reader036.vdocument.in/reader036/viewer/2022062517/56649ecf5503460f94bdcea9/html5/thumbnails/24.jpg)
Thank you
• Questions?
• Serena Rosenhan, Chris Farnum UXD• Chris Pall, Engineering - GPS