How Americans Spend Their Day

Maybe it’s the scientist in me or maybe it’s the communicator (because isn’t raw data the very building blocks of communication), but I love data. Data on just about anything: animals, web trends, weather, etc. And put that data into a colorful, interactive package and what could be better?

The NY Times did just that with an interactive graph of the results of the American Time Use Survey:

How Different Groups Spend Their Day

Beautiful graph, well implemented on the web. I can rollover it and see that when I go to sleep (between 8:30 and 9 pm) only 8% of Americans are sleeping. And I can look at what just women are doing by clicking one of the buttons on the top or I can break out an activity by clicking on it. Very well done.

Bookmark It

Hide Sites

Whenever a client wants to have a blog on their website, I caution them that they need to set a schedule for posting to that blog because one of the first things I look at on a website is the date of the last blog entry. Theoretically, if that date is well in the past it’s an indication that the website is stagnant (and possibly the business is dead or dying).

Trying to keep up with my own blog when I’m very busy made me re-think what a stagnant blog may really mean. I haven’t felt like I had the time to post because I’ve been working so hard.

But it hasn’t changed my mind about needing a regular schedule of posting to the blog. I still think that people will look at the dates of the blog entries and even if it means that the company is busy with off-line work, it can still be used to indicate whether the information on the website is up to date and accurate. If they haven’t had time to post, they probably haven’t had time to update their hours or put up their newest specials.

So, you still need a regular schedule for blogging. It keeps you hooked in to the world wide web, it puts more stuff out there for Google to index and people to find.

Bookmark It

Hide Sites

I’ve been playing around quite a bit lately with image replacement, which means that I put text on the web page and then use CSS to replace that text with an image. So, when someone is looking at the page with a browser, they see the nice graphic. If google looks at the page, it will see the text and index it as part of the page.

Theoretically it’s the best of both worlds, but in practice it can be a little hairy. One problem is that no one has come up with the very best text replacement solution. Every method has its drawbacks which are usually related to how the page looks in a variety of situations like with images turned off but CSS turned on (that one’s tricky). There are also design considerations. If I want to use a nice transparent ping for layering then I can’t use the method that just puts a graphic over the text or the text will show through.

Add to all this complication the fact that I’m not just replacing a title usually, I want to replace navigation, which means I have rollovers, I have links on the text, and I have headaches.

I have settled on a method that I like, that’s flexible and that’s easy to use. I didn’t discover this method, it’s credited to Mike Rundle and referred to as the Phark Method (according to CSS Tricks). Basically it styles the tag holding the text to the correct size of the graphic, pushes the text off the page so that you don’t see it and then puts the graphic in as the background of the tag.

I’ve used this for navigation (augmenting it with the IE 6 no-flicker trick of putting the image in the background of the a and the li tag, I told you this could get complicated) on several sites. I also usually user the sliding door css background for the hover and unhovered states of the link, so that the images for the nav are really in one big image that I just move around in the background.

And all of that together winds up in a navigation bar that most people probably don’t even notice because it looks nice and works correctly. There a job well done.

Bookmark It

Hide Sites

Maybe it’s because I live in a small house and have been on a simplify and unclutter kick for the past year and still going strong (great blog – unclutterer), but it makes sense to me that you your website needs to be organized and uncluttered.

And how do you design an organized/uncluttered website?

You map it out at the very start of the design or re-design process.

I hesitate to call the document I create a Site Map. That term has too many other meanings. This isn’t the page on your site labeled ‘Site Map’ that helps users (and maybe Google) see what’s on your site. It also isn’t the XML document that you upload to your host called a Site Map that Google and other web spiders use to move through your site.

This is a document that shows every page of your site and where each of those pages go. And yes, every page should go somewhere. It can also show whether the pages are dynamic, what databases will be required for the site, where you’ll need Flash or other media, maybe even what kind of coding you’re going to use on the site.

The best thing it provides is an overall picture of the site, something everyone can look at and understand. Once it’s been finalized, it gives me a road map for the project, letting me know how much more I need to do at every stage and when I’m finished (it can be surprisingly hard to figure out if you’re finished with a website or not, because they are constantly changing).

Next time I’ll talk about actually making the Map. Don’t worry, it’s not hard, you could do it on cocktail napkins (though that’s not my normal method, I don’t have enough cocktail napkins lying around).

Bookmark It

Hide Sites

A lot of people have heard about blogs (web logs, a site where someone or a team of someones posts short articles on a particular topic) and I use blogging software (Wordpress, to be exact) on some of my sites because it makes it very easy to set up a blog and to set up a simple web site that the client can update and change themselves.

But, should every web site have a blog or be a blog?

I don’t think so.

If you have something to say that may be of interest to your clients, then a blog is a good way to get that info out and make it easy for you to put up posts regularly. Does that help your business? Yes, it shows that you know a bit about what you’re talking about, lets clients get a feel for you and how you work before they hire you, may even help a few people out and that’s always good.

But a blog can also do harm, especially if it’s set up and then not posted to regularly. I don’t think you need to post to your blog every day (as you can tell from my blog), but even getting a post up there every month can be a problem if you’re busy. And if you really don’t have something to say and you’re reaching for topics every time, it’s really hard to do. If a potential client comes to your site and sees you haven’t posted to the blog in 6 months, that gives a bad impression. It’s like looking in a shop window and seeing nothing but cobwebs and dust, you probably aren’t go to go in to buy something.

Not to discourage people from starting a blog, just think about how often you’re going to post and keep to some kind of schedule.

Here are a couple of links to blogs (of course) about blogging (or meta-blogs, if you will):

Daily Blog Tips

The Write Spot

Bookmark It

Hide Sites

The web is moving away from static sites towards dynamic sites, a trend that’s been in the works for a long time. You may have heard the term Web 2.0, this is the cutting edge of this trend, web pages that can be changed by the user on the fly, think Google Maps. But the trend is trickling down to even small sites.

Since most people want to make changes to their own sites and most of them don’t want to take a course in HTML programming and web design, I’ve been turning more and more to database driven, dynamic web sites. Usually, my client has no idea what I mean when I throw out those terms, understandably.

On the most basic level, a database driven, dynamic site is one that is created on the fly for each and every user from information stored in a database. For example, there’s Amazon.com. Unlike a static site, where you have a file for every single page, Amazon does not have thousands of files, one for each book, it has just one file that defines the layout for a book page, then fills in the info for an individual book from a database when a browser requests that book info.

But what does this mean for someone looking to create a small web site and keep it up to date themselves? It means that they can interact with the database (not as scary as it sounds as I’ll explain in a later post) and not worry about all the presentation details of the web site (colors, fonts, spacing, etc). When they want to change a word of a page or a description of an item, they can simply change the words in a database record and that change is immediately reflected in the site. The same goes for adding or deleting something (like a product) from the site.

It does require a different way of coding the site (using php instead of html, for one thing) and the site has to be well planned, or you’ll run into the old problem of not being able to put what you want up there, but it is a solution that lets you have a great looking site that you maintain yourself.

In fact, some people are already familiar with database driven, dynamic sites: every blog site is just that. And if you have a site that will have lots of content added to it, using blogging software (which is the database and the way you interact with the database) is a great way to quickly put that site up.

Bookmark It

Hide Sites

There’s a lot of discussion bouncing around the web design blogosphere about the number of women in web design, the number of women on web design panels and women in technical careers in general. Always good to read intelligent people discussing interesting, important topics. I would especially recommend Zeldman’s post: Women In Web Design and the comments to that post.

One comment that hit home was the first one, by a woman web designer, noting that 90% of her clients are women. I find that also true of my clientele. Does it matter that I’m a woman web designer (as someone else asked)? Well, I don’t think that I create ‘feminine’ sites that are somehow different from those created my male web designers, but I think it does matter in how I communicate with my clients.

We live in a society that still treats women and men differently. I have also noticed that male clients will pay attention to the other man in the room and never even look at me, even though I’m the web designer not the other man. Same thing happened to me as a woman engineer. As a engineer who minored in women’s studies, sometimes I feel like I’m not doing enough to change the status quo. Other times, I’m just tired of dealing with men who demand that I prove myself again and again and would rather go find some women clients who will actually listen to me and get on with the project.

That said, I’ve also worked with men who were great. I really don’t think it should matter if my clients are men or women and I try to work that way.

Oh, and I took the Web Designer Survey (if you’re a web designer, you should, too) from A List Apart. So here’s my badge showing I completed it and my answers will help us learn more about who web designers are:

Bookmark It

Hide Sites

This is the stage that most people identify with web design: actually making pages. Web pages are written using a markup language called HTML (Hyper Text Markup Language). I also use another language called CSS (Cascading Style Sheets) to actually format the text of the page and make it go where I want on the page.

Although the two languages are simple (especially HTML), once you put them together, you have many different ways to achieve the same page layout. It’s a little bit like building a house, I can use wood framing inside the wall or steel framing and you won’t be able to tell from how the house looks, but the house will react differently in an earthquake depending on what kind of frame is under its skin.

The earthquake analogy is apt because one web browser in particular is a lot like an earthquake: Windows Internet Explorer, the bane of most web designers existence. I can build a page using standard HTML and CSS. It will look just fine in the Firefox browser (Windows and Macintosh versions), in the Safari browser, and in any of the other web standards compliant browser. Then I’ll look at it in IE and the buttons disappear.

Or, even worse, I look at it in Windows IE 5 and 6 and it looks okay. My client looks at it with their computer and the buttons are gone. Why? Probably because of one of the known IE bugs like the Peekaboo bug. Then I go through and change all the CSS, winding up with a page that looks exactly the same as before, but hopefully displays correctly in all the browsers this time.

Besides static pages, there may also be forms to create and scripts to write so that the forms actually do something. I usually use includes on my pages. That’s a way to write a piece of code (say the navigation) just once and have it show on every page on the site. Makes it much easier to update the navigation. I just change one file and every page that uses that include is automatically updated.

Of course, it’s not all coding at this stage. I’m also gathering graphics and optimizing them for the web. That means that all the graphics are converted to either JPEG’s or GIF’s and they’re compressed so they don’t take too long to download. Optimizing graphics is a bit of an art. There will always be a trade off between looking great downloading quickly. It’s true that more people have fast connections these days, but the fact is that no one ever left a web site because it loaded too fast. Plenty of people have left web sites because they loaded too slow.

Because my clients usually want to be able to make updates themselves to their web sites, this is where I’m either making templates (so that the client can use Adobe Contribute to update the web page content themselves without destroying important things like the navigation) or creating databases and dynamic pages so that the client can update the database and the pages will be automatically updated.

Many clients seem surprised that they need a special program to make changes to their web pages. Perhaps the fact that they can see web pages with their browser leads them to believe that they have all the tools they need to change the pages. The fact is, they do have the tools (it just takes a text editor), but they don’t have the know how. Contribute is a great program that works kind of like Word for the Web. They can easily edit the text on a page and keep it up to date.

Lately I’ve been using a php program called DaDaBik to create frontends for MySQL databases. I’ll write more about that in a future article.

At the end of this stage, I have all the pages created and I’m ready to test them.

Bookmark It

Hide Sites

Kind of an extreme heading, but that’s how I feel. It all started with a client sending an email noting that some of the computers in their office couldn’t see three graphics on the home page. Three kind of important graphics because they are of sponsors of a major event and it’s important that everyone can see the sponsors’ logos.

I looked at the site with every browser I could get my hands on (safari and firefox on the mac, ie 6 on windows, ie 7 on windows) and I could always see the graphics. I happened to be going in for a meeting to that client, so I spent some time there troubleshooting the problem.

First strange thing was that it wasn’t just that the browser (IE 6 or IE 7) wasn’t showing the image, the entire tag was gone, erased from the source of the page. That made me think it was some kind of security software doing it.

I couldn’t figure out the difference between the computers that saw the graphic and those that didn’t (all were Windows XP, the browsers were either IE 6 or IE 7), but their computer guy figured out that it was Norton Internet Security.

I did a little searching on the web, now that I knew that Norton was the culprit and found this web site: http://menumachine.com/mm1docs/instruction_pages/troubleshooting/norton.html, a troubleshooting guide for something called MenuMachine. It very clearly says that Norton Internet Security uses a clumsy method of blocking ads: it looks for certain strings in the name of the file. These strings include ‘ad,’ and ‘advertisement,’ no surprise there, but they also include ’sponsor’ and that’s where my trouble was.

As I said before, the graphics that were disappearing were sponsors’ logos and I put those graphics in a folder called ’sponsors.’ And Norton Internet Security then deleted those graphics from my web site because it decided they were an ad.

I would argue that there is a difference between sponsors and ads, sponsors usually have something to do with the site. They aren’t the pop-up ads telling you you have a virus and should click on the button so they can actually install malware on your computer. And, besides, I figured out what was going on, I bet all those annoying ad people have figured it out as well, so Norton Internet Security is pretty worthless (which was what I thought anyways). All it does is make web designers tear their hair out.

Bookmark It

Hide Sites

I’ve figured out the site organization, including how many pages we have and what goes on each page, now it’s time to start designing the actual pages. In this stage, I create the page layout in Photoshop (I’ll be putting up a post about the tools I use during this whole process later) and it’s the first time that the clients sees an actual page.

Basically, I want to show the client where the navigation will go, what I’m going to use for site branding (usually in the banner across the top), and what colors and fonts I’ll be using.

To Wireframe or not to Wireframe

I’ve read a lot about wireframes, which are pictures of web pages showing what goes on the page (navigation, content, etc), but not the graphic design (colors, photos, fonts, etc). See the Design page on usability.gov for more info. I don’t currently show wireframes to my clients, though I may make one up for myself with I start my page layout, to make sure I have everything I need on the page before I start playing with different buttons and different colors.

My experience with sharing wireframes with clients is that they don’t get what they are, so I used to go straight to a jpeg of a my Photoshop layout that looks like a finished page. I found one problem with that process, which may be due to this finished looking page layout: my clients sometimes come back just before site launch with changes to the navigation.

I suppose that shows that they ignore the navigation on thee page layout, just as most users ignore the navigation on a web page. After all, the content is what I want them to see, not the page frame, but at this point in the design process, I need the client to sign off on the page frame (the banner across the top and the navigation). So, I’ve changed to a hybrid wireframe/page layout which shows the page frame in great detail and leaves the content and some other parts as colored blocks (see the first example).

How Many Different Layouts?

If I have a good idea of what the client wants, I create several different layouts. If I don’t have a very good handle on what the client wants, I put a page together and use that as a starting point for figuring out what the client wants.

Example 1: 3 Choices

Here are the wireframes from a project where I had a pretty good idea of what the client wanted in graphic design, so I gave them three variations on a theme:

Version 1

Version 2

Version 3

The only difference here is in the look of the page, not the navigation or site branding. You can see where all the parts of the page go and I’m paying particular attention to the page frame: the header and navigation.

Example 2: Starting Point

On this project, we didn’t have much of a starting point for the page layout, so I put the first one together, then through discussion with the client, wound up with the second one as the final layout:

Version 1

Version 2

Note in this version that the photoshop document extends beyond the web page edges. That’s because this site is a fixed width site (the main area doesn’t change with the size of the browser window) and I want the client to get an idea of how it will look in a larger browser.

Bookmark It

Hide Sites