A Blog by Web Bright Consulting

Recently, Google presented the first ever webinar on three important Google tools. The webinar was titled “The Google Trifecta: Webmaster Tools, Analytics, Website Optimizer” and it is available online until October 9, 2008.

The webinar was presented by Google own team members including Michael Syszomierski on Webmaster Tools, Jeff Gillis on Google Analytics and Tom Leung on Website Optimizer. The three tools are free but very powerful in improving site effectiveness and functionality.

Google tools can be used in sequence:

1. Google Webmaster Tools is used to maximize site exposure and increase traffic.

2. Google Analytics is used to uncover key insights such as taffic sources, visitor trends, and keywords performance.

3. Google Website Optimizer is used to identify site improvements; for example, evaluate performance of different versions of site design to choose the one that brings the best conversion.

Google continues to provide exceptional support to webmasters by providing these tools along with great educational resources such as this webinar.

For those who are serious about learning web design and its concepts and new standards, here is my favorite book from O’Reilly: “Learning Web Design” by Jennifer Niederst Robbins. This book is “a beginner;s guide to (X)HTML, style sheets (css), and web graphics.

This book was a great insight on using HTML markup for structure and css for presentation. I heard this concept for a while, but couldn’t quite grasp it until I read this book. It gave real examples with downloadable files and it’s structured more like a classroom in a book so you can follow along the lessons. Jennifer also gave some exercises to test the readers understanding of the material and provided the solutions so reader can check their work. Since I actually was working on menus for my clients, the menu example really came in handy.

This is my very absolute favorite book on web design and I highly recommend it for anyone trying to understand the concepts of HTML markup and CSS.

“Mastering CSS with Dreamweaver CS3″ is a new great book from New Riders (Voices that Matter) by two CSS authorities: Stephanie Sullivan, co-lead of Adobe Task Force for WaSP and wrote teh CSS layouts included with Dreamweaver CS3, and Greg Rewis, Group Manager of Creative Solutions Evangelism at Adobe.

The book begins with some background information on the (X)HTML Document, CSS and the concept of laying out HTML pages with CSS. Three of the seven chapters give a step-by-step examples (with downloadable sample files) for a Fixed Layout, Liquid Layout, and Elastic Layout Web sites. In Chapter 4, the authors demonstrates how to use Dreamweaver CS3 to migrate a Table-based Layout to CSS Layout. In Chapter 6, Stephanie and Greg show how to build a Gallery Site with CSS and Spry.

The book has a very pleasant style and layout with color images and side notes. Even with its technical context, the examples were very easy to read and follow, even if you’re not doing the examples online. Stephanie and Greg also presented a few great tips and tricks for using Dreamweaver CS3 and CSS, eg, the faux column technique which gives the illusion of two equal height columns.

I’ve been a Dreamweaver user for a few years. Late last year I learned about Dreamweaver CS3 (through Adobe’s eSeminar series) and learned CSS from another great book by O’Reilly called “Learning Web Design “. It was a good, but rough, background to start designing websites with Dreamweaver CS3 and CSS. I’ve been waiting for this book for a long time. I read three chapters in the first week and was able to learn a lot of new techniques and tips I already used on my next design project.

However, a few things can be added to this book to make it even better. Definition and explanation of CSS best practices and Web standards would be helpful, specially in understanding some design decisions in the examples. Also, Dreamweaver CS3 has many many choices for HTML layout. This book only covers three of them. It would be useful to give an overview of these layout and some pros and cons of each to help in deciding on the layout when working on a project. Another useful information to include in this book would be a Resources and References section.

Overall, this is a great book for anyone serious about designing professional websites with Dreamweaver CS3 and CSS.

One of the popular methods for creating navigation menus for Web pages is using drop down menus. By mousing over any of the buttons of the navigation menu, the user is able to learn about some of the content of the corresponding pages without visiting them first. Some drop down menus are nested two or more levels allowing the user to access sub pages by one click. This makes drop down menus user friendly from Usability point of view. However, most techniques used to create drop down menus involve some sort of scripting (mainly JavaScript) that add behavior to graphical buttons, as shown in this example. Since search engines don’t index JavaScript and most of them can’t follow links embedded in graphics, this makes drop down menus search engine incompatible from an SEO point of view.

Building Drop Down Menus with CSS and Dreamweaver CS3

A more search friendly technique for creating drop down menus is using CSS and HTML. A List Apart published an article showing how to create a horizontal drop down menu using CSS. In this case, the navigation menu is created with HTML as a nested unordered list with all the items created as text links that can be easily indexed by search engines. However, this method can require some coding by the designer. Luckily, Adobe implemented drop down menu widget (called Menu Bar) into their Spry framework for Ajax (which comes with Dreamweaver CS3). As an example, the drop down menu for this Web site was created using Dreamweaver CS3 Vertical Menu Bar (view the Page Source for code details). Since the drop down menu in this case is created with basic HTML tags and styled with CSS tags, this makes them search friendly as well as user friendly.

A good definition of Spry can be found in the Adobe Labs web pages: “The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. “

Since I upgraded my Dreamweaver from Dreamweaver 8 to Dreamweaver CS3, I’ve been waiting for a chance to use more of its Spry widgets. I recently had a chance to use the Accordion Spry widget and here is a summary of my experience.

The Problem: A local club has over than 100 reciprocal clubs nation-wide. Members need to find a list of reciprocal clubs in a particular State and contact clubs of interest. The local club likes to provide this information to its members on its web site to make it more accessible to members.

Solution Options: There are many different ways to tackle this problem. Here are a couple of these options:

1. List Solution: My first attempt at presenting this information is to use an unordered list with the States names and link them to the information for each State on the same page, click here to see how this solution looks like.

2. Spry Accordion Solution: My second option was to use a Spry Accordion widget with the States Names as labels and the corresponding club list as the content, click here to see how this solution looks like.

Here are my top 5 reasons for choosing the Spry Accordion solution :

1. Very elegant option for presenting a large list of information. As you can see from the example above, the same information can be presented much more efficiently on a web page using a Spry Accordion widget.
2. Very easy to use and customize. As with most other Dreamweaver tasks, adding a Spry widget can be done with a few clicks (I didn’t need to use any tutorials to figure out how to do it). Customizing the widget is best done using CSS and a quick link to a support manual page gives good guidelines and tips. Also, adding labels and content to the widget can be done in Design view; however, it’s easy to understand the Code view of the widget and make changes to the code.
3. Search engine friendly. As with other Spry widgets, the Accordion widget is a page element that combines HTML, CSS and JavaScript code. When adding text to an Accordion widget, it is mainly wrapped with “div” tags making it easily accessible by Search Engines.
4. Good looking and User friendly. From the user end, an Accordion widget is intuitive and easy to use. Just click on a tab title and you can see its content.
5. Make Dreamweaver CS3 worth the investment. Adobe Creative Suite 3 Web Premium has a high price ticket ($1,599 full/ $499 upgrade) yet with all its new features, CSS support and Spry widgets I think it’s well worth the investment.

CoffeeCup Photo Gallery is a software that allows you to add animated photo gallery to your website. You can download a free trial and use for 21 days. The registered version cost $34. The software is easy to install and very simple to use, still, an online Help manual is included, and better yet, you can view video tutorials to many of the software functions online.

Integrating the Photo Gallery with Your Website

When you save your project, CoffeeCup Photo Gallery creates three files: an .swf, .html, and .xml with the name of the gallery you specified, and a sub-folder which includes all the images from your albums. You need to upload the three files and the sub-folder to your website. Basically, a Flash object (.swf) will be inserted into the HTML page (.html) and the photos will be displayed using XML (.xml). If you like your photo gallery to have the same theme as the rest of your website, you can insert the Flash object (.swf) into an HTML page created from your site’s template. If you’re using Dreamweaver, you can create a new HTML page using the site’s Template, then select Insert -> Media -> Flash to insert the fla file (warning: your gallery project should be saved in the same Site folder as your web pages).

In order for the gallery to fit into your web page you might want to resize the gallery. The default size of the photo gallery is 500×460 pixels. You can change the gallery size using CoffeeCup Photo Gallery, or if you’re using Dreamweaver, you can resize the Flash Object in the Design View. Reducing the width of the gallery might eliminate the buttons for the sound, slideshow and albums, which are displayed on the right side of the gallery by default. However, using CoffeeCup Photo Gallery you can move these buttons to anywhere on the gallery so they’re still visible when you resize it.

A Live Example

Ok, so you want to see how this looks like in real, view this website that I added a photo gallery to using CoffeeCup: http://kjainteriors.com/gallery.html.

Photo Gallery Options for Websites (pdf with summary table)

It seems like almost all professional websites can use a photo gallery for a reason or another. For example, my interior designer client wants a photo gallery to showcase photos of her projects, my children boutique client wants a photo gallery to display pictures of some of her products, my non-profit organization wants a photo gallery to show pictures of events and members to give their website a more friendly look and my city club wants a photo gallery to show pictures of their facility and dining offerings.

So, how can you create a photo gallery for a website?

There are many different options. And the best option might be different for each website depending on the requirements. For example, for the non-profit group I used Flickr while for the children boutique I used CoffeeCup.

This article provides a review of 8 different photo gallery options and gives a comparison of some of their functionalities and features. Options reviewed include: Photoshop, Dreamweaver, CoffeeCup Flash Photo Gallery, PhotoFlow, Flash Photo Gallery, SimpleViewer, Coppermine and Flickr. The article is not a how-to create the photo gallery with these tools, since the process in most cases is straightforward and is documented elsewhere.

1. Photoshop

Description: Creating a Web Photo Gallery is one of Photoshop automated tasks. You’ll need to load all the images that you like to add to one folder and specify another as the destination. Several gallery styles are available including a couple of slideshows. Photoshop will produce several HTML pages, including an HTML page for each photo as well as a thumbnail page. To add caption to each photo, you’ll need to access the corresponding HTML page and change the code.

The raw photo gallery that Photoshop produces is very basic. However, since all the images are displayed in HTML files, you can use CSS to improve the look.

Cost: $649 for Photoshop CS3

URL: http://www.adobe.com/products/photoshop/index.html

Demo: http://funkymonkeysc.com/photogallery/Photoshop%20Photo%20Gallery%20for%20Funky%20Monkey/index.htm

Admin: No.

Albums: No.

Animation: yes, with the Slide Show styles.

Music: No.

Technical Support: Adobe (provider of Photoshop) has great product support and extensive online and offline documentations.

2. Dreamweaver

Description: Dreamweaver can automat the task of creating a photo album. For details on how to use Dreamweaver to create a Web Photo Album, see: http://webdesign.about.com/b/2007/11/27/you-have-lots-of-options-for-web-photo-albums.htm#gB3. As with Photoshop, Dreamweaver creates several HTML pages including one for each image and one for the index images, which are displayed as thumbnails in a table. As with Photoshop photo gallery, the look can be improved using CSS.

Cost: $399 for Dreamweaver CS3

URL: http://www.adobe.com/products/dreamweaver/

Demo: http://funkymonkeysc.com/photogallery/Dreamweaver%20Photo%20Gallery%20for%20Funky%20Monkey/index.htm

Admin: No.

Albums: No.

Animation: No.

Music: No.

Technical Support: Adobe (provider of Dreamweaver) has great products support and extensive online and offline documentations.

3. CoffeeCup Flash Photo Gallery

Description: This is a desktop software. It’s easy to install. Has a very elegant user interface. Very intuitive to use: Did not need to read any documentation to be able to create the albums and add the photos. Took 5 minutes to download, install and start creating albums. The slideshow it creates is very elegant and easily customizable- it even allows adding background music and sound effect for the slideshow transition (five options available including: Fade In, Scroll from Top/bottom/left/Right). The software even allows uploading the album directly to a Web server. The company website is very informative and customer service is highly accessible providing phone numbers and email forms. The gallery can be uploaded as stand-alone HTML pages or can be incorporated into existing website’s pages.

Cost: $34.00. Free trial available for 21 days.

URL: http://www.coffeecup.com/photo-gallery/

Demo: http://funkymonkeysc.com/photogallery/CoffeeCup%20Flash%20Photo%20Gallery/funkymonkey.html

Admin: yes.

Albums: yes.

Animation: yes.

Music: yes.

Technical Support: Toll Free, Sales Hotline, Fax, Office Hours, Contact Form.

4. PhotoFlow by FlashLoaded

Description: This is a Flash extension (or component) that creates a photo gallery, which displays multiple images with a stack effect, perspective and reflection. The images can be flipped by clicking on a specific image in the stack, using the supplied skinnable scrollbar, or scrolling the mousewheel. Images can be added or changed directly in the Component Inspector, through ActionScript or using an external XML file.

Cost: AS2 version: $59.95. AS2 & AS3 version: $79.95. No Free Trial version.

URL: http://www.flashloaded.com/flashcomponents/photoflow/?id2=kirupa_photoflow

Demo: http://www.flashloaded.com/flashcomponents/photoflow/?id2=kirupa_photoflow

Albums: No.

Admin: No

Animation: Yes.

Music: No.

Technical Support: No contact information provided. Only “support forum” that requires registration.

5. Flash Photo Gallery (for Dreamweaver) by Alvena.

Description: Flash Photo Gallery is a Dreamweaver extension that creates a Flash photo gallery in a customizable table; you can set number of rows and columns and adjust measurements and appearance of the cells.

Cost: $24.75. No free trial version.

URL: http://www.alvena.de/ext/gridgallery.html

Demo: http://www.alvena.de/ext/gridgallery.html

Admin: No.

Albums: No.

Animation: Yes

Music: No.

Technical Support: Phone, Email, Support, and contact form.

6. SimpleViewer by Airtight

Description: SimpleViewer is a server-side PHP application that creates a Flash photo gallery. For administration features allowing adding and removing photos and customizing the gallery, you can use SimpleViewerAdmin. This option requires installing the application on the hosting server, which might require the involvement of a technical support member of the hosting service provider.

Cost: Free.

URL: http://www.airtightinteractive.com/simpleviewer/

Demo: http://kjainteriors.com/simpleviewer/index.php

Admin: Yes using SimpleViewerAdmin http://www.redsplash.de/projects/simplevieweradmin/

Animation: Yes

Music: No

Technical Support: (for SimpleViewerAdmin): No. (Developer no longer support this tool.)

7. Coppermine

Description: Similar to SimpleViewer, Coppermine is a server-side PHP application that requires installation on the hosting server. It allows the viewer to change the theme and add comments for each photo.

Cost: Free.

URL: http://coppermine-gallery.net/

Demo: http://coppermine-gallery.net/

Admin: Yes.

Albums: Yes.

Animation: Yes.

Music: No.

Technical Support: No contact information. Support Forum with registration.

8. Flicker

Description: Flicker is a photo publishing and sharing tool provided by Yahoo!. It is a good option for non-profit groups and organizations as well as for individual use; however, flickr’s tem of use does not permit it for commercial purposes, as such it is not a valid option for most websites. Photo galleries created using Flickr are stored and viewed on the Flickr server and cannot be integrated with website pages.

Cost: Free

URL: http://www.flickr.com

Demo: http://www.flickr.com

Admin: Yes.

Albums: Yes.

Animation: Yes.

Music: No.

Technical Support: Yes.

There are two methods for adding a sound to a document in Flash: a) using the library and b) linking at runtime.

A) Using the Library 

1. Import the sound file into the library.
2. Add a layer for the background sound.
3. Use the property panel to select the sound file.
4. Set Sync to either Event or Stream.

“There are two types of sounds in Flash: event sounds and stream sounds. An event sound must download completely before it begins playing, and it continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website.”

Streaming the background sound is a better option, especially if the sound file is large.

1. Add as many frames as needed to play the sound.

Disadvantages:

1. Since the sound file should be imported into the Flash project, the size of the SWF will be impacted accordingly. This in turn impacts the download time for the site, possible resulting in an unacceptable performance.
2. The sound file may require more or less frames than the rest of the layers.

Advantages:

1. You can control the number of times the sound repeats
2. You can add effects to the sound like Fade In, Fade Out, Left Channel/Right Channel and Fade Left to Right/Fade Right to Left.
3. You can choose between Event and Stream.

b) Linking at Runtime

An alternative to adding the sound file to the Flash project, is to link to an external sound file from the Flash project (or loading sound at runtime). This method has the advantage of keeping the SWF file size smaller and the performance better.

To link to an external sound file use the following ActionScript:

var background_music:Sound = new Sound();

background_music.loadSound(”sound_file.mp3″, true); 

See the loadSound method of the Sound object for more details.

Check out our new Flash website at: www.webbrightconsulting.com.

Thank you to all those who contributed to this project.

While Flash web sites give the Internet user a much richer experience, most of the site content is invisible to the search engines. KC Swenson, a Search Strategist with Red Brick Media in Francisco, offers two possible solutions:

1. One version of the site: initial load of the RIA application must contain the optimized elements such as TITLE and headers and also must be reachable from a fixed address:

• URL rewrite: mod_rewrite
• Get inbound links (internal and external) to that particular resource

1. Have an alternate version of the site available (Swenson’s preference)

• Or have a subset of the site available – these would be the pages optimized for the desired keyword list

Creating a second version of the site should be done with caution; search engines can penalize a site by removing it from its index if clocking is suspected (clocking refers to the practice of presenting different content or URLs to users and search engines). However sites that serve up the same content to the search engines and users may not be penalized according to Google’s guide for creating a Google-friendly site: “if you suspect that your dynamically generated pages (such as URLs containing question marks) are causing problems for our crawler, you might create static copies of these pages. If you create static copies, don’t forget to add your dynamic pages to your robots.txt files to prevent us from treating them as duplicates.”

http://www.google.com/support/webmasters/bin/answer.py?answer=40349&ctx=sibling

References:

Wikipedia.org on Robots.txt: http://en.wikipedia.org/wiki/Robots.txt

Wikipedia.org on Rich Internet application: http://en.wikipedia.org/wiki/Rich_Internet_application

Google’s Webmaster Help Center: http://www.google.com/support/webmasters/bin/answer.py?answer=40349&ctx=sibling

Adobe OnDemand Seminars: http://www.adobe.com/cfusion/event/index.cfm?event=list&loc=en_us&type=ondemand_seminar&product=Creative+Suite&interest

KC Swenson’s presentation on Search Engine Optimization for Flash sites - For Web Professionals