Problems in Mobile Development

1,436 views

Published on

Slides of my talk from several conferences on different techniques of approaching mobile development, as well as some tips and tricks.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,436
On SlideShare
0
From Embeds
0
Number of Embeds
619
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Problems in Mobile Development

    1. 1. PROBLEMS IN MOBILE WEB DEVELOPMENT Amber Weinberg
    2. 2. MOBILE VS DESKTOP Multiple browser sizes, orientations & devices
    3. 3. Magnified IssuesSpeedJavascript - Graceful Degradation
    4. 4. Unique Issues in MobileSpaceRetina Displays vs. Regular DisplaysBrowser Sizes
    5. 5. MOBILE SITES VS RESPONSIVE DESIGN VS NATIVE APPS Different Approaches for Different Clients
    6. 6. Mobile SitesSeparate from regulardesktop version, but still onthe webGreat for larger, morecomplicated sites, likeeCommerceSustainability nightmareMore expensive
    7. 7. RESPONSIVE DESIGNWill work with every new device Can only edit CSS w/o resorting to JSGreat for simpler sites Bloated imagesLeast expensive option
    8. 8. Native AppsCan use device’s native hardwareAdvertised in app storeOften looks/runs nicerMost expensive optionHave to find a developer for eachplatformNot future-proof for when newdevices come out
    9. 9. THE MOBILE WEB TIPS, TRICKS & A CASE STUDY
    10. 10. Case-Study: Audible Mobile Site
    11. 11. Media Queries Targeting an iPhone and giving it a white background@media only screen and (max-width: 320px) { background: #fff;}
    12. 12. Desktop First vs. Mobile FirstUses both max/min queries Uses min-width queriesEasier to use when needing Difficult to envision and startto start from a finished full- when you’re a beginnersize PSD Less bloated - add stylesResults in some code bloat if instead of taking awayyou code incorrectly Andy Clarke (@malarkey)I personally prefer this route champions this route
    13. 13. Flexslider - Responsive Image Slider http://www.woothemes.com/flexslider/
    14. 14. Case Study: Hired.IMResponsive Web Design
    15. 15. MULTIPLE VIEWPORTS From smallest to largest
    16. 16. Responsibly ResponsiveMax-width: Readability & line lengthsMaking search easy in mobileSaving space in the navigation
    17. 17. The Search Form3 different “versions” foreasier use at differentviewportsminimal tweaking on each
    18. 18. It’s OK to be Skinny
    19. 19. Development Process PSD Max-Width Using %Responsive Development w/ media queries Mobile Browser & Devices Test Regular Browser Test
    20. 20. TestingOn Devices: On Speed: iOS 3G Android Edge Blackberry Public WIFI Tablets: Amazon Fire Dongles
    21. 21. SUMMING UP Twitter’s Mobile App Versions
    22. 22. Use the right mobile tool for the job: apps, standalone web orresponsiveUse a mix of both min AND max media queriesReduce waste & bloat in codeMake responsive sites work in all break points to future proofAnd remember - the most important thing
    23. 23. FIND MEwww.amberweinberg.com @amberweinberg

    ×