1 / 94

Mobile Web Development

Mobile Web Development. Strategies Best Practices Performance Tips. Who Am I?. Martin Laritz Web Developer since 2005 Mobile Developer Android, iOS , Windows 8, Windows Phone, PhoneGap Mobile Web Developer for about 5 minutes http://www.MartinLaritz.com Contact

brinda
Download Presentation

Mobile Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Web Development Strategies Best Practices Performance Tips

  2. Who Am I? • Martin Laritz • Web Developer since 2005 • Mobile Developer • Android, iOS, Windows 8, Windows Phone, PhoneGap • Mobile Web Developer for about 5 minutes • http://www.MartinLaritz.com • Contact • Martin.Laritz@gmail.com • @MLaritz

  3. QUIZ TIME! HOW MANY PEOPLE ARE WEB DEVELOPERS?

  4. HOW MANY People have created a mobile website?

  5. What is the Mobile Web? • This presentation is a lie! • Initially meant accessing the world wide web via a mobile device • The Mobile Web doesn’t exist • It’s just the web! • Shouldn’t matter what device or what browser you’re accessing content from

  6. THANKS BRAD FROST! EVOLUTION of the web

  7. INTERNETS! WHY Are we here?

  8. Why Should You Care? • Mobile is blowing up! Mobile is blowing up!

  9. YEAH! Random graphs! Here Comes the Statistics

  10. This Talk is NOT … • Responsive Images • Web apps vs. Native apps • They can coexist • ESPN • Development Frameworks • PhoneGap • Titanium

  11. Let’s get done to business

  12. Agenda • Strategies • Mobile Design and Development • Best Practices • Both for Mobile and General Web Development • Performance Improvements

  13. Mobile Web Strategies • Desktop website • Usually fixed width • Responsive • Separate Mobile site(s) • RESS • Responsive Design + Service Side Components

  14. Desktop Website • Usually fixed width • The 960 Grids • Pros • Easy to implement • Most mobile browsers do a decent job of rendering desktop-only designs • Cons • Not mobile optimized • Tends to be slower • Pinch and Zoom

  15. Responsive Web Design • Content is adapted based on the capabilities of the browser • Content is adapted by using fluid, proportion based grids, flexible images, and media queries • Percents for the grids instead of PXs • Flexible Images – Max-Width: 100% • Media Queries

  16. Responsive Pros and Cons Pros Cons More upfront planning required Tends to lead to bloated pages and slower load times Some things are not fluid Banner images Videos Images Not all devices support media queries (IE8) • One code base • Site updates are easy • Future Friendly • Better for SEO • Same content between devices • One URL • Aesthetically pleasing for different device heights and widths

  17. Responsive Design Tips • More than just Fluid Grids, Flexible media, and media queries • Performance, Device Support, Device Optimization, Future Friendly Designs • Set your breakpoints based on content • Not based on devices • Use EMs for breakpoints • 100% = 1em ~= 16px ~= 14pt • This fixes issues when zoom is increased • Images • Max-Width: 100% • Don’t round percentages

  18. Separate Mobile Site(s) • Different websites for each class of devices • Group common capabilities • Different websites on separate subdomains • Use a device database to lookup capabilities based on User-Agent strings • WURFL and DeviceAtlas • Must be comfortable with device detection • Allow the user to switch between desktop/mobile sites

  19. Separate Mobile Site Pros Cons Where do you draw the line? One site for phone, one for tablet, one for desktop? New devices coming out every day With new heights, widths, resolutions, and capabilities SEO Penalized by Google if you redirect incorrectly Multiple URLs which can lead to duplicate content Requires redirection Multiple codebases • Easier to make changes to specific sites • But more difficult to change common elements • Faster load times • Tailored experience per device (class)

  20. Responsive Design + Server Side Components • Also known as RESS • Best of both worlds • Client side media queries • Server side optimizations • Increased performance or fine tune user experience • Can pass client side data in cookie to server • One code base with defaults • Then deliver component based features based on device detection

  21. RESS Pros and Cons Pros Cons Requires device detection Harder to test Dynamically build your content on the server will increase load on server More complicated • Faster load times • Unneeded HTML, CSS, JS, and images will not be downloaded • Tailored experiences per device or device class

  22. Best Practices • Mobile First • Design For Touch • Readability • Fixed Width is Dead • Optimize User Input • Progressive Enhancement • Viewport Meta Tag • Border Box • Testing

  23. Mobile First • Mobile forces you to focus • On the most important data and actions • CONTENT! • Mobile extends your capabilities • Mobile browsers tend to have more capabilites than desktop browsers • But this gap is closing fast • Let’s redesign my old website

  24. Mobile First • It didn’t work for me • I struggled changing the existing markup to fit on mobile • Step back and think about your content • Start with the small/tightest constraints and work out

More Related