BlogmyQuery – BMQ

Shopping. Social networking. Emailing. Reading. Finding directions. Banking. Researching. Those are some of the most common tasks people perform on the World Wide Web. You’ve probably done all of these things yourself at some point. So if you’re like many people, you probably do these things every single week (and many of them even every day).

This blog you’re reading now, Smashing Magazine, normally publishes content that’s intended for graphic designers, Web designers, and Web developers of varying skill levels. But today, this article is for the rest of you—the non-programmers, the everyday Web users.

We at Smashing Magazine, along with designers and developers worldwide, want you to have the absolute best possible experience on the Web. In fact, in the design and development community, we spend countless hours every week discussing and researching the standards and practices that we know will make your experience on the Web infinitely greater.

But the browser you’re using could be limiting that potential. So please read on, so you can learn how to drastically improve your experience on the Web.

Your Browser Is Too Old

Everyone that accesses Web pages on a desktop computer uses a Web browser. Without a Web browser you cannot view or interact with websites. How do you personally access websites like Facebook and YouTube? You might commonly use the program that opens when you click the big blue “e” icon on your desktop. Here’s what it looks like:

This is the logo for Internet Explorer, a Web browser.

This “e” icon is not a shortcut to a generic “internet” or “Web” program. It is a shortcut to a Web browser made by Microsoft, called “Internet Explorer” (also referred to as “IE”). Over the past 17 years, this browser has been the most popular Web browser. At one time, it was arguably the best browser you could use. But that is not true anymore.

Internet Explorer is currently at version 9, and version 10 is supposed to be officially released some time this year. But most people are not using IE9—most Web users that use Microsoft’s browser are still using a less stable, insecure, slow version of IE (either IE8 or something older).

The truth is, even IE9 (which is a huge improvement over previous versions of Internet Explorer) is not as up-to-date as other browsers. So if you’re still using some version of Internet Explorer, we strongly recommend that you upgrade to a different browser. To help you upgrade, we have some options for you to consider.

But before we introduce those other browsers to you, let’s quickly cover some reasons why older browsers like IE7 and IE8 aren’t as good.

What’s Wrong With Old Browsers?

Old browsers (especially Internet Explorer versions 6, 7, and 8) are less stable, and much more vulnerable to viruses, spyware, malware, and other security issues. Those are obviously big problems to be concerned about—especially for people who shop online. So security alone is a very good reason to upgrade. But there’s more to it than that.

Old Browsers Are Slow and More Likely to Crash

Firstly, old browsers are very slow. Every Web page that loads in a browser has to perform a number of different tasks. One of those tasks is the process of loading different files. These files include images, programming scripts, and other resources that help improve the look and functionality of the website you’re visiting. Old browsers do not perform these tasks with the same speed as new browsers. This makes your experience on the Web considerably slow, and can sometimes cause your browser to crash or freeze.

Browsers like IE8 will freeze and crash more often than newer browsers.

Old Browsers Can’t Display Many New Websites

The other problem that old browsers have is that their display capabilities are very limited. For example, in an older browser, in order to show a simple animation, the person creating the website would have to use either an embedded video or Flash file (like those found on YouTube) or else a lot of extra programming code (called JavaScript). In either case, this means that the page will take much longer to load, thus harming your experience on that website.

New browsers support new Web technologies (like HTML5 and CSS3). These languages serve as a foundation for many websites today, and for virtually all new websites and Web apps. But unfortunately, many of these new websites will neither look nor function in the same way in old browsers like IE8.

To demonstrate this problem, take a look at the two images below. These images are screenshots taken from an infographic Web page that covers Rainforest Deforestation. The first image shows the page as it appears in IE8:

A Web page displayed in IE8.

Now look at the same page in a new browser like Chrome, or Firefox:

The same Web page displayed in Google Chrome.

IE8 has many problems on this page: Many of the graphical elements are not appearing, all the animations are missing, and even some of the text looks misaligned. This is caused by the fact that the page is built with new Web design technologies that old browsers like IE8 don’t support.

New Browser Options

Now that you understand why it’s highly recommended to upgrade an old browser, let’s take a look at what options you have for a new browser, and what strengths these browsers have. Please notice that switching to one of these browsers is free and won’t take more than a couple of minutes.

Google Chrome
In May 2012, according to at least one statistics website, Google Chrome (all versions combined) became the most popular browser in the world (compared to IE, all versions combined). Chrome was first released in 2008, and has a number of advantages over old browsers like IE8.

Mozilla Firefox
Firefox has been the main competitor to Internet Explorer since the mid-2000′s. Although Google’s Chrome has become more popular in recent years, Firefox is a great browser with many advantages over old browsers.

Opera
Compared to other browsers, Opera isn’t used as much, but it has been around since the mid-90′s. Opera has always been at the forefront of browser innovation and supports many of the latest technologies and features that make websites faster and more feature-rich.

Apple’s Safari
This is the same browser that’s commonly used on iPhones and iPads. Safari’s features are very similar to Google’s Chrome, and has been around since 2003.

Why Are New Browsers Better?

The browsers listed above have a number of advantages over older browsers, including:

• Far fewer instances of crashing or freezing.
• Much more secure from virus, malware, and browser hijacking attacks.
• Much faster page-loading.
• Larger page-viewing area.
• A large variety of useful optional plugins and add-ons that add extra features to improve Web browsing.
• Unlike IE9 and the upcoming IE10, they can be installed on Windows XP.
• New browsers will automatically update to the latest version, or will notify you to download an update.

About Automatic Updating

The last point in the list above mentions the fact that new browsers will automatically notify you of an update—this is a good thing. When you have a browser that’s kept up-to-date automatically, you get a number of important benefits in addition to those already mentioned. These include:

• You’ll rarely, if ever, come across a website that says “your browser cannot view this website”.
• If any known security vulnerabilities are present, they will be fixed automatically.
• Every time your browser is upgraded, your browser becomes faster, meaning that the time you spend waiting for pages to load will be minimal.

Old browsers like IE7 and IE8 will not automatically notify you to update, so if you continue to use an old browser, your experience on the Web will become less secure (and less enjoyable as the months go by).

Extensions and Add-Ons

As mentioned in the bullet list above, one of the features of new browsers is the ability to add extensions, plugins, and add-ons. The Chrome Web Store features hundreds of useful extensions, including:

• Facebook Notifications, which lets you keep up with friends’ activities even when you’re not on Facebook.
• Add to Amazon Wish List, which lets you add virtually any product from any website to your Amazon wish list.
• Google Dictionary, which lets you see the definition of any word by simply double-clicking on it.

Extensions in the Chrome Web Store

What about add-ons for Firefox? Well, in addition to extensions similar to those mentioned above for Chrome, some popular and useful choices include:

• Video DownloadHelper, which lets you easily download and convert video, audio, and photos from YouTube and similar websites.
• WOT—Safe Surfing, which shows you which websites you can trust, based on millions of users’ experiences.
• FastestFox, which helps you save time and increase productivity by speeding up repetitive tasks inside the browser.

However, Chrome and Firefox are not the only new browsers that offer these types of extensions and add-ons. You can browse the extensions for Safari and for Opera, if you choose one of those browsers instead.

“All My Bookmarks Are In Internet Explorer!”

Everyone has bookmarks (or “Favorites”, as they’re called in IE) in the browser they use regularly, and it’s a valid concern if you don’t want to switch because all of your bookmarks are in your old browser. But moving your bookmarks from the old browser to the new one is not difficult at all.

For instructions on how to transfer your bookmarks to your new browser, check out the Browsing Better website. When you visit the page, click on the icon for the browser you’re currently using, and follow the instructions from the images that appear.

You can easily move your bookmarks from IE to your new browser.

“I Won’t Upgrade—I’m Happy With Internet Explorer!”

Even after everything you’ve read above, you might still have reservations about upgrading to a different browser. Well, there’s one final option you may consider. You can keep using Internet Explorer while getting a similar speed and viewing experience as found in Google Chrome by installing an add-on to Internet Explorer called Chrome Frame.

Chrome Frame makes Internet Explorer act like a modern browser.

Chrome Frame is an add-on that enables new Web technologies like HTML5 and CSS3 in Internet Explorer versions 6, 7, 8, and 9. As long as the Web page you’re viewing has a specific piece of code in it, you’ll get an experience very similar to Google Chrome—even when using an older version of Internet Explorer.

Installing Chrome Frame is fast, easy, and free. Chrome Frame is completely invisible and will not change anything about the way you access Web pages in Internet Explorer. But it will provide the same speed and viewing experience that Google’s Chrome browser has, without needing to switch browsers. (However, if you’re in a business environment, you might want to contact your system administrator before installing it because some legacy sites might not be displayed properly. — thanks for the note, Jochem Bokkers!)

What About Locked-Down Systems?

If you’re on a system at your place of employment where you’re not able to upgrade or download a new browser, Chrome Frame is a viable option. You don’t need any special administrator privileges to install Chrome Frame, so you can keep using the same version of Internet Explorer, and almost instantly have a far superior browsing experience that’s identical to using the latest version of Google Chrome.

Conclusion

There are countless reasons to upgrade your old browser and start using something new and up-to-date. So trust us when we say that your experience on the Web will be infinitely better if you choose to do this.

Whatever you’re doing on the Web—reading email, shopping, banking, or anything else—a new browser will allow your experience to be safer, faster, and much more beautiful.

(jvb)

---

© Louis Lazaris for Smashing Magazine, 2012.

Presenting the ALA Summer Reading Issue—our favorite articles from 355 issues of A List Apart.

Philosophy of Web Design

A Dao of Web Design by John Allsopp

ALA 58: April 7th, 2000

Over 11 years after publication John Allsopp’s piece on web philosophy still resonates. Web designers often bemoan the malleable nature of the web, which seems to defy our efforts at strict control over layout and typography. But maybe the problem is not the web. Maybe the problem is us. John Allsopp looks at web design through the prism of the Tao Te Ching, and decides that designers should let the web be the web. An article twelve years ahead of its time, whose wisdom continues to illuminate the path forward. —Ed.

Understanding Web Design by Jeffrey Zeldman

ALA 249: November 20th, 2007

We’ll have better web design when we stop asking it to be something it’s not, and start appreciating it for what it is. It’s not print, not video, not a poster—and that’s not a problem. Find out why cultural and business leaders misunderstand web design, and learn which other forms it most usefully resembles.

Good Designers Redesign, Great Designers Realign by Cameron Moll

ALA 206: October 24th, 2005

The difference between redesigns that make you look busy and give your stakeholders something else to argue about, and strategic overhauls that reposition your brand and help you set and reach business goals. Still quoted in board meetings, and, more importantly, still practiced, this call to arms changed how many of us approach projects and understand our job. —Ed.

Web Standards (Historical)

To Hell with Bad Browsers by Jeffrey Zeldman

ALA 99: February 16th, 2001

In a year or two, all sites will be designed with standards that separate structure from presentation (or they will be built with Flash 7). We can watch our skills grow obsolete, or start learning standards-based techniques. In fact, since the latest versions of IE, Navigator, and Opera already support many web standards, if we are willing to let go of the notion that backward compatibility is a virtue, we can stop making excuses and start using these standards now. At ALA, beginning with Issue No. 99, we've done just that. Join us. The battle cry that led to modern web design. —Ed.

They Shoot Browsers, Don’t They? by Jeremy Keith

ALA 253: February 19th, 2008

Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.

Where Our Standards Went Wrong by Ethan Marcotte

ALA 233: February 26th, 2007

To validate or not to validate; that is the question. Ethan Marcotte helps us to re-examine our approach to standards advocacy and how we can better educate our clients on the benefits of web standards.

Prefix or Posthack by Eric Meyer

ALA 309: July 6th, 2010

Vendor prefixes: threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

Web Standards for E-books by Joe Clark

ALA 302: March 9, 2010

E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That's great news for publishers and standards-aware web designers. Great news for readers, too. Joe Clark explains the simple why and how.

Responsive and Mobile

Fluid Grids by Ethan Marcotte

ALA 279: March 3rd, 2009

How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts? Completely awesome, that's how awesome. And with a little cunning and a tad of easy math, Ethan Marcotte gets it done. We smell a trend in the offing.

Responsive Web Design by Ethan Marcotte

ALA 306: May 25th, 2010

Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design. This child of Allsop's “Dao of Web Design” has changed and is still changing our industry. —Ed.

Put Your Content in My Pocket by Craig Hockenberry

ALA 244: August 28th, 2007

Craig Hockenberry offers detailed guidance on tuning your site for the hot new phone, and making changes that can enhance even non-iPhone-users’ experience. The first article on adjusting web content for a new category of smartphone, published one week after the iPhone debuted. —Ed.

Apps vs. The Web by Craig Hockenberry

ALA 312: August 17th, 2010

There’s an app for that, and you’re the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone’s Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you’ll need to know if you choose to create an iPhone app—from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.

Design and Layout (Historical)

CSS Sprites: Image Slicing's Kiss of Death by Dave Shea

ALA 173: March 5th, 2004

Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution. Still widely practiced (and still awesome), this powerful solution replaced a lot of needless JavaScript and Flash and helped pave the way for wider acceptance of standards-based design. —Ed.

Sliding Doors of CSS by Doug Bowman

ALA 160: October 20th, 2003

Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too! Until CSS3 made it superfluous, this was the thinking designer’s favorite way to create those coveted rounded corner effects. —Ed.

Typography

CSS at Ten by HÃ¥kon Wium Lie

ALA 244: August 28th, 2007

Ten years ago, HÃ¥kon Wium Lie and Bert Bos gave us typographic control over web pages via CSS. But Verdana and Georgia take us only so far. Now HÃ¥kon shows us how to take web design out of the typographic ghetto, by harnessing the power of real TrueType fonts. The A List Apart article that birthed modern web fonts and web font services, e.g., Typekit. —Ed.

Real Web Type in Real Web Context by Tim Brown

ALA 296: November 17th, 2009

Web fonts are here. Now that browsers support real fonts in web pages and we can license complete typefaces for such use, it’s time to think pragmatically about how to use real fonts in our web projects. Above all, we need to know how our type renders in screens, in web browsers. To that end, Tim Brown has created Web Font Specimen, a handy, free resource web designers and type designers can use to see how typefaces will look on the web.

On Web Typography by Jason Santa Maria

ALA 296: November 17th, 2009

Until now, chances are that if we dropped text onto a web page in a system font at a reasonable size, it was legible. But with many typefaces about to be freed for use on websites, choosing the right ones to complement a site’s design will be far more challenging. Many faces to which we’ll soon have access were never meant for screen use, either because they’re aesthetically unsuitable or because they’re just plain illegible. Jason Santa Maria presents qualities and methods to keep in mind as we venture into the widening world of web type.

More Meaningful Typography by Tim Brown

ALA 327: May 3rd, 2011

Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work with—not against—responsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.

Content

Orbital Content by Cameron Koczon

ALA 326: April 19th, 2011

Bookmarklet apps like Instapaper and Readability point to a future where content is no longer stuck in websites, but floats in orbit around users. And we’re halfway there. Content shifting lets a user take content from one context (e.g., your website) to another (e.g., Instapaper). Before content can be shifted, it must be correctly identified, uprooted from its source, and tied to a user. But content shifting, as powerful as it is, is only the beginning. Discover what’s possible when content is liberated.

The Discipline of Content Strategy by Kristina Halvorson

ALA 274: December 16th, 2008

It's time to stop pretending content is somebody else’s problem. If content strategy is all that stands between us and the next fix-it-later copy draft or beautifully polished but meaningless site launch, it’s time to take up the torch—time to make content matter. Halvorson tells how to understand, learn, practice, and plan for content strategy.

Reading

Reading Design by Dean Allen

ALA 128: November 23rd, 2001

With so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as being written rather than assembled.

In Defense of Readers by Mandy Brown

ALA 278: February 17th, 2009

As web designers, we concern ourselves with how users move from page to page, but forget the needs of those whose purpose is to be still. Learn the design techniques that create a mental space for reading. Use typographic signals to help users shift from looking to reading, from skimming along to concentrating. Limit distractions; pay attention to the details that make text readable; and consider chronology by providing transitions for each of the three phases of the online reading experience.

How we work

Habit Fields by Jack Cheng

ALA 305: May 4th, 2010

We have the power to bestow our abilities onto the things around us. By being conscious of our tools, habits, and spaces, and actively conditioning them to help us behave the way we want to behave, maybe we can more efficiently tap into the thousands of hours of creative genius embedded in our everyday objects. Maybe we’ll be able to maximize the capabilities that new technologies afford us without being overwhelmed by the distractions. And, just maybe, we’ll remember what it feels like to be utterly engrossed in our daily work.

Community

The Wisdom of Community by Derek Powazek

ALA 283: May 5th, 2009

The Wisdom of Crowds (WOC) theory does not mean that people are smart in groups—they’re not. Anyone who’s seen an angry mob knows it. But crowds, presented with the right challenge and the right interface, can be wise. When it works, the crowd is wiser, in fact, than any single participant.

Coaching a Community by Laura Brunow Miner

ALA 280: March 24th, 2009

A key to running successful “social networking sites” is to remember that they’re just communities. All communities, online or off, have one thing in common: members want to belong—to feel like part of something larger than themselves. Communicating effectively, setting clear and specific expectations, mentoring contributors, playing with trends, offering rewards, and praising liberally (but not excessively) can harness your members’ innate desires—and nurture great content in the process.

From Little Things by George Oates

ALA 258: May 6th, 2008

Q. What technology do you need to build the next Flickr? A. Trick question. What you need to build the next Flickr is people. George Oates, a key member of the core team that shaped the Flickr community, shares lessons that can help you grow yours.

Enjoy this reading list as an epub

Huzzah! The ALA 2012 Summer Reading Issue is available as a Readlist, suitable for reading on Kindle, iPhone, iPad, Readmill, or other e-book reader.

---

---

RSS readers: Don't forget to join the discussion!

Because of how far certain Web technologies like HTML5 and CSS3 have brought us, many would say that—from a Web platform perspective—the future is now. Sounds like a cliché, I know. At the very least, it feels like the future is starting to bubble up to the surface… but it’s just not quite there yet.

When we use new DOM features, HTML5 APIs and the latest in CSS3, the possibilities that open up are astounding. These new technologies help us easily build Web applications with less reliance on hacks, plugins, images, and bloated scripts. This makes life easier not only for Web developers (for both building and maintaining these projects) but also for the end user who gets a faster and stronger overall experience.

But there is a huge road block preventing our “future” from truly becoming the now. What is this roadblock? It’s old browsers. Let’s delve into this topic a little bit so we can see why this is a problem and what we can do to help it.

Internet Explorer’s Usage Share

According to StatCounter estimates, even with the recent mobile explosion, desktop usage still trumps mobile by a large margin. 90% of internet activity worldwide occurs on the desktop. Granted, some reports have mobile shares higher than the current 10% shown by StatCounter. Whatever the case is, the fact remains that a lot of people are accessing our websites and Web apps by using a desktop browser.

Which desktop browsers? Well, let’s look at StatCounter’s usage share for desktop browsers for May 2012, with a specific focus on Internet Explorer:

As shown above—to the joy of developers everywhere—worldwide stats for versions of Internet Explorer prior to IE8 are very low. IE6 is so low that it’s not even showing up in some of StatCounter’s charts anymore. If you find similar stats for your own projects, then, depending on the overall traffic numbers, you may be able to drop support for IE6 and IE7 and start using a number of features that those browsers don’t support. But what about IE8 and IE9?

As you can see from the image and link above, worldwide usage for IE8 and IE9 is just about 30%, combined. But that might not be the full story. Compare those numbers to the ones taken from two other websites.

First, Net Applications, from April of this year:

Their stats show a whopping 38% of users still on IE6-8, with more than two thirds of those on IE8. In addition, IE9 holds another 16% share. That’s more than 50% of users on IE6-9.

Now look at StatOwl’s April 2012 report:

Large preview.

Like Net Applications, StatOwl places IE8′s and IE9′s shares significantly higher than StatCounter’s—this time about 20% for each. Combined with the 8% on IE6 and IE7, that’s almost 50% on IE.

The debate about why these different browser usage stats are showing higher numbers for IE6-9 is something that’s been in industry news of late. These details are certainly beyond the scope of this article, but you can check out the links below for more info:

• Understanding Browser Usage Share Data (Windows Team Blog)
• Microsoft says Chrome didn’t top Internet Explorer last weekend (Computerworld Blogs)
• StatCounter to Microsoft: You’re wrong, Chrome beat Internet Explorer last weekend (Computerworld Blogs)

Why Does This Discussion Include IE9?

IE9 is a huge step forward from previous versions of Internet Explorer. But it’s over a year old, and does not auto-update like other popular browsers do.

Thus, although IE9 is a much more stable and feature-rich browser, it’s already starting to show its age. With each passing month, browsers like Chrome and Firefox continue to roll out new features automatically, and IE9 gets closer to becoming obsolete.

Why Is The Old Browser Problem Such A Big Deal?

Some people might be thinking “What’s the big deal? Use progressive enhancement and you’ll just give old browsers a lesser experience and the users won’t know what they’re missing”. This might be true with certain CSS3 and HTML5 features for which it’s easy to provide fallbacks and even some lightweight polyfills. But other more complex features are not that simple.

Let’s first take a look at IE8. To give you an idea of how many features IE8 lacks, here’s a list of what you gain as a developer when you stop supporting IE8:

• Media Queries
• opacity (without IE filters)
• border-radius
• box-shadow
• RGBA, HSL/HSLA colors
• HTML5 elements (that don’t need the html5shiv)
• Data URLs
• getElementsByClassName
• CSS Transforms
• <canvas>
• Cross­origin Resource Sharing
• Lots of CSS3 selectors (:nth-child(), :target, :enabled, etc)
• matchesSelector
• Navigation Timing API (performance.timing)
• Multiple backgrounds
• background-clip, background-origin, background-size
• Real HTML5 Video/Audio with no messy fallbacks
• WOFF Fonts
• SVG images, inline SVG, SVG in CSS backgrounds
• Geolocation
• Server ­Sent Events

Also, this list doesn’t take into consideration the number of bugs and performance problems that occur in IE8. So when you consider all of the features above, along with bugs and performance issues, a high number of users still on IE8 becomes a major roadblock to progress on the Web.

Of course, this is not to say that support for these features is perfect in new browsers. Many of these features are still in flux in the spec. But a very high percentage of in-use browsers outside of IE8 have pretty good support for everything listed above.

What About IE9?

The problem, however, doesn’t end with IE8. As mentioned, IE9 is likewise starting to fall behind the other browsers. Here’s a list of the features you gain if you don’t have to support IE9:

• text-shadow
• Linear and Radial Gradients
• CSS Transitions
• Keyframe Animations
• Web Sockets
• 3D Transforms
• flexbox layout
• Multiple Columns
• The <datalist> element
• SVG Filters
• Application Cache
• pushState, replaceState
• indexedDB
• ECMAScript 5 Strict Mode
• FileReader API
• requestAnimationFrame
• The async attribute for <script> elements
• Many HTML5 form features
• Native form validation
• The <progress> element
• Web Workers
• XMLHttpRequestLevel 2
• Typed Arrays
• matchMedia
• Blob URLs

As you can see from the two lists above, the old browser problem is a significant one. These new features (although still in progress) have the potential to help designers and developers innovate and push the Web forward in amazing ways.

Is IE[x] The New IE6?

The notion that “IE[x] is the new IE6″ has been discussed before, but it deserves more attention here. As of writing this, IE9 (the latest stable version of Internet Explorer), cannot be installed on Windows XP and, according to StatCounter, about 31% of desktop internet usage is on that operating system.

Since a large number of IE8 users are essentially “trapped” in XP, there is no hope that those users are going to upgrade to a newer version of Internet Explorer unless they upgrade their OS.

For your own projects, I hope the stats for older browsers are much better. After all, the only stats that really matter are your own. Also, the worldwide stats showing high numbers for IE6-8 are probably a little skewed by some densely populated geographic areas. Nonetheless, usage stats for IE6-9 are still a factor for many projects and may thus be holding back a lot of developers (due to client or corporate pressure) from using many new features.

The point here is that if the usage stats for browsers like IE8 and IE9 linger for anywhere nearly as long as IE6 did, then those of us who are building websites and Web apps for a larger and more diverse audience could be in for a long wait (before using dozens of new features).

Usage stats for IE6–9 are still a factor for many projects and may thus be holding back a lot of developers.

Microsoft Provides A Glimmer Of Hope—Or Do They?

One positive development in this area is the recent announcement by Microsoft that XP, Vista, and Windows 7 users will be automatically upgraded to the latest version of Internet Explorer available for their operating system.

Unfortunately, while this news is better than nothing, it is not the ideal solution. A similar announcement was made back in 2008 regarding a so-called “auto-update” from IE6 to IE7. That 2008 update would only take place if a system was set to auto-approve Update Rollup packages. But a default setting in XP prevents this from happening—so this barely made a ripple in the IE6 problem at that time (as seen from the fact that IE6 usage was at 23% in January of 2009).

Similarly, this time around, users will be upgraded to a newer version of Internet Explorer only if they have turned on automatic updating via Windows Update. Also, the auto-update began in January and only for users in certain geographic regions. So again, although this is certainly good news, it’s not the ideal solution.

What Real Options Are There For Users Of Older Browsers?

Aside from people that are on systems that, for security or compatibility reasons, cannot upgrade their browsers, everyone that is using IE8 (or lower) has one of two options to help alleviate this problem—even if they’re on Windows XP. They are:

• Don’t use Internet Explorer; unlike IE9, all the latest versions of the other major browsers (Chrome, Firefox, Safari, and Opera) will run on Windows XP or later.
• Install Chrome Frame; it’s easy to install and it makes IE function like Google Chrome.

With those two options there is no excuse for the high numbers of users still on older versions of Internet Explorer. Theoretically, everyone who is not on a locked-down system can upgrade to a non-IE browser or install Chrome Frame. This would likely bring the usage shares for older browsers down to a bare minimum, and would allow developers to bring even more of the latest technologies into common use.

A Note on Tracking IE with Chrome Frame

Some of the users still on old versions of Internet Explorer could have Chrome Frame installed, but in the browser usage stats referred to earlier in this post, those are still counted as Internet Explorer. It would be good to see Chrome Frame stats reflected in those applications.

Google Analytics, however, does include “IE with Chrome Frame” as a separate browser, and developers can check out the Chrome Frame developer documentation for info on how to detect Chrome Frame usage.

What Else Can We Do To Help?

If you have any friends or colleagues using an older version of Internet Explorer (or any old browser), help them upgrade to the latest version of Chrome, Firefox, Safari, or Opera. You might even want to show them a CSS3-rich or HTML5-rich website in a modern browser and compare it to IE8.

In other words, prove to them that their browser is an out-of-date, unstable, slow piece of software. You might even have a little fun trying to show them why non-IE browsers are better.

Display a Message to Users on Old Browsers

Another thing you can do is display a message to users if they’re visiting your website in an older browser like IE8. Don’t assume this is too intrusive. A couple of years ago, YouTube started phasing out support for many older browsers. The message shown below is now displayed to users visiting the website with IE6:

You could display a subtle yet noticeable message to encourage users to install Chrome Frame and make sure to include the necessary code that will enable Chrome Frame on pages that are being viewed with it. [However, also provide an option to close the message bar so that users who are stuck in a locked-down system (and have to use your website) can actually use it. —Editorial]

Tomorrow: A Message For Non-Developers

Most people reading this article are probably thinking “Yeah, that’s all fine and good, but you’re preaching to the choir, dude.” Many developers already know a lot of this stuff. And we also know that developers and designers are not the ones using older browsers like IE8 for everyday browsing. In fact, you’d be hard-pressed to find a Web developer that uses IE9.

That’s why tomorrow Smashing Magazine will be publishing a special post (the article is published now) that will be targeted towards users who are not designers or developers, and who are not very tech savvy. We encourage everyone to share that article with as many people as possible so we can do everything we can to get the usage stats for old browsers as low as possible.

(jvb)

---

© Louis Lazaris for Smashing Magazine, 2012.

Web design has evolved dramatically in recent years. Better browser support and innovative design techniques are changing the way we design websites. In fact, we’ve become quite versed in producing beautiful and performant user experiences. However, this doesn’t hold true for most websites out there, now does it?

How often do you stumble on slow, clunky websites? Websites where text is embedded in images and interfaces are unusable and messy — not to mention that the code is hacky and unmaintainable? Websites that are completely unusable on mobile devices and that are cumbersome to navigate?

We all deserve better than that. With this poster contest, we’d like to raise awareness of the beautiful and accessible Web:

Yes, it’s about time to redesign the Web and, hence, to redesign the world. We can make the Web a better place. But to do that, we need your help.

Where Do We Begin?

As professionals, we do our best to employ the best coding and design practices. We encourage our friends, colleagues and clients to advocate the user’s interests, and we follow recent developments in the industry. However, we probably have to do a bit more if we really want to make the Web a bit more usable. We have to remind ourselves, our colleagues and our clients of the problems that their websites have, and potential solutions to these problems. We have to make it clear that websites require a minor adjustment or a major redesign.

All of the little tasks listed below would take just a couple of minutes each day, but if we use them consistently and stay persistent, our voices eventually will be heard.

Here is what each one of us can do:

• Create a critique email template that you can use to notify website owners about issues with their website. Then, whenever you come across a poorly designed website, just paste the template into an email and send it to the website owner. Also, if you have a minute to spare, tweet the owner directly using the hashtag #redesigntheweb to raise awareness among your friends and colleagues.
  

  Subject: Your website is very difficult to use!

  Dear [--Website Owner--],

  I just stumbled on your website [--URL--] and found it very difficult to use. I wasn’t able to [-- perform a certain task / find what I was looking for --], although I am confident that your website does have this information. I would love to use your website, and I am sure you’ve put a lot of time and thought into it, but unfortunately it was more frustrating than helpful. For me, a website’s information and features must be, above all, accessible and useful. It they aren’t, then the website doesn’t serve any real purpose.

  Please consider redesigning the website and improving its user experience so that I can visit it again. Otherwise, I’ll have to keep seeking alternatives.

  Thank you for your time, and I hope to stumble on your (redesigned) website in the future!

  Sincerely yours,
  . . . . . . . . . . . . . .

• Whenever you see a bug or dark UX pattern on a website, report the issues via the website’s contact form. Explain the issue and suggest solutions for solving the problem if you can.
• Whenever you stumble upon a truly poor customer service, drop an email to the website owners explaining that you’ll seek an alternative service provider because your experience has been unacceptable. Be concrete in your criticism.
• Upgrade the browser of your friend, colleague, coworker or relative to the latest version.
• Propose solutions. Most owners don’t know that their website is inaccessible or slow, so help them help their users. Point them to useful templates and resources that will help them solve their problem.
• Whenever you see a useful or clever design solution, send a short email to the owners applauding them for their effort and attention to detail.
• If you are a designer or developer, join the Move the Web Forward campaign and help browser makers and open-source projects do just that. And, of course, recommend only best practices to students and newcomers to the industry.

Or you could also join this contest and create a poster to spread the message!

Join The Poster Design Contest!

We challenge you to design a beautiful, thought-provoking and inspiring A4/A3-sized poster and send it over to us. The poster should encourage everyone to create fast, user-friendly and accessible websites; websites that deliver value and are a pleasure to use. We will then select the most interesting designs, release them for free on Smashing Magazine, and invite everyone to republish them, print them out, post them on walls and send us photos of the posters from across the globe.

Prizes To Win

As always, we have valuable prizes for the best entries. The winners of the contest will be determined by Smashing Magazine’s editorial team. Here are the prizes:

• Letterpress Prints
  If you love letterpress posters like we do, you can select two of them from Jessica Hische’s collection or Wilkintie collection and we’ll deliver them for you. Alternatively, you can pick the ILoveTypography’s limited edition “A World Without Type” type poster.

  

  

  

• 52 Aces Card Deck
  A limited edition poker deck consisting of 52 extremely different cards, each of them individually designed by an international designer or illustrator in their distinct style.

  

  

  

• Wacom Inkling Drawing Pen
  This pen records your sketches as you draw. Simply transfer the files to your computer and continue working on the sketches digitally. It’s a tool that every modern designer should have.

  

• Bose QuietComfort 15 Acoustic Noise Cancelling Headphones
  According to various tests, the Bose QuietComfort 15s currently offer the best quality sound and silencing capabilities in a pair of noise-canceling headphones. If you want to focus on your work and do not get distracted by subway or cars driving nearby, that’s the headphones you probably need.

  

How Do I Join the Contest?

To participate in the poster contest, please follow the rules listed below. Please note that we will not consider designs that don’t meet these guidelines.

1. Come up with an original, beautiful and unique design. It could be an illustration, collage, photographic piece, typographic design — anything! Please make sure the design looks great when printed out, both in color and black and white.
2. The design should be well formatted for printing: in A4 and A3 sizes, and with a 5-mm print margin.
3. The design should include a small Smashing Magazine’s logo. You may also include your own logo. Please make sure both logos are readable yet unobtrusive.
4. Pack up your source files, preferably in a layered PSD, AI, EPS or INDD file, in a ZIP-archive, e.g. [your-name]-[submission's-title].zip would be great.
5. Submit your poster design by the 23rd of July 2012 to the email address submissions[.at.]smashingmagazine.com, with the subject line Redesign the Web Contest.

Please also give credit where credit is due. Make sure to respect the copyright of designers whose images and words you use in your design. And feel free to submit multiple entries; however, each entry should be unique and distinguishable.

In the future, we’d love to print the best designs in a series of t-shirts (only with your permission, of course), so bear this mind when designing your work. We will feature the selected posters a week after the submission deadline. Feel free to include a link to your portfolio in your submission email; we’d love to link to it in the release post!

Redesign the Web: Inspiration

But what might such a poster look like? Well, we asked five well-respected designers to interpret the “Redesign the Web, Redesign the Worldâ€� theme with their own ideas, creativity and style. The results are striking and inspiring, and they prove once again that cultural diversity turns every task and problem into a unique experience. These are only few interpretations of the theme — there are many more out there!

Nick La interprets the Web as an earth-like eco-system. The Web is situated in an abstract, futuristic environment, with colors and elements that convey an almost mystical atmosphere. The interpretation has a visionary quality to it and shows a touch of Jules Verne. Have you noticed how Nick managed to have both dinosaurs and tweets in one artwork?

by Nick La

Larissa Meek’s first poster concept is strongly geometric and bursts with color. “I wanted to capture the essence of what a more beautiful world would feel like based on the statement ‘Redesign the Web, Redesign the World,’� Larissa says. The result sure catches the eye.

by Larissa Meek

Larissa Meek’s second concept shows another interesting approach, visualizing the various elements that the Web currently consists of. The poster captures techniques such as CSS and HTML, workflow elements such as storytelling and also the daily realities of the professional designer such as deadlines, coffee breaks and ideation. All elements are interconnected in a clever composition using just two main colors: red and orange.

by Larissa Meek

Simon C. Page is known for his abstract geometric styles. His poster design is made up of a variety of shapes and structures that are fundamental to the Web — the world being one of them.

by Simon C. Page

Brazilian designer Ricardo Gimenes’ first concept relies on Smashing Magazine’s familiar cartoon style and introduces what might be considered a <redesign> tag.

by Ricardo Gimenes

Veerle Pieters’ cover design for the Smashing Book 3 reflects the various elements that a redesign has to balance and the various building blocks of Web. Read more about Veerle’s ideas behind the design and the process. If you would like to buy a print of the poster, please visit our Smashing Shop.

Smashing Book #3 and #3â…“ cover designs by Veerle Pieters

It’s Your Turn To “Redesign the World�!

We are excited to see what you are capable of, and we sincerely believe we can all shape the future of the Web together. The poster contest is just a humble attempt to change the way things are, and it will hopefully trigger your creativity and encourage you and others to reinterpret the Web and the world through a new lens.

Good luck, everyone! We are looking forward to receiving many beautiful entries!

Yours truly,
The Smashing Team

“Now is the accepted time, not tomorrow, not some more convenient season. It is today that our best work can be done and not some future day or future year. It is today that we fit ourselves for the greater usefulness of tomorrow. Today is the seed time, now are the hours of work, and tomorrow comes the harvest and the playtime.â€� — W. E. B. DuBois

---

© Smashing Editorial for Smashing Magazine, 2012.

Despite a great deal of mobile innovation, many creators of financial apps still copy their interface patterns from the desktop Web, even though these patterns are not as well suited to the mobile space. Small screens, custom controls, divided attention and fat fingers demand different thinking when designing for mobile.

I previously covered mobile wallet UX considerations in my article “Ultimate Guide to Designing NFC Mobile Apps You Won’t be Ashamed Of.� In this article, we will look specifically at simple mobile transfers of funds from checking to savings accounts, taking what works on the Web and converting it into authentically mobile flows using simple, effective design patterns. Similar analyses and design strategies can be applied to many other areas that involve complex forms, such as mobile e-commerce checkout and social network registration.

We will not name any companies in this article. That is deliberate. If you are looking for company bashing, you won’t find it here. But if you want to know how to make mobile banking work, read on.

Let’s begin with the basic building block: selecting an account. It can be accomplished in two primary ways: via a “picker� (called “spinner� in Android) and via a dedicated selection page (also called “table view�).

Picker/Spinner

For system interactions, many app and mobile website designers start by looking at the desktop Web interface pattern: a form with drop-down menus. Here is a common pattern for me-to-me transfers (i.e. transfers between two of your own accounts, such as checking and savings):

Typical me-to-me transfer via Web form.

The drop-down menu works reasonably well on the desktop Web, assuming the customer has between 1 and about 20 or 30 accounts. Each account can be listed in the drop-down menu by its full name, along with the account balance:

Selecting an account via the Web form’s select control.

How does this translate to mobile? Not very well. Blindly copying the desktop Web is a knee-jerk reaction, and it turns out that it’s mostly unsuccessful, resulting in a subpar experience. Here is why. Instead of the 20 or 30 selections that can be displayed in the drop-down menu, the iPhone’s standard picker control shows only 3 full and 2 partial choices:

Selecting an account via iOS’ picker control.

In Android 4.0 (the latest public Android version, named Ice Cream Sandwich), the situation is slightly better. Instead of the picker, the Android OS uses the spinner overlay, which shows 8 options. Unfortunately, the formatting options are quite limited, and the text area in the overlay is about 20% narrower than the main screen because the spinner is not using the full width of the device. This leads to confusing double and triple wrapping of text and numbers:

Selecting an account via Android’s spinner control.

Interestingly, some online banks use this pattern to display a list of accounts. However, by necessity (and to avoid the confusion of wrapping and truncation on older and smaller low-end devices), they use short codes for account names, such as CHK, SAV and CC1. These abbreviations work reasonably well for text banking, where the short-and-sweet mental model (“C U L8R�) reigns supreme. However, code abbreviations are far from the slick world-class UI elements that consumers have come to expect from their smartphones. Rather, they smack of “dim phones,� BlackBerrys, DOS and enterprise software. Having to remember codes to do mobile banking is a far cry from the experience of playing Angry Birds or shopping on Amazon or Gilt. To create a better experience on mobile, we need another design pattern: a dedicated selection page.

Dedicated Selection Page

A slicker and more usable mobile design pattern for listing accounts than pickers and spinners would be a dedicated selection page (also called “table view�) in which 10 or more account options could be listed comfortably. As Apple’s iOS developer guidelines state, “Consider using a table view, instead of a picker, if you need to display a very large number of values. This is because the greater height of a table view makes scrolling faster.�

This is how it looks wireframed using the agile, lightweight, sticky-note methodology (see the “References� at the end of this article):

Selecting an account via a dedicated selection page (wireframe).

The advantages of using a dedicated selection page over a picker or spinner include the following:

• Any font and branding you like;
• A platform-independent experience;
• Use the entire width of the page;
• Text wraps as needed, so multiple device profiles can use the page comfortably;
• Display 10 or more options at a time, with comfortable scrolling.

The bottom line is that, with a dedicated selection page, you can easily display the account’s full name and balance.

How could this pattern be used with a form? One popular pattern is a form with dedicated selection pages. Unfortunately, this often creates very long flows.

Form With Dedicated Selection Pages

The idea behind this pattern is simple: copy the standard desktop Web form but use dedicated selection pages instead of pickers or spinners.

Using this mobile design pattern, our me-to-me transfer flow would look like this:

1. Blank form;
2. Dedicated page to select the “From� account;
3. Back to the form (with the “From� field now filled in);
4. Dedicated page to select the “To� account;
5. Back to the form (with both the “To� and “From� fields now filled in);
6. Fill in the amount, etc., and hit “Continue�;
7. Verification page.

Here is the flow wireframed using the agile lightweight sticky-note methodology:

Me-to-me transfer via a form with dedicated selection pages (wireframe).

While this pattern works, it makes the flow quite long: seven pages. Could it be shortened? Absolutely. One excellent mobile-first pattern is the dedicated wizard flow.

Dedicated Wizard Flow

This is an extreme adaptation of the desktop Web form. This pattern works extremely well for short forms because it dispenses with desktop forms entirely, using a dedicated page for each attribute of the form.

Using this pattern, our me-to-me transfer flow would look like this:

1. Dedicated page to select the “From� account;
2. Dedicated page to select the “To� account;
3. Dedicated page to enter the amount, with a numeric keyboard;
4. Verification page.

And here is the flow using the agile methodology:

Me-to-me transfer via a dedicated wizard flow (wireframe).

This pattern works very well for short forms, and it is a great example of Luke Wroblewski’s mobile-first design thinking. The entire flow is accomplished in only four steps. Note that a verification page (allowing the customer to review the entire transaction before tapping the final “Transfer� button) is recommended with this pattern. Note also the use of the breadcrumb pattern, which shows the customer which step of the workflow they are on and how many steps remain. The breadcrumb enhances this design pattern nicely.

Are we done? Should you create a dedicated wizard for every flow on your mobile banking website? Not so fast.

In mobile, nothing comes for free. That includes the dedicated wizard flow, which completely breaks down in longer forms. The basic idea is to have a dedicated page for each element of the form. But if the form has five or more elements, then the flow starts to get too long. Another issue is the inability of this pattern to distinguish between optional elements (such as “Memo�) and required elements (such as “Amount�). With this pattern, each element gets its own entry page with the appropriate keyboard and is likely to be treated as “required�. Even if the customer understands that they don’t need to enter anything, each element requires the customer to at least look at the page and click “Continue.�

So, is there another pattern for a page with five or more elements and many optional fields? I’m glad you asked. One of the most versatile yet underused patterns is the wizard flow with form. And as a bonus, this pattern dispenses with the need for a separate verification page.

Wizard Flow With Form

The idea here is very simple. Start with a dedicated page to select each account, and then show the rest of the fields in a form.

Using this pattern, our me-to-me flow would look like this:

1. Dedicated page to select the “From� account;
2. Dedicated page to select the “To� account;
3. Continue to the form (with both the “To� and “From� fields now filled in);
4. Fill in the amount, etc., and hit “Continue�.

Here is the wireframe using the agile methodology:

Me-to-me transfer via the wizard flow with form.

This mobile design pattern combines the best features of Web forms, such as the flexibility of having optional fields and multiple input fields, with the vastly improved usability of dedicated, mobile-optimized selection pages. Another boon is the option to dispense completely with the verification page, because the form page itself acts as an editable verification page. Of course, you could always append a separate verification page if you really must.

Editing is also much easier than with most other patterns. Instead of having to go through the entire flow again, the customer only has to edit the fields that need correction. For example, to edit the “Toâ€� account, the customer would tap the corresponding field in the form and be taken to the dedicated “Toâ€� account page, and then immediately back to the form, without having to go through the entire “From� account → “To� account → Amount flow again.

Mobile: Thinking Differently

As we’ve seen now, mobile design itself is usually not complicated. In fact, because people will be using your app with fat meaty pointers (commonly called “fingers�) in a stressful multitasking environment (commonly called “life�), a less complicated design is virtually guaranteed to perform better. However, designing for mobile is one of the most sophisticated exercises any of us is likely to encounter. Simply copying successful desktop patterns is usually the worst choice, yet it is the one many designers naturally gravitate to.

Designing for mobile requires thinking differently. Remember that in mobile, each form field requires at least an extra tap to bring up the keyboard, picker, dedicated page or other element to enter data. Instead of a vertical flow to guide the person to the next field, consider using a horizontal flow instead. Look for options and inputs to eliminate. Whenever possible, minimize the number of pages the person has to go through in order to complete the workflow; this will reduce input errors and increase customer satisfaction. Last but not least, make user testing the core of your mobile design process, and be sure to user test everything you design as early as possible.

References

• Rocket Surgery Made Easy, Steve Krug (New Riders: New York, 2010)
• “How to Make Agile Work for Your Mobile Design Project,â€� (registration required) Greg Nudelman, video from the Mobile Design Essentials Virtual Seminar, DesignCaffeine
• “Ultimate Guide to Designing NFC Mobile Apps You Won’t be Ashamed Of,â€� Greg Nudelman, DesignCaffeine
• “Mobile First,â€� Luke Wroblewski

(al) (da) (il)

---

© Greg Nudelman for Smashing Magazine, 2012.