In the process of creating the new Ribit web site-as well as my own-I had occasion to test the sites out on an iPad. Browsing on an iPhone/Pad/Pod (hereafter referred to as an iProduct) is very intuitive and easy, but also very different from what we are used to on a desktop or laptop PC. Contrary to what some might think, the iProduct multi-touch interface does not merely substitute touching for clicking, and our usual instinct of viewing a page and vertically scrolling to the next page or section of content doesn’t always serve us well. Viewing a web page on an iProduct is more akin to looking at a menu of items available for perusal. When you first visit a site, you see the entire front page. If this page has a lot of stuff on it, you will see a tall vertical strip of content, all of which is far too small to actually be read or viewed effectively. Tapping an area automatically zooms the screen to that area of content, bringing it into focus and making it readable. Tapping again zooms back out to the full page, touching and sweeping your fingers around allows you to freely pan (I don’t like to call it scrolling, it doesn’t feel anything like scrolling on a normal PC) in any direction. All very intuitive and very, very cool, but as I discovered, this and other aspects of the multi-touch interface have some consequences for web design.

First if all, there is navigation of pages. We are used to point and click; an iProduct gives us touch. Easy enough, but when designing, one has to remember that a human finger is not as precise and pointy as a mouse cursor. Navigation elements on a site need to be large, and have more space between them, to make browsing your site on an iProduct a good experience. Another thing to remember is that there is no such thing as mouse-hover or mouseover on an iProduct. The cursor does not exist when the screen is not touched, and so many of the event handlers web designers use to highlight things like navigation buttons simply won’t work. With this in mind, navigation needs to be made very clear. A link, whether it be text or a graphic button, needs to very obviously be a link. Along with rollover states for navigation, drop down menus are problematic on an iProduct. Apple has given us the functionality by invoking the normal mouse-over event when touching on a navigation element that triggers a drop down, but unless your site is extremely large I would highly recommend doing away with hierarchical drop downs in your site menus. One touch to the destination should be the rule, as far as it is possible.

Another interesting thing I discovered is that certain CSS properties that work perfectly fine in Safari on a desktop computer are ignored on an iProduct. The most important of these I found are fixed elements such as DIV tags with a position:fixed attribute, or background images using the  background-attachment:fixed property.  The reason for this is simple, and makes sense once you think about it.  On an iProduct, in order to accommodate large amounts of page content on the smaller screens, the user has to be able to pan around the page, and unlike a desktop environment, you don’t get the ever-present cursor and scroll bar with its handy buttons, to say nothing of having a mouse with a scroll wheel.  The result of this is that a touch and drag on an iProduct screen has to pan the page around on all directions, and fixed elements will not behave properly in that environment.  Accordingly, Safari on the iProducts ignores the fixed property items and moves them around with the page as a whole.  It might be helpful to think of a web page on an iProduct as akin to looking at static printed document that has active areas that allow you to bring up other, related, documents.

The easy solution to all this is simply to make your navigation really big and chunky, which I hate; and to avoid the use of fixed properties in your CSS, but frankly the cool things you can do with them in the desktop environment make that an unattractive choice.  You might notice I have used them here.

Can we have our cake and eat it, too?

The answer is yes.

We have a couple of options we can use to accomplish this.  WordPress makes this very easy as it has some built in functionality that smooths the process along.  If you are not using WordPress, similar results can be achieved using CSS Browser Selector.  For WordPress users, check out this excellent article by Nathan Rice on using the WordPres body_class function to detect if your user is on an iProduct and serve them altered CSS instructions to make your site iProduct Friendly.

I’ll let you read the article to get the full scoop, but what is happening is essentially that if someone on an iProduct comes to your site, alternative CSS instructions can be used for any elements that might be problematic in the small-screen multi-touch environment.  I was able to use this to remove the fixed properties from various site elements, and best of all, I was able to increase both the size and spacing of text and graphic navigation elements.  For the user the changes are totally transparent, and I as the designer don’t have to compromise on my desktop design in order to have a usable site on an iProduct.

With millions of iProducts flying out of Apple’s warehouses, I think iProduct prep is going to become a vital step in delivery of web sites.

So here we are.

WordPress.

Yeah.

I have resisted the siren song of WordPress for quite some time.  For one thing, I was quite comfortable working in Seditio and was reluctant to learn a new system that, as far as I could see, was just going to do the same thing.  Also, I had tried WordPress years ago, when shopping for a good CMS, and at that time had found it very limited.  Back then it really was only good for making a blog, and the theming system seemed incredibly stiff and confusing.  Additionally, when one looks at WordPress sites, they tend to look really alike.  I had always assumed this was due limitations of WordPress itself but have discovered it seems to be more of a limitation of the theme designers, or perhaps more charitably the result of a fad embracing the “classic” WordPress layout.  Add to this that a gadfly colleague of mine had been pestering me to give it a try again, since she was hearing great things about it, and I reluctantly consented to take a fresh look.

Needless to say, I was impressed.  So much so that when I redesigned the Ribit Web Site I scrapped the old CMS and re-did the whole thing in WordPress, including bringing over 2 years of blog entries.  WordPress has really grown up in the last 5 years or so.  The theming system is very elegant now, although in truth I cannot say for sure if this is a result of it changing or me just being more experienced now.  The blog is now simply a feature of the site, albeit a big one, rather than the whole enchilada, and the blog features (archives, links, comments, etc) do not have to dominate the site landscape.  And while I remain skeptical of a lot of the current talk of Search Engine Optimization, WordPress now makes it very easy to help the web crawlers find your site more easily.  I enjoyed learning the ins and outs of the system and found that the engine now actually helps me in my design efforts by getting out of my way and freeing me up from some of the more tedious coding chores.  The extensibility and vast plugin library available was also a big incentive.

After completing the Ribit site, I was so impressed that I decided my own site should be redone for WordPress.  And here we are.  The design was kept essentially the same.  A few changes include the removal of any form of drop down navigation, as lately I have been trying more and more to sideline navigation as a heavy design element, and the inclusion of a more WordPress-esque sidebar.  I also did a lot of CSS research during this redo and have discovered quite a few new tricks.  CSS is really coming into its own now and I can see a point in the near future where we can do web page layout with the same freedom we enjoy for print.  The entire process of recreating my site has taken about 2 weeks, working just on weekends really and some evenings; and it only took that long because I played around a lot with new CSS and script techniques.  I estimate if I had just applied the design exactly as it appeared before I could have done it in a day.  Or less.

I think I am going to enjoy being on board the WordPress train.  I am already adjusting all my incoming work and plan to use it as my primary site development environment for the foreseeable future.

Ok, ok, so I can’t pull of ‘leetspeak, so sue me.

Years ago, while still in the graphic artist nursery (also known as school), we had a “Computer Painting” class that used a wonderful little piece of software called, straightforwardly enough, Painter. Painter was the product of a group of geniuses at a small company called Fractal Design. Fractal Design, is, alas, no more, having undergone a merger and becoming Metacreations, which then underwent a lobotomy, sold of all its graphics software business, and focused solely on a web technology for showing movies (because, you know, no one had done that before) and changing its name to Viewpoint (quiz! When is the last time you went to a site that used the Viewpoint Streaming Plugin? Yeah, me neither!). Painter itself was sold off to Corel, which at the time gave me screaming nightmares. I have to admit now, however, that Corel has done a reasonably good job at keeping Painter true to its original purpose, although I really wish they would hire a UI designer that was not addicted to barbiturates and crack. I use Painter to this day, and look for ways to make use of its natural media effects and textures in my work (hint: how do you think that watercolor-ish color deco stripes on this site were made?). By now I am sure you are wondering what the hell this has to do with Wacom.  Wacom, for the uninitiated, makes a line of pressure sensitive graphics tablets for use in computer graphics applications. Referring back to my opening lines , when I was learning to paint with Painter, I also had the privilege of using an early version of the Wacom Graphics Tablet. Back then, they were smallish, the largest topping out at about 6″x8″, and that one was expensive. The one we had at the school was a paltry 4″x6″, but even that was fun. I always wanted one of my own, but I could never justify the cost, as I don’t do that much sketch or hand drawing sort of work. Flash forward to last week. My girlfriend’s parents, for reasons I cannot fathom, love me. So much so that upon learning that I had always wanted a Wacom tablet, they went out and bought me one. Not my birthday, nothing like that, just doing me a favor. It was a surprise, too, it arrived at my door via UPS and I had no idea it was coming. I took a moment wondering if I was stealing someone’s else’s property if I kept this thing I obviously did not order. Anyway, I eagerly opened the box, pulled out all the bits, plugged it in, installed software, and away I went! I tell you, as fun as these tablets were years ago, these days they friggin’ rock my pants. In addition to the pressure sensitive drawing area, the tablet has a set of 4 buttons and a touch strip on either side. These buttons can be programmed to any key function, and the touch strip defaults to a touch scroller, but can be set to perform other functions (such as zoom in/out) as well. The pressure sensing has come a long way as well. Cranking open Painter (nothing works better with a Wacom than Painter), I proceeded to play around with watercolor and oil brushes, 2B pencil, charcoal, and even crayons. Lightly brushing the pad resulted in a light stroke, as expected, and pushing harder resulted in a heavy stroke. It felt very natural, very intuitive. I started doing gesture sketches with charcoal, which I have not done since a teacher stopped making me, it was that fun. I got another pleasant surprise when I tested out the pressure sensitivity with oil and watercolor paintbrushes. A light touch resulted in a fine, light application of paint, but pushing down had the effect of not only laying on more paint, but of broadening the brush tip, as you would expect naturally, as it does when the bristles splay out against the canvas. I think I spent an hour making paint strokes that went from small and light to heavy and broad. Great fun! Best part? I got to play with about 20 different types of media, including oils, gouache, watercolors, acrylics, charcoal, liquid inks, and more, and there was no smell, no mess, and no annoying stains under my fingernails. To reiterate: Wacom is t3h l33t r0xx0r s3xx0r!