Blogs

Thanks to Steve Jobs and Apple, developers have started to question if we should use flash at all on our websites. Currently you can use javascript to accomplish a lot of the same things and for more complex animations html5 is available. But currently html5 is still in very early stages which means although you can do a lot of neat things, html5 is still in testing phases and there may be many changes to come. Beyond that there are lots of designers who specialize in flash which has been a fairly standard format for years. Pretty much all browsers in the past have supported flash.

Enter the Iphone and Ipad Dilemma

Well Steve Jobs decided in order to push his own agenda of killing Flash he won't support it with the Iphone and Ipad devices. There is much debate on whether they have the right to do this. Some say it's their company and product and they can do what they want. This is true to an extent but the public isn't completely dumb either. He blames Adobe for this problem and says it's their fault for having a buggy and power hungry product. According to Apple Flash just can't run on the Iphone/Ipad. Well currently Android phones and many others can run Flash without many issues as described by Steve.

So what's the deal? Maybe Flash does drain your battery quickly and although this is a problem, shouldn't the user of the device have the choice to run their battery down? Well without adding too much more fire to the debate, where does this leave us?

Personally I have never advised clients to use flash. If you can accomplish a slideshow using javascript I always suggest that over flash. If you can have pop-ups, fade-ins, etc. Without flash it always makes sense to do it without it. Flash isn't as search engine friendly either. So overall it makes sense not to use flash when possible. But with all of this standing against flash people still have many 'flashy' (no pun intended) uses for it. Lots of ads using mini-animations use flash.

A way to degrade gracefully

So we see many problems with using flash but we would still like to use it and have ways to get around all of these problems that Steve Jobs has introduced to the equation. Well currently I don't know of many solutions other than trying to create an html5 solution. The good news is there is a plugin I recently ran across called smokescreen that appears to have a solution to this problem. Basically what this does is convert your flash swf into it's html5 alternative on the fly. So in other words if someone supports flash on their browser then they see the flash version, but if they don't then they can see the same animation in html5. This sounds great, but of course the bad news right now is that Smokescreen is currently in closed beta. So I guess we'll have to sit back and wait for this alternative to come to life. Once an alternative like this is released to the public we'll have a way to continue creating flash without having to worry about this debate and who can see our flash swf.

I still believe flash should be used sparingly to all the alternatives available, but unfortunately there still isn't a viable solution to all the great things flash can do. So we'll have to slowly ween ourselves off of it until the future catches up with the past.

Take a look at the current browser stats, as you can see IE6 is finally declining and Google Chrome has been on the rise:

Good news for anyone who finds the current web safe fonts limiting can now use the Google Font api to embed more fonts on your website. These also port back to ie6! There are many other solutions for using fonts, but these are very easy to use and they are hosted by Google keeping bandwidth down on your own website.

Along with this announcement Google has come out with their own html 5 video codec that is royalty free for all to use. It's great to see the web progressing in so many ways! Also the font in this post was brought to you by the Google Font api.

This blog post is brought to you by Google Wave. If you don't know what google wave is you can visit the website and request a free account or you can request an invite from us in the comments below. Please feel free to edit the wave below and respond to the poll. We are especially interested in how others are using goolge wave themselves and if they have found it effective in managing any of their project or business processes.

With Summer just around the corner so is Drupal Camp Colorado. The entire conference is still in the planning stages although the dates have been set to June 26th and 27th. The price to attend the conference should be very reasonable. Although the website is still in the works you can find it here: http://drupalcampcolorado.org and as soon as everything is set you should be able to sign up.

These conferences can get very technical in nature although there are always plans for introductory level talks. I'm hoping Vijay and I can do an introductory level class for anyone interested in Drupal but can't follow any of the technical jargon. I encourage anyone interested in Drupal and are in a position to attend this conference to come and check it out. I would love to talk with anyone interested in Drupal.

Even if you don't have time for the entire conference the price should be reasonable for just attending a few sessions. Keep an eye on the website to see the sessions and pricing info.

decimal152 have written a great blog post on the role of web CMS. In many organizations there is a desperate need for managing web content, and top level management has recognized this need. However, there is a misconception in organizations, one that rears its head up after the implementation of a CMS.

This article titled "The Incidental Publisher" illustrates the importance of having a content strategy.

25 User Experience Videos That Are Worth Your Time

Personas are an incredible tool in the design process. Be it, software or industrial design.

The challenge: draw a connection between Highways and Personas. What can we learn about the way civil engineers think about building highways, tunnels, and bridges in the context of designing better web sites?

"A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions, and even visual design." (Kim Goodwin, Cooper.com)

Next time you drive about take a look at the various types of roads and bridges. There are terms for some of these classifications: freeway, highways, county road, alley, street... I'm sure there are more. But, the point I'm getting at is that these words conjure different images. Each of these types of roads were designed around a different type of user, different Personas.

I live in Boulder, and drive to Denver often. The primary highway between the two cities is Highway 36. Any study would show that the average type of vehicle on this road is a five passenger car. Probably a Toyota. However I do not think the roads were built with these vehicles in mind only, even considering that these types of cars were the majority of traffic. Instead these roadway systems were designed around the archetype user.

So what do I mean by archetype user? In this case the roads have to accommodate vehicles like regional buses, large 18 wheeler interstate delivery trucks, and garbage trucks. So the highways are designed to allow ease of use for these types of vehicles. The width,grade, materials used, and so on are decided with the needs of these larger vehicles in mind. In designing roadways for the ease of use by these "archetype" vehicles, the overall system becomes easier to use for the average user. If a semi can maneuver the road, the average car can easily do it. But, it does not work reflexively. Can you imagine the headaches a semi-truck driver would have if she highways were designed like residential neighborhood streets?

Design for the archetype user and you'll make them very happy. Additionally, you'll make the average user happy most of the time. But if you design for the average user, you'll make them happy on average. But, you'll alienate your archetype user.

Download Code | View Source

I'm currently working on a website for the University of Colorado at Boulder (more details to come on this project) and I ran into a common problem amongst web developers, rounded corners. Sure you may think they look snazzy and coding them can't be that hard, which thanks to the new CSS 3 standards you would be correct on both accounts in a perfect world. Unfortunately we live in a world that uses Internet Explorer (IE). None of the current versions of IE support CSS 3 standards.

Let IE Suffer

I ran across an article explaining a great way to tackle this problem but unfortunately it didn't seem to work the way I had hoped. So I decided to do it the old school way in IE and use images for IE only. To accomplish this I used an IE only style sheet and placed the image replacement in there.

So to outline this you place a comment in your html head with your other style sheets like this:

<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ui/css/ie.css" />
<![endif]-->

Then in the body setup your div like this:

<div id="main">
<!--[if IE]>
<div id="main-tr"> <div id="main-bl"> <div id="main-br"> <![endif]-->
<p>Content here</p>
</div><!--[if IE]> </div></div></div> <![endif]--> 

You will notice that all of the extra divs that we have to create are surrounded by a conditional comment so they will only be read by IE. This code will be a bit bloated for IE but will take advantage of CSS 3 and will run much smoother for Firefox, Safari, and Chrome without the bloat. Here's the code for a style sheet that is seen by all browsers:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	/* Select all four corners for the possibility of 
	controling larger radius or only rounding certain corners */
-webkit-border-top-right-radius: 10px;    /* for Safari */
	-webkit-border-top-left-radius: 10px;    /* for Safari */
	-webkit-border-bottom-right-radius: 10px;    /* for Safari */
	-webkit-border-bottom-left-radius: 10px;    /* for Safari */
	
	-moz-border-radius-topright: 10px;       /* for Firefox */    
	-moz-border-radius-topleft: 10px;       /* for Firefox */
	-moz-border-radius-bottomright: 10px;       /* for Firefox */    
	-moz-border-radius-bottomleft: 10px;       /* for Firefox */	
}

This can be accomplished by two lines but I did it the previous way to show you how to select each corner one by one. Here's a two liner:

#main{
	background:#ddd;
	height:100px;
	width:960px;
	padding:10px;
	-webkit-border-radius: 10px;    /* for Safari */ 
	-moz-border-radius: 10px;       /* for Firefox */ 
}

Once you have the corners working with CSS3 you can open it up in firefox or safari and take a screenshot. Then open the screenshot in photoshop and grab each corner and save them individually. I named them each:

• main-tl.jpg
• main-tr.jpg
• main-bl.jpg
• main-br.jpg

Then place them in an images folder within the css folder. From there you can place the proper css inside the ie.css:

#main{
    background:#ddd url(images/main-tl.jpg) top left no-repeat;
}

#main-tr{
    background:url(images/main-tr.jpg) top right no-repeat;
}

#main-bl{
    background:url(images/main-bl.jpg) bottom left no-repeat;
}

#main-br{
    background:url(images/main-br.jpg) bottom right no-repeat;
    height:100px;
    width:960px;
}

This will work in all versions of ie including the well hated ie6, see my post on ie6 for further hate. So now you have a very sleek CSS3 solution for rounded corners that will also work in all versions of IE. This is definately bloated for IE but there's no way around using images or javascript in order to make your code happy in IE. The Pinnakl website currently uses javascript for the rounded corners which we may change some day soon. If someone has a different technique they use, please let us know in the comments.

It appears that ie6 will be dropped by Google in the beginning of March and Youtube will drop support shortly after. Many other sites have dropped support for ie6 like digg. Although these are all blows to the browser it probably will still be a few more years before it's finally insignificant enough to not worry about. Pinnakl will continue to support ie6 if it's important to our clients and their users. This browser ultimately costs our clients many more hours to support. We are very excited about html5 and css3 standards that are still in the works and of course are coding standards that ie6 will never support.

The slow and painful death of ie6 is celebrated by most developers looking forward to the future of the internet. Aside from the fact that ie6 is very difficult to get a website to look correctly it's also insecure which is what prompted Google to ultimately drop it. Google was recently hacked because of a bug in ie6, Microsoft issued a fix for this bug but this is just a band-aid on a very broken browser. What do you think? Give us your thoughts on the browser and if you still use it and if so why?

Update: Amazon, yet another large internet company, is also dropping support for ie6. Some may argue that they will lose money by not selling to this audience, but on the other hand they are also saving a lot of time, money, and energy by not supporting an old browser. These redirected resources can lead to a much better website for those of us with current browsers to enjoy.