edits
[tools.git] / doc / extend.md
Maxious 1 [HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
2 table of contents](README.md)
3
4 # Extend and customise HTML5 Boilerplate
5
6 Here is some useful advice for how you can make your project with HTML5
7 Boilerplate even better. We don't want to include it all by default, as not
8 everything fits with everyone's needs.
9
10
11 ## DNS prefetching
12
13 In short, DNS Prefetching is a method of informing the browser of domain names
14 referenced on a site so that the client can resolve the DNS for those hosts,
15 cache them, and when it comes time to use them, have a faster turn around on
16 the request.
17
18 ### Implicit prefetches
19
20 There is a lot of prefetching done for you automatically by the browser. When
21 the browser encounters an anchor in your html that does not share the same
22 domain name as the current location the browser requests, from the client OS,
23 the IP address for this new domain. The client first checks its cache and
24 then, lacking a cached copy, makes a request from a DNS server. These requests
25 happen in the background and are not meant to block the rendering of the
26 page.
27
28 The goal of this is that when the foreign IP address is finally needed it will
29 already be in the client cache and will not block the loading of the foreign
30 content. Less requests result in faster page load times. The perception of this
31 is increased on a mobile platform where DNS latency can be greater.
32
33 #### Disable implicit prefetching
34
35 ```html
36 <meta http-equiv="x-dns-prefetch-control" content="off">
37 ```
38
39 Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
40 prefetch any explicit dns-prefetch links.
41
42 **_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
43 FOREIGN DOMAINS.
44
45 ### Explicit prefetches
46
47 Typically the browser only scans the HTML for foreign domains. If you have
48 resources that are outside of your HTML (a javascript request to a remote
49 server or a CDN that hosts content that may not be present on every page of
50 your site, for example) then you can queue up a domain name to be prefetched.
51
52 ```html
53 <link rel="dns-prefetch" href="//example.com">
54 <link rel="dns-prefetch" href="//ajax.googleapis.com">
55 ```
56
57 You can use as many of these as you need, but it's best if they are all
58 immediately after the [Meta
59 Charset](https://developer.mozilla.org/en/HTML/Element/meta#attr-charset)
60 element (which should go right at the top of the `head`), so the browser can
61 act on them ASAP.
62
63 #### Common Prefetch Links
64
65 Amazon S3:
66
67 ```html
68 <link rel="dns-prefetch" href="//s3.amazonaws.com">
69 ```
70
71 Google APIs:
72
73 ```html
74 <link rel="dns-prefetch" href="//ajax.googleapis.com">
75 ```
76
77 Microsoft Ajax Content Delivery Network:
78
79 ```html
80 <link rel="dns-prefetch" href="//ajax.microsoft.com">
81 <link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
82 ```
83
84 ### Browser support for DNS prefetching
85
86 Chrome, Firefox 3.5+, Safari 5+, Opera (Unknown), IE 9 (called "Pre-resolution"
87 on blogs.msdn.com)
88
89 ### Further reading about DNS prefetching
90
91 * https://developer.mozilla.org/En/Controlling_DNS_prefetching
92 * http://dev.chromium.org/developers/design-documents/dns-prefetching
93 * http://www.apple.com/safari/whats-new.html
94 * http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
95 * http://dayofjs.com/videos/22158462/web-browsers_alex-russel
96
97
98 ## Search
99
100 ### Direct search spiders to your sitemap
101
102 [Learn how to make a sitemap](http://www.sitemaps.org/protocol.php)
103
104 ```html
105 <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
106 ```
107
108 ### Hide pages from search engines
109
110 According to Heather Champ, former community manager at Flickr, you should not
111 allow search engines to index your "Contact Us" or "Complaints" page if you
112 value your sanity. This is an HTML-centric way of achieving that.
113
114 ```html
115 <meta name="robots" content="noindex">
116 ```
117
118 **_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
119
120 ### Firefox and IE Search Plugins
121
122 Sites with in-site search functionality should be strongly considered for a
123 browser search plugin. A "search plugin" is an XML file which defines how your
124 plugin behaves in the browser. [How to make a browser search
125 plugin](http://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
126
127 ```html
128 <link rel="search" title="" type="application/opensearchdescription+xml" href="">
129 ```
130
131
132 ## Internet Explorer
133
134 ### Prompt users to switch to "Desktop Mode" in IE10 Metro
135
136 IE10 does not support plugins, such as Flash, in Metro mode. If your site
137 requires plugins, you can let users know that via the X-UA-Compatible meta
138 element, which will prompt them to switch to Desktop Mode.
139
140 ```html
141 <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
142 ```
143
144 Here's what it looks like alongside H5BP's default X-UA-Compatible values:
145
146 ```html
147 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true">
148 ```
149
150 You can find more information in [Microsoft's IEBlog post about prompting for
151 plugin use in IE10 Metro
152 Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx).
153
154 ### IE Pinned Sites (IE9+)
155
156 Enabling your application for pinning will allow IE9 users to add it to their
157 Windows Taskbar and Start Menu. This comes with a range of new tools that you
158 can easily configure with the elements below. See more [documentation on IE9
159 Pinned Sites](http://msdn.microsoft.com/en-us/library/gg131029.aspx).
160
161 ### Name the Pinned Site for Windows
162
163 Without this rule, Windows will use the page title as the name for your
164 application.
165
166 ```html
167 <meta name="application-name" content="Sample Title">
168 ```
169
170 ### Give your Pinned Site a tooltip
171
172 You know — a tooltip. A little textbox that appears when the user holds their
173 mouse over your Pinned Site's icon.
174
175 ```html
176 <meta name="msapplication-tooltip" content="A description of what this site does.">
177 ```
178
179 ### Set a default page for your Pinned Site
180
181 If the site should go to a specific URL when it is pinned (such as the
182 homepage), enter it here. One idea is to send it to a special URL so you can
183 track the number of pinned users, like so:
184 `http://www.example.com/index.html?pinned=true`
185
186 ```html
187 <meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true">
188 ```
189
190 ### Recolor IE's controls manually for a Pinned Site
191
192 IE9+ will automatically use the overall color of your Pinned Site's favicon to
193 shade its browser buttons. UNLESS you give it another color here. Only use
194 named colors (`red`) or hex colors (`#ff0000`).
195
196 ```html
197 <meta name="msapplication-navbutton-color" content="#ff0000">
198 ```
199
200 ### Manually set the window size of a Pinned Site
201
202 If the site should open at a certain window size once pinned, you can specify
203 the dimensions here. It only supports static pixel dimensions. 800x600
204 minimum.
205
206 ```html
207 <meta name="msapplication-window" content="width=800;height=600">
208 ```
209
210 ### Jump List "Tasks" for Pinned Sites
211
212 Add Jump List Tasks that will appear when the Pinned Site's icon gets a
213 right-click. Each Task goes to the specified URL, and gets its own mini icon
214 (essentially a favicon, a 16x16 .ICO). You can add as many of these as you
215 need.
216
217 ```html
218 <meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
219 <meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
220 ```
221
222 ### (Windows 8) High quality visuals for Pinned Sites
223
224 Windows 8 adds the ability for you to provide a PNG tile image and specify the
225 tile's background color. [Full details on the IE
226 blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx).