November 23rd, 2010

IE9 & Web Designers: What’s new, and what’s lacking in standards?

With its new browser (still in beta), Microsoft is making an aggressive, albeit incomplete, push toward supporting advanced web standards and web design.

Historically, Internet Explorer’s has lacked support for web standards, which has caused no lack of headaches for web designers wanting to create more powerful, dynamic and interactive websites. With IE8, Microsoft cracked open the door to web standards by supporting some, like CSS 2.1. That represented a major step forward for web designers to create more exciting and appealing websites. Now, IE9 is greeting tomorrow’s web by embracing today’s web standards.

But what does that mean? What can you do now that you couldn’t before? Read more to find out.

According to the Microsoft development team responsible for IE9:

“The Internet Explorer team focuses on providing rich, interoperable capabilities to Web developers. Developers have said they don’t want to have to rewrite and retest their Web sites again and again, and standards adoption in browsers helps to achieve this objective.” (1)

In other words, they’ve finally gotten on board with the fact that web standards make it easier for developers and designers to create better and more consistent web experiences. As a result, IE9 supports HTML5, which is backed by the World Wide Web (W3) Consortium (of which Microsoft is a member). HTML5 actually represents a broad swath of standards at varying stages of development. Support includes:

  • SVG Vector Graphics
  • HTML5 video and audio elements
  • CSS3
  • WOFF Web fonts

By supporting these advanced standards, web designers can start conceiving and implementing richer, more complex and more attractive sites.

Matching ambition with conservatism

Still, Microsoft won’t please everyone. The company has taken a conservative approach by only supporting those standards that are at a relatively advanced stage of development. So other desirable standards, like Web Workers (2), that may be early in development, or still in development flux, are not supported. IE9 takes some giant strides in a web standards direction, but it does not surpass or even catch up with other browsers in supporting cutting-edge standards.

Plus, IE9 does not support 100% of HTML5 and CSS3 functionality. For example, IE9 does not appear to support HTML5’s form elements (though this is subject to change, of course, pending the final release).

IE9 is opening the door to tomorrow’s web

Despite dramatic successes in the releases of Firefox, Chrome, Opera and other web browsers, Internet Explorer – in its various versions – still dominates.

In turn, Internet Explorer’s leading market share means that support in IE for a particular standard impacts how many web developers and designers start using that standard. For example, if a web developer doesn’t use CSS3 or HTML5, it’s likely because they know that a majority of web surfers use IE, and previously IE didn’t support them well. With IE9, web designers and developers alike will be able to implement much more exciting design elements into modern websites.

Not everyone will upgrade to IE9 – there are still IE6 users! – but with IE9 opening the doors to significant parts of HTML5 and CSS3 as well as other standards, the web can lurch forward. It will take time to feel the full effects, but that’s the keyword: it’s just a matter of time now.

REFERENCES
(1)   Internet Explorer 9 Platform Preview Fact Sheet, www.microsoft.com/presspass/events/mix/docs/IE9FS.doc
(2)   Web Workers, http://en.wikipedia.org/wiki/Web_Workers
(3)   Web Browser Usage Share September 2010, http://en.wikipedia.org/wiki/File:Web_browser_usage_share.svg
November 16th, 2010

HTML5: What’s the catch, and are you ready for it?

You’ve undoubtedly heard about the power and enhanced functionality of the new HTML5 web standard, but are you aware of the serious privacy concerns with which web designers, developers and users will have to contend?

HTML5 offers unparalleled sophistication for web technology, and with Microsoft’s upcoming Internet Explorer 9 supporting the HTML5 and CSS3 web standards, it is likely more websites will use it. Unfortunately, while HTML5 can be used to implement some truly eye-popping designs and functions, serious risks may be lurking behind-the-scenes.

What security problems could HTML5 create? Read more to find out.

Background

The web has evolved from static to increasingly active and interactive. Early websites were unchanging, collections of pages simply to be viewed. Then they became entities that could grow and change, as with blogs. Now, the web is a destination for people to interact (with sites like Facebook) and accomplish (as in online office suites and financial management sites).

HTML stands for Hyper Text Markup Language; it is the central web programming language used to create and implement websites of any stripe. The ability of HTML4 – the current predominant version – to support the increasing demand is limited, whereas HTML5 can enrich sites in a number of ways:

  • Significantly boosted functionality. As one example among many, with HTML5 Google Docs can enable simple drag-and-drop tools. (1)
  • Powerful visual and design features. To illustrate, Brad Neuberg demoed beautiful, browser-based, 3-D slides at the Future of Web Apps conference in London earlier this month. (2)
  • As an alternative to buggy, insecure and proprietary web technologies. HTML5 can replace most of the functionality currently enabled by Adobe Flash and Microsoft Silverlight.

The new web standard opens the door to power and polish previously reserved solely for desktop applications. Web designers and developers alike will have a plethora of exciting new tools to use.

Supercookies
Unfortunately, power – as always – is a double-edged sword. In the words of Pam Dixon, Executive Director of the World Privacy Forum, “HTML5 opens Pandora’s box of tracking in the Internet.” (3)

As if to prove this point, California hacker Samy Kamkar used HTML5 to create what he calls an “Evercookie,” which The New York Times dubbed a “Supercookie.” (4) Like current cookies, which store basic information for websites like user name and preferences, these supercookies comprehensively track a user’s web habits. Additionally, supercookies are:

  • Potent surveillance tools that can be employed by marketers and third-parties
  • Highly functional instruments that can gather an array of personal data about web usage
  • Extremely difficult to remove, as the data is stored in multiple locations on a person’s computer

Concerns Overblown?

It remains to be seen how HTML5 will affect the security landscape of the web. According to developers and representatives of the World Wide Web Consortium, they take privacy and security fears seriously and make a proactive effort to balance them with the speed and power afforded by HTML5. (5)

It should also be noted, privacy concerns are nothing new. Facebook is plagued by them daily. Most browsers come with inadvertent built-in vulnerabilities that must be patched continually. Plus, the current generation of web technology – like Flash – suffer from their share of security worries.

So, is the concern over HTML5 overblown? Share your thoughts in the comments.

REFERENCES
(1) Simon Mackie, “Why HTML5 Web Apps Are Going To Rock Your World,” http://gigaom.com/collaboration/why-html5-web-apps-are-going-to-rock-your-world/
(2) Brad Neuberg, “Internet Explorer 9 Platform Preview Fact Sheet,” http://blog.codinginparadise.org/2010/10/3d-slides-built-with-html5-css3-and-svg.html
(3) Tanzina Vega, “New Web Code Draws Concern Over Privacy Risks,” http://www.nytimes.com/2010/10/11/business/media/11privacy.html
(4)   Ibid.
(5)   Ibid.
October 27th, 2010

HOW TO: Test Browser Rendering For Free

With scores of web browsers in the wild, how can web designers and developers be sure their sites will work on them all?

You spend an enormous amount of energy and effort on designing and developing a beautiful, elegant website … only to have a web browser chew up the code and spit it back out. The key to preventing this awful scenario is testing: checking how your web code will render in different browsers so you can make appropriate corrections.

Sometimes the differences between web browsers are subtle, and sometimes enormous. And unfortunately, it’s not just about testing different web browsers – like Internet Explorer, Firefox, Chrome and Opera – but also testing different versions of the same browser – like Internet Explorer 9 beta, IE8, IE7, IE6 – that may still be in use.

Is it possible to perform this testing quickly, easy and for free? Yes! Read on to find out how.

Live testing.
Christopher Heng of TheSiteWizard.com has put together a wonderful compilation of tactics to run all different browsers in all different versions simultaneously. (1) His article is well worth reading in full; but in the meantime, here’s a quick rundown:

Windows Machines
Different versions of FireFox, Seamonkey and Netscape can coexist on the same machine. Install them into different directories, create a different profile for each and set up a shortcut for each that specifies the version. Installing different versions of Opera is even easier: just install them in different directories. Internet Explorer is more challenging; it only allows one version installation at a time. Heng recommends a couple of different approaches. One, use a virtual machine or emulator. Or two, set up a dual-boot system where your computer runs multiple operating systems simultaneously.

Mac Machines
In Heng’s words, “At this point in time, probably the only way to run the Mac version of Safari, Camino, Firefox, Opera, etc, is to actually own a Mac.” (2)

Linux Machines
While you can install Linux on your computer as a dual-boot system, probably the easiest way is simply to create a Live CD or DVD, and run some distribution of Linux (like Ubuntu) directly from CD. (3)

Online Testing
In some ways, there’s no substitute for live testing, but unfortunately live testing can be a time-consuming, labor-intensive process. As an alternative, numerous online services will compare different web browsers simultaneously for you.

  • Spoon Browser Sandbox
    Spoon is essentially an online virtualization service. With their no-install app, you can actually run different browsers. One nice point about the Spoon Browser Sandbox: you’re essentially doing live testing, not looking at generated screenshots like most other online services.
  • BrowserShots
    BrowserShots is one of the most popular platforms for testing browser rendering. They allow “almost any browser/OS, including some very rare combinations.” (4) The free version offers complete functionality, but paid users get priority access, which can slow the service down for free users.
  • NetRenderer
    One of the best known and most respected sites is NetRenderer. Its focus is a little more targeted: it tests IE compatibility specifically, and it’s designed to be ideal for Mac users. That said, they provide screenshots at a snappy pace – for free – with their service.

Many Other Ways
These tools represent just the tip of the iceberg. Have you tried any other services for testing websites in different browsers? Share them in the comments!