Use of HTML5 for a new website - html

Due to the low level of support for HTML5 in older browsers should one (or could one) use any part of HTML5 at this point in time for a new website that will have varying users with the full spectrum of browsers (and versions) to access the site?
EDIT: To fill in some more info here. The website in question, for simplistic comparison, would resemble fb. I am not talking a social website just one that will reach that type of vast audience (anyone can join) and will be an interactive portal (not just a site full static content being displayed).

First, HTML5 is a standard that includes the previous standards. Therefore, you are already doing HTML5 without knowing it.
Second, HTML5 could be compared to CSS in terms of feature grouping (CSS = CSS1 + CSS2 + CSS3 and so on). In other words, it is a collection of individual features and not one big thing.
Third, you will have to implement new HTML5 features one day or another. Why wait? Ooh right some people do not care about "modern browsers". You have a responsibility as a Web developer/designer to inform people about the consequences of obsolete browsers.
Last but not least, there is tons of information already... Like this website: http://diveintohtml5.ep.io/.
Some complementary info can be found from this answer and this other answer I wrote for other questions about HTML5.
Have fun! :)

Thank god MS is finally campaigning to get gid of IE6 but it surely will be in China for years to come due to pirated windows software which I had altogether too much experience with; despite this push for higher standards tons still use IE7, 8, and some even 9 is not perfect. Chrome IMOP is exceptional followed by Safari and FF for HTML5 support but even these browsers are not perfect.
I think it is ok to use features css3 and HTML5 such as canvas but in an unobtrusive manner like javascript enhances UI HTML5/CSS3/jQuery should enhance not be the content.
With javascript we can check for browsers and use appropriate methods this concept should also be applied to HTML5. So if you do implement anything I think it's important to understand how to detect and this is probably the best resource to start with.
http://diveintohtml5.ep.io/detect.html

You can use all of the new HTML Field types in forms safely, any HTML 5 inputs in browsers which don't support html 5 will simply fall-back to a standard type="text" inputs.
Mobiles currently seem to benefit from HTML 5 forms most at the moment as they recognise the input type, lets say "email" and then provide an email specific keyboard layout to the user.
Its also simple to provide JavaScript fall backs for some html 5 elements with http://www.modernizr.com/

Related

Accessibility wise, what's the oldest browser currently in use? What's the oldest browser I can realistically program for? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
Which syntax and features should I use if I wanted to write a webpage that could be correctly parsed by any device realistically still in use?
By currently in use I mean also devices whose usage is not statistically meaningful to be included on browser usage statistics, but still reasonable enough to be used in the real world without being too much of a stretch: e.g. A screen reader, a Point-Of-Sale/Kiosk Device, an Internet appliance like a smart TV or a console.
I've recently been assigned to develop an HTML landing page requiring support for - hear me out - the ancient Microsoft Internet Explorer 6. Yes, you read that right.
Long story short, it was in the requirements for a public administration project that was in a legal limbo for a long time, and reworking these requirements would be more problematic than developing it and be done with it. At least according to my boss. Besides, it shouldn't be that much different than writing a current-day HTML newsletter.
But it got me thinking - what's the oldest browser (as in, the one with the oldest HTML standard support available) that I could realistically find in the wild?
I'm not talking about relevance or caniuse-level-of-support numbers, just something that for some more-or-less realistic reasons (excluding "here's a Windows 3.1 VM getting to the internet" retro challenges) people would still be using to get online. Also some security requirements (mostly updated SSL/TLS) cut off quite a bit of older devices, mostly games consoles like the Dreamcast, PS2 w/Network Access Disk and the PSP, or the original Nintendo DS, so those are also excluded.
Other than the aforementioned IE6.0, I can think of Opera Mini browser (which version?) for some legacy mobile phones, or maybe some kind of internet appliance still using the Netfront runtime (IIRC The Playstation 3 still uses a pre-webkit version of it).
Any suggestion?
preword - apologies this became a bit of a rant, I will try and tidy it up later and focus it more. I also understand you may have to listen to your boss so this has become me ranting on your behalf to your boss. I hope you can use some of it to construct a strong argument with your boss to get the spec changed. It also doesn't answer the question as it is titled. Probably worth a few down votes but I enjoyed having a rant!
Given the comment the OP asked this answer is applicable to that.
What are the oldest browser standards I need to support for accessibility?
The WebAIM annual survey is a great place to get this information.
Under the section 'Browsers' we can see that 2.1% of respondents still use IE 6,7 or 8.
Unfortunately they do not indicate what split of those who use IE6 but I would imagine it would be less than 0.1% overall as very few sites still operate on IE6 correctly.
I personally develop to IE9 standards, so use ES5 for JavaScript (or compile to ES5), HTML 5.0 features and CSS3 non-experimental features.
The reason for this is that those who do use IE8 and below tend to be screen reader users due to compatibility with the software they own. They also tend to use a very specific set of websites due to the fact that most websites just will not work for them.
Many people would argue that you must include everyone, and in an ideal world you should. However you also have to consider that your goal in accessibility is to provide the best experience possible for the widest number of people. This is not possible using IE8 and below as you lose a lot of the HTML5 standards that are useful for accessibility (particular form related attributes, navigating by regions such as <main>, <nav> etc.).
So what about the people stuck on IE6-8 then?
As stated they tend to be screen reader users. The beauty of this is that as long as you develop valid HTML, user correct WAI-ARIA attributes etc. (basically go for AAA WCAG 2.1 rating or as close as possible, at least AA rating) then in IE6-8 the site will still function reasonably well and be usable, even if not perfect.
CSS is where your main struggle will be, making a site work in IE6 is just horrible if you still want to follow best practices (try styling a button for example to make the font size large enough and colour contrast AAA rated). Also how do you then make it responsive for mobile users without hundreds of hacks?
So what if you have to support older browsers.
You can provide a separate version of the site (shock, horror, gasp).
Use user agent sniffing to redirect people to a separate, stripped back, text only with minimal styling version of the site. Be sure to include a link to the main site and indicate that this is a version of the site designed for older browsers.
This requires careful planning as you have to ensure that the same information is maintained on both sites and that features introduced are replicated across both sites.
This is why nobody does this and isn't something I would recommend at all. The amount of things to consider, the limitations on features you can introduce and the chance of updating one version and not the other (even with a Content Management System) is very high. Making just one of those mistakes is likely to cause you more problems than not implementing this at all.
Conclusion
HTML5 introduces many great features for accessibility.
Regions for navigation are one of the biggest wins.
By designing to older standards you will likely end up with a site that is less accessible.
For example, a lot of WAI-ARIA attributes don't work in modern browsers, never mind in older browsers. Trying to fall back to using WAI-ARIA attributes is not going to work.
What about an accessible and easy to use layout? IE6 was the days of tables for layouts because CSS was so limited with positioning. (want a sticky navigation bar? Good luck implementing that!)
To provide 'best effort' I would use a HTML5 shim to at least fix the layout for things like IE7 and IE8, IE6 just isn't feasible.
Another argument is security. How on earth are you meant to write secure JavaScript that is IE6 compatible. Heck try finding a single piece of information alive on the internet today on 'how do i fix this problem in IE6'. Perhaps your solution here is to just not use JavaScript at all. (and yes someone will argue progressive enhancement allows you to use JavaScript, but then you have JavaScript errors which would then mean you fail WCAG under 'Robust').
Oh and did you know that you can't even use <style>*{position:relative}</style><table><input></table> as that will crash the browser?
As a final thought on this rant part, Windows 98 will run IE9 and NVDA. So we cannot make the argument that people may not have the financial resources to upgrade as NVDA is free. We could argue they do not have the technical knowledge on how to upgrade, at which point all I could say is write an article on the site on how to upgrade and redirect people there maybe? It gets a bit silly at that point as to where you draw the line.
How to win the argument with your boss / help them get the spec changed
Your boss is in a bad position but probably doesn't have the 'firepower' they need to persuade the spec to be changed easily.
Here is a simple way for them to win the argument:
WCAG 2.1 AA is the minimum legal standard that we can build this site to without risking getting sued.
This is impossible while maintaining compatibility with IE6 and without compromising on accessibility features.
The cost of getting accessibility wrong, coupled with the additional development cost associated with trying to develop to such an old standard makes this infeasible.
Couple that with the likelihood of developing a application with massive security flaws that could make the site vulnerable I would highly recommend we change the minimum requirements to IE8.
tl;dr
The oldest browser you realistically need to worry about is Internet Explorer 9. Even then you are being generous with your compatibility requirements. Do not try and develop a site that works in every browser ever encountered since 2001 (yes IE6 was 2001), you will break things for more people trying to accommodate people who do not want to upgrade (Windows 98 will run IE9 and NVDA).
Do not attempt to support IE8 and below as you will actually end up making decisions that will negatively impact accessibility.
If you can create a HTML5 valid and CSS3 valid website that is WCAG 2.1 AA standards compliant then you are already more accessible than 99% of websites in the world.
You're not asking the right question.
Users of what I build may be different than the users of what you build. To one audience, it may not matter if the site only loads on current browsers. To another audience, it may be the only thing that matters.
Additionally, some sites outright require newer browser features to function... no web-based fallbacks are available. Also, there are current browsers that don't support much of anything (i.e. Safari, Lynx, etc.) so it's not necessarily a matter of age... but capability.
The question you should be asking is, how do you make the decision of what to support and what not to support. Short of pointing you at your analytics and logs, this isn't a technical question, but a business question.

Scrollbar Customizations That Are Supported by the W3C

I hope this question is on-topic for StackOverflow. I have seen many comments here that a lot of web developers scrollbar customizations are non-standard and not yet approved by the powers that be (W3C.org). My philosophy is to design to the standards Issued for Use by the Industry Organization that guides web standards and specifications because a properly, dependable, working website is what my users want.
Approved scrollbar customization standards that the W3C.org has approved. Where can I get that standard?
If I am off subject again, could you possibly get me some answers first, then pass me to the Red Queen for off with the head?
Thanks Community.
The "standard" Scrollbars CSS Module - Level 1 is in its early stages of adoption and that would be the only one matching your requirements.
Until it's implemented, you're limited to non-standard CSS scrollbar styling support.
Another option (the only production ready one, really) is to use a plugin which basically replaces the scrollbar mechanism with custom HTML elements.
Most of them have trouble with at least one mobile device type (either on IoS or on Android) and the sane solution is to detect it and simply disable the plugin for that case.
Note 1: while W3C support is a very wise thing to look for when choosing how to build your page, it doesn't mean much without browser support. In theory, if Chrome refuses to implement something today, considering their market share is above 60%, they simply won't and nobody can do anything about it. But your clients will require their page to work in Chrome.
However, much of Chrome's popularity comes from strictly sticking to web standards so far, so it would be safe to assume they will continue to abide by them.
Note 2: I recommend this article. It's well written, quite informative and up to date on the current state of scrollbar customizations.

Non "Html 5" prevalence?

We are building a small site for a client and while we spoke, the question of html standard popped up and we told him we will do it in HTML5. His question was "what about those who do not support html 5" since he wants to reach the widest possible audience some of whom are in the tech-unsavvy or elderly group?
I've been so deep into html5 for a while that this never crossed my mind, if we use exclusively html5 who exactly is now being left behind and how much of a market share do they represent? I tried googling this, but I can't find any objective material on that topic. I would very much like to avoid falling back on pre-html5 if we are just talking about a few percent of ludites holding out.
Depends entirely on the functionality of HTML 5 you intend to use.
Check out this website: Can I Use
Then based on the functionality you intend to use check what browsers support it, then if you need to use that feature and you can only use say IE 11 and above, but all other browsers support it then you check the browser share for IE 10 and below at: https://netmarketshare.com/browser-market-share.aspx
Unfortunately there's no easy answer to the amount of people unable to use your website depending on if you use 'HTML 5' it depends entirely on the feature set, your potential users locations and browser they use.
If you are building a site for a client with an existing website and they use some form of analytics you could use those stats to define the usage levels of browsers and then work from there.

HTML5, what's that all about then?

I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5

What's the future of the web? XHTML 2, HTML 5, or something else?

I'm confused by the discussion and advancement both of a new version of HTML and a new version of XHTML. Are they competitors? If so, what is likeliest to be the adopted future of the web? If not, what is the differing non-competing purpose for each?
Are we due to have a BluRay/HDVD battle here? Is there ultimately any clear decision? I fear a future where browsers pick and choose among the easiest and/or flashiest features of each to implement, leaving web developers trying to sort out the lowest common denominator for any new web app.
HTML 5 is meant for web applications whereas XHTML2 is meant for documents. From the HTML 5 working draft:
XHTML2 defines a new HTML vocabulary with better features for hyperlinks, multimedia content, annotating document edits, rich metadata, declarative interactive forms, and describing the semantics of human literary works such as poems and scientific papers.
However, it lacks elements to express the semantics of many of the non-document types of content often seen on the Web. For instance, forum sites, auction sites, search engines, online shops, and the like, do not fit the document metaphor well, and are not covered by XHTML2.
[HTML5] aims to extend HTML so that it is also suitable in these contexts.
XHTML2 and [HTML5] use different namespaces and therefore can both be implemented in the same XML processor.
XHTML2 and HTML5 are competing standards, they both purport to be the next iteration of HTML.
It is pretty clear that HTML5 is going to win, since it has support by the browser vendors.
XHTML2 is effectively dead. Since w3c(HTMLWG) accepted WHATWG's proposal the work has stopped on XHTML2 (even before that, since the last working draft for xhtml2 is from 2006).
In my opinion HTML5 will be the next dominant format. XHTML is just too unforgiving to be used in a web environment (you can't have the page fail on every small error...).
HTML5 is shaping up to be quite the treat for web developers - a formal spec for the CANVAS element, native drag-and-drop API, an offline storage API, server notifications API (push model), a formal content editing API and much more. If they can deliver even half of what they are proposing to, it will be a major advancement for web applications.
From what I was able to find in a quick google search, I would suggest that these are indeed competing standards. Both are attempting to advance web technology but are following different paths to do so.
For a pretty thorough treatment of the matter you might look at these two links:
http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
http://www.cmswire.com/cms/industry-news/setting-the-standards-html-5-vs-xhtml-2-002032.php
Ultimately it's whatever is supported by browser makers. HTML 5 is feature rich, but the final draft may be years off. There are inherent difficulties in implementing things like audio and video support in 4(+) major rendering engines, and having them all behave the same way. Even validation would be a chore. Most browsers besides IE support the canvas element and SVG, but they still only represent about 25% of the market. With IE still commanding 75-80% of the market share, users who don't use or are oblivious to alternatives will be unable to use more advanced features, giving designers a tough decision.
IE8 is only finally implementing support which other browsers have had for users, meaning that the IE user base will always lag in compatibility. While HTML 5 is a nice idea, I think proprietary solutions such as Flash/AIR and Google Gears will continue to provide standardized support for the rich features HTML 5 provides. The biggest problem really is standardization - you have to design a website with the greatest percentage of users in mind as possible. There is hope, however. A Mozilla developer made a canvas plugin for IE - we could potentially see an open-source IE add-on that brings it up to a certain standard, that users could install much like Flash.
To Microsoft's credit they are being very open with IE8 and Windows 7 development (see their project blogs), so there is the possibility that more proactive IE development will accelerate adoption of HTML 5.
The W3C allowed the xhtml2 working group's charter to expire in 2009. Their resources were rolled into the html5 working group. The html5 spec contains a section entitled The XHTML Syntax.