Site Testing With Alkaline and Load Impact

I came across two new (to me) tools today for testing websites, Alkaline and Load Impact.

Alkaline is a new Mac application from Litmus that allows you to “tests your website designs across 17 different Windows browsers right from your Mac desktop.” It works as a standalone app, or with Coda and TextMate using plugins. The free version tests in Firefox and Internet Explorer 7, and if you sign up for a paid Litmus account you can test in all 17 browsers.

Load Impact is an online testing tool to simulate high user loads. There is a free option allowing you to simulate a low load level, and the test results help you see which assets (CSS, images, JavaScript) are slow-loading or problematic as well as how the site performs the more users hit it at once. I don’t see this replacing YSlow for quick and dirty speed tests and load optimization, but it could be an awesome tool for larger websites that need to do “real” stress and load tests.

Discouraging Image Theft

Recently I received a question from a colleague regarding image theft and how to prevent it. The sad truth is that you can’t. There are techniques to discourage downloading and reuse of your preciously-crafted images, but they generally aren’t 100% effective or user-friendly for your normal site visitors.

The reality of unwanted image downloads is a bit depressing: there is no guaranteed way to protect your images from being taken—the most you can do is discourage it.

First, make sure your copyright notice is clearly posted on each page indicating that downloading or using images without permission is not allowed. In doing so you are legally holding your site visitors accountable if they steal and reuse your content.

If you suspect that image search engines or IE-only users are the culprits, using client- and server-side techniques might help alleviate the problem. But if you are looking for a universal solution, editing the images is your best bet since all these techniques can be circumvented by taking screenshots, using screen scraping tools, or simply viewing the locally cached images.

Client-side techniques

  • Disable the right-click menu
  • Disable the shortcut menu in Internet Explorer
  • Use a transparent image overlay

There are JavaScript solutions for disabling the right-click contextual menu; unfortunately, it will only deter a few people. Anyone that is intent on stealing images can still do so. In older versions of Internet Explorer you can disable the image shortcuts that appear when you hover over an image; again, if that is your target browser (or if you suspect that’s where it’s coming from) then implementing IE-specific techniques might work.

Most right-click disabling scripts rely on browser-specific functionality or JavaScript, making them unreliable in other browsers. The downside is that you risk annoying your real customers by removing expected menus and links.

Another technique—which Flickr employs—is the transparent image overlay. This involves layering a transparent GIF over the top of the image you wish to protect. When the image is right-clicked and saved, the person assumes they are downloading a JPG but instead get the transparent GIF.

From Flickr’s download prevention help text:

Preventing people from downloading something also means that a transparent image will be positioned over the image on the main photo page, which is intended to discourage people from right-clicking to save, or dragging the image on to their desktop. By “discourage” we do mean simply “discourage”. Please understand that if a photo can be viewed in a web browser, it can be downloaded. The transparent image overlaid on the photo will not keep your images safe from theft, and is intended only as a slight hindrance to downloading.

Using Flash to display images is another method to discourage image theft (since Flash right-click menus can be customized), but it isn’t foolproof. Just like these other techniques, people can simply take a screenshot to capture the image.

Server-side techniques

  • Block image search engines
  • Disable image hotlinking

Image search a popular way to access images. If you notice a lot of traffic from image search engines, try blocking them with a rule in your robots.txt file. See Remove an image from Google Image Search for more details.

I also recommend disabling hotlinking by adding rules to your site’s .htaccess file. Doing so will not only potentially save you bandwidth costs by stopping other sites from reusing your images and content, it will prevent directly linking to your images without your permission.

Image content editing

  • Add watermarks
  • Use very low quality images

Although altering the image affects how it looks and works on your site, it is quite a bit more effective than simply trying to disable downloading or saving. Again, this is only a means to discourage theft — skilled graphic artists can remove a watermark and still have a usable image.

Using low quality images could also help, but finding a good balance between impressing your customers and deterring theft can be difficult.

Bottom line

If someone really wants the image, they will get it. Using the techniques described above will discourage most people from downloading your images, but remember that posting your images online means you run the risk of anyone downloading and reusing them.

Further reading

Color Blindness and User Interface Design

As a user-centered designer and developer I am always looking for ways to improve interfaces to be useful to all people, including color-blind people. Particletree has a great guide, Be Kind to the Color Blind [editor’s note, October 2012: link now offline], that nails the essential pitfalls and best practices in designing for color-blindness.

My rule of thumb is to use color only as a secondary indicator. This means that an important detail in my user interface should not rely on color alone to indicate meaning.

This type of design decision came up recently in my work on DF Studio. As part of a redesign for version 5 of the software, the design called for colored icons to show status for a photographer’s online portfolio. A green icon for an active portfolio and yellow icon for a disabled one (a disabled portfolio is not accessible to public viewers).

portfolio-status-version1

The problem with the icons being only differentiated by color is that a color-blind person that can’t distinguish yellow versus green would not be able to easily know the portfolio’s status.

The solution was simple: add a lock overlay to the disabled yellow icon. You can now easily tell that one is “locked” and one is not.

portfolio-status-version2

It is always good to run your design through a color-blind testing tool like Colorblind Color Filter or Vision Simulator. The DigitalFusion development team is fortunate in that the CTO of the company (who is also our product development manager) has a color vision deficiency; since he is constantly looking at the interface we have a way to find color-blindness issues in early stages of development.

If you work on websites or any kind of visual user interface, I would highly recommend reading the Particletree article, including the Additional Reading links. Knowing about the problem is half the battle, and you’ll be able to keep color-blindness in mind when developing and designing your interfaces.

Google's SEO Starter Guide

Google now offers a guide in PDF form to get you started with SEO best practices. The guide is chock full of great tips on navigation, meta elements, website promotion, headings, and much more.

So, the next time we get the question, “I’m new to SEO, how do I improve my site?”, we can say, “Well, here’s a list of best practices that we use inside Google that you might want to check out.”

Read more and download the PDF guide at Official Google Webmaster Central Blog: Google’s SEO Starter Guide.

Don't Work on Spec

From the Important Topics in Running a Web Design Business Dept. I’d like to share a recent conversation with a colleague about whether or not it’s a good practice to include mockups in a possibly unpaid bid for a project. I’m posting it here for reference and to continue the conversation.

Colleague: I’ve seen on Twitter… times where you said that you’d finished a mockup for a client. And by that, I’m assuming you mean a mockup of a website that you’re proposing to build for them…

Lance: My situation might be different than other web professionals in that I generally work with the same clients over and over (my last “new” client was Summit Hut in September 2007). So, the mockups I do now are for paid projects that have budgets and buy-in from clients. And, these projects aren’t typically new websites; although in one case that I talked about on Twitter the mockups I presented were for a complete overhaul of a web application’s user interface.

In the “real world” of trying to land gigs or client projects, mockups and prototypes can play a part, but be very careful when people ask for that type of work without pay.

If that’s the case, when you do your mockups, do you just do straight HTML (so the look is there, but not the functionality), build it in Photoshop (or something similar) or something else?

As far as the “how” of mockups, I almost always jump from paper sketches and basic ideas into HTML and CSS. That is my strength, and I am very fast from concept to working website, so it’s my best use of time and energy. I use Photoshop and Illustrator for design elements such as backgrounds, buttons, and icons with an occasional—but rare—entire mockup in Photoshop that I then flatten as a PNG and use as a mockup or starting point for coding.

Skipping Photoshop doesn’t work for everyone, but it can be a timesaver if you are more comfortable working with other tools. Check out Why we skip Photoshop, a great take on this by 37signals. Most “graphic” web designers take offense to this type of approach, since they say that those kinds of designs tend to look alike in their boxiness, and that you are constrained by CSS basics, etc. I don’t agree—I think creative and good design work can happen in non-visual tools. Overall, I think you should do your work where it is fastest and more efficient for you; for me that is coding HTML/CSS and tweaking the display right in the browser, not in an image editor.

The big advantage for me for moving from paper and ideas directly to code is that I can get a working demo up faster and into my clients’ hands that much quicker.

And also, if you’re doing a proposal for a client (bidding on a project and/or expanding upon a bid you already sent), do you generally give them a mockup of what you’re proposing and do you charge for your time to build that mockup and the bid?

My advice, and the standard industry practice, is to never do work “on spec,” meaning those design mockups should never be for free. If you get client buy-in and establish the mockup and design process as part of your workflow, you won’t get bit by people backing out after you sink time and energy into it. There are those occasional clients who want ideas for free, and they will use you to that end. Of course, those folks might be few and far between, but be aware that they are asking you to do unpaid work.

There is a lot online about this already, so I won’t harp on it too much. From the master Zeldman himself, read Don’t design on spec. For a perspective from a respected graphic web designer, Veerle Pieters, I recommend Free of charge please!, and there is even an entire website dedicated to the topic: NO!SPEC. Besides reading what other web professionals have to say, I’d also recommend picking up a copy of Graphic Artists Guild Handbook: Pricing & Ethical Guidelines for some great advice and case studies (Amazon).

If a client asks for work up-front with no payment, my tendency is to run like the wind! If you feel they are a worthwhile client, and you really want to work for them, spend some time educating them on your workflow and process, and explain why the mockup and design iteration phase is an important part of the project cost and budget. That education will pay off many times over, giving more value to all the parts of your web design work, not just the “expert” parts such as coding and testing.

For example, in my typical web design project process I have clients read and sign off on each step, including brainstorming, planning, content organization, and design mockups. Giving each stage in the process a monetary value can help you feel good about spending time to get things right, and gives the client a reason for all the charges you bill them (or all the line items in an estimate beforehand).

This is a very important topic—if you are a freelancer it would do you good to define your stance and “official policy” on spec work. Let’s educate ourselves, our colleagues, and our clients on why spec work is unprofessional, and share this conversation with others.

Be An Employable Web Designer

In The Employable Web Designer, Andy Rutledge gives his take on how you can be ready for a real web design job coming out of college.

Now more than ever, it is a student’s responsibility to craft his or her own career preparedness in addition to, even in spite of, the plans and curricula defined by schools. This fact is especially true for aspiring Web designers, for every indication is that most higher education institutions don’t have the first clue about the interactive professions or how to prepare future professionals.

As a web craftsman, I think even seasoned web designers could take a look at this list of skills and traits that make a truly employable web professional. Pay close attention to the “Technology and Web Craft Skills” section since those items require constant reading, learning, and exploration.

I hope that this list and my suggestions help aspiring web designers to better craft their own preparedness and, if necessary, adjust their degree plans toward a more effective and responsible result.

Andy’s list is not only a great resource for aspiring web designers and developers, but I see it serving as a standard for all web professionals to live up to.

(Also, see my take on preparing for a career in web design, Learning Web Design, from 2006.)