Solo – Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript presented by Bruce Lawson, Web Evangelist, Opera Software
Summary:
Web apps, mobile phone apps, websites that work anywhere, SVG, HTML5, Widgets, location-aware sites, Media Queries. Beyond the buzzword assault is a revolution in the way sites are made, what they can do, and how they are accessed. We’re going to talk about what the buzzwords actually mean and how they all fit together. We’ll explore different methodologies for making websites that users can access on mobile phones and other devices, and how to optimize your existing website for mobile. Then we’ll put all the buzzwords together into a coherent vision that works now, with real code snippets that you can use right away. Finally, we get out our crystal balls out and look at what’s coming around the corner in HTML5 and the W3C APIs that allow websites to access native capabilities on devices.
Bruce Lawson’s blog post and talk outline
Talk Presentation on Slideshare
Bruce Lawson Bio:
Web Evangelist focussing on Open Standards like HTML5, CSS, accessibility. English Literature graduate with a love for poetry, kickboxing and good beer.
Notes:
- From 2008 to 2009, the proportion of people accessing the web from desktops and laptops in China DECREASED, as a result of the increasing popularity of mobile.
- Philosophy
- “There is no Mobile Web. There is only The Web, which we view in different ways.”
- Saying mobile users are “task focused” is only half right. ALL users are task focused, including desktop users
- 3 Methodologies (ED – I wrote about CSS3, Grid Layout, and Media Queries previously – Web Design for Desktop & Mobile Consolidated Compatibility: Adaptive CSS3)
- Special Mobile Site
- Almost always not the right way, however often in a commercial way, the best way is not the actual best way – the best is the quickest and cheapest.
- Because of this, many corporations go with making an entirely separate mobile site.
- If this is done, refactor site for the mobile screen, but don’t dumb down. Let users still perform same functionality
- Offer users a choice – desktop or mobile. Make sure they can still get to the desktop site on their mobile, if they want. Remember what the users picks in a cookie, and always provide users with link to switch.
- DO NOT do browser sniffing. Technology for this is fragile and not future proof – so many new products are entering the market every week, its impossible to write a robust script to deal with all of this.
- Do Nothing At All
- Just send normal desktop site to mobile users.
- Most decent mobile browsers are fully able to deal with normal desktop websites.
- Don’t necessarily do “lowest common denominator” coding – most modern mobile browsers can hande a lot. For example, mobile browsers can use javascript touch events.
- Javascript touch events being retroactively specified by w3c – Doug Schacter leading effort. Listen for touch events in addition to mouse clicks.
- CSS3 – font control, text and box shadows, rounded corners, basic animations
- CSS3 Spec is not complete – vendor specific tags are still necessary. However, you should also add the generic, prefix-less transition as well, for future proofing. (transition: all 0.5 ease-in-out;)
- HTML5 Doctype – extends html to support web applications
- SVG or Canvas? both scriptable graphics, but very different. SVG supported in 4 modern desktop browsers, and IE9. Not supported in native android browser. Vector graphics, therefore infinetely scalable. XML, so text based – can be made accessible. Keeps DOM element – can undo and query. Can author with adobe illustrator or inkscape.
- Geolocation – find out your location via JavaScript. Use geolocation for Progressive Enhancement.
- Offline Support – Means that you can detect when the users has gone offline, and take remedial action, so that data is not lost. Like for saving wordpress posts. Localstorage/sessionstorage is 1000% better than cookies.
- Server-sent events and Web Sockets – Sends two way communication channel with server – full duplex. Coming to mobile browsers soon, will be very very powerful
- Optimize for mobile
- Not creating a separate mobile site, but making a site that can respond to mobile requirements.
- Best methodology for doing this is through Media queries.
- Main weapon is “CSS Media Queries” – Talking to the device, ans asking it about it’s capabilities, specifically. NOT Sniffing simply what kind of browser it is. How many dpi is your screen? Are you in portrait or landscape? Do you support touch? Great examples – https://mediaqueri.es/
- Viewport Metatag – Maps physical and virtual pixels (ED – in use on my homepage) Ability to set properties like initial scale, zoomability, device width.
- Special Mobile Site
- Optimization tips and tricks
- HTML – Don’t use tables for layout. Tables take two passes to render, are slow, and heavy on the CPU
- HTML – When using images, give the dimentions of the images in the HTML, so that the browser knows how much space to leave for each image. This prevents the mobile browser from needing the “re-flow” the html, which is processor intensive. Better usability, nothing moves off the screen as the page loads
- HTML – Use the “tel” <a href=”tel:xxxxxx”> for phone numbers, so users can simply click a phone number to call it. Best employed when doing websites for special mobile versions.
- Code Accessibly – make sure that lots of people can use a site, including disabled people. (IE, don’t use “onhover”)Ref: https://w3.org/TR/mwbp-wcag
- Minimize HTTP requests – this is the slowest part of any webapp, and it’s good to minimize this. Combine JS into one file – 1 10k file is faster than 10 1k files. Use CSS Sprites. Use SVG or <canvas> for images
- CSS – use EMS rather than PX for fonts – some new phones have tons of pixels. ems is a better measurement of relative size
- CSS – Use fluid layouts, remember motion sensors that can detect portrait or landscape
- CSS – Use media queries, and turn off fancy shadows and transitions if not necessary
- Data URLs- Ref: https://software.hixie.ch/utilities/cgi/data/data
- JavaScript – Put <script> elements as far down the source as possible, to speed up load, and optimize execution
- JavaScript – consider use of <script defer…> and <script async…>
- JavaScript – Use feature detection. Ref: Modernizr
Also relevant – friend Ben Beyda just sent over this article from Mobile Marketer: How HTML5 is changing the face of mobile.
“One of the real benefits of HTML5 is its potential, in the long run, to standardize the highly fragmented rich-media universe, making it easier and more efficient for advertisers to engage consumers with even more immersive advertising experiences – across both PC and mobile – at scale,” said Jamie Wells, director of global trade marketing, mobile, local and commerce at Microsoft, Redmond, WA.