Tuesday, April 7, 2009

Ubuntu and IE web design

I grew tired of constantly loading a VM JUST for testing to see how the website loaded in Internet Explorer. Maybe I should back up...


Why design in Ubuntu?
I absolutely love gedit (Text Editor) in Ubuntu. The syntax highlighting, line numbers, bracket highlighting (has saved me SO many times in debugging), automatic indentation, and PLUGINS! Brilliant. It is like everything I loved in Notepad2 and then some.
Couple gedit that with the after-mastered-becomes-quite-useful GIMP with the ever increasing usefulness (I find taking a quick screenshot with the "Print Screen" button and then using the excellent rectangle select tool in GIMP to figure out what is going on with my margins is a rather quick debugging tool) and you get a taste of why I like to use Ubuntu.
It doesn't stop there of course, I adore the ability to spread my work out over a few desktops and then switch quickly between them to access my different programs and folders.
Also, the ability to setup a web server on the local machine to test code before publishing it on a live server brings peace of mind, saves a lot of bandwidth, and saves time.
Realistically, I can do all of this within Windows in a fairly timely turnaround. There are solutions for doing it all in Windows, but I just prefer Ubuntu due to it being free, open source, and constantly improving.


Where Windows shines above Ubuntu
Then here is the wrinkle in my default workstation: Internet Explorer still holds the majority of the market for web browsers. I have never liked Internet Explorer and tell people all the time to use something abstracted from their OS (Opera, Firefox, Safari, Chrome, I DON'T CARE... just get something NOT so intricately involved in your OS)... but let's face it the average computer user doesn't know any better. They just use what is on the computer to begin with.
Leaving web designers chained to comply with IE's often-frustrating habit of CREATING exclusive solutions and not COMPLYING with W3C standards.
Obviously Microsoft is not too concerned about getting a version of Internet Explorer on linux machines. They don't care. They figure they have lost that market already and the "demand" for a true IE on linux is probably restricted to EXACTLY what I need it for: web design.


Solutions:
There are basically three solutions I have been told about and have found so far. I don't count signing out of Ubuntu and using a Windows OS as a "solution" to the problem. That is more of a "I give up" scenario... and I DON'T GIVE UP that easily.

1) Virtual Machine
I have been running a VirtualBox VM of Windows XP Pro on my laptop and my desktop for the last few months. @crgwbr of KomodoKomputer also suggested this when I brought up this issue again today. Wasn't really new to me... but I appreciate the willingness to help and always like when people are so helpful and friendly.
PROS: Completely accurate, fully compliant, as bug free as IE will get
CONS: Slowish startup time, resource hog (especially tough on my laptop)

2) IEs4Linux & WINE
I already had WINE installed, so following the installation guide here I have got a nice, quick solution. Not the LATEST version of IE, but modern enough to get a quick view of how the CSS and javascript is functioning and being shown on IE. Thank you @calebhailey for this recommendation. I may write a blog about how to set this up in Intrepid... since the instructions were slightly off on the installation guide.
PROS: Light on system resources, fast, shows javascript, decently accurate
CONS: Not the most recent Internet Explorer, required a bit of setup (instructions slightly out dated)

3) BrowserShots & IE NetRenderer
@techfun gave an interesting recommendation of BrowserShots (http://browsershots.org/). I will definitely give this a try as the RANGE of web browsers it gives you snapshots for is quite impressive. Compartively less impressive, but perhaps easier to use is IE NetRenderer (a plugin for Firefox). Although the comments on the Add-on webpage is slightly concerning. Not sure if I will bother to add it onto Firefox or not...
PROS: No setup
CONS: Just provides a "screenshot" of the webpage loaded in the different browsers, no javascript support, etc


Verdict
With all of these different options, I now have a broad "solution" to work with. For strictly HTML sites, I will probably use BrowserShots. This gives me the added bonus of sending the screenshots to clients as "samples" of how their site looks on different computers and browsers. For "during producton" designs I will use IEs4Linux on one of my desktops. That way I can test and load as I work and debug. During "final runthrough" and "beta testing" I will open up my VM and use the real IE to make sure it is how I have designed it to look and behave.