Nowadays we not only develop for one device. We can not rely on a solution for one type of screen. Desktop computers, tablets of various sizes and smartphones in all kinds of flavours have different screen sizes. How are we able to develop for all these devices, and what will be the optimal workflow?
During the presentation Matt Gaunt mentioned a wide variety of tools. This is a summary of all tools and links mentioned during the presentation.
yeoman.io – Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. It takes care of providing everything needed to get started without any of the normal headaches associated with a manual setup.
Ghostlab – Ghostlab synchronizes scrolls, clicks, reloads and form input across all connected clients. This means what you’re testing is not the simple page load, but the full user experience.
Mini Mobile Device Lab – This project is a Virtual Device Lab. It allows you to quickly launch URLs across all configured devices in an instant, selecting which browser to launch.
Chrome DevTools Emulation – DevTools contains built in presets for a number of devices, this allows you to emulate and debug mobile viewport issues like CSS media query breakpoints. Selecting a device preset automatically enables a number of settings.
Content Shell – Run Content Shell on an emulator.
Intel XHam – Note: Intel XHam tool only works on computers equipped with Intel processors. This tool speeds up your Android emultor.
Genymotion – Genymotion is the next generation of the AndroVM open source project, already trusted by 450,000 developers.Genymotion is an emulator using x86 architecture virtualization, making it much more efficient. Taking advantage of OpenGL hardware acceleration, it allows you to test your applications with amazing 3D performance.
BrowserStack – Live, Web-Based Browser Testing. Instant access to all desktop and mobile browsers.
Sauce Labs – Run your web and mobile app, tests across hundreds of real browsers and platforms instantly.
Device Anywhere – Free and unlimited ten minute testing sessions on real, popular smartphones for mobile websites.
Weinre – weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
jsHybugger – Debug web pages in the Android browser or WebView, and apps built with PhoneGap/Cordova, Icenium or Sencha Touch. Use Chrome DevTools or Eclipse for debugging – no more digging through heaps of console.log() output. jsHybugger runs on Android 2.3.3 and above, covering 97.3% of devices worldwide.
Charles Web Debugging Proxy – Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
Network Link Conditioner in Lion – This tool helps you with bandwidth throttling and enables you to test for example 3G connections.