1. GETTING FROM DESIGN TO IMPLEMENTATION How to get to the finish line with Responsive and Mobile Development

2. How the PQRC Sidebar became real: 1.A couple looks at the PQRC Sidebar 2.Implementation and Technology 3.Testing and Debugging Overall Process

3. Sidebar - Expanded

4. Sidebar Mobile - Expanded Sidebar is the same fully expanded on desktop or mobile. (except on mobile is takes up the entire screen)

5. Sidebar Mobile - Collapsed Basic Requirements 1.Mockup must reflect a transition style 2.Text removal 3.Style changes

6. 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

7. Achieving the same functionality on smaller screens means: – Compressing Information – Multiple Views – Transitions Large Functionality, Tiny Screens

8. TECHNOLOGY IMPLEMENTATION WEAPONS IN THE WAR AGAINST COMPLEXITY

9. 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

10. 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)

11. Internal Tools?

12. 1.Scaling 2.Breakpoints 3.Fluidity and Sizing Three Key Responsive “Techniques”

13. Problem: Text will be tiny when using pixels to layout if adjustments aren’t made. Solution: That’s it. (mostly) Handling “Retina” (High DPI Devices)

14. Breakpoints

15. 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*/ }

16. - 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; }

17. 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)

18. 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

19. TESTING FOR MOBILE Lets add in another 8 platforms to test on.

20. There are a lot of devices DeviceOS Samsung Galaxy III LTE 4Android Browser™ V4.1.1 (Jelly Bean) NOKIA - Lumia 822Windows 8 - IE 10 iPhone 7.0Safari (IOS 7) iPod 6.1.3Safari (IOS 6) Samsung Galaxy Tab 2 10.1Android Browser™ (4.3) Samsung 3G Galaxy Tab 7"Android Browser - version 2.2 iPad MiniSafari and Chrome (IOS 7) Google nexus 7.0Chrome (4.2.1) iPad 3Safari (IOS 7) SurfaceIE 11 Kindle FireSilk 1.0.127.66-Gen5_10817910

21. 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

22. Debugging Mobile

23. IDE Alternative: Weinre

24. Thank you Questions? Serena Rosenhan, Chris Farnum UXD Chris Pall, Engineering - GPS