Google Web Fundamentals and Web Starter Kit

Google has published a number of guidelines and boilerplate code for cross-platform responsive website design.

Aware of the challenges met by developers due to the existence of a large variety of devices, especially mobile ones, Google has published Web Fundamentals, a set of guidelines and best practices for modern web development. Web Fundamentals includes advice with HTML, CSS or JavaScript code samples for the following areas:

• 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.

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.

Both the Web Fundamentals related code and Web Started Kit code are open source and available on GitHub.


Source: http://www.infoq.com/news/2014/06/google-web-design