Blog

IE6 Browser Compatibility: Is it the time to look beyond?

2012-12-20T07:00:51Z

One of the biggest problems with packaging Internet Explorer on every Windows computer is that many of the less tech-savvy users are still using the early version 6 (IE6). The issue then comes with its compatibility with HTML and CSS. Since it’s so outdated, it does not and will not ever support the more advanced features that web designers are now using. This is a major problem for web designers because anyone with IE6 is sure to have issues when trying to properly display their website.

As stated on XHTML-CSS-Code.com, Microsoft released IE7 in 2006 and IE8 in 2009. Even though IE8 has many improvements that affect RSS, CSS, and Ajax-based designs, many still choose to keep using IE6 as their default browser.

Unfortunately, IE6 has so many issues that it’s often a challenge designing for it and testing for compatibility. For one thing, It lacks support for transparency which is required in PNG images. Plus it doesn’t support the new features in CSS3 or HTML5. Web designers therefore have to resort to the use of JavaScript to help fix these issues. Google even decided in 2010 to stop supporting IE6 entirely.

So why do many users still use and prefer IE6? It’s mainly because they are so comfortable with it and it can be extremely tough to adapt to a new browser. While IE6 is great for websites that do not require high levels of interaction or functionality, it is still not the best option – especially with the evolution of the web moving at lightning speeds.

Many designers don’t want to stop using IE6, but there isn’t really much of a choice anymore. They know about the issues, yet they’re willing to cope.

So is it time to leave IE6 behind and move forward? Check out the full tutorial to find out.

22 Excellent HTML5 Tutorials

2012-12-20T06:59:23Z

With the introduction of HTML5, many web designers rejoiced due to the new capabilities and advanced features being added. With new elements and attributes, web designers and developers can now do more in the browser than ever before. To give you a glimpse of what this means for you as a designer or developer, this list will showcase 22 tutorials that will help you learn about the new features of HTML5 and guide you in the creation of powerful web and mobile applications.

HTML5 and CSS3: The Techniques You’ll Soon Be Using

Learn to build a basic blog page using techniques from HTML5 and CSS3

Coding a HTML5 Layout from Scratch

Learn how to use graceful degradation techniques and technologies, progressive enhancement techniques and technologies, HTML5 alongside microformats, and get a clear vision of the new features of HTML5 and CSS3.

Building a Live News Blogging System in PHP, Spiced with HTML5

Learn how to build a live news blogging system using HTML5, CSS3, and jQuery; this is part 1 of a series. When complete you’ll be able to have multiple administrators with the ability to add, edit, and delete news.

Touch the Future: Create an Elegant Website with HTML5 and CSS3

The title says it all: learn how to create an elegant website using the new features found in HTML5 and CSS3.

Hybrid Column Layout – Using HTML & CSS3 Only

Learn how to create a website with a mix of fixed columns and liquid columns. This tutorial will take you through the steps of using fixed width on the side columns, a full middle column, and paddings equal to the other 2 columns.

Design & Code a Cool iPhone App Website in HTML5

Learn how to build a cool iPhone app website using HTML5, sprinkled with a few style effects via CSS3. The tutorial goes through the steps in Photoshop, the HTML, and then the CSS.

Have a Field Day with HTML5 Forms

Learn how to build simple, yet stylish web forms using HTML5 and CSS3 techniques.

Building a Custom HTML5 Video Player with CSS3 and jQuery

Since each browser has its own type of video player and controls, it makes it hard to be consistent across browsers. This tutorial shows you how to control the look of your video controls no matter what browser is being used.

Blowing up HTML5 Video and Mapping it into 3D Space

Learn to how to blow up a video using HTML5 and then map it into 3D space.

How to Make an HTML5 iPhone Application

Learn how to create an offline HTML5 iPhone application which will look just like a native mobile application. For the purpose of this tutorial, you’ll learn how to create a Tetris game.

This is just the beginning! Check out the full list for the other 12 excellent HTML5 tutorials.

10 Great WYSIWYG HTML Editors

2012-12-20T06:58:43Z

WYSIWYG editors are HTML editors that attempt to display the Web page as it will show on the browser. They are visual editors, and you don’t manipulate the code directly. WYSIWYG basically stands for “What you see is what you get”. Below are the greatest WYSIWYG Editors of all time.

Check them our and get other html tips and tricks:
10 Great WYSIWYG HTML Editors

Optimizing Images

2012-12-20T06:58:17Z

GIF and JPEG type images are the most widely supported on the web. However, many people are not aware of the difference between the two. This tutorial on Tips-Tricks goes over goes each type of graphic and teaches you how to optimize them.

For starters, it lets us know that:

GIF should be used when you create graphics on your computer like buttons and animations.
JPEG should be used for photographs or images that have been scanned onto your computer.

The Differences

GIF files can contain a maximum of 256 colors (8-bit) as opposed to JPEG’s 16.7+ million colors (24-bit). You can customize your files to use as the amount of colors that you prefer – up to what it supports. GIF files have a higher color quality and smaller file size, but JPEG can have a small file size when used for storing photographs and images with a large amount of shading.

Animated GIFs

One of the advantages of GIF files is that they support animation, transparency, and interlacing. There are also numerous free online sources where you can download GIF animations for personal use. The full tutorial gives you links to examples and teaches you how to create transparent GIFs using anti-aliasing.

Transparent GIFs

Transparent GIF files can be created using various methods like with feathers and drop shadows, depending on how soft you want them to appear. You basically have to blend the edges into the background. The tutorial lets use know that we’ll need to create 2 images: one with a white background and one with a black background. You can, however, use any color for the second image – just try to make it as close to the web page background color as possible.

To find out more tricks for transparent GIFs and to learn about other graphic tools that can help you produce them, check out this tutorial on Tips-Tricks.

@font-face

2012-12-20T06:57:18Z

I just used one of the coolest css tricks I have ever seen. I know its been around for a while but I never really paid attention to it much until recently when I was doing a project for a friend of mine. He wanted to us a specific kind of font and I said no problem.

I thought to myself “We’ll just slap that baby into Cufon and be good to go”. Now the unfortunate thing when using Cufon is that it always doesn’t play nice with other kiddies in the playground. We kept running into issues with it and my buddy said “well why not just use @font-face?” I paused for a moment and replied “Use what?”

So I took a look into it and to my amazement it worked beautifully. One thing that i did find out though is that there is a place to get your fonts converted to what you need. It gives you everything, even the style sheet. Check them out here: Font Squirrel and if you need more guidance into implementing @font-face check out this really helpful article from SixRevisions.