How to Make Older Browsers Compatible with HTML5

In the past couple of years the web industry has seen a sudden boom in regards to HTML5. Although technically for the full specification to get approved we'll have to wait till the end of 2014, this is not stopping developers from writing codes in HTML5. Most, if not all, modern browsers have done a more or less good job in implementing the features of HTML5 (we all know which one doesn't!).

Unfortunately not all browsers have been able to implement all the new features that HTML5 is offering. So the developers often have to pay some extra care to make their code compatible with older browsers. In this article I'll try to point out some ways by which we can make older browsers compatible with HTML5. A little heads up though, this is about making browsers compatible with HTML5, not CSS3 (actually some aspects described are related to both, but our target is HTML5).

Getting to Know the Browsers

Before we get into making our code compatible and all that, we first need to have a clear idea on what actually the browsers can do. After all, what's the point of trying to teach someone what he/she already knows, right? Much to our advantage, there are some great sites which offer us considerable insight on browser features.

• FindMeByIP
  On this site you'll find several charts where you can see a list of HTML5 features (and also CSS3) and info about which browser supports what feature. You can actually do it two ways, you can go to fmbip.com, in which case you'll get the info on the browser you are visiting the url by; or you can go to findmebyip.com/litmus, in which case you'll get a list of info on opera, chrome, mozilla, safari and IE versions 6, 7, 8, 9.
• CanIUse
  This site also has a comprehensive listing of compatibility info (color coded, always helps). You can search for a particular feature or just skim through all that are listed. This is actually one of the sites I have been frequently visiting since I first started coding in HTML5 and CSS3.
• HTML5Please
  This site is a bit different than the previous two. It does not contain a pin pointed list of what each browser can do, rather it gives us suggestions about what measures we should take regarding various features: whether we should totally avoid, use backup (i.e. polyfills, more on this later), use with caution or freely use a particular feature. According to the front page of this site, the recommendations are based on the experience of web developers. So it can turn out to be really handy in practical usage.
• Browsershots
  Browsershots makes screenshots of your web design in different operating systems and browsers. Not really informative, but to have a quick glimpse of what our page will look in different browsers, quite an impressive site.
• Spoon.net
  I personally think this is an awesome site. The Spoon.net Browser Sandbox provides us a method of cross-browser testing. All we have to do is just click run for any browser from the given list to launch it instantly. By the way you have to have an account to use its feature, and guess what, account creation is free!

Now that we know we can thoroughly investigate abilities of various browsers, let's get them compatible with HTML5. One thing that you'll see in common in most of these methods is the use of JavaScript. Let's list our options first and then we'll start cracking them one by one.

Ways to Make Older Browsers HTML5 Compatible

• Pure ol' JavaScript
• html5shiv (also known as html5shim)
• modernizr
• HTML5 Boilerplate
• Google Chrome Frame (especially for IE)

Before I proceed further, I'd like to make one thing very clear: using the above mentioned ways does not make our browser all of a sudden capable of implementing all the features that HTML5 offers, in most cases it just makes the browser recognize that there is a tag with a specified name. For example, using the first 3 ways you can make older browsers know that there is a tag named 'canvas', but you can't really perform actions which canvas really offers (note: I am saying HTML5 Boilerplate supports canvas because it actually makes IE render web pages using Google Chrome Frame, which happens to support canvas).

Custom JavaScript

This is the elementary way of letting the browser know what new tags we are going to use if it is not familiar with them already. Say for example we want to use the tag "header". This is a tag which IE versions prior to 9 don't understand. So here's what we can do:

   <!--[if lt IE 9]>
    <script type="text/javascript">
      document.createElement("header");
    </script>
   <![endif]-->
  

It goes without saying that we have to place the piece of code between the "head" tags. The code snippet is quite self explanatory; even then, let's have a quick look at it. At the very first line we are starting a commented section, which basically says if the browser is less than IE version 9, interpret the following code; otherwise ignore what's in between the "if - endif" tags. Inside the script tags, we just have to call the createElement() function with the appropriate parameter. As an instance, if we also wanted to use "nav" tag we would have added the statement document.createElement("nav") in between script tags.

html5shiv

As stated before, it's also known as html5shim. So what is a shim? It is an application compatibility workaround (for those of you who have already googled it, yup, I took it from wikipedia). html5shim is one of the most popular polyfills (remember I stated the term "polyfill" previously? here it comes!). Paul Irish gave a simple definition of polyfills. If you are wondering who is Paul Irish, just know that he is sort of a front-end wizard in web industry. According to him polyfill is “a shim that mimics a future API, providing fallback functionality to older browsers”. You can download html5shiv here.

In case you are interested in technicalities, html5shiv sort of works by following the first method described i.e. creating element through JavaScript. After you download it, all you need to do is include the following snippet inside "head" tag:

   <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
   <![endif]-->
  

modernizr

A really worthy name, it does make us modern (at least in regards to front-end development, that's for sure!). The best place to learn about modernizr is its official site. But don't worry; I'm not leaving you empty-handed. In short, what modernizr does is perform feature detection first. Note that I said "feature" detection, not "browser" detection. That basically means it finds out what our browser can do, not what browsers we are using. It then attaches necessary classes to our "html" tag. Say for example our browser does not support "canvas" tag, so a class named "no-canvas" will be added to our "html" tag. In the opposite case the class added would have been "canvas". So what do we do to use modernizr? Same as before, we download a copy of modernizr.js (you can find a link in the official site) and add the following code inside "head" tag:

   <script src="js/modernizr.js"></script>
  

It's worth noting that we can use modernizr to detect feature within our JavaScript, such as:

   if(Modernizr.geolocation){
    
   }
  

HTML5 Boilerplate

This is what I'd like to say is the ultimate blueprint. The package contains modernizr and jquery library. It also has normalize.css (I left out normalize from previous descriptions as it is related to CSS). You can find a link to download html5boilerplate from its website. Once downloaded, if you explore the folder you'll find all the files I've previously mentioned. The index.html is where your html goes. To simply define, this is a template for implementing HTML5.

Google Chrome Frame (Abbreviated as GCF)

For those of you who are really frustrated with IE, I saved the best for the last. Google Chrome Frame is simply a plug-in for IE which lets it render a webpage the same way google chrome would. Of course the downside is you can't use the features not supported by google chrome, but trust me, the amount of such features is negligible compared to IE. As far as I know, chrome ranks the second in regards to adopting HTML5 features (Maxthon being first). You can check the current standings from the site html5test. We basically have to do two things to make a page be displayed using Google Chrome Frame in IE.

Firstly, we have to make sure that the viewer's IE already has the plug-in installed. Frankly speaking, there is no way to force the user to install GCF, but at least we can prompt the user to install it. The developer's site chromium.org gives a way to use a JavaScript file named "CFInstall.js" which exactly does that. You can find an example of using "CFInstall.js" here. For your convenience I'm presenting the code below:

<html>

<body>
 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

  <style>
  /* 
  CSS rules to use for styling the overlay:
   .chromeFrameOverlayContent
   .chromeFrameOverlayContent iframe
   .chromeFrameOverlayCloseBar
   .chromeFrameOverlayUnderlay
   */
   </style> 

   <script>

   // You may want to place these lines inside an onload handler
   CFInstall.check({
       mode: "overlay",
       destination: "http://www.waikiki.com"
            });
   </script>
   </body>
   </html>
  

Secondly, we have to give instructions to our page to use GCF. We do this by adding the following simple meta inside "head" tag:

   <meta http-equiv="X-UA-Compatible" content="chrome=1">
  

HTML5 Cross Browser Polyfills

Remember I said taking certain measures as stated above will not actually make our browser able to use all the features provided by HTML5, but rather make our browser knowledgeable on the fact that there are certain tags? For those of you who became heartbroken, take a look at this site.. It provides a list of fallback options for HTML5 features.

Before I conclude I'd like to mention one thing. HTML5 is gaining popularity at a very high rate, and the browsers are also catching up nicely. After a few years I think there won't be the concept of making browsers "compatible with HTML5" (and sadly my so thoughtful article will become obsolete). But till then, we certainly have to keep our eyes open and take necessary measures.

Using Images to Make Your Pages Pop

So, you've set up a blog, invested in some quality WordPress premium themes to make it look amazing, and now you're ready to add some images. Adding images to a blog post is quite simple; adding quality images, however, is something else altogether.

Cell Phone Cameras

With the advent of cell phone cameras, suddenly everyone's a photographer. Whether it's blogs or social media pages, tweets or whatever, you can't swing a run-on sentence without hitting a camera-phone pic. What's wrong with that? A picture paints a thousand words, doesn't it? Exactly! And if you post a fuzzy, poor quality cell phone picture, the word that's going to come across loud and clear is amateur!

Poor Resolution

Cell phone cameras are great; you can take candid shots and send them out to friends and family almost instantly. These images are great for viewing in the window of a cell phone, but probably won't look as good blown up on a large computer screen. Technology is improving all the time, but by and large, most cell phone cameras have poor resolution and not a lot of great features.

Why More Resolution is Better

Your photos should have at least 5 megapixels of resolution, and 10 is even better. While some will argue that you don't need so much resolution unless you intend to blow your photos up into posters, the added resolution allows you to crop to your heart's desire. If you start with a 10 megapixel photo and crop out 50 percent of it, what remains is a basically a 5 megapixel photo. You might decide you only want one face out of a whole crowd, and starting with higher resolution will allow you to crop it out and enlarge it and still have a decent photo.

Crop, Crop, Crop Your Photos

Cropping sets the professional apart from the amateur. In professional artwork, photos are seldom used as they are taken. Don't be afraid to crop out the extraneous detail. Cropping a photo puts more emphasis on the subject, and allows you to frame it more clearly. Cropping also allows you to get rid of that extra arm, shoulder, or half a person on the edge of the photo. Done artistically, cropping can also make your photos look more edgy and modern. Another consideration is cropping to fit the layout of your WordPress theme where you want to post the image.

Adjust the Lighting

Whether you use a professional program or simply the software that came with your camera, you should always adjust lighting levels, brightness, contrast, hue and saturation. Even in "auto" mode, most point and shoot camera photos will need light and color adjustments for optimal image results. Take some time and play with the results. Changing the hue can give your image a cooler or warmer look, and increasing the saturation can make the colors pop.

Bag the Flash

Use flash sparingly. A good camera will take photos quite well without a flash. Using flash tends to white out the picture. Dark photos can be lightened; the information is still there in the darkness. Black is rarely truly black. The reverse is not true for white, however. White in a photo means lost information. Even the best editing tools cannot bring it back.

Image Stabilization

Sometimes referred to as "anti-shake" or "blur reduction," this feature is a must if you're not using your camera on a tripod. Even the steadiest of hands can shake imperceptibly, and most photos are taken "on the fly" with subjects and cameras all moving at once. Since you're not a professional shooting dozens of shots every few seconds, this will guarantee that your "money" shot doesn't end up blurry.

Rename Your Image File

Give your image file a descriptive name to help it pop up on Internet image searches. WordPress themes usually allows you to input a description when you upload an image, but including a keyword in the file name itself is a sure sign of a pro.

About author:
Olga Ionel is a creative writer at ThemeFuse – a top provider of WordPress themes. She is passionate about studying online marketing industry and sharing informative tips.

How to make clickable picture in HTML

This short tutorial will learn you how to make a clickable picture in HTML web page.

What is clickable picture?

Clickable picture is picture which will lead you to specific web page when you click on that picture.

To better explain what is clickable picture take a look at image below this text. If you click this image, post "Make clickable links and clickable images" will be opened.

HTML code for: How to make clickable picture

<a href="URLToLinkedWebPage"><img src="URLImageLocation" /></a>

In HTML code for clickable image you need to replace:

• URLToLinkedWebPage - with URL to web page you want to be opened when user click on image


• URLImageLocation - with location of image

Example:

<a href="https://www.google.com"><img src="https://www.google.com/images/srpr/logo3w.png" /></a>

Above HTML code display Google logo ("www.google.com/images/srpr/logo3w.png") and links to "www.google.com" when picture is clicked.