I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat
Related
Does anyone have any idea that HTML5 has multilingual support.
I mean to say if I design my website in English and html5 will convert that using some lang or translate or any other supportive tag will convert that web page into a respective language.
Any guidance or bit of code can help me a lot.
Thanks a tons!!!
HTML5 doesn't translate anything. It’s simply a markup language that displays the contents you have put inside it without applying any logic to it.
However, such translations are usually done by modern browsers like Chrome, FireFox etc. Advance browsers do detect that the website you are viewing is in some other language and offer you the choice to convert it to your preferred language.
Only thing that HTML5 has in connection with this whole translation thing is that it has a new attribute called translate. By using this attribute with a value of "no" you can now flag elements that you don't want to be translated by browsers:
<span translate="no">衝撞撞沒輸贏」應是「衝衝撞撞沒輸贏</span>
<!--Now no browser will dare to translate this.-->
The question is - do you want to auto-translate the content, or do you want to translate the user interface of your website.
By itself HTML5 doesn't really provide complete support for either, only some hints, and even they are not really implemented everywhere.
You can add a Google Translate button to your website, as described at http://www.labnol.org/internet/google-translation-widgets/10135/ , for example. Google Chrome has it built-in and it works for all websites. Other browser may get such functionality in the future, but that is a feature of the browser application and not of HTML.
For translating your site's interface you can use one of the many internationalization libraries. Many CMS's and web frameworks come with such an i18n library. You can also do it client-side, using a library such as jquery.i18n ( https://github.com/wikimedia/jquery.i18n/ ).
(Disclaimer: I am one of the developers of juery.i18n.)
Finally, just a tip about good practice: Do use the lang attribute on all the relevant HTML elements. Even if it's just "en". This is useful for spell checking, picking the correct fonts, translation, etc. Whenever you know the language, specify it. It may seem redundant, but it is needed.
There is no integrated translation in HTML5. HTML provides support for the lang attribute which indicates what language a given tag's content is written in, but this is merely an indicative attribute which does not modify the content in any way.
The more philosophical reasoning behind why there is no automatic translation is that HTML is a structural language... it defines the framework upon which your web page is built. Not only does it not modify content, but if it did you as the developer would lose control over the quality and accuracy of the translation. This could be a very bad thing...
As you must already know, however, Chrome will translate pages in foreign languages for you into your preferred language. The difference here is that Chrome is controlled by the user, who has the power to decide in what language to view the content as well as whether they wish to view the original content which is explicitly defined by you, the developer.
Translation is up to the browser. To translate, you need a translation engine which will actually do the translation for you. As you know, you can't simply convert words one by one and end up with a proper translation in the other language. Chrome leverages the power of Google Translate to translate its pages and this is how it offers this functionality. Your best bet for multilanguage support is to offer your pages in as many languages as you accurately can, and then hope that users who don't use Chrome will plug your URL into Google translate or a similar service to get an approximation of your content in their native tongue.
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
My question is borne out of my confusion on (still incomplete, with existing features still evolving?) HTML5 support in different browsers, all the resources available on how to implement existing features and simple practicality.
1) How do you go about implementing HTML5 only features in your web-site? Do you do some kind of browser/version check at first access and notify user that he should install some other browser (though cumbersome and uncomfortable to the user)?
2) Is there a way to check availability of HTML5 features in user's browser dynamically (version X of Chrome does not support it, next might and it should work then) and easily without some significant computing overhead and significant coding?
3) Assuming the answer to 2) is yes, what to do about changes in spec that might occur in the future? (The check would say fine, the browser does implement e.g. WebGL, but my implementation would run into errors as there would be some changes between the spec I had used during development and spec that was enhanced in the W3C process and would make my implementation incompatible)
to start using html5, make sure that the first line in your html is <!doctype html> this tells the browser that you are speaking in the language of html5
this google-hosted html5 shiv helps to ensure that the new html5 tags work in older browsers and as someone already pointed out, you can and dare I say it, should use modernizr to test the browser's CSS rendering capabilities
This is just something you need to keep abreast of yourself unfortunately ;) The way I look at it, if the spec changes in a big way, lets say they decided to remove the <article>, there will be a lot of chatter online and you are likely to read about it
I recommend that you take a look at html5-boilerplate. It's a A rock-solid default for HTML5 awesome.` It's a starter kit with template html, CSS and Javascript files for building an html5 website.
This is useful: http://www.modernizr.com/
As for 3: I think that's just a risk of using a technology before it's out of spec.
Take a look at modernizr, it's a js library that will do various feature detection tests and gives you a way to query whether or not to use a particular feature. You can also load specific js files with modernizr.load based on whether a feature is supported in the browser.
http://www.modernizr.com/
Tutorial: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
There are some really good resources on HTML5 on the web such as Dive Into HTML5 and http://slides.html5rocks.com and I have used many of the features mentioned in my own applications, so I'm not new to using HTML5.
But as I get further along in my study of HTML5 features, I keep uncovering more and more things that are classified under the heading of "HTML5". The most recent one I've heard about is the keygen tag which allows you to generate public private keypairs on the client side with ease. I'm pleased that this tag exists and also slightly disturbed that I had no idea about its existence till a few hours ago.
So is there a complete list of HTML5 features anywhere on the web? I am aware of the working draft at http://www.w3.org/TR/html5/ but I'm looking for something to the point and easy to understand without having to sift through reams of technical jargon.
I highly recommend the specification for developers.
Basically its what it says on the tin. But to clarify, this is from the press release at the time:
It features find-as-you-type search,
offline access, beautiful typography,
technical references pulled inline,
and alternate styles for handheld
devices or low resolution displays.
The aim? To produce a companion
specification for web developers to
use on a regular basis. All details
that are considered “for browser
vendors” are omitted.
W3C: HTML5 Differences from HTML4
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/