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

1. PROBLEMS IN MOBILE WEB DEVELOPMENT
Amber Weinberg

2. MOBILE VS DESKTOP
Multiple browser sizes, orientations & devices

5. Magnified Issues
Speed
Javascript - Graceful Degradation

6. Unique Issues in Mobile
Space
Retina Displays vs. Regular Displays
Browser Sizes

7. MOBILE SITES VS RESPONSIVE DESIGN VS NATIVE APPS
Different Approaches for Different Clients

8. Mobile Sites
Separate from regular
desktop version, but still on
the web
Great for larger, more
complicated sites, like
eCommerce
Sustainability nightmare
More expensive

9. RESPONSIVE DESIGN
Will work with every new device Can only edit CSS w/o resorting to JS
Great for simpler sites Bloated images
Least expensive option

10. Native Apps
Can use device’s native hardware
Advertised in app store
Often looks/runs nicer
Most expensive option
Have to find a developer for each
platform
Not future-proof for when new
devices come out

11. THE MOBILE WEB
TIPS, TRICKS & A CASE STUDY

12. Case-Study:
Audible
Mobile Site

15. Media Queries
Targeting an iPhone and giving it a white background
@media only screen and (max-width: 320px) {
background: #fff;
}

16. Desktop First vs. Mobile First
Uses both max/min queries Uses min-width queries
Easier to use when needing Difficult to envision and start
to start from a finished full- when you’re a beginner
size PSD
Less bloated - add styles
Results in some code bloat if instead of taking away
you code incorrectly
Andy Clarke (@malarkey)
I personally prefer this route champions this route

18. Flexslider - Responsive Image Slider
http://www.woothemes.com/flexslider/

19. Case Study:
Hired.IM
Responsive Web Design

20. MULTIPLE VIEWPORTS
From smallest to largest

21. Responsibly Responsive
Max-width: Readability & line lengths
Making search easy in mobile
Saving space in the navigation

22. The Search Form
3 different “versions” for
easier use at different
viewports
minimal tweaking on each

23. It’s OK to be Skinny

24. Development Process
PSD
Max-Width Using %
Responsive Development w/ media queries
Mobile Browser & Devices Test
Regular Browser Test

25. Testing
On Devices: On Speed:
iOS 3G
Android Edge
Blackberry Public WIFI
Tablets: Amazon Fire Dongles

26. SUMMING UP
Twitter’s Mobile App Versions

27. Use the right mobile tool for the job: apps, standalone web or
responsive
Use a mix of both min AND max media queries
Reduce waste & bloat in code
Make responsive sites work in all break points to future proof
And remember - the most important thing

28. FIND ME
www.amberweinberg.com @amberweinberg