Download presentation
Presentation is loading. Please wait.
Published byAlfred Palmer Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.