GETTING FROM DESIGN TO IMPLEMENTATION
How to get to the finish line with Responsive and Mobile Development
How the PQRC Sidebar became real:1. A couple looks at the PQRC Sidebar 2. Implementation and Technology3. Testing and Debugging
Overall Process
Sidebar - Expanded
Sidebar Mobile - Expanded
Sidebar is the same fully expanded on desktop or mobile. (except on mobile is takes up the entire screen)
Sidebar Mobile - Collapsed
Basic Requirements
1. Mockup must reflect a transition style
2. Text removal3. Style changes
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
• Achieving the same functionality on smaller screens means:–Compressing Information–Multiple Views– Transitions
Large Functionality, Tiny Screens
TECHNOLOGY IMPLEMENTATION
WEAPONS IN THE WAR AGAINST COMPLEXITY
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
• 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)
Internal Tools?
1. Scaling2. Breakpoints3. Fluidity and Sizing
Three Key Responsive “Techniques”
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)
Breakpoints
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*/}
- 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; }
• 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)
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
TESTING FOR MOBILE
Lets add in another 8 platforms to test on.
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
• 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
Debugging Mobile
IDE Alternative: Weinre
Thank you
• Questions?
• Serena Rosenhan, Chris Farnum UXD• Chris Pall, Engineering - GPS