The trick is to smoke the meat and not make the meat smoke
GS3-2012_Blog_Header-HDR-960x500

Site Tweaks

First Image
Events good & not so good have managed to keep me away from the grill for the last month or so. While I haven't had time to grill, I have been working behind the scenes on this site. I thought I'd post this quick recap of what I’ve been working on, which will also help to introduce some of the new features and show you how to use them.


“Second


The new Image Hover Stack allows the user to mouse over an image and have text or links appear as the image above disappears. All of the HTML magic is hidden away from me while I am building the site. All I have to do is place the image in the image well and the text in the text well. The rest just works.

One of the things I like about RapidWeaver, the software I build this site with, is it is modular and extensible. The program has a modular add-on called Stacks which allows you to drag and drop modules to help with page layouts and allows you to add features to your pages. With the advent of version 2 of Stacks many new Stacks have come out, allowing me to do things that weren't possible 6 months ago when I was working on this new site. These Stacks modules can be amazing, you are basically dragging and dropping some new feature with all of the HTML coding taken care of for you.


Third ImageForth Image

The Galleries Pages appear much cleaner and look more like the Food Photo Albums pages. I like the consistency this brings to the site


“Fifth


The old page for the Food Photo Galleries had the text and the item count displaying visibly in the space below the photo.


“Sixth


The new Food Photo Galleries Page has the item name & count hidden under the thumbnails and is revealed when you mouse over the image. The end result is more modern & clean looking.


“Seventh“Eighth


Mousing over the image on a desktop computer reveals the text below. On a touchscreen device like a smartphone or tablet, tap the image to reveal the content beneath.

The first thing I did was to change the function and appearance of some of the pages, called Gallery Pages, used to help direct the user to specific areas on the site. A new stack became available called Image Hover. It allows you to place an image on the page, and when the user hovers their mouse over the image the image disappears to reveal content hidden underneath the image. I used this for page types directing folks to the various photo galleries on the site. You hover your mouse over the image and the links to the photo galleries reveal themselves. It makes the pages much cleaner looking and IMHO more visually appealing. It was very simple to do for me. I replaced the standard Image Stack with an Image Hover Stack and dragged the photo I wanted to use into an image well and the text for the links into a text well. I should mention on a touch screen device like a smartphone or tablet, the image doesn’t disappear until you tap on it.


“Ninth“Tenth


Scroll down on pages that are longer than can be shown on your monitor and a top button appears automatically (right).


“Eleventh


Clicking on this button returns you to the top of the page.

The second item I added to these same page types was a Stack that senses where the user is on a particular page and once the top of the page is no longer visible displays a “TOP” button allowing the user to click on the button and return to the top. You can make the button look any way you'd like and customized the text. Once again I don't need to get my hands dirty using HTML. I just place the stack at the bottom of any Stacks page and my work is done. The stack senses where each user is on the page and detects their monitor size and displays the button when appropriate for each user's screen size. You will find this button on the Home Page, the Galleries Pages, Indexes etc. It is not currently on the Photos or Blog Pages. At this time it cannot be employed on this page.


“Twelfth


Having some of the images stored on the server & referenced from the server, called Image Warehousing, as opposed to referenced from my local drive makes for much faster upload times for me when I republish the site.

Another thing I did was something called Image Warehousing. This is where the images are housed on web server and not on my hard drive. Basically the images are uploaded once using my FTP client and my web software links to that location on the server. If the images are warehoused, they are uploaded once unless I need to change them. If I don't warehouse them I end up uploading them each time I upload the site after a major change. This has big advantages for me because there is less data to upload each time and the size of my site files are smaller. All of the pages I changed to use the Image Hover Stack described above had their images warehoused. This reduced the size of my 4 site files down between 10-15 percent. There may be no tangible benefit to the end user other than indirectly. I will be able to update my site faster, because there is less data to upload each time.


“Thirteenth


I can now have more than one movie on each Movie Page Type, I have total control over the page’s appearance and the movies are Warehoused on the server minimizing my upload time when I republish the site.


“Fourteenth


The Movie Page uses a RapidWeaver Stack called Sym Video. The little text blurb you see at the top of the page is invisible to you but contains all of the HTML magic that lets the Movie page decide wether to serve the movie up as HTML 5 video for Web Kit based browsers or Flash video for FireFox. That little stack at the top of the page does all of the heavy lifting.

The last item I added was some more movies to the site. Up until the advent of Stacks 2, it wasn't really practical for me to put more movies on the site because they were housed on my local drive and made the site file huge. With the advent of Stacks 2 I was able to use a new plug in for HTML 5 based video. It allowed me to warehouse the movies and it also automatically deals with browsers like Firefox that don't use HTML 5 yet for their video playback. This new video stack, called: Sym Video automatically launches a built in Adobe Flash based player when it encounters a browser that doesn't support HTML 5 based playback. Before this if someone visited my site using Firefox and tried to play the video, they would not be able to. Now a Flash based player automatically launches. Now I want Adobe Flash to go away and die a quick death. The sooner the better. But until Firefox supports HTML 5 based video playback, this is a good compromise. I will cover the movies in a separate blog entry called LIGHTS, CAMERA, ACTION.

So while I haven't been out at the grill or smoker and adding photos to the site, I have been working on several behind the scenes items for this web site. I hope you enjoy the new cleaner look for the site and some of the other usability tweaks I've made.

  BACK TO BBQ BLOG 2012
  ARCHIVE OF BLOGS: 2012
  INDEX OF BLOGS: ALL YEARS

blog comments powered by Disqus