HTML5 Rocks

HTML5 Rocks

Chrome Dev Summit: Mobile Summary

By Paul Kinlan at

The Chrome Dev Summit finished a couple of weeks ago, and here's the first in a series of reports from the event. There was a strong emphasis on Mobile and Cross-device development, so we'll kick off with that!

Best UX patterns for mobile web apps by Paul Kinlan

After an analysis of the mobile-friendliness of the top 1000 sites we found some problem areas: 53% still only provide a desktop-only experience, 82% of sites have issues with interactivity on a mobile device and 64% of sites have text that users will have issues reading.

Quick hits to dramatically improve your mobile web experience:

  • Always define a viewport
  • Fit content inside the viewport
  • Keep font sized at a readable level
  • Limit use of Web Fonts
  • Size and space out tap targets appropriately
  • Use the semantic types for input elements

PageSpeed Insights just launched a UX analysis for determining how mobile-friendly your site is. It will help you find common problems with your sites mobile UX. Try it out!

Slides: Best UX patterns for mobile web apps


Multi-device Accessibility by Alice Boxhall

Users will be accessing your sites and services from a multitude of devices with a wide range of different accessibility requirements. By using the correct semantic elements and correct ARIA roles you help give the browser and assistive technology a much improved understanding of your page.

Slides: Multi-device Accessibility

Key ways to understand and address a11y issues

  • Ensure you have a good keyboard-only user experience
  • Express the semantics of your interface with correct element choice and ARIA
  • Use ChromeVox on desktop and TalkBack on Android to test.
  • Try the Accessibility Developer Tools Chrome extension
  • A more diverse audience is getting online, which further amplifies the need of making your sites accessible

Build Mobile Apps using the Chrome WebView by Matt Guant

We all know the problems that developers have had in the past building for WebView: Limited HTML5 features, no debugging tools, no build tools. With the introduction of a Chromium powered WebView in Android 4.4 (KitKat) developers now have a huge range of new tools at their disposal to build great native apps using the WebView.

The WebView supports full remote debugging with the same tools you use for Chrome. You can also take your trusted web development workflow with Grunt and integrate that into your native stack tooling via Gradle. Further merging worlds, there's a clever trick to use the Chrome DevTools to test your native code from Javascript.

Slides: Build Mobile Apps using the Chrome WebView

Effective WebView development takeaways

  • It’s not the new features that are important, its the tooling that you can now use to speed up your workflow
  • Don’t try to emulate the native UI. But make sure to remove some of the tells that it is Web Content.
  • Use native implementations of features when appropriate. i.e, use the DownloadManager rather than XHR for large files.

Optimizing your Workflow for a Cross-device world by Matt Gaunt

If we have to develop for Desktop, Mobile, Tablet, wearables and other form factors, how can you optimise your workflow to make your life less stressful? There's a solid multi-device approach for quick iteration with LiveReload, Grunt, Yeoman, and the newly-unveiled Mini Mobile Device Lab. Lastly, if you don't have the physical hardware you want to test, some providers make it available through the cloud.

Slides: Optimizing your Workflow for a Cross-device world

Key points

  • The number of devices that we are going to have to cater for is only going to increase
  • Getting your workflow with the right with Grunt and Yeoman
  • Simplify cross browser and cross device testing with Mini Mobile Device Lab
  • Be smart with your emulation choice using Chrome DevTools Emulation, Stock Emulators, Cloud Based Emulators like Saucelabs, Browserstack and Device Anywhere and third party emulator Genymotion
  • Mobile testing means more than just testing on your wifi connection, use a proxy to simulate slower network speeds

Network connectivity: optional by Jake Archibald

We learnt many things from this talk: Jake doesn’t wear shoes when presenting; Business Kinlan has a new book coming out soon; Offline is being taken seriously by browser vendors and you will soon have the tools in your hands that help you build great experiences that work well when you are offline.

ServiceWorker will give us the flexibility that we need to build compelling offline first experiences with ease and not suffer the pains inflicted by AppCache. You can even experiment with the API using a Polyfill.

Slides: Network connectivity: optional

ServiceWorker to the rescue

  • In the next generation of progressive enhancement, we treat the network as a potential enhancement
  • ServiceWorker gives you full, scriptable, debuggable control over network requests
  • If you have an offline experience, don’t wait for the network to fail before you show it, as this can take ages

The Yeoman Monthly Digest #2

By Addy Osmani at

Allo’ Allo’ and Happy Holidays! Welcome to the second issue of the Yeoman monthly digest – our regular round-up of articles, tips, generators and videos to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the updates below helpful!

Grunt pro-tips

It’s tempting to try every Grunt plug-in out there – there’s a bajillion! It’s also easy to get carried away. Before you know it, you’re staring at your terminal far longer than you used to be, waiting for your tasks to complete. It can be frustrating during your build, but super frustrating during your watch.

Fortunately, the community has been working towards speeding up your development cycle even more.

  • Reduce your Grunt compilation time with this custom task trick
  • Use grunt-newer to only run Grunt tasks on files that changed
  • Run tasks concurrently with grunt-concurrent so multiple tasks can be run simultaneously

Some other tips:

Videos

Articles

Generators

yo 1.0.7-pre is now available for testing on npm and we look forward to talking more about our roadmap for 2014 in the coming weeks. In the mean time, there's lots of juicy new updates to both our official generators and those you've been authoring below.

Official generator updates

  • Backbone 0.2.2 released with RequireJS + CoffeeScript support & --appPath option
  • AngularJS 0.7.1 with support for Angular 1.2.6 and grunt-bower-install
  • Ember.js 0.8.0 released. Scaffolding updated to Ember 1.2 syntax, improved CoffeeScript support, templating, REST routes
  • WebApp 0.4.5 and 0.4.6 including improved HTMLMin, bower install fixes and grunt-bower-install support for CSS dependencies
  • Polymer generator 0.0.8 with Web Component concatenization and other updates
  • Chrome app 0.2.5 - proper support for livereload, rewritten app generator, build task for packaging, new permissions code and more.

Other official generators including jQuery, Gruntfile, CommonJS, NodeJS and Mocha have also been updated.

Featured Community generators

StackOverflow answers

yo newyear

That's a wrap! If there are Yeoman resources you would like to suggest for the next issue, please feel free to suggest them to @yeoman on Twitter or +Yeoman on Plus and we’ll be sure to check em’ out. Happy Holidays and have a fantastic new year!

With special thanks to Stephen Sawchuk, Sindre Sorhus and Pascal Hartig for their review of this issue