Responsive HTML | Responsive Web Design

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.

preload='none'
From the spec, “Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.”

preload='metadata'
“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.”

preload='auto'
“Hints to the UA that optimistically downloading the entire video is considered desirable.”

preload

or

preload=''
The preload attribute is specified but no value is given. Specifying the empty string is the same as specifying “auto”.

Images

using <picture>

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.