And that’s it - you’re on your way to a fully Metro 4 site. If you’re at all unsure about the general page structure, keep reading for an example page template.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

HTML5 doctype

Metro 4 requires the use of the HTML5 doctype.

<!DOCTYPE html>
<html lang="en">
...
</html>

Responsive meta tag

Metro 4 is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>