petersena.com

Adobe Browser Lab:

Fast tool to see a screenshot of a webpage in many browsers. it has a nice side-by-side feature for seeing your sites next to one another in various browsers. I like this tool cause its faster then using a Virtual Machine but its not a feasible tool for testing things like rollovers and functionality. However as a “screenshot” snapshot tool its quite awesome.

Cost: Free

Link to Tool

Browser Cam:

This service lets you use Browsercam’s farm of virtual machines to quickly test your Websites and Web Applications inside a browser, email, or on a device. I haven’t tried this one yet but i’ve heard some pretty good reviews on it. I keep meaning to test the Free Trial and consider bringing this into our studio for 2010. They also are featuring a device capture system for Iphone, Android, Blackberry and Windows Mobile.

Cost: Plans starting at $39.95/month

Link to Tool

Browsrcamp:

I haven’t tested out the paid version but if the folks over at Browsrcamp wanted to offer me a trial i’d be happy to test them out. they offer all major Webkit and Gecko based browsers but being that it is a VNC server session there is no way (to my knowledge) to test the dreaded IE. Now if you are a PC user you can easily use Super Preview and Browsrcamp if you don’t have a mac. See for me I abandoned Windows after they stopped supporting XP and i realized how big of a piece of shit Windows Vista and 7 were. This is not me being an Apple fanboy or going for the Mac versus PC debate just a little rant.

Cost: Prices range from $3 to $99 based on the subscription but their one year subscription is only $99

Link to Tool

Cross Browser Testing:

This tool I especially enjoy due to the ability to actually login and test a site in addition to screenshots and seeing it. They offer VNC sessions and the ability to pick an operating system, the browser of choice and then experience it in the form of screenshots or an actual “live test”

Cost: plans ranging from 19.95 to 199.95 per month

Link to Tool

IPhony:

Looking for a down and dirty way to visualize a website inside of the Iphone? This Free tool is great for seeing how your webkit based website will look. Its a Mac only program and not a great way to test for anything other then sizing and aesthetics because its basically just calling Safari inside an iphone wrapper. Therefore if you goto a site using Flash or other non iPhone supported content you will see it rendered just how safari would render it as opposed to seeing the blue X.

Cost: FREE

Link to Tool

Litmus:

This hosted service lets you test your designs on all browsers and offers precise bug tracking so you can find out the incompatibilities of some things performed on the site. their Free version limits you to 50 tests/month and only offers support for MSIE7 and Firefox2 on the browsers and Outlook 2003 and Gmail for email.

They offer a series of very affordable plans ranging from around $39 for a 14-day pass all the way up to $199/month for a team unlimited subscription. I’ve used this and have had nice luck with it.

Cost: FREE and Paid programs ranging from $39 and up.

Link to Tool

Super Preview:

a Microsoft tool thats actually worth half a shit. This tool lets you visualize a site in various Internet Explorer versions.

Cost: FREE

Link to Tool

DIY Solutions:

Running Virtual Machines is a Do it yourself solution. This route you would install a program like VMWare or Windows Virtual PC and then you can install multiple copies of an operating system on a server or your local machine. In essence that is what most of the above services are doing. Some automate taking screenshots and some actually give you a virtual session using something like VNC or a browser based version of this and you can pay for “minutes” or “processing” time. Currently at my company we are using a combination of the above tools depending on the needs of the project.

I personally use VMWare fusion quite a bit on my mac when testing IE7 and IE8. I used to use it for all versions of internet explorer but recently dropped IE6 from the dreaded lineup of Microsoft Browsers we support. Now our solution for IE6 is to put a “blocker” script in place that throws up a jquery modal window telling the user to upgrade. I borrowed and modified this from our friends at CSS-Tricks

Found this Helpful?

I’m a pretty busy guy but when I discover a set of great tools that helped improve our productivity and effectiveness I like to share. I remember the days when I would try to ask google for help and it didn’t help me. So if you enjoyed reading this, have something to add please Comment and Share this.

Introducing SWF Address a lightweight codebase for Flash and Ajax. SWF Address is a helpful little tool we have used for making Flash Websites deep link.

Using this code will give you the ability to Bookmark a certain section of a flash website or give you the ability to send links via email or chat program.

Another helpful usage of this is its the start of making an SEO friendly website since the search engines can now see multiple URL’s for what once would appear as a one page flash website.

› Get it here

A nice little Lightweight Tooltip plugin for Jquery.

So you need some sexy tooltips on your website/app do you? Well take a look at this awesome lightweight tooltip plugin brought to you by Build It with Me

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin.
It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

by the way @drewwilson you ROCK!

Being plugged into the interactive space pretty heavily I’m constantly watching the websites and blogs that publish and talk about innovative technology and great creative. I’ve been a fan of Rob Ford’s FWA (Favourite Website Awards) for quite sometime and experienced a great deal of pleasure from watching and contributing to some of its winning websites that make its prestigious list.

Today was the first time in the history of the website where a website built in something other than flash made the cut of “Site of the Day“. I started to think about that and I figured I would share a bit more what that means for the Interactive Designers and Creative Strategists of today and tomorrow alike.

The Digital Landscape is changing (duh) and the Technology and ways that things are done are changing with it. As i’ve said for so long technology is only a tool or a vehicle. The minds using and creating it are the messengers.

With browsers getting better and the push towards standards being a voice that is finally being heard the ability to deliver content is only getting better. HTML5 and CSS3 are carving shape to a whole new world of possibilities for Web Developers and Designers alike. You no longer have to be a flash developer to animate a menu and you no longer have to write thousands of lines of code to drag and drop or do things that should have been effortless since day one.

This shift is also causing roles to change. Suddenly the generalist in the office who was once the unsung hero for having knowledge in many things now becomes the all-star. Being a master of one language or syntax isn’t good enough anymore.

Flash Developers are rushing to learn markup and css. Application Developers are rushing to learn jquery and front-end skills to further solidify their job security.

With Coding frameworks getting stronger, API development getting easier and deadlines getting shorter our jobs aren’t getting any less complex. In fact they are getting harder.

I was talking with a close friend of mine the other day who has been a Flash Developer since before there was ActionScript. We started discussing how critical it was that he continued to learn the newer ways of tackling interactive outside of the bounds of flash.

He asked me “Why is Flash Dying“.

My reply was simple “Flash isn’t dying the needs for using it are just changing“.

Flash has always been a staple for connecting together various technologies to offer a unified interactive experience. The penetration of people adopting the Flash Plug-in happened because flash was offering them a better internet. One filled with more interactivity and rich media content. The same thing will happen with HTML5 and advanced JavaScript frameworks like Jquery and Prototype.

Change is the only constant in life. So if your a programmer and your reading this get off your ass and don’t be afraid to break your comfort zone. You don’t have the luxury of hiding behind your one talent anymore because the world is full of a new breed of talent who are well versed in a handful of the things you may have avoided until now.

At my company we are really big on continued learning. We use tools like Lynda for video learning and read blogs and websites like A List Apart and Net-Tuts to stay abreast on things that might slip past us when we are working on client work on a day to day basis.

I’m really curious to see how my peers are viewing this shift.

[/rant]

I remembered the first time I watched Minority Report and couldn’t wait for the day when interfaces and hardware became available that would allow me to interact and control my digital life in such a dynamic way.

Original Scene from Minority Report (Movie)

Intel’s 3D Touch-Screen Display they exhibited at CES 2009

yeah so I need one of these right now along with a hardware guide so I can start programming for it. We have already figured out gestural navigations using webcams, wii remotes and other ways to control an interface through movements and we are ready to start to implement some of our kick ass drawings and ideas now. Especially with Adobe Alchemy that will let you use C/C++ code which is compiled into Actionscript 3. With the right hardware in place the possibilities are endless.

Like the Intel spokesperson said “We don’t make products we just make the technology to support them”

Ok well give me one and pair me up with one of your engineers for a day and I will pimp your hardware!