BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Google Web Fundamentals and Web Starter Kit

Google Web Fundamentals and Web Starter Kit

Leia em Português

This item in japanese

Lire ce contenu en français

Bookmarks

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. 

Rate this Article

Adoption
Style

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.

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

Community comments

  • Web Starter Kit alternative

    by Pavel Gavlík,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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

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

BT