Why typography is the Web’s greatest media format

0 comments

Posted on 16th June 2011 by catalin zorzini in internet |Uncategorized

, , , , , , , , , , , , , , , , , Motion, , , , , , , , , , , text, typography, , , , , , , ,

Advertise here with BSA

wdd8 Why typography is the Web’s greatest media format
Typography is defined as the style, arrangement, or appearance of typeset matter. A look around your surroundings will reveal how much typography has influenced the world. But does it matter, particularly with the likes of YouTube, Flickr, and other forms of media growing so rapidly?
It doesn’t have depth, color, motion. It doesn’t generate feelings or emotions. It provides us with information; line after line of monotonous information. It’s text!

The YouTubes, Vimeos, Flickrs, and Instagrams of today’s generation feed those who want to forget about typography. They want information with visual and audible cues. As one would expect, gobs of text doesn’t exactly inspire them.
But the Web is still young. Things are growing at a rapid pace, much faster than before. We could, in a large part, thank Internet Explorer 6′s demise for this progression. Now we have the freedom to run wild, explore our creativity, and make typography something that does more than present information.
Read more.


Win iPad 2 by Entering DYT & PunchTab Giveaway!

Design You Trust RSS Feed | Design You Trust on FB | Design You Trust on Twitter | Design You Trust

Another Blow To IE 6, This Time From WordPress.Com

0 comments

Posted on 7th June 2011 by tdomf_e01d5 in internet |Uncategorized

, , Browsers, , , , , , , , drops down, , , , , IE 6, , , , , , , , , , , , , , , support IE6, , , , , , , ,

Another Blow To IE 6, This Time From WordPress.Com


The Popular Web Browsers

0 comments

Posted on 3rd May 2011 by tdomf_e01d5 in internet |Uncategorized

, , , , , , , , , , firefox, , google chrome, , , , , , , , , , , , , , , , , , , , , , ,

The Popular Web Browsers


How do you convince the average web user to switch to a non-IE browser?

0 comments

Posted on 2nd May 2011 by Walter in internet |Uncategorized

, , Browsers, , , , Chrome, , , , , , , how-to, , , , , , , , , , , , , , , , , users, , , , , ,

Advertise here with BSA

As web designers and developers, we love to see how our sites and web apps look and function using a really good browser.

It’s true that with the release of IE9, Microsoft has made great progress in the so-called browser wars. And although IE9 is a fast and reliable browser that has pretty good support for CSS3 and HTML5, there are still quite a few missing technologies that we all would like to see in Internet Explorer soon.

But the reality is that while we as developers know that the user experience is greatly improved when a site is viewed in Chrome, Opera, Safari, or even Firefox, our users are not aware of this. And it’s sad to say that it will still be a very long time before developers can say that we’re happy with the state of browser usage stats for our client projects.

Personally, I always do what I can to promote the good browsers. If I see someone using an older version of Internet Explorer, I will gladly tell them to upgrade to the latest version of IE or try out something like Google Chrome instead.

I had this experience recently when I went to my friend Alex’s home for dinner. He was showing me some stuff on his computer on IE8, and I tactfully asked him if he’d ever tried Google Chrome. From there, things got interesting, and I decided to take some notes and share the experience.

“Why do you use Internet Explorer?”

One of the first things I did was ask Alex some questions about his feelings towards browsing the web, and the software he uses. I wanted to know exactly what he was thinking, and how he would feel about the possibility of accessing the web using a different piece of software. (Keep in mind that although I’m presenting the account below in dialogue, this is merely a paraphrase of our conversation, gleaned from my memory and the notes I took; Yes, I have an iPhone and I could have recorded this, but it was extremely informal and I didn’t even think much of it at the time).

“Why do you use Internet Explorer? Do you know that there are other options for browsers?”, I asked.

“No, not really. As far as I’m concerned, when I access the internet, I just need to click on the big blue ‘e’ and do a search. I don’t know why I would use anything else.”

“What does the ‘e’ stand for, Alex?”

“The ‘e’ stands for ‘internet’”, he replied.

The Big Blue 'e'
Why do otherwise intelligent people think the big blue “e” means “internet”?

At this point, it was clear that Alex does not understand the fundamentals of online technology and software.

I’m sure many web developers have had similar conversations with clients or friends who think the big blue “e” stands for “internet”–this despite the fact that they know that they’re using something called “Internet Explorer”. I knew this was going to be an amusing few minutes, so I started to probe further.


“Have you ever heard of Google Chrome?”

“No. What is it?”

“It’s another web browser, like Internet Explorer, except it’s faster and gives you a larger viewing area. Why don’t you install it and try it out?”

Alex complied with my request and he went through the steps of installing and testing Chrome. I eagerly watched and wrote down anything significant that occurred.

Downloading Chrome
Downloading and installing Chrome was pretty easy.

I helped him get to the Google Chrome download page, and he went through the steps. They’re pretty simple, so he didn’t have much trouble with that. When the installation completed, Chrome opened, and was ready to use. I didn’t say anything, just to see what he would do.

In his installation, there was a blank tab open and a message pointing to the address bar. The message explained that search terms could be entered directly into the address bar. Alex did not seem to notice this message. (As a side point here, when I re-installed Chrome to get these screenshots, I didn’t see that message, but that could be because I kept my browsing data intact upon uninstalling Chrome). To him, the message was like a banner ad; he ignored it, and (amazingly) went straight for the “x” in the top right corner, closing the browser. He obviously had no idea that Chrome had launched. He saw something new and assumed it had something to do with the installation process, and thought best to close it.

I directed him to his desktop to use the shortcut to reopen Chrome. I honestly think that if I had left him after he closed the window, he would have never found the shortcut himself and would have went straight for the big blue “e” instead, thinking that the “e” had now been upgraded to “Chrome”. But as things progressed, I was slowly beginning to realize it was actually worse than that.


“Web developers don’t like Internet Explorer”

Early in this process, I explained to him that web developers in general (unless they work for Microsoft) don’t like it when users view their pages using Internet Explorer. What was his response?

“I don’t use Internet Explorer; I use Google.”

Oh, dear.

I tried to explain why what he said was a non sequitur.

“Internet Explorer is a web browser; Google is a Search Engine,” I told him.

“You lost me.”

I couldn’t control my laughter. In his mind, there was no difference between a web browser and a search engine. This conversation was becoming eerily reminiscent of the now-famous YouTube video (see below) that shows people on the streets of New York City answering the question “What is a web browser?” The answers ranged from ridiculous to the almost incoherent. My friend Alex was (still is?) not much different, viewing “browser” and “search engine” as interchangeable terms.

Some of the answers given in the video include:

  • “A website you can search on.”
  • “A search engine.”
  • “It’s where you put your search terms.”
  • “Google.”
  • “The Yahoo!

Continuing with this theme of “browser = search engine”, at one point during my experience with Alex, I asked him to explain to me exactly what we were doing by installing Chrome. He told me that from his understanding, Chrome was a faster version of Google.

But Alex is not alone in viewing “browser” and “search engine” as interchangeable terms. According to the video, less than 8% of users interviewed on that day knew what a browser was. Having seen the video, my experience with Alex was amusing but really not that surprising. But we weren’t done yet.


“What do you think of Chrome?”

Having installed Chrome, I asked him to give me his opinion on it. He didn’t comment on the fact that it provided more screen real estate for viewing. He instead pointed out some of the “problems” that he noticed.

“Where’s the little arrow?” He asked.

“What arrow?”

“The little arrow that lets me view the different sites I’ve visited before so I don’t have to type them in again.”

Features Alex Likes in IE8
Alex likes certain things about IE8

“Oh, that arrow. Okay, fair point. What else?”

“I don’t see the search box in the top right corner. Where would I do my search?”

Alex knows (or at least, I assume he knows) that he could just go straight to Google.com and type his search terms. But he was accustomed to using the search box that appears by default in the top right corner of IE8, so he found this a bit disappointing.

I explained to him that when he had installed Chrome, there was a message that pointed out quite clearly that he could conduct all his searches straight from the address bar. He didn’t remember seeing the message, but was relieved to know that he could still search from the browser window without having to visit Google.com first.

For a few minutes we did some stuff using Chrome. We watched some videos, we did some searches. We were actually doing some legitimate stuff, not just browsing for browsing’s sake. He didn’t seem that impressed with the speed. He didn’t think there was much of a difference.

One thing that did happen was something that I personally find happens occasionally with Chrome: Once in a while a page will stop responding, and it will only start again if the page is refreshed. Usually when this happens, it’s an Ajax-based function that fails.

In the experience with Alex, it was a form function that was using Ajax to update some data. It wouldn’t respond (as it should have) to a button click, so I told him to refresh the page, after which it started working as expected. I admitted to him that while I did find Chrome to be overall much faster and more stable than Internet Explorer, this problem did occur on occasion.

That didn’t sit well with him, but I had to be honest. No browser is perfect, and this was unfortunately something from my own experience with Chrome. And the fact that it happened on Alex’s computer as well as on my own computer strongly suggests that it is a problem with Chrome (or at the very least, earlier versions of it).


“Have you heard of Firefox? Opera? Safari?”

When I asked him about other browsers like Firefox, Safari and Opera, the only one he had heard of was Firefox.

“Whenever I go on vacation and go to an internet cafe or something, there’s no big blue ‘e’, so I’m forced to use Firefox,” he explained.

I inquired further, because I knew he didn’t understand why that was the case.

“So why do you think they only have Firefox when you’re on vacation?”

“I don’t know, I just assumed that’s how people in those countries access the internet.”

Firefox overseas
Alex thought Firefox was the international version of the big blue ‘e’.

So in Alex’s mind, the orange and blue fox logo was the international equivalent to the big blue “e”. It was slowly becoming clear that the technologies we work with are not as user-friendly and understandable as we would hope.


“Would you consider using Chrome after this experience?”

When I was finished conducting my little impromptu user test, I asked him if he would seriously consider using Chrome from this point on for his day-to-day browsing. I further cemented the point that Chrome really was a superior browser, and that, if he switched, he would enjoy his experience on the web much more.

At that time, he wasn’t completely sure what he would do. He said he would consider it, but the problem we had with the page not responding properly was still holding him back from making any definite decision to leave Internet Explorer.


After a couple of weeks…

A few weeks after having this experience with Alex, I asked him if he had tried Chrome again. He said he did and he particularly liked the way that Chrome lets you search from the address bar, simplifying the process of visiting different sites. So it seems that he has warmed up to Chrome a little bit, and may end up using it regularly.


How can we improve education among average Web users?

For those reading this and wondering about Alex’s age and previous experience with computers, it’s actually not all that bad. Alex is in his late 30s and has been using PCs for years. He does photography as a hobby so he’s often on his computer organizing and editing his photos. He currently owns a desktop PC and a laptop, so computers are not something new or foreign to him.

I really don’t have any definite suggestions to help improve this situation, and I’m not even sure it can be improved. If younger generations still don’t understand the difference between “browser” and “search engine” or between “internet” and “web”, then it could be our education system that is to blame.

If the older generation doesn’t get it, then that could just be a result of people’s tendency to be “set in their ways”, as they say. Or it could just be that these technologies are built in such a way as to assume too much knowledge in behalf of the user. After all, how many people do you know that can’t tell you the difference between a TV set and a TV show?

Although I did in a very simple way express to Alex that websites will look and function better in Chrome than they would in IE8, I did not try to explain any specific reasons why (other than speed and screen real estate). If he can’t understand the difference between a browser and a search engine, then it’s extremely unlikely that a discussion of HTML5 and CSS3 would have any effect on him.

I think it was adequate enough to just explain that things work better and make some general statements about things he might be interested in. But who knows? Maybe something more specific would have helped. I suppose I could have shown him a website that uses CSS3 heavily and had him compare the experience.

But, in Alex’s own words, he just wanted to “get from A to B”. That is, he just wanted to get things done. So it was unlikely that he would be swayed by seeing rounded corners and drop shadows. Those things had nothing to do with why he was on the internet in the first place, so why should he care?


This was not a scientific study!

This was a one-off experiment, and nothing more. As web developers, I think in the backs of our minds we know this happens with many users. They don’t understand the internet and the web the way we do. This little experience with Alex just serves to illustrate this point, even if only in a superficial way.

Do you think this sort of thing is common with web users? Do you think even experienced web-savvy users have trouble understanding terms like “browser” and “internet”? What can we do to improve this situation?


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis writes regularly about front-end development on Impressive Webs. You can follow Louis on Twitter or get in touch with him through his website.

Have you ever tried to get a user to switch to a browser other than Internet Explorer? Share your experience in the comments.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Get 4 VisualFreaks Packs for only $29.95 (reg. $119)

Source


Glimpse Into The Future – IE 10 + Firefox 5

0 comments

Posted on 25th April 2011 by tdomf_e01d5 in internet |Uncategorized

, , Browsers, , , , , , , , , firefox, , , , , , , , , , , , , , , , , , , , , , , ,

Glimpse Into The Future – IE 10 + Firefox 5


IE9 Pinned Sites for WordPress

0 comments

Posted on 1st April 2011 by Morten Rand-Hendriksen in internet |Uncategorized

, , , , , , , , , , , , ie9, , , , , , , , , , , , , , , , , , , , , ,

Design Is Philosophy pinned sites functionalityWith the release of Internet Explorer 9 came a new and very cool feature that can greatly enhance the user experience for frequent visitors and also increase exposure for sites that activate it. The feature is called Pinned Sites and lets you turn any website or even web page into a customized pinned item on the Windows 7 toolbar.

What I like about this feature is that it runs of non-intrusive meta tags and JavaScript so that although it only works in IE9, it doesn’t interfere with other browsers. It becomes a value added experience for IE9 users but it doesn’t take anything away from people who do not use IE9 or don’t have Windows 7 as their operating system. Progressive enhancement I believe they call it

Last Saturday I did an hour long demo of this feature and how to build it into a WordPress site. The example in question was this very site and now I’m going to show you how you can make  your own WordPress site pinnable too.

Pinned Sites and why they matter

So what is a Pinned Site in IE9? The idea is simple: You open a site in IE9, grab the tab for that site and pull it down to your Windows 7 task bar. If the site is pinnable it will dock onto the taskbar with a custom icon like you see in the grab above. When the user then clicks the icon, a custom IE9 window will open just for this site. The size and even element colour of that window can be defined by the site owner. The result is that the website becomes more like a native application on the computer and this in turn leads to increased stick time (49% for the Huffington Post), more exposure and higher returning visitor rates. Whether you like IE9 or think it’s the worst thing since sushi falvoured gum the reality is site owners will benefit from this functionality. But I digress.

Making your site pinnable

To set up basic pinned site functionality you need a high quality favicon and access to your theme files. If you have both you’re good to go.

Because the pinned icons on the taskbar are larger than the regular ones I recommend using X-Icon Editor (free online tool) to generate the icon and create it for all four standard sizes (64×64, 32×32, 24×24 and 12×12). I also recommend creating it from a high quality and high contrast PNG file so it looks nice regardless of the background.

Once  you have the favicon.ico file save it to your current theme folder so it lives alongside index.php and all the other files. Once that’s done it’s time to crack open header.php in your theme folder and get to work.

To get the favicon to work add the following code right before the end head tag:

link rel="shortcut icon" href="/favicon.ico" />

Assuming you placed the favicon.ico file in the root of your theme folder this will automatically add it as a favicon for all browsers, even really old ones. Note that if you already have a link with rel set to shortcut icon like this you’ll create a mess. You should only have one favicon link in your theme, but most WordPress themes including TwentyTen don’t have one so you should be fine.

Next, to make the site pinnable we’re going to add five meta tags directly underneath:

meta name="application-name" content="Your Site Name" />
meta name="msapplication-tooltip" content="Tooltip message" />
meta name="msapplication-starturl" content="http://www.YourSite.com" />
meta name="msapplication-window" content="width=600;height=600" />
meta name="msapplication-navbutton-color" content="#colour" />

The above code is pretty self explanatory. Just swap out the content values with your own preference. The msapplication-window tag controls the size of the custom IE9 window that opens when you click the button.. The msapplication-navbutton-color tag controls the colour of the navigation buttons in the window as in the image above.

With the favicon code and these five meta tags included in your header your site will be pinnable. That really is all there is to it. But you can do a lot more!

Adding Jump Lists

Pinned SitesIf you look at the image to the right you’ll see there are two custom links in the jump list (right-click on the icon) for my pinned site under Tasks: Code of Ethics and Mor10 on Twitter. These are generated with an additional custom meta tag as below:

meta name="msapplication-task" content="name=Link Name;action-uri=http://www.YourSite.com/YourLink.html;icon-uri=http://www.YourSite.com/custom.ico"/>

Again it’s pretty straight forward: You just insert your own content and links in the name, action-uri and icon-uri variables and you’re good to go. I placed all my custom icons in the images folder under my theme and used a dynamic link for them. For the Twitter link my meta tag looked like this:

meta name="msapplication-task" content="name=Mor10 on Twitter;action-uri=http://www.twitter.com/mor10;icon-uri=/images/twitter.ico"/>

Adding dynamic Custom Jump Lists displaying the latest 5 WordPress posts

Adding static links is all well and good, but the Pinned Sites functionality also allows you to add custom Jump Lists. This is done through JavaScript. The basic function, which is still static, looks like this:

script language="javascript">
        function AddJumpList()  {
                try     {
                        if (window.external.msIsSiteMode())     {
                                window.external.msSiteModeCreateJumplist("Custom Jumplist Title");
 
                                window.external.msSiteModeAddJumpListItem("Title", "http://www.YourSite.com/link", "http://www.YourSite.com/custom.ico");
 
                                window.external.msSiteModeShowJumplist();
                        }
                }
                catch (error)
                {
                }
        }
        AddJumpList();
/script>

Unlike the meta tags before this is straight up JavaScript which means all browsers will try to run it even if they don’t support the function. For this reason I’ve added a conditional feature detection script that makes sure the browser supports msIsSiteMode before running it.

To add new items in the Custom Jump List you just copy and paste the window.external.msSiteModeAddJumpListItem() function and change the title, link and icon attributes.

But that’s just static lists. For this feature to be meaningful it needs to have dynamic lists that show the most recent posts from the site, right? For that we’re going to use some hard coded PHP and a custom WordPress loop to create the jump list items dynamically. That loop looks like this:


        $featuredPosts = new WP_Query();
        $featuredPosts->query("showposts=5");
 
        while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
                window.external.msSiteModeAddJumpListItem(" the_title(); ?>", " the_permalink() ?>", "http://www.YourSite.com/custom.ico");
 
 endwhile; ?>

As you can see it’s a simple WP_query that calls the 5 most recent posts and then uses the title and permalink attributes to populate the jumplist. Just to state the obvious: You can use any query you want to poll any content you want here. You don’t have to stick with my boring loop.

With this custom loop inserted the full Dynamic Custom Jump List function looks like this:

script language="javascript">
        function AddJumpList()  {
                try     {
                        if (window.external.msIsSiteMode())     {
                                window.external.msSiteModeCreateJumplist("New Posts");
 
                                
                                  $featuredPosts = new WP_Query();
                                  $featuredPosts->query("showposts=5");
 
                                        while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
                                                window.external.msSiteModeAddJumpListItem("(); ?>", "() ?>", "('template_url') ?>/images/news.ico");
 
                                        
 
                                window.external.msSiteModeShowJumplist();
                        }
                }
                catch (error)
                {
                }
        }
 
        AddJumpList();
/script>

Assuming you have an icon named news.ico in the images folder under your current theme this code produces a dynamic custom jump list displaying the titles of your five most recent posts, each with an icon, that points directly to that post.

Cool? I think so. Now pin my site and add the functionality to your own!

Related posts:

  1. 10 reasons you’ll love Windows 7, part two: The Taskbar
  2. WordCamp Whistler Pitch: Moving Beyond the Blog – Building Web Sites with WordPress as the CMS
  3. 10 reasons you’ll love Windows 7, part three: Aero Snap Gives You Window Control

Do You Still Use Internet Explorer 6?

0 comments

Posted on 23rd March 2011 by James Huff in internet |Uncategorized

, , Browsers, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , Weblog tools blog tools blogging tools, , ,

Our recent post on WordPress 3.2′s plans generated some interesting discussion, with the bulk of it centered around the discontinuation of support for Internet Explorer 6 in the Dashboard.

Internet Explorer 6, now almost ten years old, was once a power house in its own right. Now, the browser is drowning under its poor support for web standards, a pool of modern web technologies that it can never support, and a flood of hacks that many sites need to employ just to provide a decent browsing experience for IE 6 users. IE 6 was superseded by Internet Explorer 7 in 2006, followed by IE 8 in 2009, and recently IE 9 last week. Of course, alternatives to Internet Explorer, like Firefox, have been around much longer.

According to Microsoft’s own Internet Explorer 6 Countdown, 12% of the world still uses the ten-year old browser. The highest concentration of IE 6 users is in China, with 34.5% of the country still using it, but usage is down to 2.9% in the USA and 3.5% in the UK.

There certainly could be an economic issue or general inability to upgrade keeping IE 6 alive, as the browser only requires Windows 98 to run, while IE 7 requires Windows XP. Firefox seems to have finally pulled the old releases that were still compatible with Windows 98, but Opera supported Windows 98 all the way up to 10.63 (released October 2010), and potential users can still download it here.

With such a powerful and modern alternative to IE 6 available, even to Windows 98 users, the question remains as to why there are so many users still on such an outdated browser.

If you’re a fan of IE 6, please leave a comment and let us know why. If you work for a company that forces you to use IE 6, march on down to the IT department and demand to know why you’re forced to use such an archaic browser.

Friends upgrade friends to IE9

0 comments

Posted on 18th March 2011 by Morten Rand-Hendriksen in internet |Uncategorized

, , , , , , , , , , , , HTML5, ie9, , , , , , , , , , , , , , Speaking Engagements, , , , , , , ,

html5

Update: Firefox 4.0 was released on March 2nd meaning all the major browsers now have full support for HTML5 and you no longer have an excuse not to implement it.

On March 26th the IE9 / WP7 Boot Camp is coming to Vancouver, and if you attend you’ll find me presenting two of the sessions; A Lap Around Internet Explorer 9 and HTML5 and Enhancing Pinned Sites with Internet Explorer 9. I realize this kind of statement is likely to get me rolled in tar and feathers and chased out of town, but before you go looking for your pitchforks and good torch material, hear me out. There are usually reasons why people do things that don’t seem to make sense, and this is no exception. I’m making the case for Internet Explorer 9, and quite frankly so should you. Here’s why.

HTML5 is should be now

Over the last couple of years new technologies have started rolling out that will improve both the usability and effectiveness of code on the web. These technologies have been bundled into one collective term, HTML5, but actually include HTML5, CSS3, SVG and a whole pile of other forward thinking inventions. One of the major reasons why the implementation of HTML5 is so slow, apart from the fact the spec is not yet completed, is that up until March 15th, 2011 Internet Explorer, the default and primary browser for PCs, did not support any of these technologies at all. So while the other major browsers (Firefox, Chrome, Opera and Safari) were providing better and better support for these new technologies anyone using Internet Explorer was experiencing the old internet. As a result, for full cross-browser compatibility HTML5 integration was at best included as an add-on to backwards compatible code.

That was then. This is now. With IE9 finally released we are facing a new reality where HTML5, even in it’s unfinished spec, can and should be implemented as the primary code of the web with backwards compatibility as an add-on. But this can only happen if we get everyone currently using Internet Explorer to upgrade.

Stop Living in the Past

A couple of years ago I started a website called Stop Living In The Past where I encouraged all web developers to install a simple script on their site that would tell IE6 users they were running a horribly outdated piece of software and that they needed to upgrade. This was not a new idea – there are plenty of such sites out there and the majority of European newspapers had already implemented such warnings on their sites – but unlike the major IE upgrade scripts out there mine told people to upgrade to a newer version of IE, not get a new browser. My reasoning was simple: If I am to be able to implement the latest and greatest in web technologies and ensure cross-browser compatibility on the sites I build I need to know that the people that visit those sites are running browsers that support them. And since I knew a lot of people were running old and outdated versions of Internet Explorer, largely because they were unaware they had the ability to upgrade, I figured warning people and giving them an opportunity to upgrade right away was a good idea.

This pissed everyone off.

On the IE hater side people were up in arms about the fact I was telling visitors to upgrade IE, not get a different browser. Their argument was that IE, no matter what version, was pure evil, the cause of all things bad on the internet and should be knocked unconscious, bound and gagged and dropped in a deep well to be sealed forever.

On the IE lover side people were shocked that I would question the all-knowing Microsoft on the quality of their ancient browser. To them the mere notion that IE was somehow fallible was heresy.

Both sides were furious, both sides were unwavering in their beliefs and both sides seemed to completely ignore the fact that Microsoft themselves stated in no uncertain terms that they wanted nothing more than to see IE6 eradicated from the web.

In short, my site unwittingly uncovered dogmatic lunacy, on both sides. And as with science and religion, dogmatic thinking about browsers is just plain stupid.

This became comical (at least for me) when Microsoft a few weeks ago released the IE6 Countdown website on which they offer up a code to warn IE6 users they need to upgrade their browsers.

Now there are very good reasons why Microsoft can’t simply flip a switch and kill IE6 right now, most of them involving major mulit-national Asian banks, airline booking systems and other highly integrated and globally important systems, but that is no excuse for the remaining 99.9% of computers in the world not to upgrade to the latest version of the browser right now.

IE haters are (surprisingly) part of the problem

IE9 = HTML5You’ve surely met them – people who treat any version of Internet Explorer like the next plague and tell people to never touch the browser, run away when they see it and preferably buy a Mac right now. These are the same people who blame Internet Explorer for everything from web standards incompliance (true), table-based layouts (partially true) and their websites not working properly (utter nonsense). What these people fail to realize or accept is that while IE6 is a horrible piece of outdated software that doesn’t work to modern standards, the newer versions have gotten progressively better to the point where today we have version 9 which not only is standards compliant but also incorporates the forward thinking new technologies of the web. It doesn’t mean you have to like it, but saying that the current version of Internet Explorer is bad is just not true.

Being dogmatic about this kind of stuff is just plain stupid. Any serious web designer or developer should be a browser agnostic. After all, you have no control over what browser your visitors choose to use and your job is to ensure a consistent experience across all devices, platforms and browsers. In short a pragmatic approach is the only way we will ever get anywhere. When it comes to browsers this means accepting that no matter what you personally think of Internet Explorer and the company behind it, millions of people use the browser every day and if they are not using the latest version, they are not experiencing the web as it should be and you as a designer and developer are forced to stick with old solutions.

The bottom line is we have to get people on track and upgrade them to IE9 en masse so that we can start using the new technologies we have been waiting for and talking about for the last several years. And even though IE is not my preferred browser I will play my part in ensuring that people upgrade and that web designers and developers know what the browser can do, how to use the advanced features that come with it and how to start implementing HTML5 right now.

The argument used to be that HTML5 was a non-starter because IE didn’t support it. Well, now it does, so let’s embrace it, get people up to speed and start building better and more functional solutions for the web.

Go berserk in the comments section.

Related posts:

  1. YouTube joins the movement to phase out Internet Explorer 6
  2. Most Popular Browsers (or Why You Need to Code for Internet Explorer 6)
  3. WordPress 2.8 upgrade woes

IE6 PNG Fixes – SuperSleight & Unit PNG Fix

Comments Off

Posted on 9th August 2008 by Lindsey in internet |Uncategorized

, , , , , , , , , , , , , , IE PNG, , IE6 PNG Support, , , , Javascript PNG, , , , , , PNG, PNG Transparency IE6, , , , , , , SuperSleight, Unit Interactive, Unit PNG Fix, , , , , , , Web Tools/Apps, , ,

Unit Interactive’s Unit PNG Fix A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files – so if you prefer to use the mini version of SuperSleight it would just be 2k.

Both are called the same way in the

of the document – a conditional focusing on IE6 and below.

Unit Interactive lists the benefits of it’s script as:

  • Very compact javascript: Under 1kb!
  • Fixes some interactivity problems caused by IE’s filter attribute.
  • Works on img objects and background-image attributes.
  • Runs automatically. You don’t have to define classes or call functions.
  • Allows for auto width and auto height elements.
  • Super simple to deploy.

24 ways introduced SuperSleight as having the following qualities:

  • Works with both inline and background images, replacing the need for both sleight and bgsleight
  • Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
  • Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
  • Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
  • Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

After creating a few png transparent images and testing both methods here are my pros and cons of each:

SuperSleight
PROS:

  • No need to edit .js files with image link when both are placed in the same directory (ie: root).
  • Plug and play – just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.

CONS:

  • Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
  • Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
  • Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.

Unit PNG Fix
PROS:

  • Smaller size. But only by 1k.
  • No popup warning that their is active content.
  • Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.

CONS:

  • Comes with the path to the clear.gif image linked in the /images folder.

So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6′s until there is virtually no one using IE6.

Using IE Conditionals For Cross Browser Compatibility

Comments Off

Posted on 27th May 2008 by Lindsey in internet |Uncategorized

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.

IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)

For example, say you have some margin adjustments to make that effect only IE6, in the head of your HMTL document you could put this:


Or, say you need it to affect IE6 and all previous versions:




The above code tells the browser to apply these styles to IE6 and any version LESS THAN it.

You can also use the and/or syntax (& / |) if you need the styles just applied to certain versions:




You can also use the & symbol to combine styles for one browser ex: [if (IE 6) & (IE 5)].

If you have a substantial amount of styles (or aren’t using a templating system where the header is isolated) I recommend using the conditional to link to a seperate IE stylesheet:





See more examples and the complete variable list over at Microsoft’s Developer Network.