Upload
hockeycommunity
View
2.286
Download
0
Tags:
Embed Size (px)
Citation preview
“ “
It’s time to thinkMOBILE FIRST
our Story
a Real Story
Rails mobile view + jQuery Mobile
Enough to raise money
2012 - Designer full-time
Demo
Architecture
1 Heroku AppRuby on Rails
Amazon RDS Amazon S3 Sendgrid
API
Mobile AppsWebsitehttp://hockey-community.com
Phonegap(HTML5)
Database Storage Emailing
Crypt with Json + oAuth
New Relic
Performance Monitoring
Cloud Hosting
Github
Code Versioning
CLIENT PART
BACK OFFICE
Github
Code Versioning
Github4 repositories
MVC“The Rails Style”
Framework?
Fight iOS release cycles
Explore the code
Aug 2012 - Porting to Android
2 weeks
Chromium error -6
// -- Set android params -- // function setAndroidParams(href){" if (href) {" " var n = href.indexOf('?');" " window.localStorage.setItem("android-href", href);" " href = href.substring(0, n != -1 ? n : href.length);" " return href; " }}
// -- Android anchor listener -- //function refresh_android_listener(page_div, event){
" " $(page_div).on(event, 'a', function() {" " " var href = $(this).attr('href');" " " if (href && href != "#" && href.search("tel") == -1){" " " " change_page(href);" " " " return false;" " " } " " });}
Changing the href listenersEvery time we change the page
Accessing URL parametersstatuses_show.html?status_id=104381
function getParamValue(param,url) { // Android only url = window.localStorage.getItem("android-href");" // Common to iOS and Android" var u = (url == undefined || (url != undefined && url.indexOf("?") == -1)) ? document.location.href : url; var reg = new RegExp('(\\?|&|^)'+param+'=(.*?)(&|$)');" matches = u.match(reg); return (matches != undefined && matches.length > 1) ? decodeURIComponent(matches[2]).replace(/\+/g,' ') : null;}
Same function nameson iOS and Android
function triggerActionSheet(param,url) { // Android only}
function triggerActionSheet(param,url) { // iOS Only}
Native Scrolling & height fixingon iOS and Android
#events_content { margin-‐top:42px; height:420px; overflow-‐y: scroll; -‐webkit-‐overflow-‐scrolling: touch; /*-‐webkit-‐transform: translateZ(0px);*/}
Android 2.3
var container = document.querySelector('#box');container.classList.add('wrap');container.classList.remove('wrap');container.classList.toggle('wrap');Fix:
Doesn’t work
// Legacy JS var legacyHasClass = function (el, cl) { var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)'); return !!el.className.match(regex); }, legacyAddClass = function (el, cl) { el.className += ' ' + cl; }, legacyRemoveClass = function (el, cl) { var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)'); el.className = el.className.replace(regex, ' '); }, legacyToggleClass = function (el, cl) { hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl); };
Works
Android DatePicker Galaxy S3
Questions?
5 Design tips
1. Break the rules
1. Break the rules
2. Acknowledge User Interactions
2. Acknowledge User Interactions
3. Give your app personality
3. Give your app personality
3. Give your app personality
4. Call To Action & Distractions
4. Call To Action & Distractions
and last Don’t forget the basicsConsistency, Simplicity, etc
Questions?
Looking Forward
Have fun!