Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk
Upcoming SlideShare
Loading in...5
×
 

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk

on

  • 1,645 views

 

Statistics

Views

Total Views
1,645
Views on SlideShare
1,610
Embed Views
35

Actions

Likes
2
Downloads
8
Comments
0

3 Embeds 35

http://lanyrd.com 32
https://twitter.com 2
http://192.168.0.108 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk Sebastian Burkhart — Berlin.apps.js Nov 2012 Talk Presentation Transcript

  • Copilot Creating a mobile web app in 8 days: What we learned.Friday, November 30, 12
  • Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12
  • Content: Technical & Design pitfalls to avoidFriday, November 30, 12 View slide
  • = Checklist for your mobile projectsFriday, November 30, 12 View slide
  • http://m.moviepilot.comFriday, November 30, 12
  • Friday, November 30, 12
  • Friday, November 30, 12
  • Friday, November 30, 12
  • Friday, November 30, 12
  • Friday, November 30, 12
  • App specsFriday, November 30, 12
  • App specs Minimal Rails app Backbone.Events Backbone.Router ZeptoFriday, November 30, 12
  • swipe.js Used for -like drill-down navigation and -like side-bar menuFriday, November 30, 12
  • swipe.js Has touch event handlers + transform / transition CSSFriday, November 30, 12
  • swipe.js Remove display: table-row for speed!Friday, November 30, 12
  • Micro MVC frameworkFriday, November 30, 12
  • Micro MVC framework Inspired by iOS UIKit ViewController classesFriday, November 30, 12
  • Micro MVC framework UITabBarController + UINavigationControllersFriday, November 30, 12
  • Technical lessonsFriday, November 30, 12
  • Your desktop browser lies. :)Friday, November 30, 12
  • Test every browser / device combination.Friday, November 30, 12
  • Test every browser / device combination. Chrome/Nexus 4 ≠ Chrome/Galaxy S III ≠ built-in browser/Samsung S IIIFriday, November 30, 12
  • Test every browser / device combination. In our case: iPhone 3G faster than Galaxy S3 WTFFriday, November 30, 12
  • → Dont develop with only one device type. → You will need to debug directly on your devices (see Emmas talk).Friday, November 30, 12
  • iOS • Use Safaris Inspector via USB • Enable debugging in your phone settings • Enable Develop menu in desktop Safari preferences • Connect phone via USB • Open inspector via Develop menu item Android • Download Android SDK • Enable USB web debugging on phone (Settings > Advanced > Developer tools) • Connect phone via USB • Use adb forward tcp:9222 localabstract:chrome_devtools_remote on the command line to start a debugging server • Get a remote inspector running inside your desktop browser by navigating to localhost:9222 • Often proposed on the web, but: adb logcat is not reliable for seeing console.log outputFriday, November 30, 12
  • Loading too many images will crash your browserFriday, November 30, 12
  • What’s cool: overflow: scroll is working now.Friday, November 30, 12
  • What’s cool: overflow: scroll is working now (Almost.)Friday, November 30, 12
  • overflow: scroll Avoid more than one top elementFriday, November 30, 12
  • overflow: scroll Use it together with -webkit-overflow- scrolling: touch to enable native scrolling with bounce and momentumFriday, November 30, 12
  • overflow: scroll Build a fallback solution if you need to support older devicesFriday, November 30, 12
  • scrollTop is broken on Android (You can’t set it via JS.) https://code.google.com/p/android/issues/detail?id=19625Friday, November 30, 12
  • scrollTop is broken on Android No good solutions available: Libs like iScroll-4 don’t work reliably Fallback to a non-single-page app? Ignore and wait for browser updates? Use transforms instead?Friday, November 30, 12
  • scrollTop is broken mkII = Many Android browsers reset the scrollTop property to 0 when appending a DOM element.Friday, November 30, 12
  • 300ms lag on tap events Mobile browsers wait for double-tap events. If you want a native app-like feeling: create your own tap event handling.Friday, November 30, 12
  • Expect weird bugs Some examples following…Friday, November 30, 12
  • Expect weird bugs Swallowed events (many browsers)Friday, November 30, 12
  • Expect weird bugs A specific <div> had to wider than 355px to not break performance down completely (iOS)Friday, November 30, 12
  • Expect weird bugs Touch events were delivered to wrong elements (Android, S III, built-in browser)Friday, November 30, 12
  • Expect weird bugs Facebooks new mobile comment widget seems not to work on mobile (the desktop version does, though)Friday, November 30, 12
  • About performance…Friday, November 30, 12
  • About performance… Dont forget your HTML/JS apps compete with native apps.Friday, November 30, 12
  • Requests may be very slowFriday, November 30, 12
  • Requests may be very slow Have HTML content preloaded if possible. HTML strings in a JS map worked well for us.Friday, November 30, 12
  • Add caching on server-sideFriday, November 30, 12
  • Add caching on server-side Make your served content state-independent. Use caching services, e.g. fastly.Friday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Prefer native scrolling and positioning over transformsFriday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Avoid z-indexFriday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Avoid big <div>s, their content may have to be cached in graphics memory as bitmapFriday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Avoid jQuery/Zeptos DOM manipulation methods like append() etc., as they traverse/copy whole DOM structures on JS level.Friday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Use exactly sized images for smoother scrolling (might be much effort if you have to support many display sizes…)Friday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices.Friday, November 30, 12
  • Make rendering fastFriday, November 30, 12
  • Make rendering fast Good news: CSS box-shadows and gradients are fast on most devices. (...but make them <10px wide. And use inset shadows sparingly, and not over images.)Friday, November 30, 12
  • Design for small displaysFriday, November 30, 12
  • iOS Human Interface GuidelinesFriday, November 30, 12
  • “44 x 44 points is the comfortable minimum size of a tappable UI element.” http://bit.ly/V6OmO9Friday, November 30, 12
  • Touchable UI areas should be bigFriday, November 30, 12
  • Responsive designFriday, November 30, 12
  • Responsive design background-position: 50% 30% background-size: cover …fits landscape and portrait images.Friday, November 30, 12
  • Responsive design Don’t forget to vary screen height when testing CSS media queriesFriday, November 30, 12
  • Responsive design Don’t forget to vary screen height when testing CSS media queries very low in landscape modeFriday, November 30, 12
  • Responsive design Don’t forget to vary screen height when testing CSS media queries very low in Facebook appFriday, November 30, 12
  • Responsive design Don’t forget to vary screen height when testing CSS media queries low because of toolbars :(Friday, November 30, 12
  • Responsive design Don’t hide the address bar just because you can.Friday, November 30, 12
  • Sebastian Burkhart github: opyh twitter: opyh app.net: hypo working at bitcrowd.net, BerlinFriday, November 30, 12