Lately I’ve been very interested in harnessing the power of regular expressions in my own Ruby On Rails projects, so here I present 5 relatively simple ways you can use them yourself.

What are regular expressions used for?

Regular Expressions provide a way to use horribly cryptic and ridiculously non-human syntax to match patterns in text.

If you’ve ever seen a code sample that contained anything incomprehensible like this…

/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/


…then you’ve seen regular expressions in action.

If you want to do things like replace a word throughout text for another word, see if a bit of text contains a specific phrase, or count how many times a specific pattern appears through text, those are the types of things where regular expressions are dynamite.

Without further ado, five basic ideas for spicing up your Rails code.

Tip 1: More Interesting Typography

You can use this technique to spice up your website’s typography — with ligatures and more interesting ampersands to be precise.

If you’re on a Mac, you can use the character palette to see some of the ligatures on your system.

Certain letter combinations just fit next to other in cool ways. These are known as ligatures.

Mostly prevalent in print design, they’re not nearly as common in web design. However, we can change that a tiny bit. Many common ligatures in print design include glyphs such as ff and fi and ft and so-forth. Unfortunately, not all commonly installed fonts include these ligatures. For language reasons the ae and oe combination are present in many typefaces, so I will give those examples.

I also I want to spice up my titles with really pretty ampersands, a technique that I first really noticed on Jon Tan’s wickedly awesome website.

This is code that goes in the view. I’m just adding a format_title helper method to the normal link_to method.

<%= link_to format_title(@featured.title), individual_feature_url(@featured) %>


This is the code that goes in the Application helper file. I made it an application helper so I could easily use it throughout a project. However, if you only want it on the homepage or a particular section, you’d put it in a different helper.

def format_title(the_title)
the_title.to_s.
gsub(/&/, "&“).
gsub(/ae/, “æ”).
gsub(/AE/, “Æ”).
gsub(/OE/, “Œ”).
gsub(/oe/, “œ”)
end


The helper takes the title, turns it into a string, and uses a sequence of Ruby global substitution methods to wrap ampersands in special span elements and change any OE and AE letter combinations into the appropriate html character codes.

Here is the CSS for spicing up the ampersand.

span.amp {
font-family: "Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", serif;
font-style: italic;
}

You can of course go even fancier if you want.

The end result is you’ve changed this normal looking title on a website.…to this much more unique and extraordinary title without any ongoing-effort.

Pretty neat to see the oe and ae ligatures in action along with much prettier ampersands.

Tip 2: Category replacement in text

Let’s say you were building a recipe website, and you wanted to link to the meat or egg or milk categories on every user submitted recipe. Expecting the user to do this is a bit much, so we’re going to automate this process.

First you can add this bit of code to your controller’s show method. This grabs all of your keywords and puts them in an instance variable you can use.


def show
@keywords = Keyword.find(:all)
end


And finally, we have a helper that uses Ruby’s substitution method to change the first instance of any keyword term into a link to the appropriate category. (I call it keywords throughout my code.)


def add_keywords(the_text)
@keywords.each do |keyword|
the_text.to_s.sub!(/\b#{keyword.keyword}\b/i, "#{keyword.keyword}“)
end


In your view, you just use the add_keywords helper.

So you can change something like this….

This is a random recipe I just randomly typed out. In real life, I’m a semi-decent cook. Note that the extra style observed here comes from the CSS first-letter and first-line pseudo-elements.

…to this, all automatically linked without any extra effort.

There are many ways you can spice this up further, but this is one basic way to automatically generate links throughout anything. Make stuff easier to find and automate everything possible and your users will love you!

Tip 3: Grammar shortcuts

One thing that drives grammarians/typographers nuts is the use of a hyphen instead of an em dash. You can read more about the differences between these characters here and here.

On a Mac, pressing shift-option-minus produces an em dash.

I constantly forget the sequence of characters necessary to produce an em dash, so I want a quick shortcut to automatically change an easy to remember bit of text into an em dash.

Here’s the helper


def format_article(the_text)
the_text.to_s.gsub(/--/, "—")
end


So two hyphens next to each will automatically be changed into an em dash. And that’s a lot easier to remember than the keyboard combination to

You can of course think of more ways to add proper grammar to your site. There are many tiny grammatical things you can do to spice up your app.

Tip 4: Better Validations

Rails provides an awesome group of validations for data right out of the box — validates_presence_of, validates_uniqueness_of, validates_numericality_of, etc.

If you need data entered in a specific format though, regex can really help you out.

For instance, in a Story model, you could add this extra validation to ensure that only legitimate URLs are entered into the database.


class Story < ActiveRecord::Base
validates_format_of :url, :with => /^(http|https):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(([0-9]{1,5})?\/.*)?$/ix
end


That makes life easier.

Tip 5: Using the blocks

I’m not 100% sure about the Perl comment because I’ve only ever used a tiny bit of Perl in college in a distributed systems class and it’s been ages since I’ve ever seriously worked with any of that code.

Many examples that I’ve seen don’t mention the existence of this syntax, nevertheless using regex with blocks is possible, which (I’m pretty sure) distinguishes it slightly from Perl and some other languages.

For instance, this simple helper uses the global substitution method of ruby to take any appearance of the word “backwards”, reverse it, and make it lower-case. Yes, this example is sort of pointless. But it does illustrate that you have a lot of potential power at your fingertips to take text, scan it, and think of other neat things to do with it.


def format_article(the_text)
the_text.to_s.gsub(/backwards/i) {|s| s.reverse.downcase}
end


Conclusion

I’ve just touched on the basics of a few simple examples. You can probably improve them significantly.Nevertheless, using regular expressions is an extraordinarily powerful programming technique that can allow you to do amazing things if you just sit down and think out of the box a little.

CNN’s website is just one such example, with a standard and slightly larger text size selectable through a gray selector.

Here is the standard CNN text.

This is the larger version.

I consider this sort of thing to be a monumental failure in design.

Duplicating standard operating system or browser functionality directly on your website is almost always a bad idea. Whether it’s putting a clock or calendar on your homepage or putting a text-resize widget on an article page, forcing redundant functionality onto a site makes things more complex for no real reason.

Isn’t this considerate to near-blind folks?

I have less than perfect vision myself (near-sighted) and am naturally sympathetic to trying making sites easy to read.

No, of course not!

Considerate would be rolling out legible text in the first place using the standard 1em text size (16 pixel) browser defaults.

It is asinine to force somebody to make an extra click to access legible text.

If your content won’t fit you must acquit

One possible objection to using standard size text is that it’s impossible to fit all your content onto the screen. If that’s your reason though, you’re organizing things wrong. You’re probably trying to fit too much unnecessary content onto the screen.

Part of the problem with larger organizations is that they have non-designers (maybe people from marketing or other divisions) demanding that their precious content makes it onto the website. It’s an ego and politics thing.

Excuse me, Sir. This is the Internet.

A newspaper making their text larger would necessarily increase ink and paper costs. When you’re talking about runs involving tens of thousands of newspapers per day, a difference in text size could be a real financial challenge.

But it’s not as if making the text larger on the internet leads to increased printing costs. There is no excuse for not using legible text size by default.

None.

Text Color

Shaun Inman is a designer/developer that makes kick-ass products.

Depending on the day of the year an article was published, the page color is slightly different

I dig the seasonal change in colors idea he’s got going on. One problem that this presents is that the color combinations that are produced might be hard to read for some people. His solution to this is to offer a higher contrast white text with a dark background version that is toggled through this button.

For a personal site, that’s ok. For a business site though, I’d never want to have a situation where the text wouldn’t be easy to read by default.

Typeface selection

The clagnut website is another example of a site that has an interesting text choice.

Rather than just pick some default typeface for the headings and sidebar, there is a little widget to change the typeface itself.

While moderately neat as an exercise in programming technique, it seems pointless for the user. The space occupied could be used better. Just pick a sensible default typeface and run with it.

Conclusion

Design stuff with legibility in mind and don’t make users have to choose between various text-sizes, colors, or typefaces to try and read your stuff. It’s your job as the designer to choose proper defaults so that your content is legible from the beginning.

Further Reading: The 100% Easy-2-Read Standard

More exciting stuff coming very soon! Don’t miss it.

Here are a few random examples that do a really nice job explaining what they’re about.

Muxtape

Twitter
Mint Analytics
Rank Forest
Campfire and any other 37signals product

I particularly like this text on Campfire’s home page.

Muxtape’s description is short and sweet, “a simple way to create and share mp3 mixtapes”.

The thing that all of these sites have in common is quality copy. Rather than spending paragraph after paragraph explaining all of the features, muxtape’s awesome service is explained in less than 10 words. That shortness is great: it makes it more likely that the words get read and understood.

But there is another class of website that really sucks at explaining what their product is about. Instead of quickly summing up what their product is or even just explaining a few of the benefits, some sites rely on mind-numbingly ridiculous stock photography to sell the idea that their product is popular, exciting, useful etc. Companies that rely on this type of stock photography are stuck in a horrible corporate mindset.

Here are a few random examples. I’m not going to provide links to examples on principle.

Websites that use these types of images generally have larger fundamental flaws than just crappy stock imagery, but this specific flaw is something that really irks me.

If photos of people are deemed absolutely necessary to market a product, why not hire a professional photographer for a few hours? Certainly any company that has the resources to provide some “enterprise class solution” can afford this.

I’m definitely not a professional photographer and I don’t have the greatest camera ever, but even I can come up with a half-decent image with a little work.

If that expense is somehow deemed excessive, a random employee with a cheap digital camera can produce images that are unique and provide a dose of humanity.

Feeling Deeply Ashamed

These stories of stock images being reused by multiple companies are kind of funny, but more sad than funny.

An Unsolicited Commercial Love Story
Samsung, Dell, and Gateway use the same girl

The best one though?

Apparently if you use Design Patterns…..

…..you may be at risk for genital herpes.

Oops.

Conclusion

The moral of the story is simple. Don’t rely on low quality stock photography for your product.

In other news, the software I’ve been working on still requires a lot of work, but it’s rounding into shape very nicely. I solved a few interface and usability problems in some unique ways and can’t wait to share some of these details very soon!

It’s a simple writing analysis tool.

http://writingtool.heroku.com/

This is less than a day’s worth of work, so it’s not a polished product or anything. It’s more of a proof of concept. It’s very buggy and limited right now, which is why its up on the awesome free Heroku Rails Hosting Service and doesn’t have a real name yet.

The ultimate idea with this, which I intend to develop more fully as a side project, is that you’ll be able to analyze how you write and view style choices and word tendencies and the like.

Right now, it’s limited to just a few features….

* It counts how many characters, words, sentences, and paragraphs are in a bit of submitted text.

* Shows average word length (to see how smart you are, I guess).

* Shows which words are repeated the most and how many times. (useful to avoid redundancy)

* Counts “ego” words such as “I, me mine, I’m, I’d, I’ve”. The reason for this is that I want to check my writing for “usefulness”. If I’m too frequently using terms such as “I”, I’m not doing the best job I can imparting information of value instead of feelings.

* Counts “valley-girl” style terms such as “like”, “totally”, etc. Just to check my writing for good style.

* You can also give comments on people’s writing if you wish.

* Has a section for other people’s writing resources.

It’s nothing all that extravagant right now, but I wanted to release something….anything and work on something else for a change. As mentioned, it is still very buggy, doesn’t analyze text with complicated syntax properly, and all sorts of problems, but is just a quick proof of concept.

Here are a few random speeches I’ve put through the thing….

Part of Jesus’s Sermon on the mount
Part of the Money Speech from Atlas Shrugged
Part of Harrison Bergeron, a famous short story.

Feel free to try it out and offer any suggestions or comments if you have any.

That’s all. Have a nice day.

Traditional methods of administrating websites

Interestingly enough, I’ve learned there are still quite a few small-business websites out there that edit everything manually and have no CMS to speak of.

In the days before content-management systems became prominent, editing HTML by hand (or through something like FrontPage) was how websites were edited. Then content-management systems became ubiquitous and it’s been possible to edit most of your website through a series of pages and forms that store information in a database.

A screenshot of my current CMS, WordPress.

And over time, obviously, these forms have improved. For instance, here are some looks at the WordPress redesign by Happy Cog.So it is certainly possible to create a more beautiful-looking and usable menu for a a website owner and administrator to manage his website.But in certain situations, in certain contexts, is there an even better way to manage a site?

Rethinking the entire problem

Why should the owner of a website have to go to a separate menu screen to change something so simple as his website’s catchphrase?Why can’t an admin change the default email address of his contact form directly from his contact form page instead of mucking around in some menu a few layers deep in his administration section?Why should a real-estate agent who wants to change the order that a bunch of house photos are presented in go to a separate menu screen and mess with a ton of drop-down menus instead of doing the task directly from a particular house’s information page and seeing things as a prospective customer sees them?Etc.If you’re reading this article, you’re likely technically-inclined enough to eventually figure out how to use almost any administrative functionality in any program. But many computer users learn how to do stuff through memorization and just can’t think in terms of files and centralized systems.Why shouldn’t everybody have much more direct access to all of their information?As much as realistically possible, why not allow admins to have a few different options for directly manipulating their data within the program and specific page itself?

What do I mean by directly manipulating data?

Do it within the appropriate page itself, not some administrative section or a separate editing page.

Flickr does this beautifully in terms of things like editing titles for photos with a simple click.As much as realistically possible, and depending on context and appropriateness, administration should be directly within the related screen itself to encourage those in charge to stay active within their community.

Why doesn’t this happen more often?

* It’s a lot easier to think from a centralization standpoint instead of actually considering that the best way to manage a community is to manage it right from within the guts of the application.* If you have to write a lot more distributed code to write to solve a problem as optimally as possible, it involves a lot more testing to make sure it works securely and as intended in every circumstance. It’s a lot more effort.* Figuring out all of the particular security policies is also difficult and time-consuming. You have to think about who gets access to which actions. People who are logged out, people who are logged in, and people with certain admin permissions get access to different bit of functionality. Figuring out all of this stuff involves thought.

Speaking of performance, Yahoo (who I’m ordinarily not a huge fan of) has a great bunch of interesting performance tips that are worth checking out.

* Actually thinking logically about each and every intended use is necessary. Making sure data isn’t unnecessarily pre-loaded and harming performance is a concern.

Conclusion

I’m going to be writing some about some more about a few ideas that are shaping my coming software over the next few weeks. For now, just mentioning that the site administration is partially within the site itself is something I wanted to mention because I think directly manipulating your information can be a better way for many people to do things in many contexts.

It’s the really tiny details that makes the difference between a good and great user-experience. A bit of brilliant copy that makes the purpose of a particular button self-evident here, a little AJAX trick that saves the user a few seconds by not having to reload the page there, a bit of clever regular expression programming to save the user a few seconds typing or copying and pasting here and there, etc.

Currently, I’m hard at work on a web community and application of my own. It’s my first major solo effort, so I’m working really hard on the tiniest of details, and that’s what I wanted to write a little bit about right here.

I’m unsure of a release date due to being busy with other projects and having an uncertain schedule right now, but I’ll mention details as they become more clear over the next few weeks. The major functionality is largely done, but the endless little details is what is consuming so much time and energy.

I’m not really ready to talk about specifics with this project is yet. Mentioning that the site is written with Ruby on Rails and that the overriding theme of the site has to do with psychology, relationships, and emotions is all I want to say for now. But I wanted to talk a little bit about the design process and the tiny details that go into making a very smooth user experience. And let me just reiterate, design isn’t about decoration, it’s about how something actually works.

Here are a few details I’m currently thinking about and working on. This isn’t by any means an exhaustive list of design issues, but these are a handful of decisions common to almost any larger website or web application.

Registration

Thinking about how best to handle user-registration involves a lot of decision making and examination about the type of application you have. You want people to register and use a site, but in an age of annoying spam and lengthy forms, you don’t want to put barriers in place that prevent a user from deciding to fill out a form and click “Join”.

Pownce has a drop-dead gorgeous registration screen, but is it pretty and also ideal? I think they’re asking for way too much information too soon in the relationship, which might scare off a prospective user who just wants to test the service out. Simple forms are much less intimidating and likely to be filled out.

Commenting on a blog is (usually) very easy because storing any confidential information is unnecessary for commenters. You type your name, email, and optionally a website. But for a system that stores confidential information, having some type of registration is necessary to prevent that information from being exposed.

Theoretically, you could make a registration screen just one field long by only asking for an email address. Then you could mail a randomly generated password to a user and just use an email address as the login. Overall though, trying to make it this simple probably harms the user-experience as it forces the user to have to go back to his email account to get the password. Striking a proper balance between simplicity and complexity is key.

Realistically, arriving at the most usable registration screen (for many web applications) would leave you creating four fields: one for the login name, one for the email address, and one each for a password and confirm password screen. That should be just enough information to allow a user to test drive a few basic features.

For my particular app, I decided to use the in_place_editor_field functionality to allow a user to just click on a particular bit of profile information and edit it very quickly. The Flickr photo site does something similar for editing things like photo titles, and this makes it much quicker to actually perform the task.

Once the user is satisfied that he wants to continue with a particular service, there should be a separate screen to quickly update the user information.

And speaking of user accounts and registration, do you take the time to handle things like OpenID for a decidedly non-technical application? I’d say that it’s important if it can be fit in, but if development time is a priority this particular feature is best spent on the user-interface and other features rather than having something that the vast majority of people haven’t heard of.

But this last thought on registration is probably the most important one. Having a great “About” page with a description, pictures, and ideally a short and clever screencast is helpful to illustrate the usefulness of the site. Exposing as much of the functionality as possible before signup to whet somebody’s appetite is a good thing.

The Blank Slate

When a programmer is writing and testing an application, they’re likely to work with it when it’s already filled with typical dummy data and the screen a user sees when she first signs in and hasn’t yet entered any data isn’t as likely to be polished.

Yet it is the screen she first sees and plays around with that plays a large role in determining whether or not she will find something useful enough to return. If things are too confusing or the benefits aren’t clear, your user could quickly walk and not come back even after registering. So taking out the time to put in place some helpful diagrams, perhaps some help information, a short video, some example data, or something else interesting to explain the benefits is very helpful.

Signals vs. Noise, the fantastic blog of 37signals, has got a great collection of articles on the blank slate and they’re worth checking out.

But this concept of how best to fill in the blank slate leads to other questions. How long should a user see that first example screen? Should the program hide the example data after one or a few items are entered, after a few logins to allow that information plenty of chance to sink in, or should the user have the option to click a hide button that just gets rid of it altogether any time they want?

As I mentioned in my Asoboo review, I really liked the way that Asoboo did their initial help system. When you clicked the button, the item simply faded out of existence.

Simple and sweet.

Form Labels

Depending on the particular situation, you could change the wording on a particular form to make the experience a bit niftier.

For instance, if a user hasn’t entered an item into the app for a couple of weeks, why not modify a bit of view code and have the form say something like, “Hey Joseph, you haven’t entered an item in a while. We thought you were dead!”?

Actually, now that I think about it, too many business software and corporate intranets and the like aren’t fun enough. Definitely try and make some better and more entertaining useful software. I sometimes like to download apps even knowing I’ll delete them just for the chance to hear the little Laser Beam sound going off in AppZapper.

Fun little design touches that make a user smile like that are always to be encouraged, especially on a site with a goal of fun instead of business.

Threadless’s shopping cart smiley is another example of a great little conditionaln touch that makes one smile. If there are no items in the shopping cart, you get a little sad face.

These and other fun little touches should be considered wherever possible.

Relative Dates

Using relative dates is a great way to quickly get across how long ago a particular bit of information was created or modified. Having an application say that a post was entered “about 15 minutes ago” instead of a mass of useless date information like this “2008-01-02 00:46:12″ makes for a better experience.

But what if you’re dealing with a situation where you have a massive influx of information posted simultaneously? Here’s a small screenshot of Digg’s new stories page to illustrate a bit of unnecessary repetition.

The “2 min ago” text is repeated for every item. Yet this contributes towards making a cluttered screen even more cluttered. The more information you have in a given amount of space, the smaller the text has to be and the less white-space there is.

Can Digg’s crack team of programmers create something like this instead and only put in the relative date if there’s been a change from the previous mention of the relative date?

Yes, it’s harder to program this, but anything that removes superfluous data from the screen is a good thing.

And here’s another issue to consider. Is using relative dates a good idea for a date in every single possible range?

For instance, using relative dates to say “about 3 hours ago” or “4 days ago” is perfectly fine. But does it make sense to display something like “853 days ago” or “over 2 years ago” instead of just actually mentioning the actual date? Deciding if relative dates should be used with every possible date or only for a limited time range is also something that should be considered if an application deals with a lot of older data.

Programming complexity

Rails’s MVCness and special folder locations for business logic, controller code, views, helpers, javascript, etc does make it somewhat easier than doing things in PHP and not following a decent design pattern. With a bit of effort, you can keep the amount of business logic in the view down to a bare minimum, ideally just calling methods and having mostly HTML there. But regardless of programming language and your skill in keeping things in their proper place, adding all of these tiny little touches does add a fair bit of extra code and complexity to the system. As a programmer, the more details you have to hold in your short term memory, the harder it is to switch gears and make changes on code.

Also, adding some extra bit of code that adds an additional call to the database or two or throws a few extra objects into memory does make it somewhat harder to keep performance above-board when the site is hit with a heavy load, so this is an additional consideration.

But these are the tiny little details that separate good from great and world-class.

Conclusion

Making all of these tough decisions and programming all of these options into the code does impose a burden on the designer and programmer. But those are the people you want to work hard, not the user. Somebody using your website should never get stuck with unnecessary work trying to figure out how to use your application.

If I would just mindlessly throw tags into my app like any other web2.0 application and copy the typical feature set of many sites, I’d have likely finished by now. But I’m trying to make the best damn stuff I can, not another “me too” site. I’m going to stop right now, because I’m going to go take a break and this article is too long already. I didn’t get the chance to cover every single point I wanted to cover, but hopefully I managed to describe enough issues to illustrate the thought that goes into every single decision.

PS: A shiny congrats goes to anybody who can manage to identify the snazzy sans-serif typeface on the article image.

In real life, I’m most definitely not not one to habitually make a spectacle of myself. On the rare occasion I do dance in public, I feel very self-conscious and have difficulty really letting loose.

But I have this rare and amazing image of me dancing away here to illustrate a small point.

The point is simple. Don’t be like me. Learn how to dance.

Wait, thats not it.

The point is to try and have some fun with everything you do. And that can apply to the internet.

Fun

Worrying about simplicity, usability, text legibility, and other great web design practices is always important. But trying to inject a little bit of fun and joy into the world is something I’ve been ignoring.

I’m going to try and make it a point to have more fun with what I do this year. So here are just a few fun elements of other websites I’ve noticed. Most of these are very small touches, but they’re touches that are really appreciated and add a bit of fun and emotion into the mix.

Fun Greetings

Flickr has something that I think is really neat, and illustrates the global nature of the site and photography.

Every time you log into Flickr, it gives you a random greeting in a different language.

In what probably amounts to just a small handful of lines of code, Flickr makes me smile and learn something new.

Fun Message Boards

Crazy as it is, Something Awful has an incredible culture around it and an incredibly active community that has produced some of the internet’s funniest photoshops and creative projects.

Their message board software has been altered to allow folks to add in a custom thread tag with a tiny little image icon.

Here is part of the custom list of thread tags on the FYAD, dark and ironic comedy subforum.

Amazing, Amazing.

Fun Shopping Carts

Threadless, a t-shirt company with a real emphasis on creative community, also has a website filled with tons of cute touches.

One neat thing is the shopping cart that has a little sad face inside it when it is empty. Simply brilliant.

Fun Copy

Wil’s software ain’t half bad either.

Making people laugh with words is one thing that I think Wil Shipley of Delicious Monster does particularly well.

This speaks for itself.

Images with Effort

Even though Roughly Drafted Magazine can appear to some to be overly biased towards Apple at times, it is one of the more fascinating tech reads out there due to Dilger’s knowledge of the history of the tech industry. And the kicker is that articles are often spiced up with humorous images like this.

A little bit of effort can go a long way.

a new look for a new year

A modest refresh of this site’s look was done. There are still a few things here and there I need to fix but whatever.

- A new logo. The word “rain” is contained sequentially within the word “information”, so I think thats a pretty neat and minimalist way of presenting the logo. I’m hopeful it will also look snazzy in print. I also switched the text to a Futura Light typeface to give it a more elegant look.

- Bigger pictures. I changed it up a bit to allow wider pictures on the homepage and to make the most recent feature article more prominent.

I’ll write about it more later but I’m really tired of trying to implement annoying stuff in IE.

- Instead of going for rounded corners with images or annoying javascript, I did it all with CSS 3’s border-radius option. It should only work with Firefox or Safari right at this moment.

- Added some more information about me on the about page and some more projects I’ve completed on the gallery page. Constructive feedback is always welcome.

Conclusion

So thats a small look at some fun little touches. If you’ve noticed some fun little touches elsewhere on other websites feel free to post some examples as its always nice to see things I’ve not come across before.

Have fun and be well. Life is busy. I’m currently working on some smaller bits of private work and also progressing on an exciting site of my own that I’ve wanted to tackle. For now, here’s a sneak peak at the logo and it may give you a bit of insight into what this upcoming site is about.

* Safari, based on the open-source WebKit engine, is included as the default choice. It is my personal favorite for everyday use for reasons discussed below.

For some more notes on available Mac web development options, check out Hicks Design.

* I occassionally use Firefox when I want to Stumble or use some other specific extension, but for my needs there’s no one single extension that exists that I can’t live without. There are some neat Firefox web-development tools, but I’m happy with CSSEdit and some of my other favorite Mac Apps for web development.

* I like Opera a lot as well. I think I’m going to start recommending it over Firefox for inexperienced computer users that don’t use Firefox extensions anyway. It comes with a ton of great features. I really like the Speed Dial feature as just one example of something smart and unique.

* I want to like Shiira as it presents some interesting interface ideas, such as replacing standard tabs on the top with an image of the page on the bottom, but it is way too unstable to use as a full-time browser. Worth keeping an eye on though as it does seem to have potential.

* Sunrise is a great browser for testing websites in because you can check quickly test different monitor sizes, and it has some neat ideas, but its not something I’d use for anything other than testing.

* Camino is a lightweight and functional browser based on Mozilla’s Gecko rendering engine. Its a worthy choice in my opinion.

* A number of folks rave about OmniWeb. It is very feature-rich and seems very polished, but the extra customization options and features might not be worth paying for to everybody.

As far as I am aware of, those are the major web browsers on the Mac, but if I missed any, feel free to let me know of any others.

Why I use Safari over Firefox & Opera & others

I just wanted to explain part of the reason why I use Safari over the numerous alternatives on the Mac.

The whole topic of the differences in font-rendering between Macs and Windows itself is also pretty fascinating. There’s a large amount of interesting discussion on the topic.

* Font-rendering in Safari appears better than in other browsers.

* There are normal Aqua-style buttons, everything feels more Mac-like. In Firefox for instance, the close tab button is on the right like in Windows instead of the left like Safari and the Mac OS.

* Dragging and dropping works better with images and things. In Firefox for example, instead of seeing a transparent ghost image when dragging images to the Desktop as in Safari, you just see an empty box.

* Though I’m a big fan of Delicious for bookmarks, when I do want a bookmark to be saved on my computer, Safari’s handling of it is nicer.

Safari 3 Impressions

I’ve been using the Safari 3 beta as my primary browser since it has become available, and I’ve got to say that I’m very impressed with it.

* Yeah, memory-usage wise it can still be a real pig with extended use. Unfortunately, most browsers are.

* It is noticeably faster and more stable due largely to the very strict performance and testing guidelines the WebKit Project adheres to.

I particularly hope that text editors like TextMate start using this kind of search as it would be very valuable when programming.

* The inline-find is absolutely golden when scanning long documents for specific terms. I hope more apps start using this kind of search.

* Draggable tabs and the ability to even drag a tab to create a new window is very useful.

* Flash on the Mac can still be unstable at times and sometimes cause a browser crash so the “Reopen Windows from Last Session” feature is greatly appreciated.

* Resizable text fields are awesome when entering in text in message boards of other forms that are designed too small.

* Those are the biggest ones for me, but there are a ton of other great features as well that add value to the software.

* There are some Leopard-only features of Safari 3 that I haven’t tested yet, but things like the Web Clip feature that allows you to create part of a website on your Dashboard look amazingly useful without being complicated.

A few ideas for Safari 4

Here are a few desired features for the next version of Safari.

Some of what is mentioned can likely already be accomplished via Firefox extensions, or at least hypothetically be accomplished, but I don’t believe that at least some of what I mention is possible via Firefox extensions because (as far as I am aware) you can’t control other system Apps via the Firefox extension system.

Apple is actually in a really pretty position here because they make the software that comes with the Mac and there are so many opportunities for integration between Apps that other browser manufacturers can’t match.

And I think at least a few of the suggestions I make can be transferred to the Windows version of Safari.

Embed Website URL in Image Metadata

I often save images from the web for use in articles and things, but I often forget to write down which site a specific image came from, leading me to have to hunt Google Images for the original source.

A simple solution would be that when saving an image to your computer, whether via dragging and dropping or selecting Save, that the website URL it arrived from would be automatically embedded in the file’s metadata.

So next time I’m searching my hard drive to see where I originally got some cool picture of Worf, son of Mogh, I could see what website I originally got the image.

It could appear something like this.

Youtube and iTunes should co-exist.

When on the computer, I am often either consuming YouTube videos or listening to my music on iTunes. When I want to go from listening music to watching a YouTube video, I use Expose, stop iTunes, watch the YouTube video, and go back to iTunes to click play.

Yes, there are some Dashboard widgets to control iTunes, and even some menubar tools, but I think there’s an even quicker and easier way for people.

Possibly even QuickTime should take advantage of this as well.

Safari and iTunes should be intelligent enough to fade out + stop iTunes music from playing when the user is in the browser watching a YouTube video (or possibly any Flash video if possible) and resume playback when the video is done or the tab is closed.

Social Networking Notifications

Macs are getting more and more popular among young folks. And social networking and fancy Web 2.0 sites are getting more and more important to peoples’ lives.

I currently have a handful of these sites in my Bookmarks Bar. How about having a subtle notification system that tells you how many events occurred at each of these sites? It might look something like this.

Animated GIFs playback controls

I think it would be nice to have a little set of playback controls appear in when you mouse over animated GIFs in Safari.

Maybe something simple like this.

Its nothing too important, but its a fun little enhancement.

A few minor Safari bug and usability fixes that I’d want

For all I know, some of these fixes are in the final version of Safari, but regardless, here are a few minor bugs I noticed.

* Safari prevents a tab from being closed that has text entered in a form within. It unfortunately also presents the same warning message even when the text has already been submitted via Ajax. It should automatically detect whether the text has been submitted and make a decision to give a warning message accordingly.

* Safari’s inline-find finds stuff within frames, but doesn’t scroll the frame down to the location of the word when hitting the “find next” button. I don’t like frames in most cases, but they are used as an element of certain sites’ designs, and the frame should automatically scroll down to arrive at the highlighted term.

* The draggable tabs could be improved by figuring out a way to drag tabs from when you’ve got an overflow of tabs on the right side.

* Safari should prevent a tab from being accidentally closed that is loading a Flash movie or streaming video that hasn’t finished playing. For a short clip, thats not too much of an issue. For a longer clip that might take a minute or two to load, this can be annoying.

* Safari seems to have as good or better CSS support than most browsers, but continuing to keep pace with any developments ought to be a priority as many developers are now using Macs.

Plugins and more

Input Managers are the main method used to plug-in to existing Mac Apps such as Safari.

There’s been some concern that Input Managers will removed in 10.5 Leopard due to security concerns. As far as I am able to tell, they will still be present in 10.5. I hope I’m not wrong on this as Inquisitor is a great Safari plugin (advertised as “Spotlight” for the web) that I’d miss if I didn’t have.

For more Safari plugins, visit Pimp My Safari for other great options.

Conclusion

Safari 3 looks really awesome. I can’t wait to try it out the finished version when I get Leopard on 10/26.

I finally found a use for the pre-installed Comic Life!

Pick 2 out of these 3.

* Standard font size

* Less than 800 pixels wide

* Colorful background container

It is nigh impossible to reasonably design a two-column site for 800-pixel wide monitors AND use standard font sizes AND have a background container at the same time . Getting rid of any sort of container allows you to fit content reasonably while keeping a decent amount of white space between columns.

Smush it against the wall

If you had some type of background container, you wouldn’t be able to shove text up against it like so. You’d have to move the text to the right a few dozen pixels so there’s a modicum of white space there and it doesn’t look horrible.

But if you remove that useless color, then you have the ability to do this without making the site look screwed up.

And by doing this you save a few dozen pixels worth of width that can be used towards giving you more whitespace between columns over on the right. The first version of my site had to be 950 pixels wide to have that black background around the content and maintain a reasonable amount of whitespace and have standard font-sizes. Once I realized why that was problematic, I set out to change it.

But why design for 800?

It certainly isn’t necessary for every single type of project. If you were building a site for 3d-artists to display their creations for instance, you’d design as big as you could get away with to let large visuals be the focus. But for many types of business applications, this isn’t the ideal.

Sacrificing legibility for style doesn’t help your users, does it?

When you build sites for small businesses, you learn that some of them rely on older equipment. That means really old and really small monitors. And because horizontal scrolling on the web is a pet peeve of mine, I’d tend to try and design as thin as possible in a situation where it may be encountered. But I definitely don’t want to sacrifice legibility by making the text tiny to do so. That is the easy way out, but I don’t think it is the right way.

That is a small additional touch, but something important for a percentage of users who might be on the go.

Also, in terms of mobile web design, which I really need to learn more about to be honest, particularly designing for things like the iPhone that have a real browser, designing as thin as possible while still using decent sized text allows a user to read a page without zooming in.

Conclusion

Those are some notes to semi-conclude that idea about getting rid of the background container and thinness.

Now a small personal note. This week or three I had planned to work on a few personal projects that I wanted to release soon, two websites and what I think is a very creative web application. But those things are on hold for the moment as I’m going to be busy with some contract work for a larger company over the next few weeks/months, but I’ll still post some articles and things that I have planned. Writing about things that interest me is too much fun to stop even when I am busy.

Cheers.

That quote by Antoine de Saint Exupéry is something that has stuck with me. This post speaks on something simple, but on one design idea that I think is pretty useful for the internet. I was thinking about my own web design evolution today, and about how I tend to approach solving design problems today as opposed to the past.

In the past, I was very likely to use something like this. This was the first official version of my site.

I’d have the content in the middle, and a background container that was a different color than my content area and various graphics of some sort around it.

When I talk about a container, I’m not talking about some DIV in the XHTML that you’d use to position the content, I’m talking about what the user sees, the large region of color and graphics around content.

My own design trend is heading towards this container-less direction. This is the newest incarnation of this site.

Notice there is no surrounding color. The content is surrounded by whitespace, not color or meaningless graphics or whatever.

The courage to be naked

For some great (or actually not so great) examples of web pages that are pretty but suck, or just plain flat out suck, check out Web Pages That Suck.

Designing without lots of graphics and colors is really brave. You have to focus on selecting the best content, quality typography, legibility obviously, and avoid some common usability pratfalls. You can’t hide a poor layout behind pretty vector graphics and loads of stock clip-art and other distractions.

I recently wrote a comment on the 15 Excellent Examples of Web Typography. Part 1 article.

….I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of character when somebody is confident enough in their layout to avoid any colors whatsoever.

John Boardley, the guy who created the I LoveTypography site, responded with this interesting comment.

Yes, none of the examples is perfect. I think the Rikcat design and others that resist all the hues of the rainbow are brave designs. Colour, like so many elements of design can cover a multitude of sins.
However, when your design is standing in nothing but its proverbial underpants, then you really need to have a clean pair. Actually, I sometimes reduce a full colour design to grey scale as part of the testing process; it’s surprising how much this experiment reveals.

Actually John, one of the advantages of working for yourself is that you can design in your literal underpants.

You always try and get better in whatever you do in life and every time I’m thinking about what direction to go in, I think this is the philosophy to follow. Focus on what makes the web work: simplicity, usability, quality typography, and great content.

Reducing Brand Value

So, is designing sites in this way going to lead to a web that is sort of predictable and boring?

I don’t think so. For one thing, a surprising amount of web design is still dominated by companies and individuals that churn out sites with random Dreamweaver Templates instead of handcrafting an ideal site from scratch. Go look at your local craigslist page. You’ll see hordes of folks pimping two-hundred and fifty dollar web designs without any sort of content-management system as the ideal thing for some business.

But beyond that, consider what really makes a website and brand distinctive.

Information Architects JP has written a fascinating point about the interface really being the brand.

Using the common iPod example, there’s not even a logo on the front. You know just by seeing the click-wheel (the interface) what the brand is (an Apple iPod).

Focusing on making sites easier to use: selecting only the information that is valuable to your users instead of throwing everything on the page, making content easy to read, those are the things that good web design seems to really be about.

Yeah, but how can you still make a site distinctive?

If you’re concerned about aesthetics and graphics and “prettiness”, there are tons of very simple things you can do within the context of a lack of a container and simplicity, even if you’re not a sublimely-talented artist.

For one thing, look at color, or rather, a lack of it. Within a sea of black & white, a tiny splash of color can be so much more distinctive than an incredibly colorful and cluttered site. Just look at the renowned film Sin City for this.

Besides Sin City, another famous example of using black and white with just a splash of color in film is the girl in red from Schindler’s List.

I think Coda is a quality product and I’d recommend experimenting with it to see if you like it, but it doesn’t really fit within my workflow preference as well as other apps like Textmate and CSSEdit.

Or take logo design. A beautifully distinctive logo can make an entire website or product experience very distinctive and memorable. I’m not a logo-designer, but there are a ton of great ones out there. One of the greatest looking logos I’ve seen recently is the one from Coda, a unique website development tool.

Or think about what you can do with the peripherary of a site: particularly the top and bottom. Take my site as one example. In this site’s CSS, I have something like this…

border-top: solid 15px #000
border-bottom: solid 15px #000

…that produces a black band along the top and bottom of the site.

This is very simple. No images are needed that slow down site-loading times. Just a tiny bit of clever CSS can add some flavor to the soup. You don’t even need to resort to using any complicated CSS 3 tricks to do this.

Development is easier

Another advantage of simplicity and not relying on graphics for distinctiveness is having less of a struggle getting things to work on every single browser. Development time and headaches can be greatly reduced if you don’t have as many graphics on the screen to worry about positioning errors on the half-dozen or so browsers that really matter.

I can’t tell you how many hours of sleep I lost trying to solve a simple incompatibility between IE6 and Firefox on some work I did a while back. One cool thing nowadays is that there are a number of free CSS Reset Methods that eliminate a lot of this, but the fact that some browsers like IE still exhibit some difficulties is one of the most galling things about modern web design.

If your focus is on whitespace as opposed to graphics, it wouldn’t look out of place if a few things are slightly different between browsers because you’ll just have a bit extra whitespace there as opposed to graphics not being aligned correctly.

A few examples of quality sites that follow this dictum

Subtraction - Great design and other cool writing. Famous for the grid-system approach to design.

skelliewag - Great content creation advice, focusing on providing value for users. Very simple design.

Rikcat Industries - A website I only recently discovered so I haven’t had a chance to read some of the writing on there, but has a phenomenal black & white design. Way cool!

Information Architects Japan - Great observations on all kinds of fascinating design, internet, and other technology issues. One of my favorite sites ever.

I Love Typography - Contains plenty of humorous and informative articles on typography. Has quickly become a very popular website.

Information Rain - Probably the best website on the internet, if I do say so myself.

Conclusion

Designing this way has a lot of advantages, some of which were mentioned above. But in my opinion there is one more key issue that designing in without a background container provides. More to come in the next article which should be posted on Wednesday.