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