What role is played by HTML5 in responsive web design?

HTML4 or XHTML can also be used for responsive design as responsive design can be achieved using CSS3 media query. Than what role is played by HTML5 in responsive design? Why it is said in the web community that responsive design created using HTML5 and CSS3?

Relation of HTML5 and CSS3

HTML5 and CSS3 are two different technologies and two different layer (Structure and Presentation) of any web page but one common thing in both the technology is that both are still under development (would be good to say improving further) and both focusing to have a good support on different devices. HTML5 is not required to use CSS3 media query but HTML5 provides essential structure that make responsive design to be more extensive.

Creating responsive design using older technology is like building a ship using wood.

Technical features that are the heart of responsive web design.

Term “responsive design” was coined by Ethan Marcotte who described how a design will interact with devices. These three features are required to be implemented for a truly responsive web design.

  1. Media Query
  2. A flexible layout that uses relative sizing
  3. Flexible images and media

HTML5 and CSS3 can do an extensive job together

Since HTML5 and CSS3 both the technologies getting mature together, New trends of user experience and new technologies are being taken care in HTML5 and CSS3. There are many aspects where both together can work more effectively. For example new CSS3 properties like border radius, box-shadow, gradient etc. make the code lighter and maintainable similarly video tag, audio tag and vector graphics directly in HTML5 script make the code lighter. So, both together can do an extensive job for web and web is not limited to desktop now it is being accessed in different small devices as well and lighter code load the web page faster in small devices.

How HTML5 is playing a major role for responsive design

All the three required major features of responsive design need not HTML5 but responsive design is majorly focused to make it work in the different devices (smartphone, ipad, tablet etc.) and when mobile context comes up there are some constraints like resolution, speed, different input methods etc. Smartphone user view pages with limited bandwidth, website should not only respond on limited viewport but also load fastest possible time.

HTML5 provides a solid and flexible structure to responsive design.

HTML5 development is focused not only for desktop but for small devices as well. HTML5 offers additional features over the previous HTML versions; it is making the code lighter that benefits to view pages on small devices. Some of the features that make HTML5 good for responsive design are

Some great features that makes HTML5 superior for responsive design

  • No javaScript for form field is required when using new form field elements of HTML5 that makes the code lighter and web page faster.
  • New form elements of HTML5 are more device friendly like input type url, tel, email etc.
  • Embedding media (Video, Audio) is written right into the code no third party software is required that makes the code lighter and make it faster.
  • Creating vector graphics using HTML5 makes graphic flexible (one of the responsive design feature) and faster for different viewports.
  • A web page or application can be made available using offline storage of HTML5.
  • No need of writing different code for different platform. HTML5 is much more accessible in mobile phone as code written in HTML5 is platform independent which makes an application accessible in all phones.
  • Lessen the generic code like doctype, script tag, style tag etc.
  • HTML5 markup is design to be reader-friendly, semantic meaningful HTML5 tags make the page more faster.
  • By using the JS frameworks like Sencha Touch, jQuery Mobile, Kendo etc. with HTML5 can get the native look and feel of a responsive design web app.
  • JS framework like Phonegap supports compiling HTML5 and landing it on the device as semi-native app.

Conclusion

CSS3 adds a flexible presentation layer for responsive design to make a website or application to work in the different devices and HTML5 adds the solid structure for the responsive design to respond quick and faster and make it work in the smaller devices. HTML5 is playing major role behind the scene. Responsive design can be created without HTML5 but it will be like good presentation of a food but not to eat only to display.

HTML & CSS Cheatsheet

Here is the beginner cheat sheet for HTML & CSS, it was created by Firstsiteguide.com Team.

HTML & CSS - Cheat Sheet

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

6 thoughts on “What role is played by HTML5 in responsive web design?”

  1. Hi Gopal,

    The article is very good & informative but I have one issue with HTML5. In last decade the web community always said that use java script very less or if really needed, because of page rendering & lading time. These to use HTML 5, we have to use some Java script plugins, that we don’t need to use with XHTML.

    1. @Himanshu: HTML5 is bigger than just a few new elements addition, it includes CSS3 and JS. HTML5 is actually reducing the JS code and markup like form field validation, simple audio video player and more. But yes, there are features which required JS and these features reduce the server load as request-response is at client side. Article http://www.html5rocks.com/en/tutorials/speed/html5/ should help for better page rendering and loading time in HTML5.

  2. Thanks for the great tips! I do have a question however that I think you could
    probably answer. I was wondering, When you do a mockup design for a responsive
    website, do you do a mockup for every possible screen sizes?

    Any insight would be greatly appreciated!

    1. Depending on the data or kind of content. Sometime it is sufficient to mockup for Desktop and Mobile device only. Generally mobile and table design remain same but with some data it is required to create mockup for tablet as well. Hope it helps.

Leave a Reply to Himanshu Vyas Cancel reply

Your email address will not be published.