What's the difference between HTML5 and Responsive website?

[Jaypee]

Hello can anyone tell me what's the difference between an HTML5 website and a "Responsive" one?  Because I thought they were one and the same...

 

For the last two months I've been making changes for my clients' websites because they want a site that's mobile-friendly.  I made a research about it and found out about the Responsive web templates. 

 

I first experimented creating my portfolio using a downloaded Responsive web template.  I customized just a little and published it. I was very happy with the results as my portfolio webpage fits perfectly in every device that I used to view it (i.e. laptop, tablet, smartphone, etc.).

 

So I started to search for more Responsive web templates this time for my clients and I saw a site that features all kinds of web templates and among the categories were >> HTML5 templates,  Responsive HTML5 Templates, Responsive Templates and so on..  Now I'm confused and I hope someone can enlighten me on this.

 

I don't do hard coding I usually just customize existing templates.  So please not too much technical jargons.  Thanks. 

Edited August 31, 2013 by Jaypee

[CyberGenius]

The differences between HTML5/JS responsive website and ordinary responsive website are but not limited to;

1). HTML5 responsive websites are created using HTML5 and JavaScript and are different from the main website. That is whenever a different browser(or screen size) is viewing a website, it would be redirected to the one created by HTML5 and JS.

2). Ordinary RWD are created using CSS and HTML and they are implemented by total redesigning of the normal webpages.

[kingpost]

Thanks ^^

But i also wanna know that, Please explain some more!

[CyberGenius]

Ok, let me put it this way. When you use HTML5 and Javascript(and similar technologies) to make responsive websites, you do something different entirely. That is you create a different supplementary page. i.e a new mobile design different from the desktop version of that site. So, each time you access the site with a mobile, it would be redirected to the new website. Meaning you now have two different websites(mobile and desktop version) to maintain. HTML5/Javascript(and similar technologies) are also close to stand alone mobile apps in terms of looks and capabilities.

 

On the other hand, responsive web design with HTML and CSS is the total redesign of your main website to be able to respond to all devices. That is you don't need to make another version of your site, but systematically code your site with the appropriate HTML and CSS to be able to respond to them(devices) accordingly. So, in other words only one version of website would serve several devices. The design would just be created in a way that would be able to work perfectly with all devices. For example instead of using pixels to declare sizes, percentages would be used instead.

 

Don't mind my explanation, my eyes are blurry. It's 11pm here, and I've been working offline and online all day.

Edited September 1, 2013 by CyberGenius

[OhioTom76]

HTML is used to define the semantic structure of the content of your site. Without HTML, your site's content would just be a bunch of text and pictures without any sort of organization. With HTML, you're specifying stuff like "this block of text is a paragraph" and "this sentence preceding it is a header that pertains to this paragraph" or "these links are part of the site's navigation". While we usually think of the structure of a web site visually, lots of scripts and programs, and search engine spiders, etc... need the underlying HTML to understand it properly. HTML5 is just the next iteration of it, that comes with new tags that are a lot more specific than what was used in the past. Whereas before we were just tagging stuff as a paragraph or a header or a form, now we are also tagging stuff as a sidebar, navigation, etc...

 

CSS is what is used to control the visual appearance of your site, independent of the HTML. A "responsive" site is essentially what we would call a "fluid layout"  like 10 years ago. Ideally sites should have all had fluid layouts and embraced the whole document flow thing, and been accessible to all sorts of computers old and new. In reality, many sites stuck with a fixed width layout and gradually increased them over the years as screen resolutions got bigger. But with the explosion of mobile devices, we're  back to developing for smaller resolutions again. With all the new functionality added to CSS, we can take this a lot further and make page elements not just shrink and stretch to fit different screen sizes, but we can also use newer features such as CSS media queries, or detect the device through javascript, and change the appearance of individual page elements completely for a given device. You might have a full horizontal menu with animated drop downs for a desktop device, but you may disable the drop downs and make it into a collapsed vertical menu for mobile devices, for example. 

 

There are some other options, such as designing a completely separate mobile version of your site and redirecting mobile users to it, or creating a standalone mobile app that has your site's content.