More than one way to skin a cat (with apologies to my Scooter)

First of all apologies to my cat of 15 years, Scooter. The title above is obviously in jest .. a saying my parents and grandparents used to use whenever they had a particularly unique or personal way of doing something. My grandparents were all farmers, and if there is anyone who knows how to improvise and figure things out on the fly, it’s a farmer. That sort of goes for web developers too.

I’m knee deep in a brand new site for a charity golf tournament. To see my work go here: http://www.friendsforlawson.com. I have a photo page that is .. well .. full of photos. But at the moment they are in a sort of linear, straight down the page format. Somewhat jumbled in size as well. I did this because honestly I was in a hurry to get the site live and didn’t want to spend hours (days?) formatting a slideshow or gallery. But now the site has been live for about a week and I’m largely unsatisfied with the look of the photo page. What to do?

The choices are pretty varied and somewhat predictable. There is the good old standard slideshow. The kind where the user clicks a thumbnail to change the featured picture. Or the kind where the user clicks a “next” button or arrow to change the featured picture. There is the “mouseover” option where there is a page of thumbnails and a simple hover of the mouse enlarges the thumbnail or even changes the feature picture. Also don’t forget a simple fading slideshow. The user doesn’t get much interaction with these, though. I’m not a fan myself.

Most of the above shows are formatted using some form of javascript or jquery. There is also Flash to consider but since all indications are that Flash is going away, or at the least deprecating, then I think I will avoid it at this time. So where does that leave me?

I think perhaps the easiest one to create and easiest for the average user to navigate is a simple page of thumbnails that are larger in size than a typical slideshow. Large enough to get a good look at the picture but small enough to make you want to see the picture larger or in its original size. A simple guide/hint at the top of the page tells the viewer to click each thumbnail to enlarge the image. When the thumbnail is clicked on, a simple javascript command opens a larger version of the picture in a new window on top of the existing page. At the bottom of this image there should ideally be “close” link or an “x” or both.

So now that I know what I want to ultimately accomplish, I have a lot of work to do. Here’s a simple outline of where I go from here:

1. Determine size of thumbnails for Photos page.
2. Resize all the pictures to a uniform thumbnail (being sure to “save as” to preserve the original image).
3. Place thumbnails on page in three columns ideally. Use class divs for each picture, all left floated.
4. Add guide text at top of page to instruct visitor how to enlarge the pictures.
5. Don’t forget clearing element after each row!!
6. Write a simple javascript command to open a new page when each thumbnail is clicked on. Add a “close” link at bottom of each new page.
7. Add script to each thumbnail in code.
8. Test all images for functionality in various browsers.
9. W3C validate and cross browser check.
10. Upload photos.html page, thumbnails, style sheet and javascript.
11. Test again.
12. Enjoy my new page!!

So that’s next on my agenda!! Stay tuned for updates when the page is complete.

In all things be creative,

Todd

Cross-Browser Compatibility

What exactly does “cross-browser compatibility” mean? Simply put, it means that your web site will look exactly the same in any browser. And while this may come as a surprise to many new designers, anyone who has ever pulled their hair out over the many bugs inherit in older versions of Internet Explorer knows how frustrating it can be to make sure everything parses the same in all browsers.

Think about it, how many times have you designed your “best site ever” and previewed it til your blue in the face, then check it on someone else’s computer a few days later and it looks blown apart … elements out of order, colors wrong, fonts wrong … it’s happened to all new web designers at some point! And if the person who sees the bad version happens to be your client, you can run into big trouble down the road!

So how do we accomplish this goal? Two main ways. First, by being absolutely sure that your web sites are standards compliant and secondly by using the tools available to you both in your software and online to check for compatibility issues.

I use Adobe Dreamweaver almost exclusively in building my sites. That’s not to say I don’t sometimes tinker with other programs and/or do preliminary layouts in notepad or notepad++ …….. but when the final version is being built, I am going to always be in Dreamweaver. One of the nicest things about Dreamweaver, and all of the Adobe Creative Suite software, is the array of troubleshooting tools built in. Dreamweaver has a button in the main toolbar which will allow you to check the browser compatibility of your site as it’s being developed. If a problem is detected, clicking a link will take you to the Adobe web design forums/help pages where solutions can be found.

Remember, when you are finishing your site’s build and previewing  … check it in as many browsers as you can. Download the latest versions of Firefox, Internet Explorer, Google Chrome, Opera and Safari and go through every page in each browser. Look for font problems, color problems, divs that aren’t in the right place and images that aren’t floating correctly. Most of the time, a review and tweak of your CSS file will correct any problems. Always use someone else’s computer if possible, to preview your site on a test server before going live officially. Everyone doesn’t use the same resolution, text size, or browser and all of these can affect the way your site displays.

In future posts I will go into more detail on ways to correct common compatibility issues. Until then, happy designing!!

Welcome to the Artist’s Blog!

Welcome to the official Artist’s Blog of Todd Day Graphics!

I plan on this being an ongoing discussion on all things graphic design/art/web related.

Some posts might be on new styles, trends or technology, other posts might focus on ideas and tutorials for great design, functional css, etc. Other times I might just decide to rant about whatever’s bothering me that day!!

Thanks for coming along for the ride! Together we might all learn something!