BT

Google Web Fundamentals and Web Starter Kit

by Abel Avram on Jun 20, 2014 |

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. 

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Web Starter Kit alternative by Pavel Gavlík

I'm developing similar Gulp-powered tooling solution like one from Web Starter Kit with guys from madebysource.com. It's called Phở Devstack.

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

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT