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>, CSSbackground, 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.