getting from design to implementation how to get to the finish line with responsive and mobile...

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