Official website and 2nd art show acceptance

Last week I received my 2nd art show acceptance letter (chronologically, this show will be my first). It's for the Livonia Art from the Heart show on June 10-11th. I've sent out 3 more applications in the last couple weeks, but I'm still waiting to hear back. I've got 3 more shows I'm considering applying to this year, but trying to decide if they are worthwhile and if I want to drive that far (they are about 1 hour away). The application deadlines aren't for a few months, so I think I'll see how my first couple shows turn out.

The other news is that I've launched my official website for Ronald Frazier Photography.

http://www.ronfphoto.com

There's not a lot to talk about with the content of the website, so I'll take a deviation from photography to show off a bit of my inner geek and talk about the technology and design processes behind the construction of the website.

Goals

Of course, the primary goal of the website is to look good....good enough to help sell prints (especially once I get the ability for customers to purchase prints via the website). But almost as important is that the website is fast. Too many websites use a lot of graphics to make the site pretty, and it takes forever to even be able to see any content. Finally, the 3rd major goal was that the site render well in all the major browsers, even without plugins or javascript. This means not using Flash (which I personally dislike anyway).

Optimizing Graphics

The first step is to make sure all the images are as small as possible. For this, Photoshop's "Save for Web..." feature is absolutely critical. First, because it strips out all of the extra (non-visible) metadata that usually gets stored in the image. Second, because it allows you to very easily and quickly see what the results will be if you save the image with varying levels of compression or even using a different file format. It shows you both what the graphic will look like as well as an exact file size.

In addition to simply adjusting the file format, I also investigated where I could shrink the file size by splitting an image into 2 parts. I did this first with my logo. The top section of the logo is narrower than the bottom, so I trimmed off a bit of blank space on the right. I also did the same with my slides (film strip) at the top . I trimmed off the top and bottom black & white edges, put those in a separate png file (and used the same file for both the top and bottom edges). Having the edges separate allowed me to use a fairly aggressive jpeg compression on the slides (where the quality degradation's not as noticeable) without making the edges look bad.

These 2 techniques allowed me to shrink the images in my navigation header significantly. What started out as nearly 100KB worth of images now sits at under 30K. In addition, most of that space is accounted for in the 18.5KB slides. The second largest image is 3.5K. Also, since most web browsers will load at least 2 files at once, although the slides are a bit slow for a dialup user, the rest of the images (logo top and bottom, and the navigational links) will load right along side the slides, and they'll do so quickly. So even while the slides aren't fully loaded, The rest of the navigation will be in just a second or two.

Finally, even though the slide strip is 18KB, it is saved as a progressive jpeg, which means that the image loads incrementally. After the first 2.3KB loads (2 seconds or less), users on a slow connection will see a very low resolution version of the slide strip (on browsers that support incremental display). After 8KB it will be blocky, but the images will be recognizable. After the full 18KB loads they see the full resolution image. While this doesn't make the page load any faster, it makes it SEEM to load faster, which is what's REALLY important. I used this same trick on the other large images in the content area of my home page.

The above information is little more than simple graphical optimizations that should be well within the reach of any photographer who knows his/her way around a graphics program in even the slightest way. Next up is an optimization that's a little bit more advanced, but worth considering by anyone who is reasonably knowledgeable in web design.

Using CSS

My entire web site is designed around CSS. CSS is a technology well beyond the scope of this blog, but there should be plenty of CSS tutorials out there to get you started.

In a nutshell, CSS lets you simplify your HTML by moving all of the formatting information out into an external CSS file. It also makes it easy to set appearance attributes (default font, sizes, and color) for your entire website.

In the past, formatting on websites was done by putting everything in tables and then adjusting table dimensions and using spacer images to make everything line up. This has 2 disadvantages. 1) It clutters up your web page code with tons of extra tags, and every tag adds to the size of the file, which makes your page load slower. 2) Tables are very inflexible. Some layouts are extremely difficult (if not impossible) to do, and once you get it working how you want, it's even harder to make adjustments to make it appear a little different (moving one small image can wreck havoc on the entire page).

Using CSS allows you to reduce and simplify all of this. Your file sizes will generally be smaller (thus faster to load) and your HTML will be cleaner and easier to modify.

Combining CSS and Javascript

Now we are starting to get more complicated. Although not super advanced, we are now in the realm where you should have a little bit of software programming or web scripting experience.

Combining CSS with javascript also allows you to do some cool things. Take a look at my "SHOWS" page and notice how the show information is collapsible. This makes the page look more organized. When the user first loads the page, they don't have to be bothered with all the extra details about each show (time, address, notes, etc). Instead, they see a simple and concise listing of the shows, which they can then expand for more details if they are interested. This is done by using javascript to dynamically change the CSS class of the tags in the page.

Of course, its important to make sure your website still works properly if the user has javascript turned off in their web browser. In the case of the "SHOWS" page, the user will see the full cluttered list of information. It may not be ideal, but it's about the best you can do.

Also, I should point out an optimization I use. Almost all of my javascript is in an external javascript file. The advantage of this is that once a visitor loads the file once, they don't have to wait for the javascript to load again each time they visit a new page.

Stepping up to AJAX

Now we are getting pretty serious. This isn't for those without a decent amount of software programming experience. However, even if you don't have what it takes, please read on to see what I'm talking about so that you know what is possible. It might make you want to hire someone to do it for you, or even be the motivation to teach yourself how to program.

AJAX is a combination of Javascript, CSS, XML, and server-side scripting (such as PHP, which is what I use). AJAX allows you to load data into your webpage dynamically. The advantage of this is that you can update small segments of your page WITHOUT having to reload the entire page.

Take a look at my gallery. Of course, make sure you don't have javascript disabled. When you first enter it, what you see is the left menu and a bunch of empty space. In that empty space are 3 more empty boxes (div tags), waiting to accept content. When you click on a link from the left, the second box gets loaded with some new data from the web server...in this case, it contains 4 thumbnails, and optionally some up and down scroll arrows. The interesting thing you will notice is that, other than that box with the thumbnails, the rest of the page does NOT reload. Now, click on one of the thumbnails. When you do, once again, the page does NOT reload, but now you get a larger image in box 3, and a bunch of information (title, location, etc) in box 4. Now, in the thumbnail box, click the down arrow and you should see up to 4 more thumbnails get dynamically loaded and scroll into position while the old ones scroll out of view.

So how does this help? As stated earlier, only certain sections of the page need to be updated. This means the user doesn't see the rest of the page flicker as it reloads. In addition, the amount of data downloaded from the web server is considerably smaller. As an example, for the 4 steps above (load the gallery, select lighthouse, click on the first lighthouse, then click the down arrow), without the use of AJAX the pages are 4.3KB, 5.4KB, 6.0KB, and 5.2KB in size, respectively. That's a total of 20.9KB of data to be downloaded (not counting images). On the other hand, using AJAX, the downloads are 4.3KB, 2.5KB, 0.8KB, and 1.3KB in size respectively, for a total of 8.9KB. It's very easy to see how much faster this could be for a user on a dialup connection.

A side benefit of using AJAX to load the galleries is that I can do interesting transition, like the way the thumbnails scroll in, rather than appearing in place immediately.

Of course, once again, the site needs to be fully functional if javascript is disabled. I accomplished this by making each clickable link (the left menu items, the thumbnails, and the scroll arrows) so that it reloads the entire page with the correct contents in each block. However, when javascript is enabled, the javascript overrides the link's url and initiates the AJAX action instead.

Conclusion

A lot of the motivation for doing these optimizations comes from wanting to make the page load quickly for dialup users. However, some of you may be thinking "who cares about dialup...most of my users have broadband". Well, despite the fact that you are probably wrong, even if we assume that's a correct statement, these optimization will also benefit a user with a high speed connection. During peak times of day, even fast connections can get slow, and using AJAX to avoid reload flicker make your website more visually enjoyable to everyone at any speed.

Well, I hope this gave you some useful ideas for how your web page can be optimized for better performance. There should be at least something in here for everyone, regardless of experience level.