CSS Web Design Help

I was recently at a web accessibilty workshop and 1 of the folks in the class said he didn’t know how to add a photo with a caption to a web page without using tables.  I realized that there are still web developers out there relying on tables for the structure of the sites that they build.  As we move towards compliance with legislation such as the Accessibility for Ontarians with Disabilities Act (AODA) or Section 508 in the U.S., there are still lots of web designers that need to learn a new way of building web sites.

So, for those of you out there still using tables for captioned photos, here’s a quick tutorial.  If you want to jump ahead to the finished result you can view an example here.

First, the HTML:

This concept relies on floats to work. I generally structure the page with the heading tag first, then the container that holds the photo and the caption, followed by the content of the page.

<div id="container">
  <h1>Images with Captions - No Tables Required</h1>
  <div class="captioned-img">
    <img src="img/molly-the-kitten.jpg" alt="Photo of Molly" />
    <p>Photo of Molly as a Kitten</p>
  </div>
  <p>Example of a captioned photo created without using tables ...</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</p>
  <p>Ut urna urna, rhoncus eget, vestibulum tempus, venenatis ...</p>
</div>

Next, the CSS:

To get this to work, you only need to define styles for 2 elements. First, we float the container holding the image to the right and style it. I’ve also styled the <p> tag that holds the caption to give it more punch.

div.captioned-img {
  margin: 0 0 10px 10px;
  padding: 5px;
  float: right;
  clear: right;
  border: 1px solid #333;
}
div.captioned-img p {
  font-size: 1.2em;
  color: #222;
  text-align: center;
}

This is a simple yet effective way to create captioned photos without using tables.  Best of all it’s browser friendly - yes, even IE 6 plays nice.

I have an iPhone and one of the downsides of the technology is the lack of Flash support.  It really makes you aware of how pervasive Flash has become in websites, even for small elements of a site.

I’ve never been a big proponent of Flash - we do next to little of it in our design shop - so I was delighted to discover an alternative that gives the illusion of Flash using what’s called the jQuery Cycle Plugin.  There are enough options to keep most folks entertained.  I haven’t had a chance to use it yet so don’t know the ins and outs of it but I have a new client in mind that I think it will be perfect for.

Sure, it’s not going to give you all the bells and whistles a decent Flash file will give you but it will give the ‘ooh, ahh’ factor that some sites crave.

I’m always on the look-out for great tools and gizmos to use in our client sites and I’ve come across one I really like.  Animoto lets you take your photos and turn them in to a video with music all with the click of a few buttons.

There are really only 2 steps to the process:

1. select and upload your photos
2. select your music - yours or one from the Animoto library.

While you go top up your coffee or feed the cat, Animoto analyzes your pictures and music, creates a professional video and sends you a link to it when your done!  They also make it easy to embed your video into your website, make it iPhone ready, post to YouTube and more.

I signed up for the free version to create my video but they also offer products for business, photography, education and facebook.  Be sure to check out the case studies to see how folks have been using it.    I think the possibilities are endless.  What are you waiting for?

I’ve been setting up a few blogs for clients lately.  For blogs, I like to start with a template that’s ready to go for widgets and other niceties and then customize it to work with the client’s visual designs.

For the latest one, I based it on Abstractia, a beautiful template by Robin Goodlatte (btw, love the last name).  I had anticipated keeping most of the extras including the footer mod but opted out of them in the end.  I did update the sidebar template to make it widget ready - the only shortfall of this design in my estimation.

Robin’s theme uses 4 style sheets - style, typography, colors and layout.

Abstractia Style Sheets

I recognize that many designers prefer this method - helps to keep things organized.  I often use separate style sheets for resets or specific plug-ins.  But for the general element styling, I found it much more difficult to work with, perhaps because it wasn’t something I had built from scratch.  It wasn’t completely intuitive to me where to look to change the styles for elements.

In the end, I consolidated everything in to 2 sheets - style and typography.  For the curious, here’s the finished blog for our organic gardening client.

Finally have a bit of breathing room to write a new post.  We’ve been busy here - no complaints.  Some of our recent projects have helped me stream-line the development process and others have pointed out where our processes still need improvement.

Since we started in the web development business, we’ve followed this basic process:

1. gather client requirements
2. create the visual design for the site
3. get sign-off on the visual design
4. build the site
5. launch the site

For the most part, this process has worked well for us.  We’ve found that clients really need to see the visual concept to get a handle on what the final product is going to look like.  On the down-side, we get visual sign-off, build the site structure then wait for content.  That waiting can take a long time with some clients - they don’t relish the idea of put words on a blank page (as a blog writer, I can empathize with them whole-heartedly) - sometimes months and even longer.  We’re left with projects just hanging.

So, that’s made me wonder if we’ve been taking the best approach.  Should we switch the process?  Get the content first then develop the design and build the site?  Will that speed things up at all?

That said, I have found ways to speed up the development process at the back-end by creating libraries of common code clips, standardized css files, favourite plug-ins, etc.  Once we have visual sign-off and content in hand, we can turn around some simple sites quickly.  This also opens the door to handing-off development to a new employee or outsourcing development when we need to manage an overloaded production schedule.

I’ve just added a cool new tool to the blog that’s a must have for anyone who likes toys. Woopra provides easy to use, real-time tracking, live chat and analytics for your blog. And it does it with a visually appealing design that makes you want to spend all your time watching the live show.

Woopra is still in beta testing at the moment so the service is free. You need to request an account to get access to the beta. If you work on a Mac, don’t go with the general download release. Instead, go with this release candidate that gets you around the Java issues. It worked like a charm for me.

Once Woopra is officially released, they’ll be offering free and paid plans - no word on the price points though. Not sure if it will still be as cool when plans are announced but it’s worth experimenting with it in the meantime.

Every page we create for the web needs a name.  If you’re using a CMS or Blogging software such as WordPress, the task of creating urls might be done automatically for you.  There really isn’t a standard for urls - or at least not one that I’ve come across - so you need to create your own naming conventions for the site that you build.

The way I’ve named pages has changed since I first started developing sites.  With search engine ranking becoming more and more important to our clients, I now name pages with search optimization in mind.  With this medical associates site , I choose to match the names of the sub-pages to the navigation.   For example, the General Surgeons page is named general-surgeons.php, the Office Policy page is called office-policy.php, and so on.

Now, it can be very easy to get carried away with the number of words that you use in an url and that may have an impact on a site’s SERP (search engine results page).  Try to keep the length to 3 to 5 words and you’ll probably be fine.

Word length is just one of the things to keep in mind when you create your naming convention.  Follow these other best practices if SEO is important to your client (and it probably is) to help boost their rankings with the likes of Google.

Building websites with CSS is pretty easy once you get the hang of it.  Letting go of tables when it comes to forms can be tough.  Tables make it easy to lay out orderly, nicely styled forms but they’re not accessible making form-filling difficult for anyone using a screen reader.

Enter CSS and semantic HTML.  Of course, before you do anything with CSS you need to get your HTML in order.  This has to be the definitive article on good HTML form design without the use of tables .  Adams first walks you through the necessary elements of a good form.  Once that’s in place, he provides a step-by-step guide to styling that form.  The end result is stylish and user-friendly at the same time.

I’ve long been a fan of Firefox both as a browser and as a web developer. If you haven’t jumped on the Firefox bandwagon yet, get yourself a copy of the latest release here and start having fun.

If you’re just starting out with CSS, the Firefox Web Developer toolbar is a must have. Like a lot of web developers out there, I start my browser testing in Firefox and then tweak for the others after. Once I’ve got my basic code in place, I fire up Firefox and start the fine-tuning.

The beauty of the Web Developer toolbar is the ability to edit your CSS file directly in your Firefox window and see the changes immediately. This is great for fine-tuning font sizes, div sizes and other core components. But I also find it handy for diagnosing issues I’m having with the CSS.

For example, with the Firefox Web Developer toolbar, I can outline my divs or images to see why my floats aren’t working as expected - it’s great for highlighting oversights I’ve made in my pixel settings.

The toolbar also has built-in validation tools to make sure your code is up to snuff with web standards. Nothing like seeing that green ‘congratulations’ bar show up!

Thanks to my buddy Nate for passing this one along.  As my co-workers can attest to, testing for cross-browser compatibility is not my idea of fun.  Well, Anthony Short has done a bang-up job of sharing some best practices for achieving cross-browser compatiblity on the first go-around.

Some of the tips are pretty straight-forward - using a doc-type and resetting your css at the top of the file (Eric Meyer’s reset is an excellent choice).  Others I hadn’t considered - avoiding Lucida (although that is really just common practice for us) and using some clean-up techniques for font rendering.

Anthony’s article is a must-read - clean, concise and useful!