Archive for the ‘Web Standards’ Category

File Under: Browsers, HTML5, Web Standards

Microsoft Simplifies Internet Explorer Testing With ‘Modern.IE’

Image: Screenshot/Webmonkey.

Microsoft has launched a new site, Modern.IE, aimed at simplifying the sometimes arduous process of getting websites to work in older versions of the company’s Internet Explorer web browser. The new site also serves to promote web standards and help developers avoid mistakes like only supporting WebKit browsers, roughly the modern equivalent of the regrettable “works best in IE6″ websites of 2001.

Modern.IE consists of three main tools — a site scanner that will look at your code and detect potential problems for older versions of IE, a cross-browser testing tool (part of a partnership with BrowserStack) and a set of guidelines for building sites with web standards.

The most useful of the bunch is the first, the site scanner. Plug your URL into the scanner and it will come back with a list of possible compatibility problems, some unique to older versions of IE, some more general, like outdated JavaScript libraries. Like other tools of this sort — think Yahoo’s YSlow, but here the emphasis is cross-browser compatibility rather than speed — Modern.IE then offers suggestions for fixing the problem.

Or at least usually it does. In some cases it will apparently tell you to get in touch with Microsoft engineers instead for what Microsoft’s Ryan Gavin calls “security and privacy reasons.” It’s also worth noting that Modern.IE still suggests running your site through Compat Inspector, and of course, while Modern.IE is handy for catching larger issues it’s no substitute for actual cross-browser testing.

Microsoft has also included two suggestions that may irritate some developers — adding two snippets of Microsoft-specific code. The first is pretty innocuous, it’s just a bit of code to set an image so users can add your site to the new Windows 8 home screen with a “tile.” Yes, it’s Microsoft-specific code, but the Win 8 home screen images are no different than the Apple-specific apple-touch-icon code that’s probably on your site right now. The second suggestion is to add a bit of CSS to support Microsoft’s proposed MSPointers API. The MSPointers API actually looks quite useful, but suggesting developers use it now smacks of hypocrisy given that elsewhere on the site Microsoft suggests that developers stick to “stable standards.” The MSPointers API isn’t a standard at all, let alone stable.

The second major part of Modern.IE is Microsoft’s partnership with BrowserStack, a service that offers live, web-based browser testing through virtual machines. As part of the partnership you can use BrowserStack free for three months. After that BrowserStack’s regular pricing starts at $20/month for individuals.

Microsoft has also put together “back level versions of Windows and Internet Explorer” as virtual machine images so you can do your more thorough testing locally if you prefer. That means Windows XP, Windows Vista and Windows 7 operating systems with their companion browser versions IE6, 7, 8 and 9. At the moment there are only images available for Windows Server, but a Microsoft representative tells Webmonkey that VMs for Mac And Linux will be available later today.

The last part of Modern.IE is the “code with standards” section which offers an article on “20 tips for building modern sites while supporting old versions of IE.” Most of the advice is sound, though it does advocate for a conservative approach to web standards that’s not necessarily in keeping with the pace of the web.

That last aspect may put some developers off, though it’s worth noting that the Modern.IE site does not adhere to its own conservative approach. Instead the site does exactly what most savvy developers are already doing — using HTML5 and CSS 3, but including Modernizer to help make the site work in older versions of IE.

While the site is obviously geared specifically to toward developers that need to get their sites working in older versions of IE, most of the advice — particularly the emphasis on progressive enhancement — is sound advice for anyone building websites today.

File Under: Web Basics, Web Standards

New Community Project Brings Web Accessibility to the Masses

Tim Berners-Lee, W3C Director and inventor of the World Wide Web, once said that “the power of the Web is in its universality…. Access by everyone regardless of disability is an essential aspect.”

Sadly the universal accessibility of the web remains more of a goal than a reality — not because it can’t be done, the tools exist, but because developers often neglect it.

The Accessibility Project is a new effort to help “make web accessibility easier for front end developers to implement.”

The Accessibility Project is relatively new, but already has a ton of great resources — everything from tutorials on how to hide content but still make it accessible to screen readers, to a handy checklist you can use to make sure you’ve covered the accessibility basics before you launch.

There’s also a great collection of links to accessibility resources, tools and tutorials around the web.

The Accessibility Project is very much a community effort, with all of the source code and posts on the site hosted on GitHub. If you’d like to contribute, head on over and read through the contribution guidelines before you fork the project.

File Under: Browsers, HTML5, Web Standards

Future Firefox to Bring PDF, WebCam Streams to the Browser

W.T. Monkey loves WebRTC. Image: Screenshot

Firefox 18 is out the door, which means Mozilla has bumped up all the pre-release channels, showcasing features coming soon to a final release near you.

If you’d like to try out a pre-release version of Firefox, head on over to Mozilla’s channel download page and grab either the Beta or Aurora releases. (The former is a bit more stable, but both are pre-release software so proceed with caution.)

The Beta channel contains Firefox 19, which is six weeks away from release and features a few modest improvements, including a baked-in PDF viewer based on PDF.js. It may not mean the end of those annoying (and untrue) buttons that say “you need Adobe Acrobat to view this file,” but at least you don’t, well, need Acrobat just to view a PDF.

The Aurora channel has been bumped up to Firefox 20, which contains a far more interesting new feature — support for capturing local camera and microphone streams with the getUserMedia API.

Here’s how Mozilla describes getUserMedia:

[getUserMedia] is a new HTML5 DOM API that allows the browser to capture local camera and/or microphone streams directly, and not through third party plugins. This means JavaScript developers can now quickly and easily write code to access the user’s camera or microphones (with the user’s permission, of course) without having to install anything because the support is already inside the browser.

There’s a demo page you can try out over on Mozilla’s GitHub page.

The getUserMedia API is just the first of several components that make up WebRTC, a set of APIs which enable real-time, interactive, peer-to-peer audio/video calls and data sharing. Two other pieces of the WebRTC puzzle — PeerConnection and DataChannels — can be found in the Firefox Nightly channel, for those who really enjoy living on the edge (you’ll still need to enable them in about:config, set the media.peerconnection.enabled option to true).

Firefox’s six week release cycle means that — barring unforeseen problems — the PDF viewer will arrive in final form sometime in early March, with the getUserMedia tools coming in mid April.

Simplify Responsive Design by Embracing the Flexible Nature of the Web

Some flexible foundations are better than others. Image: McPig/Flickr

If you’re using pixels as part of your responsive designs you’re probably making your life harder than it needs to be.

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

Stick with percentages, ems or the newer rem units and your designs can scale simply by changing the body font size. Embracing the flexibility of the medium means you can adapt as well — no need to panic when a client wants to make the logo bigger at the last minute, you can scale the whole layout up (or down) with a few lines of code. For Walton’s design firm, Paravel, the flexible approach has already proved its worth in just this way:

This paid off a few weeks ago, when a client wanted to make significant changes to the layout for his site. Type, imagery, buttons, etc. needed to be smaller and overall width & spacing (margins / padding) needed to be reduced. Thankfully, this was as simple as adjusting the body font-size at wide views. Years ago, however, this could have set the project weeks beyond scoped timeline and budget.

As developer Brad Frost has said, “Get your content ready to go anywhere because it’s going to go everywhere.” Pixels may work today, but they make for a rigid site that might well break on new devices. As Walton concludes “the sites we’ve built to display on a desktop, smartphone, or a tablet today could be on a TV screen, coffee table display, or mega space yacht projection system tomorrow.” Start with a flexible foundation and your site should handle just about any hardware that tries to load it.

File Under: HTML5, Web Standards

HTML5 Inches Closer to the Finish Line

Image: Screenshot/Webmonkey.

The W3C has an early Christmas present for web developers: The standards body that oversees the lingua franca of the web has published the complete definition of the HTML5 specification.

HTML5 isn’t an official standard yet, but the move to what the W3C calls “Candidate Recommendation” (CR) status means that the spec is largely stable, features are frozen, and testing can begin. In other words, the W3C is on track to publish the final version of HTML5 by 2014.

While developers targeting modern web browsers are already using HTML5 and many of its accompanying APIs, the move to CR status is nevertheless important because it marks the beginning of the interoperability and testing phase. Testing helps ensure that HTML5 can be implemented compatibly across browsers, servers, authoring tools and the dozens, if not hundreds, of other potential HTML5 clients — think your television, your car, your refrigerator and beyond.

HTML5 will likely be the language of the fabled Internet of Things and the lengthy testing period — the W3C plans for testing to last through 2014 — is designed to make sure that everything in the web of the future plays nicely together.

To go along with HTML5′s progress, the W3C has also published the First Public Working Draft of HTML5′s successor — HTML5.1. Although the W3C has “modularized” much of HTML5 over the years, spinning off sections like Web Workers, WebSockets, Microdata and half a dozen others, which are all now separate specifications at the W3C, the group plans to continue with versioned releases as well.

At the moment there isn’t much to see in the HTML5.1 spec, but look for the HTML5.1 draft to grow as new ideas are proposed.

It’s worth noting that, while the CR publication is generally a good thing, there are still over 100 known bugs and not everyone is happy with the decision to move HTML5 forward. But moving forward it is. After the CR stage is finished, the next step for HTML5 will be “proposed recommendation” status. From there HTML5 will become a final standard — if all goes according to plan — in 2014.