There's no black and white distinction between what constitutes plagiarism and what doesn't. Sometimes its obvious, but often it's not clear if a new piece has crossed over the murky line. This includes design plagiarism.

An outside organization asked my employer for permission to use one of our web site designs for their own site that they wanted to create. I'm the designer of the site in question. We've explained to the organization that they may use the HTML and CSS from our site if they put a credit to me as the original author of the CSS inside the code — after all, markup is not really something you can copyright, especially the simple, no frills stuff I used on this small site.

But we've having trouble getting them to understand that though they can be influenced by the design, as any designer can, they can't blatantly copy it. They can have a similar layout and look, but they can't use the same images or content. This organization definitely wants to work with whatever guidelines we give them — they don't want to violate our copyright or step on our toes at all — but they don't appear to understand the distinction yet. I can't blame them.

How do you distinguish between sites that just have a similar style or layout and sites that are copies? I remember my art teacher in high school always telling us that we had to make our art at least 30 percent different from whatever source file we were using as inspiration (usually a National Geographic photo, since we had a whole floor to ceiling cabinet of old issues). I have no idea where she got this 30 percent figure from, and I still don't really know how I would evaluate if something was 10 percent different versus 40 percent different.

I gave the person who requested our design this guideline to tell if his design was plagiarizing or not: Once your design is different enough that someone could conceivably believe you created it without ever having seen our design, you should be safe. If someone came across your design and accused you of copying our design, could you reasonably defend your work by saying you'd never seen our site before, that it's just a coincidence?

By this, I don't mean to imply that if someone saw both designs they would have to be able to see no similarities, but rather that there could be some possibility the two designs were created independently. They could think it's possible that one used the other as a starting point, as long as they could also accept the possibility of the opposite.

Do you think this guideline holds water? Is it too loose? Too restrictive? Do you have a more precise way you determine what is just inspiration and what is copying, in terms of web design? I'd love to hear your thoughts on this in the comments.

You'd think that the perfect Web 2.0 recipe organizer would already exist online — after all, they have a tool for everything else! — but I have yet to find it.

Food blogs are really big now, and though I don't food blog myself, I have gotten hooked on reading them. In fact, I pretty much get all my recipes these days from food blogs and never look in my cookbooks. Why would I? They're not searchable, they don't have beautiful full color photos of every recipe, recipes aren't backed up by real people's comments of how they liked it or adapted it, etc. Online recipes really are the way to go.

I began bookmarking each individual recipe in del.icio.us, as do many other food bloggers and their readers, because you can tag each recipe bookmark with all of its main ingredients or other characteristics (like "low fat," "easy," "Indian") and then use those tags to search for recipes that contain the mixture of characteristics you are looking for. So, I could find all recipes tagged with the combination of "dinner," "low carb," "chicken," and "garlic" by using the plus signs by each tag listed as a "related tag" to further filter down. I could also just do a search within my bookmarks if I was looking for something very specific.

This system worked exactly as I wanted, with these exceptions:

• no photos of recipes from the pages
• no rating ability
• no ability to add items to my list that aren't online
  

The rating ability wasn't a big deal to me, and I could also do without the ability to add my own recipes (I was fine with maintaining both an online and offline paper recipe collection) but I really, really wanted the photos. I searched high and low for an online tool that had the abilities of del.icio.us but with the added ability to choose a picture from the page you're bookmarking to associate with the bookmark. I found a number of online recipe organizers that came nowhere close to what I needed, and a number of social bookmarking tools that let you have a thumbnail of the whole page associated with the bookmark but not an individual picture that you can choose from within the page itself.

Finally I found Kaboodle, which is billed mainly as a wish list and shopping site. I thought it did everything I wanted except the rating, so I was thrilled. But I was wrong — it actually lacks the essential search tool of combining multiple tags to search that is the strength of my current system in del.icio.us. You can view all your items with a specific tag, but then can only filter those by keywords within their titles, instead of by further tags.

So, I'm still without the perfect online recipe manager, and undecided whether to stick with del.icio.us or Kaboodle. If anyone has a suggestion for what to use, I'd love to hear it! In the meantime, I have no problem with someone stealing my idea for the perfect online recipe manager and becoming the next big Web 2.0 success story — just please let me be the first person in your beta.

Yesterday I received a 24 inch widescreen monitor at work, and I'm very pleased, to say the least. t's gorgeous, and working in InDesign in particular is going to be so much easier.

I'm in the process of trying to figure out how to organize all my windows now, though. My first thought was to move Thunderbird to the left side of the screen and Firefox to the right side so I could always have them side by side. The problem with this is that I'm very concerned about ergonomics, and having my neck turned to either side for any length of time is not going to be good. I've left Thunderbird on the left for now, since I'm not going to be staring at my Inbox for great lengths of time, but have the message window and compose window pop up on the top center of the screen, since those are windows I spend more time with. I've moved Firefox to the center of the screen since I spend a lot of time there, and sized it to 990x950. I'm not 100 percent happy with this setup, but until I get some better ideas, I'll try it out.

I'd still like some help with my Dreamweaver setup, which is the  program that I use the most. I would love it if the Split View could be split vertically, instead of horizontally, so that I could have the Design View on the left and the Code View on the right. My compromise has been to size the Dreamweaver window to fill about the left half of my screen, with the panels on the very left and the Design View on the right. Then, I've opened the Code Inspector and pulled it entirely out of the main DW window so it fills the right side of the screen. This is ok, but it would be better if it was the true split view, because then I could just hit a button to toggle between letting the Design View or the Code View take up the full width of the screen. Right now, if I want to do that, I have to manually resize all the windows. Or, create different workspace layouts, give them keyboard shortcuts, and use those to toggle between the different window configurations I like. I guess that's not too bad.

Anyway, I'm not complaining —  this is a very good problem to be having! If anyone has any suggestions for how to organize my workspace, examples of their own widescreen workspaces, or links to "lifehack" articles on the subject, I'd appreciate it!

Alright, it's not my book in the sense that I'm not the author, but rather the technical editor, but still: the name Zoe Gillenwater is in print, sitting in a Barnes and Noble, and that's pretty cool. The book is Mastering Integrated HTML and CSS by Virginia DeBolt. It's aimed at people without experience in either HTML or CSS, and I really like the approach Virginia and the publisher took of teaching both languages at once. I'm one of those people who learned HTML and CSS completely separately, and I had to suffer through unlearning a lot of HTML when I made the switch to CSS-based layouts. This book avoids that problem by teaching you CSS-based layouts from the get go, building upon a solid foundation of semantic XHTML.

If you do end up learning HTML and CSS through this book, I'll be very interested in learning how you liked the integrated teaching approach for the two languages. Contact me or Virginia and let us know!

A recent thread in the CMX forums about the frustrations of dealing with clients who don't understand how the web development estimating and planning process work has prompted me to share a recent experience.

I got a referral for a prospective job from a past client. He told me that this new prospective client had a very disorganized yet successful business. That was my first warning sign; disorganized business usually means they'll be disorganized when it comes to the web site too. In my experience, they'll probably not have any goals in mind or concrete ideas of what their web site should do for their users and their business.

Nevertheless, I tried calling them and they didn't call me back for weeks. Second warning sign. They finally called me back. I told the woman we needed to set a meeting to go over requirements, which she agreed to, but wanted to do it over the phone. I don't really consider this a warning sign (phone meetings are fine, save some gas), and agreed to a day and time. I spent a considerable amount of time prepping for the meeting.

However, the day and time of our meeting came and went without a call from the woman. Third warning sign. I called her shortly after our scheduled time and left a message. She didn't call back until several days later to apologize, which was left as a message on my machine. Strangely, she called back a few hours later and left almost the same message on my machine! This was the last warning sign. Unresponsive clients are one thing, but clients who can't even remember if they've been responsive or not is a whole other level!

I decided to call the woman back and tell her that I would not be able to quote on her project.  She's not the type of client I want (I didn't say this to her, of course). Don't be afraid to do the same with prospective clients that have exhibited disorganization, unresponsiveness, lack of commitment to the project, or even who you just plain have a bad feeling about! It's not new advice, but it's important enough for regular reminders.

I'm jonesin' for a good burrito right now. Unfortunately, I haven't yet found the perfect one in my area, and I can't afford to be eating burritos every day to find it. So some of you other North Carolinians need to pitch in and submit some reviews to Burritophile. Do it. If we all do our part to share our burrito experience, we can all avoid the disappointment of mediocre burritos for the rest of our lives. And isn't that a dream worth fighting for?

After letting HTML stagnate for years, the W3C has finally decided to start fixing it up again. That's right folks: XHTML is not the only standard in town. HTML has remained a standard all this time, just as valid a markup option as XHTML, and now it's apparently going to get an update.

This decision has been met with a variety of strongly expressed opinions. The comments on the article range from supportive to confused to angry.

There have also been some responses written at other blogs. I really like Joe Clark's response, which emphasizes the need to work on WCAG 2, not HTML, which is being handled just fine by the browsers despite all the cruft.  I'm not as much in agreement with Elliotte Rusty Harold's response. He seems to be one of the people who thinks that only XHTML can be written cleanly. I've never been clear on how clean, well-written XHTML is any better than clean, well-written HTML — especially when the XHTML is served as text/html anyway. Maybe someone can tell me a real benefit of using XHTML, aside from the easy portability to XML (which I can also achieve with clean HTML by running it through any number of tools to convert it)?

Regardless of where you stand on this issue, there's some good reading out there right now on our humble friend HTML. 

In my last post, I complained about sites that pop up windows and take away my menu bar so I can't print. Tonight I found the perfect Firefox extension to stop this annoying scripting: Unhide Menubar. It keeps scripts from ever hiding the menu bar, ever. I've already put it to use to print out my flight confirmation through Orbitz.

Why do so many sites that insist on opening popup windows also insist on taking away my menu bar when they do so? Sometimes it makes sense, such as in my Yahoo Music player that pops up. But other times it seems to only be done for its own sake, and it's really annoying.

Last month was the annual enrollment period for health care spending accounts, dental insurance, vision insurance, and several other benefits programs offered by the State of North Carolina, which I work for. This year, they offered an online enrollment option for the first time. However, the web site they created solely for this purpose (they already have a couple other web sites, and I have no idea why they didn't make this new site simply part of the old sites...but I digress) was awful. The navigation was very unclear and hard to use.

When I went to enroll, the site insisted on popping up a new window with all of my toolbars stripped away, including the menu bar. Why? This didn't help me in any way that I could see. The enrollment process was just a series of forms and text-based pages — in short, nothing that couldn't be presented in a regular web page as part of the rest of the site. Perhaps they didn't want me to click any links other than the form buttons that navigated me through the enrollment process? If that was the case, why not just strip the nav menu out of the enrollment pages, and just leave me in the regular site?

I can handle a popup window, as much as it annoys me, as long as it doesn't hamper my work. This one, however, did. When I finally enrolled, I clicked on their printer-friendly version link. This opened another popup window. I expected it to automatically bring up a printer dialog box, since I couldn't access File > Print to do it myself. Instead, the new popup told me to hit the Print Screen button to print the page. But the PrtScn button doesn't actually print — it takes a screenshot! I had no way to print my page. Why had they decided to hide the menu bar from me? What harm would it have been to include it? What benefit did they get from it that was so important it was worth completely wrecking the user-experience for me and preventing me from printing?

Ironically, after I finished my enrollment, they presented me with a feedback form, "in order to ensure that www.ncflexonline.org provides the ability to meet your needs." However, the comment fields they provided only allowed 256 characters, which is only a couple sentences worth of comments, and not nearly enough to convey my dissatisfaction. I suggest that if they really want to create sites that meet their users' needs that they employ extensive usability testing before launching a site, instead of taking surveys afterwards that never appear to be acted on.

After this frustrating user experience, I went straight to userscripts.org to find a Greasemonkey script to override all those sites that try to take my menu bar away from me. Alas, no such script exists on this site. I beg someone to write one and let me know about it! Or, if anyone knows any other tricks to get the menu bar, or other toolbars, back, please let me know that as well! 

I feel like there are two types of creative people: idea people and implementation people. (This is a gross oversimplification, of course.) I think I'm an implementation person. If you give me a rough idea, I can execute it in a beautiful and efficient way. I don't, however, feel like I'm really good at coming up with ideas. At least not marketing ideas. Check out this blog post of extremely creative ads from around the world. It's great how these advertisers have come up with ways to take advantage of the facilities already in place and integrate their products into them in ways that feel fun, not "Oh my gosh, I can't believe they're forcing another ad on us." I hate the enormous amount of advertising we are bombarded with nowadays, but if all advertisers were as clever as these folks, I wouldn't mind advertising at all and would probably be a much better consumer. Thank goodness they're not all so good, eh? :-)

Yes, design can sometimes have health consequences! The household cleaning products called Fabuloso feature clear bottles with brightly colored liquid inside and slick, dynamic packaging. Unfortunately, the packaging makes them look like sports drinks, and almost 100 people across Texas have drunk the cleaner. This is yet another example of why the purpose and audience of your product matter. Not every type of design is appropriate for every type of product, whether that product be a retail good, print piece, or web site. Design with caution!

Today I heard about a very cool new tool developed by NASA. From their press release:

The MDE (Math Description Engine) distinguishes itself from other accessibility software by determining the key characteristics of a graph "on the fly." Using this determination, it builds natural-language text descriptions that enable visually-impaired users to view spatial relationships through sound alone.

Check out the demos at the MDE web site for examples of the text and sound the software can generate. It's pretty neat. I can see a great use for this, as I work for a research center that deals with a lot of data. So far, we've laid graphs out and written their alternative text manually. But with this new tool, it might finally be time to look into graphs that are built dynamically, because now they can be accessible too.

Ever since Firefox updated to 1.5.0.5 a few weeks ago, it's been crashing like crazy for me. The crashes come in two forms. One is when I click a random link on a site (I can't figure out any pattern to it), it acts like it's working on taking me to the page, then the icon at the top right stops moving, so I know it's frozen. I can't click to any other tabs, but if I'm listening to Internet radio in another tab, it keeps on happily playing. If I go to the Windows Task Manager, it tells me that Firefox is "running," not that it's "not responding" as I would expect. So I manually shut it down from there anyway. The second type of crash is again seemingly random, and this time the browser shuts down completely and both Windows and Mozilla pop up their little feedback agents to report the problems.

When Firefox 1.5.0.6 was released right on the heels of 1.5.0.5, I thought, "Oh good, they've quickly released a patch to fix all these crashes." Nope. Firefox is still crashing just as much for me.

Am I the only one facing this annoyance? Does anyone know of a fix? Or even the cause? 

Not too long ago I posted about the current trend in web design to make graphics, especially logos, look like they are reflected on some shiny surface beneath them. There's a great compendium of logos of big companies re-designed to have the Web 2.0 look over at flickr, and many of the logos feature the reflective look. They're a brilliant parody of a rampant trend.

I shamefully admit that I read celebrity gossip. There, I said it. I don't watch any of those gossip shows or buy gossip magazines, but I do read the snippets of stuff on people.com. That's my indulgence.

So, did you guys hear that Haley Joel Osment, the kid from The Sixth Sense, got in a car crash? I love this story, because:

1. I learned that Haley Joel Osment is 18. When did he get so old?! Look at the picture of him —  he's a bruiser now!
2. I learned that Haley Joel Osment drives a 1995 Saturn. I think that is awesome. I'm sure he can afford a much nicer car, but he keeps driving his 95 Saturn because he doesn't need a nicer car. I really admire that. Maybe he'll be one of the few child actors who doesn't turn out to be a drug addict loser. (Although maybe he was driving drunk, but drinking when you are 18 is not such a shocking thing.)
   

Ok, I'm done now. :-)

Sometimes, the terminology used by the W3C is so obtuse and scary, I can't blame web designers for not taking the time to read and understand the specifications. The term "block formatting context" is one of those scary terms in CSS that just makes my eyes glaze over. However, it's really not all that bad, and taking the time to understand it will make developing CSS-based layouts a lot easier for you.

One of the common questions that comes up on the css-discuss mailing list concerns clearing some content within the main content area of the  design while not clearing the floated sidebar. At first this seems like an impossible problem to solve, since there's no value for the clear property that lets you tell it to clear only some left floats -- it's all or nothing. However, there is a way to make the clear act "selective," not through the clear property itself, but by simply understanding what a block formatting context is and setting the appropriate properties to establish a new one. In my article on block formatting context, out today, you can work through this clearing dilemna to see how establishing block formatting contexts controls the layout of your page.

For another example of block formatting context in action, check out the Orlando JumpStart, where a new context is established to prevent clears within the main content area from clearing the floated nav, as well as set up float containment. 

One of the web design trends I've noticed over the past several months is to make text or graphics appear to be reflected, as if there is a piece of glass that they are sitting on. I've started tagging sites that I come across that exhibit this graphic effect, and you can see the beginning of my collection at http://del.icio.us/pixelsurge/reflective.

Today I found a Javascript that will generate the reflections for you. I haven't used it, but it looks pretty slick. If you're dying to get in on this reflective trend, try the reflection.js script out.

I made a discovery today: the Leahy/Langridge image replacement method doesn't work in MacIE when applied to a div. It only works when applied to an element such as h1 or p. When it's applied to a div, the text is not covered up and the background image is cropped horizontally. To work around this, always wrap the text to be replaced in the proper semantic element instead of just plopping it into a div naked (which we should all be doing anyway), then apply the image replacement to the semantic element. I couldn't find any other mentions of this bug out there on the web, so I hope this tip helps you make better use of Leahy/Langridge image replacement.

Don't know if you've seen it yet, but yesterday, cnn.com launched a new home page. They have an article up describing the significant changes, but the most interesting thing to me is that the new design doesn't fit in an 800x600 window (not mentioned in the article, of course). At 800x600 most of the right column is cut off, including their feature ad. I wonder if their advertisers know about this and are ok with a significant percentage of their potential audience not seeing their ad? Their old design fit in 800x600, but it didn't have that large feature ad either.

I still use 800x600 as my base resolution for designing sites. I like to make liquid sites with a minimum and maximum width, and I never set the minimum to greater than 760px. More and more sites are choosing to make sites that horizontally scroll at 800x600, though. Have any of you taken the plunge, like CNN, A List Apart, and others, and written off the 800x600 crowd?

If you like Internet radio and you haven't heard about Pandora, I recommend you check it out. It's a Flash-based, Web 2.0 music player that works like this:

• You tell it the name of an artist or song that you like.
• Pandora analyzes the qualities of that song (or, if you entered an artist, one of their songs that it randomly picks) such as instrumentation, rhythm, etc.
• Pandora compares your song with others that have been similarly tagged in the Music Genome Project and creates a station for you based on the inherent musical qualities of your song.
• As you listen to your station, you can add more songs for Pandora to base the music off of. You can also tell it if you like a song it is playing or don't like it. If you don't like it, it will never be played again.

Before Pandora, I had been listening to Yahoo! Music often.  But Pandora is better because:

• There is no audio advertising, just a visual ad on the page itself. This is so much more pleasant than being interrupted every 10 minutes on Yahoo to listen to that same Vonage commercial over and over again.
  
• You can create multiple stations. This is especially important right now because I'm listening to Christmas music. On Yahoo, I could listen to Christmas music and rate it, but then it would get lumped in my one station and keep coming up all year long. On Pandora, I have a separate station for Christmas music playing just what I want to hear. I also have separate stations for my rock, my hip hop, and my mellow stuff.

There are some limitations to the service right now (doesn't have classical music (sorry Sheri), sometimes lags when you tell it you don't like a song, etc) but I'm sure it will only get better in time.