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

Selling downloads that are instantly delivered to the customer after they purchase is an easy way to earn some passive income. There’s no inventory to manage, no shipping calculations, and instant, automatic delivery means more happy customers and less support headaches.

This tutorial will show you how to add a shopping cart that gives the ability to sell and automatically deliver download products from your WordPress blog in just a few minutes.

The shopping cart plugin we’ll use is DPD-Cart Plugin released by the awesome crew at Digital Product Delivery. So you first need to make an account here (there’s a 30 days no hassle free trial) and this plugin will communicate with the DPD Storefront system via an API to automatically pull in your cart settings and allowing you to easily insert add-to-cart buttons for products to your WordPress posts and pages. All of this will be powered by a slick javascript cart that loads right in your blog.

Step 0: Add Product

You’ll need to have the products you want to sell already set up in the DPD awesome dashboard before you begin this process (you could start with a .pdf or .psd)

Step 1: Plugin Installation

1. Download the DPD-Cart WordPress Plugin
2. Unzip the plugin and place the entire dpd-wpcart folder in to your WordPress plugin folder at /wp-content/plugins/dpd-wpcart/



3. Log in to your WordPress admin and enable the DPD-Cart plugin from the Installed Plugins menu.
4. Once activated, the DPD-Cart Configuration page will be added to your WordPress Plugins menu.

Step 2: Configuration

To configure the plugin you’ll need your DPD account’s API credentials. To get them, log in or create a DPD account and go to the Profile > Profile Options page from the Dashboard.

Do you know how hard it is to take a screenshot with a mouse cursor in it?

At the bottom of the profile options page you’ll find the API Access information. These two fields, the username and API Key, are what you will need to insert on the DPD-Cart Configuration page.

Copy-paste time!

Once you have obtained your API Access information, complete the following steps:

1. Go to the DPD-Cart Configuration page in your WordPress Admin
2. Enter your DPD username and API key in the fields provided and click the Update Options page to pull your available storefronts from DPD.
   Once you have authenticated your blog against the DPD API two new options will appear- Storefront Selection and Button Style Selection.



3. Select which DPD Storefront you would like to associate with this WordPress blog.
   DPD is a multi-cart system meaning that you can operate multiple shopping carts, each with their own settings, from one account. We call these individual carts “Storefronts” and that’s what you’ll be selecting here. If you have not created any additional storefronts in your account, the default storefront will be selected automatically.
4. Select your Button Style and click Update Options.
   The DPD-Cart plugin comes with a range of button styles already loaded. However, many people like to create custom buttons to match their blogs and its easy to add custom button styles. More information on adding custom buttons is at the end of this tutorial.

DPD-Cart setup is now complete! Lets start putting add-to-cart and checkout buttons on the blog!

Step 3: Activate the DPD-Cart Sidebar Widget

It’s a good practice to have a way for the buyer to checkout on every page of an e-commerce site. To help you accomplish this without editing theme templates the DPD-Cart plugin provides a widget that displays a “View Cart” button for your sidebar.

To enable the Cart Widget go to your Widgets page under the WordPress Appearance menu and drag the widget to where you would like it to be in your sidebar. This will output a “View Cart / Checkout” button on the frontend of your WordPress blog like so:

It's a cute little sidebar cart widget

Step 4: Create Product Pages / Posts

The DPD-Cart plugin adds an editor button to the post and page edit windows to quickly insert a product’s “Add-to-Cart” button code.

1. Create a new Post or Page on your WordPress blog where you would like the product to be displayed.
2. After you have typed your product’s sales copy go to the HTML editor tab, move the mouse cursor to where you want the Add-to-Cart button to appear, and click the DPD-Cart editor button.
3. In the popup that opens, select the product you want to insert from your list of available storefront products and click “Insert Product”

Easy as 1-2-3.

A dpd-atc quicktag will be added to your blog post. When your post is published this quicktag will be automatically converted to an “add-to-cart” button using the button set you have selected:

Look! Now your post has an add-to-cart button!

You’re ready to start selling!

Optional Customization Options:

The DPD-Cart plugin provides a couple different methods to customize the appearance of cart items on your blog.

Adding Custom Button Sets:

Adding custom button sets to match your blog is easy- all you need to do is create a new folder in the buttons/ folder located in the dpd-wpcart/ plugins directory and name it what you would like your button set to be called in the wordpress admin. Then add two PNG images:

atc.png for the add-to-cart button displayed in posts and pages.
viewcart.png for the View Cart / Checkout button displayed in the sidebar widget.

Name your folder what you'd like your button set to be called.

The buttons must be PNG format and named atc.png and viewcart.png to be properly parsed by the plugin and added to the DPD-Cart Configuration page.

Then go to DPD-Cart Configuration in your WordPress admin, select the new button set, and click the Update Settings button. The new buttons will display on all your posts and pages automatically and you don’t need to go back and edit previously made posts.

Customizing the Sidebar Widget:

Lets say we wanted to add some credit card logos to be displayed above our View Cart / Checkout button. The Cart Widget loads its layout from the following template file in the plugin directory:

dpd-wpcart/templates/cart-widget.php

You can edit this file to add content above and below the View Cart / Checkout button code inside the View Cart widget. The DPD code is wrapped in comments and includes an image link and javascript reference required to make the cart load within your wordpress blog. You should not edit the code between the html comments- changing this code could break the cart function and prevent people who want to give you their money from doing so.

To add custom text- or in the case of our example, images- you would simply insert your content above or below the DPD button code block and save the template in the same location.

Insert you code above or below the DPD code block to customize the widget

Then on your blog your sidebar widget would be updated to look like this:

Look! Now people know how to give you money!

The DPD-Cart Plugin is a quick and easy way to automatically sell downloads like website templates, graphics files, ebooks, and more from your WordPress blog. We hope this tutorial has shown you how easy it is to start selling downloads and make money from your blog!

If you have further questions or suggestions, please shoot!

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 TO: Start Selling Downloads from your WordPress Blog in 5 Minutes

Man, WordPress is so cool in so many ways! Need a website for your school project? There’s a theme for that! Need a small landing page for a new product you market? There’s a theme for that also! Need a fully customizable E-commerce website? There are quite a few interesting themes for that and we’re here to introduce them:

WPA Storefront | $30 | Details | Demo

This theme solves that problem by using the existing WP-E-Commerce plugin code combined with some new custom coding to display your products and product groups like never before!

WP Shop Reloaded | $35 | Details | Demo

After popular demand wpShop got a new look and some exciting new features!

Simple Cart | Free | Details | Demo

SimpleCart(js) is a simple, attractive, and flexible WordPress theme that taps into the power of both Thematic and WP E-commerce

eGoods | $30 | Details | Demo

eGoods is a 3 in 1 pack: a parent theme with 3 localized child themes

Vanilla Cart | Free | Details | Demo

Clean, minimal, highly customizable, vanilla-style WordPress Shopping Cart Theme, made specifically for the free WP e-Commerce plugin

Artshop | $30 | Details | Demo

Two Localized Themes in one! Two Parent themes with a child theme each

ShopperPress | $49 | Details | Demo

Start selling online with your very own online store. It’s fun and easy to use and includes lots of great features to help you get started

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!

7 Fresh & Effective Shopping Themes for WordPress