- Tools. Selecting an editor, setting up developer tools, setting up a build process, debugging with Chrome DevTools, testing on the device, on the emulator and in the cloud, etc.
- Layout. Google recommends Responsive Website Design using CSS3 Media Queries with multiple breakpoints for various screen sizes, responsive web design patterns – Fluid Layout, Column Drop, Layout Shifter, Off Canvas-, plus a number of navigation and action patterns – App, Tab and Bottom Bars, Navigation Drawer.
- Forms & User Input. Choosing forms that work on mobile devices, dealing with real-time validation, dealing with touch and implementing custom gestures.
- Images, Audio, Video. – Advice for using <img>, CSS background, SVG for icons, image performance issues, dealing with videos, legacy platforms, accessibility issues, etc.
- Performance. Optimizing the Critical Rendering Path, using PageSpeed, tuning content performance by eliminating unnecessary downloads, optimizing encoding and images, using HTTP caching, etc.
- Device Sensors and Capabilities. Advice on accessing user’s location, device orientation and motion, making calls.
WSK targets the latest two versions of Chrome, Firefox, Safari, Opera, IE 10& 11, but also the mobile browsers for Android, iOS, Windows Phone and Blackberry.
Both the Web Fundamentals related code and Web Started Kit code are open source and available on GitHub.