Blog

Campaign Monitor has published a fully detailed list of the CSS supported in email clients.  It's fairly extensive with 21 different sets of results and a breakdown of all the major email systems for both desktop and web clients.

They provide both a downloadable PDF and a Excel version.  Excellent work.

Free textures from various sites and a Photoshop texture tutorial.

Why is it so hard to create a professional looking slide show of digital images on a web site? 

Infrastructure, Tools, and systems are critical for professionals and hobbyists.  If a tool saves time compared to the money it costs, it's worth it.  If it's free, that's even better.

It seems like putting photos on a web site and creating a slide show should be simple. Take some pictures, download photos off the camera, sort through them, pick a few good ones, do some minor editing and cropping, and upload them to a web site or gallery, update a few descriptions or notes and be done.  After that, post the image (or slide show) on a few other sites.  All of that should take about 15 minutes of work and using one tool that doesn't cost a fortune on both an Apple or Microsoft platform for any host provider. Sadly, in 2008 this can't be done on a Microsoft platform and can only be done by one host (.Mac) on an Apple platform.

The Apple platform with the .Mac hosting is the only thing that comes close. For everything else, it can take hours to create a photo gallery slide show. I can't find something simple to make this easier.

This is the list of 12 tools (okay it's a list of 14) with a few tools which are compelling.

Short on time? Here's the short list of tips.  Ignore the rest.

1. Flickr - Get it, use it.
2. .Mac - Got a Mac?, Get iphoto and .Mac.
3. SimpleViewer - Get it for your website. Use it to connect to Flickr (nFlickrViewer), or if your a Picassa, Lightroom or Photoshop user, use it to generate galleries easily and then put those on your web site.
4. SlideShowPro - If your an Adobe Lightroom user, get it.  If you want a professional slide show on your web site, get it.
5. Picassa - Get it, try it.

Flickr Slideshows

• Cost: Free or $24.95/yr (pro) 
• Flickr
• Embedded Flickr Slideshows
• PictoBrowser
• Flickr Show
• Flickr Slider
• Flickr Coverflow
• nFlickrViewer
• Flickr River
• nFlickrViewer

Flickr has some kind of magic recipe they use when displaying images.  The thumbnails look good, the small, medium, and large sizes look good.  There are numerous tools from third parties and API's for more tools in the future (Microsoft developers see FlickrNet). Pro subscribers can add photos to a set.  Photos can be viewed by sets or by tags.

The downside of Flickr is the upload, tagging, and description process is mildly painful.  Flickr has a desktop upload tool that's a little less painful, but it's not as easy as Picasa to upload a batch of files. There is no off-line photo editing ability provided, but Picknik does provide the very powerful editing abilities to edit Flickr photos directly on the web.

Once the images are on Flickr, then one can create a slide show using the Flickr Show or Flickr Slidr and then embed the code into your site.

Flickr Slide show

PictoBrowser

Coverflow

nFlickrViewer and SimpleViewer

.Mac Web Gallery

• Cost: $99.95/yr
• .Mac
• upload / download images
• Slideshows
• Integrates with iPhoto

Slide Show Pro

• Cost: $29 (flash version) or $25 (lightroom version)
• SlideShowPro.net
• Flash based slide show, using XML files as images and thumbnails 
• supports images and videos
• very small thumb nails
• timed play / pause

Slide Show Pro seems to be geared toward Flash and Lightroom users.  It's one of the best looking slide show's I've seen.  The images don't get fuzzy at unusual sizes like some slide shows.  If you don't have Flash, you can still update an XML file.  Generating and updating the file is tedious.  It's not for a casual user, but it looks extremely professional.  The SlideShowPro Director provides a hosting based solution to aid in uploading the files, but it does require an Apache or Windows server, PHP, and MySQL database.  Director is for web developers.  Non developers could use the Director Hosting option if this is really something that interests you.  See the videos on the site to see more about how it works.

SimpleViewer

• Cost: Free, $45 (Pro version)
• SimpleViewer
• SimpleViewer Automatic Web Server gallery build
• Flash, XML files and Thumbnails 
• Tool support for PhotoShop , Picasa (Windows), Porta (Windows), iPhoto (Macintosh), RapidWeaver, (Macintosh), Aperture (Macintosh), SimpleViewerExport (Linux), Adobe Lightroom (Windows and Macintosh), Flickr
• Picasa Simple Viewer Template

SimpleViewer isn't really a slideshow, it's a gallery tool.  Airtight interactive (the developer of SimpleViewer) also provides an AutoViewer, but it's a panel viewer, not a fade slide viewer.  The fantastic thing about SimpleViewer is that when combined with other tools (Like Picasa, PhotoShop, or others), those tools can generate galleries using the SimpleViewer templates. 

If combined with nFlickrViewer, it will pull images off Flickr and show them as part of the gallery.  It's a compelling combination, but nFlickrViewer is for developers.

Google Picasa

• Cost: Free
• Picasa
• Imports files from cameras (including raw formats).
• Edits HTML, quick exports of thumbnails and images.
• Exports galleries (or Albums).
• Combines with SimpleViewer to generate a SimpleViewer gallery

The desktop portion of Picasa is a fairly good consumer grade tool.  It's the first half of the vision.  It's simple quick and fast.  The downside is that the ability to edit features (like sharpening) is severely limited.  Likewise, the image exports and resizing loose significant sharpness than other tools like Paintshop Pro or Photoshop.  The good news is it's free and quick and easy to use.

The web portion looks bad.  It's slow, it's grainy, but it's easy.  If Flickr has the magic recipe for sharp images, Google Picasa doesn't have a clue.  Even sharp images look fuzzy on Picasa on the web.  Thumbnails are bad, regular images look fuzzy, slide images are very fuzzy.  Picasa also limits the size of the original if you want to use it for downloads.

Because it's so quick and easy to use, Picasa is great for sharing snapshots with friends and family, but bad for trying to present a professional photograph.

Photoshop Express

• Cost: Free for 2 GB
• Photoshop Express
• Integrates with Flickr (download, upload)

Photoshop Express still lists itself as a Beta at this time.  It has a few performance tweaks and a few bugs with loosing the mouse and actions to work out, but it looks promising. Photoshop Express allows carousel slide shows and plays on a timer.  It doesn't have quite as many editing features as PickNik, but the free slide show feature and the ability to embed the slide shows into other pages is great.

PhotoFolio

• Cost: Free, $25 Pro version, $50 commercial version
• Photofolio
• Requires PHP

Photofolio allows one to upload images to a directory, and then a PHP script when run will scan the directory and build a slide show.  It's going to require some development time or manual editing of XML files to get this working.

dfGallery

• Cost: Free
• Link: Dezinerfolio dfGallery - recommended
• Flickr, Picassa, Fotki, Photobucket and custom images
• requires PHP 5 on the host
• Flash based slide show
• Has support for music

This is very similar in nature to Slide Show Pro.  It doesn't integrate with any tools, it has  the same negatives about Slide Show Pro (i.e. a lot of manual editing of the XML file is involved), but it does look pretty good.  It also integrates into reading  a Flickr account, but I've yet to get that feature working.  If the Flickr feature worked out of the box, it would be very compelling.

ZenFolio

• ZenFolio
• Cost: $25, $40, $100 / yr (depends on features)

ZenFolio has a very good slide show.  The slide show images are sharp and clear.  It's thumbnails are not as sharp, but it's not near as bad as Picasa. ZenFolio is really as site for to aid in selling prints and hosting photos.  There are no offline tools.

Photo.Net

• Cost: $25/yr
• Photo.Net
• Mikel Arrizabalag example

Photo.Net provides a simple gallery and slide show.  The images on the slideshow look fairly good.  The images on the thumbnails look as bad as Picasa.  Flickr and .Mac are far better options.

Slideroll

• Cost: Free
• slideroll
• Music
• Upload photos, or get them from Myspace, or Flickr.

Slideroll appear to be more for the Youtube or Myspace crowd.  The images look better than Slide.com, but there are better options.  It's easy to put together a short show.

Slide.com

• Cost: Free
• Link: Slide.com
• Add images from Friendster, Bebo, MySpace, Slide, Photobucket, Facebook, Flickr, or a specific image URL.
• Sizes small (350x262), medium (426x320) large (600x475)
• Has support for music
• Images appear grainy

Slide is quick.  You can grab images from other sites quickly (even anywhere on the web) and build a slide show with a variety of interesting effects.  The downside of slide is they appear to use the same fuzzy recipe for displaying the images.  Sharp pictures on Flickr come out fuzzy on slide.com slide shows.  It's an interesting tool, but it's a toy, not a professional tool.

Microsoft HTML Slide Show Wizard

The Microsoft HTML slide Show Wizard is easy to use and allows selection of multiple folders and images from other folders to combine into one single slide show, but the images that are resized are extremely grainy at best.  Each page is loaded in a separate html file ( 0.htm, 1.htm, 2.htm, etc.). Files generated are in the same directory. Two images generated per image ( imagename.JPG.jpg, imagename.JPG.thumb.jpg ). 

• Cost: Free
• Link: Microsoft HTML Slide Show - not recommended.
• Sizes images to the following sizes.
• 100x78 - thumbnails
• 320x240
• 640x480
• 800x600
• original picture size

TripTracker

• Cost: Free or $25 per site
• http://slideshow.triptracker.net/

It's an interesting concept, but some of the other tools are far better.

How does one add or pass parameter to a user control in BlogEngine.Net?  This may be obvious to others already, but I thought I'd share a quick note on what I found. 

Create The Parameter

First, define the parameter value in the user control.

private String _Name = null;
public String Name
{
    get { return _Name; }
    set { _Name = value; }
}

The parameter now can be set either by embedding the control on another page or user control, or by passing a parameter in the [ usercontrol:~\Control.apx Name=xxx;] format.

Passing Parameters In Pages Or Controls

Register src="../../UserCustom/PageInclude.ascx" mce_src="../../UserCustom/PageInclude.ascx" tagname="PageInclude" tagprefix="uc6"
 
<uc6:PageInclude ID="PageInclude1" runat="server" runat="server" Name="P Test" />

By adding a reference to the user control to a page or other user control, then the values for the parameters can be set. Without the runat="server" value, values will not be passed to the control.

In this particular example, the Name="Some Page" sets the earlier defined _Name value to "Some Page".

Passing Parameters In BlogEngine.Net

BlogEngine.Net behaves very similarly.  All parameters must be separated by a ";" semi-colon character.  If parameters are passed that are not supported, BlogEngine.Net 1.3 code will not render the control and an error message will be displayed.  The example below has spaces added after the bracket.  These need to be removed in the actual page or posting that sets these parameters.

[ usercontrol:~\UserCustom\PageInclude.ascx Name=SomeName; ] 

Multiple parameter example:

[ usercontrol:~\UserCustom\PageInclude.ascx Name=Some Name; Value=Some Value; ]

The physical amount of time spent on a task is not the same as the calendar time that it takes to complete the task. This is especially true when teams are working on multiple tasks. Project managers need to understand this when planning and getting estimates from a development team.

How does a 3 day task turn into 8 calendar days?

1. 2 hours spent on understanding the requirements.
2. 2 hours spend on analysis - Analysis complete
3. 4 hours spent on design - Design complete
4. 6 hours spent on development
5. 9 hours spent on development
6. 7 hours spent on development -Developer says it's done
7. 2 hours testing / fixing issues - Unit Test complete
8. 2 hours testing / fixing issues - System Test complete

Totals:

• Time developer estimated: 3 days
• Time developer says it took: 3.5 days.
• Actual physical time spent: 34 hours or 4.25 days
• Actual elapsed calendar time: 8 days

What size should you make your layout for a web site? Is there one layout that will fit all monitor sizes?

The basic width of a layout determines a lot of the internal layout sizes for panes, modules, images, and internal content. 

Some common layout widths.

1. 960 pixels, 16 columns 10+40+10 pixels each
2. 960 pixels, 12 columns 10+60+10 pixels each
3. 820 pixels, 4 columns 10+180+10 pixels each + 10 pixel margin
4. 740 pixels, 12 columns 10+40+10 pixels each + 10 pixel margin
5. 740 pixels, 3 columns 10+220+10 + 10 pixel margin
6. 740 pixels, 4 columns 10+160+10 + 10 pixel margin
7. Yahoo UI, 750 pixels, 950 pixels, 974 pixels, 100%
8. Blueprint CSS - 950 pixels, 24 columns, 30+10 pixels each

All of these layouts lead to some fairly common shared sizes for panes.  Any of these sizes will fit within the most common layouts.

1. 520 pixels
2. 460 pixels
3. 240 pixels
4. 180 pixels
5. 120 pixels

References

1. 960.gs
2. Yahoo! UI Library: Grids CSS
3. Blueprint CSS

What size should your photos be when posting them to the web?  What are the common standard digital photo image sizes? 

Every site I looked at had different size images, but some common themes did emerge.  240 x 160 pixels was a very common small format. Larger images were typically around 460 pixels wide.  If you make your images larger than 460 pixels, most layouts in most blogs or site designs will have some difficulty fitting these sizes into the layout.

My Preferred Image Sizes

1. Very Large 800 pixels
2. Large 500 or 520 pixels
3. Medium 460 pixels
4. Medium-Small 320 pixels
5. Small 240 pixels
6. Thumbnail 100 pixels
7. Square Thumb 75 pixels

Image Sizes

Video Image Sizes

1. Viddler 437 x 370
2. Youtube 425 x 355

Photo Image Sizes

1. 1024 x 768 ratio: 1.33
2. 800 x 600 ratio: 1.33
3. 460 x 308 ratio: 1.49 **
4. 320 x 240 ratio: 1.33  **
5. 240 x 160 ratio: 1.5 **
6. 220 x 148 ratio: 1.49 **

Thumbnail Image Sizes

1. 160 x 160 ratio: 1 **
2. 160 x 108 ratio: 1.49 **
3. 160 x 120 ratio: 1.33
4. 120 x 80 ratio: 1.5
5. 100 x 100 ratio: 1
6. 75 x 75 ratio: 1

Flickr Image Sizes

1. Square 75 x 75
2. Thumbnail 100 x 67
3. Small 240 x 161
4. Medium 500 x 334
5. Large 1024 x 768

Picassa Image Sizes

Picassa Web Image Sizes

1. Medium 640 x 428
2. Large Thumbnail 160 x 160
3. Thumbnail 144 x 96

Picassa Desktop Image Sizes

1. 320
2. 480
3. 640
4. 800
5. 1024
6. 1200
7. 1600

Windows Live Writer Default Image Sizes

1. Small 240 x 161 (128)
2. Medium 640 x 428 (480)
3. Large 1024 x 685 (768)

Common Photo Print Image Sizes

35mm has a ratio of 3:2 and most digital formats have a ratio of 4:3 or close.

1. 2 x 3 in ratio: 1.5 (wallet)
2. 3 x 5 in ratio: 1.66
3. 4 x 6 in ratio: 1.5
4. 5 x 7 in ratio: 1.4
5. 8 x 10 in ratio: 1.25
6. 10 x 13 in ratio: 1.3
7. 11 x 14 in ratio: 1.27
8. 16 x 20 in ratio: 1.25
9. 20 x 24 in ratio: 1.2
10. 24 x 36 in ratio 1.5

Common Web Image Sizes

1. 1024 x 768 ratio: 1.33
2. 800 x 600 ratio: 1.33
3. 460 x 309 ratio: 1.49
4. 320 x 240 ratio: 1.33
5. 240 x 160 ratio: 1.5 
6. 220 x 148 ratio: 1.49
7. 160 x 108 ratio: 1.49
8. 160 x 120 ratio: 1.33

Amazon Image Sizes

1. 120 x 150
2. 120 x 240
3. 120 x 90
4. 180 x 150

Standard Ad Sizes

Rectangular and pop-up ads

1. Large rectangle 336 x 280
2. Medium rectangle 300 x 250
3. Square pop-up 250 x 250
4. vertical rectangle 240 x 240
5. Rectangle 180 x 150
6. Rectangle 300 x 100
7. Rectangle 720 x 300

Banner and Buttons

1. Leaderboard 728 x 90
2. Full Banner 468 x 60
3. Half Banner 234 x 60
4. Button 1 120 x 90
5. Button 2 120 x 60
6. Micro bar 88 x 31
7. Micro button 80 x 15
8. Vertical banner 120 x 240
9. Square button 125 x 125

Skyscrapers

1. Skyscraper 120 x 600
2. Wide skyscraper 160 x 600
3. Half page 300 x 600

References

1. Ad Unit Guidelines
2. Wikipedia Standard Ad Sizes
3. Standard Images Sizes
4. Image Dimensions In Common Usage