Igloo Surfing - November Progress

Obviously, the site isn't up yet, so all of the progress and updates are related to the initial launch of the site. At the moment, I pretty happy with the logo that I have designed and much of the main page layout. This isn't going to be an overly complex site like some of my other works, more of just a playground and photo sharing area. As with the Ciolinos site redesign, I am trying to push my limits of what I am capable of in regards to graphic design, and again not predicting that this will be the greatest thing since Google Maps, but something I want to be proud of.

For the remainder of this month, I'm hoping to finalize the main page layout for the site, slice up the comp and generate the core HTML and CSS, and get the foundation pages ready to go on a testing site. After that, it's gathering photos and planning out the mechanics of the site, and if it's up by the end of the year, I'll be happy.

Latest Site Redesign for The Ciolinos

I can't help but say that I'm pretty proud of the latest site redesign for this site, which you can view here. Compared to the old site (I love archive.org), it is definitely a world of difference.

I started with the standard design process of building out the page layouts and design in Photoshop, which again, for more of a developer than a designer is still new to me. I spent some time looking for stock images or icons that I could use for the navigation icons, and ended up finding ones by TDPK at www.tpdkdesign.net that fit very well. Once those were in place, much of the site fell into place.

3D Feel
I liked the 3D feel that the navigation icons and new logo brought to the design, and wanted to incorporate that into the different elements of the site. I went with gradients (something else new for me) with both the background and the header mast, and a drop shadow around the overall page border to help with that 3D feel. I also played off the blue-orange color relationship to help those headers and links really pop.

As I have gotten into the habit of developing and testing my sites in Firefox first and then testing and hacking for both IE 6 and IE 7, that did present some challenges at first. I went forward with transparent PNG graphics, which I knew ahead of time had problems being displayed in IE 6. I didn't want to sacrifice any of the detail or quality of the design I was so proud of by limiting them to GIFs just to work in IE. Never fear.

Perhaps what I'm most proud of is how I overcame that. There are two main areas where the transparent PNGs came in to play and with what I had to do for IE 6: the gradient and icons in the header mast and the drop shadow around the page border.

Header and Navigation Images
I used the gradient in the header mast to separate it from the rest of the content on the page. I didn't want to degrade the quality of the navigation icons I was using by converting them from PNG to GIF, and the same for the logo with it's drop shadow. For those that don't know, a transparent PNG in IE 6 does not show up with the transparency you would expect, but instead it uses a nasty gray background for the transparent parts. For a quick demo, check out the logo image here by opening it in IE 6.

Although they suffered from the same issue of not wanting to be GIFs, there was actually a need for two different solutions.

First, the logo, which was a pretty easy fix. Since the logo was part of the markup of the page directly, I was able to use a find/replace technique via the AlphaImageLoader as referenced by Jeff Croft in the book, Web Standards Creativity. Essentially, it references the logo image by it's element id and uses the AlphaImageLoader to swap out the existing image for a div tag that is used to load the image into. It's encapsulated in its own javascript file and included using a proprietary IE conditional comment to run only for IE 6 and below.

For the second challenge, the navigation icons, it was different because those are included via CSS and not actually part of the viewable page markup. Essentially, I've been getting into the habit of creating navigation menus and links as unordered lists and using CSS for styling and positioning them, even the mouse-overs. So since they're not in the markup, the previous javascript find/replace technique for the header logo would not work.

What I did instead, again using the conditional IE comments, was include a separate CSS file specifically for IE 6 and below, that would style the navigation with non-transparent PNGs rather than the transparent ones. This also meant I could not have my gradient background in the header mast, so that separate CSS file also uses a plain white background to avoid that. Not the ideal design I wanted across all browsers, but it was a better solution for IE 6 users only.

Page Border and Drop Shadow
The drop shadow around the page border also consists of transparent PNGs, for this purpose to support the background gradient of the page. The page border consists of 3 images, again not in the markup but rather contained and styled in the CSS file. Those three files are:

• Header border with rounded corners and no top shadow
• Content border with only the left and right borders, and used to expand based on the page length
• Footer border with rounded corners and bottom shadow

The background of the page consists of a gradient image repeated horizontally along the x-axis and a background color that fills in everything below it and supports the page growing vertically based on the amount of content on the page. This growth is also supported by the second image listed above, which is used as the content background for all the pages.

Based on that construction and the size of the background gradient, the header border image will always that the same amount of gradient behind it, because it never moves. For the most part, this applies to the footer border image as well because it's usually located far enough below the gradient to be the standard background color. The main issue was with the content border, the top of the content would be part of the gradient and need a different background color than content further down on the page.

This all works flawlessly for Firefox and IE 7 with transparent PNGs, but has the same issue as the navigation icons mentioned earlier. It also employs the same solution, though, with separate images for the border images in a separate IE 6 CSS file, and rather than a background gradient on the page, it uses only a consistent color. That consistent color is also built into the border images behind the drop shadows, to fit in unnoticed.

The Result
So at the end of it all, I was still able to keep the perfect design in Firefox and IE 7 that I had designed in Photoshop without having to sacrifice anything. With just a small tweaks and a little bit of degrading in the design, I was also able to have a very respectable version of the site design in IE 6 without having to duplicate much of the markup, styles and images. In a couple years from now, when IE 6 is used less, I won't have to change anything. :)

Ka'anapali Dreamin' - November Projects

Wow, where has this year gone.

I just wanted to take a quick moment to post some details about the different additions I'm currently working on for the Ka'anapali Dreamin' site, all of which I hope to publish some time this month.

Sidebar Google Maps
I was looking up a local Chinese restaurant online a few weeks ago and came across a take out portal (the name escapes me at the moment) that should details about local places to order dinner. One of the little features they had was a small Google Map in the upper left hand corner, about 120x240 in size.

That got me thinking to add something similar to the different Activities posted on my site. It's going to have two smaller size maps under the sidebar pictures on the individual pages, such as the Cheeseburger in Paradise page. The first of the two maps will show a zoomed in view within about a 2-3 block radius, just to show a little of what's nearby and how close it is to the shoreline in most case. The second one will show a zoomed out view reflecting where on the island it is, whether it's in West Maui, South Maui, etc.

Google Satellite Maps
Ever since our helicopter tour above Maui, I've been mesmerized how beautiful the Valley Isle can be from above. At first, I was disappointed in the quality of aerial satellite maps on Google Maps of my favorite parts of the islands, but that recently changed.

Anyway, that inspired me to use those gorgeous satellite images from Google as art, and while they wont help people get from point A to B, I still think it can be appreciated by others. Starting with the Beaches pages, I will be adding full view Google Maps in the satellite view showing the wonders of Maui from above to compliment the details on the pages and the various photos we've taken from right on the sand. I haven't scoped out other areas like in Lahaina Town or around Hana yet, but as those get updated, I hope to post them, too.

Ka'anapali Beachwalk Photo Tour
This is perhaps the biggest of the three updates I'm working on this month, and so far, I'm pretty happy with it.

Take a quick step back to last year. We took a guided Road to Hana tour and took all these wonderful pictures. Now, when we got back to shore, we had hard time identifying most of them on a map, especially the waterfalls. There has to be a better way, right?

Now, when we were preparing for our trip this year, I did my homework. I picked up a Travel GPS Recorder to bring with us. Skipping all the geek speak, it uses GPS satellites to track your position at any given time, and when you sync up it's clock with the clock on your digital camera, magic happens. You load all the data from the GPS recorder onto your computer, and then run software that can find your pictures on a map, like Google Maps. Here's a quick sample of the results with my some of our photos at Flickr.

Okay, enough of that. What I decided to do when we would walk up and down the Ka'anapali Beachwalk was take pictures of everything; all the resorts and condos, Whalers Village, the beach, people taking surfing lessons, all of it. With all those photos, and the GPS data to place them on a map, I'm adding the finishing touches to a "photo tour", where you can view different photos from the beachwalk and see the location directly on a Google Map.

This one is currently working fine on the test site, and it's just a matter of updating the titles, captions and some of the lighting on all 100+ photos from the beachwalk. It sounds like a lot of work, but once its done, it will be pretty cool.