Kraken

← Kraken Home

Starter Template

Here's a basic HTML template page to get you started.

                
                
            

The Template Explained

HTML Language

The language attribute (lang) helps screen-readers and translation software read your site (learn more). Be default, it's set to English. Change it as needed for your local language.

Chrome Frame

Sometimes newer versions of IE will use not-so-new versions of their rendering engine. We tell IE to use the latest available version of it's rendering engine, or Chrome Frame if it's installed.

Mobile Screen Resizing

Modern mobile browsers often "fake" a desktop sized viewport so that websites that aren't mobile-optimized aren't weirdly zoomed in when you load them. The viewport tag tells browsers that the viewport should be the size of the screen (because our site is mobile-optimize).

HTML5 Shim

Internet Explorer 8 and lower do not recognize the new HTML5 semantic elements (like <header>, <section>, and so on). The HTML5 Shim is a little JavaScript snippet that we load conditionally on older IE browsers to ensure those elements render correctly.

Icons

The site favicon and touch icons for when people bookmark your site or app on the homescreen of their mobile device. This now includes support for Windows phones, too. (Icons aren't included with Kraken. Add them to img folder.)

Old Browser Warning

A friendly message encouraging visitors on older versions of IE to upgrade their browser. They can still access the site content. It will just look a bit funny.

JavaScript in the Footer

For faster loading and better site performance, JavaScript files are included in the footer, not the header.

Google Analytics

An optimized version of Google Analytics is preloaded for you. Just add your site's ID (or replace the code altogether if you're using another analytics platform). Adapted from HTML5 Boilerplate.


Getting Started

Advanced