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 Contact –

HOW MANY PEOPLE ARE WEB DEVELOPERS? QUIZ TIME!

HOW MANY PEOPLE HAVE CREATED A MOBILE WEBSITE?

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

EVOLUTION OF THE WEB THANKS BRAD FROST!

WHY ARE WE HERE? INTERNETS!

Why Should You Care? Mobile is blowing up!

HERE COMES THE STATISTICS YEAH! Random graphs!

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

LET’S GET DONE TO BUSINESS

Agenda Strategies – Mobile Design and Development Best Practices – Both for Mobile and General Web Development Performance Improvements

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

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

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

Responsive Pros and Cons Pros 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 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)

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

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

Separate Mobile Site Pros Easier to make changes to specific sites – But more difficult to change common elements Faster load times Tailored experience per device (class) 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

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

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

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

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

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

Design For Touch Clickable elements should be 44px – Use padding instead of margin Don’t rely too heavily on hover – Touch doesn’t support hover Incorporate gestures where appropriate

Design for Thumbs Content on the top Controls on the bottom Don’t place clickable items too close together

Readability Design for Readability – Not only increased font size – Also increase line height Everything should be at least 14px – I try to keep all content that is meant to be read (like blog entries) at 1em+

Fixed Width is Dead Even if you don’t use responsive design, there’s no need to confine your users to a minimum browser width – Users shouldn’t have to view your website with their browser maximized Use % for width and heights instead of PX – (target / context) * 100 = percent – Remember: don’t round

Optimize User Input Only include required fields – Minimize the length of the form and more users will fill it out Use Checkboxes, Radio Buttons, Dropdowns instead of Textboxes where you can Use the correct HTML5 input types – , Number, URL, Search, Date, Telephone

Progressive Enhancement Uses web technologies in a layered fashion that allows all users to access the basic functionality of a web page Provides an enhanced version to those with advanced browsers Start with basic html – no css, no javascript – Enhanced layout provided by CSS – Enhanced functionality provided by JS

Viewport Meta Tag You need one if you using responsive design or dedicated mobile sites Width – Tells the width of your site Initial-Scale – Sets the zoom level Maximum-Scale – Sets the maximum zoom

Border Box * { box-sizing: border- box; } – IE8 and up Padding and Border cut into the width, not add to it

How to Test Your Mobile Sites Firefox Mobile on Desktop – Opera Mini Simulator – Opera Mobile Simulator – iOS SDK Android SDK Windows Phone SDK

What Do You Think? What’s the best thing you can do to improve the mobile experience for your users?

Improve Mobile Experience Performance Other Answers – Aesthetics Mobile browsers do a decent job of rendering desktop sites – Optimize for Touch Pinch and Zoom – Readability Pinch and Zoom – Add a QR Code

Performance! Remove HTTP Headers Reduce HTTP Requests Framework Optimization Optimize Images Icon Fonts Miscellaneous

Why Optimize for Performance? An average webpage is 1246KB – AT&T account – 2GB at $30/month: 2¢ / page 74% of users expect a mobile website to load in the same amount of time as a desktop site

Load Times

Remove HTTP Headers Helps Security Remove all unneeded headers – Server – Asp.Net MVC Version – Asp.Net Version – Powered By RemoveUnnecessaryHeaders NuGet Package

Reduce HTTP Requests Latency – amount of time between when browser requests a resource and when it starts to receive the response – Cable modem: 20ms – 3G Connection: 200ms Average webpage has 40 requests – Latency – 0.2 seconds for Cable Modem – Latency seconds for 3G Most browsers only open 2 connections to a domain at a time

Reduce HTTP Requests Remove files – Concatenate CSS and JS Files – CSS Sprites Reduce unneeded files – Print CSS Request Quest – Quiz on what triggers an HTTP Request –

Reduce File Size Minify HTML, CSS, and JS files Gzip – Compresses resources to reduce – If you do one thing to improve performance, do this Every byte counts Use a CSS Preprocessor – Less or Sass – Will help remove duplicate selectors – Minifies automatically

Frameworks Do you really need a Framework? – jQuery Framework for just one Select Do you need the whole CSS Framework? – Download all of Bootstrap just for the icons – jQuery UI – Do you need every component? Why use a bloated Framework – Do you even need a Framework – Use Vanilla JS

Optimize Images Images make up between 50%-60% of the average website payload Save the image in the correct format – If you have to, save in each format Don’t load a big image and make the browser scale it down – Use an Image Optimizer – ImageOptim on Mac, Image Resizer NuGet

Icon Fonts It’s a font, so one download – Instead of multiple images Benefits – Scale them with CSS – Color them with CSS – Add shadow, change opacity, and/or rotate with CSS – They automatically scale for retina displays IcoMoon – Search different icon fonts and create your own font

Miscellaneous Set up caching – Especially for static resources – Add an expires tag Put Stylesheets at the top – Page appears to load faster as it eliminates reflow Put Scripts on the bottom – While script is downloading, browser will not download any other resources Use GET for AJAX Requests – POST sends the headers first, then the content

Miscellaneous 2 Do you really need a CMS? – The default WordPress page queries the database 27 times Reduce 3 rd party libraries – “to load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes KB in bandwidth.” – Zurb Limit Cookies – Cookies get sent with each request

Summary So what did we learn? There is only one web Mobile Web Strategy: – Desktop site, responsive, device class sites, RESS Best Practices Performance Your website should be accessible no matter what device your users are using

Questions?

Images Courtesy of … Brad Frost – CSS Tricks – Bukk It – Web Performance Today -