Web Design It's Not Just For PCs Anymore

I have been working in the web design/development community since 1998 and it seems like every time the web takes a step forward it means two steps back for developers. A lot of the same issues that plagued developers when dial-up was still predominant are issues still today. Not because people are on dial-up, but because of the ever growing number of devices that are web enabled. These devices range from e-books, to cell phones to TouchSmart devices. The problem though is that there seems to be several schools of thought on how to design a site. One is design it for people who will surf your site on a PC, the other end is design it to be as accessible possible on all devices, another thought is design for the common device of your end user today. The problem I have these thoughts are as follows:

1. Designing for PCs only isn’t really realistic these days. Mobile web surfing is becoming more common place with smart phones.
2. Designing for all devices means your site becomes so bland it doesn’t seem “fun” anymore. The web is supposed to be dynamic.
3. It seems that most devices are now implementing their own standards or patches to get something to work with it. We’re basically going back to Netscape vs. Internet Explorer. If you wanted to create any sort of JavaScript effect back in 2000 for either of those browsers you would have to write code for the “div” tag and code for the “layer” tag (Netscape’s version of divs).
4. Designing for what most of your end users use becomes a chicken and egg issue. Are people not coming back to your site on their cell phone because the experience was horrible the first time? Or do you put in a lot of hours to support a small niche of devices with the hope they keep on coming back?
5. There’s a new twist on the larger web enabled products these days, making even traditional design archaic on these products. Touch Interfaces

Technology development within the last year or two has changed dramatically. The types of devices we use for interfacing with the web is changing with touch technology. As an aside and in full disclosure for this article (I do work for HP in my day job and this isn’t an article written for or endorsed by them. ) However working there I get to see some pretty cool things, one of these things is the TouchSmart PCs and TouchSmart Notebooks being able to see these first hand I’ll admit they’re pretty cool, but what got me thinking is how this technology will change web design. Between these products and Apple’s iPhone the evolution of touch computing is just starting.

No More Mice

What these products really mean is that a change in how we interact with the products will mean a change in how we need to web sites and site architectures. It’s such a simple little thing but removing the mouse from a PC totally changes how an interface needs to be designed to be truly usable. The first and biggest change is going to be how we scroll on a page, and interact with elements of a site such as navigation. Consider the changes implied to the mouse over effects. Every web page that has a mouse over effect will become non-functional on a touch device. Sure the effects can in theory still be there, but are people really going to be dragging their finger all over a screen looking for effects. From what I’ve seen in how people use these devices it’s more of a sweep and poke motion. Sweeps to spin, or slide things on screens, or direct pokes to click. All of these interactions would be defined as onmouse down functionality. The mouse over effect is more of a passive effect. It’s also an effect used for a lot of menu navigation today to hide elements to keep sites clean. Usability on a touch device will mean that people should be able to poke a menu and it will open, and poke it again to close it. Effects such as pop-up boxes on mouse overs will need to be redesigned to make sure that reading them is easy and your fingers aren’t in the way.

The nature of navigating will also change, from sliding a page up and down to left and right. More like fliping a book as opposed to the current scrolling with a page (think how you flip through applications on an iPhone, or how you slide through pictures on a TouchSmart). I’m not sure how much thought has gone into touch device interface design for websites, but what I do know is that what seems natural with a mouse doesn’t feel natural as a hand gesture. Of course all this raises a dilemma for a designer. How do you make a site that works both with a traditional display and with a touch device. I’ve seen some sites that degrade nicely to an iPhone (amazon.com) and my site uses a plug-in to modify the HTML, JavaScript and CSS to work on an iPhone. What I think we will see is that there becomes a greater need to handle content server side first.

Display Only What You Need to Display

I’m thinking server side right now because my feeling is that designing a site that works on everything will end up with a lot of code bloat. To keep things clean and compliant with your chosen doctype it’s the only way I see this being manageable. Unfortunately or fortunately a lot of hack shops will not be able to adapt immediately. I’m talking about people who pass their self off as web designers and then let Dreamweaver write all their code; which if it’s your personal site works. For a business site, it’s my thought that your code needs to be cleaner than that, especially when you take into account SEO, usability, portability, manageability, and scalability. Also to maintain that site you should be able to understand how to manipulate the code you are creating. A good designer knows how to manipulate the tools they use, knows when taking a short cut is OK, and when they need to write their own custom code.

In the short term I think web designers will have to start to look at writing their own custom code if they want to support these new products. I think it’s safe to say that touch technology isn’t going to be going anywhere soon. As web designers, as site architects, as interface designers, as a usability experts, as webmasters, you need to understand what these new devices mean to your website. If conversions drop suddenly, maybe you need to look at your metrics report and see what are people browsing your site with this month. I don’t think this is going to be an over night revolution of touch devices, but with how quickly the iPhone has taken off I think it’s only a matter of time. Perhaps we will see new code written for an onpageslide function in JavaScript or something similar. I also think these devices will change the way in which we read the content. As devices become more portable and require less accessories to interface with them, I think readers will begin to move away from the scanning of web pages they have come to be known for and revert back to a more traditional means of reading. I haven’t seen any studies that indicate mice relate to the scanning patters of a website, but I would be surprised if there isn’t a small coloration between the two. In the mean time I’d love to hear and see what people are doing with interface design for touch devices.