Guidance from 456 Berea Street, Use the label element to make your HTML forms accessible:
All visible form controls except buttons should have an associated label element (buttons are self-labelling). The label element can be associated with its form control either implicitly or explicitly.
An implicit association is created by putting the form control inside the label element, while an explicit association is created by giving the label element a for attribute with the same value as the form control’s id attribute.
Include external css files with <link> instead of @import, directly after the open <head> tag: <head><link href=’/css/styles.css’ rel=’stylesheet’ />…
This should be done to reduce HTTP requests.
iOS does not support Flash. If you want your site to work on mobile devices, replace Flash with HTML5 or at least include an HTML5 fallback to support that ever-growing group of users.
It’s true that the average web site’s size has surpassed 1MB. But it is also true that most web sites are excruciatingly slow and unusable on mobile — mobile being the future of web browsing.
Be among the best. Keep your pages smaller than 500K.
To benefit from common scripts cached by browsers, you should use the Google Library APIs whenever possible. As an example, over 85% of sites use JQuery, and this 20K-ish script does not need to be re-downloaded for every single site.
However, always have a local fallback when linking external scripts that may be included locally.
Height and width are not officially required attributes for <img>. However, including them guarantees faster content download. That information also helps the browser determine the viewport space for the image, making page rendering visually smoother.
While you may have a good reason to write styles inline using the “style” attribute, generally it is not a good practice. In this case styles are not reusable, too specific, and the code becomes bloated and difficult to maintain. We suggest identifying common styles and including them with a style sheet.
Google Analytics or some other web analytics software should be included and used. The priority of this item depends on the type of site, but it is essential for most.
PNG image format was created to improve upon and replace GIF images; they compress better in most cases.* Additionally, there are patent issues around using GIFs.
We suggest PNG-8 for non-transparent images, PNG-24 for transparent images, JPEG for photos, and GIF for animated web graphics.
*An image would need to be very small for GIF to be the better choice.