Susannaspeirs.com

A small site for a professor at Cal State University, Long Beach. She wanted both a portfolio to show off her metal works and a page or two to show off the metal studio at CSULB.

I coded the selected works page to dynamically put the thumbnails of the different works on the page, so when a new work is added, we don’t have to do any coding on that page.

The navigation bar at the top, with ‘hanging’ sub-nav, was a challenge. I almost resorted to making it out of graphics, but figured out a way to use the code for css drop down menus, so it’s all text, html, and css.

Graphic design by Cornerstone Coding (me)

You can view the site at www.susannaspeirs.com.

5 Things to Check Before you Launch a Web Site

I’m joining Instigator Blog for Blog About 5 Things Week. Since I’m finishing up a few web sites, thought I’d jot down 5 things we should all check before launching a site.

1. Spelling

Always a pain, but necessary. Nothing turns me off more than a spelling error on a web site (even a blog, though I’m a bit more lenient there).

2. Print CSS

At the beginning of each project I create a print css file, but have to remember to put the necessary CSS rules in there at the end of the project. Nothing fancy, but IE on Windows really doesn’t like anything floated (it will often print just every other page, floating the other ones off the edge, I suppose) and I have to make the main content area narrower so that IE doesn’t cut it off. I also usually take the nav out.

3. Old Files

I always seem to have a few of these laying around the site: duplicates of the real files, graphics I didn’t use. It’s a good idea to get rid of them from your local site and the remote site.

4. Image Alts & Link Titles

It’s easy to be a bit more accessible and search engine friendly: make sure all your images have an alt tag on them. I don’t use a lot of images in my web pages, so it’s easy to quickly take a look and check. You might also check your links, see if you have a title attribute for each.

5. Page Titles

When I’m doing a lot of search engine optimization for a site, the page titles are all full of good keywords, but one or two pages may have the default (usually name of the company, heaven forbid if it just says ‘untitled document’). I do a quick go through and make sure I’ve got the titles in there for all of them.

Catching Action with a Digital Camera

A lot of people have a love/hate relationship with digital cameras, love the instant gratification of being able to see the photos on the LCD, hate the lag between the time they press down the shutter release button and when the camera actually takes the picture.

You can miss a lot in that fraction of a second, especially if you’re taking a picture of something moving fast, like a dolphin jumping out of the water. With two quick tips, you can learn to get rid of that lag.

Tip 1

Press the shutter release halfway down. This will make the camera focus and take a light reading. Now, it’s ready to take the picture right when you push the shutter release all the way down.

Tip 2

You’re probably planning to take a picture of something that isn’t there (like that dolphin that’s under the water when you focus where it’s going to be jumping), so focus on something that’s in the same place. I usually choose the ground where I know they’re going to be (or the water) and then move the camera up (still holding down the shutter release half way).

Tip 2.5

To be able to focus exactly where you want, you need to set the auto focus to focus only in the little square in the middle. Recent cameras are ’smart,’ they try to guess what you want in the frame in focus. You’ll have to read through your manual so you can set the focus to the center square.

Here are a few photos we took at Sea World (one by my daughter, who’s 9 years old, so pretty much anyone can use this technique):

Stage 1: Organization (Anatomy of a (Small) Web Design Project)

This stage is all about asking questions and gathering answers. We want to cast the net wide, get as much info as we can and then organize all that info into the web site. Here are the main questions I ask (I’ll go into more detail on each below):

• What goes on the site (and where does it go)?
• How will people find the site?
• Where will we grow?
• What do we need?

What goes on the site (and where does it go)?

The road to getting this answer is pretty easy. I run through a short list of questions and see where they take me:

• Why does your organization need this web site?
• Why do your visitors need this web site?
• Who are your competitors?
• What web sites do you like?

If this is a redesign of an existing web site, I also ask:

• What works on the site now?
• What doesn’t work on the site now?

The point of these questions is to find out the goal of the web site (why the organization needs it combined with why visitors need it), who the visitors will be, and what should be included in the web site. Incidentally, this is one of my favorite parts of the whole process because I get to learn as much as I can about a business I often know little about.

Web Site Audits

Any time a client mentions a web site, I take a look at it. If it’s important (the client’s current site or a big competitor’s site) I’ll jot down a quick web site audit. I take a look at the following areas and note the good and bad in each:

• Usability
• Findability
• Download Time
• Scalability

How will people find the site?

Once I have a handle on what’s going on the site, what the site needs to accomplish and who’s going to visit the site, I look into how people will find the site. Ah, you think, Search Engine Optimization (SEO for those fans of acronyms out there). Well, yes, that and more.

I remind the client to put their web site address on every piece of marketing material they have: letterheads, business cards, email signatures. And ask the client how they think people will find the site? From that answer I can gauge how important Search Engine Optimization is for this site.

Search Engine Optimization

Usually, I make a little side trip at this point and explain what I mean by Search Engine Optimization. The basic idea isn’t very complicated. There are lots of people out there using internet search engines to find what they are looking for. Basically, the search engines work like a huge text database of the pages that they index. When someone types in some search terms, the search engine examines their database and gives back pages that represent those search terms.

How do they know what pages represent the search terms? They look at the text on the page and see how many times the terms appear, where the terms appear (page title, in headers) and usually add in some arcane formula to try and evaluate how ‘good’ the page is. Having lots of links to the page may weigh into this, being part of a popular site may also weigh in. You can read as much as you’d like about Search Engine Optimization on pages like the Search Engine Optimization article on Wikipedia.

While we may not be able to control how ‘good’ Google thinks our site is, we can control the text on our pages and while we’re writing our text we need to weight the user’s needs with the search terms we want to target. Now’s the time to brainstorm a bit and come up with search terms we want to target (how to do this is a bit beyond the scope of this article, so check out this one: Search Engine Optimization Basics: Part 1 - Keywords)

Where Will We Grow?

Before we start to code a single page, we need to think about how this site will grow in the future. The idea is to make sure we’ll be able to scale the site easily as it grows. Now’s the time to brainstorm everything that could possibly go onto the site and put that in the organization.

Also consider:

• Who will be updating the site?
• How much web design experience do they have?
• Will they require training?

The answers to these questions help me decide how to code the actual pages later on.

What Do We Need?

Finally ask these questions:

• Does all the information for the web site already exist somewhere (perhaps on the old site) or will it have to be written and approved?
• Do we need software for different elements, like forums or a content management system?
• What about photos or illustrations?

Just by asking the questions, I get the client thinking about what they need to do and I can make sure my estimate is as accurate as possible.

Final Products

So, what comes out of this phase? The road maps for the entire project.

Web Site Organization Diagram

This diagram shows roughly what pages will be in the web site and what information goes on those pages. This is the diagram that is the base of all the work to come.

Proposal

The proposal includes a cost estimate, overview of the web site that will be delivered, requirements and schedule. I refer back to this throughout the project.

TriDivas.com

The TriDivas are a triathlon training group for women. The group started in Southern California, but through use of the web site is expanding across the United States. Offerings on the web site include information on training workshops, online coaching, upcoming camps and clinics and how to purchase TriDivas logo race and active wear.

The site was designed to be expandable, so that it can immediately reflect any changes in the TriDivas programs and offerings. We also employ several different technologies in our offerings, including password protected online schedules for the workshops, online training logs from workoutlog.com for the online coaching, paypal payment for the store items, and registration through active.com for the workshops, camps, and clinics.

Graphic design by Lety Juarez.

Visit the site at www.tridivas.com.

Lounge

To expand the TriDivas.com site into a more interactive site, we added the Lounge. This area allowed quick updating by the owner of the site and a members only area for paid subscribers. There’s also an integrated calendar. All the new information automatically shows up on the home page, making it very easy to keep updated.

The site is powered by geeklog. The graphic design is from the basic geeklog layout that I changed to look more like the tridivas.com site.

Visit the site at www.tridivas.com/lounge/.

PR Racing

A small web site about three races in the New Jersey area. Besides making sure the info was easy to find, I created the header graphic to brand the site and help the visitor figure out what the site’s about with just a glance.

Visit the site at PR Racing, Lake Lanape Tri page.

CSS Mastery: Advanced Web Standards Solutions

Another CSS/Web Design book from Friends of Ed. After reading and loving Web Standards Solutions (see my review), I was really looking forward to this book.

Unfortunately, I was mostly disappointed. Not that this isn’t a good CSS book, but it’s 2 years after Web Standards Solutions was published and it’s covering basically the same ground: lists, backgrounds, and forms. The new information wasn’t that interesting to me:

Image Replacement

I’ve read a lot about image replacement, i.e. ways to replace text like an h1 at the top of a page with a graphic of the company’s logo. I’m just not convinced that the benefit (searchable text at the top of the page, more accessible than using an alt tag) outweighs the hassle (lots of different hacks to make sure it works without css, without javascript, in the readers for the blind, etc).

Hacks and Filters

I don’t like to hack my CSS. I’d much rather add either an extra div or an extra css rule or two and make it work in all browsers. That way I don’t have any surprises with the newer browsers.

Bugs and Bug Fixing

Every bug list seems to be missing the bug that I’m currently wrestling with. Same thing here.

Plus Side: Case Studies

The case studies were interesting for seeing how a particular web designer approaches a project, but felt kind of tacked on.

In the end, this wasn’t the book for me. I didn’t need the information on the advanced techniques and I already knew the intermediate techniques.

You can check out CSS Mastery (and other web design books) in the Cornercode Amazon Store.

Anatomy of a (Small) Web Design Project: Overview

I’m going to take you through the design of a small web site in 6 articles. I’ll start with an overview of the process.

Why is the word ’small’ in the title? Because that’s the kind of web sites I have experience with. My sites usually have between 5 – 25 pages. I don’t have to manage a team, at most I have one other coder or graphic designer working with me. So, read the following information with that in mind.

Here are the stages I go through in a web design project. I’ll go into more detail on each in the articles to come:

Stage 1: Organization

Figuring out what goes on the site, what the site is supposed to accomplish and planning Search Engine Optimization.

Stage 2: Layout

Actually figuring out the layout of each type of page with attention paid to site branding and navigation.

Stage 3: Coding

Creating the templates, includes, and pages of the site, adding in the outside programs involved like forums or shopping carts and putting the content on the pages or in the databases.

Stage 4: Testing

Trying the pages in the problem browsers (yes, this means IE on Windows). checking the links, and spell checking, basically making sure the site works.

Stage 5: Launch

Launching the site and submitting it to search engines.

Each stage isn’t completely distinct from the others. For instance, I do a fair bit of testing in the coding stage, but I still need a testing stage to make sure I’ve hit everything. Each stage also builds on the ones before it. This means that Stage 1 is the most important stage and it’s usually the one that’s skipped or skimped on the most often.

I look at the whole process as building a pyramid. To create a good, solid web site, the whole process should look like this:

Not like this:

Where each layer represents the time and effort put into that stage.

The benefit of doing it the first, stable way, is that all the effort put into the organization stage pays off in easier, quicker layout, coding, etc stages. And, errors are caught early. Even though I do a testing stage near the end, I don’t expect to catch any major, site altering problems at that point.

Next article: looking at the Organization Stage more closely.

Navigation Questions: One of These Things Is Not Like the Others

I read Derek Pawazek’s article, Where Am I?, in A List Apart a few weeks ago and have been thinking about it ever since (another good ALA article, apparently). What I’ve been ruminating on are the three questions the article says all navigation should answer:

1. Where Am I?
2. Where Can I Go?
3. Where Have I Been?

On the surface, the three questions seem to go together. They are all questions that a user will probably ask themselves after landing on a page (whether they realize they are asking them or not). They all start with the word ‘where,’ but I don’t think they are all about the navigation of a site.

The first two questions are about the site (what page am I on, what else is available on this site). The last one is about the user (what have I been doing).

As the designer of the site and the navigation, I’m qualified to tell the user about the site. The user is really the one who can answer that last question by using their browser history or the back button.

If they land on my page after a long session of surfing out on the web, it’s not my job to let them know where they’ve been. And I’m going to go out on a limb here and say it’s not my job to let them know where they’ve been in my site.

Take the metaphor of shopping in a store (Steve Krug in Don’t Make Me Think uses this metaphor): the site’s navigation is like the signs in a well laid out store. It tells you what section you’re in and where in that section you are. You don’t get a little dotted line that shows you where you’ve been (à la Family Circus).

Instead, my job is to make the navigation so easy to understand that users can glance up and think, oh, yeah, I’ve been to section 1 and 2, I’ll try 3.

But What About Breadcrumbs?

Actually, I like breadcrumbs for a large site, but I don’t like real breadcrumbs that show where I’ve been, I like the fake ones that show the structure of the site:

Home > Main Section > Sub Section > Sub-Sub Section.

This kind of breadcrumb helps answer questions 1 and 2, not question 3.

Pentax Optio W10

We got a new camera for our trip to Hawaii at the beginning of August. We didn’t go out looking to buy a new camera. Here’s what happened:

We really wanted to take pictures underwater. We had two digital cameras, a Canon Powershot G6 (7.1 Megapixels, pretty expensive and we love it) and a Nikon Coolpix 2100 (2 Megapixels, cheap and we don’t particularly like it).

So, we looked into getting an underwater case for one of the two cameras. We’d rather use the Canon, but had killed its predecessor on Maui using an underwater casing. We found a casing for the Kodak, but were reluctant to spend $150 on a casing for a camera that we really didn’t like using and didn’t have much resolution.

I started to look at underwater digital cameras. At first, I thought we could find a cheap one like the disposable underwater film cameras. Nope, but I found this camera: Pentax Optio W10.

It was $260 from Amazon when we bought it (take a look in our new Amazon Store: Pentax Optio W10). It’s waterproof (though they’ll only say it’s good for a depth of 1.5 meters) and dustproof, has 6 megapixels resolution and a large LCD. The reviews looked good, so we went for it.

And we’re happy we did. The camera isn’t perfect, but for the price and for taking pictures and movies underwater, it was fantastic.

Plusses

The camera operated as advertised underwater. The only opening is a single cover for the battery and memory card. It’s easy to open and easy to close. The little toggle has orange behind it so you know when it’s closed correctly.

The LCD is large, it can get washed out in bright light, but I managed to use it underwater. The size of the camera is just about perfect, small enough to fit in a pocket but not one of the credit card sized cameras that are awkward to hold. And it’s pretty tough, it survived a 6 foot fall off the porch of our vacation rental.

It has a dozen plus modes, which were fun to play with, though it took me a few tries to get the settings for the focus and exposure like I wanted them (focusing at the center of the LCD, then keeping the focus when I recompose the shot).

The pictures looked good to me and it takes nice, high quality movies. Take a look:

Minuses

The focus was a bit finicky compared to our Canon. There were times when I couldn’t get the Pentax to focus, even on distant objects, when the Canon would focus fine. Low light focussing was also difficult.

Some people complained about the wimpy chord on the camera, especially since you’re taking it into the water. We solved that problem by attaching a boogie board leash that we could Velcro around our wrist when we used it in the water. Worked just fine. It was also easy to tuck into our wet suit.

Probably the worst flaw is the sound when taking movies. This is something I read about in some of the posts about the camera. And now I know what they are talking about. There’s a loud clicking on the sound track of the movie, much louder than anything else that’s recorded. It makes the sound function unusable. But, I know what’s causing it and how to stop it: the sound is the lens auto-focusing. To prevent it: set the focus to pan focus (which is a 4 click process, not too bad). Wish I’d researched that while I was in Hawaii and used the fix.

You can check out the Pentax Optio W10 camera (and other cameras) in the Cornercode Amazon Store.