NET207 - Special edition - How to add magnetism to your sites by Curtis Brenneman

6 TIMES WINNER best business hosting best customer service

d en esign cre ti ate alism l oyal so c i ty a l en g

i ti rs tic is a se reustom par u c e v y ate h m r acti rience e tim o s p user exp e r xpl to e nde ers s s don’t u u e urag

s enco letting brand

agement

everyone lo ves seei ng the com ir

pelling conte intuitiv nt w e it

relevant

Feed 14

content target ed for th sense of c ommu nity brow sing

ong, usable d a str esign

ent fast sites incre ase stic kines s

lm ai m e

tti ge

cti r satisfa

s ol to

st om e

ive ac t inter

rs’ use

pt io ada ct sfa ati er s

a nd

inspect

Make your sites magnetic 42

e ak deal is to not m

ta custom evan nt rel making conte

taggin

early, enthusiastic adopters w

o ar us n eo er a li ke p ty t o t l e in ret ns thi g ur ur nk e a n tha r fre ee que t an ffe ntly yg c o t o i dﬁ ve t r r l s e t ools v i e l of m pr e d s s i ion g ital e ngag s last em

ne ed s

conte n

hin

i ct un f g

customer satisfaction

proving value

tagging functio nalit

pa tio n

pe at v is

i er xp

nc e

its

it y ommun

e user e tiv reac s es

.net contente

Opinion/Mat Diss 117

DIY UX 50

Build-off: T-shirt sites 92

Gallery 60

“Wireframes are no longer sufﬁcient” Peter Merholz, Adaptive Path Interview, page 36

.net october 2010

Proﬁle/Brass 68

a ill re

.net content

.net content Add magnetism to your sites

Your essential CD this month

articles > 36

128 GSA Auto

Make your sites magnetic

Once you’ve persuaded people to visit your site, how do you hook them in so they stay longer, and keep coming back for more? Craig Grannell explains how to increase your site’s ‘stickiness’

WebSubmitter Lite Site submission tool

129 Remove 3.1.2

Uninstallation and application removal

Interview

Peter Merholz of Adaptive Path gives Oliver Lindberg an insight into how to develop an experience strategy

The .net magazine Awards 2010

110 112 113 114 115 116 117

Welcome

Inbox

Feed

Including interviews with Stu Campbell, Juan Lobato and Simon Collison

Web Pro

Search Use video to boost your ranking

Ecommerce Get on

board with m-commerce

Security Firefox ﬁxes an

Find out how to save a ton of cash on the cover price!

old privacy bug

Startup The importance of market research

using the right APIs?

104

Hosting The .co domain Marketing Are you

Opinion How to meet the needs of mobile users

UK/overseas subscriptions

US/Canada subscriptions Expert advice

108

Big Question

127

Next issue

jQuery/build a notched tab system

CSS/design a responsive grid

jQuery/create an image map effect

Gallery

The best new websites in the following categories: CSS, HTML5, JavaScript, plug-ins, CMS and mobile

Proﬁle

Brass is a full-service agency that truly understands digital. Dan Oliver chats to the team about how they keep their clients happy

Focus_on

Natural elements can help your design theme stand out – but don’t go overboard, says Patrick McNeil

Opinion

When building websites for the under-12s, there are a number of speciﬁc challenges you need to consider, says Olivia Dickinson

Create an image map that highlights parts of a photo and overlays info about them. Ryan Taylor explains how

regulars > 7

CSS & HTML5/ design a glossy button

Dave Snyder explains how to redraw your layouts to accomodate different viewports while maintaining a strong design aesthetic

DIY UX

Whitney Hess reveals why you don’t need big bucks to master research, analytics and usability testing

showcase >

Ben Bodien and Marc Roberts explain how to build a simple, semantically clean and extensible jQuery tab system

Find out how to have your say on the best of the web

technique > Robert Reinhard demonstrates two ways to create a glossy button, using CSS3 and canvas scripting respectively

issue 207/october 2010

100

Website build-off

Three leading designers tackle the .net challenge. This month, T-shirt sites

Opinion

It’s time to take on the type foundries and start making our own fonts, says Micah Rich

Special subscriptions offer! > Turn to page 40 (or page 97 for ) US and Canada

Makeover

Children’s medical research charity Sparks is looking to overhaul its website. We asked Jay Hollywood for advice

How we built

Gladeye has developed a new site for 42BELOW Vodka. Interactive director Tarver Graham spills the beans

.net october 2010

.net home

advisory panel Molly Holzschlag

A well-known web standards advocate, Molly is group leader for the Web Standards Project. Among her 30-plus books is The Zen of CSS Design, co-authored with Dave Shea. www.molly.com

Patrick H Lauke

Patrick works as web evangelist in the Developer Relations team at Opera Software ASA. In a previous life, he worked as web editor for the University of Salford. www.opera.com

Andy Budd

Andy Budd is designer and director at design consultancy Clearleft (www. clearleft.com). He also organises the d.Construct web conference, and enjoys photography and diving. www.andybudd.com

Andy Clarke

Andy is a UK designer who’s passionate about web standards and accessibility. The founder of Stuff and Nonsense (www.stuffandnonsense.co.uk), he speaks at events worldwide. www.stuffandnonsense.co.uk

Margaret Manning

Margaret is CEO at Reading Room. She’s a frequent keynote speaker and recently won Female Entrepreneur of the year at the 2008 Fast Growth Business Awards. www.readingroom.com

Fadi Shuman

Fadi Shuman is director and co-founder of Pod1, a global network of digital agencies providing integrated ecommerce and marketing solutions for leading brands and retailers. www.pod1.com

Julie Howell

Julie has been working in digital since the web began. She wrote PAS78, the UK’s ﬁrst web accessibility standard. She currently writes about technology for BBC WebWise. juliehowell.co.uk

Ryan Carson

Originally from Colorado, Ryan is the founder of Bath-based web application and event company Carsoniﬁed.com, and can be found at twitter.com/ryancarson. ryancarson.com

“These Awards showcase the talent and dp passion that help pm make the web what it is today” y By the time you read this issue, the 2010 .net Awards will be well underway. We’re proud to say that .net magazine is read by thousands of professional web designers and developers from around the world, and winning one of our coveted Awards is a great achievement, made even more special by the fact that both the general public and industry peers take part in the decision process. This year we’ve been busy making improvements. We introduced a public nominations phase, which we’ve used to help us draw up each category for our shortlists. We’ve bumped up our judging panel to 100+ people. And we’re planning an amazing event where the winners will be announced. We work in one of the most dynamic and creative industries on the planet, and these Awards showcase the talent, creativity, and passion that help make the web what it is today. Please take a few moments to vote at www.thenetawards.com. Thank you! editor www.twitter.com/danoliver

>>Never miss an issue! Subscribe now and get massive savings off store prices. You’ll also have peace of mind from knowing that you’ll never miss an issue, and you’ll save time and effort trekking to the shops. For full details, see page 97 (US/Canada) or page 40 (everywhere else).

myfavouritemagazines.co.uk .net october 2010

develop discover design

contributors

Don’t miss this month... We’ve scoured the web to find the best writers, designers and net gurus. From authors and activists to user experience specialists, we’ve got ’em all

Micah Rich

Doug Logan

Doug is web and interactive director for design studio Inovat and president of the design industry body AIGA Central PA (centralpa.aiga.org). On page 104, he looks at the best way to consult clients about social media. inovat.com

Designer and programmer Micah is co-founder of the design boutique A Good Company. On page 96, he argues that it’s time to take on the type foundries and start making our own fonts. weareagoodcompany.com

Future Publishing, 30 Monmouth Street, Bath BA1 2BW Telephone +44 (0)1225 442244 Website www.netmag.co.uk Editorial Editor Dan Oliver, dan.oliver@futurenet.com Associate Editor Oliver Lindberg, oliver.lindberg@futurenet.com Operations Editor Tom May, tom.may@futurenet.com Art Editor Rob Bowen, rob.bowen@futurenet.com Designer Leanne O’Hara, leanne.ohara@futurenet.com New Media Editor Becky Collier, becky.collier@futurenet.com Site Editor Jim McCauley, jim.mccauley@futurenet.com Contributors Ben Bodien, Dave Chaffey, Rich Clark, Phil Coffman, David Deutsch, Olivia Dickinson, Mat Diss, Ryan Downie, Nick Francis, Tarver Graham, Craig Grannell, Lee Grey, Whitney Hess, Karl Hodge, Jay Hollywood, Tom Hughes, Tom Hughes-Croucher, Chris LaBrooy, Bruce Lawson, Inayaili de León, Doug Logan, Tiago Maia, Gary Marshall, Patrick McNeil, Mark Penfold, Robert Reinhard, Micah Rich, Marc Roberts, Struan Robertson, Remy Sharp, Usman Sheikh, Fadi Shuman, Dave Snyder, Wendy Tan White, Ryan Taylor, Ken Vu, Léonie Watson, John Williams, Mike Williams, Paul Wyatt Photography Sandra Silbereisen, Philip Sowels Group Senior Editor Steve Jarratt Group Art Director Ian Miller Creative Director Robin Abbott Editorial Director Jim Douglas Advertising Advertising Director Mark Rankine, 020 7042 4127, mark.rankine@futurenet.com London Sales Director Malcolm Stoodley, 020 7042 4156, malcolm.stoodley@futurenet.com Senior Sales Executive Ricardo Sidoli, 020 7042 4124, ricardo.sidoli@futurenet.com

Whitney Hess

Whitney Hess is a user experience design consultant in New York City. She makes stuff easy and pleasurable to use, and writes about improving the human experience on her blog Pleasure and Pain. She’s also a member of the judging panel for this year’s .net Awards. On page 50, Whitney reveals how you can give your user experience an upgrade without calling in a pro. www.whitneyhess.com

Robert Reinhard

The CTO of leading digital agency bkwld, Robert demonstrates two ways to add a glossy button to your site on page 76. bkwld.com

.net october 2010

Circulation Trade Marketing Director Rachael Cock, rachael.cock@futurenet.com Print & Production Production Coordinator Craig Broadbridge, craig.broadbridge@futurenet.com Head of Production Richard Mason, richard.mason@futurenet.com Licensing Head of International Licensing Tim Hudson, tim.hudson@futurenet.com Tel + 44 (0)1225 788253 Fax + 44 (0)1225 732275 Future Publishing Limited Publisher Matthew Pierce, matthew.pierce@futurenet.com Chief Operating Ofﬁcer Simon Wear Subscriptions Phone our UK hotline 0844 848 2852; international (+44) (0) 1604 251045 Subscribe to .net magazine online at www.myfavouritemagazines.co.uk

Olivia Dickinson

Digital manager at Nickelodeon UK, Olivia previously worked at Amazon and the BBC, mostly creating content for youngsters. On page 72 she discusses how to design a site aimed at children. uk.linkedin.com/in/ oliviadickinson

Marketing Brand Manager Dan Bruce, daniel.bruce@futurenet.com Campaign Manager Sharon Copeland, sharon.copeland@futurenet.com Promotions Executive Rosie Dedman, rosie.dedman@futurenet.com

NEXT ISSUE ON SALE: 12 October 2010 Printed in the UK by William Gibbons & Sons Ltd, Willenhall on behalf of Future. Distributed in the UK by Seymour Distribution Ltd, 2 East Poultry Avenue, London EC1A 9PT. Tel: 0207 429 4000

Dave Snyder Associate creative director at Firstborn Multimedia, Dave has worked for clients including Porsche, Vision Streetwear, Nascar and Sonic Youth. He also blogs at cargocollective. com/EpicallyHarshed. On page 84, Dave explains how to redraw grids to accomodate different viewports. www.ﬁrstbornmultimedia.com

A member of the Audit Bureau of Circulations

18,019

Jan- Dec 2009

© Future Publishing Limited 2010. All rights reserved. No part of this magazine may be used or reproduced without the written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. The registered ofﬁce of Future Publishing Limited is at Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All information contained in this magazine is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. Readers are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this magazine. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.

We are committed to only using magazine paper which is derived from well managed, certiﬁed forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certiﬁed in accordance with the rules of the FSC (Forest Stewardship Council).

IN D U STRY

L E AD IN G T EC HNOLOGY

FOR

OV ER

1 0 YEA R S

Perfect for web designers & developers We offer everything you need to run a dynamic, database-driven website, including MySQL 5.0 and Microsoft SQL Server 2008. Supporting the latest scripting languages and with a choice ofWindows 2008 or Linux, we offer the platform to suit your expertise. With over 10 years’experience we’re the web host you can trust. Our secure UK data centres offer 24/7 onsite engineers and our expert technical team are available to help whenever you need them.

PREMIUMWEB HOSTING 1stMonthFREE £8.99pm £10.56 inc VAT Our Premium package includes: ✔ Choice of Windows 2008 or Linux Red Hat. ✔ UPGRADED 25GB web space. ✔ Unlimited bandwidth† - no limits, no fees. ✔ MS SQL Server 2008 or MySQL 5.0 databases.

1st Month

FREE LIMITED PERIOD OFFER*

✔ ASP.NET 3.5 (Service Pack 1) with AJAX Extensions. ✔ PHP5, Perl and Python CGI scripting. ✔ SSH for secure command-line access. ✔ Shared SSL for secure web pages. ✔ FREE .uk domain. ✔ Secure UK data centre

Visitwww.fasthosts.co.ukforourfullrangeofwebhosting packagesstartingfromjust£4.99pm plusadditionalsavings forannualandbiennialpayments

Free instant setup • Unlimited bandwidth • 24/7 phone & online support

Buy now at

fasthosts.co.uk/hosting

0844 583 0713

© 2010 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. Offer, prices & product specifications valid at time of print. All prices exclude VAT unless otherwise stated. Terms & Conditions apply, see website for details. †Unlimited bandwidth is subject to an acceptable use policy. *Offer subject to a minimum 12 month contract.

Proud sponsor of

World Class Web Hosting

.net inbox

inbox

in association with

www.heartinternet.co.uk

Your emails, comments and tweets

>>Write to us! Want to get in touch? Email your comments and suggestions to netmag@futurenet.com

Subject: CSS or PHP From: Ben Edwards, www.baigent.com

Can we get some CSS tutorials that don’t end up being PHP tutorials, as with the browser targeting tutorial in issue 204? Point taken, Ben. You’ll find a great tutorial on page 76 of this issue that explains two ways to create a glossy button – and the first method requires nothing but good old HTML and CSS.

Subject: Driving devs crazy From: Mike Lowe

I’ve just chuckled my way through Rafael Mumme’s article ‘Driving devs crazy’ (issue 205). What made me laugh (and I’m sure some readers to cry) was the thought that some designers would be reading it and saying against his points “You make this sound like a bad thing”!

My laugh-out-loud moment came when I turned the page to be greeted by the makeover for frowey.com. It seemed to visually encapsulate Rafael’s article. Don’t get me wrong, I’m not knocking the makeover: it’s on the money. But I’d love to see a photo of the developer’s face when he first opens that PSD file! Glad you enjoyed Rafael’s tongue-in-cheek column, Mike. Just for the record, though, he wasn’t saying that Photoshop mockups are bad per se – it’s about how you go about communicating your ideas effectively.

Subject: Ecommerce platforms From: Matt Watkins

Following on from Fadi Shuman’s advice in issue 204 about ecommerce platforms, can you recommend a UK hosting provider that supports Magento?

Mail of the month

Subject: Best issue ever From: Chris Hester, Bradford

Fadi Shuman replies: You’ll find that any hosting provider that offers MySQL, PHP and Linux support will be able to host a Magento website, Matt, because those are the core tools you need to get a Magento ecommerce site working.

Subject: Mobile apps (1) From: James, cheapsubscriptions.co.uk

I agree with many of the recommendations for mobile apps made by your industry experts (Big Question, issue 206). The Facebook app would have to be my number one choice – it’s just designed perfectly for smartphones, and a much better experience than the regular web version. Shazam is probably at number two for me – in about 15 seconds I can get the song name and artist and find out if they’re touring near me. Kayak’s flight application is brilliant and I’m also seriously addicted to Stick Golf.

Subject: Mobile apps (2) From: Rob D, www.marketinggrin.com

Following your feature on favourite mobile apps, here are some of mine. Amazon is a very good app: taking a photo of a book and getting all the reviews for it is amazing,

Having bought every issue of .net magazine over the years, from the very first one, I think issue 206, guest-edited by Jeffrey Zeldman, might just be the best issue ever. I spent three days reading nearly every article. Zeldman’s piece on web standards had me excited over the future, while Luke Wroblewski got me into thinking about creating content for mobiles first. I wondered how my site, designdetector.com, might be refigured to work on both desktops and mobiles. All I had to do was keep reading, as next Ethan Marcotte showed how to get content to resize for different screen sizes. Brilliant! The full list of writers and topics covered was impeccable. Names like Andy Hume, Tim Van Damme, Jon Tan, Dan Cederholm ... the list goes on. Well done to everyone involved. Only one problem remains – how are you going to top that? Perhaps you can get other star names involved in the future? I would personally love to see Eric Meyer guest-edit the magazine in the future. Thanks for your kind words Chris, as well as your suggestion for a future guest-ed. Who would other readers like to see take the helm of the good ship .net?

>> Wins Free Reseller Pro and co.uk Domain Name The Heart Internet Reseller Pro package is perfect for IT entrepreneurs, designers, developers and agencies of all sizes. 100 per cent white label, it includes the ability to resell unlimited web space, bandwidth and websites. Find out more at www.heartinternet.co.uk.

.net october 2010

Greatest hit Chris reckons issue 206 was our best ever – and he should know: he’s been reading .net since 1994!

.net inbox

Crazy talk Rafael Mumme’s article about how to drive developers crazy tickled Mike’s funny bone as well as the feature to save wish lists on the go. For productivity, I’m currently using AwesomeNote, which is excellent. Another good to-do app is 2Do. I have the desktop version of Things, which is great, but I read that the iPhone version leaves a lot to be desired with regards to features and updates. Thanks, James and Rob. We love to hear about which apps our readers are genuinely using – as opposed to the ones PR people are making the most noise about …

Subject: Beginners (1) From: Ross Wheatley

I’ve just started to learn about web design. I’m doing this through an Open University course and have quickly found out that the course is about three years behind the times and they are teaching us about tables, which I understand to be bad practice throughout the web design community. I’ve also been backed up by articles I’ve read that most university courses on web design are always a few years behind. I understand that it’s best to learn from the bottom, but although I’m learning new skills it feels like a waste of time and money. However, I have been studying myself alongside my course, which hopefully will lead to self-development and a new career. I’ve started to buy your magazine and it

“I’d love to see the developer’s face when he ﬁrst opens that PSD!” Mike Lowe

All under control Steve enjoyed Ryan Taylor’s tutorial about using Subversion for version control in issue 204 is helping me in my pursuit to be a web designer. Your advice and articles are to a high professional standard but sometimes a bit too advanced for me! So here’s my question. Have you or would you be able to include a beginners section? I’m relatively new to your magazine but I’m sure there are lots of beginners out there who already benefit from .net but who’d also enjoy a beginner’s section with tutorials and advice on starting out in web design. Just an idea guys: keep up the good work.

Subject: Beginners (2) From: Chris Williams

In its regular monthly instalments, .net is a staggered approach to various designs and developments. I presume this captures the largest audience and enables the magazine to maximise its shelf life whilst enabling people to learn over a period of time. However I believe there is also an opportunity to produce special editions, which could run in quarterly cycles, focusing on building one awesome site for a specific industry/sector each quarter. The magazine would focus solely on building a modern, professional and most of all viable commercial website. It would cover the whole process from start to finish, from brainstorming to analytics. Sometimes people want to jump in head first, so having it laid out in front of them in the correct order is all that they want. This would attract a reader you’d never normally get because their passion would be the product at the end, rather than a passion for the process of making the site. Another angle is the people who buy the mag once and get confused due to the fact they are first-timers or very inexperienced. You can’t simply repeat the very basics every month to your regulars, so this is an alternative way to capture that audience.

Maybe it would possible at every difficult stage of the process to have a small column which has maybe a URL in it that links to a site that lists the companies or professionals available to teach them this stage for a fee. I have no idea if any of this is even viable. But I would buy a magazine for £10 that showed me step by step how to set up a proper decent business website Thanks for your interesting suggestions, Ross and Chris, and we’ll certainly put some thought to them. On the subject of novices, bear in mind that we welcome questions for our Expert Advice section from all levels of web builder – from total beginner to top-flight professional. Send your questions to netmag@futurenet.com with the subject header ‘Expert Advice’.

Subject: Version control From: Steve Gibbings, stevegibbingsdesign.co.uk

Thanks for the article by Ryan Taylor about using Subversion for version control in issue 204. I looked at Versions but it doesn’t offer a merge function. Do you know of any others on the Mac that do? Ryan Taylor replies: You could have a look at Cornerstone (www.zennaware. com). Alternatively, there’s a long and comprehensive list of Subversion clients at en.wikipedia.org/wiki/Comparison_of_ Subversion_clients.

>> Join the debate As well as writing to us, you can also join your fellow readers and the .net team at forum.netmag.co.uk in association with

www.heartinternet.co.uk .net october 2010 11

CreateyourVirtualServertoday!

OV ER

ith

FOR

W NE

L E AD IN G TEC HNOLOGY

w w ws No o x nd nu Wi & Li

I ND U STRY

1 0 YEARS

Technologyyou’llwanttoshoutabout! NEW

VirtualServers

INCLUDING

Windows Server 2008 R2, CentOS 5.5 & Red Hat Enterprise 5.5 Pioneering Cloud Technology

Fasthosts virtual servers give you unlimited access to run things your way. Our Data Center on Demand (DCoD™) platform puts you in complete control – giving you the power to customise and temporarily or permanently upgrade performance at any time. Plus our unique clustered server architecture with RAID protected SAN storage provides back up with full redundancy and automatic failover.

Total Server Control All our virtual servers benefit from full admin level access. We make it easy to get started, with a great range of pre-installed software including .NET framework 3.5, PHP and Perl. You then have unlimited access to install, modify, and configure your own applications.

Why buy a Fasthosts virtual server: NEW ✔ NEW SSL certificates included free for the first year* NEW ✔ Choice ofWindows and Linux

✔ Up to 1TB of dedicated hard disk space and 16GB RAM ✔ Customise your server and upgrade on demand ✔ Unlimited bandwidth** with 100 Mbps connection – no limits, no fees

✔ Resource monitoring with email and SMS alerts†

VIRTUALSERVERS

W NE

✔ Intel Xeon Quad Core processing power

............................ From just

✔ Full redundancy with automatic failover and RAID disk arrays ✔ Full admin access with optional Plesk control panel

£24.74

£29.07 inc VAT

Per month

✔ Secure UK data centre with 24/7 onsite engineers

Create your virtual server today at www.fasthosts.co.uk/virtualservers

FREE instant setup • Unlimited bandwidth • 24/7 UK phone & online support

Call us now on:

0844 583 2432 www.fasthosts.co.uk/virtualservers

© 2010 All rights reserved. Fasthosts and the Fasthosts logo are trademarks of Fasthosts Internet Ltd. Prices valid at time of print. *Offer excludes 1 month contracts. Renewal will be charged at standard rate. **Unlimited bandwidth is subject to an acceptable use policy. †Terms & Conditions apply, see website for details.

Proud sponsor of

World Class Virtual Servers

.net feed

feed

Choice cuts from across the web

shortcuts >

Make sure you don’t ﬂick past any of this lot!

Brains behind

Webby award winner Stu Campbell explains how he adapts his sci-ﬁ comic strips for the web

Threaded

The latest conspiracy theories being spread via the web are more insane than ever, says Tom May

Digg in censorship storm

Reviews

We check out Safari 5, Firefox 4 Beta, Unify plus the latest gear, games and books

Big mouth

Gary Marshall reckons public smartphone use is becoming as anti-social as smoking

.net october 2010

Online magazine AlterNet (alternet.org) claims to have uncovered massive censorship of Digg.com. A group calling itself the Digg Patriots has allegedly been systematically burying ‘liberal’ stories that don’t fit with its right-wing views. In recent months, it’s claimed the group has had thousands of stories removed, skewing political coverage on the social news aggregator. Digg’s model is being blamed for the problem, since it’s open to manipulation. Users vote up (digg) or down (bury) articles; those that receive enough diggs reach the front page, but any that are buried are removed from the upcoming list and never reach the site’s main audience.

Despite only numbering 100 or so members, the Digg Patriots are said to be able to bury articles within one to three hours of submission, in part by using multiple accounts. “The more liberal stories that [are] buried, the better chance conservative stories have to get to the front page,” reads a posting by ‘phoenixtx’, alleged founder of the group. “I’ll continue to bury their submissions until they change their ways and become conservatives.” And in a message to group members, ‘ChronicColonic’ affirms the need to “keep below the radar,” to “[stop] this group from being exposed to the public”. AlterNet also alleges that the group attempts to bait liberal users,

goading them to break Digg’s terms of service so that they are banned from the site. At the time of writing, Digg itself remains quiet on the matter, although founder Kevin Rose did respond to the allegations on Twitter, saying he was “looking into this”. Digg has been criticised in the past for an alleged ‘auto-bury’ feature, which supposedly flags articles from specific domains to be buried with few votes and after barely any time. However, brazen, methodical political censorship could cost the network dear as it seeks to launch Digg 4.0; Rose and company had better hope the latest release isn’t as susceptible to gaming as its predecessor. ●

Illustration/Tom Hughes

Scandal over right-wing censorship overshadows upcoming relaunch

Tab candy

Tab candy Tab candy

T Tab candy T

ab candy Tab candy

Tab candy

Tasty tabs

Tab candy

Tab candy Tab candy

Tab candy

Firefox’s creative lead devises Tab Candy to potentially redeﬁne browser tabs forever Aza Raskin (azarask.in/blog/) thinks browsers no longer support the way we use the web. “It’s hard to keep things straight with dozens of tabs crammed into a linear order,” he says, adding that workflow gets confused. His answer: Tab Candy, a Firefox-based in-browser interface for creating tab groups you can switch between, helping you focus on specific tasks. Activated via a keystroke, Tab Candy enhances the browsing experience in several ways, as Raskin explains: “You can zoom out to see thumbnails of all open tabs, then click one to zoom back in. This is a quick, visual way to search for the tab you need. You can drag tabs together to create a group of related tabs, and tabs can be rearranged between groups.” Tab Candy also enables you to emphasise the prominence of commonly used groups by changing their size. Raskin suggests making “your calendar and email bigger, so that you can see what’s new by zooming out to Tab Candy,” bringing to mind Mac OS X’s Exposé, but inside a browser. Tab Candy will debut in Firefox 4 and clearly has the potential to shake up browser UI – though interoperability will be down to individual vendors. “Our current goal is creating a fantastic user experience for Firefox users,” affirms Raskin. After that, he says that the team hopes to begin work on “more exploratory features, such as sharing or co-browsing tabs with a friend and drag-and-drop between mobile devices and computers”. He adds that Mozilla is a public-benefit company whose mission is to “promote openness, innovation, and opportunity on the web,” and therefore “having other vendors follow our lead in terms of tools that help web users makes the web better as a whole”. ●

Overheard

To me, using media queries on the layout is more about making it more adaptable, rather than making a ‘mobilefriendly-site’ as such. Jon Hicks, designer twitter.com/ Hicksdesign/status/20413982240

Industry news >> Copyright clash

>> W3 validator

>> Google Images

>> Browser news

The New Zealand Law Society has advised its government to ban persistent copyright infringers from the internet. They believe the existing ‘three strikes’ rule, introduced in 2008, isn’t tough enough, and that offenders should be banned while under suspension from an ISP.

Fed up of testing pages in multiple W3 validators? Wish there was a unified one? Desperate for said validator to have a slightly silly name? Good news: all three are now the case with W3C’s Unicorn (validator.w3.org/ unicorn/). Plug in a URL to get results on markup, style sheets and more.

Google has made major changes to its image search pages that borrow heavily from Bing. Search results now offer an image-only layout, with ‘infinite’ scrolling. Google says its image searches have become one of its most popular functions, with one billion page views a day.

It continues to be a busy time in browser land. IE’s share continues to grow, against the odds, mostly grabbing from Firefox. IE9 is also looking good and, importantly, standards compliant. Elsewhere, Safari 5.0.1 has officially turned on extensions support, and Google is prepping a Chrome 6 beta.

! .net feed

SEO

Error: search strategy not found A survey by dotSEO has revealed many companies are ignoring the benefits of SEO “because of a lack of understanding,” despite Google being the first stop for most people looking for goods and services. According to the Naked SEO report (dotseo.co.uk/nakedseo), only 14 per cent of the SMEs surveyed said SEO was strategically important to their business, and about a quarter were unsure of the benefits delivered by using SEO, with many believing “there were no benefits”. The report also found failings in the way leading firms are dealing with natural search – less than a third are using relevant keywords. The good news is that basic SEO requirements are often being met, including 76 per cent of surveyed sites using heading tags on their homepages. dotSEO digital director Skip Fidura doesn’t lay the blame in any one place. Although he reckons marketers are “clearly unsure about the benefits of SEO, which in turn means they aren’t making the simple changes to their websites that could dramatically affect their rankings”, he notes that the SEO industry isn’t helping to educate businesses. “Too often, SEO techniques are shrouded in mystery as a dark art. Our report reveals how there are simple steps that any company can take to make tangible SEO improvements and drive real business returns.” ●

! !

Overheard

SEO

Nawlz (www.nawlz.com), a futuristic panoramic comic book, beat the BBC at the Webby Awards this year. We talk to its creator, Australian artist Stu Campbell, aka Sutu

.net: Apart from Flash, what are the main tools you use?

Urban decay Dark stories with bright animation. Warning: may include hookers

<prev

.net october 2010

SC: Lots of Uni Pin Fineliners and 20m scrolls of brown craft paper. But I’m terrible at storyboarding; I draw whatever strong images come into my head. Then I scan them into Photoshop to colour, and I lay out in Illustrator to add design and type, then import it all into Flash to add interactivity and animation. .net: What are the main technical challenges you face? SC: Optimising the site to play smoothly in the browser without having to compromise the aesthetic. That’s always a challenge because most people’s browsers don’t have a lot of RAM allocated to them and Flash can get pretty processorheavy. Because Nawlz unfolds panoramically with one scene being stitched to the last, all these scenes have to be stored in the cache. And if every scene has full screen animation, most computers will have a heart attack. Cross-browser compatibility is also tricky to ensure. Sometimes Firefox or Safari will do an update

and things like gravity mouse effects in full screen mode will stop working. That kinda of shit drives me insane. .net: What’s next for Nawlz? Your blog mentions that the Australian government might grant you funding to adapt an iPad version. SC: Yes! I got the grant. Finally I got some dollars to play with. We’re in the planning stages now. It’s nice having some decent programmers to work with. If they can pull off what I have in mind, this thing is going to totally shit on the web version. It should be ready in about four months. I’m hoping the iPad business model will be enough to cover my expenses. Everything’s moving too slowly: I have so many stories I want to tell and I really want to bring more artists, musicians, animators and programmers into the mix. Right now there are no decent adult interactive stories for iPad. I already have a season and a half of content designed for multi-sensory

! !

and speaker twitter.com/simoncollison/

IT ﬁgures

Things you never knew you never knew >> 43 The percentage of brands on Twitter that have never replied to a tweet, according to a survey by Wildfire PR. On blogs, the response rate was even lower: just nine per cent.

Nawlz

SEO

Simon Collison, designer, author

status/19743677945

The brains behind…

.net: What’s the idea behind Nawlz? SC: The word Nawlz comes from combining the words night and sprawl. My original vision was of a sprawling mega-city that was so tall and dense, its lower levels were cast into perpetual night. Now, since the idea has evolved, the claustrophobic dark streets are contrasted by bright animated augmented realities.

It is now possible to make Safari incredibly ugly in around six clicks. Choose wisely: http:// extensions.apple.com/

SEO

Companies aren’t getting SEO

>> 98.29 The percentage of mobile search accounted for by Google, according to StatCounter. Meanwhile, on the desktop, Google’s faring less well, with a ‘mere’ 90.57 per cent. Our heart bleeds.

>> 3,051 The number of tweets per second when Spain scored the winning goal in the 2010 World Cup final. Also, presumably, the number of failwhales lurking in the background, waiting to bring Twitter down.

>> 64/100 Facebook’s customer satisfaction score, according to the ACSI: that’s lower than online IRS tax forms. It was followed closely by MySpace, which scored 63.

digestion so hopefully with the iPad release we can set some real standards. Unless Steve Jobs says: “No, we won’t publish that ’cos we don’t like all your boobs, drugs and general profanity.” It’s like Apple’s got their head up Disneyland’s ass. Their ‘family orientated’ censorship concerns me. ● To read the full interview, head to www.netmag.co.uk

! !

.net feed edited. We’re also currently adding some of the HTML5 and CSS3 capabilities into BaseKit. .net: What’s your take on the debate over whether CSS is the new Photoshop? JL: We don’t see CSS replacing Photoshop, but rather enhancing the capability to add to a made design within a smart CSS editor. In fact, we’ve been piloting some of these ideas on BaseKit for the summer product release and we’ve achieved some cool results by expanding the CSS editor to accommodate some of the latest CSS3 controls.

Juan Lobato www.basekit.com

BaseKit enables designers to build websites from a Photoshop concept. Oliver Lindberg talks to CEO Juan Lobato about the early days of the UK startup, features and its social media strategy .net: How did you come up with the idea for BaseKit? JL: There’s a gap between the design of the website and the production and publishing of the website. More than 90 per cent of the websites start as a Photoshop design, but there isn’t a simple, quick, elegant way of producing the website once it’s been designed. BaseKit wants to fill this gap and become the preferred way of producing and publishing websites. .net: Who’s the audience? JL: Our audience is anyone who builds a website, professional or semi-professional. We’ve got around 20,000 users and over 70 per cent are web professionals who think BaseKit is a better way to build websites from a Photoshop design. .net: What kind of websites do your users build? JL: Most of the websites built in BaseKit are projects with five to 15 pages, with some dynamic features (forms, maps, comments) and some social widget integration (Flickr, Twitter and so on).

Juan Lobato Job CEO of BaseKit Age 37 Education MSc in Engineering from the UPM, Spain; MSc in Economics from UNED, Spain Previous career CEO of BEAM.TV, associate/engagement manager at McKinsey & Company, corporate development director at Telefonica Moviles Online twitter.com/juanlobato

<prev

.net october 2010

.net: Have you got a social media strategy? JL: Our strategy has just been to engage as often as possible where our community spends time. We have a dedicated social media team that not only is there to support those users and potential users, but they bring all that feedback back into the team here as well. Much of our reach to date has been from our social media efforts. We’re just trying to help the community we’ve got, through Twitter and Facebook groups, and we’re also using our blog to show the community what BaseKit can do for them. .net: How accessible is the HTML code generated by BaseKit? JL: The code is W3C strict compliant. Once it’s generated, the HTML and CSS can be accessed and

.net: Can you use Flash or JavaScript with BaseKit? JL: You can, as of August. We’ve got a new feature that enables you to add scripts to BaseKit. This could be Flash or JavaScript, or an integration with any JavaScript-based platforms, such as ecommerce platform like Vendr. .net: What were the main challenges in getting BaseKit off the ground? JL: Lots of effort to get the beta out and show that we could develop a better technology than people that have been operating in the space for years. We believe now that we’ve got a product that’s 12 months ahead of the competition. .net: What are you going to do with the $2.6million of VC funding you recently raised? JL: Commercialisation of the product across the English-speaking markets, plus the Latino markets, including Brazil. .net: How difficult is it to be a UK-based startup? Would it make more sense to be in Silicon Valley? JL: Very difficult. There’s almost no access to capital for early-stage companies. We’re actively looking for the next round of financing from the US to help us better connect with the Silicon Valley community. That said, there are distinct advantages to being based here. We had to have a global focus from day one – among our approximately 20 team members, we have nationals from over 12 different countries. Sometimes Silicon Valley companies get too wrapped up in the bubble of Silicon Valley before trying their concept in the global market. .net: What’s planned next for BaseKit? On your site, you list Typekit as a partner. JL: We want to integrate with all companies that are doing cool stuff. We see ourselves as the glue for an ecosystem of solutions that can bring web publishing to a new era. Gone are the days of silo software solutions that don’t interact with the rest of the web environment to produce websites. l

“We’re the glue for an ecosystem of solutions that can bring web publishing to a new era” Juan Lobato

.net feed

Betameter

Podcasts

We see new beta sites all the time, but are they any good?

1 of 2 Pique Web Developers Sean Coates and Paul Reinheimer have started a brand-new podcast about interesting things on the web. piqueweb.net

2 of 2 Lady Geek TV A new video show, launched by Belinda Parmar, to help women discover the very best in smartphone apps. ladygeektv.com

URL wrttn.Me

Government sticks with IE6

UK coalition government rejects upgrade calls and opts to stick with the ageing browser

Overheard

Our industry has proven that we don’t get excited about new and useful technologies until a buzzword is in place. Jeff Croft, freelance web designer jeffcroft.com/blog/2010/aug/02/ term-html5/

The British government has rejected calls to upgrade from Internet Explorer 6, in response to an online petition started by Dan Frydman of Inigo Media (petitions.number10.gov.uk/ie6upgrade). Frydman cited security concerns; issues relating to browser-oriented web and software development; and the fact other EU countries are starting to look for more modern alternatives as reasons for ditching IE6. The petition attracted more than 6,000 signatures, prompting the government to respond that there was “no evidence that upgrading away from the latest fully patched versions of Internet Explorer to other browsers will make users more secure”. It noted that upgrading existing systems can be a “very large operation, taking weeks to test and roll out to all users,” adding that web applications in use could need significant upgrades, which would cost the taxpayer. Frydman responded on his blog (danfrydman.com/the-ie6-petitionuk-government-and-developers), saying he was really looking for a recommendation, which would put “the onus on the government departments to modernise, to innovate and to take care of their own”. Not doing this, he says, suggests short-sightedness, short-termism and “diminishes ambition just at the time when we need it”. Frydman recommends that those working in government departments find out if plans exist to upgrade, and notes that Scotland’s entire public sector is at least moving forward, albeit only to Internet Explorer 7. Still, it’s better to be stranded in 2006 than back in 2000.

Still using the version of Notepad that comes loaded with Windows? Wrttn gives you the chance to design your own notepad, in the cloud. It enables you to create custom CSS styles as well as choosing the marking type (Textile, Markdown, HTML5 or plain text), plus new features are being added all the time. A simple idea that should appeal especially to beginners and bloggers. Chances of survival: 86%

URL noteboxapp.com Notebox offers a great way for designers to get client feedback on their designs. The app enables you and your clients to make notes directly on your design, so their comments can appear in context. A trial allows you to add five designs for free; after that, prices start at £15 a month. Chances of survival: 71%

.net feed

Threaded:

The truth is out there

The latest conspiracy theories are madder than ever, says Tom May

GK Chesterton famously by a US nuclear warhead (bit.ly/ said: “When people stop bxhG7i). Iceland’s Eyjafjallajökull believing in God, they don’t volcano erupted due to Russia testing believe in nothing – they believe in new ‘lightning bolt’ weapons (bit.ly/ anything.” If you need proof, check dvEDO6). And swine flu is a beta test out the latest conspiracy for a bioterrorist weapon by theories on the web. the ‘New World Order’ A great place to start (bit.ly/sPamP). is davidicke.com, Of course, the joy > where David Icke of the open web is on reveals that cancer is that it offers the For all the links actually a fungus opportunity to this page, visit: etmag/ that’s easy to cure. debunk such drivel. delicious.com/n (The pharmaceutical So we also get smart threaded207 industry is keeping this explanations of why the secret, he claims, so they moon landings were not a can continue to make billions hoax (badastronomy.com/bad/ from chemotherapy.) Next, visit tv/foxapollo.html), why Google is not beyondweird.com, where it’s in bed with the CIA (mattcutts.com/ reported that UFOs are in fact Nazi blog/debunking-google-in-bed-withsecret weapons launched from an cia), and why all conspiracy theorists underground base in Antarctica. are morons (cracked.com/funny-44There’s no natural disaster that conspiracy-theories). But then again, can’t be blamed on someone, it isn’t that what the 10-foot lizard seems. The 2004 tsunami was caused people want us to think…?

Tag: threaded207

Spaced out naziufosecret.com reckons the Nazis are behind flying saucers

The web 10 years ago: October 2000 What we covered Bargains Fill your trolley with the cheapest gear on the net Follow the Redbricks road Dan Oliver meets the man who established an online community in a Manchester housing estate Ask an Expert Get one-to-one advice from real people online Sites of the stars Tour the home pages of the hottest celebrities Keep taking the tests What does the internet say about your personality?

<prev

web conspiracists are hatstand-bonkers

.net october 2010

Also in the news Best-selling console Sony’s PlayStation 2 is launched in North America No free lunch Freeinternet.com, the ﬁfth largest ISP in the US, ﬁles for bankruptcy New web browser Konqueror is released, with version 2 of the KDE desktop environment Cybersquatting Madonna wins the rights to the domain name madonna.com Chart toppers Black Coffee by All Saints and Holler by Spice Girls

Created exclusively for .net

.ten

Lie detector Cracked.com explain why

.net feed

Readers’ layouts. I believe that perception and meaning cut through disciplines, so something learned decades ago by an architect or furniture designer could help me understand elements of my work on the web. I’d rather we investigate experiences and ideas than simply leverage everything from print design, as some suggest.

Simon Collison colly.com

The outspoken web designer, developer, author and speaker answers your questions on media queries, design principles and his forthcoming conference, New Adventures in Web Design @daveharrisonnet: Do you think media queries are the silver bullet for mobile web design? SC: They’re an easy entry point for those exploring devices like the iPhone and iPad. But they’re not terribly efficient for the ‘one design to rule them all’ approach. In many cases, it’s simply a case of turning parts of the site on and off for devices, and deciding if some details need to change for different viewports or resolutions. Often, the pages ‘weigh’ the same, everything being downloaded whether it’s displayed or not. For me, media queries work best with the traditional desktop browser window – with layouts and images responding to window size. Repurposing the exact same files and images for mobile is a brilliant by-product of media queries, but ultimately a separate version served to certain devices is likely to be more efficient.

Simon Collison Job Designer, author, speaker, organiser Education Fine art degree and school of hard knocks Previous career Visual artist Online colly.com, @simoncollison, newadventuresconf.com

@sanchothefat: What approaches/tools do you use to design and create the natural textures indicative of your style? SC: I use lots of careful layering to create gently worn qualities in much of my work. I’ve rarely found the right textures in stock libraries, so over the years I’ve been gradually collecting lots of fantastic paper and cardboard textures, often from packaging, and I’ll photograph or scan anything interesting I find. It’s then a case of very gently coaxing layers with opacity, hue, saturation, subtle interventions and choosing very complementary colours and typefaces. It takes hours and hours to get it just the way I want it. @RyanDownie: You’ve recently gone back to visit design principles right from the beginning: why? SC: I wanted to better understand why some visual ideas work and some don’t. I wanted to learn more about the juxtaposition of shapes and colours, and investigate the science behind structures and

<prev

.net october 2010

@StuRobson: What has been the best advice you’ve ever received from a fellow web designer? SC: I was presenting a ‘finished’ version of a site to another designer I trust to be honest. He loved the ideas and layouts, but suggested that I was “cheapening” the concept by overplaying too many textures and extraneous CSS3 ideas. So, rather than launch, I sat with the design for ages, assessing, simplifying, sieving it down and reducing it until I only had left what I really needed. I now consider that contemplation and simplification period as one of the most vital aspects of my process. @neil_berry: What are your top tips for aspiring web designers and developers? SC: Make do with only what you need in your designs. Focus on reducing clutter, tricks, unnecessary CSS3 bells and whistles. When a design is finished, look again – for ages – and see what you can improve, tighten, or throw away. Think beyond the “enablers”: HTML, CSS, JavaScript, Photoshop etc. Good design solves problems regardless of the tools and frameworks, so try where possible to forget how we build stuff, and think long and hard about why we build. @andrewdotcom: How do you respond to complaints that the speaker list for your conference has too many familiar faces? SC: It’s disappointing to be judged purely on the list of speakers. New Adventures (newadventuresconf. com) is a bit more ambitious than some events, aiming to focus on really fresh ideas, seek outcomes, and engage in debate. I don’t think the moaning minority has really bothered to read the site and see what we’re aiming to achieve. @neil_october: Is there a need for a more inclusive, less corporate, SXSW-style event in the UK? SC: I think it’d be hard to fund such a huge event without heavy corporate involvement. I think the trick would be to create something new and ambitious, not seek to emulate SXSW, which is a unique event all of its own. Anyway, where’s the UK equivalent of Texas? Please don’t say “Brighton”. ● Follow us on Twitter at twitter.com/netmag

“I’d rather investigate experiences and ideas than simply leverage everything from print design” Simon Collison

Use Virtual Private Servers Don’t gamble with your hosting

Virtual Private Servers (VPS) from Daily.co.uk deliver you the uncompromising power and control of a dedicated server at a fraction of the cost. Each private server comes with guaranteed dedicated RAM and CPU ensuring that you have maximum resources available at your disposal 24 x 7 x 365. Ideal for resellers, web designers and developers who want to host multiple websites, email accounts and domains.

From

£9.99 Linux VPS pm

Additional product features: •

Dual AMD Opteron 64 bit 6 Core processor VPS optimised

CentOS or Ubuntu

•

From

•

Guaranteed dedicated RAM up to 4GB

•

Choice of MS SQL’05 & ‘08 or MySQL

•

Choice of control panels on both platforms

•

Root access, install any software

£24.99 Windows VPS pm

Hyper V Windows 2008 R2

Super fast 15k RPM RAID disks to serve your data

Sales hotline 0845 466 2100

DAILY.co.uk Great Hosting...it’s about time Prices exclude VAT unless stated otherwise. All trademarks and registered trademarks acknowledged. Daily.co.uk is part of Daily Internet Plc.

.net feed

Latest gear this month Cool kit and geeky gadgets 2

3 1

Archos 3cam vision player

3 MiFi (Huawei E585)

Solar Sound 2 stereo speaker

MSI Wind Top AE2020

PRICE £90

PRICE £49.99 on Pay As You Go

PRICE £69.99

PRICE £599

www.archos.com

www.three.co.uk

devotecindustries.com

www.msi.com

Just like Apple did with the nanos, Archos has fitted its little 8GB Mp4 media player with a VGA camera but this one enables you to take stills as well as shoot video. File support, sound quality and video playback are great but the 3in resistive touchscreen isn’t that responsive and the UI is no match for Steve Jobs’ range.

This wireless modem takes in a 3G signal and enables you to share it through your own Wi-Fi network, so your phones and laptops can share a single connection. A coollooking update to the E5830, covered in issue 204, it’s compact and easy to use. Plus, if you were thinking of buying a 3G version of the iPad, this saves you the bother.

This is one of those moments when we’re forced to question all previously held beliefs because, to our amazement, we’ve received a portable Bluetooth speaker that doesn’t suck! It’s a cinch to pair via Bluetooth, has a built-in 1500mAh battery (which can be solar charged), and 2W speakers that perform better than you’d think.

This all-in-one PC consists of just a slim 20in, 16:9 panel, a keyboard and a mouse. The touchscreen works well, although the mouse is easier to use for complex tasks. The Intel Pentium T4300 dual-core processor and 3GB built-in memory provide a fair whack of power, and HD video looks impressive (there’s no Blu-ray drive, though).

Verdict The lens is in a funny position, so we constantly photographed our fingers. Still, we love watching videos on the player.

Verdict A dependable and affordable way to get wireless internet on the move, and Three offers a range of tariffs.

Verdict You’re more likely to see a Hobbit in Asda than see the sun in the UK at the moment, but – that aside – we really rate this speaker.

Verdict Aimed firmly at the midrange market, this PC won’t set the world alight, but it’ll probably do everything you need.

<prev

.net october 2010

8 5

DS210j NAS Disk Station

T4 Radiopod

H03 LED Pico projector

Logitech Squeezebox Touch

PRICE £169.99

PRICE £149.99

PRICE £229.99

PRICE £249.99

www.synology.com

www.orbitsound.com

samsung.com/uk/

www.logitech.com

This two-bay NAS server for home and business is designed to provide a cost-effective file storage and backup solution with RAID protection. It’s small, energyefficient, and packs in a number of cool features. For instance, a phpMyAdmin module enables you to install MySQL and turn the device into a small web server.

Just like the T12 Soundbar we looked at last month, this iPod dock with Wi-Fi, DAB and FM radio features Orbitsound’s innovative (and effective) spatial stereo technology. Put it anywhere in your room and enjoy impressively powerful and clear sound wherever you’re standing. There’s also an alarm clock with snooze.

This pocket-sized LED projector offers a 854x480 display at a diagonal size of between 9in and 80in. You get 1GB of internal storage (upgradable to 16GB via a microSD card), around two hours of battery life and an integrated 1W speaker. It supports a wide range of formats and at just 170g it’s extremely portable.

This plug and play device streams music from your personal music collection, internet radio stations, podcasts and subscription services to your hi-fi. It’s a faff to set up but the 4.3in colour touchscreen is bright and clear, the interface is simple and responsive and the sound quality is excellent. There’s even a BBC iPlayer audio app.

Verdict If you’re looking for something much more versatile than a regular external hard drive, this offers excellent functionality.

Verdict The audio quality is excellent but the user interface could do with a bit of work, especially as there’s no remote.

Verdict No substitute for a proper office projector, but this could be a handy way of giving an impromptu presentation while out and about.

Verdict If you’re willing to put in a bit of time to set everything up, this is a great way to access a wide world of audio.

.net october 2010 25

.net feed/reviews

Latest software

New web design tools reviewed

“Safari 5 ramps up the HTML5 with support for geolocation and WebSocket”

Browser update

Safari 5 Apple plays catch-up Web www.apple.com/safari Price Free System Mac/PC This isn’t a groundbreaking release for Safari, more of a catch-up. It has a new page reading application, improved HTML5 support and – wait for it – Bing search. But the big news for Safari users with version five is the introduction of Safari Extensions. As with Firefox, the idea behind introducing Extensions is to harness the development community to your online wagon, as it were. And the usual suspects are already in place: eBay, Twitter, New York Times. But the big pay-off will come once the rest of the world gets their hands dirty and begins to innovate. Safari 5 also ramps up the HTML5 with support for top features geolocation and WebSocket. A speed bump to JavaScript performance and the new Reader, in tandem with Adblock, make some of the web’s more intrusively advertised sites almost a pleasure to view. ●

New look The new Safari 5 interface, with the addition of a new Twitter extension

.net rating For New extensions

Against Developer tools weak in places

Verdict Not an earth-shattering release, but there have been a number of important additions and upgrades, the most significant being the introduction of an extension API.

Browser update

Firefox 4 Beta

A strong contender for the best browser award Web www.mozilla.com/en-US/firefox/beta Price Free System All With a sexier interface, improved CSS3/ HTML5 support and new persistent ‘App tabs’, Mozilla’s latest release does much to return Firefox to pole position in terms of innovation and usability. The updates and additions all sing together, producing an effect that’s greater than the sum of their parts. The interface is much nicer to look at but wouldn’t really be anything to shout about if it weren’t also faster. The speed bump isn’t really that noticeable except when you time it from start-up or when it’s loading multiple tabs. That’s the trick in producing a good browser these days. Rather than having a lot of features that nobody else has, it’s making everything pull together in service of the user. And in the case of Firefox, of developers. Traditionally a favourite with the developer community for its excellent plug-ins, Firefox has, this time around, delivered some tasty tidbits.

<prev

.net october 2010

JetPack SDK introduces a new environment for the rapid development and deployment of add-ons. Though still at 0.6, this project promises to be very interesting, not least for FlightDeck, the purposebuilt IDE (https://builder.mozillalabs.com). Development tools are backed up with some new technology too. The implementation of Indexed DBs will enable applications to store data locally and therefore run smart applications quicker, more reliably and without the need to roundtrip a server constantly. Further goodies come with the introduction of WebSockets. This will probably lead to some interesting developments in both gaming and communications once their real-time connection potential is fully realised. All in all, there’s plenty for developers to get their teeth into here. Mozilla is doing its beta properly. Though developer add-ons are currently non-functional, you are encouraged to get involved with the project by reporting any and all suspicious activity. And while that’s going on, the team are beavering away to bring even more stuff into play: more speed bumps, new privacy controls and Sync; promises to integrate passwords, bookmarks and settings. ●

Tab happy The new app tabs in Firefox 4 enable you to keep your online life in one place

.net rating For New developer tools Look and feel

Against Developer tools disabled

Verdict Firefox has been a bit let down in the past by its look and feel. Version 4 removes that hurdle and introduces a host of new functions to bolster its technical lead.

.net feed/reviews Content management

Unify

Live content management without the stress Web unify.unitinteractive.com Price $24.49 per domain System All It’s the holy grail. A system that gives clients the freedom to update their site while ensuring your styles, templates and code don’t get mangled by WYSIWYG editors sticking tags in at random till you get the call asking ‘Why doesn’t this work?’ Unify is just such a solution. Uploaded to the root of your domain, it provides an interface to the site’s DOM, which must be logged into. It only allows sensible edits to elements that you’ve previously agreed. The best thing of all, though, is that it actually works. The installation process is little more than an unzip and an upload. Once this has been achieved you’ll want to think about which elements you are going to open up for editing when users log into the Unify interface. To achieve this, just add a ‘unify’ class to the tag in question. This done, you can now log into Unify and begin editing your page. Images, text, formatting and

HTML can be inserted directly into the page and previewed as the updates occur. And if you don’t like what you’ve done, just undo or, if you were rash enough to publish, roll back with a restore. The interface itself is very usable. Objects, which can be edited, appear with a little green tab next to them. And once clicked, a new panel pops up, supplying the options and tools available. The only time you may encounter problems is if you’re trying to apply styles to an object where this doesn’t make sense, such as a major heading inside a paragraph. Even this, though, can be overcome by inserting HTML. Unify makes use of jQuery to provide its interface and editing magic. Edits are actually saved into the files being edited, with a backup copy being created to enable roll-back, so the need for database access is mitigated. And should your users wish to make fairly radical additions to the site, there are Unify Repeatables – blocks of code that can be copied wholesale but not (accidentally) only partially duplicated. Using these and the standard editing tools, you have a fairly deep but well controlled content management system on your hands. ●

It just works Unify can be used to add and update content with live feedback on your edits

.net rating For Minutes to install Intuitive interface Flexible input

Against No trial download Customisation could be easier

Verdict A first-rate solution for anyone with non-technical clients wanting to manage their own content or with relatively straightforward updates to perform on a regular basis.

Content management

Code editor

Social web

Aloha Editor

Bespin

Yahoo meme

Web aloha-editor.com Price Free System All

Web mozillalabs.com/bespin Price Free System All

Web meme.yahoo.com Price Free System Web app

An open source JavaScript application for editing websites ‘live’, Aloha is still rather raw: it can only edit text and has no facility for logins or rollback. It is, however, the seed of what might one day become a very useful tool. Its open architecture means it could easily be customised into a site-specific toolkit for updating and adding content with a pretty sophisticated set of capabilities. As things stand, it’s easy enough to use. The future will depend on how actively involved the Aloha community becomes.

Mozilla Labs is developing a massively customisable code editor that lives in your browser. Currently run through a command line set up, it’s not the most user-friendly app but there’s a good chance Bespin will lead the way for online code collaboration. While you can use the standard installation by simply uploading the files to your server and including a ‘bespin’ class div on one of your pages, the strength of this app comes into play when you add plug-ins from the growing gallery, or develop your own with a specific task or project in mind.

Suddenly everyone wants in on the micro-blogging action, and meme is Yahoo’s attempt to storm that particular castle. There are blogger plug-ins, mobile clients and an API with which to propagate this mildly diverting update of the micro-blogging theme. And the company has the engineering strengths to make it grow consistently in terms of technical strength and developer usability. But likeable though it is, the odds are against this becoming a Twitter-killer.

Verdict If you’re an editor looking for a handy tool, keep an eye on it. If you’re a developer, get involved and help make it a production-ready tool.

Verdict A promising tool for web developers on the hoof or with a distributed network of contributors to wrangle.

Verdict If you’re fed up with Twitter and want to break new ground, or just fancy playing around with a new platform, this is worth exploring.

.net october 2010 27

JOIN THE 1&1 MOBILE REVOLUTION AND TA

WEBSITES SOFTWARE FOR FREE!

INCLUDED WITH 1&1 HOSTING PACKAGES NetObjects Fusion® is a powerful website design application to easily build sophisticated sites. Beginners to advanced users can experience the beneﬁts of professional quality design without writing a single line of code. The exclusive 1&1 Edition includes mobile templates for optimal handheld viewing and navigation.

Adobe® Dreamweaver® CS4 is a sophisticated website design application for creating professional websites. Dreamweaver® includes the Adobe Device Central module which enables web designers to test their websites on mobile devices by emulating the latest smartphones. To ﬁnd out more turn over or visit us on www.1and1.co.uk.

* Special offers as of 01/09/2010 and for a limited time only. Software available as download from 1&1 Control Panel; please turn page for details and prices of 1&1 web hosting packages. Terms and Conditions apply, please see ** Calls cost 6p per minute from a BT landline, calls from other operators and mobiles may be higher.

KE YOUR WEBSITE TO THE MOBILE MASSES

GO MOBILE More and more people are browsing the web on the go with their BlackBerry, iPhone or smartphone devices. We give you the software to create an additional website that is optimised for mobile viewing so anyone can view your site wherever they are.

✓ Layouts, designs and wizards enhanced for mobile phones

✓ Convert existing websites to be mobile compatible

✓ Supports latest smartphones

Call website for further details.

0871 641 21 21** or visit us now

www.1and1.co.uk

.net feed reviews Extracts from both books on the CD – see page 128!

Media this month The latest hot new releases

6 11

“There’s a rawness and urgency to this game” <prev

.net october 2010

(1-3) Kane & Lynch 2 Price £29.99-£49.99 Publisher Capcom Format PC, PS3, X360 Games often get accused of glamorising violence, but there’s nothing remotely glamorous about this urban shooter in which two ugly, psychopathic ex-cons are embroiled in a Shanghai heist that goes belly up. There’s a rawness and urgency to this game, from the jittery camera work to the nakedness and gore, and if you have the stomach for it, multiplayer mode is electrifying.

(4-6) Introducing HTML5 Price £25.99 Publisher New Riders Format Paperback If you haven’t already got to grips with HTML5, it’s high time you got on board. Authors Bruce Lawson and Remy Sharp focus on the practicalities of getting started right away with this new standard. With handson code examples, all available to download, you can quickly learn new techniques for everything from forms to video, storage to geolocation.

(7-13) The Web Designer’s Idea Book Volume 2 Price £24.99 Publisher Taschen Format Paperback If you’re looking for inspiration from other people’s website designs, this coffee table-style book has your name written all over it. Author and .net contributor Patrick McNeil’s second book showcases some of the best sites around, looks at the latest trends and demonstrates how to be inspired by others people’s work without going too far.

Verdict Bloody, sweaty and nicotine-stained, this game is uncompromising and unpleasant in all the best ways.

Verdict HTML5 is here to use, right now, and this book does a good job of explaining it in language we can all understand.

Verdict Nicely designed, very readable and with a good choice of sites, this is a great source of inspiration for designers.

BIG SAVINGS

ON PROFESSIONAL WEB SOLUTIONS NOW GET 50% OFF AND FREE SOFTWARE!*

With 1&1 now you don‘t only get professional software for FREE but you can also save 50% on web hosting for the ﬁrst 6 months!

1&1 HOME PACKAGE

1&1 BUSINESS PACKAGE

1&1PROFESSIONAL PACKAGE

■ 1 .uk domain included ■ NEW: 10 GB Web Space ■ UNLIMITED Trafﬁc ■ NEW: 1,500 IMAP/POP3 E-Mail Accounts ■ NEW: 1,500 Online-Ofﬁce Accounts ■ NEW: 1 Database ■ NEW: PHP5 incl. Zend Framework, PHP6 (beta), Perl ■ NEW: NetObjects Fusion® 1&1 Edition

■ 3 .uk domains included ■ NEW: 40 GB Web Space ■ UNLIMITED Trafﬁc ■ NEW: 3,000 IMAP/POP3 E-Mail Accounts ■ NEW: 3,000 Online-Ofﬁce Accounts ■ NEW: 10 Databases ■ NEW: PHP5 incl. Zend Framework, PHP6 (beta), Perl,Python, Ruby ■ NEW: SSH Access ■ NEW: NetObjects Fusion® 1&1 Edition

■ 10 .uk domains included ■ NEW: 250 GB Web Space ■ UNLIMITED Traffic ■ NEW: 10,000 IMAP/POP3 E-Mail Accounts ■ NEW: 10,000 Online-Office Accounts ■ NEW: 200 Databases ■ NEW: PHP5 incl. Zend Framework, PHP6 (beta), Perl,Python, Ruby ■ Dedicated SSL Certificate ■ Power Plus for Typo3 ■ NEW: Choose from NetObjects Fusion® 1&1 Edition or Adobe® Dreamweaver® CS4

4 £ .49 £ .99 per month*

8 £ .99 £ .99 per month*

per month for the ﬁrst 6 months*

24.99 £ .99 £

DOMAIN OFFERS: .eu domains only £0.99 first year .co.uk domains only £2.49 first year

per month*

per month for the ﬁrst 6 months*

For more fantastic offers please go to www.1and1.co.uk

Call

0871 641 21 21** or visit us now

www.1and1.co.uk

* Special offers as of 01/09/2010 and for a limited time only. 12 month minimum contract term applies for special offers on web hosting packages. Software available as download from 1&1 Control Panel. Special offer price on .eu and .co.uk domains applies for the ﬁrst year of registration, subsequent years will be charged at standard price. Terms and Conditions apply, please see website for further details. Prices exclude VAT. ** Calls cost 6p per minute from a BT landline, calls from other operators and mobiles may be higher.

.net feed reviews

Hot mobile apps

Little bundles of portable perfection

RunKeeper Free PRICE FREE PLATFORM iPhone OS, Android www.runkeeper.com The prospect of Nike+ but better and for free might sound unlikely – but that’s what RunKeeper Free provides. The app uses your phone’s GPS capabilities to track your jogging route, and provides mapping and details of pace and calories burned.

Best of the rest… More choice apps

Verdict Activities can be shared online, and treadmill runs can be entered manually.

NAME Twitteriﬁc for iPad If you’re looking to promote yourself, or a brand, then you can’t ignore the merits of Twitter. There are a number of apps to help you do this, but Twitterrific is our favourite, offering a simple and well-designed interface. Verdict The basic account is free, or pay £2.99 to remove ads and enable multiple accounts.

“The app uses your phone’s GPS capabilities to track your jogging route” Movies

Instapaper Free

PRICE FREE PLATFORM iPhone OS

PRICE FREE PLATFORM iPhone OS, Android, RIM

iTunes App Store

pages.ebay.co.uk/mobile/

Although some aspects of cinema listings app Movies are disappointingly US-centric, it succeeds where it matters. Select a film and the app figures out where you’re located, lists nearby cinemas, and displays times your chosen film is showing.

Set up an Instapaper account, create a bookmark in Safari on your device (which is a bit of a pain, but well worth it), and you can then send articles to Instapaper Free, for a superior and focused offline reading experience.

Verdict A good app, and efficiency can be increased by pinning favourite cinemas to the top of the list.

Verdict Treat your eyes! The app also offers a taster for the paid version, which adds alternate themes.

NAME Cool hunting This iPad app – from the people behind www.coolhunting.com – claims to be a ‘daily curation covering the forefronts of design, culture and technology’. Essentially it pulls the content found on the web and presents it all lovely, like. Verdict This free app is a bit of a looker, and it’s also a great place to find design inspiration.

NAME Things The simple and intuitive interface of this task management app enables you to schedule tasks, create projects and more. Things comes in three flavours (Mac, iPhone, iPad), each of which you have to pay for separately. Verdict Priced at £11.99, this is expensive for an iPad app, but if it gets you organised ...

<prev

.net october 2010

Design Build h s i l b u P

! s e t u n i m n i e t i s b e w r u yo Web hosting made easy...

...with Streamline.net’s SiteWizard. You can get your website up and running in minutes, and you don’t need any technical or design skills. What’s more, all of our hosting packages now have 50% off for the first three months, with prices starting from just £1.24pm (£1.46 inc VAT). It’s never been easier and cheaper to let the world know you’re here!

 FREE easy website builder  FREE instant setup **  30 day money back guarantee  Unlimited website traffic  Phone & online support  Personalised email

NOW with

for three months

What is personalised email? You can personalise your email address with your website name e.g. yourname@yourcompany.com. It’s fully customisable and easy to remember, and gives that all important professional look.

For a full range of web hosting packages ranging from £1.24pm visit streamline.net

Web hosting made easy

Buy now at:

streamline.net/easy or call: 0844 692 0124

2010 All rights reserved. Streamline.net and the Streamline.net logo are trademarks of Dollomore Limited. Product and program specifications, availability and pricing subject to change without notice. Prices shown excludeVAT unless otherwise stated. Terms & Conditions apply, see website for details. **Unlimited website traffic is subject to an acceptable use policy. Offer valid from 06 September 2010.

.net feed events

Upcoming events sep-oct

Get your event publicised!

Are you organising your own event? Please let us know by emailing netmag@futurenet.com

The best web events of the month for your diary

Monday

Tuesday

UX Brighton 2010 Brighton 2010.uxbrighton.org.uk Volunteer group UX Brighton turn their September meetup into a full-blown oneday conference on design for behaviour.

Wednesday

13-15 15

DEMO Fall 2010 Silicon Valley www.demo.com Product launches and pitches focused on mobile, cloud and social media technology for business and pleasure.

Creating killer content: simple steps, significant results Cardiff www.precedent.co.uk Free breakfast seminar on how to use content to grab attention and deliver results.

20-24 21-25

Design For Mobile Chicago design4mobile.mobi Presentations focus on the future of mobile UX, mobile forms, designing with Flash and iPad design headaches.

Thursday

Friday

18-26

23-25

25-26 26-29

An Event Apart DC Washington, DC www.aneventapart. com/2010/dc/ With talks from Jeffrey Zeldman, Eric Meyer, Nicole Sullivan, Dan Cederholm, Luke Wroblewski and more.

London Design Festival London londondesignfestival.com More than 200 events, including the Digital Design weekend, which showcases web projects and installations.

JSConf EU Berlin jsconf.eu/2010/ Topics covered at the European JavaScript Conference include HTML5 APIs, web standards and data visualisations.

29-1 29-1 1-2

4-6

Event of the month

Future of Web Apps London futureofwebapps.com/ london-2010/ Carsonified’s flagship event returns with presentations covering HTML5 video, scalable architecture and more.

Hands-on Agile Acceptance Testing London bit.ly/handsonaat Gojko Adzic teaches you how to address communication gaps between stakeholders and build teams.

<prev

Webdagene 2010 Oslo www.webdagene.no Norway’s web conference boasts Joshua Porter, Kristina Halvorson, Mark Boulton, Håkon Wium Lie and many others.

ExpressionEngine CodeIgniter Conference Leiden, Netherlands eeciconf.com/eu/ International speakers, a brand new programme, plus lots of social events.

6-9

7-8

mountain.rb Boulder, Colorado mountainrb.com This Ruby-focused single track conference mixes technical presentations, community events and outdoor experiences.

12 issue 208 on sale!

.net october 2010

Sunday

16-18

EuroIA IV Paris www.euroia.org European Information Architecture Summit featuring workshops, networking and panels with experts from across the world.

Web Directions USA Atlanta usa10.webdirections. org Another cracking lineup, including Dan Rubin talking CSS3 and HTML5, and Jonathan Stark on geolocation.

Saturday

The Pitch Conference Chicago pitchconf.com This conference aims to prepare attendees to pitch their own ideas, businesses and passions to an audience of any size.

Flash on the Beach Brighton flashonthebeach.com The ‘best session title’ award has to go to ‘ADHD FTW, LOL!!!’, which looks at getting creative output from a short attention span.

3-8

Usability Week 2010 San Francisco, CA www.nngroup.com/ events/san_francisco/ agenda.html Highlights include sessions on navigation design and touchscreen app usability.

10-13

HighEdWeb 2010 Cincinatti www.highedweb.org A conference for all higher education web professionals looking to explore the unique issues facing colleges and universities.

Fronteers 2010 Amsterdam fronteers.nl/ congres/2010 Session topics include HTML5, CSS3 and front-end performance. Look out for Jeff Croft and Andy Clarke.

Early bird Hurry! Book now to avoid disappointment

13 october

27 october

8-12 november

12 november

Jump London econsultancy.com/events/ jump Jump, hosted by Econsultancy, is about linking on- and offline marketing for better results.

Web Developers Conference Bristol webdevconf.com Now in its fourth year, the conference features Elliott Kember, Gavin Strange, Anna Debenham and Keir Moffatt.

Build Belfast buildconference.com It’s back! This year the schedule includes more top talks, wicked workshops and fantastic fringe events.

Full Frontal Brighton 2010.full-frontal.org/ Remy Sharp presents his very own JavaScript conference featuring Google’s Alex Russell, Dan Webb and more!

Gary Marshall’s big mouth

Smoke screens

Gary Marshall once wanted to have the internet everywhere. Be careful what you wish for, he says… There’s a cartoon in a recent issue of Private Eye showing a mum and her daughter outside a cinema. The film is Toy Story 3 and the iPadand iPhone-toting tot is asking, “Mummy, what’s a toy?” I laughed a lot, but it was a hollow laugh: just that morning I’d bought my wee girl the Toy Story 3 electronic book. My daughter is growing up surrounded by screens. In the morning, I’m reading blogs and feeds and sites and tweets on my phone while chugging down coffees. Mrs Bigmouth reads The Guardian online, visits message boards and catches up with friends on Facebook. During the day, I’m stuck in front of my twin-screen setup – three screens if you include the smartphone – for hours on end. My wife checks in with friends using her smartphone and my daughter spends the odd half-hour using drawing apps or playing games. This is not something I’m particularly worried about right

now. Baby Bigmouth spends much more time charging around parks with her pals than she does chasing things around a screen, and her electronic adventures are largely educational and always chaperoned. But I do worry about the increasing importance of screens in our lives. I suspect if an alien were to land on Earth right now and look around, he’d assume that the screens were our masters, not the other way around. He’d be right.

Glow with it

Look around you the next time you’re anywhere public – a railway station or a train carriage, a city street or a shopping mall – and you’ll see faces illuminated in backlight blue. You’ll see it in cinemas, not just during the trailers but during the exciting bits of the blockbuster. You’ll see it in restaurants, where courting couples only have eyes for their iPhones. You’ll see it in checkout

“In the most frightening cases, you’ll see faces in backlit blue behind the wheel of BMWs”

lines, where no queue is so short someone can’t fire off a quick status update. You’ll see it in dark alleyways, just before the phone owner gets mugged. And, in the most frightening cases, you’ll see faces in backlit blue behind the wheel of speeding BMWs. I’ve seen this before, because I used to be a smoker. I smoked in railway stations and in train carriages, shopping malls and cinemas, in airports and in aeroplanes and in offices and in restaurants and in any place that wasn’t packed with explosives. If I couldn’t smoke, I’d be thinking about smoking, and if I left the house without my cigarettes, I’d be a twitchy, nervous wreck until I got my fix again. I’m like that with my smartphone now, and I don’t think I’m the only one. Increasingly, our everyday activities appear to be irritations, obstacles – things that we do between being online. In public places, we’re separated by our screens, interacting with faraway friends while ignoring the people a few feet from us. For all the talk of a social web, the way we’re using it is as social as smoking. l Gary Marshall has been writing for .net since the stone age. www.bigmouthstrikesagain.com

.net interview

“Wireframes are no longer sufﬁcient. They don’t communicate the desired experience” Peter Merholz, Adaptive Path www.adaptivepath.com

Photography/Sandra Silbereisen

Peter Merholz, founding partner and president of Adaptive Path, gives Oliver Lindberg an insight into how the agency works, how to develop an experience strategy and how user experience can change an organisation’s structure Founded in 2001 as one of the first consultancies focused on user experience, Adaptive Path’s work is revered across the world. The firm consists of some of the most talented people in the field. Co-founder Jesse James Garrett coined the term ‘Ajax’, his founding partner Peter Merholz the term ‘blog’. Adaptive Path’s workshops and very own conference, UX Week, are immensely popular. It’s no surprise, therefore, that the firm has just crossed the 50-employee threshold and opened its first European office in Amsterdam. It helps, of course, that companies are finally starting to recognise that user experience brings a distinct new value to their products. “Companies are really taking to heart what it is that their customers want to do and figuring out how to deliver that,” says Peter Merholz, Adaptive Path’s founding partner and president. “A good user experience is allowing companies to surpass their competitors – just look at Apple and Southwest Airlines. Now others are wanting to do it themselves because they realise they’re falling back.” As part of its services, Adaptive Path provides an “experience strategy”. It defines the desired experience early on and, to be able to do so, understanding the customer is crucial. Before

.net october 2010

any design is done, Adaptive Path conducts a lot of user research, including early field research and ethnographic studies. It’s something that’s becoming more widespread within the design and user experience practice. “You might have an idea for a product or service but, before you start committing to any path, go out and talk to people. Engage with them!” Merholz suggests. “It’s really important for us to watch people actually engaging in their behaviour. We had a project with a retail client, for example, and we went on so-called shop-alongs, following people as they went around buying a new TV. What’s it like talking to the salesperson? Are there kiosks or displays? What is that experience like? “You need to be in that flow of actual use and behaviour rather than trying to mimic or mindmap, which always ends up feeling fake. Also, being comfortable researching with groups is increasingly important. There are new interaction paradigms with things such as the Wii. Multiple people are doing stuff at the same time, so your research methodology needs to be able to accommodate more than one person. You can’t talk to one person if what you’re designing is inherently social.” Mobile is posing significant challenges for user experience. First of all, designers need to really

embrace mobile for what it is, and not simply think it’s a smaller version of a PC. But designing for mobility, freeing ourselves from the keyboard and mouse constraints, is also throwing up a lot of questions about the user. “User research for mobile is actually quite hard,” Merholz admits, “because you have to start chasing the user around as they’re shifting context. They usually have only a limited amount of time, and mobile is something they engage with in little bursts. In order to design for that, you have to hang out with someone for a period of time. “It’s a different use paradigm we don’t really have the tools to understand and deliver for yet. So the apps that are successful for mobile are successful not because they really bother to understand the user but because so many people are trying so many things that a few of them just work.”

Basic principles

Once you’ve taken that all-important first step – understanding the customer – you need to develop the user experience strategy. For this purpose, Adaptive Path crafts a set of experience principles to understand what the customer wants. “They’re essentially statements that articulate the characteristics of the desired experience,” Merholz explains. “A good example is TiVo. They have this set of mantras that they treat as religion internally. For example, ‘it should be as robust as an appliance’ and ‘it should be fluid and smooth’. It helps them keep the product design focused. “By being able to distil what you’re trying to do into a set of five to seven principles, you provide focus for the design and

.net interview

“The challenge that user experience teams within organisations face is how to make the understanding of the customer everybody’s concern” .net october 2010

next>

.net interview

“You need to be comfortable researching with groups. You can’t talk to one person if what you’re designing for is inherently social” development team. It helps the decisionmaking and provides a coherence to an entire experience.” Merholz also highlights the importance of prototyping to really get an understanding of the desired customer experience. “We’ve really come to terms with the reliance on wireframes. They’re still valuable but no longer sufficient. Whether it’s Ajax, Flash or RIAs, wireframes don’t do justice to, or properly communicate, the desired experience. “They’re useful for breaking down functional specs but it’s important to get the details of interaction right and that requires prototyping. You need to understand the flow, the feedback and transitions. And wireframes are terrible at that.” You don’t even have to spend a lot of money prototyping your experiences before you put them into production. Over the last two or three years Adaptive Path has put more emphasis on drawing again. It’s a must-have skill for the user experience designer. “Sometimes it can be hard to get meaningful feedback if the problem that you’re trying to solve is too abstract,” Merholz explains. “If you’re able to put sketches in front of people, it can anchor a conversation. Kevin Cheng, product manager at Twitter, even has a book about communicating concepts with comics coming out.” Recently, Adaptive Path worked with shoe and clothing retailer Zappos to improve its user experience. While Jeffrey Zeldman’s Happy Cog

<prev

.net october 2010

focused on the visual design, Adaptive Path helped to evolve the strategy and design on Zappos.com as the site grew more complex. The team also helped Zappos shape its user experience organisation. “They were growing their internal user experience and product teams,” Merholz explains. “So we did what we call ‘practice development’, which is organisational change or design. The focus was on helping them to develop solid UX skills. “The methods we shared with them weren’t particularly revolutionary – it was more a matter of helping them to figure out how to engage these UX methods within their current development approach.”

Root and branch reform

It’s in this area of organisational consulting that Adaptive Path finds itself getting more and more involved. “The products we’re designing get more complex, and to deliver meaningfully on that, we need to have cross-functional teams that try to solve the problem in parallel and work together,” says Merholz. “No one person can master it all. But currently a lot of businesses locate customer understanding in a group, such as a user experience group or a market research group. That’s not sufficient. “An entire business needs to care about its customers and be concerned that what they’re delivering is of use and value to the end user. It’s a

hard challenge because organisations are typically highly hierarchical. If I’m the customer of a bank and I use an ATM, then do some online banking and then call a call centre, the people delivering on those experiences are in totally different groups. They never interact with each other. I then, as a customer, have this very fractured experience. It’s like I’m dealing with three different banks!” For Adaptive Path today, user experience is no longer restricted to the web. The firm has just finished a kiosk project, is currently working on a secret iPhone app for a major retailer and is in discussion to work on a couple of iPad apps. There are also two projects in consumer media, which will see Adaptive Path help organisations to develop strategies for delivering new products and services over the next three to five years. Because, in the end, user experience isn’t just about the interface. It’s about the whole customer journey. ●

Peter Merholz Job Founding partner and president of Adaptive Path Age 37 Education Bachelor’s in Anthropology from Berkeley Career Creative director at Epinions.com, information architect at Phoenix-Pop Online peterme.com

UK address auto-ﬁll

Will Your Deliver This Christmas?

Thousands of online shoppers won’t receive their gifts this festive season because of errors on the address label. Redirection, replacements and unhappy customers will cost e-tailers £19.3m* over the same period. Mistyped delivery details aren’t a problem when you use Postcode Anywhere in your website. The right address completes automatically after entering the postal code - reducing missed deliveries, improving customer experience, and keeping your marketing database clean.

Easiest and fastest set-up

Install on any website or desktop app in seconds with the largest choice of integrations

Free email validation

Add extra functionality at no added cost with free email validation included

Now with daily PAF® updates

The only service with Royal Mail’s ail s thousands of daily address updates as standard

More e-commerce sites use Postcode Anywhere than any other auto-fill provider. Take the free trial at www.postcodeanywhere.com or call 0800 047 0495 * from IMRG, Valuing Home Delivery 2010

“The de fac to choice for a ddress look-up, sec ond to none”

.net subscribe

Super saver!

Massive savings off store prices!

Subscribe today Save up to 54%

•Never miss a copy •Stay up to date on the latest news and techniques •Have every issue delivered direct to your door!

.net october 2010

.net subscribe

UK: £13.99a quarter USA/Canada: Seepage97 Europe: £74.99 – save 54% Restof world:£84.99for 13 issues Visit www.myfavouritemagazines.co.uk/net/NETP11 or call 0844 848 2852 quoting code NETP11 Get the boss to pay! Visit www.netmag.co.uk/ﬁles/corp-subs.pdf to download the Corporate Subscriptions form

Why leading web designers and developers read .net … “.net is professional, focused and purposeful. It’s packed with content, and it should be the industry choice!”

“.net stands head and shoulders above the crowd with great articles and cutting edge how-tos authored by industry leaders”

“I love the feel of printed pages; the ability to scribble notes and highlight; the freedom to rip out pages and tape them to the wall”

Simon Collison, web developer

Dan Rubin, designer

Cameron Moll, new media designer

www.collylogic.com

www.sidebarcreative.com

www.cameronmoll.com

*TERMS & CONDITIONS Savings based on average price of buying 13 issues from newsstand. EU may vary depending on region but you will save up to £106 a year. ROW has no set newsstand price therefore speciﬁc savings cannot be advertised. You will be charged in GBP. Minimum subscription term is 12 months. You will receive 13 issues of .net a year. If you are dissatisﬁed in any way during the next 60 days please notify us in writing and we will refund all unmailed items. Your subscription will start with the next available issue. This subscription offer ends 30 November 2010.

.net october 2010

in tagg

t ge

un f g

proving value

ds bran g n i t t e l

t don’

nc e

g ura o c en

t a e c y en ct p tim s ex hm r a xperi e o st er p user e d ser n u u e rt a p

e us

ici p

sa tio n

ep eat visits

c t

o to

t i c ad

it un comm

tio c tom a er satisf

ive

t l rac t ua ap inte c xt ad te fa n nd s o i c ct a s inspe nd ﬁt sat a r t ne be me van the custo rele ent eap cont i ll r making rs w opte

early, enthusias

content targeted for the device

sense of communit y

fast sites increase stickiness

browsing

trong, usable design as

relevant

atisfaction customer s

ati on

x re ve use cti rea e

k a tm the id o n eal is to

cu s a

rs use

c n it n t e io g p n au a e lity o s er p rk le to e t h r t e i nk i t u n rn f g r a e q re uentl y e ffec t an t y i v g e o o tools d ﬁrst i mp r e s s i o ns l as t l of digit a l e n g a g ement

’n e eds

it o n

hin

relevant

compelling conten t wi t intuitive

tagging functionality

everyone loves seeing their con

ial engag ement

ss d e s i gn en t i a cre ate lism loyalty so c rie

i m o r ust e c iv

.net magnetic

re plo

ntent pub lished

Make your sites magnetic Once you’ve persuaded people to visit your site, how do you hook them in so they stay longer, and keep coming back for more? Craig Grannell explains how to increase your site’s ‘stickiness’

Words Craig Grannell Craig Grannell is a web designer and writer. Check out his design work at snubcommunications.com

a great er lev ens u r e th

Image Knight Design is a Bristol-based graphic design studio.

ai l

ter t e l news

n sa

Today’s consumers have more choice than ever, especially online. Competing attractions are just a click away, so it’s vital to engage your audience’s attention and give them a reason to stay on your site – and want to come back to it again and again. This elusive component of web design is often referred to as ‘stickiness’. Stickiness is important for various reasons. “Getting a user to return frequently is more cost-effective than trying to convince new users to come to a site,” points out Pod1 ecommerce strategist David Hefendehl (pod1.com). Once users are engaged, “adopters will help you to spread the word and promote your site,” adds Abduzeedo founder and designer Fabio Sasso (abduzeedo.com).

The right kind of sticky

It’s critical that stickiness stems from positive user experience, leading to loyalty and users not wanting to leave. “When designing, never think of literally getting people stuck,” says cxpartners principal consultant James Chudley (cxpartners. co.uk). “I’ve heard of nasty UX where important information has been made deliberately hard to locate, ‘trapping’ users. Instead, focus on users’ needs and serve them well. As a result, you’ll get the kind of ‘stickiness’ you want.”

Also be careful who you use the phrase ‘stickiness’ around, adds Digitaria senior web analyst Dexter Bustarde (www.digitaria.com). “It’s a popular web industry term but it carries a natural negative connotation to most outside the industry,” he points out. When talking to clients who don’t themselves bring up the phrase ‘stickiness’, Bustarde suggests using the term ‘essential’ instead. “Having an ‘essential’ site is aspirational, while still capturing everything web developers and marketers think of when using the term ‘sticky’.”

First impressions

Design is integral to a site’s stickiness. “People react to gut instinct,” Chudley says. “If a site doesn’t look professionally designed, they won’t stick around – particularly if they’re looking to buy something.” Bluhalo’s marketing and business development manager Jocelyn Kirby concurs. “Looks matter,” she says. “First impressions count. Before contemplating a return visit, a user must engage with a website.” In providing a user with what they’re looking for, in a usable

.net october 2010 43

next>

ss en

nc e

sign Greg Patterson ti a cre ate lism loyalty so c

Case study ground(ctrl)

rt a p

ial engag ement

tagging functionality

t don’

ag our c n e nds a r b letting

proving value

everyone loves seeing their c

compelling conten t

Speed things up Website download and response times impact heavily on stickiness. If you’re running WordPress, visit daverupert.com/2010/06/web-performant-wordpress/ for great tips on improving page-load times

format that looks good, you’re partway towards achieving stickiness. The ideal is to not make people think. “Optimise a site’s design to deliver the most intuitive user experience, and deliver the desired end result to the user with little effort,” continues Kirby. “This contributes to the likelihood of the user returning.” Of course, good first impressions are just the starting point: you have to make them last. A

In the fight for eyes and hits, video is definitely worth considering. “We’re constantly visually stimulated, and video often achieves engagement where text and imagery cannot,” says Kirby. “Regularly updated videos maximise repeat visits from people looking for new content. “Since video hasn’t seen the amount of contribution text content has, early, enthusiastic adopters will reap the benefits in natural search

“If a visitor clicks on a button that does nothing, you hurt yourself twice”

Dexter Bustarde

strong design is one that doesn’t just look pretty but guides users and encourages them to interact or share. “Visuals and branding are important, but what’s important is how those visuals and branding are integrated with the structure underneath the surface layer,” says Bustarde. “You can have a gorgeous looking layout, but it has to work. If a visitor clicks on what looks like a compelling button but it doesn’t really do anything, you’ve hurt yourself twice: you’ve presented something that feels broken and discouraging, and you’ve missed out on the opportunity that was created with your great visual cue.”

rankings, given the relatively low amount of existing competition compared to blogs and websites.” However, video by its nature takes time to consume, and so Chudley warns that it “should be of a duration commensurate with the nature of what’s being conveyed,” adding that he recently saw a 25-minute video for a web service that

Style and substance

Sound strategy ground(ctrl) uses various methods to increase the stickiness of its music-related websites

<prev

.net october 2010

t a e c t rien m y i c m t a s e h r xp e s to ere r r e p use d s un eu c t

Company ground(ctrl) Position CCO URL groundctrl.com

Greg Patterson, CCO of ground(ctrl), an agency that specialises in music websites, says that stickiness is the challenge for every project the company gets involved with. “Our clients are looking to make some sense of the changing landscape of their industry, and stickiness is key to retaining fans in a world where the megaphones such as radio, music videos and even the major label system are seeing their influence shrink,” he explains. “Survival to a band these days means hanging on to fans – new ones are hard to come by.” The model the agency uses is designed to reward all fans, but to reward ‘super fans’ more. “We first have to determine available resources. Is there demand? Will artists participate? Will it be genuine? Based on these factors, we make recommendations,” says Patterson. “For instance, everyone likes money, but for some artists it would be a big hit to their image if they attempted to charge fans for access to a website. We set long-term realistic goals with clients, and tailor the approach with promises that can be delivered. If you create a great experience for your most dedicated fans, there’s opportunity to later monetise your website.” With Papa Roach (paparoach.com), ground(ctrl) refocused a fragmented base. “We first brought all official properties under one roof. Enthusiasm is infectious, so why huddle the most enthusiastic fans off in a corner with a separate site? We then got the band excited and involved, interacting with registered members.” The result: a 2,500 per cent increase in registered users, and revenue streams that didn’t exist before. “It continues to be one of our stickiest projects in terms of user registrations and traffic,” says Patterson.

it un

x re ve cti rea e

.net magnetic

rie

i m r usto e c iv

Underpinning visuals and structure is content, arguably the most important single component when it comes to stickiness. To get repeat visits BKWLD’s director of interactive production Dan Fields (bkwld.com) suggests “putting what’s most useful and compelling in the most logical, strategic position”. Fields points out that once a ‘visual language’ is created and a user knows where to find sticky content, it’s easy to train them to find it, helping to ensure they’ll stick around.

Up and away Pod1 upped server numbers for UNIQLO UK at Christmas, speeding load time and boosting conversions

.net magnetic

e l or p ex Case study Kashi Chad Vavra Company Barbarian Group Position Director of interaction design URL barbariangroup.com

content pu blished

News spikes Nathan Parris of We Love says the agency’s newsletters result in large spikes in traffic on their blog

should have been a quickfire elevator pitch. The result: zero stickiness.

Social engagement

Compelling content within a strong, usable design will guarantee some stickiness, then. But the relentless march of Facebook and Amazon suggests that reactive design is increasingly important. Sites that react to users’ needs can result in longer session times and encourage return visits. Customisation involves a personal investment on behalf of the user, and when someone has given time to a site, they’re more likely to become loyal. “The method to choose depends on your site and audience,” says Sasso. “If you can automatically provide reactive design, that’s often better than making users customise things themselves, because that comes with a learning curve.” With Facebook having trained people to click on ‘like’ buttons, a low level of active participation

When the Barbarian Group was asked to redesign the website for cereal brand Kashi (www.kashi.com), its research revealed that users within the target market “lacked an online place to connect their lifestyle with the brand,” says Chad Vavra, director of interaction design. “So the team working on the project took the opportunity to resonate with Kashi’s audience and increase the site’s stickiness through interactive tools that fit within the brand’s mission to help people live a nutritious, balanced life”. The team used a model that Vavra refers to as ‘inspect and adapt’. “During the ‘inspect’ phases, we identified features that were required to address a particular user or business need. On developing a feature, its performance was tracked through testing, surveys and feedback. We then identified issues and their sources and quickly adapted features to better support users and increase site stickiness.” The output from the Barbarian Group’s analysis work enabled it to create a user experience strategy that focused on why customers love the Kashi product and brand. “Knowing these key things, we could design the site with rich interaction around what fitted Kashi customers’ lifestyles, making their passion part of the experience,” explains Vavra.

should be fine for most sites to increase stickiness. We Love copywriter Melissa Bennett suggests this will soon become commonplace. “Facebook plugins vary from enabling users to ‘like’ or recommend things to allowing users to make comments and show profile pictures of friends who’ve already signed up – they’re essentially letting brands encourage users to explore more,” she says. “And what I see when looking at a site with a Facebook login will be different to what a friend sees. In the future, sites will be completely relevant to individual users. This will make them extremely sticky: by making content relevant and contextual, catering to what we want to see, a site will create loyalty.” However, Bustarde warns that anyone focusing on a similar kind of targeted content must “avoid the creepy sensation that comes with seeming to know too much about your visitors” – a problem Facebook’s arguably having to deal with. Other means of social engagement can also enhance stickiness. Hefendehl cites Gurgle.com, the Mothercare-backed community for first-time parents. “It’s run as a non-direct sales channel,” he explains. “By identifying a need for a core target market, the site offers sticky content in the form of help for parents.” Others tap into existing networks such as Flickr, YouTube and Twitter. “These are all great tools to

Specific elements included a natural learning library of articles, videos and slideshows, and recipes written by Kashi employees. “All of the recipes use extensive metadata to allow detailed filtering and searching,” says Vavra. Stickiness was further enhanced by extra levels of interaction: a section of ‘lifestyle tools’ that enable users to take daily challenges, post and track results, take surveys, find all things natural in their locale, and become engaged via an extensive community section. Almost a million people have since joined the Kashi community, and nearly 100,000 have chosen to receive additional communications. “The site quickly became the top-performing site for customer satisfaction in Kellogg Company’s portfolio and the best-performing marketing touchpoint for Kashi, outperforming other media,” says Vavra. “We love the passion and activity that the community fosters, and this has become an iconic example for The Barbarian Group and Kellogg Company in terms of how to market a brand digitally.”

User engagement Almost a million people have since joined the Kashi community since the website’s redesign

achieve extra stickiness,” says Jonathan Smiley of design company ZURB. “People come from these sites and spend incredible amounts of time on ZURB.com. Why? Because they want to learn more after viewing one of our videos or reading our tweets.” The important thing is to ensure the sense of community always remains – poor management of social media can harm perception of a brand, which can wreck stickiness. With communities in place and visitors returning, it’s useful to examine additional outreach possibilities, although Hefendehl says to be mindful that most people aren’t techies. “RSS readers are good to push content out, but are limited to a very small percentage of people who use them and understand what they do. Newsletters and email marketing are more effective tools to get users back to your site. A carefully planned email strategy will pay for itself in no time.” Even better, he says, is to find a way to enable user-generated content: “Everyone loves seeing their content published or their comments picked up by a website’s owner.”

Need for speed

Getting the design and content right are key when making your site sticky, but so too are technical factors. If your site is slow to

.net october 2010 45

next>

Personalise it “In the future, sites will be relevant to individual users. This will make them extremely sticky; by catering to what we want to see, a site will create loyalty” – Melissa Bennett, We Love copywriter

load, users might not even bother waiting, no matter how much amazing content it contains. Assuming this hurdle is overcome, ongoing speed must be maintained to hold a user’s interest. “The longer people stay, the more engaged they’ll become, ultimately increasing the chance of their desire to return,” says Bluhalo’s Steve Clarke (bluhalo.com).

Strike a balance

But remember that web design is a balancing act – don’t get spooked and rip out or oversimplify your content in the name of stickiness. “People are willing to wait for something, within reason,” points out Bustarde. “For instance, most people don’t mind that Netflix’s online movie player takes a minute to load, because they’re expecting to be with the site for hours.” However, at the other extreme, the same wait for 30 seconds of content would be a poor experience. Fields also recommends that designers resist temptation to shove ‘sticky’ hooks above the fold. “Thanks to long scrolling sites such as Facebook, people are no longer afraid to scroll,” he says. “Sometimes, telling a story and creating pacing on a page is good. Just as stories have conflict, climax and resolution, why shouldn’t a website sometimes use that same convention?”

One shouldn’t underestimate users, argues Fields, and warns against confusing a short attention span with the notion that users don’t want content. “The important thing is to ensure that content throughout your sites is of a high quality – that, ultimately, ensures users will be willing to wait, engage and return.

Above “Stickiness is a term that carries a negative connotation. The last thing we want a visitor to feel is ‘stuck’!” – Dexter Bustarde, Digitaria senior web analyst Left Site customisation must retain usability, says Bustarde: “Facebook lets users customise content, but visuals are down to Facebook developers”

<prev

.net october 2010

in tagg

Image conscious Good quality photography is a great way of keeping people on your site for longer

Speed and pacing are especially important for mobile sites, although ‘sticky’ in the mobile domain rarely equates to ‘more time’ – instead, less is more in this space. “Keep things simple,” recommends Code Computerlove founder Louis Georgiou (codecomputerlove.com). “Have content targeted for the device it’s consumed on, remove noise and visual clutter, keep options relevant and obvious, and make things light and quick,” he says. Hefendehl agrees, suggesting sites offering quick access to important information to ensure return visits. “A bad example is Transport for London’s site, which loads too much content when accessed via a smartphone,” he says. “By contrast, National Rail offers exactly what you need on the go, allowing easy access to train times and destinations.” Whether on the desktop or mobile, fast sites demonstrably lead to increased stickiness, which can in turn increase revenue. ZURB’s Bryan Zmijewski explains that the agency has seen revenue bumps on ecommerce sites of up to 30 per cent simply by making pages load faster.

Speed testing

Objectively measuring a site’s speed is fairly simple, thanks to modern tools. Clarke recommends Firebug, which “provides a list of how long each element takes to load, helping to identify those

un f g

k a m t he ide o al is to n

In his work as principal consultant for usercentred design consultancy cxpartners, James Chudley is regularly asked to optimise websites so that people can complete tasks as quickly and as easily as possible. And recently, he’s noticed the positive effect photography can have upon the user experience. “Photographs play a huge but rarely discussed role in the online experience, within almost every genre of website, says Chudley. “Good product photography on an ecommerce site, for example, will improve its stickiness because users will use the photos to learn more about a particular product.” Users come to such sites with a number of questions that need answering, and good photography can help to address them. Furthermore, Chudley points out, browsing photos represents the beginning of ownership. “If you’re showcasing a desirable product, shoppers may happily spend considerable amounts of time drooling over beautiful photographs, thereby making the site more ‘sticky’,” he explains. And it’s not just ecommerce websites that can be made ‘stickier’ by incorporating high quality images. “On news sites, for example, good photography is vital and is often the reason that

o i t tom ac f s i er sat

o to

Company cxpartners Position Principal consultant URL www.cxpartners.co.uk

users visit the site in the first place,” he says. “Sites such as The Big Picture (boston.com/ bigpicture) provide photo showcases that are so engaging due to the quality of the photography that it’s easy to spend ages just exploring them.” Ask yourself how long you’ve sat in front of your computer browsing through images on social networking sites such as Facebook, says Chudley. “With that in mind, you’ll start to see how photographs can increase stickiness in this context. Facebook’s tagging functionality, for example, is a clever way of notifying people that pictures of them have recently been uploaded.” Overall, Chudley says, we often just want to be entertained, and photography is a good way of achieving this. “We might be travelling or killing time, and if a site can hold our attention, entertain us, and make that time pass faster, then we’ll return to it in the future. Sites that amuse us are amazingly sticky because as people we like to be entertained. By understanding your audience, you can give yourself a real opportunity to make your site sticky for all the right reasons.”

cu s

a James Chudley

ive ac t

Interview Using photography

rs use

’n e e d s

tio n

tin g

io n .net magnetic

n sa

Case study Tottenham Hotspur

r e t t le news

.net magnetic

Jocelyn Kirby Company Bluhalo Ltd Position Marketing & business development manager URL bluhalo.com

causing delays and enabling you to focus on improving specific content load times.” Hosting provision also plays an important role in delivering good speeds. “Load testing will give you an idea of the capacity of your servers,” he says. “A poor result indicates that the server needs to be optimised or that additional server capacity is needed.” Sometimes, this can pay rapid dividends. For example, Hefendehl explains how Pod1 upped the number of UNIQLO UK servers for Christmas, to cope with increased demand, and the resulting site speed bump helped conversion rates rise by 50 per cent. Unsurprisingly, UNIQLO subsequently decided to retain this server setup. Unfortunately, measuring how site speed affects visitor engagement isn’t always as straightforward. “Many analytics tools recommend placing code at the bottom of a page, but on slow sites the tool

Football fans are known for being loyal and passionate, and Bluhalo’s redesign of tottenhamhotspur.com aimed to make Spurs followers feel the same about the team’s online presence. “The core objective was to improve the site’s stickiness. This would ensure an increase in site traffic, delivering improved ad revenues to generate return on the initial investment,” explains Jocelyn Kirby, Bluhalo’s marketing & business development manager. “On top of this, increased stickiness would also indicate a greater level of digital engagement with the fans.” Bluhalo focused on improving the user experience throughout the site, consolidating separate logins and giving members faster access to all relevant areas of the site. “We incorporated live feeds, a frequently updated feature-rich fan area and employed best practice in site usability,” says Kirby. “This ensured the large amount of data held within the site was easily accessible.”

The original build included migrating over 17,000 existing content pages and, while the original design is now a few years old, Bluhalo has reworked it several times over to keep its stickiness quotient high. “We retain the original robust technical infrastructure, allowing redesigns to be cost-effective and relatively quick to implement, ensuring the site looks fresh and current. This all helps keep the fans interested,” says Kirby. She notes that since the original relaunch the site has consistently delivered improved performance: “On average, we’ve seen a 350 per cent increase in annual page views, a 250 per cent increase in visits and have doubled online store revenues, with significant advertising revenues.”

User-focused UX improvements to the Spurs site increased traffic and stickiness, which in turn boosted revenue

“Target content to the device it’s consumed on and keep it light”

Louis Georgiou

may miss the fact someone’s even visited,” says Bustarde. “For sites you know are going to have a relatively long load time, one possibility is to let your analytics tool track when a visitor first arrives and then treat their first action on the site as a sort of mini conversion.” Hefendehl also argues that measuring a site’s stickiness differs depending on its business objectives. “It could be time on site; it could be returning visitors per campaign; it could be number of transactions; it could be cost per acquisition,” he suggests. “There’s no general rule for measuring this.” To that end, don’t be too reliant on time-based feedback alone: in fact, says Chudley, doing so can be dangerous. “You can get a skewed impression of site success,” he points out. “A client once delighted in telling me that user visits averaged over 20 minutes. In reality, his service should have led to short visits but the site was hard to use and people were getting stuck…” Ideally, look for a range of indicators when judging the stickiness of a website, and make them relevant to the site. If the site is designed to offer quickfire information, look for short visits with people returning regularly. If the site aims to keep people engrossed for hours, ensure that’s what’s

happening. If you’re providing interesting content for people to grab, the tracking of downloaded files in tandem with return visits and growth might be enough to indicate a site’s success regarding stickiness. “This will all change from site to site, but should detail whether visitors are doing what you expect,” says Bustarde. Having stickiness as your overriding goal requires the strategy of proving value. In the end, what some visitors find useless and trite, others will find essential. It’s your job as a designer to aim the right content at the intended audience – and to ensure that everything sticks. How have you made your site ‘stickier’? Share your experiences at forum.netmag.co.uk

Above Amazon’s recommendation engine is a major component of its stickiness; many ecommerce sites could learn from its example Left Apps like National Rail are the ultimate sticky tools: once they’re installed, they’re always available. But make sure they’re good: a poor app can tarnish a good online experience elsewhere

.net october 2010 47

.net awards_2010

MAGAZINE AWARDS_ 2010

The .net magazine Awards 2010 You choose the shortlist, then our panel of industry judges will decide! The nominations phase of the .net Awards is officially over. Now it’s time for the real battle to commence. Public voting is now well and truly underway, and you’ve got until 12 October to cast your ballot – so make sure your voice is heard! We’ve drawn up a shortlist of 10 nominees to choose from in each of 16 Award categories (see right). Head to thenetawards.com to vote on your favourites, after which the top three in each category will be sent to our panel of 112 industry judges, including such stellar names as Jeffrey Zeldman, Molly Holzschlag and Tim Van Damme.

Subscribe and save up to 54% – you’ll never miss an issue again! Turn to page 40 for details

Winners will be announced in issue 210. So get voting, and have your say in this year’s Awards!

VOTE NOW!

www.thenetawards.com In association with

.net october 2010

Sponsored by

The categories • Design agency of the year

• Video podcast of the year

• Open source application

• Web application of the year

• Redesign of the year

• Best API use

• Interactive site of the year

• Standards champion

• Viral campaign of the year

• Blog of the year

• Innovation of the year

• Mobile site of the year

• Podcast of the year

• Web personality of the year

• Mobile app of the year

of the year • Community site of the year

.net user–experience

DIY user experience

Improving your user experience will boost visitor numbers and conversions – but you don’t have to call in a pro. Whitney Hess reveals why you don’t need big bucks to master research, analytics and testing … Words Whitney Hess is a user experience design consultant in New York City. She writes about improving the human experience on her blog, Pleasure and Pain. www.whitneyhess.com Image Chris LaBrooy is a Scotland-based designer specialising in 3D graphics and typography chrislabrooy.com

.net october 2010

For many companies, user experience design is a luxury. Limited resources and tight budgets often mean software developers design interfaces based on their own preferences and assumptions, without anyone to challenge them. We’ve all used these systems, and have grimaced when they don’t work the way we expect them to. This isn’t a dig at programmers. The same thing happens with graphic designers, marketers, project managers, technical writers and others. People of all levels, regardless of title, are making decisions based on experience and instinct – and their bosses expect them to be right, all of the time.

I see companies like this every day. A business manager waves a white flag and says, “Our customers aren’t doing what we want them to do!” The message makes its way around the office, until someone somewhere suggests that they hire a user experience designer to come in and tell them what to fix. Then someone calls me. My name is Whitney Hess, and I’m a user experience consultant. I help firms make their stuff easier and more pleasurable to use. I really love what I do. I wake up every day thrilled that I get to fight for what people really need, not just what companies want to give them. I believe the work of a user experience designer is about doing good: not just creating innovative, well designed products, but helping people improve their lives. But at the risk of losing some potential clients, I want to let you in on a little secret: you’re a user experience designer, too. Every single one of you. Whether it’s in your title or your job description, you make decisions in some way or form that fundamentally affect the experience people have with your product. Whether or not you plan it, user experience happens.

.net userâ&#x20AC;&#x201C;experience

.net user–experience Tools In-person usability testing Silverback

silverbackapp.com A Mac app that lets you capture screen activity and record user’s face and voice using built-in iSight and mic.

Generate feedback Feedback forms are a great way to enable users to communicate their feelings about your site or product. A third-party service such as UserVoice (https://uservoice.com) can get you up and running quickly

Morae

www.techsmith.com/morae Use Morae to capture your screen, record from a webcam and/or from a digital video camera, or any combination.

Expression Encoder 4

www.microsoft.com/expression/products/ Encoder4_Overview.aspx The free video encoding tool from Microsoft enables you to record your PC’s screen activity as well as webcam and audio.

This article is to help you start doing it on purpose. You have the opportunity to make people truly happy. There are relatively simple activities you can add to your everyday practice to greatly increase your chances of doing so. And your boss doesn’t even have to know. I’ve interviewed dozens of companies on how they “do UX” without a user experience designer on staff, and while the manner in which they do them varies, the techniques fall into three basic

in the next section). Design research is your opportunity to discover and investigate the general qualities of your users in order to better understand who you’re designing for. The common methods of conducting this kind of research are all about giving people the opportunity to share themselves with you through user interviews, observations and surveys. There’s an academic approach to doing this stuff that’s rigid, rigorous and aimed at 100 per cent accuracy.

“You don’t have to talk to every single person to gain some valuable insights” categories: design research, web analytics and usability testing. I’ll go into each of these in detail, providing advice on how to do them easily and inexpensively, and get powerful results. It all comes down to one thing: listening. To your users, to your coworkers, and to yourself.

Most of us don’t have the time for that. But there are shortcuts to get you most of the way there with far less effort: Feedback forms: Enable users to reach out to you from anywhere in the product. Perhaps they’ve spotted a bug (or what they think is a bug),

Design research

QuickTime X

www.apple.com/macosx/what-is-macosx/ quicktime.html This Mac app makes it easy to capture live audio and video from your built-in iSight camera, FireWire camcorder or microphone.

<prev

.net october 2010

First we need to ask the question, “What do our users actually need?” Not just what our companies need them to do for us, but what do we need to do for them? Who are our target customers and what is unique about them? What are the problems they’re currently facing that we could help relieve, and which problems are the most common? What is the environment in which they’re using our product, and how does it affect the way they use it? It may seem daunting to answer these questions when you have an existing user base of 100,000 people, or worse if you have only 100. But you don’t have to talk to every single person in order to gain some really valuable insights on the whole. While of course every individual is unique, you’d be surprised by the commonalities you’ll find across them – for the most part, we all have the same basic needs, constraints and worries. It’s your job to find out what those biggies are. This is meant to be qualitative; you aren’t looking for hard numbers here (I’ll address that

Understand analytics Web Analytics: An Hour a Day by Avinash Kaushik (bit.ly/9LMsuW) is a great introduction

have a new feature idea, or simply have a question about how something works. Giving them the opportunity to get in touch without having to exit the experience will make the feedback more salient and timely, and will probably also help them describe it better. You can put a simple form on your site that sends submissions to an email address, or you can use a service like Get Satisfaction or UserVoice (although leading your users to a third-party service might reduce the amount of feedback you receive). Log the requests you receive and use them to prioritise upcoming features. Also be sure to track the contact info of those who’ve requested it so you can keep in touch when the feature is ready to be used and tested. Open-ended surveys: If your product has a trial period or a subscription renewal process, now would be the time to find out what your customers really think of you. A survey doesn’t have to be expertly crafted to get great responses from it. The sticklers say that you should only have five or six questions with only one question (usually the last) as an open-ended multi-line text box, but remember that you aren’t trying to get statistically significant responses here. You want to hear from people in their own words, so give them the opportunity to do so. Put a link to a survey in a prominent and consistent location, or link to it in a mailing, in order to get as many responses as possible. SurveyMonkey, Wufoo and Kissinsights are some quick ways to get started. Email: Once a user has got in touch via a survey or a feedback form, now is your chance to get to know them better ... by emailing them back. They’ve told you what, now probe for why. Why is this feature necessary for them? Where have they seen it implemented elsewhere? Why do they

Click map Don’t attempt to second-guess your users: find out where they’re actually clicking on your website by using a service such as Crazy Egg (crazyegg.com). The results will almost certainly surprise you …

use your product in the first place? Ask as many questions as necessary to get at the underlying problem they’re facing, and how it’s relevant to what your company is trying to solve. Phone: When you come across a user who’s particularly vocal or intriguing, ask if they’d mind you scheduling a phone call. You won’t have to spend more than 15 or 20 minutes asking them those follow-up questions about their motivations and attitudes in order to gain a wealth of knowledge you wouldn’t have otherwise. Most people will be more than happy to help without incentive. Take copious notes or record the conversation if you can (with their explicit permission of course) – this stuff is gold.

Tools Remote usability testing The truth is, you can’t always get in the same room as your target users. But with a variety of new tools cropping up, it’s become easier (and more effective) than ever to conduct usability testing remotely via the web. Screen-sharing apps, such as GoToMeeting (gotomeeting.com), WebEx (webex.co.uk) and Adobe Connect (bit.ly/bRnhmN) are the most basic and dependable way to watch while a remote participant takes control of the mouse and keyboard. Many natively allow you to record the session, or you could use something like iShowU (www.shinywhitebox.com/home/home. html) to capture the screen activity and audio. OpenHallway (openhallway.com) is a selfmoderated tool, meaning that no moderator (aka you) is needed. You write up the instructions that you want participants to follow, send them a link, and they walk through the test at their own pace while the tool records their screen activity and audio, and packages it up for you to watch later. Usabilla (usabilla.com) is another selfmoderated tool that lets you gather feedback on pre-defined questions and shows visualisations of where people clicked.

FiveSecondTest (fivesecondtest.com) takes a different approach: users are asked to identify the most prominent elements of your interface after looking at it for only five seconds. You’ll probably be quite surprised by what they see. Online tools aren’t ideal: you can’t fully see expressions and body language; it’s much harder to internalise the findings when you aren’t in the same room; and you can’t ask probing follow-up questions if the test is self-moderated. Find more remote testing tools at remoteusability.com.

Remote viewing You can conduct usability testing sessions from afar with a screensharing app such as GoToMeeting

By capturing just a few good case studies, you’ll be able to understand the whole ecosystem in which your product is being used, not just the specific, current flaw in the design that people are complaining about. Iridesco, the maker of the billing and time-tracking web-app Harvest (getharvest.com), uses many of these techniques to continuously improve their product – they follow the Japanese philosophy of Kaizen, which focuses upon continuous improvement of processes. “We don’t just want to patch,” said co-founder Shawn Liu, “we want to address the core problem.” This might seem like a lot of new information, but the goal should be to make it as easy as possible on your users, not to make it as easy as possible for you. The fewer obstacles you put in their way to share, the more openly and frequently they will, and the more valuable anecdotes you’ll have at your fingertips when the time comes to advocate for the right design decision. For more on design research, see Observing the User Experience by Mike Kuniavsky (amzn.to/4FHczX).

Web analytics

Personal narratives are key for giving us context, but the reality is that people are very bad at telling you the truth about themselves. Put another way, we rarely understand ourselves. That does not invalidate everything you learned in design research; instead it just requires that you balance those qualitative findings with good, hard data. Web analytics are a quantitative way of answering the question: “What are our users actually doing?” Not just, “What are they saying they’re doing?”, but “What are we seeing them do with our product?” Data is a great weapon. Matthew Marco of NavigationArts (navigationarts.com) and formerly a visual designer leading the redesign of House. gov says, “Stats let me refute the client’s notion of how their constituents are behaving.” It’s far more effective to point to actual behaviour than to get in a never-ending battle against presumption. Remember: while web analytics answers the question of what users are doing, no amount of data will tell you why – that’s why you still need to actually talk to people. But

.net october 2010 53

next>

Paulina Maldonado

.net user–experience

Gather their thoughts An online survey can help you discover what your users really think of you. Services such as SurveyMonkey (surveymonkey.com) can do much of the grunt work for you

Measure it Statistics can help you overcome clients’ presumptions about client behaviour, says Matthew Marco

numbers can tell you where to start looking for answers, and that’s worth a whole lot. The most common way to collect data is with a service like Google Analytics, Omniture, Statcounter, Mint and others that track the activity on your website in a variety of different ways: page hits, unique visitors, average time on site, bounce rates, referring sites, referring keyword searches and so on. The charts, graphs and lists of all this rich information are yours for the learning. Use them to identify the recurrent usage patterns – when people are typically coming to the site, what pages they’re typically going to, what path of pages they’re usually following – and then to recognise the outlying behaviour. Does one

activity logs of your app to see where people are clicking and what screens they’re pulling up. If your product doesn’t currently allow for this, talk to your developers immediately about putting tracking in. Even if the analysis is difficult, there must be a trail of information for you and your team to follow, otherwise you’re at a dead-end.

Google Website Optimizer tests design variations of your webpages using an A/B or multivariate testing method (one or multiple variables). Different versions of the page get displayed to different users, and it works in the background without anyone knowing about it but you. The tool will help you determine the duration of the test based on your site traffic, and identifies which variation is most effective at achieving your goal. ABtests.com lets you share the results of your A/B tests (conducted elsewhere), and learn from the results of others. You can see the percentage improvement of one variation over the other, as well as browse the examples by page type (home page, landing page, product page and so on).

“The reality is that people are very bad at telling you the truth about themselves” page have way more visits than every other page in the site? Does one page have an inordinately high bounce rate? Do you have really low use on Mondays? Avoid the temptation to answer these questions with your assumptions; instead, get the findings down in writing and use them to inform your research and investigation. Keep in mind that while the aforementioned page stats are worth knowing, you aren’t learning which components on the page are being used, and how. There are lots of free and cheap measurement tools that get you a much deeper view into what people are doing: Crazy Egg overlays visualisations such as heatmaps on your pages to show where users are clicking. The Confetti feature lets you slice and dice those clicks based on a variety of facets such as referrers, search terms, operating system and browser. Clicktale records full browsing sessions that enable you to replay your users’ every mouse movement, click and keystroke. It also tracks how far down the page your users scroll, the performance of your web forms, and other in-depth functionality for a price.

<prev

.net october 2010

If the product you work on is not web-based, don’t fret. You might not get the pretty pictures automatically generated for you (at least not for free), but you can still rummage through the

Usability testing

Usability testing is the final technique I urge you to bring into your arsenal. In the most basic terms, it’s the act of evaluating whether the design of your product successfully enables people to accomplish the intended tasks. This answers the question, “How well does our stuff actually work?” And if you don’t know the answer to that, you don’t really know much about your product, do you? Quite often, usability testing is referred to as “user testing” instead, and it’s a phrasing I want to dissuade you from perpetuating. It may seem like I’m splitting hairs, but the way in which the exercise is perceived – both by your organisation and by your participants – will change dramatically. You aren’t testing your users; you’re testing the usability of your design. It’s a major semantic difference that needs to be popularised.

Above left Iridesco, makers of billing and time tracking app Harvest (getharvest.com), aims at continuous improvement of its processes Right A simple survey that trial users of Harvest are encouraged to complete to share their first experiences

Case study McGill University Sorin Stefan Job UX designer Website myintuition.ca Twitter @sorinstefan

Sorin Stefan is a front-end engineer at McGill University and a team of one. Recently tasked with implementing a redesign for McGill’s Human Resources department, Stefan was given a template that its steering committee had created on their own, without any supporting data. He took one look at it and said: “No”. He told the administrators that they needed to take a step back. “I don’t care how it’s going to look,” said Stefan. “I need the information to guide me on how it’s going to work.” Stefan guided them through the process they’d use. First he asked, “What are the goals for the redesign?” and urged the committee to articulate exactly what they were trying to achieve so he could devise the appropriate solution from there. Next he asked, “Who is visiting your site?” He looked into their Urchin data (self-hosted Google Analytics, used for privacy reasons) and saw that

You may have heard of usability testing, but how many of you are actually doing it on a regular basis? Sometimes it just seems so involved, so costly. Many UX folk advocate for usability testing in formal labs with one-way mirrors and fancy A/V equipment. I assure you, none of this is necessary. If your product has any users at all, then your company has access to them, somehow someway. But maybe your manager isn’t so keen on you taking time out of your schedule to do this work, or maybe the sales team with the customer data just won’t return your calls. Not to worry! You don’t really need to do usability testing with your existing users in order for it to be valid. Start with a friend you can rely on for honesty. Academics may tell you that using the same participants again and again will confound your

Share the knowledge A/B tests are a great way to understand user behaviour. ABtests.com lets you share the results of your tests and learn from the results of others

90 per cent of the visits to the HR website were from inside the university. And the most visited page by far, was the ‘Positions available’ page. Having that knowledge allowed him to make a strong argument against their initial claim that students were a target audience of the site. Then to answer the question, “What isn’t working on the site today?”, Stefan conducted a usability test of the existing site with 10 students and 35 staff members. He gathered their reactions not only to better understand what needed to be fixed, but also as a benchmark to be used against the new design to later prove the value of his process. Lastly Stefan needed to determine, “What does our target user really need?” He interviewed the staff and he created a persona based on the themes he heard across the interviews and extracted the scenarios in which they’d use the new site. His process, simple and efficient, resulted in a much cleaner and more effective Human Resources website. Information is chunked based on how people try to find it, and the navigation labels match the terminology that people actually use. Best of all, the look and feel of the new site is very similar to that of the old, so it doesn’t feel like a jarring change.

findings, but I say some data is better than no data at all. You need a pressure tester, and using someone you trust is a great way to start. Most of us are designing systems meant for people with average tech savviness and average intelligence to accomplish average, everyday tasks. Of course, if you’re working on an expert system, like a customer service call centre desktop app or a car manufacturer web app, or designing products for kids, it’s obviously worth testing with participants drawn from your target audiences. Otherwise, I stand by my premise that conducting usability testing with basically anyone is totally fine. The best participants are folks who work in your office but don’t work on the product: the receptionist, anyone from human resources, guys in the mailroom. Just ask for five minutes of their time. If you’d rather go outside of the company, you can always find willing individuals on Twitter (who’ll be more than willing to look at your stuff if you look at theirs) or sitting around at your local Starbucks (who’ll be more than willing to look at your stuff for a refill on their latté). Consider using a process I like to call Usability Testing Light. Sitting side-by-side with your participant, show them build, or a prototype, a comp, a wireframe, a sketch – whatever you have available to you – and start by asking one simple question: “What does this do?” People’s answers will probably knock you off your chair, but do your best to maintain your composure. Whatever you do, don’t give them the answer. Don’t talk at all, just ask the question and then shut up and listen. Don’t settle for their kindness. The guys at Iridesco say, “‘It looks good’ is the worst feedback we can get.” Encourage harshness. Using the same people time and again can help because they’ll

How-to guide Jeffrey Rubin and Dana Chisnell’s Handbook of Usability Testing is a great guide to the subject

learn not to be afraid to speak their mind, so make sure you prompt new participants to do the same. Give participants one task at a time: for example, “Add a new bank account”, or “Find all yellow dresses”. Ask them to walk you through how they’d go about achieving it, using the keyboard and mouse if you have a functional or semi-functional prototype, or just using their finger if you’re working on paper. Either way, they must think aloud as they are going through it. If they get quiet, gently remind them to tell you what they’re thinking, or just ask, “Why did you do that?” Two things: 1) This is going to hurt; 2) You’ll be better for it. It might be hard to stomach that you and your team created something that doesn’t work on your first try, but none of us should be expected to be mind-reading geniuses. Instead, take solace in the fact that you’re doing the right thing by testing it in order to make it better. Most of all, learn to acknowledge your poor design choices. “You need to have humility and listen,” says Iridesco. “Users aren’t always right, but you need to hear them.” It’s our job to design the product, not theirs; but to do so, we need to understand where they’re struggling and why. Ultimately, nurturing our humility is what we all need to do.

Key takeaways

If you forget everything you’ve read in this article, I want you to remember this list: Always listen Ask questions to get to underlying problems Use data and anecdotes to inform the design Test your designs and have the humility to admit you’re wrong Complete the feedback loop Never stop trying to make things better I can promise you one thing: If you make your users happy, they will thank you. And being appreciated for what you do makes all this work worth it. Go do it yourself and find out. What have you done to improve your user experience? Share your views at forum.netmag.co.uk

.net october 2010 55

.net online

catch the team on the .net forum/ add us to your RSS reader/subscribe to the magazine/get the latest features and tutorials/enjoy the website

The world’s best-selling magazine for web designers and developers also has a website, where you can find a host of great features and tutorials. You’ll find a selection of the best articles to appear in .net, as well as extended

visit us online today at

versions of interviews and Q&As. You can also access the latest subscription offers online, and learn more about what the latest issue has in store. As well as a bucketload of great articles, .net also boasts a thriving forum,

www.netmag.co.uk 56

.net october 2010

which continues to provide visitors with help, advice and random jibber jabber. And if you’d like to catch up with the latest links in the magazine, visit our delicious page at delicious.com/ netmag. Enjoy!

Live the designer lifestyle Host multiple websites with a Virtual Private Server from Webfusion

GET ONE MONTH FREE WITH A ONE YEAR PLAN

Virtual Private Server Available in

Windows

Linux

•

Mega-fast processing speeds

•

Unlimited bandwidth

•

No fuss 30 day money back guarantee

•

Full root access – install anything you like

•

Easy access, with a Plesk 9.5 control panel

•

24 hour UK support, 365 days a year

STARTING FROM ONLY

19.99

A MONTH

Call our expert sales team today on 0800 0317 800 Or visit us online at www.webfusion.co.uk

Win £10,000

Enter the world’s leading photography competition www.poty2010.com Open to all levels of ability Partners:

Win up to £10,000

New portfolio category

Global exposure

.net showcase

showcase

This month’s selection of sublime design and creative opinion

(below) Gallery/ CMS p66 Patrick McNeil – “While the topic is simple, organising such data can be a daunting task”

(top & above) Focus_ on/Back to nature p70 Patrick McNeil – “Leverage the appeal of nature while maintaining a tight web focus”

(above) Gallery/ CMS p66 Patrick McNeil – “What fascinates me most about the design is all the attention to detail”

This month >

Gallery

The best new websites in the following categories: CSS, HTML5, JavaScript, plug-ins, CMS and mobile

Proﬁle/Brass

Focus–on/ Back to nature

(left) Gallery/HTML5 p63 Rich Clark – “It’s possible to adjust the levels, white balance, exposure and contrast of an image”

Brass is a full-service agency that truly understands the internet. Dan Oliver chats to the team about how they keep their clients happy

Don’t miss an issue >

Natural elements can help your design theme stand out – but don’t go overboard, says Patrick McNeil

Opinion/Designing for kids

When building websites for the under-12s, there are a number of speciﬁc challenges you need to consider, says Olivia Dickinson

y: Subscribe toda 40 ge pa to turn

(above) Opinion/ Designing for kids p72 Olivia Dickinson – “It’s time to look at creating sticky, engaging content”

.net october 2010

.net showcase gallery

highlights… 61

Mobile > A look at the latest on-the-go sites from YouTube, Broadcast Music, Inc and ProductiveDreams

Our experts reveal this month’s hottest new websites Nick Francis Mobile Nick creates websites at Project83, a design agency in Nashville, Tennessee. In 2008 he and his partners set up mobileawesomeness. com, which features the best in mobile web design inspiration and helpful resources for mobile developers. project83.com

Rich Clark HTML5 Rich is head of interactive at KMP Digitata, a digital agency based in Manchester. He’s the founder and curator of HTML5 Gallery (www.html5gallery. com) and editor and author for HTML5 Doctor (www.html5doctor.com). richclarkdesign.com

Paul Wyatt Plug-ins Paul Wyatt is an award-winning digital designer and writer. He’s produced websites, print and animated creative for clients such as Adobe, Virgin Media, PlayStation, 2Entertain, D&AD, the BBC, Smirnoff and British Airways. paulwyatt.co.uk

.net october 2010

CSS > The Kaleidoscope app, contextual feedback from Notable and the website of copywriter D Bnonn Tennant

Inayaili de León CSS Inayaili is a Londonbased Portuguese web designer. When she’s not designing sites or coding clean, semantic HTML and CSS, she’s writing about it on her blog. She works at FoxLand (www.fox-land.co.uk) and has an unhealthy fascination with cats. yaili.com

The New Adventures in Web Design Conference, MugTug Darkroom and Newsweek make creative use of HTML5

Plug-ins > A visual experience from Concepd, 30ml’s quirky claymation and tracking your popularity with The Inﬂuence Project

Patrick McNeil CMS Patrick is a developer, designer and writer currently working for SimpleFlame, a company focused on implementing Adobe’s Business Catalyst-based websites. He also runs the web design blog Design Meltdown. designmeltdown.com

JavaScript > Clever JavaScript resources from jsPerf, Studio SketchPad and Script Junkie

Remy Sharp JavaScript Remy is a developer who loves his JavaScript. He runs UK JavaScript conference Full Frontal (full-frontal.org); blogs on JavaScript for HTML5 Doctor (html5doctor.com); and is a jQuery team member. Did we mention he’s keen as mustard on his JavaScript? remysharp.com

HTML5 >

CMS > Great examples of what you can do with the Movable Type, Textpattern and WordPress CMSes

.net showcase gallery

gallery Mobile

Nick Francis “The focus of the design was usability, keeping the content front-and-centre and making it easy for users to navigate into the various sections of BMI. com,” says Eric Miller. The team at BMI and Mokolabs handled the development side, using the jQTouch plug-in for the jQuery framework working within the site’s existing CMS. Tens of thousands of visitors on a variety of mobile devices have been to the site in the short time it’s been live, and the traffic continues to grow.

ProductiveDreams

Mobile site of the month

(4) ProductiveDreams (www.productivedreams. com), the site of designer and blogger Gopal Raju, is a good example of the situation most web professionals find themselves in. They can’t justify going all-out on a mobile site, so they opt to build a mobile experience using separate style sheets. It’s a great way to stick your toes into mobile web design. According to Raju, the mobile site has been well received and continues to grow over time. “Around 10-15 per cent of the ProductiveDreams traffic is derived from the mobile users,” he says. Raju does a nice job bringing the desktop look and feel to the mobile browser. It’s easy to browse posts, make comments and touch base. My only suggestion for the site would be to add search functionality, but otherwise it’s very well done.

YouTube

(1-2) The latest version of YouTube’s mobile website (m.youtube.com) launched in early July and it doesn’t disappoint. It follows the trend of Google developing mobile apps for the web browser rather than native operating systems. This strategy makes sense: Google has complete control over the app; new features on the full site will be easier to implement for mobile devices; and a single codebase can cover most modern operating systems. Any phone with an HTML5 browser can experience YouTube in all its glory. Using the site, it’s clear that Google has focused most of its efforts on making the experience fast and touch-friendly. Buttons throughout are easy to press. Thanks to HTML5, the videos are extremely quick to load and boast outstanding quality. The mobile site blows the doors off the native iPhone app in terms of both speed and functionality. YouTube’s mobile playbacks have grown by 160 per cent over the past year, and the service is now streaming over 100million plays per day. For a demo of the new site, check out bit.ly/cRUOTa.

BMI

(3) BMI (Broadcast Music, Inc) is an organisation that collects licence fees on behalf of songwriters, composers and music publishers. Since a good portion of its membership is on the go, BMI has made its award-winning website a priority. The mobile site (www.bmi.com/mobile) is optimised for a consistent visual experience on iOS, Android, Palm, Symbian and BlackBerry devices. Brooklyn-based agency Eric Miller Design (ericmillerdesign.com) created the site design, while other members of their team implemented it with jQTouch (www.jqtouch.com) and the existing content management system ExpressionEngine.

“Around 10-15 per cent of the trafﬁc is derived from the mobile users” Gopal Raju

.net october 2010 61

next>

.net showcase gallery

gallery CSS

Inayaili de León

“The focus of the site is legibility. Its style is inﬂuenced heavily by classical typography”

CSS site of the month

D Bnonn Tennant

Kaleidoscope

(1) Kaleidoscope (www.kaleidoscopeapp.com) is an app that enables you to spot the differences between text and image files. Its stunning accompanying website delights the visitor with a carefully crafted layout, subtly making use of some of the latest CSS techniques. As Jorn van Dijk of Sofa (www.madebysofa.com) – which created the app – explains, these techniques were regarded as “merely tools to get a concept working”. Everything falls into place in the design, which guides us nicely through the app’s features. Using text-shadow, CSS3 gradients and border-radius, it’s within the app’s logo that we find a nice and unexpected Easter egg: if you look at it for a few seconds, you may (hardly) notice that its colours are moving in a circular way. With just a few lines of code, this is done entirely via CSS3 animations. “The animated logo concept turned out as a nice extra touch,” adds van Dijk.

Notable

(2) Created by the interaction design and strategy agency ZURB (www.zurb.com), Notable (www.notableapp.com) makes it easy to trade specific and contextual feedback about a website with others: you can add, edit and comment on annotations to a website’s screenshot. The annotation overlays, in which the notes are created and edited, were made using some clever CSS techniques. “Border-image and border-radius saved us tons of pain and time when creating the slick annotation feature,” says ZURB’s Jonathan Smiley. The app also takes advantage of other CSS techniques, such as box-shadow and RGBA colours. ZURB has even gone to the trouble of writing a tutorial on its blog on how to replicate this effect (www.zurb.com/playground/awesome-overlays).

<prev

.net october 2010

Information Highwayman

(3) Information Highwayman (informationhigh wayman.com) is the online home of copywriter D Bnonn Tennant. Clever in his use of words, Tennant also presents us with an elegant design that enables the copy to take the main stage. “The focus of the site is legibility,” says the designer. “Its style is influenced heavily by classical typography, and to that end I’ve used a lot of small caps, drop caps, italics and the best ampersands I could find.” Besides the subtle typographical CSS techniques, the site also uses box-shadow and CSS3 transitions on the focus state of the contact form fields. It also relies on @font-face to deliver the gorgeous font Justus (freely available on Font Squirrel), but its use wasn’t without a few glitches. “Implementing @font-face to display the correct styles and variants consistently across browsers was challenging,” says Tennant.

.net showcase gallery

gallery HTML5

Rich Clark

adding metadata via attributes), which create a machine-readable way for data to be extracted from the page for search engines.

HTML5 site of the month

New Adventures in Web Design Conference (4) The New Adventures in Web Design conference will take place in Nottingham in early 2011 (newadventuresconf.com). A one-day, single-track conference hosted by the talented Simon Collison, it promises to look at the future of the web and push the boundaries of what’s possible online, so it’s no surprise to see that the site’s built with HTML5. “Everybody should be using HTML5 in 2010,” says Collison. “I had a sense that to build in XHTML would be a failure somehow, especially for a forward-thinking web conference site.” Looking under the hood, we see plenty of fresh semantics in there, with new sectioning and flow elements contained. Collison explains a little about his experience of using HTML5. “The tiny doctype is a joy, as is dropping attributes such as type=“text/ css” and type=“javascript”. My head is smaller, so to speak. It took me a while to work out exactly how to use <section>, <article> and so on, but in 2010 it’s all becoming a bit clearer, and the advice seems a little more clear around when to use certain things.” With some lovely CSS3 touches, too, the site shows how you can use new technologies now to create beautiful, engaging websites.

“I had a sense that to build in XHTML would be a failure somehow” Simon Collison

Mugtug Darkroom

(1-2) Mugtug Darkroom (mugtug.com/darkroom) is a fully featured online solution for image editing, organisation and sharing. Released at the Google I/O conference earlier this year, developers Orange Honey said it “utilises the HTML5 canvas standard to work across major browsers without software downloads or Flash requirements”. A major reason for using <canvas> was the “increasing popularity of mobile devices that don’t support Flash”. The feature set is wide-ranging, giving users the ability to rotate, flip and mirror images. It’s also possible to adjust the levels, white balance, exposure and contrast of an image. There are options for creating effects to make an image black and white, or to automatically show colour blindness variations, which is useful for testing your site designs. An undo option is included to revert any changes, and you can upload your own images or select from a URL. Most importantly, once you’ve finished editing, you can save your image to either your Mugtug account or to your desktop. Mugtug has also released Sketchpad (mugtug. com/sketchpad), an online drawing and painting app that also uses <canvas>. So there you have it: two applications built from the ground up using web standards – a true triumph for the open web.

Newsweek

(3) You know the future is now when a site as large and popular as Newsweek (www.newsweek.com), owned by MSNBC, starts to develop in HTML5. The site began dipping its toes in the water by changing to the HTML5 doctype. The developers have since gone ahead and added structural elements such as <section>, <nav> and <article>. Interestingly, they’ve started using custom data attributes, which are used to store private custom data in the page. Also included are RDFa properties (another semantic web specification used for

.net october 2010 63

next>

.net showcase gallery

gallery JavaScript

Remy Sharp

JavaScript site of the month

jsPerf

(1) Front-end performance is the new black. There are lots of great resources around explaining how to configure your web server for maximum performance, how to write compact HTML and CSS, and what to do with stylesheets, images and scripts so they don’t block page rendering. And tools such as YSlow enable you easily to detect performance woes in your website. However, none of these tools seem to analyse the actual JavaScript code you’re using. Not until now, that is. Enter Mathias Bynens’ jsPerf (jsPerf.com), which he likes to call a “JavaScript performance playground”. Just enter any number of code snippets you’d like to measure the performance of, and jsPerf will generate a test case for you that can be used across browsers and devices. Sharing these test cases with other people is as easy as giving them a URL and, since all jsPerf test cases are public, other people might ‘fork’ yours and add even more alternatives.

Studio SketchPad

(2-3) Studio SketchPad (sketchpad.cc) is an amalgamation of Etherpad, a collaborative open source notepad app, and Processing.js (the JavaScript implementation of the Processing language for animation). The net result is a tool that enables you to collaboratively mock together Processing.js scripts and then easily and quickly preview the result of your script.

<prev

.net october 2010

Where SketchPad comes into its own is in making use of Etherpad’s history timeline. A complete history of the script is stored during its development. Equally, each time you render the script, a marker is captured. This means that anyone can watch and replay the entire development cycle, while also getting the rendered view updated as the script progresses. It’s great for playing, collaborating, teaching and learning.

Script Junkie

(4) Rey Bango, lead evangelist of jQuery, recently joined Microsoft and is now the curator of Script Junkie (msdn.microsoft.com/en-us/scriptjunkie), a resource to help web developers gain the knowledge needed to build cross-browser compatible websites. “Since launching in early June, the site has received incredibly positive feedback,” says Bango. “This is due, in no small part, to the professional content provided by contributors such as Christian Heilmann, Elijah Manor, Emily Lewis, Juriy Zaytsev and other industry notables. We hope that Script Junkie is viewed as a great community resource for expanding and sharing knowledge about scripting, HTML and CSS.” Script Junkie is still young but it’s already produced a reasonably sized collection of well-written articles focused on the open web technologies by, as Bango puts it, industry notables – developers in the trenches.

“We hope that Script Junkie is viewed as a great community resource” Rey Bango

.net showcase gallery

gallery Plug-ins

Paul Wyatt

Plug-ins site of the month

Concepd

(1-2) Concepd (concepd.com) is the work of Parisbased designer and programmer Thomoglou Panagiotis. In his words, he’s created the internet’s first ever “web sight” – a virtual online gallery of work. Concepd provides the user with a totally visual experience, a trip for both the mind and the eye, spread between the digital and physical world. “This ‘sight’ acknowledges the internet as a medium where culture is permanently stored into a form of global consciousness, equally accessible by anybody at any time,” Panagiotis explains. “Concepd pays tribute to the future ramifications of such a significant advancement.” We’re not quite sure what that means, either, but a visit to the site will take you to a Flash-based virtual gallery space with impressive content, animations that are the business and some nifty

3D work. It will inspire you to want to make something equally cool and uniquely odd. It’s all excellently put together in Flash, which Panagiotis admits he used because he “didn’t really have a choice!” There was nothing else on the market that offered the flexibility he needed to combine photographic, 3D and animated content. “It was impossible to do this with any other technology,” he says.

more attention your URL receives – through your self-publicity – the larger your picture will appear on the site. In the November edition of Fast Company, each photo will be used as part of a photo spread. Flash is used as the aggregator, which displays an individual’s image and their influence rank in several different modes. Why not give it a try? As the tagline says: “You are more influential than you think.”

The Inﬂuence Project

30ml

(3) Self-obsession is the drug of choice for the 21st century. Hooray, then, for The Influence Project (influenceproject.fastcompany.com), a site that will feed anyone in need of virtual attention. Creative production studio Mekanism and business magazine Fast Company have come together to find 2010’s most influential person online. Online influence is defined as being able to affect the behaviour “of those you interact with and to get others in your social network to act on a suggestion or recommendation”. Upon registering and uploading your photo to the website, you’re given a unique URL. The

(4) Old-school techniques have a habit of charming us. Use one for kicks and giggles on a website and your audience will respond with favourable ‘oohs’ and ‘ahhs’. 30ml (www.30ml.com) is the folio site of art director Yu Yong and pulls the claymation stop-motion trick out of the bag using a digital camera and Flash. Against my better judgement, it hooked me in, and it works extremely well. The clay blobs are fun to play with and it’s colourful and interesting, with some great work on show. After a visit to this quirky and horrifically adorable site, you’ll be reaching for a tub of Play-Doh to try your hand at your own version.

“The internet makes culture equally accessible by anybody at any time”

Thomoglou Panagiotis

.net october 2010 65

next>

.net showcase gallery

Want to see your work here?

gallery CMS

Think your work should be in Gallery? Tell us about it at netmag@futurenet.com

Patrick McNeil

“The secret sauce is its navigability. It’s easy to ﬁnd any recipe on the site”

CMS site of the month

Elise Bauer

Simply Recipes

(1-2) The more complex and specific the data set is, the harder it can be to make a CMS work, which is why Simply Recipes (SimplyRecipes.com) is our CMS site of the month. Not only is it beautifully designed and extremely well organised, but it’s built on a CMS, Movable Type, that makes maintenance a breeze for the site owners. While the topic is simple, organising such data can be a daunting task – recipes are the type of thing that can be sorted in many ways. The site, built by Elise Bauer and Jesse Gardner, does a great job of boiling it down to the most critical methods. Sometimes content has specific bits of data that need to be entered. This site does a great job of making it feel fully integrated and not as though the CMS was forced to do something it wasn’t set up for. A nice example of this is the printable recipe. “The secret sauce of my site is its navigability,” says Elise Bauer. “It’s easy to find any recipe on the site.”

<prev

.net october 2010

Rather Splendid

(3) Rather Splendid (RatherSplendid.net) is the personal blog of Zander Martineau – designed and built by him on Textpattern. This minimalistic blog has depth far beyond its simple visuals. The most striking aspect of the design is its layout, which involves blog posts being listed in two columns on the homepage. This type of structure is hard to build for, and even harder to make usable, rendering this site all the more impressive. The site loads content beautifully, with a subtle fluidity that’s not easily achieved. In particular, you’ll notice this as you scroll through the homepage and in the way comments load up on sub-pages.

Branded07

(4-5) Built in WordPress, Branded07 (Branded07. com) serves as a fantastic example of how elegant a blog can be. This beautiful site, designed by Rob Palmer, is clean and devoid of clutter. What fascinates me most about the design, though, is all the attention to detail. Take, for example, the simple blog search form. Not only does it occupy an odd location, but it’s designed in a far more interesting way than a simple box. The precision and elegance extends to many elements, such as the buttons, illustrations and even the pagination. It’s just a WordPress skin that’s wonderfully executed. Throughout the site, you’ll find layouts tailored to the content. With a CMS, it can be tempting to have a single layout that all content flows into, but here each page feels as though it’s had special consideration to ensure its proper delivery. l

Stop coding Start designing

Turn your Photoshop® design in to a website without coding. BaseKit is a smart and fast way to create sites from a Photoshop® design or design template without coding. BaseKit simpliﬁes your work ﬂow by letting you design without interruption and edit in real-time. Code free, hassle free, BaseKit does not require any download or installation - set-up is a breeze and can be done in minutes. BaseKit lets you do more in less time at an affordable cost. And with ready-to-use features from contact forms to social networking adding functionality is as easy as point, click, drag and drop.

Get a free ‘Plus’ account for 6 months at www.basekit.com/netmag using voucher code ‘netmag’

.net showcase proﬁle

profile

Brass

Brass is a full-service agency that truly understands digital. Dan Oliver chats to Paul Mallett, Andrew Brown and the design and technical team about how they keep their clients happy

www.brassagency.com Agency location Leeds Team 180 Expertise Online strategy, online media planning and buying, website design and development, search marketing – natural and PPC, email marketing and eCRM, online PR and link building, online sales promotion, accessibility and DDA compliance, web hosting, content management, viral marketing, ecommerce, analytics, usability research, mobile and motion graphics Established 1983 Clients First Direct, Ribena, Seven Seas, Horlicks, Warburtons, UKTI, Schwarzkopf, Department for Education, Jacuzzi, Persimmon, learndirect, Yorkshire Building Society

digital divisions. We’re different because at the heart of our full service agency is a beating digital heart that really understands the internet. Almost all the work we do now requires some aspect of digital integration, whether it’s a fully integrated campaign or just has a digital requirement. We really get it. We’re also applying some of the digital thinking in terms of metrics to all our work, so we can provide real, proven return on investment.

Q&A .net: What’s the story behind your recent merger? PM: Four years ago, Swamp was acquired by Brahm, one of the largest independent agencies outside London. This created a team of more than 50 digital specialists and integrated Swamp into a company with 180 staff, covering everything to do with marketing and communications. The boundaries between ‘traditional’ marketing and digital marketing have blurred and clients are now looking for digital solutions to be central to their strategies. So, earlier this year we set out to reorganise the way the agency was set up, with a structure that made things much clearer and simpler for clients. With that came a single brand, Brass.

.net: What’s exciting you most in the world of web design at the moment? Chris Kemm: IE9 supporting CSS3 and HTML5. We also love lots of Projector’s UNIqLO work (www.projector.jp), the quality writing from themechanism.com and Süperfad’s work for people such as Sprint (www.superfad.com). .net: How do you foster good client relationships? AB: Be relevant, be visible and be timely. Digital technology has made it much easier to forge strong client relationships if it’s used appropriately. Ensure you’re there, either on the phone or at their office. Don’t press Send and think the job’s done. And always put yourself in your client’s shoes to understand their world.

.net: Which areas do you specialise in? AB: We’re full service, so everything from web design to media planning and buying, online PR, SEO and content management. We’re particularly strong across FMCG (fast moving consumer goods) and government sectors.

.net: You boast a number of different services. How do you tackle the requirements of a new project? PM: The rebrand gave us the opportunity to reorganise the way the agency was set up. It’s now centred around four key hubs of activity: Explore, Create, Connect and Invent. From these hubs we assemble multi-disciplinary teams that can think across different communication channels and platforms. We always start by focusing on the customer journey: identifying what motivates them and what makes them act differently to help us develop campaigns that influence the decisionmaking process at every stage.

.net: What sets you apart from other agencies? AB: A lot of large full-service or above-the-line agencies have had a hard time developing their

.net: You have a particularly good blog. How do you go about producing/choosing articles? PM: We’re lucky to have a team of experts with a diverse range of specialist knowledge areas who we can call upon to write blog posts for us depending on the topic we’ve got in mind. Our content plan is based on search volumes and on monitoring conversations, both online and offline. Also, we are dead funny.

L-r: James Pierechod, Alex Wellard (glasses), Mark Daws (beard), Joy Schofield, Matt Bullock, Jim Wheatley, Paul Mallett (managing partner), Martin Delin, Andrew Brown (creative director), Chris Kemm, George Hurrell, Nicola Owen

68 .net october 2010

.net: If you had to choose one tool that you couldn’t live without, what would it be? PM: Google’s Keyword Tool, every time. It’s the first place we start in our ‘explore’ activity when we receive client briefs.

.net showcase proﬁle

“We always start by focusing on the customer journey” Paul Mallett 1

.net: Which part of the design process do you think is the most overlooked? James Pierechod: To create something original and impressive it’s really important that we designers bring our own personality into our work. Spending time taking designs and clients in unexpected directions can uncover serendipitous results that can really make a final design. Plus, don’t be scared to throw things away and start again. .net: How do you keep clients happy? PM: By delivering effective work that meets their objectives. ‘Effectiveness’ can manifest itself in many different ways but essentially it comes down to tangible ROI that clients can communicate to their board to demonstrate ‘effective’ marketing spend. .net: Do you have anything exciting you’re currently working on, which you’d like to tell our readers about? Mark Daws: We’re currently working with Ribena, as part of a wider agency team, to deliver a major campaign bringing alive the fact that Ribena really is made from blackcurrants grown on British farms. We’re delivering a full range of activity across all major social media channels including Facebook, Twitter, YouTube, Flickr and the Ribena blog (blog. ribena.co.uk). .net: Facebook: good or evil? PM: Good, as long as it’s used in the right way! Brands need to have comprehensive social media guidelines in place and an effective engagement strategy. It’s about knowing what you want to say and why you want to say it, and engaging in a genuine two-way dialogue. Brands shouldn’t be on Facebook just for the sake of it but offer authentic conversation and content. l

6 7

(1) We’ve been working on our own site, which launched with the rebrand (www.brassagency.com). It runs on our own custom CMS in .NET. We’ve used jquery and CSS3 to add little touches throughout and also used the YouTube API to build a custom YouTube player, which sits alongside our brand guidelines. (2) Our work for the DfE (Department for Education), formerly the DCSF (Department for Children, Schools and Families), includes insight gathering to meet the requirements of government policies, digital strategy, online media, large scale web development, content generation and editorial services. Recently we completed the YPi project

– an in-depth, three-year consultation to help inform how the government connects with young people in the digital world. (3-4) Schwarzkopf briefed us to launch got2b (www. youtube.com/got2bUK), its new line of hair styling products aimed at a young and extrovert audience who live online. It was a huge opportunity to work with one of the world’s largest haircare brands. We found a brand advocate our core audience could relate to and generated word of mouth through an extremely cost-effective viral campaign. Our bespoke parkour and hairstyling videos got 85,000 hits on YouTube in the first month. (5-6) First Direct (live.firstdirect. com) came to us looking

for a fresh and innovative way to present its brand. We worked as part of an integrated agency team to develop an innovative solution called ‘Live’, which uses real-time Twitter feeds on the First Direct website to create complete brand transparency. It was a courageous step for any company, let alone a bank, and was awarded an econsultancy innovation award. (7) One of the biggest fashion brands on ASOS, Aqua (facebook.com/pages/ AquabyAqua/1109485 75598304) needed to create noise online about the launch of its new London store. We developed a social media strategy to engage with fans and drive footfall to the store.

.net october 2010 69

.net showcase focus_on

ffocus_on

Back to nature Natural elements can help your design theme stand out, says Patrick McNeil – but don’t go overboard

One of the most common patterns in web page design is the use of nature. The employment of nature-themed elements has many uses and purposes. Perhaps the most common is to set a relaxing and reassuring mood or atmosphere for the site. One of the biggest pitfalls designers run into is to get obsessed with the visuals and forget all about usability. The key is to leverage the visual appeal of nature while maintaining a tight web focus, a task that all the sites featured on this page have succeeded admirably in. For example, just because you feature leaves in your design doesn’t mean every last button or navigation has to become a leaf! A related problem is the creation of interfaces for the sole purpose of bringing the theme to life. This approach almost always leads to heavy use of Flash and again usability is often left behind. I’d encourage you instead to balance the undeniable aesthetic appeal of natural elements with a heavy dose of restraint and usability. While I’m on a rant, I’ll throw in one more prickly point. Please, oh please, leave out the lame stock photos – especially the ones of hands holding dirt with a little plant growing out of it. ‘Lame’ and ‘over-used’ are words that spring to mind. This will be my last Focus On article for the time being, although I’ll still be serving as a judge for the .net Awards (www.thenetawards.com). I sincerely appreciate the opportunity writing for .net has afforded me over the years. It’s been a blast! ●

Patrick’s latest book, The Web Designer’s Idea Book Volume 2, is reviewed on page 30, plus there’s a sample PDF on the CD (see page 128) Patrick McNeil is a freelance web designer, developer and writer. His website, www.designmeltdown.com, reviews various patterns and trends in contemporary online design.

“The key is to leverage nature while maintaining a web focus”

Patrick McNeil

.net october 2010

(1) Blue Sky Resumes is a team based in New York that craft compelling CVs for their customers. The fun design of their site (www.blueskyresumes. com) makes the obvious connection to the company name without falling into a trap in which everything becomes a cloud! A nice mix of thematic and ‘normal’ elements. (2) Ecoki is an iPhone reader, and its site (ecoki.com/iphone) uses a beautiful vista to

great effect. The bulk of the imagery is contained in the background, making the site a lot less complicated to implement or maintain. (3) Another iPhone app, Go Nutty is a fun game featuring a cute squirrel. What I love about its website (www.goinnutty. com) is that the designers decided to use illustration instead of photography; this gives the site a far more distinct and unique look. (4) The website of

user experience agency Lift (liftux.com) demonstrates how a dash of theme can go a long way. Rather than beat the theme to death, it’s contained in a single image that sets a fun mood. (5) Just Made My Day (justmademyday.com) is a place on the web where people can share stories about the nice things others have done for them. In this case, the thematic design connects to the concept behind the site beautifully.

We need a compliant server “ and storage solution that won’t let us down” Hostway understand the need for high performance dedicated or managed hosting solutions for business. If you’ve got sensitive data that you can’t afford to lose, the hosting has to work and continue to work day in day out, no excuses! We use our expertise to deliver ﬂexible, scalable, on-demand solutions to our customers. Strong competencies in both solutions-design and server management mean that we deal comfortably with larger, more complex projects. If it’s important to you, it’s important to us!

at Hostway it’s personal Call us today and talk to one of our experts

0808 180 1880 or visit us online at www.hostway.co.uk

Domain Registration • Email Hosting • Web Hosting • Ecommerce • VPS • Dedicated Servers • Enterprise Managed Hosting Call us free on 0808 180 1880 • sales@hostway.co.uk • www.hostway.co.uk Hostway are proud partners with:

.net showcase opinion

Olivia Dickinson on…

Designing sites for kids

When building websites for the under-12s, there are a number of speciﬁc challenges you need to consider, says Olivia Dickinson of Nickelodeon UK Every site needs to be designed with an audience in mind, and designing for children is no exception. The first thing you need to consider is age and gender. For example, one of the bigger challenges in designing a website for seven to 12-year-olds is ensuring that the youngest boys, who don’t like to read, are as enthralled by the site as tween girls, who are probably already using Twitter. In general, when creating online content for under-12s, keep it simple – this age group doesn’t always get wordplay and they don’t like ‘hidden’ content or websites trying to be clever. The main driver to go online is playing games and they like lots of them, readily available. The under-nines are often character and TV-show led – favourite cartoons or TV characters are their ‘way in’ for navigation.

“The main driver to go online is playing games. They like lots of them, readily available” Olivia Dickinson

.net october 2010

Kids’ sites for over-sevens can be aspirational – which will appeal particularly to older tween girls – but still need bold imagery and to-the-point navigation (preferably one-word calls to action) to ensure younger children aren’t lost. All over-sevens generally have good mouse skills and are happy to scroll, but like a good area available to click that mouse, without too much copy to plough through.

Reading abilities

When designing for children, you need to think deeply about usability: good practice on its own isn’t enough. When we relaunched the Nickelodeon website (nick.co.uk), all of the usability solutions were reached through usercentred design, regular user testing and our existing knowledge of the audience. One big issue is reading and writing. A sevenyear-old boy has very different skills to an 11-yearold girl. The lack of literacy confidence with undernines meant that when we introduced a search function, we knew they’d only use it if it had an auto-complete function, lots of misspelling options and images for each successful search result. There’s no consensus on how children predominantly find content, so many kids’ sites offer a variety of ways to navigate. Younger kids generally prefer image and character-based navigation – seen primarily on the nick.co.uk site inside a carousel of characters and TV shows

across the top of the page. Some like to scroll immediately to the bottom; others go straight for the word ‘game’ or ‘games’ on the navigation bar or anywhere on the homepage. When we introduced search, that became the main way that older kids in particular found content. Remember the ‘keep it simple’ adage for promotional spaces on the homepage and main index pages. Don’t use rotating, slideshow images: children frequently don’t understand how to click through to find other images and content. Children aged seven and over may be adept with their mouse skills, but it’s still best to make navigation arrows chunky and clear. While preschoolers need arrows large enough to be easily clickable, over-sevens need them to be large in order to understand their function. Many kids are web-savvy enough to happily use the Back button on the browser, but when they have multiple tabs open they can get confused. And remember, kids use Google and YouTube just as much as teenagers and adults. So, for example, YouTube’s intuitive ‘related content’ links are easily understood and used. Using that model on nick.co.uk, we’ve introduced ‘related content’ links across the Shows, Games and Clips section. Olivia Dickinson (uk.linkedin.com/in/oliviadickinson) is digital manager at Nickelodeon UK. She’s worked at Amazon and the BBC, creating content for kids and specialising in user testing with pre-schoolers.

cked with the Phones@TechRadar is pa independent UK’s most comprehensive when you’ve nd A s. ew vi re ne ho tp ar sm you can ﬁnd decided which one’s best, 100,000 the latest deals from over options at our online store.

.net technique

technique Projects and advice for web builders

(below) CSS/design a responsive grid p84 Dave Snyder – “Everything is in flux:

content, viewports, the screen – all changing, all the time”

(above) CSS & HTML5/ design a glossy button p76 Robert Reinhard –

“HTML5 means making web pages that feel like Flash, but aren’t”

tutorials > 76

CSS & HTML5/design a glossy button

Robert Reinhard of BKWLD demonstrates two ways to create a glossy button, using CSS3 and canvas scripting respectively

80 ntial CD On your esse for need All the files you orials are in this issue’s tut folder the Mag files

CSS/design a responsive grid

Dave Snyder of Firstborn explains how to redraw your layouts to accomodate different viewports while maintaining a strong design aesthetic

image to highlight them and provide information”

jQuery/build a notched tab system

Ben Bodien and Marc Roberts, cofounders of Neutron Creations, explain how to build a simple, semantically clean and extensible jQuery tab system

(above) jQuery/create an image map effect p88 Ryan Taylor – “We’ll apply hover areas to areas of the

articles > 92 96

jQuery/create an image map effect

Take advantage of HTML’s map and area elements to create an image map that highlights parts of a photo and overlays information about them. Ryan Taylor explains how

100

Website build-off

This month, T-shirt sites

Opinion

It’s time to take on the type foundries and start making our own fonts, says Micah Rich of A Good Company

Makeover

(above) Opinion/The font revolution p96 Micah Rich – “The font foundries

control everything. I say we give them a run for their money”

Children’s medical research charity Sparks is looking to overhaul its website. We asked web designer Jay Hollywood to offer his advice

How we built

Gladeye has developed a new site for the iconic New Zealand brand 42BELOW Vodka. Interactive director Tarver Graham spills the beans

.net october 2010

.net technique css–&–html5

CSS & HTML5 design d a glossy button ntial CD Your esseed ed for this

Robert Reinhard of BKWLD (bkwld.com) demonstrates two ways to create a glossy button, using CSS3 and canvas scripting respectively Knowledge needed Basic HTML Requires Text editor Project time Two hours HTML5 has become a buzzword thanks, in no small part, to Steve Jobs. To our clients, it means making web pages that feel like Flash, but aren’t. In this tutorial we’ll look at how executing a common use case – making a glossy button – is accomplished in both HTML5 (canvas) and CSS3, comparing each method’s strengths and weaknesses.

CSS3 approach

First, create a new HTML document and add the only HTML we’ll need. <a href=”http://bkwld.com”>Visit BKWLD</a> Add basic CSS2 attributes to style the button’s text. font: bold 14px Helvetica, Verdana, Arial, sans-serif; text-decoration: none; color: #FFFFFF; Next, give the button dimension: display: inline-block; padding: 0 14px; line-height: 30px; background-color: #00a9e4; By default, the <a> tag will display inline. This doesn’t allow us to add vertical padding around the text. Changing to inline-block enables us to give the element dimension without needing to invoke a float, which you might need to do with display: block. Next, give the box dimension by expanding horizontal edges using padding and expanding vertical edges using line-height. Fill the box with cyan-blue; defining it helps the style degrade gracefully if the browser doesn’t support gradients.

All the files ne found on tutorial can be . this issue’s CD

Add shadow to the text so it looks inset. Some browsers, including Firefox 3 and IE8, don’t support this. text-shadow: -1px -1px 1px rgba(0,0,0,.3); The first two properties are the shadow’s offset. Setting both to -1px instructs the browser to move the shadow 1px up and 1px to the left. The third is blur, currently set low at 1px. The fourth, colour, uses the rgba declaration to create black (0,0,0 in the red, green, and blue) with 30% opacity (the fourth parameter). Lift the button off the page with a shadow: -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.3); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.3); box-shadow: 2px 2px 4px rgba(0,0,0,.3); Values are formatted similarly for each vendor-specific tag and are structured the same as text-shadow: horizontal offset, vertical offset, blur and colour. The shadow offset is larger (2px), in a different direction (down and right), and is blurred more (4px). Last, add the gloss via CSS gradients: background-image: -webkit-gradient(linear, 0 45%, 0 55%, from(rgba(255,255,255,.4)), to(rgba(255,255,255,0))); background-image: -moz-linear-gradient(270deg, rgba(255,255,255,.4) 45%, rgba(255,255,255,.0) 55%); Only vendor-tagged attributes are available, an indicator of how new their definition is. We’ll look at the WebKit approach first, though the Mozilla

CSS time

Now, round the corners into a pill shape: -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; By setting the radius to half the height of the button we get half circles on the caps. The unusual -webkit (for Safari and Chrome) and -moz (Firefox) prefixes are called vendor-specific extensions. They exist so that browser makers can add support for CSS properties that haven’t been finalised by the W3C. Unfortunately, Internet Explorer 6-8 don’t support border-radius and will render the button with straight edges.

76 .net october 2010

CSS gradients The new Sencha Touch framework (sencha.com) uses CSS gradients and other styles shown in this tutorial. You can see an implementation at kivamobile.org/app/

.net technique css–&–html5 Height Line-height instead of vertical padding Safari 4-5, iOS 3-4, Chrome 4-5

Firefox 3.6

Firefox 3

IE 9

IE 6-8

Our CSS3 buttons We’ll create a pill shaped button with a glossy highlight colour and drop shadow that degrades nicely in older browsers implementation reflects the current W3C draft spec. Gradient fills are implemented as declarations – such as rgba() – but are only used where you specify an image. The first argument of -webkit-gradient() specifies the type of gradient (linear or radial). The second and third are coordinates that define a line over which the gradient spans. Using percentages for the coordinates fixes the scale to the button size (they equate to a vertical span from 13.5px to 16.5px). The final arguments are colour stops. The first specifies a translucent white for the gradient start (40% white) and the second specifies a fully transparent white for the bottom. Mozilla syntax differs from WebKit syntax; the declaration defines the gradient type. The first argument sets the angle of the gradient at 270°, equivalent to a vertical line from the top, advancing down. The following arguments are colour stops. Each colour stop lists colour and then position, separated by a space. Now we have a pill-shaped button that appears in the latest browsers with a glossy highlight colour and drop shadow (see above).

Canvas approach

Initially, I inflated the button using the padding property, as in padding: 7px 14px;. The text was correctly vertically centred within our box in some browsers (Safari and Chrome) but not in other browsers. For instance, in Firefox the text was shifted up from the middle by a couple of pixels. We can’t switch to using height: 30px because although it would make the box the right height, it would not centre the text.

Firefox

Safari

A colleague pointed out the solution: use line-height instead of vertical padding. It has the benefit of setting the height for the box to a defined size but also has the intrinsic property of vertically centring text. Padding is subject to more interpretation from the browser because it is applying spacing outward from the bounds of the text. Firefox appears to calculate the vertical bounds of the text by including the height of descenders (whether they exist in the copy or not). WebKit (Safari and Chrome) appears to apply additional padding to the top of the text that is equal to the height of the font descenders, which looks more natural to the eye.

Outline the shape

Interaction with canvas happens in JavaScript. Get a reference to the canvas element via id and call the canvas method getContext(‘2d’). Then, set the click event for the button and set the mouseover cursor style.

Create an HTML document with the HTML5 doctype (<!DOCTYPE html>) and add the canvas tag:

var el = document.getElementById(‘button’); var context = el.getContext(‘2d’); el.onclick = function() { window.location = ‘http://bkwld.com’; } el.style.cursor = ‘pointer’;

<canvas id=”button” width=”120” height=”36”> <a href=”http://bkwld.com”>Visit BKWLD</a> </canvas>

Define the dimensions in a variable so it is easy to tweak later.

We’ve given this element the id button and assigned it dimensions of 120px by 36px (any drawing action exceeding these definitions is cropped). Within the canvas tags is a simple <a> tag. This is the fallback if the browser doesn’t support canvas (all IE browsers) and for search engine support. Shapes are painted into the canvas on top of one another. As a result, the order of the code is significant: 1) define the outline of the button 2) fill it with a solid colour 3) add drop shadow 4) add gradient 5) place text on top.

var w = 115; var h = 30; Draw the button’s outline by placing virtual pen with the beginPath() method. We’ll draw the whole shape with one continuous line. context.beginPath(); context.arc(h/2, h/2, h/2, Math.PI/2, Math.PI*3/2, false); context.lineTo(w-h/2, 0); context.arc(w-h/2, h/2, h/2, Math.PI*3/2, Math.PI/2, false); context.lineTo(h/2, h); context.closePath(); Begin with the semicircle that comprises the left side of the button. The arc() method draws circular line segments. The first two arguments are coordinates for the centre of our circle relative to the upper left of the canvas. The third argument establishes the radius. The fourth and fifth define the starting and ending points of the circular line segment we’ve described: 0 is east, π/2 (90°) is south, π is west, and 3•π/2 is north. The sixth argument sets whether the arc will be drawn clockwise (false) or counterclockwise (true). Thus, we instruct the context to draw a circular line segment from south to north along the left side of a circle. Next, tell the ‘pen’ to keep drawing where it left off (at 0,15) and draw a straight line to the point where the next half circle begins (0,100). This is done with the lineTo() method. These two arguments are the coordinates that the ‘pen’ should draw to from its current position. Subsequently, we draw another arc beginning at 0,100, bulging to 15,115, and then finishing as a half-circle at 100,30. We close the button with a line back to 15,30. At this point the browser will still be blank because we haven’t told our context to stroke or fill the shape it drew.

HTML5 support There’s a great JavaScript class for determining the level of HTML5 support in the browser at www.modernizr.com

context.shadowOffsetX = context.shadowOffsetY = 2; context.shadowBlur = 4;

.net october 2010 77 next>

.net technique css–&–html5

Safari 4-5, iOS 4, Chrome 4-5

Firefox 3.6

iOS 3

Firefox 3

IE 6-9

Our canvas buttons Using HTML5’s canvas element means we cut down on file load and http requests, but the downside is inconsistent behaviour in different browsers

property. This is important for our next block of code, where the gradient is applied to the shape. Without this line, the previous shadow settings would be applied to the subsequent fill() call, which paints the gradient.

Add the label

There is mixed support for fillText() in browsers. iPhone iOS 3 and Android 1.6 fail to render it though iOS 4 does, as well as Firefox 3.6 and Safari 4.

Browser support Info on browser support for many CSS properties can be found at

quirksmode.org/css/contents.html, although vendor-specific CSS3 properties are omitted

context.shadowColor = ‘rgba(0,0,0,.3)’; context.fillStyle = ‘#00a9e4’; context.fill(); The first three lines set up a drop shadow. For each property, we use the same values (even to the use of rgba()!) as for the CSS build. Next, set the fill colour to cyan-blue with fillStyle. This finally gets rendered to the canvas with the call to fill(). You should see a blue, pill-shaped button with a slight drop shadow. Now, add dimension to the button with the glossy gradient: var gradient = context.createLinearGradient(0, 0, 0, h); gradient.addColorStop(.45, ‘rgba(255,255,255, .4)’); gradient.addColorStop(.55, ‘rgba(255,255,255, 0)’); context.fillStyle = gradient; context.shadowColor = null; context.fill(); Our first three lines define the gradient and the latter three ‘paint’ it. The first two arguments of createLinearGradient() are the starting coordinates of the gradient transition and the last two arguments are the ending coordinates. Set the colours with the addColorStop() method. The first argument is the position of each colour stop as a percentage offset along the line defined by the coordinates in the createLinearGradient() call. The value of color is the second argument. We must null out the shadowColor

Resources Where to learn more

Westciv.com westciv.com/tools/gradients/ This tool created by John Allsopp will help you try out gradients and other CSS3 effects. You’ll find a wide range of resources and tutorials elsewhere on the site.

<prev 78 .net october 2010

Dive into HTML5 diveintohtml5.org/canvas.html An excellent tutorial from Mark Pilgrim that introduces the canvas element and explains how to use it, from simple shapes to gradients and images.

context.font = ‘bold 14px Helvetica, Verdana, Arial, sans-serif’; context.shadowOffsetX = context.shadowOffsetY = -1; context.shadowBlur = 1; context.shadowColor = ‘rgba(0,0,0,.3)’; context.fillStyle = ‘#ffffff’; context.textAlign = ‘center’; context.textBaseline = ‘middle’; context.fillText(‘Visit BKWLD’, w/2, h/2); The font declaration uses the same syntax as CSS. And the shadow for the inset effect, as well as the fill declaration, uses the same canvas properties we learned before. Set the text registration point using textAlign and textBaseline. By default, the registration point is the left edge and vertical baseline. Instead,

You don’t need fancy design software, plus you cut down on ﬁle load and http requests centre the registration point using center and middle respectively. Then, paint the text using the fillText(). The first argument is the string of text you’re painting and the following arguments are the coordinates to it. Move our text to the centre of the button by setting the coordinates to 57.5,15. Now your canvas is filled with a mirror of the CSS3 button (see top). Pure code makes your button easily changeable. You don’t need fancy design software, plus you cut down on file load and http requests. The downside is inconsistent behaviour in different browsers. So let’s compare the two approaches. The CSS approach degrades nicely. IE6, our worst case, becomes a usable, labelled blue box, where the canvas version is absent entirely. If you get a copy change, the CSS version accommodates it easily; the canvas button has to have its width variable massaged into place. For our specific design, CSS makes the most sense for the button. Canvas would only make sense if your button shape was non-boxy (eg a triangle) and you needed the text of the button to be generated (such that you couldn’t use a png). Even then, I think many developers would find a combination of pngs and absolutely-positioned text a good solution to most problems. l

About the author Name Robert Reinhard Company BKWLD Site bkwld.com Areas of expertise LAMP and ActionScript programming Clients Outdoor industry, music industry, ad agencies What languages do you speak? English and (when I’m travelling) panicky miming

MAGAZINE AWARDS_ 2010

VOTE NOW!

www.thenetawards.com

.net technique jquery

jQuery build a jQ notched tab system ial CD Your essent ’ll require All the files you al can be for this tutori issue’s CD. found on this

Ben Bodien and Marc Roberts, co-founders of Neutron Creations, explain how to build a simple, semantically clean and extensible jQuery tab system Knowledge needed Basic jQuery, HTML and CSS Requires Text editor/IDE, graphics application, jQuery + plug-ins Project time Less than one hour To power our tabbed navigation, we’ll be using and then extending the jQuery Tools plug-in, which makes setting up tabs (and a number of other useful interaction design patterns) incredibly easy. To start with, we’ll lay out some basic markup for our navigation: <nav> <ul id="tabs"> <li><a class="current" href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav> We’ve created an unordered list of anchors, with an id of tabs so we can directly target it with jQuery. We’ve also wrapped the list in an HTML5 nav element. This adds some semantic structure to our document, and potentially aids assistive technologies in providing a better user experience. We’ve also added a class of current to the first tab. The Tabs plug-in will move this class automatically between the anchors, and we can use this to emphasise the current anchor with CSS. We’ll then need to create the structure to hold the content that we’ll be switching between using the tabs: <div id="content"> <section>First section</section> <section>Second section</section> ... <section>Fifth and final section</section> </div> Here we have five section elements (another HTML5 tag) wrapped in a division identified as our content. We need one section for each navigation item we created earlier. We don’t need to do anything to connect the links to the sections, because the jQuery Tools plug-in will map them for us based on their order. Note: In the demo code on the CD, we’ve replaced the text in each section with snippets of Einstein’s Relativity: The Special and General Theory, just to fill it out a bit. We’ve also used paragraph tags to mark the text up. Now let’s style what we’ve put together so far into a horizontal row of links (see below):

Links styled Having divided our content into five sections, we’ve created and styled up a horizontal row of links

.net october 2010

Expert tip Setting the initial position A neat trick for determining the appropriate starting left value for your indicator is to complete the tutorial code, then load it in your web browser. Inspect the indicator element and see what left value has been set on the element’s inline style by the jQuery code. You can then use the same value in your CSS to avoid the indicator jumping if your jQuery takes a moment to download and execute.

nav { margin-bottom: 30px; } nav ul { overflow: hidden; padding-bottom: 10px; border-bottom: 5px solid #bbb; } nav li { float: left; margin-right: 35px; } nav li a { color: #666; font-weight: bold; } nav li a:hover, nav li a:focus, nav li a.current { color: #000; }

A sprinkling of style

At the end here, we’re setting hover and focus styles for our links, and also applying the same black colour treatment to links that have a class of current. Before we can get started on making our tabs work, we need to hide the sections of our content so that the Tabs plug-in can control which section is currently visible: #content section { display: none; }

The JavaScript

Now we’re all set with our basic markup and CSS, but before we can dive into writing our jQuery, we’ll need to bring in some libraries to give us the tools we need: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tools.min.js"></script>

Indicator added We’ve positioned our notched indicator below our navigation. Next, we need to make it slide along to point to the selected item

.net technique jquery Expert tip Customising the transition effects As well as the fading content transition, the jQuery Tools Tabs plug-in also provides built-in effects called ‘slide’ and ‘horizontal’, for vertical and horizontal sliding effects respectively. You can also define your own custom effect, taking complete control over how you switch the old content out for the new. You can find out more about creating custom effects at ntrn.cc/aS7btJ.

In the wild On the Authentic Jobs site (authenticjobs.com), the tabs enable users to filter the available job listings by various employment engagement types <nav> <ul id="tabs"> ... </ul> <span id="indicator"></span> </nav>

Here we’re importing four JavaScript files: 1. jQuery from the Google Ajax API (ntrn.cc/dvEnNS). 2. The jQuery Tools library (ntrn.cc/c4NCoV), using a custom-built download from the jQuery Tools site, which only includes the Tabs module. 3. An easing transition plug-in for jQuery (more on this later). 4. An HTML5 shiv file served conditionally to Internet Explorer versions older than IE9, in order to patch in support for the HTML5 elements that we’ve used. Now for our jQuery to initialise our tab system: $(function() { $("#tabs").tabs("#content section", { effect: 'fade', fadeOutSpeed: 0, fadeInSpeed: 400 }); }); I’ll step through this line by line to explain what’s going on. On line 1 we open a new function that will execute automatically as soon as the DOM is loaded on the page. We need to use this facility because we can’t initialise our tabs until the DOM has been assembled by the browser. Line 2 makes a call to the jQuery Tools Tabs function. We call this function on a jQuery selection of our tab navigation, which we target using its id of tabs. The first parameter we pass to the Tabs function is a selector string for our sections of content – the parts of the page we want to switch between when changing tabs. The second parameter opened with a brace on the end of line 2 is a JavaScript object that contains a set of configuration options. You can find documentation for the full set of available options at ntrn.cc/b03ZWD. The first option on line 3 tells the Tabs plug-in that we want to use a fading effect when we switch between tabs. This will fade out the old tab’s content before fading in the new content, to create a smoother transition. Lines 4 and 5 configure the speeds (in milliseconds) at which we want to fade out and in. Hey presto, at this point we have a fully functioning tab system!

Now some changes to our CSS are needed in order to style and position the indicator: nav { margin-bottom: 30px; position: relative; } nav #indicator { position: absolute; left: 12px; bottom: 5px; width: 12px; height: 7px; background-image: url('../img/notch.png'); } First, we set relative positioning on the nav element so that we can absolutely position our indicator within it. We’ve set left and bottom values such that the notch starts roughly centred underneath the first navigation item. We’ve then given the span an appropriate width and height (based on the size of our indicator image), and applied our triangular notch graphic as the background image for the span. We now have our notch indicator positioned below our navigation. Now all that remains to finish the effect is to have the notch indicator slide along underneath the navigation items to point to the currently selected item. Before we touch the code, let’s get the maths out of the way. We’re positioning our indicator absolutely, and animating the left CSS property to move it. In order to centre our indicator directly beneath the navigation anchors, we’ll need to know how wide they are. To work out the formula for calculating the value for the left offset of our indicator, we’ll refer to a diagram using some fake width values (see below).

Adding some flair

By positioning a small graphic below our navigation and animating its position using jQuery, we’ll be able to indicate the currently active tab with a neat visual touch. The first step is to produce the graphic. We’ve used a very simple triangle filled with the same solid colour as the bottom border we added to our navigation list. Next we need to get the indicator onto our page and into position. We’ll use a span element for the indicator:

Fully functioning Our content is now fully navigable by sliding our notched indicator from link to link – head for the CD to try out the demo

Calculate the balance The set of (fake) width values we’ll use to work out the formula for calculating the value for the left offset of our indicator

.net october 2010

next>

.net technique jquery

Clean and simple Our site incorporates simple, semantically clean and extensible jQuery tab system for breaking content up into navigable sections within a single page

Icing on the cake We’ve added some transition effects as well including a sliding notch indicator for the active tab, and cross-fading content

We first take the distance of the current anchor from the left edge of the navigation (180px), and to this we need to add Y. To calculate Y, we take half the width of the current tab anchor then subtract half the width of our indicator. In this example, Y is 65px, so the left value for our indicator would be 245px. We’ll now extend our tabs code, writing an event callback function to animate the indicator as the user navigates. The Tabs plug-in raises a JavaScript event to which you can attach event callbacks. In this case we’ll be using one called onBeforeClick. As its name suggests, this event fires when we click a tab anchor, but before performing any of the actual tab switching behaviour. There’s also an onClick, but as this only fires

Event callback

We’re using the jQuery Tools plug-in, which makes setting up tabs incredibly easy after the tab switching (including the fading transition) has finished, it won’t produce the right effect for us. We’ll first set up some variables to hold useful values that we’ll need to perform the animation. We’ve written this before the call to the jQuery Tools Tabs plug-in so that our new variables are initialised and ready for use within the Tabs function itself: $(function() { var indicator = $('#indicator'), indicatorHalfWidth = indicator.width()/2, lis = $('#tabs').children('li'); $("#tabs").tabs("#content section", { ... On line 2, we save a reference to our indicator element to a variable called indicator. If you’re going to be referring to a DOM element repeatedly, it’s more efficient to do this rather than using a jQuery $ selector to repeatedly search the DOM for the same element(s). The second variable we create on line 3 is the width of the indicator element divided in half, and the variable on line 4 is an array of all the list items in our navigation.

Expert tip Easing equations Easing equations are mathematical functions that give us more interesting, non-linear animations by varying the speed of the animation over time. There are a wide variety of equations available for most JavaScript frameworks. We included the jQuery Easing Equations library so that we could make our indicator move with sharp acceleration and deceleration for a more natural look to the animation. You can find out more about the jQuery and see demonstrations of the various equations at ntrn.cc/961SeP.

<prev

.net october 2010

Now let’s write our event callback in the configuration of our Tabs function: ...fadeInSpeed: 400, onBeforeClick: function(event, index) { var li = lis.eq(index), newPos = li.position().left + (li.width()/2) - indicatorHalfWidth; indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo'); } }); On line 2 we’ve added the header for our onBeforeClick event callback function. We are given two parameters associated with our event; event is a reference to the event itself, which we won’t need. The second, index, is the number of the tab that was clicked, with 0 being the first tab. On line 3 we fetch the specific list item element we’re going to examine by looking it up in our list item array. The eq jQuery function reduces our array of list items to the one specified by the index value. Line 4 is where we calculate the new left value for our indicator. Look back at the diagram to see how we came up with this formula.

Animation

All that remains is to perform the animation, which we do on line 5. We first call stop(true) on the indicator, which cancels any animations currently in progress as well as any that are queued. We’re then calling jQuery’s animate function, animating the left CSS property to our calculated value (newPos). The second parameter to the animate function is a 600ms duration for the animation. The third, easeInOutExpo is the name of an easing equation, which is optional. See Expert tip, below left, for more on easing equations. And that’s it – we’re done! We now have our content sectioned up and navigable using our tab anchors, as well as a sexy custom effect with our sliding notch indicator. The jQuery code covered in this tutorial is available on this issue’s CD, or for download as a single plug-in package at ntrn.cc/b9W6wo, with the added option of being able to create vertical navigation as well as horizontal. l

About the authors Name Ben Bodien Company Neutron Creations Site neutroncreations. com Areas of expertise Front-end engineering Languages I can speak English, some French and a tiny bit of Arabic

Name Marc Roberts Company Neutron Creations Site neutroncreations. com Areas of expertise Web app development Languages English; basic conversation in French and German; learning Italian

Follow the .net magazine team and our regular contributors on Twitter! The magazine & team .net magazine URL twitter.com/netmag Get unique offers and the latest news from .net HQ! Name Dan Oliver Job title Editor URL twitter.com/danoliver Name Oliver Lindberg Job title Associate editor URL twitter.com/oliverlindberg Name Tom May Job title Operations editor URL twitter.com/tom_may Name Rob Bowen Job title Art editor URL twitter.com/SpeshBob

Regular contributors Name Dave Chaffey URL twitter.com/davechaffey Name Craig Grannell URL twitter.com/craiggrannell twitter.com/iphonetiny

Name Gary Marshall URL twitter.com/garymarshall Name Karl Hodge URL twitter.com/spodgod Name Usman Sheikh URL twitter.com/contrivedigital Name Tom Hughes-Croucher URL twitter.com/sh1mmer Name Patrick McNeil URL twitter.com/designmeltdown Name Hugh Gage URL twitter.com/hwjgage

Follow our CONTRIBUTORS list: @netmag/contributors Check out our FACEBOOK PAGE: www.facebook.com/netmag

Name Mark Penfold URL twitter.com/markpenfold Name Paul Wyatt URL twitter.com/pauljwyatt

.net technique css

CSS d design a responsivegrid

ntial CD Your essethe grids

You can view orial on this used in this tut issue’s CD.

Dave Snyderr of Firstborn (ﬁrstbornmultimedia.com) explains how to redraw your layouts to accomodate different viewports while maintaining a strong design aesthetic Knowledge needed Moderate CSS, HTML, JavaScript Requires Design/layout skills Project time As long as it takes to design and code a site We live in an interactive world. Everything is in flux: content, viewports, the screen – all changing, all the time. Digital is dynamic – it’s ever-evolving, and it’s our job as designers and developers to keep up. This article attempts to explore dynamic grid-systems that display content at their aesthetic and functional maximum. What makes this tutorial different,

Grid systems aren’t a passing trend. They’re old – we’re talking Late Middle Ages

today – the grid as a fundamental system. A period that proposed that typography and the grid were one and the same. Brief digression: when people preach that grids are trendy, they are probably referring to the influence Swiss Style still has on design and, increasingly, the interactive design styles being popularised now. For me, what stands out most about this period is how timeless the design is. Clean is always in fashion and always will be. In my opinion, the resurgence of the Swiss Style we are witnessing in interactive today is because the tenets of Swiss Style unquestionably reflect what we strive for (or should be striving for) as interactive designers – cleanliness, readability and deference to content. Massimo Vignelli famously stated, “I see design as the organisation of information that is semantically correct, syntactically consistent and pragmatically understandable. I like it to be visually powerful, intellectually elegant and, above all, timeless.” His words may have been intended towards print, but they translate to digital perfectly: both deal with a system needed to organise content.

I hope, is that it explores the space behind the space and how redrawing layouts (based on device and/or viewport) is a great way to maintain a strong design aesthetic while adding utility. However, before I dive in, I think a brief (and overly simplified) history lesson is needed. Grid systems aren’t a fad or some passing trend. They’re old: we’re talking the Late Middle Ages (13th and 14th centuries) – before movable type. At a very early stage, people saw the need to create layouts based on proportional grids. It seems that with text came an inherent need for structure. Content and the grid are inseparable. Fast-forward 600 years to the modernist movement; more specifically, the International Typographic Style or Swiss Style (it’s the 1950s, if you’re keeping track). This period in graphic history was the dawn of the grid as we know it

Our grid I’ll use a six column grid: 145px columns and 13px gutters. For a horizontal screen resolution of 1024, things look pretty good. But what about wider resolutions?

.net october 2010

Add columns At a horizontal screen resolution of 1440, there’s room for three more columns. ‘A’ goes to ‘B’ and ‘B’ to ‘C’ – pulling content from below and moving it up

.net technique css

Adjust layout By adding a lot of extra space on the right I’ve been able to bring content up from below. Here’s the new, adjusted layout, which is making good use of the extra screen real estate. I’ve gone ahead and removed the grid

In depth ‘A’ – As there’s now room, I’ve added another bucket of visual navigation. ‘B’ – The image has increased inside; this could be handled by div masking using the overflow: hidden; attribute. ‘C’ and ‘D’ – to balance the grid, the header and footer moved over

The 960px grid

I think the grid itself should remain fixed; the number of columns and layout, however, should increase as the width of the viewport increases. Let’s say we’re using a six-column grid: 145px columns and 13px gutters. For a horizontal screen resolution of 1024, things look pretty good. But at any resolution wider, we have the opportunity for a much nicer and more functional layout. Being that the majority of people online have a resolution greater than 1024, it might be a good idea. At a horizontal screen resolution of 1440, we have room for three more columns. That’s a lot of extra space to bring content up from below while adjusting the content on screen to better the horizontal flow. At the end of the day, the layout should respond to the width of the viewport. The term “Responsive Web Design” has been used to describe an adaptive approach to web design in targeting different devices (see Ethan Marcotte’s feature in issue 206). I think it fits nicely here too. So how do you toggle rules based on viewport size? Here are three techniques to do just that.

Fast-forward again: 2007ish – the dawn of the 960px grid. Grids are a central discussion point in the interactive community. It seems that all of a sudden interactive designers are, for the first time in their careers, looking at print design and graphic theory for inspiration. A new, albeit digital, grid-based movement had begun, built on the fundamentals defined by Tschichold, Müller-Brockmann, Hofmann and Ruder 60 years earlier. Downloadable templates flourished. Grid generators took off.

Mostly, liquid layouts look terrible. Columns are too wide and text becomes hard to read Grid-based designs were everywhere. People were happy (I know I was). But with the “automation” and the “copy+paste” nature of the web grew a problem – people stopped thinking. People sought to automate a process that shouldn’t be automated. Apathetic complacency took root. It went two ways: one, grids were an end to a means; two, people sought a grid design, NOT a design built on a grid. The automation took the ‘semantic’ and ‘syntactic’ side of the design process out – the ‘why’ and ‘what for’. Worse yet, people began to justify bad design because it “didn’t break the grid”. They forgot that ugly is still … ugly. Josef Müller-Brockmann wrote: “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” All right, history lesson over. To set this up, I think it’s fair to let you know a couple of things: a) I like print-inspired/editorial-esqe layouts: I think it’s the future of interactive design. b) Horizontal flow is a good thing. c) Wider is better. d) I don’t like page refreshes. Okay, now let’s get to it.

Rethinking the liquid column

For the most part, liquid layouts look terrible. Columns are too wide, text becomes hard to read, the layout is sloppy. People (myself included) have played with proportional liquid layouts but I find you’re left with an overweight and plumpy design. Content from below the fold may or may not move up; nothing really beneficial is gained; design integrity is out the window.

Using the @media tag: /* default rules */ #lorem{ background-color: #ccc; } /* rules that should be applied only if the viewport size is equal or larger than 1440px */ @media screen and (min-width: 1440px) { #lorem{ background-color: red; } } Loading a different CSS file based on the media query: <link rel=”stylesheet” type=”text/css” media=”screen” href=”default.css” /> <link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 1440px)” href=”wide_screen.css” /> Use JavaScript to detect the viewport size and then set a className to the body element: //get crossbrowser window inner size function getInnerWidth(){ return (window.innerWidth)? window.innerWidth : ((document.document Element.clientWidth)? document.documentElement.clientWidth : document.body.clientWidth);

.net october 2010

next>

.net technique css } //check if window is big enough if( getInnerWidth() >= 1440 ){ document.body.className += ‘ wide’; //add the .wide class to the body element. }

Resources Where to ﬁnd out more

All of these methods enable you to target the width of the viewport and modify the page layout accordingly. It should be noted, however, that using @media queries limits your reach significantly. Only the newest browsers (FF3.1+, Safari 3+, Chrome 1+, Opera 9.62+, and IE9) support this method, so you should view this approach as a form of progressive enhancement – better browser, better experience.

Expanding columns: grids in grids

Are new ‘pages’ always needed to house content? Often, moving existing content around offers a much cleaner solution. This is especially true with image galleries or something as basic as more copy. There is nothing more annoying than sites that make you wade through page after page of content: for every photo, for more words, for more ads (!) –

Nothing’s more annoying than having to wade through page after page of content loading sucks. (By the way: if your business model revolves around conning advertising networks, this is how it’s done.) Things like Lightbox are great, but they remove the user from the content and from the grid itself. Yes, it’s a nice fix, but let’s pretend we’re developing a solution from scratch, not shoehorning one in later. What can we do to keep people tied to the content while remaining in-grid? Two solutions: ● We can move/expand the grid, pushing less relevant content out of the way. ● We can collapse or cover columns of content that aren’t relevant to the user at that moment. In this scenario, I’ve decided to cover up other content. This might be a good way to temporarily hide the banner ads (which take up a lot of space).

The Grid System www.thegridsystem.org/ If there were one resource for all things grid, it would have to be TheGridSystem.org. Whether it be classic grid systems, the golden-ration or baseline grids, it’s a fantastic resource for learning more about grid theory. The site is run by Antonio Carusone of AisleOne.net.

Responsive Web Design www.alistapart.com/articles/ responsive-web-design/ Ethan Marcotte’s article for A List Apart looks into the potential of the new technique of media queries. Most importantly, it identifies the potential of progressive layouts and the change in thinking we (web designers) require to get there.

Here’s how: the div slide can be done using any JavaScript library/framework that contains an animation module such as that of jQuery, YUI, Mootools and Prototype. You could also use the new CSS3 transition module. But again, you’ll run into very limited support. Unfortunately, that’s not very practical. The way the sliding code works will vary, largely based on the design and page markup. It can be done using the CSS property position: absolute, negative margins, rescaling divs, CSS3 2D transforms, and so on – there’s no universal way of doing it. Below, we’ve pulled an example that utilises the jQuery framework.  The pagination can be achieved by simply changing the margin-left of the column’s holder. On top of viewport width variability, there are myriad new devices we need to account for, including of course the iPad and iPhone. These two devices are radically changing how we read/browse digital content. In issue 205 (‘Adaptive layouts with media queries’), Aaron Gustafson tackled this very subject. I don’t plan on reiterating his points here, but I thought I could add a little extra; specifically, how to use the ‘flick’ gesture as a way to paginate or scroll through columns of content.

The iPad

At three million sales and counting, Apple’s iPad is already changing the way we think about user experience. Horizontal is now okay and flicking through content is better than clicking. In the screengrab (left) I demonstrate how ‘paging’ could work in-grid. For iPad users, flicking through the ‘pages’ would come in handy. Swipe can be achieved by using the jQuery Swipe plug-in (plugins.jquery.com/project/swipe) or jQTouch (jqtouch.com/).

‘Paging’ in-grid ‘A’ slides to ‘B’, covering some content but still remaining in-grid. Also, notice that extra navigation has been added to both close the panel and slide through ‘pages’ of content; in this case, columns that slide horizontally

<prev

.net october 2010

<!—JavaScript code sample using jQuery Swipe plugin //setup swipe column slide $(function(){ var visibleWidth = 300; var containerWidth = $(‘#columnsContainer’).width(); var totalPages = Math.ceil(containerWidth / visibleWidth) - 1; var curPage = 0; /**

.net technique css * Scroll columns * @param {Boolean} isLeft If it should scroll left */ function doScroll(isLeft){ if(isLeft && curPage < totalPages){ curPage++; }else if(!isLeft && curPage > 0){ curPage--; }else{ return; //stop execution if trying to scroll more than allowed } $(‘#columnsContainer’).animate({marginLeft: (curPage * -visibleWidth)}, ‘slow’); } // add swipe event listener $(‘#columnsContainer’).swipe({ threshold: {x: 30, y: 20}, swipeLeft: function(){ doScroll(true) }, swipeRight: function(){ doScroll(false) } }); });

Word of warning

Good design is not the byproduct of a downloadable template or some grid generator that creates a “mathematically perfect” grid based on the Golden Ratio. They are useful tools (possibly), but proceed with caution. Coming out of 2009, I saw the web design world at the edge of interactive, grid-based stagnation – defined by the downloadable 960, ruined by the cookie-cutter generation and a growing world of the copy + paste artists. But with 2010 now halfway over, I feel I may have judged too early. Instead, we as interactive designers find ourselves at what is quite possibly the most exciting time in interactive to date. Ajax, JavaScript, HTML5, CSS3 and the devices/browsers that support them are making us rethink the ‘box’ we work in. That enables us to explore in ways we haven’t been able to before. To cut a long story short, the ability to explore newer, more progressive user experiences and layouts is here. We just need to start looking at the canvas differently. ● Thanks to Miller Medeiros, web developer at Firstborn (www.millermedeiros. com), who helped with the code samples provided throughout this tutorial and provided advice on when, where and how to implement these techniques.

Interview “People are really excited about HTML5” Miller Medeiros Job title Designer/developer URL millermedeiros.com About Miller Originally from Brazil, Miller Medeiros now lives and works in New York as a web designer for Firstborn (www.firstbornmultimedia.com)

.net: What is your favourite HTML5 feature? A lot of people are really excited about the canvas and video tags but if I had to pick something it would be the semantic changes, which aren’t really a feature. With HTML5 the markup describes the content of the document much better and it also helps reduce the number of classes and ids required to style the content. I think in the future it will be a key factor for search ranking and also for accessibility. .net: What do you find to be the most frustrating thing surrounding the introduction of HTML5? The debate about HTML5 vs Flash. A lot of people are misinformed about what HTML5 really is and the pros and cons of each feature. They simply forget that most of the basic features are not even supported by all the browsers, yet they expect that the newest and more complex features are going to be implemented correctly and quickly by all the vendors. They also think users are going to abandon Internet Explorer. .net: What are the practical, real-world applications of HTML5 at the moment? Nowadays the only places HTML5 can actually be used for real client projects are websites and applications for smartphones and the iPad. But even this kind of development has bugs. For example, there are a great deal of cross-browser issues and even these devices don’t support all of the features yet. Still, “HTML5 is the future”. .net: Are we in the middle of another “Battle of the Browsers” and should we care? Yes, we are. Microsoft is back in the game pushing hard with Internet Explorer 9; Apple is drawing attention with all the HTML5 hype; Google is making advertisements for Chrome; Firefox and Opera are investing in new features; and the differences between browsers are increasing every day with all the proprietary features and APIs. To add to the mix, the different implementations of working draft specs – which may be changed in the future – are causing inconsistencies and breaking many websites. Differences in implementations across browsers aren’t good for users and are especially frustrating for designers and developers. A lot of time is lost fixing incompatibilities. Sites are designed and developed so they’ll work on the worst browsers, which strips down many cool features that could be utilised. Plus, file sizes are larger since a lot of frameworks and hacks are required to fix those differences. I’m really afraid of the strategies adopted by companies like Microsoft and Apple to conquer and close the market. I fear it will be like the old days (Netscape versus Internet Explorer) when we had to code different versions of the same site for both browsers.

About the author

Useful plug-in For iPad users, flicking through the ‘pages’ would come in handy. Swipe can be achieved by using either jQTouch (jqtouch.com) or the jQuery Swipe plug-in (plugins.jquery.com/project/swipe)

Name Dave Snyder Job Associate creative director Company Firstborn Site www.firstbornmultimedia.com Expertise Strategy, design, user experience Blog cargocollective.com/EpicallyHarshed What languages do you speak? Not enough

.net october 2010

.net technique jquery

/jQuery/createan /jQuery /create an imagemapeffect

Take advantage of HTML’s map and area elements to create an image map that highlights parts of a photo and overlays information about them. Ryan Taylorr explains how Knowledge needed Photoshop, HTML, CSS, jQuery Requires jQuery and a decent photo Project time 30-45 mins Recently, I came across an effect at markboultondesign.com/about-us that sent my mind racing with possibilities, and I was surprised I’d not discovered it sooner. It’s achieved using the map and area HTML elements to create an image map. So how does it work? I’m glad you asked. The basic idea for this effect is to take an image (in this case, a photo of the Eden Project in Cornwall) and apply hover areas to various parts of the image to highlight them and also reveal information about them. For example, when you hover over The Gardens, they become highlighted in colour and more details about them appear over the top of the image. I recommend you take a look at the tutorial files I’ve included on this issue’s CD so that you get a feel for what exactly we’re trying to achieve. So where do these map and area elements come in? Let me show you! This is all the HTML we’re going to use to achieve this effect: <section id="image-map"> <img usemap="#areas" src="assets/images/eden.jpg" alt="Eden Project" width="800" height="536" /> <map id="areas" name="areas"> <area shape="poly" coords="110, 220, 170, 200, 250, 200, 320, 170, 360, 170, 450, 200, 300, 280, 280, 280, 110, 230, 110, 220" href="details.html" alt="Mediterranean Biome" id="tropics"></area> <area shape="poly" coords="310, 300, 500, 200, 600, 200, 720, 275, 800, 275, 800, 310, 750, 310, 650, 400, 310, 360, 310, 300" href="details.html" alt="Rainforest Biome" id="temperate"></area>

Information overlay The finished effect will draw attention to the area that is

hovered on by highlighting it in colour. Additional information is displayed alongside

.net october 2010

<area shape="poly" coords="0, 270, 70, 270, 130, 330, 0, 330, 0, 270" href="details.html" alt="The Stage" id="stage"></area> <area shape="poly" coords="670, 405, 800, 350, 800, 536, 575, 536, 575, 500, 670, 450, 670, 405" href="details.html" alt="The Core" id="core"></area> <area shape="poly" coords="0, 240, 60, 240, 250, 300, 250, 380, 650, 450, 650, 490, 560, 505, 560, 536, 0, 536, 0, 346, 140, 346, 140, 320, 100, 280, 70, 260, 0, 260, 0, 240" href="details.html" alt="The Gardens" id="gardens"></area> </map> </section> Let’s go through it. We have an image for the base (black and white) Eden Project photo, which needs an important attribute, usemap. This attribute associates the image to the map element, which has a name value of areas (incidentally, if you add an optional id to a map element as I’ve done here, the id needs to be the same as the mandatory name value). The map element is simply a container for its child area elements, which is where things get interesting.

Area elements

For this tutorial, we have five area elements. These elements represent hyperlinks corresponding to an area of our image (Temperate Biome, Tropics Biome, The Gardens, The Core and The Stage), which is why each one has a href attribute set. What’s interesting about area elements is they can be different shapes – circle, polygon or rectangle. This is where the coords attribute comes in. (I know what you’re thinking: that’s a lot of coordinates! I admit, I got carried away. What can I say: when was the last time you used an hyperlink that wasn’t square? I rest my case.) The coordinates work in pairs. So take, for example, the first area in the list (the one with the id of tropics; see screengrab below). Relative from the top, left corner of the image (0px x-axis/0px y-axis) the first point on the polygon is positioned 110px x-axis by 220px y-axis; the next 170px x-axis by 200px y-axis

Add co-ordinates I recommend you use Firebug and its ilk to add coordinates within the browser so you can see the polygon being drawn.

.net technique jquery

Pre-loading images

While following this tutorial, it may have occurred to you that the replacement highlighted area images that are loaded by jQuery are loaded for the first time when you hover over an area element, which would result in a delay while the image is downloaded to the client’s browser. To minimise this we can pre-load the images into the DOM on page load by including the following function: (function($) { var cache = []; $.preLoadImages = function() { var imageCount = arguments.length; for (var i = imageCount; i--;) { var cacheImage = document.createElement(‘img’); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery)

And calling it like so:

Without JavaScript If JavaScript is disabled all is not lost: the effect gracefully degrades. Visitors can click through to a basic details page

and so on. Finally, note that the last set of coordinates for each area element is the same as the first: this ensures that the polygon is closed. With this level of flexibility, we can draw an outline to fit any shape we need.

The details

We’re going to create another HTML page for this tutorial called details.html (you’ll find all the tutorial files on this issue’s CD in the tut_map folder). This

When you hover over an area, it’s highlighted in colour and details about it appear HTML page contains blocks of content for each area of the image and each block is marked up as follows: <div id="tropics" class="description"> <header> <h1>Mediterranean Biome</h1> </header> <p>This colourful, sensory journey begins in the Mediterranean Basin, takes you across the equator to South Africa, and on to experience the grandeur of the Californian landscape.</p> </div> Each div has the same id as its corresponding area element. At this stage, we actually have a working and accessible image map. You can click on any of the areas to be taken through to the details.html page and view the content. This is in fact the state that the effect will fall back to if JavaScript isn’t enabled in the visitor’s browser (graceful degradation). Thanks to the fact that the majority of the work is being done by the map and area elements, our CSS is going to be quite minimal. First we’re going to add some styles for the container we’ll be using to load the area content into:

$.preLoadImages("assets/images/eden-tropics.jpg", "assets/images/eden-temperate.jpg", "assets/images/eden-core.jpg", "assets/images/eden-stage.jpg", "assets/images/eden-gardens.jpg"); You can of course use this function for any situation that requires images to be replaced on the fly, so it’s a handy one to keep in your toolbox.

/*Overlay Styles*/ #image-map { position: relative; width: 800px; } #desc-overlay { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BBB)); background-image: -moz-linear-gradient(0% 100% 90deg, #BBB, #FFF); background-color: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -o-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5); display: none; padding: 15px; position: absolute; text-shadow: 0px 1px 1px rgba(255,255,255,0.85); width: 300px; } We didn’t include #desc-overlay in our markup for semantic reasons; instead we’ll be adding it using jQuery on page load. Also, whenever we populate the #desc-overlay element with area content, we’re going to assign a class with the same value as the area element we hovered over. We set our #image-map section to position: relative with a fixed width, so that we can position the #desc-overlay element in different places depending on which area it belongs to relative to #image-map: /*Area Description Positions*/ #desc-overlay.tropics {

.net october 2010

next>

.net technique jquery Resources Where to ﬁnd out more

display: block; right: 80px; top: 10px;

WHATWG HTML5 spec

} #desc-overlay.temperate { display: block; left: 135px; top: 20px; } #desc-overlay.stage { display: block; left: 125px; top: 340px; } #desc-overlay.core { display: block; right: 150px; top: 275px; } #desc-overlay.gardens { display: block; right: 30px; top: 190px; }

whatwg.org/html5 If you’re only just starting to dip your toes into the waters of HTML5 or even if you’ve been playing with it for a while, the official spec is a must-have bookmark. The site contains onepage, multi-page and PDF versions, as well as a version history and a bug list. There’s also an FAQ, a forum and a help mailing list.

jQuery jquery.com My advice when it comes to jQuery is to actually read the documentation. There’s a wealth of examples and functions that you simply don’t learn about through tutorials. Head to jquery. com for the full documentation, plus other developer resources such as mailing lists and the bug tracker.

The jQuery

}).click(function() { return false; });

Finally, to complete the effect, we work some magic with jQuery to replace the image src attribute and load the content via Ajax. Include the jQuery library on your page and add the following code: } $(document).ready(function() { mapOverlay(‘assets/images/eden-’, ‘.jpg’); }); function mapOverlay(imgPathPrefix, imgExt) { $(‘#image-map’).append(‘<div id="desc-overlay">Loading...</div>’); var mapImg = $(‘#image-map img’); var mapImgOriginal = $(‘#image-map img’).attr(‘src’); $(‘#areas area’).hover( function() { mapImg.attr(‘src’, imgPathPrefix + $(this).attr(‘id’) + imgExt); $(‘#desc-overlay’).load($(this).attr(‘href’)+’ #’+$(this).attr(‘id’)) .addClass($(this) .attr(‘id’)).show(); }, function() { mapImg.attr(‘src’, mapImgOriginal); $(‘#desc-overlay’).html(‘Loading...’) .removeClass($(this).attr(‘id’)) .hide();

So let’s break this down. We have a function called mapOverlay that takes in an image path including any prefix (imgPathPrefix) and the image extension (imgExt). All the images for this effect have been consistently named to include eden- as a prefix, the id name of the element they belong to and the file extension (for example, assets/images/eden-gardens.jpg, assets/images/edentropics.jpg). This enables the function to be more robust. We could easily add a sixth area, give it an id with a corresponding image and we wouldn’t need to touch the jQuery at all. As mentioned previously, we generate our #desc-overlay element (which we set to display: none in our CSS) on load and show Loading... text by default, just in case there’s any delay during the Ajax call. Within the function, we store the image element (mapImg) and its original src attribute value (mapImgOriginal), then attach the hover event to every area element. On hover (mouseOver) we: ● construct and set the replacement src attribute, for example imgPathPrefix + $(this).attr(‘id’) + imgExt = assets/images/eden-gardens.jpg ● load the area content into #desc-overlay ● add the class I mentioned earlier that corresponds to the id of the area element to #desc-overlay ● show #desc-overlay Then on mouseOut we restore the original src attribute value (the base black-and-white Eden Project photo) and #desc-overlay back to their on load states and remove the class we added.

Going further

That’s it, all finished. I’m sure you can think of a ton of applications for this technique. Just a few that spring to my mind are: buildings on a skyline, rooms on a floor plan, clothes on a fashion model, books on a bookshelf … the list goes on. Have fun! ●

About the author

Team effort Team photos, as used on markboultondesign.com/about-us, are an ideal way to use this effect. Hover on each person and their name and job title are revealed

<prev

.net october 2010

Name Ryan Taylor Twitter @ryanhavoc Site www.havocinspired.co.uk hello.getsignoff.com Areas of expertise Design and front-end development Which languages do you speak? Yorkshire and bad English

G LWH P /L

OH XV 5 3O 7( YDLODE $6 DFHV D SO

Organised by

D\ 6 RUJ ' 6( WDO OO $6 IURQ )X &/ IXOO

fullfrontal 2010

The one day JavaScript Conference featuring these ямБne people

Alex 5XVVHOO

Brian /H5RX[

Dan :HEE

Seb /HH 'HOLVOH

Jan /HKQDUGW

Paul %DNDXV

WK 1RYHPEHU 'XNH RI <RUN┬╢V 3LFWXUHKRXVH

%ULJKWRQ 8. ┬Е 9$7

Silver Sponsors

)RU PRUH LQIR YLVLW IXOO IURQWDO RUJ RU IROORZ XV RQ WZLWWHU #IXOOIURQWDOFRQI :H DUH DOVR UXQQLQJ IXOO GD\ ZRUNVKRSV WKH GD\ EHIRUH )XOO )URQWDO IRU D OLPLWHG QXPEHU RI SODFHV 7KH ZRUNVKRSV DUH +70/ -DYD6FULSW $3,V DQG 0RELOH $SSOLFDWLRQ 'HYHORSPHQW ZLWK 3KRQH*DS

Gold Sponsor

Paul 5RXJHW

.net technique build_off

website build-off

T-shirt sites

Three top designers take on the Threadless domination of the T-shirt market, and design a site that sticks out

The brief Mock up the homepage of a T-shirt site that carves its own little niche. The design of the T-shirt store should stand out, make people interested and, most importantly, make them want to buy a shirt. Pay special focus on the user experience and navigation.

Designers Name Ryan Downie Company Armitage Online/freelance URL armitageonline.co.uk Ryan is the head designer at a small agency in Cumbria, and a freelance designer and developer. Clients include The RockstarFoundation, WooThemes and Obox Design. Name Tiago Maia Company Delete URL www.deletelondon.com Tiago Maia is a senior designer at Delete with a background in both web design and digital advertising. He has worked on projects for Orange, Coca-Cola, LG, Just Eat, Red Bull and Universal Music. Name Phil Coffman Company Springbox URL www.springbox.com Phil is an art director at Springbox, an interactive marketing agency based in Austin, Texas. He has done work for companies including Dell, AMD, Disney, PayPal and Scion. He loves his job and his family.

.net october 2010

.net technique build_off Expert info

Ryan Downie’s solution When thinking about how to approach my design, I decided to create a fictitious company (Smile On My Tee) using a site that sells a one-off T-shirt for charity. I wanted to look at a new approach, as I thought the other designers would probably go down the route of creating a homepage for a full ecommerce store. As I’ve recently been working on a charity website, this seemed like a good design route to go down. The focus of the design is to let the T-shirt do the talking, so I wanted a light, friendly colour scheme, and bold type that matched well with the motif on the T-shirt – which I also designed myself. The target audience would be predominantly made up of male users in their early to mid-thirties.

Each T-shirt will be unique and only 100 will be sold. Starting from the number 01 right through to 100, only one of each number will be printed. Once the run is sold out, that’s it. The technology behind this website would be simple. It would be coded in HTML5 and use CSS3 where possible for the border-radius, text-shadow, box-shadows and transforms, where this is possible. jQuery will be used for the image colour options – once hovered over the option, the T-shirt colour will change. For the backend, the site would be perfect for ExpressionEngine 2.1, for ease of updating and the blog, and would use the simple commerce module that comes with ExpressionEngine to manage the checkout. As the site is just for one T-shirt with a limit of 100, this is the perfect solution. ●

Ryan Downie’s month What have I been doing?

I just joined the web agency Armitage Online (www. armitageonline. co.uk), so I’ve been working on a few client projects and recreated their new site. Should be live at the time this hits the press. Freelancing, I’ve just completed the build for www.therockstar foundation.com, which helps young girls in Africa, and the front-end development for the new www. afrigator.com site for Mark Forrester.

Close up

2 1

Sites I’ve visited

For my inspiration I check out www. unmatchedstyle.com as much as I can, and of course www. dribbble.com.

What have I been watching?

Been catching up on Fringe and 24, as the last few months have been crazy busy with freelance and the new job.

What have I been listening to?

The image

T-shirt options

I made sure to have a large image of the T-shirt so that it stands out on the page. I also show how many of the designs are left, to try and urge the buyer to make a quick purchase.

A unique way of showing which options are in stock, running low or sold out. There’s nothing worse than finding they don’t have your size, so this tells you at a glance.

The pricing

Recent people

There’s a simple but large pricing structure that stands out underneath the main heading. This is one of the first bits of information you want to find out – how much is it?

This bit shows who else has bought the T-shirt. It’s a means of adding a bit more incentive for people to buy, as people they know – or may have heard of – might have one.

The charity

Twitter

Why buying a T-shirt makes a difference. This is where the charity content will go to try and convince the user to buy. It’s not just a nice T-shirt, it helps people too!

All good brands use Twitter to interact with customers. This lets you know how well your product is doing with a real time search, and can show if there are any customer problems.

The new Eminem album, and some rap playlists I’ve found on Spotify.

Turn over to see solutions from Tiago Maia and Phil Coffman >>

.net october 2010

next>

.net technique build_off Expert info

Tiago Maia’s month What have I been doing?

Recently completed a website for the iconic British record label Decca (www.decca.com) and coincidently Delete’s own T-shirt store (www. delete.spreadshirt. co.uk). I’m currently working on a new site redesign for online takeaway service Just Eat.

Tiago Maia’s solution T-shirts are all about individuality and attitude. The allure of buying a T-shirt from an independent online store is that, with so much choice available, you’re almost certain to find a great T-shirt that you can pretty much guarantee you’ll never see anyone else wearing. Nowadays, digital printing techniques allow for very low print runs to be produced at cost effective rates. Therefore I’ve decided to create a limited edition boutique store based on Delete’s own Kings Of Nothing concept. The KON celebrates the unapproved and experimental work of Delete. Limited edition in this case means 10 of each T-shirt design, which is why I have decided on the name OneOf10. In this competitive market, many stores build their brands around

a concept to ensure they stand out in the crowd. My Oneof10 store is all about celebrating the uniqueness of each design, treating the T-shirts like a limited-edition art print. I want to draw attention to how many T-shirts are remaining for each design – creating a sense of urgency in the purchasing process. The design is bold and simple, with a handmade edge, and the site focuses on each T-shirt rather than an overwhelming catalogue of products. On the homepage, the latest design would be featured. Ten models would each wear it, allowing the user to scroll horizontally and view it from different angles and on different people. Each time a T-shirt is sold, the content is refreshed, creating another shirtless model – adding a sense of humour and consumer reality to the experience. ●

Close up 6

Sites I’ve visited

I wanted to try to design this site around an unusual concept, and a couple of sites that got me thinking were the fighting T-shirt one (www. shirtfight.com) and the blind ordering one (hipstery.com).

1 5

What have I been watching?

30 Rock seems to be the only thing my girlfriend and I agree on at the moment. When she’s not around, I’ve been watching plenty of Secrets of WWII-style documentaries.

2 3

What have I been listening to?

I have no idea. Most of the music I listen to is in the office, and our UX guy Tom controls it. I just go with it. We’re also currently sharing an office with some old school guys – 70s prog rock anyone?

<prev

Carousel

Detail view

Giving the user multiple views of the product, the carousel would be built using JavaScript, giving the site a dynamic feel without the need for iGadget-unfriendly plug-ins.

The user can choose to view a T-shirt design in more detail via a modal box. They can do this by clicking on the thumbnail next to the shirt name and description.

.net october 2010

Social networking

Call to action

The ability to share the website, or individual T-shirt designs, with friends via Facebook Like and social network sharing functionality is included to increase awareness of the site.

The price and main call-to-action button are clearly positioned to the right and in a distinct colour from all other buttons. Further details are available upon pressing the ‘buy’ button.

Most wanted

My store details

The need to ‘hurry up and buy’ is highlighted in a panel at the bottom, with the designs closest to selling out being constantly updated and pushed forward.

All personal user information, including all the My Basket and My Account history, is contained in the standard position at the top right of the page.

.net technique build_off Expert info

Phil Coffman’s solution When I heard the brief was for a T-shirt site, I immediately decided to build it in the same vein as many existing T-shirt sites that function to raise money for a good cause. The orphan care crisis is something my wife and I have been learning about recently, so I knew I wanted to use that as the foundation. I started by developing a name, and landed on Life Awaits. We felt that this name could have multiple meanings that could all work well in this setting. It speaks to the child who is waiting to be loved and accepted, and hints at their future, which has yet to be told. I decided that each shirt would be tied to a story shared by a child representing an orphanage somewhere in the world, making the buyer feel more connected to the cause.

The hero area of the homepage provides multiple points of entry into the site. Not only can a user purchase a shirt, but they can learn more about the story behind that shirt, and some general statistics about orphans in that geographic area. They also learn that half of their purchase benefits a local organisation that will directly impact the children in that location. The carousel below the hero area gives quick previews of the available shirts, and powers the hero area above it. I treated them in a lifelike manner, and incorporated shadows to give the site some depth. When I began I had basic shapes for the Next and Previous arrows that cycle through seven shirts at a time. But then the idea to use coat hangers hit me, and it makes this navigation area a little more unique. ●

Close up 1 2 3

Phil Coffman’s month What have I been doing?

I wrapped up a pitch comp for a client in the entertainment industry, which is always a chance to design something out of the ordinary. I’m also building a new site (methodandcraft. com) that focuses on the creative mind and the beauty found within each pixel.

Sites I’ve visited

www.dribbble.com provides constant inspiration, and has become a site I visit throughout the day. I just revisited www. weightshift.com, because I greatly admire Naz’s ability to display content that’s both beautiful and well-presented.

What have I been watching?

I’m an avid Netflix user and have been streaming a lot of episodes of American Chopper. Also, my wife and I are wrapping up the BBC Robin Hood series.

What have I been listening to?

Categories

Shirt categories are the main navigation area, and have prominence over the rest of the site’s navigation in order to help visitors get to the shirts quickly.

Shirt design

The shirt designs resemble children’s drawings, and help to reinforce the idea of the innocence of children, and the hope they hold for a better life.

The hero area

The hero area provides the price, size and purchase information that users will expect, and pairs that directly with the real-world stories that inspired each shirt.

The colours

The site utilises colours that are warm and friendly, the background being an especially cosy brown. Aqua is used for calls to action, and helps guide the user throughout the site.

Photography

The use of photography provides a human element, which is paired with real-world statistics about orphans, to encourage users to buy into the charity element of the shirts.

Video

Jonsi’s Go and Plastic Beach by Gorillaz on high-rotation.

Have your say …

Got a suggestion for a new site build-off? Let us know at netmag@futurenet.com

A recent video of the good work of the charity draws the user’s eye down the page and directs their focus to the supplementary content in the footer.

.net october 2010

.net/technique/opinion

Micah Rich on…

The font revolution It’s time to take on the type foundries and start making our own fonts, says Micah Rich of A Good Company As the first non-profit type foundry, The League of Moveable Type exists to bring real typography to the internet. We started at the beginning of 2009 by releasing for free a typeface one of our founders had created. Not only was the world allowed to use it, but we encouraged designers to open up the source files, modify it, remix it and re-release it. We took cues from the successful open source programming community, into which I’ve dipped my toes. I’ve straddled the line between designer and programmer, and it puts me in a unique position to merge the ideals of both communities. Consider, for a second, that programming is as much art as it is science. Programming is about creatively solving problems: there’s never a single correct answer; every solution has to be invented. Conversely, developing a typeface isn’t all art – there’s science to it. There’s human behaviour to keep in mind, and honest-to-goodness programming to get a font to show the correct ligatures or to kern specific letter pairs. Neither programming nor typography are black and white. In fact, they’ve got a whole lot in common. This is the tipping point that made The League realise that the open source model could spin the typography community on its head.

The benefits

Web design has been so far behind other forms of graphic design for so long that everyone’s yearning to be able to use the fonts they want online. We still appreciate the web font classics, but we’re finally starting to demand the ability to use the

.net october 2010

fonts we love on websites too – and browsers are starting to listen. What’s stopping us? Two things: 1. Browser support is inconsistent I was making a blog that used @font-face when something clicked. Making it consistent was a painful experience. Every browser requires a different format and some need real wrangling to get them working. Chrome and Safari were fine with regular TTF files, but Mobile Safari required an SVG font. Firefox for Mac used TTF files, too, while Firefox for Windows required some weird programming – it restricts @font-face to same-domain-name-only. Internet Explorer 7 and 8 worked once I added a whole new EOT file format. We need consistency. The browsers should agree to use real font files across the board, so that we can stop wasting time arguing and start designing fantastic sites. Why real font files and not a protected format such as WOFF or EOT? We already own real font files. A few type foundries are selling protected web font formats as separate purchases. When we buy a font, we buy it to be able to use it, don’t we? Not as a Photoshop preview of what we wish our site designs could look like. EOT, WOFF, domain restrictions – why are the browsers trying so hard to protect the fonts, rather than enabling web designers to create innovative designs? 2. What fonts won’t we get sued for using? The type foundries are terrified. Technology is catching up with their antiquated business model – a font file costs nothing to duplicate, yet hundreds of dollars to purchase. But we’re not really paying

for the font file; we’re paying for the ability to use the typeface. Restricting where and how we’re allowed to use the typeface reduces, if not annuls, the point of buying the font in the first place.

Call to arms

The League of Moveable Type is here to lead a coup d’état. Right now the font foundries control everything: there’s no competition. I say we give them a run for their money. I say we take up arms and build ourselves a community where open source is the norm, fonts are paid for when they’re well designed and we’re allowed to actually use them. I say we devise a system of sharing our work, so we can learn from others, modify and remix. Let’s make our own fonts, instead of solely relying on the type foundries to give them to us. l The League of Moveable Type (www.theleagueof moveabletype.com) is the first non-profit type foundry. It was started in 2009 by A Good Company, a small design firm founded by Micah Rich and Caroline Hadilaksono (www.weareagoodcompany.com).

“Take up arms and build a community where open source is the norm” Micah Rich

.net overseas_subscriptions

Exclusive USA & Canada offer

Subscribe today! * Save 40%

Just visit www.imsnews.com/net-a013 Never miss a copy l Stay up to date on the latest techniques l Every issue delivered direct to your door l Big savings off store prices “Practical Web Design is crisp, fresh, thought-provoking and playful. You’ll like it!”

Don’t live in US/Canada? 0 Turn to page 4

Vint Cerf, Google vice-president *TERMS & CONDITIONS *Savings based on average price of buying 13 issues at $15.99 each from newsstand. You will be charged in USD. Minimum subscription term is 12 months. You will receive 13 issues of .net a year. Please note you will receive UK version titled “.net” not “Practical Web Design” (don’t worry – the contents are exactly the same!). If you are dissatisﬁed in anyway during the next 60 days please notify us in writing and we will refund all unmailed items. Your subscription will start with the next available issue. This subscription offer ends 30 November 2010.

.net october 2010

.net technique makeover

makeover

www.sparks.org.uk

Children’s medical research charity Sparks is looking to overhaul its website design and content to increase footfall and donations. We asked designer Jay Hollywood to offer his advice The brief Site www.sparks.org.uk Site owner Sparks Brief Encourage users to engage with the website by introducing a more modern and appropriate look and feel.

There are too many items competing for our attention and there’s no clear hierarchy. There’s a lack of attention to detail. The main text is justified and reasonably small, which makes it difficult to read. There are navigation elements throughout the site with no clear function. There’s no distinction of purpose between content areas. The site required a complete refresh – it needed to present itself in a way that was appealing to its viewers, remained professional and was able to deliver information with more clarity and structure.

Look and feel

The designer Name Jay Hollywood Company Humaan URL www.jayhollywood.com. au and www.humaan.com.au Areas of expertise Design for all things digital

The content and information provided within the Sparks website is up to date, relevant and thorough, but it seems that the design and information architecture haven’t been given the same level of attention and they’re affecting the website’s real potential to engage its users. On first look, it’s obvious that the people looking after the Sparks website have dedicated a great amount of time and effort to delivering what they have today. They’ve already got all of the right information for a great website, but aren’t presenting it in a way that’s appealing to the user. Added to this, the site seems to be directed at the wrong audience – it’s too technical and lacks the vibrancy and fun that exists within the charity and the team behind it. The foundations of the website are there, but it falls short of presenting an inspired design that properly conveys the charity’s background and purpose. Overall, I found that the biggest issues and areas for improvement were: The colour scheme is not complementary and often makes the website difficult to use.

.net october 2010

The biggest issue I had with the existing website was that it wasn’t what I’d have expected from a charity dedicated to helping children. I wanted the new site to reflect its values directly and communicate its purpose in a more light-hearted and welcoming manner. With this in mind, I decided to begin with the logo and colour scheme. Starting with the logo was a tough decision, because it’s part of Sparks’ established brand. I didn’t want to make any radical changes, just introduce a more approachable aesthetic that would fit in with the rest of the design. The result wasn’t too different, but moved away from the harshness of the previous typeface. I chose Quicksand for its approachable aesthetic, but also because it was available as an embeddable web font that could be used for headings and display text within the website. The existing colour scheme lacked vibrancy and in some places made the website difficult

The navigation on the existing site was prominent, but lacked personality and wasn’t encouraging users to browse. I moved ‘Login’ to the top of the page and removed the words ‘in the’ from ‘News’ because I felt they were unnecessary and misleading. I decided to incorporate relevant icons for each of the main navigation items in the header. These would be useful for increasing the prominence of the navigation overall, but would also encourage interaction, help users to visualise the purpose of each section and maintain the new aesthetic that I was aiming for. The original website included several areas for important information, but there was no hierarchy between them. With the new design, I introduced a ‘feature area’, with the intention of displaying five interesting elements that Sparks would want the visitor to see, using JavaScript to cycle through them over a period of time. This area sits directly under the navigation and includes a title, image and summary for each item, which links to a page of Sparks’ choosing. Added to this, the most recent news and events would be displayed with less prominence below, along with the introduction from the current website.

Adding clarity

Included within the existing design was a link to sign up to the Sparks newsletter and a list of ‘Quicklinks’. I decided to incorporate these into a sub-footer between the main content and footer of the new design. This would bring clarity and separate these items from the main content. Also included in the sub-footer was an expanded set of supporter logos from the existing design, which reduced the need to animate them one by one

“They’ve got all the right information for a great website, but aren’t presenting it in a way that’s appealing to the user” Jay Hollywood

to use. To introduce a sense of fun, I decided to incorporate a pastel-based colour scheme. It was important to keep blue as the primary colour, but I also brought in a set of secondary colours that would complement the design and help with the separation of content. Added to the new colours and vibrancy, some subtle textures would bring more life to the design and further communicate that the focus is on children.

and helped to display them in a way that wasn’t exhausting for the viewer. Finally, the footer is more structured and re-introduces the colour and texture from the top of the page. Included here is Sparks’ original content, but also a repeat of the main navigation items and social links to encourage engagement. The revised design can be viewed in full at www.jayhollywood.com.au/dotnet/sparks.jpg. ●

.net technique makeover

4 5

Logo and colours

Refreshing the logo and colours was incredibly important to the whole redesign, because they helped to set the stage for the rest of the structure and style. I updated the logo with a rounded typeface that would be unified with the rest of the aesthetic, and the new colour scheme introduced pastels to create an atmosphere of fun. I also added subtle textures to bring more depth and life to the design.

Navigation

I reduced the navigation in size slightly, but the biggest update was introducing icons for each of the main items. The purpose of this was to encourage users to engage with all of the main sections of the website. It also served as a way to help increase the prominence of these items in the header.

Feature area

The original site included a lot of different content areas that seemed to compete for attention. The solution was to incorporate all of the main feature items into one panel, which would be prominent but enable the user to view them without being overwhelmed. This way, they could all include a title, image and summary, but also maintain the structure, enabling the user to view them at their leisure.

Call to action

Donations are a big focus of the website, but in the original design all of the call to action buttons seemed to get lost. I’ve introduced a donation button under the ‘About Sparks’ box, which gives it a lot more prominence but doesn’t distract from the rest of the content. The button is also separated from the surrounding material through the re-introduction of colours from the header, which help draw attention to it.

Newsletter

The original site design included an email newsletter, but it was linked through several pages and then required a login. The new design incorporates the newsletter form within the page, under the main content. It enables visitors to sign up to the database directly, without having to click through or log in first. This would be included on every page of the website, encouraging users to sign up and receive regular information about Sparks’ news and events.

Pimp my site!

Does your site lack lustre? Could it benefit from a few tweaks? To get an expert opinion, email your URL to netmag@futurenet.com

Tell us about your redesign!

Has your site recently had a makeover? Let us know what’s changed and why! netmag@futurenet.com

.net october 2010

.net technique how_we_built

how w_we_built

www.42below.com

Digital creative agency Gladeye has developed a new site for the iconic New Zealand brand 42BELOW Vodka. Interactive director Tarver Graham spills the beans

.net: Why did Beijing-based creative communications agency Ilizz choose Gladeye to redesign 42Below.com? TG: Ilizz actually had a New Zealand office and a team servicing the 42BELOW account here at the time we were brought onto the project. And the guys from 42BELOW, who are also Kiwis, had seen our work and liked what we did, so there were a few angles. We submitted a pitch based on a brief from Ilizz and I think that was the clincher. .net: What brief did they give you? TG: What we were asked to build was more like a branded content distribution platform than an individual website. 42BELOW is known for its experimental and unique promotional activity, often involving other promo micro-sites, news feeds and various flavours of syndicated content. They needed a flexible framework that could accommodate this variety of content, either as banner graphics throughout the site, news posts, or as feeds from elsewhere (eg Twitter). And they

3D world Two types of parallax scrolling combine to create a convincing 3D effect for the Products section

www.42 below.com

From the beginning…

100

Dec 2009 Meet with Ilizz, hear the brief, present our ideas and technical treatments, and get sign-off. Celebrate with vodka martinis.

.net october 2010

wanted the site to feel alive, with content that didn’t just change day to day but while you’re actually there looking at it. There was a special emphasis on the products section; that was to feel immersive and unique. .net: What were the main design considerations? TG: 42BELOW is one of the coolest brands in the entire world. So you could say we felt a little bit of pressure to deliver on design. Working within the WordPress framework but still making a site that felt totally unique and original was a major consideration. We had to meet the brief and provide an extremely dynamic CMS and animated feeds within a look that worked for the brand, and didn’t feel at all like a WordPress theme. .net: What kind of issues did the age verification page throw up? TG: No one likes an age verification requirement. There’s no doubt it’s an accessibility barrier. We looked for a way out, but the law said no. We had age verification working in JavaScript at first but realised that there was a quick hack around that (turn off JavaScript). So we went with a server-side solution, with a PHP sidestep for site crawlers. .net: How did you decide on tools and technologies? Why the WordPress backbone? TG: WordPress has become a natural choice. It’s really blossomed into a fully featured CMS system and a platform in its own right, on top of which you can build your own functionality. There’s a danger that if you make too many custom edits you lose the ability to update as new versions are rolled out. We walked a fine line with this website, but with WordPress 3 around the corner we made sure we kept the core intact. We also used a lot of jQuery, in particular jQuery Address to build the navigation. jQuery offers a huge and incredibly useful JavaScript library. We find it indispensable for the rapid development of site features.

Early Jan 2010 Develop prototype Flash planet. Client loves it, and the development is so easy it looks like a smooth ride. (How wrong can you be?)

Late Jan 2010 Develop jumping menu and sliding page JavaScript prototypes on a WordPress backbone. Experiment with custom widgets.

Premium brand Recipes, news and stories all follow – and contribute to – a strict brand identity .net: Why use Flash, which you call “not exactly the flavour of the month”, for the product section? TG: Some of the bad press for Flash is fair: it’s a proprietary platform in an increasingly open web. But there are also a lot of misconceptions, like the idea that Flash sites are inherently heavier, which isn’t at all true – we’ve built rich animated Flash sites under 20k. Flash offers easy scripting and the ability to integrate massive media assets directly onto the stage. Because the learning curve is low, that awesome power is too often used for evil. We made a prototype of the parallax action in JavaScript, but there was no way we could have offered that experience to 98 per cent of desktop users. .net: How did you achieve the 3D effect? TG: By overlapping many layers of 2D objects all rotating and/or shifting on the x-axis at different speeds, relative to their apparent depth in z-space, creating a parallax effect. There are two flavours of parallax at work here – a strictly horizontal parallax based on mouse movement, and there’s a rotational parallax, which occurs on transitions from one flavour hemisphere to another.

Early Feb Develop Photoshop-toFlash workflow for building landscapes and bringing rich, art-directed images into the rotating planet.

Late Feb Photoshop crashes for the 100th time. Make more, stronger vodka martinis, adjust workflow methods and press on.

.net technique how_we_built The techie bit

Close up www.42below.com 1

Menu editable in WordPress CMS. Page sections shuffle into place automatically, and custom JavaScript allows dynamic page turn and jump-to-section actions.

News

Widgets

Products

Animals

The site was built on WordPress using the Carrington JAM (Just Add Markup) theme framework. Coders worked in TextMate. Several custom widgets were built on this platform, such as animated galleries and a Twitter feed widget. For site interaction, jQuery is used heavily because of its excellent support for Ajax requests. The jQuery Address plug-in is implemented for deep linking Ajax content. Flash is used for the product section (with alt image content for nonFlash). Elements were prepped in Photoshop and imported to Flash for programmatic animation in AS3. The site is hosted on a LAMP server.

Editable

WordPress backbone allows client to post news content with familiar, accessible tools, and to update graphics and widgets site-wide.

Custom widgets include a Twitter feed and slideshow widgets, with several CMS-controlled animation settings.

Flash products section. Pseudo-3D rotational parallax action on transitions and horizontal parallax on mouse movements.

Animated squirrel in awe of vodka bottle, dancing honey-bear loves sweet honey flavour. Animals do not drink spirits.

.net: What were the main obstacles? TG: Software performance was a battle. We had planned to design the product planet in a single Photoshop file so each flavour hemisphere connected seamlessly to the next. But because each successive foreground layer had to be larger than the one behind, to achieve the parallax action, we ended up with files 10,000px across, containing hundreds of smart objects. We suffered endless crashes, especially porting graphics between Photoshop and Flash on an iMac. .net: What did you do in terms of user testing? TG: We prototyped everything. We were able to show the client basic prototypes of the jumping menu action, JavaScript page slider, semi-

March Bulk of the development completed. Alternative content for non-Flash devices made, and tested on the iPad.

Late March Agency changes mean an opportunity for updates to art direction. Augmented reality project, based on the planet, starts with Ilizz.

transparent PNG bottle, all the custom WordPress widgets and the rotating Flash parallax and character animation. Each prototype was turned around in a couple of days, and we used these to test performance in a variety of situations. I think we pushed it as far as we could. This site won’t run well on a Pentium III running IE6, but you have to draw the accessibility line somewhere. And I don’t think these people buy a lot of premium vodka, so it’s an acceptable balance. .net: How has the site gone down since launch? TG: Very smoothly. The client loves the CMS features and is a prolific poster, and we’ve had great feedback, especially from other developers and designers, which is the most satisfying kind. ●

April Client lawyers approve the website, but some amorous turtles on the beach are made more acceptable for an international audience.

Proﬁle Name Tarver Graham Job Interactive director Company Gladeye Website gladeye.co.nz

Proﬁle Name Ken Vu Job Senior developer Company Gladeye Website gladeye.co.nz

Proﬁle Name Lee Grey Job Senior developer Company Gladeye Website gladeye.co.nz

Turn the page to learn how to create horizontal page slide transitions in WordPress >> .net october 2010

101

next>

.net technique how_we_built

ccreate horizontal page slide transitions Gladeye’s senior developers Ken Vu and Lee Greyy explain how to use jQuery to achieve horizontal page slide transitions in WordPress Knowledge needed PHP, HTML, CSS, JavaScript (jQuery) Requires WordPress with jQuery, and a text editor Project time 2 hours In classic HTML websites, navigating between pages causes the whole page to be reloaded and consequently re-rendered by the browser. Discrete, stand-alone pages have been the mainstay of the web for some considerable time, and with them comes the expectation of an empty white screen between pages. But Ajax has turned those expectations around, allowing asynchronous loading of content on a page instead

START Add jQuery to your WordPress environment Use wp_enqueue_script in your theme’s

functions.php file to enqueue jQuery (enqueue: or queue up, or just add). This will ensure that WordPress includes jQuery in your theme’s header.

Construct an Ajax query Next, use jQuery to request the WordPress page. The success callback should inject the content into the destination-container div.

<prev

102

.net october 2010

of necessitating a page reload. In this tutorial we’ll go a step further than loading individual pieces of content on the current page. We’re going to use jQuery to load an entirely new page into an off-screen background div, and create an animated sliding page transition so the user feels like they’re moving smoothly to the new page, instead of stepping into the void of a white window before seeing new content. You’ll need to work with a little bit of PHP here, and the jQuery JavaScript library is essential to create this effect. jQuery provides convenient crossbrowser Ajax functionality and DOM animation tools. This technique could be applied to any site, but this tutorial assumes a WordPress environment that includes jQuery. ●

Expert tip Carrington JAM This tutorial has been written to make sense in the context of a standard WordPress theme. But building on a reliable framework gives you a more versatile platform to work on. The Carrington JAM (Just Add Markup) theme framework (see carringtontheme.com) allows for contextual page customisations, and generally provides a more organised and graceful project structure. Carrington JAM has a reasonably steep initial learning curve, but putting in the effort early on will pay off later with a smoother development process and easier advanced customisations.

Test for Ajax request A key to injecting content loaded by Ajax is to be able to retrieve ‘footerless’ and ‘headless’ page content. Use the php $_SERVER variable to check if a request was sent by Ajax. If so, we won’t render header or footer content before and after your loop.

Tidy up after transition Remove the current-page div with jQuery.remove (). The destinationpage div will float left to take its place. Reset the container left position to 0 and rename the destination-page div to current-page to reflect its new role.

Construct HTML frame Current and destination pages should be contained by two nested divs. First, a masking div 1050px wide (class name .mask and CSS style overflow:hidden). Inside that, a 2100px wide container (.pagecontainer). Add two 950px page container divs.

Animate the page slide When the Ajax request has finished and the loaded content has been injected into the destination-page div, animate the page-container div from right to left using jQuery.animate(). The left value should be the exact width of the page, 1050px.

FINISH

.net web_pro

This month’s selection of advice and opinion from the web industry’s leading professionals (below) Opinion/Making mobile work p117 Mat Diss – “The reality is

that the vast majority of apps are effectively mini mobile websites”

(above) Security/Firefox revisits :visited p113 Mike Williams – “It’s a

good idea to test your sites with Firefox 4 as soon as you can”

discover > Don’t miss an issue >

y: Subscribe toda 40 ge see pa

110

Search/Optimising SEO with video

(above) Expert advice/Expert tip of the month p106 Usman Sheikh – “Eledicss runs as a server-side PHP

script and enables you to edit your CSS files live”

David Deutsch explains how video can help boost your website’s ranking

112

Ecommerce/The dawn of m-commerce

experts > 104

After a couple of false starts, mobile ecommerce seems to be off the tracks at last, says Fadi Shuman

113

Security/Firefox reworks :visited

Mozilla ﬁxes an old privacy bug with Firefox 4, says Mike Williams

114

Startup/The importance of market research Researching your sector properly is vital to the success of your startup, says Wendy Tan White of Moonfruit.com

115

108

117

Expert advice

Columns from Doug Logan and Léonie Watson plus your questions answered by Dave Chaffey, Struan Robertson, Wendy Tan White, Usman Sheikh and Tom Hughes-Croucher

Big Question

What are our experts’ views on the furore surrounding WikiLeaks?

(above) Focus on/Social media strategy p104 Doug Logan – “Social

media is a conversation: think of it as word-ofmouth on steroids”

Opinion

Mat Diss considers how to best meet the needs of mobile web users

Host/Psst! Fancy a Colombian TLD?

Is the ‘.co’ top-level domain a viable alternative to ‘.com’, asks Karl Hodge

116

Marketing/Are you using the right APIs?

APIs can give us new insights into our digital marketing, says Dave Chaffey

.net october 2010

103

.net web_pro/expert_advice

_ expert advice Send your questions to netmag@futurenet.com

Tracking pricing changes

I want to test pricing changes for four products. How do I use Google Analytics to track how many people click ‘Add to Basket’? From: Michael Dave Chaffey: You have two options for this. First use event tracking to record the product added to the basket. Using Google’s new Asynchronous tracking, the onClick event of the hyperlink could have this syntax: onClick=”_gaq.push([‘_trackEvent’, ‘Shopping basket’, ‘Add to basket’, ‘Product id or description’, ‘Integer value of product price’]);” The second option is to create a ‘virtual page view’ when the item is added to the cart. A virtual page view is a page created and visible in Google Analytics although no physical page is displayed. The syntax is: onClick=”_gaq.push([‘_trackPageview’, ‘/ added-to-cart’]);” The benefit of this approach is that the cart add can be tracked as a goal with conversion

rate in Google Analytics and you can then use navigation summaries to understand which pages preceded the page view. A similar approach is often used for tracking PDFs.

Creative Commons

I’d like to make my photography available under a Creative Commons licence, but I’d like to keep open the possibility of withdrawing the licence in future for one or more of the photographs. Can I do that, or will my work remain under Creative Commons forever once I make it available? From: Nila Struan Robertson: A Creative Commons licence is perpetual and cannot be revoked. You can stop distributing the photos under a Creative Commons licence but once someone else has begun using your photos under that licence, you cannot stop them. Remember that there are different flavours of Creative Commons licence, though. You might wish to distribute your photos under the ‘non-commercial’ Creative Commons licence, which prevents others making money off your photos but doesn’t prevent you doing so. Or perhaps you would prefer to use a different type of licence altogether, one that is time-limited, giving you greater control over others’ uses of your photos.

Google keyword

It seems that my competitor has bought my name as a keyword advertisement on Google and so is benefiting from my brand’s good reputation. Is there any way I can challenge this legally? I don’t want to pay them off because I think what they’ve done is unethical and underhand. From: Galen Struan Robertson: If the advert refers to your brand, you can take advantage of Google’s AdWords policy to have the ad removed and avoid going to court. The use of the brand as a trigger for a rival’s ad is more controversial, though. Google’s policy allows that in the UK, but it is the subject of ongoing litigation. Most recently, in July, Europe’s highest court said that a company can stop others using its trade marks to trigger search engine adverts if those adverts do not allow a web user to tell which company is behind the ads. Find out more here: out-law.com/page-11216.

Licensing audit – weird one

My company has used a particular ecommerce platform for years as we have a developer’s licence, meaning we can build as many sites as we like after an initial one-off payment. Clearly this business model hasn’t worked for the company that sells the software as they first stopped

Focus on… Social media strategy Proﬁle

Scot Gordon

Name Doug Logan Job Web and interactive director Company Inovat URL www.inovat.com

How do you consult clients about social media? It might sound strange, but I always start by informing them of the potential downsides. Social media is a commitment much like a longterm relationship. Every great relationship takes time and a lot of work before it really pays off, and sometimes they don’t. Problems arise in any relationship when you don’t communicate properly, or worse, when you

104

.net october 2010

don’t communicate at all. A lot of companies will do just that. They’ll start something, like a Facebook page, and for the first month or so they’ll update it regularly. But then interest starts fade, and the “honeymoon period” is over. That’s when the reality sets in; you actually have to work at this to make it worthwhile.

Setting expectations

So how do you guide expectations for clients when confronting social media? Here are a few other things to keep in mind when you’re consulting a client on social media: ● It’s a commitment. You have to be able to give the time that social media demands, even if you’re not seeing a benefit yet.: ● Be honest – to yourself and your followers. Social media is a conversation: think of it as word-of-

mouth on steroids, or at least online for that matter. At the core it’s still people talking to people. ● It’s give and take, not just take. You need to give back, contribute to the conversation, and not just sell them your products or services.

The downside

About a year ago I wrote an article on our blog, the Inovator: if you want to read it go to bit.ly/ socialplunge. The blog post talks about the same warnings I presented in this article. The irony, however, lies in the fact that I didn’t listen to my own advice, and the blog went untouched for over a year. Before we stopped updating the blog, we had a fair amount of traffic coming in. People were talking with us via comments, email, tweets and even some phone calls. But when we stopped posting, people

Brought to you by

/your experts Design Usman Sheikh

Information architect and managing director Usman is the MD at Contrive Digital Ltd. www.contrivedigital.com

Development Tom HughesCroucher

Web developer Tom is a standards-obsessed developer currently working for Yahoo in San Francisco. www.kid666.com

issuing new developer’s licences, then withdrew the ‘free lifetime support’ that came with it. Now they claim to be undertaking an ‘audit’ and want me to provide them with a list of all sites we’ve built using the software. Is it just me or does that seem a little odd and fishy? In one email they asked me to ‘ensure (I) adhere to current and future terms’; in the next they tell me ‘terms change from time to time’, which both sound awfully vague. They’ve also given me seven days to comply or they threaten to contact my clients directly. Would you? From: Name provided Struan Robertson: Many licences or accompanying agreements will contain a right of audit. That is how the Business Software Alliance gains a right of audit on behalf of its members. If your licence does not mention a right of audit, it may be that you don’t have to comply with the audit request. However, if you think your supplier suspects infringement by you or your clients, you may wish to speak to a solicitor before replying to this request. As for an email demanding that you adhere to all current and future terms, if the demand came in an email and is not part of your contract or licence, it may be that the demand has no effect unless you choose to accept it. In any case, such demands are

Keep it real Being honest in social media makes a big difference. Read our apology at bit.ly/droppedtheball

began to fear the worst; what if we had gone out of business altogether? What is the importance of all of this? It’s vital for you to understand the implications of starting out on social media and what all it implies. Work with your clients to set realistic commitment expectations and goals. In the end, they will be happy you did. ●

Legal Struan Robertson

Senior associate Struan works at commercial law ﬁrm Pinsent Masons, and is editor of OUT-LAW.com. www.pinsentmasons.com

Marketing Dave Chaffey

Digital marketing consultant, author and commentator Dave advises businesses on all aspects of digital strategy and practice. www.smartinsights.com

Business Wendy Tan White

Entrepreneur Wendy is the co-founder of free site builder Moonfruit and is marketing director of Gandi. www.moonfruit.com

“If the advert refers to your brand, you can take advantage of Google’s AdWords policy to have it removed” Struan Robertson

subject to a test of reasonableness under the Unfair Contract Terms Act, even in business-tobusiness contracts. Wendy Tan White: Regarding the new terms and conditions, I’d check the current terms and conditions for your licence, which the company must have available on their website, and then cross-reference these with the terms you signed to when you initially joined. If you’re unhappy with the new terms I’d try and appeal to them to come to a reasonable compromise given that you’re a long-standing customer. If you have the proof that they’ve shifted the goal posts, you might be able to appeal to them to come to some agreement.

E-tail novice

Sorry for the newbie questions, but I’m planning to set up an online store selling (legal!) music downloads of World Music, and I’m trying to get my head around the financial/technical side. I’ve been told that I need a merchant account to accept credit card payments, but that because I don’t have a bricks-and-mortar shop I need a special type of account – is that true and what’s the best way of going about it? From: Melanie Wendy Tan White: An essential element to setting up your online shop is a trustworthy way of collecting payment. I personally recommend both WorldPay and PayPal as they act as a badge of credibility and trust on your website. It’s difficult to underestimate the value of these two factors when you’re asking for people to part with their money. There are a lot of cons out there and these badges legitimise your business in the eyes of consumers. Another option is to have your online payment system white-labelled, which removes all third-party branding. SagePay is a good product for this. However, most people want to know who it is their money’s going through so I would advise against it. For higher volumes of transactions, the major banks provide merchant services where card transactions are processed via your

website without any of the bank’s branding being visible on the website. This option is often more expensive than running PayPal or WorldPay, and is aimed at much larger, trusted brands, so it’s probably not advisable as you’re just getting started out.

Processing payments

A friend and I set up a design partnership back in December and since then work has come in steadily. We now have our first ecommerce project, which we’re in the process of producing a technical spec for. The client is a medium-sized plant nursery selling plants online, currently through EKMPowershop. At present they’re taking details online through EKM and then entering these using a standard PDQ terminal from their bank. Not sure if that’s fine as it’s possibly against the terms and conditions of their bank? I wanted to move them towards a server integration of SagePay. However they didn’t like this idea. At the moment, when someone places an order and submits their payment details, these are often stored for a period of time (eg up to three months) because the plants are grown seasonally and then entered using the PDQ. Is their anything wrong with this legally? If not, what service can we use to allow them to simply store payment details securely online? I’m not prepared to store them on my own server: even with encryption, randomly generated salts and so on, it’s not a risk I’m willing to take. From: Stuart Wendy Tan White: Storing and entering details manually onto a PDQ doesn’t meet PCI compliance standards today for a level 4 merchant with less than 20,000 Visa ecommerce transactions per year, which I assume your client would fall into. It doesn’t matter if the merchant takes both ecommerce and POS transactions as taking any ecommerce credit card details means a business must be PCI compliant. Your client could apply to be a higher level merchant but the complexity and volume of getting approved becomes

.net october 2010

105

next>

.net web_pro/expert_advice more prohibitive (and costly) and I’d say it isn’t worth it until you are a much larger business. They’d be much better off using something like SagePay or Worldpay, which will help meet compliance regulations. The point of compliance is avoiding credit card fraud, which is obviously in your client’s best interest. Additionally, banks will take a dim view of a merchant not being compliant, fines are expensive, and you could lose your POS merchant account! Check out the following for more detail: www.pcicomplianceguide.org/pcifaqs. php, https://www.pcisecuritystandards.org/ security_standards/pci_dss.shtml.

Graphic to web design

I’m a graphic designer but I would like to become a web designer. Can you recommend some books on web designing for someone who is new to this topic but must learn fast? From: Devika Usman Sheikh: As you’re a graphic designer at the moment, I’m assuming that when you say ‘web designer’, you mean a visual designer for websites rather than a front-end developer ie the person who codes HTML/CSS/JavaScript etc? If that is so then the key thing you need to keep in mind in order to make this transition is ‘interactivity’. Unlike print, when you’re designing a website you are designing something that users will interact with and the website needs to respond to their actions by either providing them with information or by allowing them to achieve their desired task. So in short, your success as a web designer is based on

how easy, enjoyable and efficient is the user’s experience on a website. Keeping that in mind and apart from having complete command of graphic software such as Photoshop you will need to pick up skills such as the basics of information architecture, usability, accessibility and typography. All of these elements will enable you to think more about the user and how they will be using your websites. A good place to start would be a book called Don’t Make Me Think by Steve Krug (sensible.com). It’s a fun and easy-to-read book that will give you a lot of pointers that you’ll be able to use in all your projects. [Also, for an all-encompassing introduction to web design we recommend InterACT with Web Standards from New Riders – Ed].

CSS menu hover

I have a standard menu bar made up of <li> items and have various CSS styling the hover functions and so on. Is there is a way that the ‘clicked’ menu item can remain the hover colour until a new menu item is clicked? It’s a little tricky to explain: I’ve looked around online and the ‘active’ tag seems to be mentioned a little but I’m not 100 per cent sure where to go with this ... From: Chris Howard Usman Sheikh: I’m sure there are multiple ways you can achieve what you’re trying to do. One way is to define a new pseudo class in your CSS that has the styling for the ‘selected’ state of the menu item. You can then use some basic JavaScript functions to toggle between the ‘default’ and the ‘selected’ states with an onClick trigger.

“No one is going to give you a job as a developer simply because you’ve done a course. It’s all about the skill” Usman Sheikh

Web HTML/CSS training

I’ve just come across your magazine (issue 205) and I’m really enjoying it. I was just after a bit of advice with regards to online and home study courses. For most of my working life I’ve been in the print trade, working as a repro/Mac operator/ artworker, and have touched a little bit on Dreamweaver CS2, just updating pics, new text on pages, those kind of simple things. Then about a year ago due to the recession I was made redundant, and I am currently working as a contractor as a document controller in a large oil and gas company in the south-west, which to be blunt is very boring! When I was doing the web part of my job I really enjoyed it, and now want to do it for a career, but don’t know the best path to take. Do I buy books on HTML/CSS/SEO and try to teach myself, or do I go about doing a home study course and try to get qualifications? I don’t really want to become a designer, I would prefer to do more of the HTML/CSS/SEO/ Java side of it once the designer has done their bit. Any advice would be truly grateful, and I will definitely be subscribing to .net magazine to help me on my way. From: Mark Slade Usman Sheikh: Whenever I’m asked this ‘online tutorials vs instructor-led courses’ question, my response is always that it depends on what works best for you. One thing you need to keep in mind is that no one is going to give you a job as a frontend developer (that’s usually the title given to people who do HTML/CSS/JavaScript development) simply because you have done a related course. It’s all about the skill. The quality of your code, your knowledge of the latest development technologies, accessibility, W3C compliance, SEO and graphic software such as Photoshop is what potential employers will be looking for. So you need to ensure that you gain knowledge in all these areas. There are more than enough resources available online that can teach you the basics

Expert tip of the month CSSEdit alternative

I’ve just got around to reading the ‘60 tools to improve your site’ feature in issue 199, and I read with interest about CSSEdit (“Styling a Web App used to be a cycle of type-upload-refresh. CSSEdit destroys this waste of time.”). The ability to preview CSS on a live site sounds great, and it’s something that would really benefit me for something I’m working on right now. Unfortunately, however, I’m on a PC, and I was wondering if anybody knows of any alternative software (Windows or Linux, it doesn’t matter) that has the same or similar functionality. From: Jason

<prev

106

.net october 2010

Usman Sheikh: CSSEdit (macrabbit.com/ cssedit/) is a fantastic tool and to the best of my knowledge I don’t believe that there’s another tool out there that matches it featureto-feature. There are of course tools such as Firebug that enable you to debug your CSS by showing you live updates within Firefox. Alternatively there is another fairly basic tool called Eledicss (labs.libre-entreprise.org/ projects/eledicss/) This runs as a server-side PHP script and enables you to edit your CSS files live on the server.

Live editing Eledicss runs as a server-side PHP script and enables you to edit your CSS files live on the server

Brought to you by

of front-end development. W3Schools (www. w3schools.com), for instance, is an excellent resource for learning about HTML, CSS and JavaScript. Once you know the basics then try to play around with sample layouts, see how some of your favourite websites are built by viewing their source code (right-click and select View Source), and practice by trying to build those layouts yourself. Once you’re able to convert website designs into W3C/WAI-compliant code without losing the design’s integrity, you will have no problem getting a job.

Twitter API

I’ve been looking through the Twitter API but can’t seem to find what I’m after – which could mean it isn’t possible, but I thought I would ask here anyway in case someone has had to do this in the past. I need to display a list of recent tweets for certain search terms. So basically I want to connect to the Twitter API, pass over the search phrase and return the results. http://twitter.com/goodies/widget_search shows what I want to do is possible but I would prefer to not have all the gubbins around the returned tweets; I need to style it myself. Tom Hughes-Croucher: One of the easiest ways to access API data from the web, including Twitter, is to use YQL. Yahoo Query Language is a lot like SQL and makes it easy to get data back in a variety of formats. You would simply send YQL a query like select * from twitter.search where q = ‘cats’ – which is a lot easier than dealing with the web services. There are plug-ins for YQL on most platforms such as the one for jQuery (plugins.jquery. com/project/jquery-yql). ● Send your questions to netmag@futurenet.com or post them at forum.netmag.co.uk

Expert Advice is sponsored by Fasthosts (tel: 0844 583 2400, www.fasthosts.co.uk). Fasthosts’ all-new dedicated servers offer more power, speed and flexibility with the latest Intel Xeon Quad-core CPUs. The new features include 100Mbps connectivity, RAID Mirroring, up to 16GB RAM and Parallels Plesk Panel. All servers come with Unlimited Bandwidth, a choice of the latest Windows and Linux operating systems and 24/7 UK phone and email support! Prices start from £59 per month plus VAT. Plus for a limited time only, Fasthosts is offering the first month FREE on all dedicated servers!

Access all areas

The release of Flex 4 and Flash Builder 4 is good news for accessibility, says Léonie Watson , but there are still problems you need to be aware of Adobe Flex is an open source framework for building cross platform-rich applications. You can run Flex applications in the browser using Flash Player, or on the desktop using Adobe’s runtime engine AIR. Accessibility hasn’t traditionally been an easy ﬁt for these technologies. However, with the release of Flex 4 and Flash Builder 4, things are looking up. The Flex 4 Software Development Kit (SDK) has improved accessibility for standard interface controls. Controls from the existing Halo component set, as well as the new Spark component set, are now accessible by default. In Flex 3, the behaviour and visual appearance of each component was bundled together. Flex 4 separates the two much more cleanly. You can use a component class to handle behaviour, including state tracking and management. A skin class then handles the way the component appears, including layout, graphics and state transition. Flash Builder is a development environment for Flex applications. In version 4, accessibility is enabled by default on all development projects. In other words, there’s now a better chance that your Flex application will be accessible out of the box. Unlike the Flex 4 SDK, which is free, Flash Builder 4 is a paid upgrade. If it isn’t at the top of your shopping list, you can configure Flex Builder 3 to do the same thing. Just update the accessible attribute in the flex-config.xml file to true: <mxml-compiler> … <accessible>true</accessible> … </mxml-compiler> Screen reader support for Flex is growing, but it’s a long way from being consistent. Jaws 11 natively

supports Flex 4, and users of older versions can download and install free Jaws scripts for Flex. Non Visual Desktop Access (NVDA) has also begun supporting Flex. Even with all of this accessibility goodness, there are still some bits that you’ll need to think about when you build a Flex application. For example, controlling the reading order and providing keyboard access. The default reading order of a Flex application (or any SWF file) doesn’t flow from top to bottom/ left to right. Visually this isn’t too much of a problem, but screen readers follow the reading order and it’s surprisingly easy to confuse them if the reading order doesn’t follow a logical path. Use the tabindex attribute in your MXML file to define a logical tab order through the User Interface (UI). Tab order and reading order is the same thing to a screen reader, so use the tabindex on all objects within the UI including text descriptions and non-focusable controls. Be careful, though. If you forget the tabindex on one object within the application, the reading/tab order will fall back to the default! ● Are there any situations you don’t know how to make accessible? Why not ask, we’ll tackle anything you can send in! Send your details to mailus@netmag.co.uk

Proﬁle Léonie Watson is director of accessibility for digital agency Nomensa (www. nomensa.com), where she leads web accessibility, strategy and research

.net october 2010

107

.net web_pro/big_question

What impact will WikiLeaks have on the future of news?

Marketing expert David Donnan MSG www.igentics.com

On some level, it’s great to see sites developed with few resources having such a widespread impact on the media. For WikiLeaks to set the agenda the way it did with the war documents is impressive. Of course, what’s missing is journalistic merit. The site admits that it cannot guarantee the validity of the documents it is hosting, it simply posts them up and it’s down to journalists to do the research. David Donnan is director of marketing agency MSG

Ecommerce expert

Ben Dyer Actinic

www.actinic.co.uk

I think its impact on the future of news will be fairly trivial, to be honest. There have always been leaks, lost documents and whistle blowers: WikiLeaks didn’t invent the paradigm. I was speaking to a journalist friend recently, and he was moaning that the art of a good scoop has almost vanished. In the old days, trusted sources and networks had to be built, stories validated and the impact assessed before controversial news hit the press. WikiLeaks has taken some of that away. Bam! Here it is in its full unedited, and dare I say it, often unverified glory, for us to digest and form conclusions. Ben Dyer is director of ecommerce software firm Actinic

WikiLeaks caused a storm this summer when it made 90,000 secret military records about the war in Afghanistan public. Is the whistle-blowing website changing the nature of news as we know it? Our industry experts share their views …

Payments expert

Jon Prideaux SecureTrading

www.securetrading.com

For the past 100 years we’ve depended upon journalists and editors to filter news, to distil it, to package it and then to publish it. We haven’t had access to the unvarnished truth. The theory of WikiLeaks is that it bypasses the editor and the journalist, giving the public access to the raw information that we’re not supposed to see. In doing so, we can decide what’s news and what’s relevant. Some say that free information on WikiLeaks will lead to the death of the journalist. But perhaps the obituary is premature. It’s a delicious irony that WikiLeaks first leaked the data to The New York Times, The Guardian and Der Spiegel before publishing it on its site. It seems there is still a role for the person who can help the consumer of news decide what’s important and what’s not.

Jon Prideaux is deputy CEO of SecureTrading

108

.net october 2010

.net web_pro/big_question Internet playboy

Drew Curtis Fark www.fark.com

All depends on what they do next. If you’d asked the same question about Drudge right after it broke the Lewinsky scandal, you might have said that maybe we’d see more breaking news coming from the Fifth Estate. Hasn’t happened. If WikiLeaks does this every few days, then I guess we’ll all just have to get used to the fact that war is hell and people die in it – which now that I think about it isn’t breaking news either. Drew is the owner of Fark.com

Hosting specialist Neil Barton Hostway, UK

www.hostway.co.uk

What WikiLeaks has shown is that when it comes to news, the power and influence is increasingly residing with the web. Sites such as WikiLeaks are now being treated as trusted news sources, which can be dangerous because they don’t necessarily follow the same editorial ethics as the press. There have been many instances already of wikirelated information being reported in the mainstream media, only for it then to be proved factually incorrect. More worrying, though, are incidents such as the leaking of sensitive war documents, which could actually put lives at risk. Neil is the director of Hostway UK

Hosting specialist

Lawrence Jones UKFast www.ukfast.co.uk

WikiLeaks’ impact will depend on the way it is utilised. Julian Assange has shown ambition and entrepreneurialism in developing the site and his innovation brings about a new high profile forum within journalism. While it has been created to decrease corruption and encourage transparency, the political implications of the information published should not be overlooked. Lawrence Jones is MD of hosting firm UKFast

Hosting expert

Andrew Saunders Zen Internet

www.zeninternet.co.uk

Leaks and whistle blowing are a valuable component for decent press coverage and effective opposition government in any well functioning democracy. With few exceptions, this operates well and is generally in the public interest. Key to this success are the professional journalists and career politicians who receive the leaks – they have the experience, skill and judgement of how to act in the public interest with the information they receive. WikiLeaks, on the other hand, is a clumsy blunderbuss. No matter how noble the intention of the leak, just blasting sensitive information across the internet will at the very least reduce the potential positive impact of the leak and frequently have serious unintended negative consequences. The instant access and global reach of the internet is great, but WikiLeaks not. Andrew Saunders is head of product management and marketing at Zen Internet

Project manager Ané-Mari Peter on-IDLE www.on-idle.com

No one’s quite sure what WikiLeaks is or what its organisational ethics are, but the information it’s gathered has proven to be stunningly accurate. In the case of the War Logs, WikiLeaks provided the data, but news organisations (Der Spiegel, The New York Times and The Guardian) continue to provide the corroboration (research), analysis (context) and reporting (distribution). Technology has greatly diminished government control over what information (and how rapidly) is shared with the world, but just having the data is not enough. Talented, reputable and experienced journalists are needed to bring value to that data. Where it would previously have taken years to source and compile the reports that were published on the War Logs, now it takes months, weeks or even days. However, in an age where editorial departments are being cut amid falling print circulations, it’s now faster and much more cost-effective to use reputable, alternative sourcing organisations for factual information. Information transparency holds our governments and leaders to account, as long as ‘stateless’ organisations such as WikiLeaks remain uncensored and their sources are protected. Ané-Mari is the co-founder of on-IDLE

Media & PR expert

Tim Gibbon Elemental Communications www.elementalcomms.co.uk

The challenge isn’t so much whether sensitive information is newsworthy but what the consequences are of making it public. There doesn’t appear to be enough guidance to encourage this kind of consideration from the WikiLeaks website. This is what should make us feel uneasy. Tim is director of Elemental Communications

Social media and comms expert

Rachel Hawkes Elemental Communications

www.elementalcomms.co.uk

WikiLeaks certainly doesn’t spell the end of journalism or of press, just as blogging and Twitter didn’t (and don’t). But it does provide a face for us as consumers to feel that someone is standing up on our behalf to those that filter our information. Rachel Hawkes is an account director at Elemental

Activist

Oxblood Ruffin Hactivismo

www.hacktivismo.com

WikiLeaks is like Fox News with redundant servers. The most positive thing that I can say about it is that WikiLeaks is emerging as one of the most potent publishing platforms on the internet. It represents a sea change. But WikiLeaks needs to be challenged. Not just by the traditional press but by everyone. WikiLeaks has an agenda: it’s anti-war and anti-corporatist, and then some. And that’s a perfectly respectable position to take. But WikiLeaks should never try to palm themselves off as ‘journalists’. The internet has had enough handjobs. Oxblood Ruffin is the founder of Hacktivismo

>> more Big Question online If you want to read the full versions of our experts’ opinions, and perhaps add your own, visit us online at www.netmag.co.uk

.net october 2010 109

.net web_pro search

David Deutsch, head of SEO for Fortune Cookie, explains how video can help boost your website’s ranking

This month’s recommended… Video resources

Optimising SEO with video With more than 95 per cent of the UK having broadband in their homes, video usage is on the rise. Most people prefer watching video to reading loads of text if they’re given the option, and it’s no surprise that YouTube is ranked as the third most popular site in the world by Alexa. Anticipating the need to find great videos online, Google, Yahoo and Bing have created video search engines. These scour the internet for unique video content and publish it in their video sections. The cool part about this is that, instead of posting normal text listings, the search engines publish thumbnail screenshots of the videos on the search engine results page (SERP). The thumbnail enables searchers to see what kind of video they’re dealing with before viewing it. Universal Search – a system that blends image, video, news, blog, local and traditional search to form a more complete experience for users – is now integral to all three major search engines. And listings that have video thumbnails

Name Vimeo URL vimeo.com Info Vimeo was created by filmmakers and video creators who wanted to share their work; now it’s a video community. Videos on the site are picked up by all three search engines.

next to them have been proven to receive a much higher click-through rate than traditional text listings. A recent eye-tracking study performed by Fortune Cookie (www.fortunecookie.co.uk) found that people are automatically attracted to video thumbnails on the SERP and even skip listings above and below them entirely. This means that listings with video thumbnails not only get more attention but they even cause other surrounding listings to be ignored by the user. The benefits of having video on each searchoptimised page of a site are clear. Google, Yahoo and Bing all take video very seriously because they know that searchers prefer audio-visual content to simple text and images. Having video on a page definitely gives it a little spice. Below, we’ll look at how to make sure your video gets thumbnailed on the main search engines. See the recommended resources on the right for more information about video. ●

Name Dailymotion URL dailymotion.com Info Dailymotion is about finding new ways to see, share and engage your world. It was one of the first sites after YouTube to optimise its pages for universal search. Name VidSeo URL vidseo.co.uk Info VidSeo is a company specialising in online video production and execution. It will shoot, edit and send you 60-second videos to publish on your site.

How to… Get your website’s video on the search engines Name David Deutsch Job title Head of SEO Company Fortune Cookie URL fortunecookie.co.uk

Reasons to optimise a site for video include both increased brand awareness on the SERP and higher click-through rates from existing search listings. If your page is already in position one for a keyword, that listing will earn a thumbnail once you’ve optimised it for video. You’ll also get increased time on site and page views, plus better user experience and increased conversion rates. So how can you get your pages listed with video thumbnails?

110 .net october 2010

1 First, embed your web-friendly video on the page using any of the many video embed methods. For example, you could use Flash, Windows Player, QuickTime and so on. Note: do not use YouTube, Vimeo or other video upload sites for this. The video must be unique to your website. 2 Create a thumbnail of the video for indexing, with a size of 80x60 pixels.

3 Next, you need to create four meta tags for the video on the page, like this: <meta name="medium" content="video" /> <meta name="video_ type" content= "application/xshockwave-flash" /> Replace application/xshockwave-flash with the player you’re using. <meta name="video_ height" content="280" />

Replace 280 with the height of your video. <meta name="video_ width” content="460" /> Replace 460 with the width of your video. 4 Create a video sitemap and submit it to the search engines. Google and Yahoo have clear instructions at bit.ly/avLLvs and bit.ly/dBnUm3. Bing doesn’t have a video submission process, so

submit your sitemap directly to Bing (bit.ly/ 4ACvdG) and include the meta tags from step 3. You’ll soon start to see your search engine listings take on a whole new look. ●

Do you have a question about search rankings? Use the subject line “Pro search” and email us at netmag@ futurenet.com

GRADUATE SHOWCASE EXHIBITION SEMINARS

UK digital design’s finest practitioners give talks on breaking into today’s industry. PLUS get one-to-one feedback on your portfolio! DAN MOORE – STUDIO OUTPUT GRAPHIC DESIGN JASON ARBER – WYLD STALLYONS ANIMATION AND MOTION GRAPHICS JOHN MCFAUL – MCFAUL STUDIO ILLUSTRATION AND GRAPHIC DESIGN MATT BOOTH – FREELANCE DESIGNER AND FLASH DEVELOPER FLASH DESIGN AND WEB INTERACTIVE RICHARD TILLEY – ARTILLERY ANIMATION AND ILLUSTRATION

Graduate Showcase Exhibition launch! Exhibition continues until 28 September

23 SEPTEMBER, 2PM CAFE 1001, OLD TRUMAN BREWERY, E1 6QL Early Bird prices: £10 for subscribers £15 for non-subscribers For full details and to book online visit:

www.computerarts.co.uk/gstalks In partnership with

.net web_pro ecommerce

Ecommerce After a few false starts, mobile ecommerce seems to be off the tracks at last. Fadi Shuman explains how to get on board

The dawn of m-commerce The news that Tesco is to launch its first transactional mobile app has got me thinking we may at long last be entering the era of m-commerce. There is a plethora of mobile technology that has been unleashed over the last 12 months and I suspect there is still more to come. Potentially the most exciting is the arrival of geolocation apps such as Foursquare and Gowalla (and now Facebook Places), which enable mobiles to pinpoint where you are and allow your friends to see that information. This has huge implications for ecommerce. Just imagine how much influence brands could have now they have the ability to entice a consumer by practically dangling their friends in front of them. So far these applications have been making money from brand sponsorship and advertising, such as Domino’s Pizza announcing it has a special offer minutes away from your current location. As an endorsement of how big some brands think this is going to be, Nike are currently investing more money into this tool than they are into their Nike Town bricks and mortar shops. It looks increasingly

This month’s recommended… Mobile shopping apps Name Google Shopper URL www.google.com/ mobile/shopper/ Info See Google Shopper in action, and marvel at all the new ways Google will be making more money.

likely that mobile location-based marketing tools will make a huge impact this year. Another technology that could be set to change the face of ecommerce is Google Shopper. Though currently only available as a beta on the Android phone in the US, it enables users to take pictures of products, scan barcodes or speak products names and details into their phones, before being presented with everything from reviews to the cheapest online prices for that specific product. Used in conjunction with geolocation technology it can also direct you to a physical store where you can buy a product cheaper. There are certain perceived (and real) limitations with mobile that some retailers have found hard to overcome, for example how you present brand information with such a reduced screen space. But with technology such as this, we’re seeing that mobile is, rather than a small and inferior version of the computer or laptop, a separate marketing tool in its own right. We’re finally starting to understand the potential of mobile and how it can be used effectively – and smart brands are already tapping into it. ●

Name SwebApps URL swebapps.com Info Use this site to build your own iPhone app in minutes, with no coding knowledge required. The Android app builder isn’t yet available. Name Square URL squareup.com Info Square is an application that enables anyone to accept payment cards using their mobile device. Sign up for this excellent, simple-to-use service that will get you selling your wares – be they digital or physical – in less than 15 minutes.

How to… Increase conversion and AOV this Christmas Expert advice Name John Williams Job title CTO Company 10CMS URL 10cms.com

December through February is peak selling season for retail. But with consumer demand depressed and competition fierce, how can retailers maximise their opportunity? Key to success will be delivering a more engaging online experience that features richer, more engaging and inspiring content. Here are four ways that retailers can maximise their selling opportunities in time for Christmas and the New Year.

112

.net october 2010

1 Optimise home and category pages Around 25 per cent of traffic passes through home and category pages, making them central to enticing users. Lifestyle carousels are a great way to do this, especially when they combine images and video with interactive overlays featuring live merchandising data. 2 Create interactive gifting modules Bespoke gifting modules can provide

site users with prepackaged gift ideas. These modules can also serve as ideal campaign landing pages, driving up conversions. 3 Provide visual wish-list tools Wish-lists are an essential way to drive up Christmas sales. There are huge benefits to enabling users to create visual wish-lists to be shared with friends and family, making gift buying fun and social.

4 Push content into social channels Online retailers that can effectively engage their customers on Facebook can further improve their sales. Interactive merchandising content, with the right tools, can be published offsite, complete with its dynamic merchandising data, enabling users to interact within the Facebook environment and complete a purchase back on-site. Finally, ensure rich content is kept

fresh. Tools like 10CMS can help merchandising teams to manage interactive merchandising content and publish it themselves, reducing time and cost. ●

Do you have a question about ecommerce? Use the subject line “Ecommerce” and email us at netmag@ futurenet.com

.net web_pro security

Security

Mozilla ﬁxes an old privacy bug with Firefox 4 – but there’s a web development price to pay, says Mike Williams

This month’s recommended… User privacy resources Name CSS Fingerprint URL cssfingerprint.com Info This project will use CSS to display many of the sites you’ve visited, and then use this information to try to build a profile on you: whether you’re male or female, your likely age, education and more.

Firefox reworks the :visited selector One of the oldest browser vulnerabilities around is based on CSS’s ability to style visited and unvisited links differently. While that’s very convenient for the user, it also exposes your history to whatever page you’re visiting. All they have to do is display URLs, check the change in appearance and they’ll know right away which sites you visit, and which you don’t. Sounds like a trivial issue? Think again. The CSS Fingerprint project (saizai.livejournal.com/960791. html) carried out tests showing that it was possible to examine anything from 200,000 URLs a minute under Internet Explorer, rising to 3.4million URLs a minute on Safari. These are local checks and online hacks would be much slower, but this remains a powerful technique that can provide sites with a great deal of information on who you are and what you’re doing. It sounded like good news when Mozilla announced that Firefox 4 would close this sizeable loophole, then. However, the fix is a little, well, unusual. Not least because, according to Mozilla’s David Baron, “It makes getComputedStyle (and similar functions such as querySelector) lie by acting as though all links are unvisited.” The API will simply no longer work as expected. And there’s more, as the company explained: “We’re limiting the CSS properties that can be used to style visited links to colour, background-

How to

Explore Firefox 4’s new features

The new CSS tweak is interesting, but Firefox 4 has much more to offer than that. Even though this is only beta 1, the program still provides a revamped interface, some HTML5 support and enhanced storage capabilities (including support for the IndexedDB standard), along with improved performance in a range of areas.

colour, border-*-colour, and outline-colour and the colour parts of the fill and stroke properties … In addition, for the list of properties you can change above, you won’t be able to set rgba() or hsla() colours or transparent on them.” So forget any ideas about changing a visited link’s box size, opacity or anything else: from Firefox 4 on, you can play with its colour, but that’s all. It may take some time to figure out exactly how these changes will affect individual sites, because the impact can be subtle. For example, you’ll now have to watch for a combinator such as :visited + span, because the span will now be styled as though the link were unvisited. Mozilla has tried to help by highlighting a couple of likely problem areas. You can no longer use background images to style links and show if they’ve been visited, for example. And CSS transitions relating to a link being visited (or not) will no longer be supported. Otherwise, the company suggests, “The impact on web developers here should be minimal.” We hope they’re right, but in the meantime it’s probably a good idea to test your sites with Firefox 4 as soon as you possibly can. ●

1 The new interface sees the tabs presented, Chrome-style, at the top of the page, while common menu options are available by clicking the Firefox button.

2 Click Tools > Heads Up Display to see the new web developer console. This has more filters and displays only messages relating to the current tab.

Loophole closed

Firefox 4 is breaking the CSS :visited selector to help preserve privacy

Name Mozilla Security Blog URL bit.ly/aRQUEm Info Firefox’s upcoming CSS changes were first flagged a few months ago in this blog post. It provides an accessible summary of the main issues and includes a heated comments-based discussion on how good (or not) a fix this is. Name David Baron URL dbaron.org/ mozilla/visited-privacy Info The Mozilla developer who came up with the Firefox 4 CSS patches, David Baron, describes the problem, his proposed solution and the complications it might cause in a post on his personal blog.

3 The Add-Ons manager now claims a full tab to itself. There’s support for creating add-ons that don’t require a restart before they’re usable.

4 Firefox 4 supports WebM, Google’s open video format. Try this at YouTube (bit.ly/9LiDYG) and you’ll find that you can play compatible videos natively.

.net october 2010

113

.net web_pro startup

Startup

Researching your sector properly is vital to the success of your startup, says the founder of Moonfruit.com, Wendy Tan White

This month’s recommended… Marketing advice Name Know This URL knowthis.com Info A neat resource for finding out more about your market area, be it through publications – which you can search for on this site – or tutorials.

The importance of market research Entrepreneurs tend to identify market opportunities in one of two ways. Either they see a gap in the industry they work in, or the idea comes from a problem or issue that they as a consumer feel needs solving. The latter scenario is much riskier than the former, being based on personal passion rather than industry knowledge. If you don’t know the market you’re entering, getting involved requires due diligence to ensure success. In-depth primary and secondary research is vital, and must be relevant to the market you’re looking to enter, and your product or service. The first of three stages to test for viability is macro-level research, although what qualifies the ‘macro’ will depend on the type of business you’re trying to launch. If it’s the next Amazon, you need to look at macro-economic trends and the state of spending around the world. If you’re launching a coffee shop, your focus will be spending patterns in the neighbourhood where you’re creating it. Understanding the wider economic landscape is critical because you need to know whether there is an appetite for your product before you get

Methods

How to research your market Whatever type of entrepreneur you are – a beginner with a passion for a particular idea, or a seasoned professional who’s identified a gap in your own industry, you still need to do due diligence. Don’t get complacent with research, and make sure you have a confidant, someone whose honest and open feedback you can trust. Here are some tips on how to carry out both primary and secondary research into the sector you’re planning to enter.

114

.net october 2010

Name Home Biz Tools URL homebiztools. com/analysis.htm Info This instructional website looks at market analysis – how to ask the right questions, what the benefits of market analysis are, and how to collect useful market research data.

started. Consider how your product differentiates from your competitors. Unless you’re creating something completely new, there are any number of ways to create a competitive edge: price, quality, design, customer service and so forth. Will your innovations be enough to convince customers to abandon your competitors? The final level is direct, first-hand interaction with your target customers. This could take the form of one-to-one interviews, focus groups, blindtesting or any number of different tests. It’s critical to get direct feedback to ensure your audience finds your product desirable enough to buy. Of course an alternative is to just get out there with a prototype of your product and try it out on your market. Despite initial market research there have been many iterations of Moonfruit’s business model, branding and product versions. We’ve gradually learned that the best way to run the business is by being responsive to the changing needs of our customers. The internet has reduced the cost of entry of starting up your business and provided you with the ability to be agile, evolving your business iteratively.

1 To research your market, one option is to take the paid-for route by employing analyst houses such as Forrester and Gartner, which create detailed insightful reports (although they can be quite expensive).

2 A cheaper solution is, of course, to keep a close eye on the media that’s specific to your industry, including specialist magazines, industry-specific blogs, and competitors’ blogs and websites.

Name Businessballs.com URL businessballs.com/ swotanalysisfree template.htm Info Here you can find free templates for both PEST and SWOT analysis: tools for understanding market growth or decline, and as such the position, potential and direction for a business.

3 For primary research, talk to experts in the industry: the bankers and investors behind that sector, for example. They can advise you in the steps you need to make your business a success.

4 Talk directly to customers, but be inventive about it. Engage with them in relevant online spots, utilising social media such as Twitter and Facebook to get a feel for their opinion.

.net web_pro hosting

Hosting

Is the ‘.co’ top-level domain a viable alternative to ‘.com’ or is the Emperor prancing about in the nude again? Karl Hodge has a peek

This month’s recommended… Alternative domains Name .co URL www.cointernet.co Info Get the official lowdown on the .co domain, with a list of official registrars, blogs and articles with advice on when to buy and the latest comments from the press.

Psst! Fancy a Colombian TLD? “The country code for Colombia, .co is a great choice for company, commerce or community websites,” trumpets a marketing email that landed in our inbox last week. This one came from 123 Reg, but it’s not the only outfit urging users to buy this latest top-level domain (TLD). UK2 describe it as “the new .com”. Easyspace is calling it “the hottest domain on the internet”. Really? The .co TLD isn’t intended to be a replacement for .com or .co.uk. It’s a country code – which means its proper use is as a domain for sites based in Colombia. And yet, here we are being urged by big domain name resellers to snap it up for other uses. Should we be taken in? “Building a brand on a .co domain without the equivalent .com (and .co.uk) won’t be possible because you’ll lose a massive proportion of type-in traffic,” says Darren Lingham of Tsohost

Name .me URL www.domain.me Info Launched amid much fanfare, .me is another country code (meant for Montenegro) that has been adopted for other means. The official site promotes its potential uses.

(www.tsohost.co.uk). “The only people making money from this are the registrars hyping this domain to be ‘as good’ as .com.” Karl Austin of KDA Web Services (www.kdaweb services.com) has a more pragmatic reason for his scepticism: “We sold a number of uk.co domains, and then the registry that was in charge had the TLD taken away from them. Everyone lost their domains. We’ve no real plans to push the .co domain to customers and see them get burnt again.” There’s one argument for using the .co domain: brand protection. “As ever when a new domain name comes out, companies could find themselves falling foul to cybersquatters,” says Thomas Herbert, product manager at Hostway (www.hostway.co.uk). “Cybersquatting can cost brands thousands in lost sales, reputation and legal battles.” Ultimately, you’ll have to decide whether your site’s brand is worth another domain registration every year.

Name uk.com URL centralnic.com Info A private company set up in competition with the public registries, CentralNic is the registry for several country-based domains for commerce.

Watchdog Karl Hodge investigates a telesales scam Expert advice Name Karl Hodge Job IT journalist URL www.spodgod.com

This month, we’ve been hearing about a telesales scam that targets less savvy computer users. Among the readers who contacted us was Tessa Davies, whose story is typical: “I received a call from someone claiming to

be from ‘Windows Operating Services’, as I had problems with my machine.” Tessa hadn’t reported any issues and assumed the call was dodgy straight away. When she received a second call later in the week, she contacted us.

When we heard about Tessa’s experience, we weren’t hugely surprised. It just so happens that we’ve been tracking a spate of similar calls. Tessa had a close escape – she put down the phone. However, another reader we heard from ended up having a marathon call with an operator from Support One Care – though the caller identified themselves as representing Microsoft. During the course of the call, he was asked

to open Event Viewer. Seeing error messages, he was told this was proof his computer was riddled with viruses. It wasn’t – it’s quite normal for Windows Event Viewer logs to show multiple errors. The cold caller accessed our reader’s computer remotely, tinkering with it for a total of four hours. At the end, the reader was presented with a subscription bill for £80. It had all been an elaborate sales pitch for a tech support service

based in India. The tech support service itself seems legitimate; it’s the hard sell that’s distinctly dodgy. Don’t take our word for it, though – both Lincolnshire and Staffordshire Trading Standards have issued alerts about the issue, as have Microsoft, whose statement couldn’t be clearer: “We do not send unsolicited e-mail or make unsolicited phone calls to request personal or financial information or fix your computer.”

Here’s our advice: if you get a call from someone who says they’re from Windows Operating Services or Microsoft, claiming your computer’s kaput, do what Tessa did: put down the phone.

Watchdog

If you have a complaint about your ISP or web host, use the subject line “Watchdog” and email us at netmag@futurenet.com

.net october 2010

115

.net web_pro marketing

Marketing

APIs can give us new insights into our digital marketing effectiveness. Dave Chaffey explains how to make the most of them Q&A Name James Gurd Job Independent ecommerce consultant URL twitter.com/ jamesgurd

Are you hooked into the right APIs? Of the many changes in technology since I first stepped out into the world of work, the move to software-as-a-service has been one of the most dramatic. Another notable change is the widespread use of APIs to exchange data between different services or data sources. Today, the majority of web analytics tools that digital marketers use to gain insights and improve their marketing are web services. Whether you use Google Analytics, Omniture or Webtrends, most services are delivered through a browser. When you first log in, most of the analytics tools access data about visitor sessions, referrers and page views, which is similar to what they offered when they launched. This limits their capability to review and improve marketing in the social/Web 2.0 age. However, APIs give great additional insights, particularly about links and social media. For example, both Linkscape and Majestic SEO publish a subset of their link profiles through public APIs, while Facebook, LinkedIn and Twitter also offer information about activity and advertising on their network through their APIs. Google Analytics and AdWords each have their own APIs. This openness has encouraged many third-party developers to create free and paid services through the API – including this writer. Take a look at the newly

.net: Where should I start to improve my SEO performance? JG: I recommend starting with your current web analytics data – what are your natural search trends at keyword level and which keywords aren’t driving enough traffic, despite you having a strong product range?

relaunched Google Analytics App Gallery (www. google.com/analytics/apps) to see what’s available. Some of the best new software tools for digital marketing, and SEO in particular, integrate these sources – including data from traditional web analytics, plus backlink and social media analysis. For example, Analytics SEO, Market Samurai and Raven Tools integrate data from disparate sources and then help marketers manage the insights as part of their workflow. For analysis of the success of social media, PostRank (postrank.com) is potentially very useful. It processes feeds from blogs and then uses APIs to summarise the most valuable content, based on the level of interaction with them using views, comments, social bookmarks and social mentions via Google Buzz, Twitter or Facebook. If you run WordPress, I suggest you try the plug-in based on, you guessed it, their API. ●

“APIs give great additional insights, particularly about links and social media”

Statistics: Visits by search page across Google, Yahoo and Bing Page 2 2.5%

Page 2 2.8%

Other 1.7%

Page 1 95.8%

Source: iCrossing report, The Importance of Page One Visibility. Feb 2010

116

Other 2%

Page 1 95.2%

Google

.net october 2010

Page 2 3.4% Other 1.6%

Page 1 95%

Yahoo

Bing

.net: How should I linkbuild more effectively? JG: Understand the valuable types of links in your market. Why will people link? A review with Yahoo Site Explorer will help answer this question. Next, research bloggers in your market and get involved with those that are most engaging. Article submission still has a role to play, and don’t forget social bookmarking to help spread your message. .net: Should I worry about meta tags? JG: It’s true that meta tags aren’t as important as they once were, but they still contribute to your overall site optimisation efforts, since they help identify unique content. The title and description are the two key pieces of information that people will see when they review search results and the words you put there go a long way towards influencing their click decision.

.net web_pro opinion

Mat Diss on …

Making mobile work

Taking a brand onto the mobile internet is a huge challenge. Mat Diss, founder of mobile software company bemoko, considers how to best meet the needs of different devices Mobile phone access to the internet has increased by thousands of percent in recent years. The opportunity to deliver interactive content to someone wherever they are is highly compelling. It’s not unreasonable to speculate that within five years, brands that do not have an effective mobile presence will be perceived in a similar way to those that did not have a website five years ago: with puzzlement and a little suspicion. Mobile content consumption has driven the spectacular success of mobile apps. With more than 160,000 apps on the Apple iTunes store, yet far fewer on Nokia’s Ovi app store and the Android Marketplace, you could be forgiven for thinking that the only way to go mobile is to create an app, deliver it to Apple and sit back and enjoy the rewards. However, life is not that simple. The iPhone counts for fewer than one in ten smartphones sold. And with the other phone manufacturers rapidly catching up with its functionality and usability, there’s a real risk that compelling content created only for iPhone will become more and more niche. An alternative is to create apps for every different kind of phone: Nokia; Blackberry; Windows Mobile; Android. The problem is, this is expensive and time-consuming. Imagine having to build different PC websites for Dell, Toshiba, Sony, Acer, IBM and every other brand of PC.

App or site?

The reality is that the vast majority of apps are effectively mini mobile websites. An app simply accesses and interacts with information from the

server and renders it on the screen. So why can’t web designers simply build one site that works on every internet-enabled phone? A site doesn’t need to be downloaded, stays up to date and can readily cross-link to other sites. To date, the problem has been the sheer complexity of the mobile environment. Not only are there several browsers and operating systems to consider, there are multiple screen sizes and a vast array of functions and standards supported by different phones. This has created a vastly complex environment in which to deliver content. Web designers need to know that the content they are creating is delivering, not only on some, but on all devices. Broken links, non-displaying images or even logos that do not display correctly on every device all switch users off, reduce trust in their service and guarantee they will not return. It’s astonishing but true that some of the most popular destinations on the web today are still rendering content in a manner that makes it almost illegible on a wide range of phones.

“Web designers need to know that their content is delivering on all devices” Mat Diss

The solution lies in creating mobile websites that intelligently assess the properties of each phone accessing the server and only deliver content that the device can display effectively. This creates a meaningful user experience for every device – an app-style experience for advanced touchscreen devices, but also an effective mobile presence for internet-enabled, but less capable phones. One way of doing this is through bemokoLive’s software suite, which enables developers to use web standard markup (ie HTML, CSS and JavaScript) to create sites that display effectively on any device without the need to learn a new programming language or a new set of skills. These sites can then be wrapped as apps and submitted to Apple to be delivered through the iTunes store without the need for significant reworking of content.

Brand opportunities

The mobile web provides a momentous opportunity for brands to interact with users. With two-thirds of the world’s population using mobile, the medium has the potential to be the biggest and most effective of all time, delivering content to anyone, whenever they want it. The challenge is to reduce the complexity and cost, enabling designers to use the medium to showcase their creativity on all devices, not just a select few. ● Formerly VP technology at Volantis, Mat Diss has 20 years’ experience in software development and systems management. He co-founded bemoko (bemoko.com) in 2007 and is responsible for the direction and strategy of the company.

.net october 2010 117

.net web_pro/classiﬁeds

_ web hosting Service level agreement

Hosting type

100

Web control panel

Unlimited

2GB

Email support

Unlimited

200MB

Phone support

Unlimited

Firewall

£5 £2

Virus ﬁlter

N/A

Shopping cart

Unlimited Web Hosting Pack Starter Web hosting Pack

Database support

111WebHost.com www.111WebHost.com

POP3 accounts

Telephone

Monthly bandwidth

Package

Disk space

Name and URL

Cost per month

hen it comes to choosing a hosting provider, it can be hard to see the wood for the trees, so we’ve brought you this handy guide to help you decide. All details were accurate at time of press, but don’t forget to check the small print!

Front page extension

Helping you choose the best host

Budget Web Hosting Pack

£1

100MB

1GB

WordPress Web Hosting Pack

£2

200MB

2GB

100

Drupal Web Hosting Pack

£2

200MB

2GB

100

Joomla! Web Hosting Pack

£2

200MB

2GB

100

osCommerce Web Hosting Pack

£2

200MB

2GB

100

CubeCart Web Hosting Pack

£2

200MB

2GB

100

ZenCart Web Hosting Pack

£2

200MB

2GB

100

AgoraCart Web Hosting Pack

£2

200MB

2GB

100

Mambo Web Hosting Pack

£2

200MB

2GB

100

£2.49

100MB

1.5GB

£4.99

2GB

25GB

100

123-reg.co.uk

Starter

www.123-reg.co.uk

Plus

0845 859 0018

Pro

£8.99

5GB

50GB

500

Business Pro

£14.99

10GB

150GB

1000

1&1 Internet Ltd.

Beginner

www.1and1.co.uk

Home

0871 641 2121

£2.49

5GB

Unlimited

1,000

£4.99

10GB

Unlimited

1,500

MS Home

£5.99

10GB

Unlimited

1,500

Business

£8.99

40GB

Unlimited

3,000

MS Business

£9.99

40GB

Unlimited

3,000

Business Pro

£14.99

100GB

Unlimited

5,000

MS Business Pro

£16.99

100GB

Unlimited

5,000

Professional

£24.99

250GB

Unlimited

10,000

MS Professional

£27.99

250GB

Unlimited

10,000

1st Easy

Entry

www.1steasy.com

Enterprise

0808 222 2221

£5

1GB

30GB

Unlimited

SMR

£15

10GB

60GB

Unlimited

SMR

Ruby on Rails Entry

£10

1GB

50GB

Unlimited

SMR

Ruby on Rails Enterprise

£20

10GB

150GB

Unlimited

SMR

2020Media

Joomla

www.2020media.com

Wordpress

0800 035 6364

£3.75

Unlimited

20GB

Unlimited

£3.75

Unlimited

20GB

Unlimited

SugarCRM

£3.75

Unlimited

20GB

Unlimited

Asp.Net

£9.99

Unlimited

20GB

Unlimited

Tomcat

£29.99

Unlimited

20GB

Unlimited

S S

Blacknight solutions

Minimus

€4.20

10GB

100GB

Unlimited

www.blacknight.com

Medius

€7.50

20GB

200GB

Unlimited

Hosted Exchange Lite

€8.95

n/a

BrightCode Ltd

Lite

www.brightcode.co.uk

Standard

0844 484 9361

020 3384 1402

£23.50

5GB

100GB

£46.50

10GB

250GB

Premium

£112.50

25GB

500GB

100

Platinum Pro

£231.50

50GB

1000GB

250

POA

Unlimited

Custom

Brought to you by

Key hosting

R - Reseller

D - Dedicated

Power Plus (Windows/Linux)

£8.99

1GB

50GB

200

Power Xtra (Windows/Linux)

£12.99

1.5GB

40GB

500

Power Reseller (Windows/Linux)

£24.99

2GB

60GB

250

£29.99

10GB

100GB

Unlimited

£1

200MB

1GB

Professional

£2.42

5GB

50GB

200

Business

£6.99

12GB

120GB

Unlimited

Cobalt Web

Power VPS (Windows/Linux)

www.cobaltweb.co.uk

Home

Daily Internet

Linux Entry

www.daily.co.uk

Windows Entry

0844 3577 307

0845 466 2100

Phone support

Y Y

Firewall

1 50

Virus ﬁlter

2GB 10GB

Shopping cart

250MB 750MB

Database support

£1.49 £4.99

Front page extension

0800 107 79 79

Power (Windows/Linux)

POP3 accounts

Mega Deal (Windows/Linux)

www.catalyst2.com

Monthly bandwidth

Catalyst2

Disk space

Telephone

Name and URL

Cost per month

Package

Hosting type

M - Managed

O - Optional

Service level agreement

V - Virtual dedicated

S - Shared

Web control panel

Hosting types

N - No

Email support

Y - Yes

£2.29

500MB

5GB

£2.29

500MB

5GB

Linux Home

£4.99

3GB

30GB

301

Windows Home

£4.99

3GB

30GB

301

Linux Business

£8.99

12GB

150GB

Unlimited

Windows Business

£8.99

12GB

150GB

Unlimited

24GB

250GB

Unlimited

Linux Business Plus

£12.99

Reseller v2 Starter

£12.99

Reseller v2 Unlimited

£26.99 0800 072 3636

1GB per acc 10GB per acc 150 per acc Unlimited

Unlimited

Easily

Beginner

£2.08

1GB

Unlimited

www.easily.co.uk

Advanced

£4.17

5GB

Unlimited

S S

Professional

£7.08

20GB

Unlimited

£0.83

20-100MB

Unlimited

n/a

Easily Shop

£8.33

10GB

Unlimited

n/a

Website Creator

£0.83

100MB

Unlimited

n/a

VPS Advanced

£30

20GB

Unlimited

n/a

VPS Professional

£50

50GB

Unlimited

n/a

eHosting Limited

0844 412 1060

£2.49

1GB

10GB

www.ehosting.com

(UK); +44 (0)161

£17.99

10GB

100GB

1,000

£25.49

10GB

75GB

Unlimited

EuroFastHost

Email Hosting

£4

1GB

2GB

n/a

www.eurofasthost.com

Essential Windows

0800 862 0193

£7.50

2GB

5GB

Superior Windows

£14

5GB

10GB

Premium Windows

£25

10GB

25GB

100

Reseller Hosting

£40

50GB

100GB

Unlimited

Fast2host

Windows

£3.50

2GB

10GB

www.fast2host.com

Linux

01480 26 00 00

£2.80

2GB

10GB

Reseller windows

£19.95

5GB

50GB

100

Reseller Linux

£19.95

500GB

50GB

100

Fasthosts

Home

£4.99

2GB

Unlimited

500+

fasthost.co.uk

Developer

£8.99

5GB

Unlimited

1,000+

Business

£15.99

Unlimited

ForLinux Ltd

Xen Cloud 1

www.forlinux.co.uk/linux

Xen Cloud 2

0844 583 0777

0845 4210 440

£149

100GB

£249

200GB

Xen Cloud 3

£349

300GB

Fully Managed Standard

£399

1TB

500GB

Fully Managed Premium

£499

1TB

800GB

Fully Managed Ultra

£599

2TB

1TB

Continues–over–the–page

.net web_pro/classiﬁeds

5GB

30GB

1,000

£19.99

20GB

60GB

10,000

£19.99

Hosting type

£2.49 £8.99

Web control panel

Home Pro

Email support

0845 644 7750

www.heartinternet.co.uk

Phone support

Telephone

Starter Pro

Firewall

Package

Virus ﬁlter

Name and URL Heart Internet

Shopping cart

D - Dedicated

Database support

R - Reseller

Front page extension

O - optional

POP3 accounts

M - Managed

Monthly bandwidth

V - Virtual dedicated

S - Shared

Disk space

Hosting types

N - No

Cost per month

Y - Yes

Service level agreement

Key hosting

Business Pro

£10.75

Unlimited

Reseller Pro

£29.99

Unlimited

£79.99 & £89.99

160GB

Unlimited

D S

Dual Core (Windows & Linux) Hetzner Online AG

Level 1

0049 9831

£1.33

2GB

10GB

100

hetzner.com

Level 4

610061

£3.44

4GB

Unlimited

200

Level 9

£6.93

6GB

Unlimited

300

Level 19

£13.88

10GB

Unlimited

Hostway Ltd

VPS L100P

www.hostway.co.uk/vps

VPS L200P

0808 180 1880

£21.95

15GB

1TB

Unlimited

n/a

£31.95

30GB

1.5TB

Unlimited

n/a

VPS L300P

£41.95

45GB

2TB

Unlimited

n/a

VPS L400P

£51.95

45GB

Unlimited

n/a

VPS W100P

£25.95

15GB

1TB

Unlimited

n/a

JAB Web Solutions

M105

£1.26

256MB

3GB

www.jabwebsolutions.co.uk

H25

£2.04

1GB

8GB

P55

£3.75

2GB

15GB

R25

£8.16

2GB

30GB

R105

£18.84

6GB

Unlimited

Krystal Web Hosting

Amethyst

www.krystal.co.uk

Topaz

0800 043 0153

0845 200 0699

£2.49

250MB

10GB

£4.99

1.25GB

50GB

Ruby

£9.99

5GB

200GB

200

Diamond

£49.99

10GB

250GB

S/M

Diamond Plus

£99.99

20GB

500GB

S/M

Diamond Pro

£199.99

40GB

1TB

200

S/M

Laws Hosting

Beginner

www.laws-hosting.co.uk

Home

N/A

£1.99

1GB

70GB

£4.50

4GB

95GB

Small Ofﬁce

£7.50

8GB

120GB

Business

£9.50

15GB

165GB

Business Pro

£12.95

20GB

180GB

Platinum

£15.95

40GB

250GB

100

Netcetera

ONE Lite

www.netcetera.co.uk

ONE

0800 061 2801

£3

500MB

5GB

100

£6

5GB

Unlimited

1,000

RESELLER

£25

Unlimited

MAX

£50

5GB

100GB

1,000

NSDesign

Linux Standard

£2.08

200MB

4GB

Unlimited

Business Internet Solutions

Linux Business

£8.25

1GB

20GB

Unlimited

www.nsdesign.co.uk/

0141 585 6390

Linux Professional

£13.25

2GB

40GB

Unlimited

Linux Reseller Basic

£25

2GB

40GB

Unlimited

Linux Reseller Standard

£40

4GB

80GB

Unlimited

Orchard Hosting

Shared-1

£0.83

500MB

20GB

www.orchardhosting.com

Shared-2

£2.99

1GB

40GB

Shared-3

£4.99

2GB

80GB

100

Reseller-1

£17

6GB

240GB

Unlimted

Reseller-2

£28

10GB

400GB

Unlimted

Othello

Personal-1

Technology Systems Ltd

Business-1

www.othellotech.net

0161 850 0563

0871 277 6875

£2.95

50MB

1GB

£14.95

500MB

10GB

100

Reseller-100

£34.95

5GB

100GB

2,000

Ecommerce-1

£29.95

3GB

100GB

1,000

Brought to you by

Service level agreement

25GB

500GB

100GB

1TB

100

Hosting type

£1.99 £4.99

Web control panel

020 7252 2310

Pro

Email support

Telephone

Personal

Phone support

Package

OVH LTD

Firewall

Name and URL

Virus ﬁlter

D - Dedicated

Shopping cart

R - Reseller

Database support

O - optional

POP3 accounts

M - Managed

Monthly bandwidth

V - Virtual dedicated

S - Shared

Disk space

Hosting types

N - No

Cost per month

Y - Yes

Front page extension

Key hosting

Business

£9.99

250GB

2TB

1000

Premium

£19.99

500GB

5TB

1000

Penguin Internet Ltd

Web Presence

www.penguin-uk.com

Budget Hosting

029 200 900 17

£0.83

100MB

1GB

Unlimited

£2.08

500MB

5GB

Unlimited

Lite Hosting

£4.17

1GB

10GB

Unlimited

Standard Hosting

£7.49

2GB

20GB

Unlimited

Premium Hosting

£12.49

5GB

50GB

Unlimited

Platinum Hosting

£20.83

10GB

100GB

Unlimited

PurplePaw Ltd

www.purplepaw.co.uk

0870 486 2701

£60

10GB

50GB

Unlimited

£30

4GB

10GB

Unlimited

Power Hosting

£7.92

2GB

10GB

100

Play Hosting

£3.33

1GB

Email Hosting

£2.08

1GB

N/A

ServerBeach

Business Series Level 1.2

www.peer1hosting.co.uk

Business Series Level 2.2

0800 840 7490

£189.99

500GB

1TB

£199.99

500GB

1TB

Business Series - Level 3.3

£329.99

219GB

1TB

Intel Multi-Core Series - Level 6

£309.99

500GB

1TB

Intel Multi-Core Series - Level 7.3

£479.99

500GB

1TB

Dell PowerEdge III 2950

£549.99

219GB

1TB

£3.99

500MB

20GB

£4.99

1GB

50GB

Simple Web Hosting

Starter Plan

simplewebhosting.co.uk

Commerce

0800 619 1970

Advanced Plan

£5.99

2GB

100GB

100

Windows Plan

£5.99

2GB

100GB

100

Reseller Plans

£14.99

10GB

100GB

Unlimited

Free

Unlimited

£25pa

£2.49

500MB

Unlimited

£25pa

Streamline.net

Free Trial

www.streamline.net

Home

0844 941 1000

Power

£3.99

1.5GB

Unlimited

£25pa

Unlimited

£5.99

Unlimited

£25pa

Bulk

£99.99

Unlimited

£25pa

Swish Hosting

Email Hosting

£1.50

1GB

Unlimited

N/A

www.swishhosting.co.uk

Windows

08445 676971

£5.50

Unlimited

Linux

£5.50

Unlimited

Site Builder

£1

Unlimited

eCommerce

£7.50

Unlimited

£60

11GB

170GB

Unlimited

£80

15GB

23GB

Unlimited

£2.95

500MB

1GB

£3.95

3GB

100GB

TwentyHost

Reseller Advanced

www.twentyhost.co.uk

Reseller Professional

UK2.net

Starter

www.uk2.net

Home

01332 600300

0800 612 2142

Business

£6.95

100GB

1TB

1,000

Business Plus

£9.95

100GB

1TB

1,000

Ecommerce Starter

£9.95

1GB

50GB

Ecommerce

£10.95

10GB

500GB

1,000

Ecommerce Plus

£10.95

Unlimited

Dashboard and alert control centre

Free load balancing

Unmetered backup

Custom build

Proactive uptime monitoring

100% service level agreement (SLA)

24x7 support

Firewall

Non-critical app support

Critical app support

Dual-Core XL

OS support

www.1and1.co.uk

Cloud/hybrid available

Telephone 0871 641 2121

Disk type

Package Dual-Core L

Included bandwidth

Name and URL 1&1 Internet Ltd.

Included disk space

Dedicated & managed

Cost per month

.net web_pro/classiﬁeds

£59.99

250GB

Unlimited

RAID 1

£79.99

400GB

Unlimited

RAID 1

Quad-Core L

£99.99

750GB

Unlimited

RAID 1

Quad-Core XL

£149.99

1TB

Unlimited

RAID 1

Quad-Core XXL

£199.99

1.5TB

Unlimited

RAID 5

Hexa-Core XXL

£299.99

1.5TB

Unlimited

RAID 5

Hexa-Core 3XL

£399.99

2TB

Unlimited

RAID 5

1st Easy

Single Core

2x50GB Unmetered SAS RAID-1

www.1steasy.com

Dual Core

Request 2x100GB Unmetered SAS RAID-1

Quad Core

Request 2x250GB Unmetered SAS RAID-1

Dual Quad Core

Request 2x500GB Unmetered SAS RAID-1

Catalyst2

Bronze

www.catalyst2.com

Silver

0808 222 2221

0800 107 79 79

Gold Custom Virtual Dedicated ehosting

Request

£199

160GB

200GB

SATA

£299

146GB

400GB

SAS

£399

292GB

1TB

From £199 From 50GB From200GB

SAS

0844 412 1060

£94

320GB

100GB

SATA

Dedicated

01480 26 00 00

£80

n/a

SAS

ForLinux Ltd

Xen Cloud 1

0845 4210 440

£149

100

100GB

RAIDISATAII

www.forlinux.co.uk/linux

Xen Cloud 2

£249

200

200GB

RAIDISATAII

Xen Cloud 3

£349

300

300GB

RAIDISATAII

ehosting.com Fast2host fast2host.com

Fully Managed Standard

£399

1TB

500Gb

RAIDISATAII

Fully Managed Premium

£499

1TB

800Gb

RAIDISATAII

Fully Managed Ultra

£599

2TB

1TB

RAIDISATAII

Secure Web Server

POA

RAID

Tuned MySQL Server

POA

RAID

Y Y

Hetzner Online AG

EQ 4

0049 9831

£39

1.5TB

Unlimited SATA-II

www.hetzner.com

EQ 6

610061

£59

3TB

Unlimited SATA-II

EQ 8

£69

3TB

Unlimited SATA-II

EQ 9

£79

4.5TB

Unlimited SATA-II

Hostway ltd

2 vCPU

Request

50GB

Request

SAN

hostway.co.uk

4 vCPU

0808 180 1880

Request

100GB

Request

SAN

8 vCPU

Request

100GB

Request

SAN

Krystal

Veni

£200

160GB

1TB

SATA

www.krystal.co.uk

Vidi

£300

149GB

1.5TB

SAS

Vici

£450

300GB

3TB

SAS

Request

Various

NetBeneﬁt

0845 200 0699

N/A

0800 328 7477

Netcetera

VM500

0800 061 2801

www.netcetera.co.uk

VM2000

Various SATA/SAS

www.netbeneﬁt.com 20GB

20 GB

RAID 10

80GB

100 GB

RAID 10

160GB

2200DC

£60

Unlimited

SATA

2100QC

£120

2 x 250GB Unlimited

SATA

2660QC

£150

2 x 500GB Unlimited

SATA

Othello

VPS-LINUX-20

Technology Systems Ltd

VPS-CPWHM-30

www.othellotech.net

£25 £100

0871 277 6875

Request

20GB

200GB

SAS

30GB

300GB

SAS

CORE2DUO

80GB

1TB

SATA

QUADCORE

250GB

2TB

RAID 1

8WAY

1TB

5TB

RAID 10

RubyDev-1

1GB

50GB

Brought to you by

Key hosting

Telephone

24x7 support

100% service level agreement (SLA)

Proactive uptime monitoring

Custom build

Unmetered backup

Free load balancing

Dashboard and alert control centre

Managed Server

0800 840 7490

Request

Any

www.peer1hosting.co.uk

Business Series Level 1.2

500GB

1TB

SATA

Business Series Level 2.2

500GB

1TB

SATA

Disk type

Package

ServerBeach

Cost per month

Name and URL

Firewall

D - Dedicated

Non-critical app support

R - Reseller

Critical app support

O - optional

OS support

M - Managed

Cloud/hybrid available

V - Virtual dedicated

S - Shared

Included bandwidth

Hosting types

N - No

Included disk space

Y - Yes

Dual Xeon 5420 DQC

219GB

1TB

SAS

Intel Multi-Core Series -Level6

500GB

1TB

SATA

IntelMulti-CoreSeries-Level7.3

219GB

1TB

SAS

Dell PowerEdge III 2950

219GB

1TB

SAS

250GB

Webfusion

Dedicated Level 1

Unlimited

SATA

webfusion.co.uk

Dedicated Level 2

0800 031 7800

2x250GB Unlimited

SATA

Dedicated Level 3

2x450GB Unlimited

SAS

Dedicated Custom Servers

up to 2TB

Unlimited

SAS

VPS Community

From £19.99

25GB

Unlimited

SAS

VPS Business

From £29.99

40GB

Unlimited

SAS

VPS Developer

From £39.99

50GB

Unlimited

SAS

VPS Enterprise

From £59.99

60GB

Unlimited

SAS

Enterprise dedicated

£449

6x146GB

500GB

SAS

Standard managed

£399

2x500GB

100GB

SATA

25GB

Professional managed

£499

2x146GB

250GB

SAS

50GB

Enterprise managed

£599

6x146GB

500GB

SAS

100GB

Cloud hosting Name and URL

Package

Telephone

1&1 Internet Ltd

Dynamic Cloud Server

0871 641 2121

1and1.co.uk

From

1-4 cores

1-15GB

£29.99

2GHz

Reseller packages

OS and application support

24x7 Support

100% Service Level Agreement (SLA)

Dedicated/Hybrid available

Load balancing

Firewall

Server control API

Web control panel

SAS

On-demand hourly billing

SATA

250GB

Full root/ administrator access

100GB

2x146GB

Linux available

2x500GB

£349

Disk size per server

£249

Professional dedicated

Memory size per server

Standard dedicated

www.zen.co.uk

CPU size per server

Zen Internet

Cost per month

0845 058 9000

100-

800GB

Continuum Hosting Ltd

Demonstration Account

Free

0.4-2.5GHz

128MB

2GB

www.continuum-hosting.com

Development Environment

£15

0.4-2.5GHz

128MB

2GB

Custom Environment

£30

0.4-2.5GHz

256MB

2GB–1TB

256MB- 1GB-2TB

01962 658 271

-16GB ElasticHosts Ltd elastichosts.co.uk

Flexible

0845 686 8642

£30

500MHz -2.5Ghz

Netcetera netcetera.co.uk/cloud

Cloud platform

0800 061 2801

From

8GB

£25 1-4 cores 512MB- 1GB-1TB 16GB

StratoGen stratogen.net

VMware Hosting

Want to be part of the hosting directory? Contact:

Brought to you by

0845 544 0465

From

£75

2.6Ghz

Up to

24GB

1TB

Ricardo Sidoli - Senior Sales Executive | telephone: 0207 042 4124 | email: rsidoli@futurenet.co.uk

WebCreationUK are pleased to bring .net readers our useful hosting guide. With over 5,000 clients to date, leading web design company WebCreationUK is able to offer high quality, cost effective services to businesses. We provide bespoke web

design and development, ecommerce solutions/online shops, SEO packages and web hosting services. Whatever your website requirements we would love to help. Call us for a friendly chat on 0845 054 0060 or visit our website at www.webcreationuk.com.

.net shopping centre

To Advertise call Ricardo Sidoli on 0207 042 4124 or email: ricardo.sidoli@futurenet.com

PurplePaw.co.uk

eurofast Shared Windows Hosting from ONLY £3.35 p/m Business class web hosting with UK support at affordable prices

Virtual & Dedicated Servers from £30 p/m

Full system control and unrivalled performance with your own server

Domain Names registration, management, forwarding Live Support!

www.eurofasthost.co.uk - 0800 862 0193

About Us: New Website New Packages New Features New Servers Newsletter Affiliate System

New Shared Hosting Packages, with up to 2GB Disk Space and 10GB Bandwidth! No site? No problem! Email-only hosting just £25/year! - Web, Email, and Reseller Hosting - Domain Registration & Management - Free Domain Parking & Forwarding - 24/7 Control Panel & Online Support

.net Coupon: DN03 - Pay for 12 months hosting and get 14!

.net advertising

/to advertise call Ricardo Sidoli on 020 7042 4124 or email: ricardo.sidoli@futurenet.com

.net shopping centre

To Advertise call Ricardo Sidoli on 0207 042 4124 or email: ricardo.sidoli@futurenet.com

NEW

Updated Packages 3GB UK Web Space 3GB Premium Bandwidth Unlimited MySQL Databases Unlimited POP3 PHP 4, CGI, Perl, FrontPage

£99

New Updated Packages 2 Months FREE 10GB UK Web Space 5GB Premium Bandwidth Host Unlimited Sites Host Unlimited Domains Advanced Domain Pointing System

Unlimited UK Web Space Unmetered Premium Bandwidth Unlimited Spam & Virus Protection Unlimited Multi Site Accounts Reseller Control Centre Custom Control Panel Personal Name Servers

£20

Virus & Spam Protection pm

99.99% Uptime

or £200pa

£30

or £300pa

Call Now 08707 42 44 74

3P per minute from BT Landlines, prices may vary from other providers. All prices shown exclude VAT @ 17.5%.

Ultra

85 Mail Boxes

etwork Fast N

next_month

develop discover design

Sex up your images with CSS3 l Create a cool image gallery

l Give your backgrounds a boost

l Get to grips with border-image

back issues

Missed an issue of .net? Contact our back issues department before it sells out

Issue 204 Design for the iPad Make money with online ads; create a tabbed jQuery interface; Joi Ito interview; make your Flash accessible On the CD FlySpeed SQL Query; A4 Flash Menu Builder; Dreamweaver video training; templates

Issue 205 Google tools for designers Quick & easy JavaScript; add cutting-edge CSS3 effects; make a JavaScript theme switcher; code stylish forms with PHP On the CD Heroglyph Rapid 2.6 SE; Mail Commander 9.06; Google toolkit; video training; templates

Issue 206 Web standards special The future of web standards; build responsive sites today; CSS3 design tips; design for mobile first On the CD Flash Secure Optimizer 2.3; Inspyder Sitemap Creator 3 SE; CSS toolkit; Web templates

Don’t miss an issue >

Subscribe to day, turn to page 40 no w

new issue

on sale 12 Oct

>> Order your back issues 0844 848 2852 UK or (rest of the world) +44 (0)1604 251 045

>>Price per issue

(Including P&P)

£8 UK, £9 Europe, £10 Rest of the world

.net october 2010 127

.net on_the_cd

Full program >

Your essential CD this month Submit your website More than 75 per cent of website trafﬁc is directed there by search engines, so on this issue’s CD we’ve included a streamlined version of Auto Website Submitter. It’s a completely automated application that submits your pages to thousands of search engines and directories and saves you huge amounts of time and hassle. We’ve also brought you Remove 3.1.2, a fully featured app that offers a better way to uninstall programs; over an hour’s worth of quality training on the subject of Photoshop CS5 from Inﬁnite Skills; templates from Boxed Art and AllWebCo; an ecommerce toolkit; extracts from two great new books; and more!

GSA Auto WebSubmitter Lite Search engine submission application Requires Windows URL website.submitter.gsa-online.de GSA Software Development and Analytics supplies a range of professional software that provides unique solutions to specific problems. GSA Auto Website Submitter is a program designed to submit your web pages to thousands of search engines and directories. Because it is totally automated it can save you time and money as well as significantly improve your search engine rankings. Unlike many other similar programs, GSA WebSubmitter is almost fully automated. All you have to do is fill in the different categories and descriptions when prompted and the software does the rest. GSA even provide updates for WebSubmitter several times a month to ensure that all the included submission sites of more than 10,000 directories and search engines are still functional. In a nutshell, GSA WebSubmitter increases search engine traffic to your website with automatic submission that saves time and money, and increases the number of backlinks available through directory submissions. It also includes an email validation tool that logs into your email account and automatically clicks the verification links. Automated CAPTCHA solving can also be achieved by using the decaptcha.com service.

The version on the CD is fully registered.

Reader offer >

.net readers who would like to buy the latest version of GSA Auto Websubmitter can upgrade with a special 10 per cent discount. To claim the discount, readers will need to purchase online and use the following coupon code when prompted: GSA-6F0G

Becky Collier, new media editor becky.collier@futurenet.com COMMENTS OR SUGGESTIONS? We’d love to hear any feedback on this issue’s applications. Email us at netmag@futurenet.com

Click and send GSA WebSubmitter is almost fully automated: just fill in the different categories and descriptions when prompted and the software does the rest

128 .net october 2010

.net on_the_cd

Full program >

Remove 3.1.2 Uninstallation and application removal

Requires Windows

The version in the folder is fully registered.

URL www.mikasalonen.com/remove Remove is a fully featured uninstaller and unique program for removing applications and entries from the Windows Add/Remove applet in the Control Panel. In addition to the standard uninstall option, it enables you to remove, modify and back up obsolete and other program entries. Remove will uninstall hidden programs and remove their entries as well, with just a couple of clicks. You can say goodbye to unwanted software and program entries – regardless of whether they’re hidden or not. Remove also makes it possible to restore program entries that have already been removed from the Add/Remove Programs program list with its powerful backup feature. Remove is incredibly easy to use and the user interface is friendly and simple. In fact, the main window consists of only two separate parts – ‘Remove/Install Programs’ and ‘Restore Removed Entries’.

Trial >

Removal service Remove is a fully featured uninstaller and unique program for

We’ve also included a demo version of the very latest release of Remove in the Trials section. Remove 4.1 can highlight your phantom program entries and if the uninstaller for a particular program cannot be found, Remove will highlight the program entry in red, making it easier for you to recognise which entries should be removed.

removing apps and entries from the Windows Add/Remove applet in the Control Panel

Resources > A collection of useful additions to your toolkit

AllWebco exclusive website templates

BoxedArt templates

Requires Windows or OS X

SoundScalpel Professional Sound Effects

URL allwebcodesign.com

Requires Windows or OS X

BoxedArt supplies templates, banners, interfaces, buttons and menus, all designed with the user in mind, and includes source materials that allow for easy customisation and editing. If you buy the unlimited download membership you can download any template or other product type from dozens of categories for free. Full support and tutorials are available, making BoxedArt a one-stop shop for your needs. On this CD, BoxedArt has supplied readers with ﬁve website templates in CSS, HTML and PSD.

Founded in 1996, Allwebco Design Corporation (allwebcodesign.com) offers a range of complete website templates with built-in JavaScript, Flash, CSS and multiple pages for experienced developers as well as novice web builders. In the folder there are three templates, all exclusive to .net readers, for general use. Important: please read the readme documents in the folders for usage instructions.

URL www.soundscalpel.com SoundScalpel.com supplies a huge variety of professional sound effects and samples on its website. Choose from a range of effects that include animals and insects, weather, trains, planes, trafﬁc, crowd sounds and more. This issue’s CD contains 20 helpful sound effects that you can use in your projects – and don’t forget to check out the complete collection available online.

Requires Windows or OS X URL www.boxedart.com

Extracts from Adobe Photoshop CS5 Training Requires Windows or OS X URL www.infiniteskills.com/ training/photoshop-cs5-essentialtraining.html Inﬁnite Skills specialises in providing narrated video tutorials on a wide range of applications and programming languages. Adobe Photoshop CS5 Training takes you through learning the fundamentals of Photoshop CS5 using easy-tofollow practical examples. The CD includes over an hour of extracts.

.net october 2010 129

.net on_the_cd

DISC

207 Complete listing

Full software

GSA Auto WebSubmitter Lite (Windows only) A handy tool that submits your web pages to thousands of search engines and directories. Simply enter the information about your web pages and the software does the rest. Remove 3.1.2 (Windows only) A fully featured uninstaller and unique program for removing applications and entries from the Windows Add/ Remove applet in the Control Panel.

Trial software

GSA Auto WebSubmitter 3.99 (Windows only) Search engine submission tool.

> If you want to neatly archive your .net CD collection, you can make obsessive use of our PDF template.

Missing CD?

> Please consult your newsagent

Disc support

> If you’re having difficulties using the

CD, visit futurenet.co.uk/support. If you’re still having difficulties, please email our reader support team (support@futurenet.co.uk) or call 01225 822743 and ask to speak to Disc Support. This disc has been thoroughly scanned and tested at all stages of production but, as with any new software, we still recommend that you run a virus checker before use. We also recommend you have an up-to-date backup of your hard disk(s) before using this disc. Future Publishing cannot take responsibility for any disruption, damage and/or loss of data to your data or computer system that may occur while using this disc, or the programs and data on it. Consult your network administrator before installing software on a networked PC.

<prev 130 .net october 2010

A4Desk Flash Shopping Cart Creator 1.15 (Windows only, trial) AlphaShipper 1.2.4.77 (Windows only, trial) GSA Regnow Statistics Expert 1.4.1 (Windows only, trial) RapidShop 5.1.1 (Windows only) ShopFactory Total-Care 8.2 (Windows only, trial) WebPen 3.1 (Windows only, trial)

Magazine ﬁles

PDF book extracts

Extracts from Introducing HTML5 by Bruce Lawson and Remy Sharp and The Web Designer’s Idea Book, Volume 2: The Latest Themes, Trends and Styles in Website Design by Patrick McNeil

Video training

Over an hour’s worth of video training from the Inﬁnite Skills DVD Adobe Photoshop CS5 Training Free branding aids courtesy of

Tutorial/Buttons Tutorial/Map Tutorial/Tabs Tutorial/Grids

Remove 4.1 (Windows only) Fully featured uninstallation and application removal program.

>>Never miss another issue! Subscribe now When you subscribe, make a massive saving

Resources

and get each issue delivered to your door for no extra cost

AllWebCo Templates BoxedArt templates SoundScalpel Sound Effects

Free inlay

Ecommerce toolkit

Visit www.myfavouritemagazines.co.uk or call 0844 848 2852