2 weeks ago, I had a very important meeting at my day job where a number of us gathered in a room, ate large quanities of pizza and watched the 1983 smash hit, WarGames.  By the end of the movie, I came away with 2 key pieces of knowledge:

1. Ally Sheady looked pretty damn cute in 1983
2. I should… no I must build a website to pay homage to this movie, and to give me an opportunity to work on my ActionScript skills & boost my SEO (or so that’s how I justified it)

That night I purchased the domain, http://www.globalthermonuclearwar.net to which my wife asked, how many domains do we own now?  A lot… we own a lot.

Once I put together a baseline for what I wanted on the site, I found an outstanding tutorial on how to build a Tic-Tac-Toe game using ActionScript.  Perfect!

15-20ish hours later, I built it and here it is.  Simple, all Flash, as true to the movie as I could get it with the time I allotted myself, and to avoid potential cease & desist letters, ad-free.

A few points about the site:

1. All the code validates strict (which can be a pain in the arse for Flash sites)
2. All iDevice users (of which I am one) are auto-redirected here via this handy little JavaScript
3. The sitemap.xml is registered with Bing, Google, & Yahoo so you can easily find it again in the future if you happen to forget the URL, or your bookmarks get blown away, or someone changes your home pages to something else.
4. It’s not perfect, but it’s fun.

Lastly, if you lived under a rock in 1983 or go deaf anytime there is a conversation about 1980′s pop-culture, and are therefore unaware of this movie, or if you somehow forgot it’s awesomeness, check out the YouTube trailer below.

Gregg

Of course I realize that I geek out on this stuff way more than most.  But, between RWD & my day job as an IT Applications Manager, I spend an enormous amount of time in various browsers.  As more and more enterprise & personal applications are added to the web, our time spent there will obviously continue to increase.  Browser functionality and the User Experience will continue to evolve and there are likely features that don’t yet exist today that 5 years from now we won’t fathom living without… think tabbed browsers.  The browser makers (Mozilla, Opera, MSoft, Apple & Google) are in an all out war & like everything else, the competition brings big change & benefits to you and me.

So, once we launched the site, it quickly became apparent that we needed to find a better solution for displaying images and we quickly landed on a Flickr integration.  Now, if you Google ‘Flickr Integration’ you will find countless ways to do this.  Most however require the ability to modify PHP (or other server side scripting) and that simply is a skill-set that I am not comfortable with yet (it’s on my list).  So my requirement was a Flickr integration that was front-end based and required no more than the modification of HTML, CSS, JavaScript, or ActionScript (Flash).

So, here is a run-down of a few that I liked and was able to quickly implement in a test environment for Matt…

4. Roy Tanck’s Widget.  What I like about this is the nice mouse control & the uniqueness of it.  Hover to the right and the widget spins right… hover to the left and it spins left.  The speed of the spin responds to your mouse as well.  I also like how you can set background color or transparency, and also change the size of the widget.  What I don’t like about it is it seems to be fairly limiting in the number of pictures you can display and in order for some to see a full size (or decent size) view of the picture, you must click the picture which rediects the user to Flickr.  What the client didn’t like about it… well, he best described this one as “The Whirling Dervish”.  Fair enough… so we moved on to #3.

3. Flickrshow.  I am cheating a little by putting this one in the list.  I didn’t actually put together a working example of this one for Matt, but it looks very promising, all though, not yet released.  I like the feature set, the simplicity of the controls, the ability to display an entire photostream or a set.  Since it’s not yet released I will be following this one closely and I am following the developers tweets to try and stay up to date on this one.

2. Flickr Slideshow Generator.  What I liked… the ability to display an entire photostream or a set, no whirling dervish, the ability to resize the gadget, I love how you get detailed info on the pic when you click it once and then click it twice to redirect to Flickr.  What I dislike… the controls are a bit wonky with the top and bottom hover states, the gadget had an odd transparency on it when I put it on Matt’s site even though I had no transparency set.

1. The winner (for now) – Pictobrowser. What I liked… mostly everything.  Controls and layout are very nice.  Ability to change size, color background, & a number of other parameters that can be adjusted.  What I don’t like… you can’t show an entire Photostream.  You must use a set or a group tag, which is a feature most of the others offer.  I did reach out to the developer in the hopes that feature might be added in a future release… we’ll see.

I came out of this exercise with two distinct affirmations.  1. I need to work on my PHP skills.  2. I should spend a little time and build my own Flash based Flickr integration with the controls, features and presentation I want.

Check out the final product on Matt’s media page http://www.mattcordier.com/media (note, a YouTube piece is coming soon to this page).

Last Friday (May 7th) I took the day off from work and did what I am sure a lot of you do, went to a day long technology conference.  Yes, I know how to party.  But not just any tech conference, this was Flash Camp… put on by the good people over at Universal Mind.

When I signed up for Flash Camp, I had no idea what to expect.  Mostly for some reason, I pictured a day long session of going through various tutorials in a classroom type setting.  This was not the case.  Rather, the entire day was listening to a series of speakers on a dizzying variety of topics.  In fact, I and every other person in attendance (60-ish) could have made it through the entire day without our precious Mac’s (& I think I saw a few PC’s too, this is Seattle).

Nerds

The event was held at Adobe’s Seattle office complex and the parts of the complex I saw were awesome… outstanding venue!  And that’s saying a lot… my day job is in the Starbucks HQ building and it’s pretty freakin’ sweet too.

From there, the speakers came, one after the next.  Some were good, some were not so good and if you are interested in the specifics, here is a list of speakers and topics.  A strange thing happened though… the speakers and topics that were the most interesting and engaging had mostly nothing to do with Flash at all.  In fact, the guys who talked about User Experience & Design were probably the best of the day.  Two stood out, Carl Smith & Christian Saylor.  The most valuable pieces of information I got out of this day long session came from these two guys and their approach and advice to design, website usability, and how to properly engage both your customers (as a designer / developer) and your site visitors.

I’ll end the post with this.  I am not sure if Flash Camp was actually worth my $150-ish entry fee + day of vacation time (I only get 5 weeks per year).  However, they did offer a little piece of compensation in return.  Door prizes.  There were 5 or 6 door prizes to be had.  The catch… you had to stay until the very last minute to be eligible to get one of these door prizes, and well, I happened to be one of the lucky winners.  And just what were the door prizes you ask… well, there was some cool stuff…

#1 – Adobe CS5 Master Collection (value = $2600)
#2 – Adobe Flash Builder (value = $700)

and some not so cool stuff…

#3 – #6 A Universal Mind Hat (value = the pain and misery of having come so close to winning one of the 1st two prizes).  Below is the outcome.

My New Hat

I am excited today to officially launch Matt’s newest website, www.mattcordier.com.  Matt and I worked many many hours over the past few months on this site and dare I say we are both quite pleased with the final result.  Over the coming weeks I will undoubtedly write blog posts about various particular techy functions on the site, but for now, for today, let’s just let the website do the talking.

It’s worth noting that while the website is ready for your eyes and ears, come back often as Matt and I still have plans and work ahead of us to add more audio, video, & other content… not to mention Matt’s blog posts on his site too.

http://mattcordier.com -or-  http://thechicagodrummer.com

Thanks Matt, It has been great working with you.

Gregg

Moo is a great little service.  They have a few different sizes of cards and your choice of matte finish or traditional paper finish.  What I like most about Moo is the ability to order a test batch of 10 cards and the ability to use your own designs (they have templates too).  So I did an initial test batch of cards and what I got, I didn’t like.  1st mistake, I went and set my design to 72dpi (dots per inch) as opposed to the Moo recommended 300dpi.  The result was a fuzzy font and image.  On top of that, once I received my initial test batch, I had completely changed direction on the design idea for my cards.  So back to the drawing board I went, downloaded their design layout guide for Photoshop (only need to do this if you are designing your cards), completed my new design, and resubmitted.  Second time around though, I felt much more confident about my overall design and went ahead and ordered a pack of 50.

So, the cards arrived yesterday and they look pretty nice!  They even came in a fancy little box.  Another thing I like about Moo is the ability to have up to 10 different card designs in a pack.

If I had to find somethings to complain about… Moo doesn’t take American Express, they don’t offer embossed fonts, no rounded edges on the cards, the 10 different designs in a pack only applies to one side of the card, and they don’t have any other options beyond their standard matte or paper finish (meaning you can’t specify the weight of the paper or opt for some fancy alternative material like wood, metal, or plastic… yes I have seen cards using these materials). But this is mostly me being nit picky… overall great cards, great service at a great price.

Here they are…

For any non-web developers that may be reading this, we (web dev’s) dedicate hours to the pursuit of building websites so that they look the same across IE, Chrome, Firefox, Safari, Opera, etc (lynx anyone?).  Take that to another level and understand that different versions of these browsers also render pages different.  A user viewing a web page in IE8 will likely have a vastly different experience in IE6… oh don’t get me started on IE6 and this of course doesn’t even cover the complete page redesigns for the various mobile devices out there.

However, until that magical day comes, there are some cool (free) tools, available at the ready.

1st up, Adobe’s Browser Lab: https://browserlab.adobe.com.  Now, I just started using this one and here is what I like so far about it:

1. Load Time. Once I enter the site and browser of my choice, the load time for the website is only a couple seconds.
2. Zoom. The ability to magnify up to 400% and get a great look at the pixels in a page on the browser of your choice.
3. Rulers. Get pixel measurements in the browser.
4. Side by side view. View 2 different browsers next to one another.
5. OS. View a browser in Mac’s OS X or Windows XP.
6. Delay. You can set the number of seconds to wait before taking the screen shot.  So you can wait for any Flash animation or scripting that is manipulating the page on load to complete.
7. Onion Skin. This allows you to take 2 browsers and lay them on top of one another so you can get a true representation of how the pages render differently.

OK, and if I had to find something to complain about:

1. OS. Need to expand the choices please.
2. Browser selection. Would like to see Opera included.
3. 1 Up View. Why does this left-align when onion skin doesn’t?  Maybe I’m missing a setting somewhere.

Another option out there is the Browser Shots org: http://browsershots.org/.  What I like:

1. Browser selection. It’s big.
2. Specifications. You can set screen size, turn JS off/on, and other great options.
3. Side by side view (kind of). Once you receive your results.  They all populate in handy little side by side icons that you can go between to your hearts content.

Complaints:

1. Browser selection. Umm, why isn’t IE6 an option when 4, 5, 7 and 8 are?
2. Speed. It’s slow.  And if you start to use this site frequently, or load the same site multiple times, you seem to get throttled.
3. View. It’s 3 clicks to view something in full size and no side by side, or onion skin comparison.

Now of course, before you deploy a new website you’ll need to actually test the functionality in all major browsers prior to launching, and neither of these tools will help you do that.  Personally, I do it the old fashioned way (only way I think), loading the website across multiple OS’s and multiple browsers and testing the website end t0 end.  But during the design and develop process, these 2 browser tools are a great resource.

Happy browsing

Gregg

When I am going through the design / development process, I often create some development directories for clients to view the progress on their new website and more or less watch it in construction.  With that said, this also opens up the potential to let a client see a site under construction that may not necessarily be optimized yet for all browsers, screen resolutions, OS’s, etc.  While my hosting service does give me decent insight as to these details when someone visits one of my sites, it’s nice to know up front what a client is using.

So, finding a tactful and easy way to direct your client to this website and have them email you the results with the handy built in email function could prove to be invaluable through the mock-up and build process.  If a client has their monitor set to 800×600 and they are running IE6… I wanna know as soon as possible!

Here’s the link http://supportdetails.com/ and here is a screen shot of the tool in action…

Found this site the other day and it’s pretty freakin’ sweet.  The gist is basically a huge database of user submitted color pallettes.  You can ‘favorite’ them or download them as well.  What I like is the ability to search on a hexidecimal color code and up pops a whole range of pallettes with your selected color.

All of this comes to us from the good people at Adobe.

Check it out at http://kuler.adobe.com/

Kuler Snapshot

Quick note on how I start all my CSS docs with a quick little reset to make pages render as universal as possible across all browsers.

1. IE, Firefox, Safari, Chrome etc. all treat margins and padding just a little different from one another… which leads to your pages rendering slightly different from browser to browser. This issue becomes quite apparent if you are using tables (for table data only of course). To reset all padding and margin set the value to zero on the universal selector as follows:

* {
padding: 0;
margin: 0;
}

2. Bullet’s for list’s (unordered in particular) appear different in each browser as well. A list of bullet items in IE will be bulleted with a solid circle, where another browser may show it as a triangle or perhaps a square. I like to set the decoration to none, and then add in my own bullet image if I must have one. To remove decoration from your Unordered Lists, set the following in your CSS:

ul { list-style:none;
}

3. For all my anchor tags (hyperlinks), I again like to set the decoration to none and then specify color, underline, etc. as part of my design.  In particular, I typically do not like the auto-standard for hyperlinks to be underlined or appear in blue, especially if they are in a top-level navigation.  At the top of my CSS, I set my anchor tags as follows:

a {text-decoration: none;
}

a:hover {text-decoration: none;
}

a:visited {text-decoration: none;
}

Then of course if I wanted all anchor tags to appear white on load, but black on hover, I would set the first two as follows:
a {text-decoration: none;
color:#FFFFFF;
}

a:hover {text-decoration: none;
color:#000000;
}

I would love to know more about what other people (you) use as generic CSS resets and if you typically write them in each CSS doc, or if you have a master CSS reset doc that you always point to.

Happy Cascading,

Gregg

1/19 Update… I posted this article on a couple of LinkedIn discussion boards and had no less that 50-ish comments discussing the merits and drawbacks to CSS resets.  While the opinions on this varied greatly, one of the most consistent comments were in regards to the Eric Meyer CSS Reset.  Eric Meyer is widely regarded as the CSS guru.  I have included a link to his site in my links section, or you can click here.