Jason Amunwa is a marketing Macgyver, with experience creating innovative campaign strategies, designing creative executions across multiple channels, and most of the stuff that happens in-between, for brands big and small.

It’s probably safe to say that touchscreens as a method of interacting with the web aren’t going away. In fact, it appears quite the opposite: most new smartphones have one now, Google’s making their own tablet, and I think ol’ Steve Jobs has managed to shift a couple…million.

Therefore I think now is a good time for us designers to take a step back from all the glassy smoothness of these devices and ponder the implications of this radically new way of interacting with our online environment. Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors. You’re welcome!

Things are going to get bigger

Unless you're like this guy, you probably can't press just one pixel

Imagine for a minute how many pixels you could fit on the tip of your fingers – that’s approximately the number of times less accurate touchscreen users are, compared with the single-pixel precision of mice. This is one of the fundamental differences between these two input methods that radically affects how we must design our user interfaces.

Buttons, links and other interactive elements must now be large enough to be easily pressed on the first try. Typography will therefore also need to expand in line with the rest of the interface, or else look dwarvish by comparison. The spread of copy & paste functions among smartphones (starting with Android, and recently arriving at some of the lesser known handsets) will also require larger typography, in order to be comfortable.

“But what about fixed widths and the fold?” echoes your agonized cry. “All these supersized elements and text will push everything down!”. Well, a peculiar quirk of touchscreens’ very nature means bye bye worrying about these – but we’ll get to that in a minute.

Dropdown and gimme 20

Breaking News: In touchscreen-land, the “hover” state doesn’t exist – there is either no contact at all, or contact with a fingertip. Some more advanced touchscreens register variable amounts of pressure from a finger, but these are far from being in widespread use for the time being. The primary triggering mechanism for that staple navigation element – the dropdown menu – is simply not viable for touchscreen users, meaning that for all its ‘magical’-ness, you can’t easily navigate many websites’ content on the iPad or indeed any other touchscreen device. How, then, can we compensate for this in our UI designs? Some ideas:

• “Pop-opens“: hidden menus that appear after a long press on a UI element – kind of like a ‘sticky’ dropdown menu
• “Drag-opens”: sliding menus that the user manually pulls open like a drawer, to access the info or elements within. These are nice, because return users can drag it partially open to only reveal the info/element that is needed, thus saving screen space overall.
• More focused navigational structure: the spread of touchscreen devices may force website owners to ask themselves what’s really important to have in their top-level navigation, and which pages can be consolidated, to trim down the number of sub-pages they need to cram into hidden menu tabs
• Drag & drop, and easing behaviors: since we’re increasingly able to manipulate digital objects in much the same way as physical ones, users will expect them to behave similarly in the digital space - our hunter-gatherer instinct is in full effect as we physically sift through objects that have either been read or are not relevant, in order to reveal the valuable info.
• Contextual navigation: do all your users really need the ability to jump from one end of your website to the other at all times? Perhaps a more dynamic navigation element that adapts to suit the context of their location within your website is a better use of the screen real-estate, instead of inflexibly offering the same static set of choices regardless of their current page.

I multitouch myself

Multitouch is truly a fork in the road for website owners that won’t happen for a while, but will happen eventually as the technology becomes more pervasive. Consider this: mouse users have just a single point of interaction, whereas touchscreen users can have between 1 and 21 points of contact with the screen, depending on their flexibility (and degree of perversion).

Apple is forging ahead with user interfaces for octopi - can YOU afford to be left behind?

Granted, until multitouch becomes a standard feature across all touchscreen devices, any UI functions that take advantage of it will have to be luxuries, but it’s worth considering how much it potentially speeds up a user’s interactions with your website, and the interesting possibilities it opens up to designers.

Interaction via gestures is also an avenue to be aware of, e.g. flipping through a series of consecutive pages using a swipe of the hand. We see these types of gestures built into the operating systems of touchscreen devices, but how long before websites begin to take advantage of them?

The fold, and liquid vs fixed widths

Remember when I said forget about the fold and fixed widths? If you replied ‘yes’, then you’re obviously ignoring me. Forget about them. Mice were built for the vertically-emphasized nature of the web – scroll wheels and the pushing/pulling action of vertical scrolling were more natural with mice, therefore web interfaces evolved to emphasize vertical movement. In addition, the web was primarily consumed by desktop PCs and laptops, with their comparably standardized screen resolutions.

Bruce once said about liquid web layouts "Be formless. Shapeless, like water. If you put water into a cup, it becomes the cup."He also beat wholesale ass.

Things are different now – with the rapid rise of web-capable smartphones, it’s like the wild west out there. Not only do the screen sizes differ across each handset manufacturer, but recent phones can display in either portrait or landscape modes! The upshot is that there are now too many possible screen resolutions for us to feasibly pick a reliable fixed width, and one solution is to adopt liquid layouts that conform to whatever sized screen the user is viewing our pages with.

An alternative is to start using *gasp* horizontal scrolling in web design, allowing touchscreen users to flip through information from left-to-right in much the same way as with a book. Heresy, I know, but hey, it’s a new world we’re living in, folks.

You put your right hand in, your right hand out…

Between 70 and 90% of the world’s population is right-handed, meaning that those with tablet computers are likely going to be holding the device with their left hand. It’s therefore entirely possible that we will see a shift in sidebar navigation placement from the left to the right, for quicker access than reaching all the way across the screen. Just sayin’.

In Conclusion

Touchscreens and the mobile web just made designers’ lives a lot more complicated, BUT it’ll be our creativity and ingenuity that sets the standards of the next generation of touchscreen and gesture-driven user interfaces. That’s like, some crazy Minority Report stuff – how cool is that?

Get on time success in 642-617 & 642-681 exams by using our latest and high quality 350-029 and other superb 650-296 exam pass resources of 642-067.

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

The Tangible Web: Thoughts on Designing Websites for Touchscreens

The iPad has received mixed reviews. While the geeks (people like you and me) have looked at it with disdain for being “just” what we expected, the media publishing industry (read print media) has seen it as the salvation they had been waiting for. Whether the iPad is able to change the world or not, is not the issue of this article. But the fact of the matter is that it is here and sooner or later we need to learn to design the web keeping it in our minds. So what are the things we need to consider?

Fluid Width Design

The iPad has no RIGHT way of viewing websites. That means you can view it either in landscape or in the portrait mode. But for the designer that means two completely different layouts for which to design. It is for this specific reason that the iPad highlights the need for smart fluid width design. Using a smart combination of CSS and Javascript the User Experience can be made to improve drastically.

Resources:

• Smashing Magazine talks of Fluid vs Elastic vs Fixed Layouts
• Smashing Magazine gives smart fixes for Fluid Layouts

Adaptive CSS

It is time for designers to get their skills together for designing for the iPad is going to be a roller coaster. While Fluid layouts are the best bet, but there are many instances where we just cannot use them. In such cases, we need to look beyond them to the basic styling.

A prominent option would be to use multiple CSS styles for different configurations and devices. Another is going for an adaptive content that changes according to the screen resolution.

Resources:

• A List Apart talks of Progressive Enhancement with CSS

There is NO Fold: Vertical or Horizontal

The iPad establishes one thing for certain. The website need not look the same on every platform. We have gone on to include Style Sheets for iPhone to include mobile devices, now we need to include them for iPad to keep in view the No Fold Policy.

In Portrait mode a very good portion of the website can be seen at one go. At the same time in the landscape mode the touch interface makes it very natural to browse sites that display content horizontally.

Further Reading:

• A look at 5 websites design styles that would benefit on the iPad
• Life below 600px

Links and Hover Effects

Primary method of user interaction with the iPad is and will be the fingers. The users will interact with our websites using fingers. So all those brilliant hover effects that were favorable for pointer-based devices, will be a hurdle in user experience on the iPad.

Also the links can no longer be concealed in a text and left for the user to dexterously click upon it. We might want to resize the links so that the user experience does not suffer.

Flash & HTML5

While the world has been divided over Apple’s stand on doing away with Flash, we need to understand that the step in the direction has already been taken. With Google openly adopting HTML5 for Youtube, it is only a beginning of the things to come with HTML5.

As designers we need to understand this paradigm shift and devote our efforts in not only learning about HTML5 but at the same time doing away with Flash. I understand that is a bold statement to make. But answer this:

“Would you rather have a Blue Lego?”

Further Reading:

• Can Flash be saved?
• Apple’s iPad — a broken link?

Conclusion

While a lot of hidden points can be further raised 9 (Issues like typography, and webkit) I think the article serves as a good and sufficient point for the discussion to begin. I would love to hear your views on how exactly Apple’s iPad changes the way we design websites.

About Inspiring Pixel (Author’s Blog)

Inspiring Pixel is, as they like to call it, a design steroid that boosts your creativity and gives you inspiration besides removing the inhibitions and ignorance that cloud your true art. For those looking for a more traditional approach, it’s a web design and inspiration blog that aims to give your daily needed dose of creativity. IP aims to be a leading pioneer of web and graphic design in times to come, but more than anything they wish to make it matter while they’re out there. So follow Inspiring Pixel on Twitter and subscribe to the RSS feed

photos credited by Prakash Muniandy & sunuq | supported by the excellent catalog printing services at PsPrint

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

How iPad Affects the Way we Design Websites?

In our daily web hunting raids we have spotted another interesting & good-looking trend – the fluid grid-based layout, mostly used by galleries and visual inspiration blogs. Here are 12 amazing examples (just one of them in Flash) and a fantastic tutorial. Please use the comment box for suggestions and opinions – Will the future of webdesign be fluid?

Creative Depart

Isolation Unit

Reform & Revolution

Xpaider

Heavy Eyes

De51gn

Positively Melancholy

siXsiXsiX

Type Neu

This Also

dmtr

Space Collective

Tutorial – Building Good Websites with Fluid Layout

PS: Almost all this websites are usng the Grid-A-Licious theme folks!

Related Articles

• 15 Fresh WordPress Themes To Get The Coolest Portfolio For You Or Your Studio
• Web Design Trend Hunting – The Messy Desk: Examples & Best Practices
• Vintage 2.0 – Glossy Retro Takes Over Web Design

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!

Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial