I have an amazon.com account and I buy Kindle books. I don’t have a Kindle, so I read those books on my iPhone or my iPad. And I share the account with my husband, so sometimes he buys Kindle books and reads them on his iPhone. Sometimes we want to read the same book, sometimes my daughter wants to read one of our books on her iPod Touch.

I don’t think we’re a particularly unusual tech family in this way. Now, bear with me for a moment while I explain my frustration with Amazon’s separate mobile site.

I buy a Kindle book with one-click. That means the book is sent to my default device which is my iPad because I can’t set the order of the list. It’s just alphabetical and I can’t rename my devices once I’ve put them in (another post topic perhaps).

So, the book goes to my iPad, but I read on my iPhone. I happen to be somewhere other than my computer when I fire up my Kindle app on my iPhone and see that my Kindle book isn’t there. No problem, I just need to go to amazon.com, to my account and send the book to my iPhone.

I open up safari, type in amazon.com and am redirected to Amazon’s mobile site. It does look nice on my small screen. I click on my account, log in and I can’t get to my digital downloads. They didn’t put that on the mobile site.

Now I have to click on the link to the real site, deal with the fact that it’s not designed for my device at all, and make my way down into my account to get my book on my iPhone.

The designers obviously forgot about all of us Kindle app owners (how many thousands of people is that?).

Why am I even talking about this? Because Jakob Nielsen recently posted his advice on mobile user experience. The summary is quoted below:

Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.

I completely agree with the first sentence. You do need to serve a different design to different screen sizes. But I completely disagree with the second sentence. Two sites means that one will almost always be a cut down version of the other. There is barely enough time to keep one site for a business up to date and working, how are we going to find the time to do two?

Wait a minute, this is giving me a huge sense of deja vu. We web designers have been through this before, back in the bad old days when we wanted pixel perfect layout and we had to serve a different site for different browsers. How did that work out?

We decided that was a waste of time and went against the very nature of the web. The whole idea is that we can publish the information once (the HTML) and we can make it look like we want for different users (the CSS).

That’s what responsive design is all about. It’s not perfect, but we’re getting there.

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.

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.

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.

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).

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

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.

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:

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.

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.