Should i start designing in HTML5/CSS3 ?

glitchpod

Hey,
Long time reader, first time poster. I've been asked to design a website for this company who are really up to date and interested in technology, especially web related. And just a question in general, should i be designing sites now in HTML5 and CSS3 ? I understand i may need to use some javascript for IE 8 or less but apart from that do i need to careful of some obscure CSS3 selectors?

whats the general census and advice here?
im looking at this and opera seems completely naked: http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/

all thoughts and views welcome

Thanks

desaparecidos

CSS3? Yes. You can just accept that IE8 and below will not have rounded corners and gradients and such or use something like http://css3pie.com/ to mimic the most important design aspects of the site.

HTML5? No. Not even a fully completed spec yet. Browser support will vary for years to come yet.

BarackPyjama

desaparecidos wrote: »

HTML5? No. Not even a fully completed spec yet. Browser support will vary for years to come yet.

I'd say yes - do start using HTML5. With modernizr or something similar for backwards compatibility.

p

HTML5 is used as a catch all for tons of technologies, so it's hard to give general advice if you should use HTML5 or not.

My advice, is pick the browsers you wish to support, agree that with your client, and go from there. HTML4 is probably better, but you can also add bits of CSS3 here and there which will enhance the site for those browser that support it. The main this is that you don't end up sacrificing the experience for their customers so you can have some bells and whistles. Try make sure anything you use, degrades nicely in browsers that don't support it.

Pixelcraft

BarackPyjama wrote: »

I'd say yes - do start using HTML5. With modernizr or something similar for backwards compatibility.

+1, there's no reason not to

BarackPyjama

p wrote: »

HTML5 is used as a catch all for tons of technologies, so it's hard to give general advice if you should use HTML5 or not.

HTML5 is one technology - HTML5.

p wrote: »

My advice, is pick the browsers you wish to support, agree that with your client, and go from there.

Nonsense. Develop for all standards-compliant browsers and then consider backwards compatibility workarounds for older ones.

p wrote: »

HTML4 is probably better

It's not.

OP - use/learn HTML5. It'll serve you better in the long run.

glitchpod

Thanks for the replies, so far its been slightly awkward, everything more than likely requires some sort of back up, wether its an image for the gradient or no-js, javascript like trick to allow for backup CSS calls.

im using html5 boiler plate: http://html5boilerplate.com/
They only include the modernizer script but say that it also includes html5shiv
http://code.google.com/p/html5shiv/

my question is, do i still need to use something like this:
http://code.google.com/p/ie7-js/

will modernizer take care of dropshadows/border radius in IE or will i need to include csspie ?

Opinion wise:
so far aside from gradients/dropshadow/border radius, i think the rest is just too much overhead than its worth, its like using experimental technology, doesnt seem feasible for large scale projects. Relying too much on js either.
BTW i agree its great to keep up to date with the tech but using it now requires keeping up with browsers support level => updating your code etc.

p

BarackPyjama wrote: »

HTML5 is one technology - HTML5.

Did I say that it's not? I know what HTML5 is. However, my statement was that "HTML5 is used as a catch all for tons of technologies" which is absolutely the case when reading blogs and articles, just look at html5rocks.com which is talking about CSS half the time. Many people don't understand what precisely HTML5 is, but it's important for devs to understand the distinction.

BarackPyjama wrote: »

Nonsense. Develop for all standards-compliant browsers and then consider backwards compatibility workarounds for older ones.

Those are strong words you're using. I'm not talking about a development process, which you seem to be. If you're build a real-world site or application, then you must agree with your client upfront about which browsers are supported based on their business needs. This is basic professional practice. You don't decide to use CSS 3D Animations, for example, if 90% of your visitors are using IE8.

How you actually approach the task of coding a site is a different matter entirely, which happens later.

BarackPyjama wrote: »

It's not.
OP - use/learn HTML5. It'll serve you better in the long run.

Why? Is it that hard to do <div id="header"> compared to <header> ? Most of the semantic stuff is nice, but you don't get a huge advantage to using it, the disadvantage is greater, as you'll kick out some browser support. If you're using highly specific features like the new video or canvas tag or offline storage, then that's something that will be evaluated alone, as part of a larger tech strategy for the company and their audience, and can often be integrated as part of a progressive enhancement plan, as others have already mentioned.

Pixelcraft

glitchpod wrote: »

im using html5 boiler plate: http://html5boilerplate.com/
They only include the modernizer script but say that it also includes html5shiv
http://code.google.com/p/html5shiv/

That's a good basis, so keep it up

glitchpod wrote: »

will modernizer take care of dropshadows/border radius in IE or will i need to include csspie ?

No, to put it simply it will make the site work in non html5 browsers, it doesn't add css3 aesthetics. Personally I favor letting browsers handle elements as best they can rather than adding javascript for non essential niceties on older browsers, unless there's very little performance impact

glitchpod wrote: »

so far aside from gradients/dropshadow/border radius, i think the rest is just too much overhead than its worth, its like using experimental technology, doesnt seem feasible for large scale projects. Relying too much on js either.
BTW i agree its great to keep up to date with the tech but using it now requires keeping up with browsers support level => updating your code etc.

I really don't see how it's too much 'overhead'. To me, html5 is far more semantic and structured, and I actually prefer using it.

Pixelcraft

p wrote: »

just look at html5rocks.com which is talking about CSS half the time. Many people don't understand what precisely HTML5 is, but it's important for devs to understand the distinction

Yes, in fairness they haven't helped matters and seem to encourage the confusion in their branding

BarackPyjama

p wrote: »

Did I say that it's not? I know what HTML5 is. However, my statement was that "HTML5 is used as a catch all for tons of technologies" which is absolutely the case when reading blogs and articles, just look at html5rocks.com which is talking about CSS half the time. Many people don't understand what precisely HTML5 is, but it's important for devs to understand the distinction.

Those are strong words you're using. I'm not talking about a development process, which you seem to be. If you're build a real-world site or application, then you must agree with your client upfront about which browsers are supported based on their business needs. This is basic professional practice. You don't decide to use CSS 3D Animations, for example, if 90% of your visitors are using IE8.

How you actually approach the task of coding a site is a different matter entirely, which happens later.

Why? Is it that hard to do <div id="header"> compared to <header> ? Most of the semantic stuff is nice, but you don't get a huge advantage to using it, the disadvantage is greater, as you'll kick out some browser support. If you're using highly specific features like the new video or canvas tag or offline storage, then that's something that will be evaluated alone, as part of a larger tech strategy for the company and their audience, and can often be integrated as part of a progressive enhancement plan, as others have already mentioned.

Fair enough. But referring to the OP's question:

should i be designing sites now in HTML5 and CSS3 ?

I would say the answer to this is a definite yes. Like you say, you do have to ensure legacy browser compatibility so advanced HTML5 features are probably a no-no for the time being. But in terms of future-proofing, the OP should be learning and using HTML5 now.

glitchpod

quick question, skeleton of html5 blog i found, mines a bit different, just linear, no side bars



am i right in assuming i can still use div as a wrapper and perhaps a main element for background etc?

i.e

<div id="wrapper">
<div id="container">

<header id="banner">
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</nav>
</header>

<div id="main" role="main">

</div>



<footer>

</footer>

</div> <!--! end of #container -->
</div> <!--! end of #wrapper -->

container is the 980px div that has a background image
so is that correct ? do i need to use section instead of the div #main? [this is where all the content will go]


side question:
not sure if i need wrapper, but i have a 100% images/gradient as the background, should this be applied to the body instead?

Pixelcraft

glitchpod wrote: »

container is the 980px div that has a background image
so is that correct ? do i need to use section instead of the div #main? [this is where all the content will go]

Use a div for the container, html5 does not replace divs. Sections should only be used for content imo.

glitchpod wrote: »

side question:
not sure if i need wrapper, but i have a 100% images/gradient as the background, should this be applied to the body instead?

[/QUOTE]
Yes, the less html the better.

glitchpod

cheers, pixelcraft, great help.

One last question, regarding my main content, currently i have it in a div, is that correct ? I could have it in an article? It just includes form elements,
[and by articles definition; it should make sense on its own] i guess the form could make sense on its own

i assume i can use section regardless inside the main div?
found this nice flow chart

http://html5doctor.com/

Pixelcraft

glitchpod wrote: »

One last question, regarding my main content, currently i have it in a div, is that correct ? I could have it in an article?

Depends on the content really. The thing about html5 is, any of the elements will technically work for you, for example you could (but shouldn't) put an article in a nav element.

Footer and Header elements can be used in more than just body's also.

A great quick read for this is HTML5 for Web Designers from A book apart - I'd recommend all their books, along with hard boiled web design