Archive

Archive for the ‘Browsers’ Category

Storytopia launched

April 5th, 2012

After sharing a dozen made up stories with my kids last night, we came up with the idea of storytopia. With graphical help from the amazing Noun Project, we had a working version 20 minutes later… just in time for bed.

  1. Create a story that includes aspects that include all of the squares on the screen (they are randomly chosen from 382 images).
  2. You may reposition the squares onscreen with your mouse (if that helps).
  3. Click the Reload Page button to create a new story.
  4. Try with more or fewer squares

Visit storytopia!

Browsers, Fun, Web Code

Schadenfreude and Internet Explorer 6

August 3rd, 2010

In a few weeks Internet Explorer 6 will be 9 years old, and with its popularity hovering around 17% I’ve noticed an interesting trend among Web developers that’s been growing over the past few years… a shadenfreude surrounding anything that mocks IE users, or diminishes their browsing experience. The Universal IE6 CSS file is a great example of this. It is a stylesheet intended to make a Website look bland and generic, but functional for IE6 users. Its a manifestation of the philosophy of “Design for better browsers, then design alternative solutions to handle IE6 bugs.” Another project, a Javascript library blurs the page intermittently for IE6 browsers, further to encourages this joy we experience from the pain of others who are:

  • naive enough to think that IE6 is an acceptable browser
  • shackled to a corporate IT policy that doesn’t want to retrain their in-house Windows XP experts
  • working under the umbrella of an accounting department that won’t pay to upgrade the 8-year-old IE6-only Web-based expense reporting system

I’ve heard developers relishing every opportunity to use CSS rounded corners, CSS dropshadows, and any other trick that they can dredge up from the When Can I Use Website just to stick another finger in the eye of Internet Explorer 6 (and occasionally IE7) users. The item I came across online that has me thinking about this trend this morning was the following on a Web site promoting a package of beautiful free HTML5 video player code (yellow arrow and box my own):

ie

The site is actually promoting code as being compatible with “Internet Explorer with Chrome Frame installed.” Chrome frame is a further Internet Explorer insult from Google, which is a package of the main functional part of the Google Chrome Web browser distributed as an ActiveX control (think plugin) for Internet Explorer. That’s like saying the Uhaul truck you are driving has air conditioning because the car its towing has air conditioning. This last thought, because of my own schadenfreude, unfortunately has me laughing out loud.

Browsers, Web Code

Using Tables Instead of Images for Emailed Logos

July 29th, 2010

I received an email today from Nike, and couldn’t work out why their logo was visible BEFORE I clicked “Accept Images”. I did a little poking around and someone over there is a genius. I’ve toyed with the idea of using an HTML table with cell background colors in place of simple images, but never actually implemented it in a commercial email. Nike pulled it off and it works like a charm. It took 11,034 characters to create, but that’s not really any more than a moderately sized JPEG. Here’s the HTML table image of the Nike logo:



I recommend poking around with Firebug to see the full glory of it. The outer div, and the <style> tag content is my own, to override the CSS style settings on this page.

For anyone who has absolutely what this is all about… Over half of all emails, when opened, do not display images by default. If you are a company, like Nike, and someone opens your email, you are forced into simply hoping that they will click a button or link labeled with something like “Display Images” in order for them to see the full glory of your emailed promotion, which may be a large photo of your new product, photos of sale items, or inspiring action shot of products in use. Simply having a recognizable (and presumably liked) logo visible when the email is first opened is probably enough to encourage a higher rate of people to select “Display Images”.

My hat is off to Nike’s email folks for this simple, but effective (and ingenious) little HTML hack. It made me click to see the images of the email, but I’m still not ready to pull the trigger and purchase a pair of Vaporjet cleats or a Hypercool athletic shirt.

Browsers, Web Code

Widgets on Skinny Scoop

June 22nd, 2010

Working on updating the SkinnyScoop widget. Below is the current one, next one should be live in a month or so. Thought I’d use as a sample question:

“Do you ever feel guilty about your lifestyle when you think about the people in the world living in poverty?”

Then I realized that my style of question is probably more along the lines of:




Browsers, Web Code, Work

Using Sprites with XUL

January 6th, 2010

LCD Clock Image Sprite

CSS Sprites are a growing trend, and they can save a lot of time in certain situations. The term sprite when used for video games is slightly different, but in the context of Web graphics, the term refers to a single image file that is cropped onscreen and used for different images that are seen on a page. One sprite, for example, may contain the mouseoff and mouseover states for all tabs and buttons on a site. With CSS, the correct tab or button can be displayed by simply cropping the desired section of the larger image. Amazon is doing it, Apple.com is doing it, YouTube.com, and others are starting to take the hint. Last night I sat down and tried to apply this technique to a Firefox XUL application.
Read more…

Browsers, Web Code, Work

New Ant Script for Firefox Add Ons

December 2nd, 2009

apache ant firefox add on
After trying a half dozen different methods for building Firefox add-ons, I have settled on a single ant script I put together. The following ant script (build.xml file) will create a directory, copy all files into it, delete irrelevant files, zip up the file, name it with an .xpi extension, and delete the temporary folder it made to do all of this. Read more…

Browsers, Web Code