Inspired Magazine |
| The Tangible Web: Thoughts on Designing Websites for Touchscreens Posted: 16 Jun 2010 02:26 PM PDT
 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 20Breaking 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:
I multitouch myselfMultitouch 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 widthsRemember 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 ConclusionTouchscreens 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? Save to Delicious This posting includes an audio/video/photo media file: Download Now |
| Get Ahead with Headway for Wordpress Posted: 16 Jun 2010 01:49 AM PDT
 Word And Mouth’s non-designer Dave Thackeray needed a new-look site but wanted complete control over its look. The third element of this challenging troika was his gross inability to design. Was Headway Themes the silver bullet to remedy his inept efforts to communicate his communications business? You decide… Headway Themes has been quite the poster child of WordPress in recent weeks, having popped up just about everywhere that Thesis previously shone. Except here, where Thesis still does (it’s a two-horse race, and both thoroughbreds have their obliging nuances). I’m no expert at design. Likewise, I’m far from a leading light when it comes to meddling with WordPress themes, or indeed, at practically anything – although I do a very good impression at facilitating Mastermind Groups. But more on that another time. If the likes of Chris Garrett at chrisg.com are to be believed, Headway will overthrow every other premium makeover for your WordPress installation and have them in chains braying like an injured donkey before you can say woof. Rome might not have been built in a day, but Headway was built in just over 300 files. It takes moments to have this baby rocking on your server, ready to invoke massive delight on your website. To say Headway is a very well articulated wolf in the clothing of a supermodel, would be to mix metaphors – and is entirely correct. The time is 2:36pm. Up until this point in time Headway has been all about second-hand talk and idle prophesy. I’ve not fingered the rumoured-awesome tabs in the admin area, nor have I had much chance to figure out what leafs are. In my day, we used to call them leaves – that much I know about the hip modern kids who replaced not only chalk with mice (mouses?) but olde worlde ‘English’ with modern dikshun [sic]. Digression. You know how to install WordPress themes, right? Do I need to lick your ice cream for ya, too? But let’s back-up quickly. Before installing any new themes, I’d suggest turning off all your plugins. Thankfully this means off goes Wibiya, recommended by Robert Scoble (@scobleizer) for currying all your social media touchpoints into one simple little toolbar. That is also hugely distracting, in my option. Any excuse to rid it… Theme Test Drive will allow you to see new themes in action before you actually make them live in public. You might want to give this a go at this point. And now we’re off to the races. I was going to eulogise about the incredible versatility and array of options in Headway’s Configuration section, accessible from the WordPress admin area. Generally in my experience, themes have just one config page. Headway has an army. I like that – it gives me a warm feeling of control I imagine Finnish people must get all the time. Only I don’t have a sauna. Headway is way hotter than that. The Configuration pages are simply ‘gasp’. Let’s put the smorgasbord of options somewhere between knock me down with a feather and resuscitate until my heart starts beating again on the wow scale. There is EVERYTHING here. I feel like I did when I first started working with the free Atahualpa theme – only this time I’m in safe hands since calls for ninja CSS skills seem reassuringly redundant (unless you want to tamper like said ninja – well, Headway lets you get your fix here, too).  Headway Themes' options panel I won’t say more than that. What you really need to know (and I guess I may have left this a little late in the day, since it’s what you came for) are Easy Hooks, Leafs and the Virtual Editor. To many until now, Hooks have been he stuff of PHP lore. You hear Joost De Valk ruminate of them in hushed tones as he wanders down darkened corridors towards flaming atriums peopled with denizens of binary genius. You see them mentioned under asterixed glare in Digging Into WordPress, the definitive guide from Chris Coyier and Jeff Starr at digwp.com. But with Headway, we’re talking Easy Hooks – my favourite thing ever, apart from skinny chips with Cheddar cheese-stuffed burgers. That’s right – cheese INSIDE the patty! Imagine chicken kievs, but with beef and without garlic. You’ve never had THOSE, either? Maybe you should go back to your corner and rock gently until your dosage comes around. Oh man! If you want to repeat certain content in certain places on your site, vote Easy Hooks. This feature is for dummies like me: If you know PHP you can go and squirt this stuff in yourself by diving into the code. I don’t have the time, but I do have the tendency to completely mess things up when I try. Easy Hooks are genius. Leafs are another horse-sized hit of juicy-tasty cholesterol. I’ll let Chris Howard of Headway explain Leafs far more lucidly than I could ever hope to. “Holy moly, these are an incredible idea,” says Howard. “Leafs are what give power to freeing you from the strictures of columns. “Suddenly you can arrange your content however you like, with infinite sidebars and content boxes. Look at myvirtualcv.com.au, for example. The video and quotes in the middle are a sidebar, as is the horizontal green area at the bottom. But, this single page is pulling in content from three different pages – all without me having to worry about WordPress loops, or messing with the horrors of tables in the WordPress WYSIWYG editor.”  Headway Themes' Visual Editor Visual Editor is where it all comes together. For the designer in you, this is something to be adored or despised, depending on whether you want a Dreamweaver or a Notepad-style experience when it comes to racking up the look of your masterpiece. Let me pause here and try and explain in words the tornado of power afforded to you through the Headway Visual Editor. No mean feat since it is like nothing you will ever before have experienced designing sites in WordPress. Imagine you have designed a very coarse wireframe of your site. Using Pages as non-visual containers (with Leafs that is exactly how you treat Pages from hereonin – for your own good) you add in content. Using the Visual Editor you style each and every element of your website using clicks instead of code, and command Leafs to drop in the content precisely where you want it – again, with just mousework. All your changes in real time. Every part of your site customisable to your tastes – from dimensions to navigation design. Every page layout can be different, and no coding is required. Headway used to offer a Layout Editor which was pretty simple and integrated into the WordPress admin area. Now – it’s a bit like comparing God to a dog. Visual Editor is Dreamweaver for normals. And it jets WordPress into the boardroom of fully-fledged CMSes with the infernal potency of Kick-Ass in his closing scene. That’s Visual Editor. If you want complicated spills and tricks to spice up your site there are a raft of pre-programmed Leafs and Skins you can snap on to your creation in the Headway Marketplace. Some are free, such as the Gravity Forms example which, when combined with Gravity’s own MailChimp addon, lets you drop in a subscription form anywhere on your site. Others, like the YouTube tool where you can mould a Leaf around your chosen videos, come at a (low) price. Skins transform the look of your site using pre-designed schemes. A purveyor of such digital merch is press75.com – one of my fave premium theme developers – which provides Skins based on its uber-popular designs. In summary, the enlightened Howard – he who also struggled and strained through creating the ideal WordPress site before Headway hit home – summarised the ‘Siddartha under the shade of a generously-endowed tree’ theme creation thus: “Headway works like desktop publishing. Other themes and frameworks restrict you to thinking in columns, Just as you might in Word. “Columns-based websites have meant many websites echo the same or similar layout throughout. Headway is akin to DTP (albeit with the limitations of the web) so you think in terms of layout, sliding of content/information around the page. And every page can be different.” Will Headway create dozens of identical sites? I doubt it. The user-friendly nature of intelligent control at a granular level means you won’t find two sites the same. Plus with it being a paid product, people snapping it up will have a vision for their site, no matter how simplistic. Besides, the Headway Showcase already lays out what has been achieved by wannabe designers in a relatively brief timeframe. My frustrations? No quick Undo or nod to a sneaky Ctrl-Z combo when you choose the wrong option in the Visual Editor. And to go down the options here, I don’t like the way you have to find the thin black scroller bar which kinda blends in and becomes inconspicuous. And watch out what you’re doing with the GZip compression option in the Configuration section. I unwittingly tilted the table but after furtive enquiries discovered the blame lay squarely at the door of my server. Ladies and gentlefolk, I claim no authority to talk tech like this – but apparently if you have the luxury of officiating this automatic compression feature, it makes things slip and slide through the intertubes quicker than a wily fox in a chicken coop. It’s 4.20pm and I feel like I’ve started on the journey to creating something I can be proud of. Word And Mouth is now feeling slicker, more professional. And the flexibility in design is something I never dreamed would be at my fingertips as a design-hostile member of the writing community. For a great example of how to quickly create a neat Headway site (based on an earlier iteration of the theme): * Headway is available in two flavours – the Personal Option, good for two sites, at $84 and the Developer Option, for unlimited usage and without reference to Headway Themes in your footer, at $164. Fancy rocking the WordPress world with simplicity and style? Buy Headway here. Save to Delicious |
| You are subscribed to email updates from Inspired Magazine To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment