DEC
3

Unless you haven’t read much tech news lately, Google just released the Chromium OS. It’s beautiful and OpenSource, and it represents a huge shift in mentality. The reason we use our computers is to access the internet, so Google centered their operating system around the internet and the cloud. Their browser is one of the many supporting HTML5, a real movement to reduce the need of proprietary plug-in-based rich Internet applications, such as Adobe Flash and Microsoft Silverlight. HTML5 with some simple JavaScript will begin to power the front-ends of many of the web apps available on the Internet, and our experience will be as beautiful as the Flashy websites of today. Designers are already trying to push the limits of HTML5; for example see Mr Speaker’s HTML5 Canvas Particle System. HTML5 and these JavaScript techniques, mainly using jQuery, will make our web interfaces feel as rich as the desktop. They are already at our finger tips, available in the latest version of Firefox and Safari, and even in the iPhone.

OpenGL comes to HTML5 and Modern Browsers

OpenGL comes to HTML5 and Modern Browsers

What is holding back the reigns on HTML5? Well the Internet Explorer project isn’t bringing support until IE9, but rumors are that they plan to release another really useful tool, GPU acceleration. This would mean that web developers could take advantage of the GPU on a browsing device. So that means our web enabled interfaces get a direct link with the GPU, no OS really needed to host heavier graphics applications. If the iPhone were to support it, all of those shocking AR experiences would instantly be accessible on a range of compatible devices like our laptops or other devices with some version of WebGL. Well this stuff is already getting a lot of discussion and there are talks of ensuring future browsers include a binding of OpenGL ES to JavaScript, essentially WebGL. Google figured out their own way of doing it and released the O3D API for rich interactive 3D applications in the browsers, Safari and Firefox. More native implementations of WebGL are coming from Firefox and Safari for the desktop and mobile devices soon.

So that’s cool and all, but how much of a competition is this to Flash and SilverLight? Right now, about 90% of machines have Flash installed on them and I would guess that less than 50% of all users are using a browser with HTML5 capabilities. Further more, all of those users probably have Flash and possibly SilverLight installed as well. The competition will be with the 10% or more of browsers that do not have Flash. These are mostly users on mobile devices. iPhone and most mobile browsers do not support Flash. Okay let’s step back a bit and examine the real problem here for a second. The issue lies within the accessibility of content across screens and interaction devices. Content is simply not as easy to browse on some devices or screens as it is on others. That means small screens may not be able to display some collection of content as well as a large screen. Kind of obvious, but it is all about the content.

Lay down content and focus on content before all else. If you have no content, you have no purpose. The next most important layer is to consider the behavior. Ensure that full functionality is available across all devices. The user should be able to preform actions on a small display as easily as on a larger screen. Finally, take care of the visual display and style of your screen space. Chase down some device specific styles if you know you will have a large users browsing with a specific screen size. You can easily use jQuery to sniff out the browser and display an appropriate style. If you want to get crazy and provide some extra-ordinary graphics experience with animations and things, consider using the HTML5 Canvas and JavaScript techniques to make it happen. There is another detection device called Modernizr that can ensure your user has the goods. If you detect that the user is on a mobile device, you may consider using jQTouch which is beautiful, and I really want to find more time so I can play with it. I’ve heard people say it is better to assign separate stylesheets via scripts and conditional comments rather than use a reset style, but I think we just need to make it accessible. If they can use it, and it looks alright, great. Of course, we cannot run around trying every device and screen size on earth to preview our work, but we still want to have some confidence in the universal accessibility of our content. Maybe the next best thing is to use BrowserShots, and then just do a couple simple tests. Make sure your user can fully experience your website with no CSS and no JavaScript (and no Flash or anything, but that was obvious by this point right?).

The accessibility of different technologies used in the web space will continue to challenge all web developers for quite a few years to come. For now, we need to try being progressive and push our interfaces to new limits every time. Take the accessibility challenge with me and design for the future, but never ignore the past. Let’s start to use HTML5 and CSS3 with progressive JavaScript to enhance our sites, but hold on tight to those poor IE6 users. Look around the web and keep finding new ways to be cutting edge, but still support our poor IE friends.

Written For Nerds and For People of the Web

AUG
4

Let’s face it, IE 6 is old. Windows XP and the original iPod (and a whole bunch of other things) are younger than it. Sadly, there are still a ton of people out there using IE 6. I think about 25% or greater of all Internet Explorer users are using IE 6, and those people still need to be able to use your site. Not ensuring full functionality in IE 6 is a terrible idea and you should be ashamed of yourself for ignoring those people. Everyone knows IE 6 needs to die, but I can only pray that those people are just stuck browsing with the computer in their boring little cubicles working for some firm with a retarded IT department.

I use PNG-24s and even like to use them with rollovers because they look really sharp with their nice transparency and lossless quality. Damn you IE 6 for not supporting them. It is stupid not to use PNGs just because IE 6 doesn’t support them. That doesn’t mean you should be satisfied with that gray background behind your images in IE 6. Those users shouldn’t be stuck with such terrible looking graphics. I have 2 quick and basic strategies for making IE 6 users happier (and another trick to knock their heads straight).

1. Use jQuery pngFix

It is way too easy to use jquery.pngFix.js. You can use it with $(document) to try and fix everything or you can use other jQuery selectors to get the job done for only a couple elements. Don’t feel bad about using the document selector because this code won’t affect any normal web browsers. It will only slow down IE 6 a bit more, but do you really care? The browser is already painfully slow, and we can only assume the poor user is used to it by now. I know it is hard, but you can just stop arguing about efficiency for a second and save yourself some work by using that slow document selector.

2. Use Conditional Stylesheets

You should also probably use a ie6.css stylesheet via a conditional comment in your header like this:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

If you have rollover PNGs (like I do with my top navigation), you will notice that the pngFix doesn’t work for the regular rollover technique (using PNG sprites). For those things, I basically use one of two techniques. The first and easier one is to replace the background PNG image with a GIF or JPEG image. Yes, IE 6 supports GIF transparency (even as sprites! wow!) but every designer knows it is not even comparable to PNG-24′s transparency. On my main website, I just loaded up the PNG for my navigation in Photoshop and added a solid blue to the background. I saved it as a GIF and added 2 lines of CSS for those IE 6 users (yes we are making their experience slower by adding extra images). On this blog I used a different approach. I stripped the background image of the navigation and set the CSS to show the text (I also had to do it for my portfolio “Visit Site” buttons). You can apply any CSS styles you want, but make sure you load ie6.css after you load your other stylesheets so that it overwrites any previous rules. I stripped a bunch of graphic goodies from the blog and changed some basic styles just because I didn’t feel like spending the time to correct all the float/margin/padding issues with backgrounds and things. I think that is an acceptable approach as it provides a better experience for those users (no more out of place float objects!). Sadly it just doesn’t look as cool, and that’s a nightmare when you are a designer. Someone is missing out on our art.

Optional: Save Their Souls

Convince your user to upgrade, even if it means doing so by evil deceptive methods. Place some kind of a sweet upgrade suggestion to get all those IE 6 people into the 21st century. I happen to really like this nifty little warning that the guys over at Done21 cooked up (again using some jQuery power).

To Sum It Up

IE 6 is terrible, but making your website function in IE 6 is a necessary evil. Make it work, but inform your users they should know better than to come around your cool site with that clunker of a browser. We know IE 6 is cramping the web’s style right now. We also know supporting IE 6 sucks, but understand that to call your site accessible it is absolutely necessary to make sure it functions and looks acceptable in IE 6 until there is no one using it.

Written For Nerds and For People of the Web

JUL
13

First off, what the hell is Web 2.0? For many, Web 2.0 is about the syndication and collaboration. It is also about a migration to the web as a platform for application development. That meant migrating all of the data trapped on everyone’s desktops to the web, allowing your pictures to be shared with friends quickly and easily, or your documents to be saved in the cloud so that you and a bunch of friends could collaborate from the 5 or more different places you are during the day. In my opinion the best part about Web 2.0 was the stunning interfaces it presented. The developers realized they could create all the same eye candy as a desktop application on the web. Most significantly, Web 2.0 is about accessibility and scalability. It is about giving quick and easy access of software to as many people as possible, and on every platform that they may have, be it their computer, mobile device or braille screen. Oh yea, I said all people so that means physically handicapped people must enjoy the same beautiful experience in accessing their data through software as every man with two eyes, ears, and a pair of hands.

Web 2.0 Cloud. CC Markus Angermeier

Web 2.0 Cloud. CC Markus Angermeier

So, how have we done? This is a really tough question to answer, but I am gonna go with a “we’re workin’ on it.” I consider myself a power-user and I would not say I have want I think to be true accessibility to my information. So what exactly do I mean when I say truly accessible data? I mean data that is where you want it, when you want it. This goes further as I take it to include something tailored to me on my particular device. That means that if I want news while I am eating my breakfast, I better get news that includes topics that I like to read or watch on whatever the nearest suitable display is.

What is keeping us from having the news along with our friend’s latest updates (categorized by who you like more of course) next to my bowl of cereal? If you were eating breakfast on a Microsoft Surface, sure we could get you some interesting news over to the side of your bowl of cereal. Problem is that I really cannot afford a Surface of my own (damn economy). Right now, I get my news via my iPhone or my MacBook Pro and a bunch of RSS streams ripped apart by Google Reader. Sure it works, but it is not tailored to me. Sometimes my Facebook does a better job of keeping me in touch with the world. The next generation of web applications will do a better job sorting through this data overload I get from not just my Facebook and Twitter, but all of the RSS feeds that I read.

Fever. Now that is a company with a real Web 2.0 model. A one time fee gets your access to a set of code that allows you to harness the computing power you have to show you the hottest things on the web. The updates and actual installation of the software makes it a little less than ideal for the average Joe, but it remains to be a good example of a next generation web application. I think the next generation will be brining our computers processing powers to the web to enhance our personal experience. I wonder if the Google Chrome OS will actually do just that. Take any multi-player first person shooter game (like Call of Duty) as an example and you will see that each user renders their own experience based on a map of data that is shared through the web. The scary thing is that some of us are sick and scared of the web as a platform for our data. The privacy issues terrify people. I still find it shocking that all our medical records are on paper still. I still wonder how many diseases we could cure with proper sharing of medical information, maybe thats where the cure to cancer is hidden, in the data.

So what really is the next step for the web? Before the web takes another step forward, it is going to need to get the harnesses on its data. People need to always know what parts of their data are visible in the cloud. They really want to know what sensitive data is where, and who has access to a copy of it. The data they want to see should be delivered to them, tailored to fit the needs they are able to express to the machine. The next web is a beautiful looking web taylored to your needs, and it is coming with accessible design and development.

Written For People of the Web