Browser Undead: ways to survive ie6

Every web designer out there pretty much loathes Internet Explorer.  The latest iteration made some encouraging leaps forward in terms of accepting a universal standard or three.  The world has changed so much since the 90’s and we all know of and love our freedom of choice when it comes to browser selection.  Microsoft’s stubborn insistence on ignoring standards for years has resulted in double the workload for developers.  Testing sites across a variety of browsers and correcting the inevitable bugs takes a lot of time, which results in lower profits for designers like me.

So ie8 is ok; ie7 is tolerable…but ie6?  It’s a nightmare; the freak child of design indifference coupled with bizarre proprietary features. [aside: Who out there loves, or truly understands the idea behind ie's filters, anyway?]   I recently had a rude awakening when a client sent me a screen-grab of a site I had thoroughly tested in Firefox, Safari, Chrome, ie7, ie8 and ie8 compatibility mode.  I had the bizarre idea this year that with the release of ie8, we could lay the eight year old ie6 to rest.  I dropped support in my coding for the browser.  I also forgot to mention this in my contract.

Here’s the thing:  We’re designers (I’m making assumptions since you’re reading this).  We love the web…a lot.  In high school, they called us nerds and didn’t understand us at all.  Now, they call us “the web guy” and don’t understand us at all.  Other human beings think more about the rest of the world, rather than thinking about computers 24/7.  Amazing but true.  The other terrible truth is that around 15% of the population still uses the 6.  So while you and I downloaded the latest and greatest the day it came out, there are a lot of people out there (read that as “clients and their customers”) are firing up eight year old browsers to read their email.  So as i stared down the ugly screen-grab of my beautiful site ripped to shreds by the rotting zombie horde of ie6 browser bugs that I thought dead, I realized one thing:  I’m going to need some bigger guns.

As a designer I have two main problems with ie6: lack of support for .png images and CSS layouts that are inconsistent with all the other browsers on the planet.  In terms of understanding the bugs, I mentioned some good resources in this post. My favorite remains sitepoint.com.  Understanding bugs is not our purpose here, though.  Our purpose is finding guns…big guns.  For web developers software = guns, and I found some good stuff in my latest search.  The other good news?  I only use free stuff.

In terms of solving the positioning issue, Microsoft has created a slick tool called Super Preview that’s available for download here.  It lets you simultaneously compare a url in different versions of ie.  Thank you!  It’s stable and helps you see problems very quickly.  Half the problem is finding the bugs, and this tool does a pretty good job.  One issue I had is that it doesn’t seem to represent ie filters (specifically alpha) which is pretty crippling if you’re dealing with fixing .png’s.  Another piece of software that shows a lot of promise, and handles both the positioning and the .png issue,  is IE Tester, available for download here.  It’s currently an alpha release, and has the inherent instability related to alphas BUT it does a solid job, and has a lot of features that Super Preview lacks.  Make sure you run the program as an adminitrator (right-click > run as administrator) otherwise it’ll crash if it encounters Flash or a CSS filter (our main reason for using this rather than Super Preview).  Here’s hoping for a stable beta soon.  So now we see our bugs, and armed with sitepoint, we crush ‘em.  On to .png’s!

.Png image files are awesome for a lot of reasons.  One of their most awesome capabilities is the inclusion of alpha channels, which allow a varying degree of transparency.  As a designer, transparency is priceless.  It lets you make things shiny, or draw drop-shadows with ease.  You want this.  You need this.  ie6 says you can’t have it.  I say, thank you Angus Turnbull for writing a nice little script, aptly named the IE png fix.  His site and the instructions included in the download explain it well.  Another option that comes with a great explanation, is this entry on 24 Ways.

That should put your ie woes to rest in no time, which hopefully means you get some rest too.

There goes a couple months of my life…

My latest contract was allll consuming, and one of the first things to go was blogging time.  So sad.  The good news is, I’m launching the thing, I’m proud of it, and the client seems pleased as well.  You can’t ask for more than that.  There is that list of revisions they’ve requested though…I’ll get on to that after I’m done here.

The two biggest technologies employed by the project I’m wrapping up are Drupal and PHP…both of which I was relatively new at and both of which I now know much, much more.  Drupal’s been a real pleasure to work with, and I anticipate doing most of my work through it in the future.  Themeing was relatively simple and I added custom PHP code to it without too much trouble.

Anyway, I’ll do a post-mortem when the thing is actually up.

The really important tidbit of information is that Bethesda announced another expansion for Fallout 3.  Be excited.

Here’s the skinny.

Killing aliens…America’s other favorite sport.

Ok.  Back to code.  Nerd points etc.

From designer to developer: a logical leap

What goes on in my mind is comparable to stew. There is no recipe for stew, really. You just sort of throw a bunch of crap you think might work well together in a pot over medium heat and hope for the best. More often than not, the result is delicious (or maybe I’m just always hungry). One of the great strengths of stew is its improvisational nature: you can hit on unexpectedly great flavor combinations by combining “incompatible” elements. Unfortunately, the flip-side of this strength is that it’s incredibly hard to discern how you arrived at that amazing flavor, should you try to reproduce your legendarily tasty stew.

In terms of my brain, I like to pour in whatever interests me at the moment, let it simmer in there for awhile with everything else I’ve been thinking about for awhile…and then do something. It’s incredibly hard for me to separate all of the individual influences on an idea or experience, or obtain a “recipe” of any sort whatsoever. All I know is that I’m having quite a bit of fun at the moment, and my current direction is a culmination of years of disparate interests coming together.

It’s strange to me how we label ourselves in order to try and achieve some idea of an identity. For me, I’ve been wandering around as a “creative.” I’m not arrogant enough at the moment to call myself an artist, but I’m certainly artistic, have a keen interest in art (of all forms) and have occasional bouts of self-expression. This label has its origin in my high school experience of social and micro-cultural ostracism. I was an “art guy.” A select few fellow bizzar-o friends got it, and everyone else just knew me as the dude who drew pictures and produced the weekly school news program.

There’s an incredibly self-limiting stereotype that goes along with being a “creative.” It’s born out of a paradigm that came about in the era of corporate vertical organization and has been dead for years now. Ready for the lie I told myself for years? “I’m a creative. I’m a designer. I don’t do code.” This is a ludicrous statement that I subconsciously absorbed and believed until very recently. In truth, a designer (and especially a web designer) that “doesn’t do code” is akin to an architect who “doesn’t do floor plans.” The deeper I delve into code, the more I realize it’s a tool every bit as vital as Photoshop, and I regret not starting the journey sooner. If you desire to do any work online the bottom line is you must learn code.

For me, my quest to learn code began from a purely economic standpoint. There’s far less competition for jobs involving code, the jobs pay better, and much back-end functionality is similar enough that if you’re doing similar projects you can build on and improve existing work you’ve done in the past. Sold. I started adding developer sites and blogs to my reading alongside my ramblings on design blogs. I also took a trip to the book store and purchased some books (I still love margin notes too much to do everything online). To my unexpected delight, I found that creating code is actually incredibly creative! My brain loved it! The stew got tastier.

One of the most intimidating aspects of getting started with code is the sheer number of languages you can learn. As a designer, I already had a working knowledge of HTML and CSS, and I did a lot of work with WordPress and Joomla. Both of these technologies are open source (free) and driven by PHP, which is also open source. Therefore the next logical step for me was to learn PHP. This gives me the capability to create advanced applications for clients, such as custom e-commerce solutions, or Content Management Systems (CMS). The next language I plan to learn is Flex, which in an open source development environment for apps that run in Flash Player and AIR (desktop applications – ex. Tweet Deck). This would allow for the creation of gorgeous interactive interfaces and media presentation methods. Do you see the logical progression of creative capabilities by taking this path? Let me break it down:

• HTML : contains a page’s core content  (examples: every web page ever.  resources: W3 Schools )
• CSS: controls the presentation of that content (example: CSS zen Garden.   resources: site point)
• PHP: allows your pages to communicate with your web server and prepare HTML in a manner customized to individual users’ needs.  In other words, allows for interactivity.  (examples: Facebook, WordPress.  resources: php.net , Learn PHP 5)
• Flex: allows for the creation of dynamic and elegant interfaces etc.  (examples: Adobe Official Site.  resources: learn Flex in a week)

So there you are.  My path from designer to designer/developer was a kind of unintentional flow, a mash-up of  “conflicted” interests, and now makes for a very tasty stew.

New Web Site

My new web site is up! I’m still working out the IE kinks, so fire up the ‘Fox and take a look: zachalig.com.

Man, that was a late night, and I have an early meeting. Time for bed.

Converting DVD’s to uploadable files for free

The problem: A client hands you a DVD suitable for playing in any DVD player and  says “add the second segment to my website.”  You’re a web designer, not an editor, so how do you go about selecting a specific segment of that DVD, convert it to a suitable format, and upload it…without shelling out a grand for Final Cut?

The solution: MPEG Streamclip from Squared5.  Yes, the website and user interface are clunky – but this piece of software is a rare gem.

Streamclip relies on a certain codec (video compression technique) that does not ship with Quicktime Player.  You can either purchase the codec from Apple (boo) or download Quicktime Alternative from fileHippo.com for free (yay).  It’s critical that you download the correct version (1.81), which can be found here.  I’m fairly certain that if you are using OSX your only option is to buy the codec from Apple.  If you happen to own Final  Cut, you already have it.

So, you’ve downloaded Quicktime Alternative and MPEG Streamclip.  Let’s get started!

If you’re installing Quicktime Alternative, be sure to uninstall any other Quicktime software you have floating around on your machine (in XP: start>settings>control panel>add/remove programs).  Once the old Quicktime is gone, run the installer for Quicktime Alternative.

Now run the installer for MPEG Streamclip and launch the program.  Insert the DVD you want to rip from into the drive and select File>Open DVD.  And…presto!  There’s your DVD above a friendly Quicktime interface.  So, press play or drag the playhead around to where you want your clip to start.  Choose Edit>Select In (or press “i”).  Now scrub to where you’re ending your clip and choose Edit>Select Out (or press “o”).  Now  choose File>Export [insert format of choice here].  Select your export options as you see fit and choose a place to save your new file.

You’re done!  And you spent no money!  Now upload that sucker to YouTube and embed away!

Tutorials and Free Stuff!

I was poking around online while procrastinating on some designs tonight and I found these free social networking icons from Tutorial9.  I thought they were very yummy.

Also, they have a nice tutorial on reflections that can be found here.  Thanks crew!

OSS mainstays: Non-profit IT pt.1

At Athens Area Habitat, I can vouch that the money we receive is used very ethically.  When people donate their hard-earned money, we work over-time to make sure we build as many homes as possible with it.   Every internal and promotional project with a “your budget is zero dollars” mentality.  We are, however, a full-on business with extensive IT needs and a professional brand to maintain.  Nobody but me at the office has anything beyond basic computer skills SO it falls to me to figure out how to accomplish enterprise level operations with basically no money whatsoever.  It was the need to get a whole lot done for very little money that initially spurred my investigation of open source software.  The amazing thing that I discovered was that the open source solutions available were often competitive, if not better than their full-price counterparts.

As a quick guide, here are the programs I use on a daily basis to get everything done that I need to get done.  They are all completely free and come highly recommended.

Graphics:

GIMP: substitute for Photoshop.  Will do absolutely everything you require and expect from a graphics editor.

Inkscape:  This program is an exemplary vector based drawing program.  I prefer it head and shoullders above illustrator.

Scribus: Solid page layout software.

Open Office:  You’re screwed, Microsoft.  This suite sponsored by Sun is the posterchild of open source success.

Ubuntu:  A free OS.  Use this for a few weeks and you’ll understand what computing is really about.  Free yourself from the corporate structure already.  Anyone who gives a dime to Apple or Microsoft is the victim of a scam.

Those are my staples.  To be fair, there are some gaps when it come to OSS.  There’s no real alternative to Flash, Dreamweaver, or Final Cut as far as I’m aware.  If anyone has a good suggestion, I’m open to it.

Two amazing tools…

I just finished putting together the initial design/framework for Athens Area Habitat’s new web site using Joomla and I found it to be fairly pain free.  If you need to get a fairly complex, flexible site up fast this is recommended.  I didn’t have to code a single line of PHP, so mission accomplished!  It’s available at Joomla’s site, and can be installed very easily via Fantastico on Blue Host’s servers.

Also, thanks to a tweet from IdaApps, I learned about Ning this morning.  I wanted to set up a Social Network for Athens Area Habitat’s volunteers and supporters but thought it would be impossible.  The Ning site took about 15 minutes to set up.  No joke.  This is a great resource.  Check out the Habitat Community!

Cloud Based Sumo Paint

No freakin’ way.  Stranded on a desert Starbucks without your trusted copy of Gimp or Photoshop?  Try Sumo Paint, an online PS clone that’s pretty elegant and sure to grow in funtionality as time goes by.  This, along with cPanel (which I use through bluehost)  means I can take care of pretty much every aspect of creating a web page with nothing but an active connection and a copy of Firefox.

Web 2.0 indeed.

Welcome to 2009, by the way.

Round Three: openSUSE vs. eMac

So Fedora on an eMac is a bust due to a conflict with ATI Raedon video cards.  I could spend another week hacking my way into the elegant graphical install, but who wants that?

Apparently, someone  got openSUSE running on the eMac right off the bat, so I’m downloading it now.  I’ll let you know. Free for a reason,   right?

I swear, try to do anything outside the box on a Mac and you have your work cut out for you.  Ubuntu is running flawlessly on my workstation at the office, first try.  Incidentally, the machine I’m using is a Dell from about two years ago that you can pick up on eBay for about $140 now.  It’s a solid platform and with some more memory and a video card upgrade I could be screaming through HD edits.  Oh, and it drives two monitors right out of the box.  Tempting…

If I figure out how to translate my entire workflow to open source software I will be saving thousands a year, which will translate directly into profit.