Problems in Mobile Web Development

An assessment of the different routes you can take in mobile development, as well as some common issues and fixes.

Transcript

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 VS APPS Different Approaches for Different Clients
8. Separate from regular desktop version, but still on the web Great for larger, more complicated sites, like eCommerce Sustainability nightmare More expensive Mobile Sites
9. Will work with every new device Great for simpler sites Least expensive option RESPONSIVE DESIGN Can only edit CSS w/o resorting to JS Bloated images
10. 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 Mobile Apps
11. THE MOBILE WEB TIPS, TRICKS & A CASE STUDY
12. Case-Study: Audible Mobile Site
16. Flexslider - Responsive Image Slider http://www.woothemes.com/flexslider/
17. Case-Study: DC Internships Responsive Site
18. Media Queries Desktop First vs. Mobile First Use both max/min queries Easier to use when needing to start from a finished full- size PSD Results in some code bloat if you code incorrectly I personally prefer this route Use min-width queries Difficult to envision and start when you’re a beginner Less bloated - add styles instead of taking away Andy Clarke (@malarkey) champions this route
19. This Became
23. Development Process PSD Max-Width Using % Responsive Development w/ media queries Regular Browser Test Mobile Browser & Devices Test
24. SUMMING UP Twitter’s Mobile App Versions
25. 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
26. www.amberweinberg.com @amberweinberg FIND ME