HTML is the building blocks of the web development world. Without the HTML we having nothing to target with our CSS and nothing to manipulate with our Javascript.
Fortunately for you HTML is responsive from the get go. If you were to remove any styling from your websites your site would practically respond to any device and viewport that consumed it.
There are a few caveats though.
Non Responsive Elements
The non responsive parts of HTML are
- iframes
- images
- embeds
- videos
- tables (to a point)
That’s it though.
You should be focussing on the semantic side of HTML because most of the responsive bits are done within the CSS. There are some things you can do with these HTML elements that will improve performance though, lets take a look at those.
iFrames/Embeds
Make these part of a lazy loading approach. If not configured correctly these elements will begin to download their contents even though the users might not ever scroll down to see them.
Videos
Preloader – http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/
The VIDEO PRELOAD attribute has the following possible states:
| Attribute | Specification |
|---|---|
| no preload attribute | Preload is not specified. |
|
From the spec, “Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.” |
|
“Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.” |
|
“Hints to the UA that optimistically downloading the entire video is considered desirable.” |
or |
The preload attribute is specified but no value is given. Specifying the empty string is the same as specifying “auto”. |
Images
using <picture>
