Browser Wars – May Compatibility Be With You

Browser Wars – May Compatibility Be With You

A long, long time ago, in a cyberspace galaxy far away… Mosaic was born—the first global web browser.  So it really wasn’t that long ago, only back in 1993, but in Internet terms, it was a millennium. Since then, dozens of web browsers have come into existence, and most have faded into a distant memory. Today there are really only a few major browsers left:

  • Internet Explorer
  • Firefox
  • Opera
  • Chrome
  • Safari

    Browser Wars - May Compatibility Be With You

So what’s the difference? Why are there so many competing browsers?

I think most of it has to do with branding. If you use a product from a certain company, you feel familiar with that company and will buy more of their products, so major companies develop their own browsers to make you familiar with their company hoping you’ll buy from them in the future.

As web developers, the biggest difference we see in browsers isn’t the branding, it’s in the compatibility with our code. Not all browsers are created equally. Various browsers interpret our code differently, which causes them to display web pages with subtle, and sometimes not-so-subtle, differences.  As a general rule, the older the browser is, the less compatible it is.

Browsers continually have updates to newer versions with improved stability, security and support for newer technologies, as well as web languages continually being updated to offer more features.

What does this mean to me?

As the saying goes, “out with the old, in with the new.” Your computer you purchased in 2000 that’s running Internet Explorer 6  has had a long and happy life serving you, but to get the best web-browsing experience, it’s time for an upgrade. Few, if any, web development companies support IE6 anymore, and IE7’s time is running short.  With only 6.25% of internet users using IE7, and less people using older browsers, it’s not often worth the company’s time or your money to develop for outdated browsers.

When developing your website, ask yourself “is it worth paying the company $X-hundred dollars to make this page look right for that 6.25%?” If it is, we’ll be happy to accommodate you and develop that support for older browsers.  If not, just tell yourself “that 6.25% is probably not part of the technological generation anyway. They probably only use the internet to check their email.”

And whatever your favorite browser is (*cough* Firefox), be sure to check for updates often to make sure you get the best web-browsing experience available.

What About You?

What do you think? Do you have a favorite browser? Which one do you use most often and do you keep it updated? Share some browser opinions and insights with us in the comments!

Infographic: Shopping Cart Abandonment and Tips To Avoid It

Infographic: Shopping Cart Abandonment and Tips To Avoid It

As we move into the holiday season, owners of ecommerce systems might want to make sure that they’re doing everything possible to make their online stores easy to use for the thousands of people browsing and purchasing online for this gift-giving season. Don’t let your shopping carts be abandoned on the verge of a sale! The helpful people over at Monetate have created this great infographic full of interesting stats and useful tips:

Shopping Cart Abandonment

You can find the original post/infographic here: Shopping Cart Abandonment and Tips To Avoid It.

What do you think?

What is your take on this infographic? Do you agree with these shopping cart tips? Do you have any of your own to add? Please let us know your thoughts in the comments!

Exciting New Features in CSS3

Exciting New Features in CSS3

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of website. The earliest drafts for CSS3, the newest version of CSS, were published in June 1999 but even today most browsers only partially support CSS3. Because not all browsers support CSS3 yet, developers still have to do some work-arounds to make sites look the same in all browsers, but there are some pretty neat things in the newest implementation of CSS that will really give developers more artistic freedom, as well as increase load time and improve user experience. Here are just a few new style rules implemented in CSS3.

Multiple Background Images

Oh, how many times have I wished I could apply multiple backgrounds to one element, rather than putting a div inside another div just to layer backgrounds!  Multiple backgrounds can be created using the normal background-image style and comma-separating background images:

background-image: url(image1.jpg), url(image2.jpg);

Image1.jpg will be the top background image, image2.jpg will be the bottom background image. Those backgrounds can then be positioned using background-position and comma separating their positions:

background-position: left top, right bottom;

Rounded Corners

In the old days, any elements designed to have rounded corners had to have a background image with rounded corners to make it look right.  This was a real pain with tabbed navigation.  You’d have to put one background behind the anchor and one background behind the list item, or just make each tab its own image, which wasn’t a very dynamic option. In CSS3, there is a new style element called border-radius.  Just specify the radius of the 4 corners of your box and watch the magic happen:

border-radius: 10px 5px 8px 15px;

The numbers correspond to (in order) top-left, top-right, bottom-right, bottom-left.

Drop Shadows

A step in the right direction, but not completely where I’d like it to be, the new box-shadow style allows block-level elements to create a drop shadow. Where this falls short is if you have, say a PNG image and put a box-shadow style on it. Rather than putting a shadow of the image below the image, as a normal drop shadow does, it will put a drop shadow around the box the image is in. Hopefully, in the future this will be addressed.  To use box-shadow, specify the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

box-shadow: 10px 5px 8px #333;

Text Shadows

Self explanatory: generates a drop-shadow behind text.  Text shadows are created using the text-shadow style and specifying the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

text-shadow: 10px 5px 8px #333;

Opacity

This new style rule in CSS3 can make an element’s opacity anywhere from completely visible to completely invisible.  This can make for some interesting Web 2.0 looks. To use the opacity rule, simple define the percentage of visibility you want the item to have in a decimal point (i.e. .5 is 50%):

opacity:  .35;

What I would like to see now is a background-opacity rule rather than using RGBA values.

What About You?

These are only some of the new rules implemented in CSS3, there are plenty of other new style rules in the web developers toolbelt. Now, we just need the browsers to support all of the rules… Check out http://www.css3.info/ for more CSS3 news and info.

But what do you think about CSS3? Have you ever used it or thought about using the new style rules? Do you agree about these rules or think they should work differently? Are you curious to know more? Let us know in the comments!