Simple Does Not Mean Ugly

In his recent article on Site-Reference.com, Mark Daoust reveals the truth behind ugly web design. It’s not about whether the site is ugly or not. The key is simplicity.

I am in total agreement here. My philosophy for web design is to create simple, usable, yet attractive sites. I feel odd emphasizing the contrast between those two worlds (ugly and simple), but it is a common misconception that simple means unattractive. This issue is what Mark’s article addresses. In my experience, simplistic design is sometimes very complicated and hard to achieve. Taking away details and revealing the core of a design is a difficult task.

So what makes a site’s design effective? If it let’s the visitor do what they would like quickly and easily, it is a successful site. That’s it. It can be as ugly or as pretty as you like, but the goal for effective web design is clear communication with your site visitors. A simple design gets out of a visitor’s way and lets them get on with their lives.

Some simple yet good looking sites: the newly re-aligned SimpleBits, GarrettDimon.com, WordRidden (which Jeremy recently redesigned to be simpler…), JeffCroft.com, Cornell University, and the ever-pleasing-to-look-at smallTransport.

Learning DOM Scripting

Around Christmas I purchased Jeremy Keith’s new book DOM Scripting: Web Design with JavaScript and the Document Object Model. It has been amazingly good so far (I am on the sixth chapter). I have already found practical uses for the lessons in the book.

Jeremy nails the topic down with clear principles, examples that are easy to follow, and a fun but authoritative tone to his writing. I highly recommend this book to all web designers and developers.

If you’ve been doing JavaScript and client-side scripting for a while, you will learn new ways to make your code degrade gracefully and how to separate the scripts from your CSS and HTML code. If you are new to JavaScript, even better! This book will teach you the basics while giving you a solid education in unobtrusive scripting.

My experience is somewhere in between. I’ve been using JavaScript for some time, but I’ve never understood it very well. Until reading this book, I had also never written any scripts from scratch. Now that I see how easy it is to manipulate a document with the DOM, I will incorporate unobtrusive JavaScript into my daily workflow.

Tips and tricks

These are some of the lessons I have noted:

  1. When considering JS for a project, or when writing scripts, a cautious, questioning attitude is desirable
  2. A good practice: use double quotes in your JavaScript code, and use the (back slash) for escaping characters within a string
  3. Some naming conventions: camelCase for functions, under_score for variable names
  4. Good practice: use var when assigning a value to a variable for the first time, especially within a function. This forces it to be local in scope
  5. Reminder for when manipulating the DOM: All nodes are objects
  6. For conditional statements, if (something != null) can also just be if (something) to shorten the statement
  7. The methods getAttribute and setAttribute only work on element nodes
  8. Here are some useful methods used on the document object:
    • getElementById
    • getElementsByTagName
    • getAttribute
    • setAttribute
    • childNodes
    • firstChild
    • lastChild
  9. Instead of browser sniffing, use object detection: if (!document.getElementsByTagName) return false;
  10. Use safety checks to add object detection in functions to help separate code from markup. If id or class names change, the JavaScript won’t get called. It’s important to have these tests and checks both for backwards compatibility and for future use.

Some bad uses of JavaScript

Also, some of the wrong habits that I need to change:

  1. Using javascript: pseudo-protocol to send links to a new window (for example)
  2. Using inline event handlers
  3. Relying on document.write and innerHTML for modifying markup
  4. Avoid onkeypress if possible, since onclick works with both mouse AND keyboard!

Personal JavaScript Updates

Just as learning semantic markup for HTML documents and lean, clean CSS for style sheet use, there are now a lot of bad uses of JavaScript coming to my attention on sites that I own or operate. For one, I need to get all JavaScript out of the body element of my web pages. Next, inline event handlers need to be moved to the JavaScript file instead of being in the HTML.

Another example: I often use JavaScript to obfuscate email addresses and form action paths. Doing it in this way might not be unobtrusive (it doesn’t degrade nicely) unless I can figure out a way to return a statement of [at] type if JavaScript is not supported. This is worth pursuing more…Of course, there are always server-side solutions but I don’t always have access to the server on client projects.

Worth it’s Weight

I am only 6 chapters into DOM Scripting: Web Design with JavaScript and the Document Object Model, but it has already paid for itself. By the end of the book, it will be worth it’s weight in gold. Thanks Jeremy and hopefully others will find similar lessons in their own web work.

Visit the book’s companion web site and purchase the book on Amazon.com.

Search Engine Rankings for Your Site

If you own or operate a web site it’s likely that you are concerned about your search engine rankings. I have received enough questions from clients about rankings that I realize some of you really care about how high your site ranks. Here are some resources to help you.

The Basics

If you have been relying on others for your site’s SEO, don’t worry! The basic techniques are not hard to understand. The maxim for basic SEO is:

Add quality content regularly and make sure your site is well-built.

That quote is from Roger Johansson’s great article, Basics of search engine optimisation. As Roger says, good content is very important. Frankly, if you don’t have compelling content, you shouldn’t even have a site in the first place, right? So work hard on your site’s content and you will be well on your way.

The well-built part, well, that is slightly more complicated. It involves using web standards such as XHTML and CSS correctly to ensure that your site is visible and attractive to both human and search engine robot visitors. Good use of these technologies not only helps your site do better in search engine rankings, but makes it easier to maintain that all-important content.

Read Roger’s Basics article article if you would like a more in-depth analysis with examples.

Ethical SEO

Some clients have asked: Do I need to hire someone to perform SEO for my site? One reason to do your own SEO is to avoid bad situations where you pay lots of money to “optimize” your site and actually lose visitors in the aftermath. Beware of so-called “SEO consultants” even if they claim to use ethical methods. For a fascinating horror story, read Chris Heilmann’s article Ethical search engine optimisation my foot!

Deceptive SEO methods might make your site perform worse or even get you banned from search engines. Forty Media’s James Archer posted a great treatise on his blog Return of Design.

James broke SEO techniques into three categories: search engine optimization, search engine exaggeration, and search engine deception. If you read his article, it will reinforce in your mind that basic SEO is enough to make your site successful, as long as you put work into the content and making sure the site is well-built.

Accessible and Searchable

As a bonus, read High Accessibility Is Effective Search Engine Optimization to find out how improving your site’s search engine rankings correctly can also increase your site’s accessibility.

SEO and You

You can do it! Don’t take shortcuts, build and maintain your site lovingly, and keep the content fresh and attractive. That’s the start to getting the optimal search engine ranking.

Dreamhost Just Got Better

My favorite hosting company, Dreamhost, just got better! Besides the high-quality and low cost of their services, they just enabled support for two features that makes the deal even sweeter. While you could use these third-party services before today, it was a nightmare to set up and manage them. Dreamhost has gracefully changed that for all of us by providing management and setup right through their web-based control panel.

  1. Jabber IM support is now (officially) enabled! In Dreamhost’s nice array of goodies, this was one that was lacking. It was hard to set up and not fully supported. Now, if you have an account with them, you can set up your own chat users and run your IM through your Dreamhost account server. Very useful because you don’t have to rely on mainstream IM services like AIM, Yahoo, or MSN anymore and can also add security and other features.
  2. Subversion support! Dreamhost has been lacking in this regard, so this is great news for any web developer. I’ve managed a few projects with SVN on Dreamhost before, but couldn’t quite get it right due to lack of good documentation and poor control of the SVN repository and users. Now Dreamhost allows you to manage your SVN projects right through their administrative panel! It seems to be very simple to use and easy to get going on a new project.

The announcement of these two services simply made my day! Even just one out of two would have been great; both of them at the same time is almost too much fun…

If you haven’t checked out Dreamhost, take a look to see what they have to offer. The basic plan comes in at $7.95/month, and it’s all you’ll ever need unless you are hosting lots of client sites or have extremely high bandwidth needs.

Yay Dreamhost!

Be Your Own Client

I am very intrigued about this business idea: “be your own client.” It sounds simple and logical, but it is easy to say and hard to practice. As part of investigating the idea for myself, I thought I’d flesh out some ideas here about what I’ve found so far.

There seem to be two schools of thought that propose “being your own customer”. One assumes that you are testing and using your products or services in order to be able to meet customer needs. The other is more specific: “fire your clients and become your own customer.” The first is general and a good practice, and the second is more specific and harder to do.

Be your own customer to improve your business

To research this one, all you have to do is perform a “be your own customer” Google search (keeping the quotes intact). When I did this, I found many sources for the “think from your customer’s point of view” idea in the product world. The basic idea is that if you use the products that you sell, your business will benefit. Your product will be thoroughly tested and constantly improved.

This is all good, but I didn’t find too much writing online about taking a more radical approach to “being your own customer.”

Be your own customer and fire your regular clients

This means changing the way you do business, not just getting to know how your business works by getting inside the mind of your average consumer. Instead of just using the philosophy as a guide or usability study, companies that practice this approach have the “be your client” as their main business philosophy.

The idea is quite a drastic one: throw all the clients out the window that you did work for over the years. Instead, create a commodity (service, blog, book, etc) that produces revenue. Essentially you are changing revenue models by consuming the very thing you produce; you are truly your own customer.

Jim and Jason

Two important proponents of this latter business philosophy are Coudal Partners and 37Signals. They talk often about being your own user, client, and customer. Since both of these companies are very successful in the web design and development industry, it’s definitely worth digging deeper to figure out how they found the value in this philosophy.

The way they put the idea into practice was to shift their business strategy from providing a service to producing consumable products that they themselves consume.

I first heard about this take on “being your own customer” at a panel at SXSWi 2005 on “Blogging for Business” where Jim Coudal mentioned that his blog has a business. I remember thinking, “that is so cool, it sounds great.” The questions I have now are: What are the benefits? What are some examples? How does it work?

Background on this radical approach

First, for some background, I recommend reading an excellent A List Apart article by the same Jim Coudal: Be Your Own Client. If you haven’t read it, go now, it’s worth it.

Good tips and testimonials from that article:

  • Your blog should have a business
  • There’s an amazing freedom in building something for yourself
  • If you want to free yourself from the tyranny of clients you have to become one
  • Jason Fried says, “When you are your own target audience you can’t help but make better products.”
  • David Greiner with Campaign Monitor “We focused on the features we needed and it turns out that thousands of other web designers found those features just as useful.”

Some related reading to help illustrate this principle:

  • From Being Predictable
    Lesson: Be predictable. Think like your users. Better yet, be your own user. It’ll be much rarer that you’ll come up a non-solution like this one.
  • From 200 Proof Marketing
    Lesson: Be your own customer… Become a part of a market before you sell to it, so you can better understand what the market wants.
  • Article on Six Sigma. This article’s ideas apply to the first school of thought in how to improve your marketing and business tactics.
  • From Your Site Better Be Your Best Employee
    Lesson: Your site greets more users than any team member in your company. Make sure it’s ready for it! Put more time and energy into it…And make sure it is the most impressive and helpful of all your resources.

Clear signals

It’s not an accident that a lot of the material that I found in researching this topic was from 37signals poignant blog, SVN. They are huge proponents of this philosophy, and they practice what they preach. Recently, Jason Fried pointed out in his blog entry The Tools We Use to Run and Build 37Signals that they in fact use their own software for all their own projects. This shows that they not only believe they product the best product out there, but they also can tie in the other philosophy of improving the products by using them constantly themselves in order to test and improve them. It’s a great combination of both of these principles that I have explored here.

Ask yourself

What would be different about your business or daily grind if you were your own customer?

Site Launch: The Running Shop

I am very pleased to announce a new web site from simpledream web studio, The Running Shop: Tucson, Arizona. Though the project did involve some visual changes, the bulk of the work was under the hood. The old site was static files built in HTML, and updating was difficult and didn’t happen much because of it. For comparison, check out the old site on Archive.org.

The new site is built with web standards technologies: CSS, XHTML, and JavaScript+DOM. To take care of updating the site content, the site is now framed out with CakePHP, which is the Ruby on Rails for PHP enthusiasts. CakePHP has lots of content management possibilities, and the result is what I would consider the ultimate in a lightweight CMS (since it isn’t intended for blogging like lots of other nice tools).

The project was lots of fun, mainly because I had lots of freedom with the design and code. I was able to put into practice many of the standards-based methods for web design and development that I talk and read about, as well as create a fresh, professional, and attractive look for The Running Shop.

If you are interested in more technical programming or design details, go see the Colophon page on the new site.

Secure Email with Gmail


Who you are:

A Gmail user who wants to improve the way you use email. (If you don’t use Gmail, ask me for an invitation to try it, then read my previous post about why Gmail rocks).

What you want:

A secure way to check your web-based email. By secure, I mean encrypted login (authorization) as well as secure reading, writing, and sending from any computer. This technique will work at home, the public library, or accessing a Wi-Fi hotspot with your laptop.

How to do it:

When you connect to Gmail, type in https://mail.google.com instead of http://mail.google.com. The s after the http stands for “secure” HTTP. If you launch Gmail with that extra letter, it will force the program to keep you locked into secure mode as long as you have it open in your browser. In most browsers you should see a padlock or green key to indicate that you are viewing a secure web page. In Firefox, I noticed that the address bar (where the https:// is) changes to a nice yellow background to show that it is securely connected.

Why it’s important:

If you access an email program over the Internet, chances are that the email traffic you are sending is not encrypted, and can be read by anyone who is willing and able to do so. Secure email is important at home and in the office; it is even more important if you are accessing your email from a public terminal in a library, or using your laptop at the local Starbucks. By securely logging in to Gmail, you will ensure your privacy. And it’s so easy to do!

Update your bookmarks:

The best way to remember this technique is to save it in your bookmarks or favorites. In your browser, find your bookmark for Gmail1. Edit the bookmark by adding in the https:// at the front, save it, and start using always-on secure email with Gmail.

Thank you to Steve Gibson of Security Now for this great tip.

[1] If you are using Internet Explorer, send me an email (so we can chat a bit about getting a better browser). For Firefox users, select Bookmarks file menu, then open Manage Bookmarks. Find the Gmail bookmark entry. Right-click, and select Properties. Then you can add the s after the http and save the bookmark. Test it to make sure it connects securely. Safari and Opera users, I am assuming you know what to do.

[UPDATE: fixed a bad link.]