Google Web Fundamentals and Web Starter Kit
Google has published a number of guidelines and boilerplate code for cross-platform responsive website design.
- 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
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.
Beside guidelines, Google is providing Web Starter Kit (WSK), a package with boilerplate code and tooling for creating multi-device websites. Inspired by Mobile Boilerplate, Web Starter Kit includes code for mobile HTML pages, responsive layout, a visual components style guide, and the optional gulp.js build tool.
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.
Web Starter Kit alternative
If you're looking for an alternative to Web Starter Kit or a for Gulp-powered tooling for your existing project, check out Phở Devstack at pho.madebysource.com/ .
Tom Gilb & Kai Gilb Jan 26, 2015