See also
Todo
Document favicon best practises.
When creating pages, make sure to use a Doctype declaration. For HTML5 this means all HTML files should start with:
<!DOCTYPE html>
Warning
Before the doctype declaration, no spaces, characters or other content is allowed.
See also
This explicitly allows browsers to download web application for offline availability. This uses a so-called cache manifest which looks like this:
# <VERSION IDENIFIER>
CACHE MANIFEST
FALLBACK:
# This will cause any uncached URL to be substituted with offline.html
/ /offline.html
NETWORK:
# These resources will only be available online.
/checking.cgi
CACHE:
# These resources will be downloaded in the background and cached
/offline.html
/test.css
/test.js
/test.png
Note
The cached files are only updated when the contents of the manifest file have changed. Hence, it is essential that a some kind of version identifier or last modified date be added in a comment in the file.
Note
Using a cache manifest causes the cached files to be loaded instead of the online version of files, while uploads are downloaded in the background. Updated files will only be available after a reload of the page, which can be automated using JavaScript.
Note
For HTML5 offline app cache to function it is absolutely essential that the MIME type be set to text/cache-manifest.
See also
See also
Within HTML5, several tools are available to support multi-resolution images, each one complementing the other. For example:
<picture>
<source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" />
<source srcset="sm.jpg 1x, sm-hd.jpg 2x" />
<img src="fallback.jpg" alt="" />
</picture>
This snippet uses the <picture> element together with the srcset attribute.
Todo
This section suggests several alternate approaches for responsive images. Add a recommendation for a particular approach or a proper argumentation allowing sensible decisions.
See also
The srcset attribute allowed developers to specify a list of sources for an image attribute, to be delivered based on the pixel density of the user’s display:
<img src="low-res.jpg" srcset="high-res.jpg 2x">
See also
The picture element is an image container whose source content is determined by one or more CSS media queries:
<picture>
<source src="med.jpg" media="(min-width: 40em)" />
<source src="sm.jpg" />
<img src="fallback.jpg" alt="" />
</picture>
See also