NET208 - Top 20 Fonts For The Web by Curtis Brenneman

One search in Google generates 7g of CO2, just 2 searches are like boiling a kettle of water *2

The worldâ&#x20AC;&#x2122;s 44 million servers produce as much CO2 as entire countries such as Argentina *1

Your our

*1 - McKinsey

is e r u t fu ss busine

*2 - BBC/Harvard University

*3 - Carbon Trust

Donâ&#x20AC;&#x2122;t leave your mark on the world

Data centres worldwide are expected to generate 533 million tonnes of CO2 by 2020 *3

Carbon neutral hosting

utur e Your F UKFast’s clean, green power scheme energises a brand new data centre

Providing 100% carbon neutral hosting to an empowered group of clients

This is the UK’s ﬁrst renewable energy creation scheme to totally offset your dedicated server

Call now 0800 954 0895 to register or visit www.ukfast.co.uk/carbon-neutral-hosting.html

.net content

Feed 14

Top 20 fonts for the web 42 Opinion/ The Standardistas 76

Enhance images with CSS3 52

Build-off: News sites 96

Gallery 64

“We want to make civic duty easy” Anil Dash, Expert Labs Interview, page 36

.net november 2010

Proﬁle/nclud 72

.net content

.net content Top 20 fonts for the web

Your essential CD this month 128 Advanced Web

Stats 1.1

Web statistics tool

articles > 36

Interview

Pioneering technologist and blogger Anil Dash explains how he’s helping the US government and how a combination of real-time apps and huge open data sets are leading a new wave of innovation on the web

News and RSS feed support

Enhance website images with CSS3

By utilising modern CSS, designers can improve the appearance and management of website images. Craig Grannell ﬁnds out how

Create a cool data visualisation

Brian Suda explains the basics of turning dry statistics into beautiful data visualisations

regulars > 113 114 115 116 117 118 119

Welcome

Web Pro

Inbox

based services

Feed

Opinion Location-

Ecommerce The new

Includes interviews with Virb.com’s Brad Smith and Paul Irish

ecommerce rock stars

Security Automatic updates for your apps

Startup How to

communicate ideas

Hosting Do extras add

value to hosting packages?

Analytics Facebook data Search Measuring SEO

49 101 108

UK/overseas subscriptions Next issue US/Canada subscriptions Expert advice

showcase >

technique > 78

CSS/progressively enhance a menu

Mobile/build an Android app

How to make your pop-up menus more interesting for users of capable browsers

Get your app onto an Android phone with Appcelerator. Robert Reinhard explains how

Top 20 fonts for the web

New web developments mean that it’s easier than ever to get creative with typefaces. Elliot Jay Stocks picks 20 fonts that demand your visitors’ attention

129 Rooster 2.9.2.1

issue 208/november 2010

CSS/speed up site builds with OOCSS

Building sites in CSS can be repetitive and time-consuming. OOCSS offers a nifty shortcut, explains Nicole Sullivan

Photoshop/create a social media icon Bolivian web developer and graphic designer Alvaro Guzman explains how to create a cool RSS icon

100

102

104

Gallery

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

Proﬁle

Boutique agency nclud is known for its quality UI design. Oliver Lindberg speaks to co-founders Alex Giron and Martin Ringlein about HTML5, CSS3 and playing Mario Kart

Focus_on

Opinion

Matthew Smith looks at good examples of mega-menus

Teaching web design should integrate theory and practice, say Nicklas Persson and Christopher Murphy

Website build-off

Three leading designers accept the .net challenge. This month, Jeff Croft, Andy Culbert and Andy Crawford tackle the subject of news sites

Opinion

The IE9 beta might be out, but IE6, 7 and 8 still have trouble rendering CSS3. Addy Osmani introduces CSS3Pie

Makeover

Special subscriptions offer! > Turn to page 40 r (or page 101 fo ) US and Canada

New York designer Yaron Schoen comes up with a fresh and tasty look for ratemyplace. org.uk, a site about food safety inspections in Staffordshire

How we built

Michael Daley, Nick Stanhope and Alexander Ivanov of We Are What We Do explain how community history site historypin.com was built

.net november 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

“New sites,, s services and apps pp ﬂy y tthrough g our RSS readers and we barely yh have time to op process them” “Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it.” An insightful and wise man once uttered those words to me in my youth, and they’ve stuck with me ever since. (Actually, maybe it was Ferris Bueller, but hear me out.) Despite the fact that the web didn’t even exist when these words were spoken, they seem particularly well suited to the medium. New sites, services, apps, and stories ﬂy through our RSS readers, and in some cases we barely have time to process the information before we move on to the next item. Web design is no different. It’s this pace of development that makes our industry so exciting, but it’s also easy to feel the need to try and excel in every area: a Sisyphean task. Yet – as illustrated by the biographies of our contributors (see page 8) – you may be better identifying the areas where you excel, immersing yourself in those given subjects, and keeping up with other areas via your peers and publications like .net. Enjoy this issue! editor-in-chief 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 101 (US/Canada) or page 40 (everywhere else).

myfavouritemagazines.co.uk .net november 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

Faruk Ate

Nicole Sullivan

Nicole Sullivan is an author, speaker and CSS ninja. She helps clients such as Facebook, box.net, W3C and Salesforce improve their website performance. On page 86, Nicole explains how you can use the OOCSS framework to speed up your site. stubbornella.org

Faruk is a creative design and web development consultant living in The Netherlands. He writes and speaks about making great websites. On page 78 he explains how to progressively enhance a pop-out menu. farukat.es

Future Publishing, 30 Monmouth Street, Bath BA1 2BW Telephone +44 (0)1225 442244 Website www.netmag.co.uk Editorial Editor in chief 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 Faruk Ates, André Beato, Alastair Campbell, Jeff Croft, Dave Chaffey, Mike Chipperfield, Andy Crawford, Andy Culbert, Michael Daley, David Deutsch, Nick Francis, Hugh Gage, Craig Grannell, Alvaro Guzman, Sarah Harlin, Whitney Hess, Karl Hodge, Tom Hughes, Tom Hughes-Croucher, ilovedust, Alexander Ivanov, Bruce Lawson, Joe Leech, Inayaili de León, Gary Marshall, Christopher Murphy, Patrick McNeil, Ali Osmani, Mark Penfold, Nicklas Persson, Robert Reinhard, Struan Robertson, Remy Sharp, Usman Sheikh, Yaron Schoen, Fadi Shuman, Matthew Smith, Nick Stanhope, Elliot Jay Stocks, Brian Suda, Nicole Sullivan, Wendy Tan White, Ryan Taylor, Charles Weir, Mike Williams, Paul Wyatt Photography Daniel Byrne, Gavin Roberts Group Senior Editor Steve Jarratt Group Art Director Ian Miller Creative Director Robin Abbott Editorial Director Jim Douglas Advertising London Sales Director Malcolm Stoodley, 020 7042 4156, malcolm.stoodley@futurenet.com Account Sales Manager Ricardo Sidoli, 020 7042 4124, ricardo.sidoli@futurenet.com

Elliot Jay Stocks

Elliot Jay Stocks is a designer, illustrator, speaker and author. His clients include organisations such as Microsoft, Virgin Group, WordPress, and MailChimp, plus he’s the creator and publisher of 8 Faces, a bi-annual magazine dedicated to typography. On page 42 Elliot reveals his top 20 typefaces for the web. elliotjaystocks.com

Marketing Brand Manager Dan Bruce, daniel.bruce@futurenet.com Promotions Executive Joanne White, joanne.white@futurenet.com 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 Executive Ofﬁcer (UK) Mark Wood, mark.wood@futurenet.com Subscriptions Phone our UK hotline 0844 848 2852; international (+44) (0) 1604 251045 Subscribe to .net magazine online at www.myfavouritemagazines.co.uk

Alvaro Guzman

Addy Osmani

User interface designer Addy Osmani is project manager for Shortsaleology. On page 100 he reveals how to render CSS3 in IE6, IE7 and IE8. addyosmani.com

.net november 2010

Brian Suda Jeremy Keith

Bolivian web developer and graphic designer Alvaro’s work covers advertising, corporate images, print and web design. On page 92 he walks us through the creation of a social media icon. alvaroguzman.com

NEXT ISSUE ON SALE: 9 November 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

Brian Suda is an informatician residing in Reykjavík, Iceland and author of Designing with Data (designingwithdata. com), which we review on page 30. On page 58 Brian explains the basics of turning dry statistics into beautiful, informative data visualisations. suda.co.uk

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).

L E A D I N G TEC H NO LO G Y

FO R

O VER

r3 fo

I N D U ST RY

10 YEA R S

24Core DedicatedServer

s th on m

E V I S U L C X E UK

Introducing our most powerful server ever

Ultimate power & control with the latest in Advanced Server Monitoring

DS1100 £174.50pm £349 ex VAT ✔ 2x AMD Opteron™ 12 Core CPUs.

Designed for the most demanding websites, databases and web apps, our UK exclusive dedicated server gives you the performance you demand.

✔ 32GB RAM.

Plus it’s now easier and faster to make IT decisions with our NEW Advanced Server Monitoring. Get automatic updates on your server resources, web services and databases performance.

✔ NEW Advanced Server Monitoring (optional).

All of our dedicated servers are secured in our two state-of-the-art UK data centres with onsite engineers and UK support teams operating 24/7.

✔ 2x 300GB SAS HDD with RAID 1.

DEDICATED SERVERS ................

✔ 2x 500GB SATA HDD with RAID 1.

for3months†

✔ Full root server access via KVM remote control. ✔ Unlimited bandwidth* with 100Mbps connectivity.

SEE WEBSITE FOR DETAILS

✔ FREE SSL certificates included for the first year. ✔ Choice of OS includingWindows® 2008 and Linux®.

Visitwww.fasthosts.co.ukforourfullrangeofdedicatedservers,startingfromjust£29.50exVAT plusadditionalsavingsforannualpayments.

Secure UK data centres • Unlimited bandwidth • 24/7 UK phone & online support Call us now to get your server online

0844 583 0714

www.fasthosts.co.uk/dedicatedservers

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

Proud sponsor of

World Class Dedicated Servers

.net inbox

inbox

Your emails, comments and tweets

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

Subject: Responsive web design From: Gérard Aubrée

It’s always with great pleasure that I read your magazine. I was particularly interested by the articles dealing with CSS in issue 206. I’ve been looking for a while for a oneshot way to address various screen displays. The article ‘Responsive web design’ by Ethan Marcotte, and related features gave me the answer. The use of media queries is simple (which does not necessarily mean easy to implement) and efficient. Plus it allows the use of a single style sheet, which can be validated by the W3C. What more could anyone ask for? I also agree with the article ‘Mobile first’ by Luke Wroblewski, which suggests we start designing for smaller screens before adding CSS properties for medium and larger ones.

A single style sheet should ideally provide a coherent view throughout the design and development of a site. Nevertheless, a question remains. How can older sites satisfy new requirements? In order to clear it up, I have tailored an existing site according to different screen displays and checked where difficulties are arising. After having tackled most critical points, such as images or forms, I found out that the result was better than expected and became fully aware of the kind of difficulties I would encounter while rebuilding the site from a bottom-up perspective. I am so grateful to your magazine and your team for all the work you are doing for your readers. Please, be lenient with the English of a Frenchman, which is not better than the French of an Englishman or woman.

Mail of the month

Subject: Best code editor From: Michael, Pinnacle Web Design

With regards to the letter from Mark Weston and Usman Sheikh’s response in issue 206, I’ll admit to having a bit of a text editor fetish and have tried all of the Windows ones listed and more. Out of the others I’ve tried, there have been: • Context (www.contexteditor.org) • E (www.e-texteditor.com), a Textmate clone • Intype (intype.info) – looked and felt good, but the devs promised much and have (so far) delivered little. I’ve finally settled on Sublime Text (www.sublimetext.com), which enables you to change or add just about everything; syntax highlighting, key bindings, menus, snippets, macros and so on. Although it doesn’t have FTP support built in out of the box, one of the guys on the forum has written a plug-in that uses WinSCP. Another I find useful is one that integrates WinMerge. One thing that’s different in Sublime is that the customising is done in XML-based config files rather than through a GUI. The API is quite extensive so if it doesn’t do what you want, it’s just a case of getting out that book on Python you promised yourself you’d look at one day – and getting down to it! Other cool features include a mini-map that’s like “seeing your code from 10,000 feet”; two full-screen modes (one of which is like Darkroom/Writeroom/Q10, but of course you still get to use the full functionality of the editor); a unique multi-select function; and side by side multi-pane editing. A Zen Coding plug-in is also available. There’s a portable version of Sublime too; I run mine from my Dropbox folder so I get the same settings/config on all my machines. My advice? Go check it out! We certainly will, Michael. Thanks for sharing your knowledge and experience on the subject – which I’m sure readers will find most helpful.

.net november 2010

Thanks for your thoughts, Gérard, and your English seems fine to us (in fact, better than that of some English people we know … )

Subject: Which CMS? From: Matthieu Themans

I’m getting more and more projects to work on for clients, and I’d really like to simplify tasks and avoid rewriting code. My quest is to find the CMS to work with for every project. Like many coders, I think reinventing the wheel is useless and time-consuming. I’m often working with WordPress, Drupal, Joomla and PrestaShop but hey, that’s four services to stay up to date with! I’d like to have a solid answer from developers about which open source system is good for everything: to build websites, blogs, ecommerce sites and so on. That way, I can start to specialise in one of them and try to code all my projects with only one, good, implemented platform. Thanks a lot for publishing my question. Hmm, not sure there’s a simple answer to this, Matthieu: as our feature on the subject a while back showed (www.netmag.co.uk/ zine/discover-culture/choose-the-bestfree-cms), different content management systems have pros and cons depending on the type of project you’re working on. If one was truly ‘better’ than the others, its rivals would quickly wilt and die, but all of the big CMSes continue to have their fans and devotees. Still, what do other readers think?

Goal-oriented Dave Smith replies to Matt’s questions about advanced goal tracking

.net inbox

Media queries Gérard Aubrée found the answers he was looking for in Ethan Marcotte’s article in issue 206

Subject: .net Awards From: Jessica

I was just curious as to how you compile your list of nominees for the .net magazine Awards each year. I’ve searched the site, but have been unable to find any information on this subject. Any insight would be greatly appreciated. Thank you. Well Jessica, the process begins with readers being invited to make nominations. The editorial team then draws up a shortlist in each category, combining readers’ ideas with our own. It’s a subjective call, of course, but we try to be fair and balanced. We also try to avoid defaulting to the same old faces (unless they truly deserve it). If it raises eyebrows for people to see node.js in the same category as Android, or CSS-Tricks taking on Twitter, so be it: the .net Awards isn’t just for the ‘big boys’. Next comes the readers’ vote. Once all the votes are in, the top three in each category are put to our panel of more than 100 expert judges, who select the winners. Check out thenetawards.com to find out who’s made the final three; to catch up with the latest awards news; and on 18 November to discover the overall victors.

“My quest is to ﬁnd the CMS to work with for every project” Matthieu Themans

Subject: Advanced goal tracking From: Matt

I’m a big fan of your magazine and each issue teaches me something new that I want to try in the sites I design and build. I was putting the finishing touches to a new contact form recently when I remembered that Dave Smith wrote a brief tutorial in issue 204 (page 104) about goal tracking in Google Analytics when a unique pageview isn’t generated. I tried to incorporate his technique, only to realise that the tracking code Google provided me when I created my new analytics account was of the new, asynchronous variety. As far as I can tell, I wasn’t given a choice by Google when I created the account for this new website. I’d love to see an example of Dave’s technique that would work in the new asynchronous environment. Also, are there tricks to incorporating the code with PHP? I’m validating my form with client-side JavaScript and again with PHP. I’d like to set various goals based on the PHP validation. For example, when the submit button is clicked and all validation is passed, that would be one goal. If it’s clicked but the form isn’t sent because one or more SPAM was tripped, I’d like that to be a trackable ‘goal’ as well, so I know which SPAM traps are working. Dave Smith replies: Great question, Matt, and I’m pleased you brought it up. The code actually remains largely the same. If you’ve installed your tracking code successfully, all you need to do is change the code in your anchor. Take this code – onClick=”javascript: pageTracker._ track Pageview(‘/goal/brochure-download’);” – and simply change it to this:

Judgement call Jessica asks how the shortlists for the prestigious .net Awards are compiled onClick=”_gaq.push([‘_trackPageview’, ‘/goal/brochure-download’]);” If you need a bit more detail, then Google has provided a whole section of docs that will guide you through the process of migrating from the traditional code to the asynchronous code. You can access this at: code.google.com/apis/analytics/docs/ tracking/home.html. As regards your form validation question, you just need your PHP to log a different virtual page view (code.google.com/apis/analytics/docs/ tracking/asyncMigrationExamples. html#VirtualPageviews) depending on the success or failure of the validation. However, this time, put the _trackPageview code in the head tag of your site. By the way, I’ve also posted a blog article about converting from old GAnalytics code to the new async GAnalytics code at www.deepbluesky.com/blog/-/quicktip-converting-to-new-google-analyticsasynchronous-tracking-code_134/.

Correction: Webfusion advert

Readers with highly tuned design sensibilities may have been taken aback by the appearance of an advertisement for hosting company Webfusion (www. webfusion.co.uk) on page 57 of our last issue (207). This was due to a printing error that was in no way a reflection on the professionalism of Webfusion. Turn to page 39 of this issue to see how the advert should have looked! l

>> 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

.net november 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

Richard Vobes, “the UK’s most proliﬁc podcaster” chats about his award-winning show

Threaded

Oliver Lindberg looks at how BP’s public relations blunders have been parodied on the web

IE9 beta unveiled

Reviews

Virb.com, Stylizer, books on PHP and data visualisation, plus a new DVD from Tantek Çelik

Big mouth

‘Contribute to my site’ is the new ‘pay to play’, says Gary Marshall – and it sucks just as much

.net november 2010

Released on 15 September, the Internet Explorer public beta (ie.microsoft.com/ testdrive) boasted a refreshed, refined user interface and major under-the-hood changes. Having learned from its rivals, IE9 eschews typical Microsoft interface complexity. The company clearly wants the browser to be relatively ‘invisible’, and there’s a lack of buttons, along with a unified address/search field. Some odd decisions are evident – tabs placed right of the address bar save space but the system isn’t scalable, and the blank title bar wastes space – but it’s nonetheless a bold step forwards. The browser makes the most of Windows, with tear-off tabs

integrating with Aero Snap, plus there’s a feature that enables users to ‘pin’ sites to the taskbar. More than mere shortcuts, pinned items provide a jump list to important options (such as ‘New Tweet’ for Twitter and ‘My eBay’ for eBay); and with extra development work, sites can offer enhancements that make them reminiscent of iOS apps. The big news for designers and developers is that, along with offering increased stability, IE9 makes strides regarding standards. There’s support for HTML5 video and audio, much of CSS3, SVG, WOFF and ECMAScript 5. In SunSpider, the beta achieves near Chrome-level performance; in Acid3, Microsoft’s new browser scores 95% – a huge

improvement over its predecessor. On reasonably powerful PCs, the GPU can be leveraged for further performance boosts. For all the improvements, concerns remain. Microsoft’s development cycle is lengthy, and so by the time IE9 comes to market, rivals might have eclipsed it. Also, earlier this year Microsoft exec Todd Brix suggested Windows Phone 7 devices won’t use the technology, instead utilising an ‘evolved’ IE7. However, if Microsoft gets its desktop browser right, it has much to gain. Critics will be quietened, and with the browser potentially offering app-like experiences with augmented websites, Chrome OS may get a serious rival. ●

Illustration/Tom Hughes

Microsoft returns to the browser wars with a vengeance

Instant search

Google has launched Google Instant, which works like predictive text, potentially shaving several seconds off every query. At launch, the service was limited to google.com (in English) and a handful of other domains, and required Chrome, Safari, Firefox or Internet Explorer 8. Over the coming months, Google hopes to expand support to other languages and platforms. For developers, there’s uncertainty regarding how Google Instant will affect search behaviour and SEO. Steve Rubel, SVP, director of insights for Edelman Digital, claims it makes SEO irrelevant (steverubel.com/google-instant-makesseo-irrelevant) on the basis that “no two people will see the same web”. Rather than a search always producing the same result, users will “start tweaking their searches in real-time”. With feedback, behaviours change, he argues, and with everyone seeing a different web, optimising it becomes impossible. Google software engineer Matt Cutts offers a counterpoint (mattcutts.com/ blog/thoughts-on-google-instant), saying SEO won’t be irrelevant, but it will change; due to on-the-fly query tweaking, users will be less likely to see sites deep in results listings. However, Cutts argues: “SEO is in many ways about change. The best SEOs recognise, adapt, and even flourish when changes happen”. Tech pundit Robert Scoble has also been positive about Google Instant on his Twitter account (@scobleizer), claiming “Google Instant takes power away from publishers and gives it to searchers. Google SEO used to be about links, now [it’s] about user intention.” On SEO’s irrelevance, he disagrees with Rubel, saying it “definitely changes, but old Google [is] still underneath Google Instant”. When we asked Danny Sullivan, Search Engine Land’s editor-in-chief if Google Instant will kill SEO, he responded in similar fashion. “It won’t,” he retorted. “None of the fundamentals have changed. People are still searching; people are still getting results. SEO remains entirely relevant.” ●

Google aims to redeﬁne search (again) and save users even more keystrokes

Overheard

Elite developers who “get it” make up the smallest percentage of people who build and maintain the Web and its apps Molly E. Holzschlag, open web gal twitter.com/mollydotcom/ status/21054870489

Industry news >> iOS passes Linux

>> What’s in a name?

>> Button it!

>> An open (face)book

Technology pundits might be getting excited about Android blasting iOS in sales terms, but online, iOS is continuing to grow. Net Applications revealed Apple’s mobile operating system passed Linux in August, surging past the one per cent mark, compared to Android’s 0.2 per cent share.

Big companies have been at the crazy juice again. Rupert Murdoch’s gunning for Skype, due to it sounding too much like Sky. Elsewhere, Facebook’s trying to register ‘Face’ as a trademark. The opposition: Aaron Greenspan, FaceCash owner and ex-classmate of Mark Zuckerberg.

Twitter’s introduced a Tweet button, with various options and developer documentation available at twitter.com/ goodies/tweetbutton. This also marks the beginning of the end for TweetMeme, which is shifting its priorities to cloud-based filtering engine Datasift.

Diaspora’s gearing up for launch, aiming to have a consumer-facing alpha up and running in October. The “privacy aware, personally controlled, do-it-all, open source social network” will have its work cut out to encourage migration from Facebook, which now boasts half a billion users.

.net feed

Flash ﬁght

Android Flash player draws criticism, but Apple changes heart on Flash apps

Overheard

The goals and priorities of your users need to be the top priority of your business. If anything else is higher (even proﬁt), you’re wrong.

As summer drew to a close, Adobe’s collective heads must have been spinning like tops. First, Flash Player 10.1 arrived for Android 2.2, resulting in hostile criticism and fierce rebuttals. Ryan Lawler on NewTeeVee (newteevee.com/2010/08/ 31/video-flash-on-android-is-startlingly-bad) and Avram Piltch on Laptop mag (blog.laptopmag.com/mobile-flash-fail-weak-android-player-proves-jobs-right) complained about poor performance, especially with video and games. Arguments raged about the tests that were done and video optimisation for mobile. But the issues seemed to prove Steve Jobs right regarding Flash not being particularly suited to mobile. It also put in context complaints about not being to able to access “all of the web” on iOS devices – it seems even cutting-edge Android hardware can’t cope with all Flash content. Adobe’s response was curious, with John Dowdell asking Avram Piltch if he was “using legit versions of software”, before posting ‘What’s the point?’ (blogs.adobe.com/jd/2010/08/whats-the-point.html) on his own blog. Then, on 9 September, Apple dropped a bombshell, removing restrictions regarding development environments for iOS (apple.com/pr/ library/2010/09/09statement.html), which should open doors for Flash- based apps, although Apple notes in its now-published guidelines that quality is increasingly key to App Store approval. Adobe’s response was forgiving: the company found itself “encouraged to see Apple lifting its restrictions, giving devs freedom to choose their tools for developing apps”. And no wonder: Apple’s statement caused Adobe shares to leap over 10 per cent on NASDAQ. ●

Dan Rubin, designer and programmer twitter.com/danrubin/ status/22782282819

IT ﬁgures

Things you never knew you never knew >> 27billion The number of OpenDNS queries per day. The service, which replaces your ISP’s DNS, saw explosive growth after a glowing David Pogue review in The New York Times.

The brains behind…

The Vobes Show He calls himself “the UK’s most proliﬁc podcaster” and has recorded more than 1,500 shows – most of them from a beach hut. We catch up with Richard Vobes (www.vobes.com) .net: How does a former actor and entertainer decide to broadcast to the world – daily, from a beach hut in Worthing, via the internet? RV: Having had a career in show business and TV, including a Children’s ITV programme called Snug and Cozi written by myself and co-produced by Scottish Television in the mid-nineties, I was keen to find new ways to entertain and reach a wider audience. The web provides direct access to the public from all

Hut property Popular podcaster Richard Vobes is expanding into online video

<prev

.net november 2010

walks of life and the advantage is that one can experiment and try out things very easily. Feedback is extremely fast and essential to gauge how you are doing and ways to improve your content. .net: What do you talk about? RV: I have a variety of subjects that I generally stick to, albeit in a comic, zany fashion. Broadly, these are lifestyle issues for the 30s-50s age group, including news and current affairs, history, food and drink, books and nostalgia. .net: How has the show developed since it first went on air in 2005? RV: It took about six months to find my voice, persona and performance style. I started out very ‘BBC local radio’ ; polite and awfully nice. Now I’ve zipped across more confidently to a place of insanity where the loonies feed from the nutters’ trough. There are many elements of the show that have stayed constant, though. I still go out and about with my microphone on location, podcast

during walks across the British countryside, take audio tours of historic places and record interviews with interesting people, for which I won a Podcast Award in 2005. .net: How many listeners do you get? RV: Numbers are very much contested. Feedburner spews out one figure, the actual downloads another and the re-broadcasting by other outlets is frankly another story altogether. The Vobes Show is taken by another couple of internet radio stations in the UK, a hospital radio network took it for a couple of years, and for all I know still do, and Heart FM in Spain transmits it to an estimated 25,000 listeners. So the true answer is I don’t know! .net: And now a video version of the show is in the pipeline? RV: I’ve toyed in the past with video versions of the show including web casting at Camstreams.com in 2006 and on Justin.tv in 2008. Problems with limited upload speeds meant we couldn’t achieve the quality

>> 8.5million The number of .org domain names, according to The Public Interest Registry’s bi-annual domain name report, The Dashboard. Growth has doubled since last year and is outpacing .com and .net.

>> 8.1million The number of Skype users who pay (each an average of $96 per year), according to Skype’s own IPO registration statement. That represents about six per cent of the service’s overall user base.

>> 50% The number of active users who access Facebook on any given day, according to monitoring.com. With mobile users twice as active as others, this figure is set to grow.

video imagery we sought. However, now my aim is to create a more televisual experience. My video show will be more comedy-based. My cameraman Steve Pegram and I have built a film set in my front room and we’ll be working from a script rather than the less formal approach of the radio show. ● To read the full interview, head to www.netmag.co.uk

Design Build h s i l b Pu

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

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

...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!

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, easy to remember and gives that all important professional look.

For a full range of web hosting packages starting from £1.24pm visit streamline.net Web hosting made easy

© 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 subject to a minimum 12 month contract.

Buy now at:

streamline.net/easy

or call: 0844 692 0124

.net feed way to aggregate content from other sites into a single page. They all have their place. Virb puts the power in the hands of people who have creativity and imagination, but lack the knowhow or patience. They want a complete website that looks great and is easy to update – and they want it quick. This is what sets Virb apart.

Brad Smith www.virb.com

In August, former “MySpace killer” Virb relaunched as a slick website builder and host. Oliver Lindberg talks to co-founder and CEO Brad Smith about the change of direction and future developments .net: Why did you opt to reposition Virb? BS: In late 2009, the team and I took a long, hard look at the strong points of our company – what was holding us back and what made us get out of bed every morning. Owning and operating a social network – fighting against the thousand-pound gorillas of Facebook and MySpace – wasn’t working out. Not for us. Not for our users. We’ve always been great at helping people present their idea, their uniqueness, their product, in beautiful ways. After weeks of internal debate, we realised we could still achieve this by changing Virb’s venue from a social network to a website builder. It may sound like a business plan straight out of 2004, but yeah … Virb is focused on helping people build elegantly simple websites; and we couldn’t be more excited.

Brad Smith Job Co-founder and CEO of Virb Age 33 Education Self-taught Previous career Founder and owner of Neubix, COO of PureVolume Inc Online twitter.com/brad

.net: Who’s the target audience? BS: Virb was engineered with simplicity in mind, allowing anyone — regardless of how much nerd knowledge you do or don’t possess — to create a beautiful website with minimal effort. Bands that don’t have the skill or money to build their own website will certainly find new value in Virb. Photographers, filmmakers, businesses and artists who are tired of sticking a website or portfolio peg into a blog-shaped hole, will find Virb to be intuitive, easy and possibly even fun! We also think the professional webmasters will embrace Virb. They’ll appreciate that they can focus on the good stuff versus slaving over clunky details. .net: What sets Virb apart from other website builders such as Squarespace and WordPress? BS: Will Virb be the perfect solution for building any website? Nope. The power and flexibility you get with Squarespace and WordPress come at the cost of expertise. Tumblr has rekindled the enjoyment of simple blogging unlike no other company in recent years; and Flavors.me offers a

<prev

.net november 2010

.net: Why don’t you offer the service for free any more? Are existing customers alienated? BS: When we looked at cutting back on features such as multiple pages, custom domains and file storage, the product felt fractured. Instead of offering an incomplete service for free, and a fullfeatured one for a higher rate, we landed happily in the middle. Staying true to our goal of simplicity, Virb has no tiers. No à la carte menu of add-ons. One price, all features, $10 a month. Like I said before, Virb wasn’t working as it was. Users knew this and showed us by visiting the site less and less. Most of them are happy to see us relevant again, even if that means closing their account. We’re also taking care of those preexisting customers by offering them an immediate 50 per cent discount. For only $5 a month, we’re giving Virb’s 103,000 musicians and 7,500 portfolios the tools to create and manage a complete website. .net: Why did you choose Weightshift to lead the brand facelift? BS: We originally had no intention of rebranding, but as the new product became more complete, it felt weird keeping the old look and feel. That was about eight weeks before launch and our small team was stretched pretty thin, so we reached out to Naz Hamid (Weightshift’s principal) to lead the project. There are few people my lead designer, Ryan Sims, would trust with that project. Weightshift was a great fit and really helped breathe new life into our brand. .net: What’s the feedback been like so far? BS: More positive and genuine than we expected. Relying only upon our early adopters to create the initial buzz, we saw more than 7,000 new trial accounts created in the first two weeks alone. .net: What’s next for Virb? Mobile, perhaps? BS: Over the coming months, we’ll have: new themes, customisable theme HTML, a storefront for digital and physical goods, a file manager and the ability to build pages with content from sites such as Flickr and Vimeo. We’re even working with our parent company, (mt) Media Temple, to offer domain names directly to our customers. l Check out our review of Virb.com on page 26

“Virb is focused on helping people build elegantly simple websites. We couldn’t be more excited”

Brad Smith

Betameter

Podcasts

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

1 of 2

This podcast is a spin-off of the JavaScript conference, with interviews from the most important people at JSConf. jsconflive.com

2 of 2

JSConf Live

Same For You A brand-new podcast from @paddydonnelly and @takete, full of pun-based features – all with hilarious consequences. sameforyou.com

URL clipconverter.cc

Deconstructing dConstruct

Brighton-based conference inspires audience with “design thinking and creativity”

Overheard

The only client that I ever ﬁred, now sends out a newsletter using Comic Sans. Glad I got that out of my system. Veerle Pieters, graphic and web designer twitter.com/vpieters/ status/23985394609

Web design has become increasingly analytical, and so it was refreshing to see 2010’s dConstruct (2010.dconstruct.org) concentrating on “design thinking and creativity”, with the overriding themes of play, inspiration, inventiveness and creating beautiful things that offer engaging, focused information. “dConstruct isn’t a typical web design conference where you learn new tricks or techniques. Instead, we aim to inspire and challenge conventional thinking,” says Andy Budd, director of Clearleft, the agency behind the event. “This year, we wanted to get people to think outside their immediate surroundings and view design in a broader context. By exploring what creativity means in other fields, we hoped to draw parallels with the web design industry and help people take their work to the next level.” The day began with Marty Neumeier quoting Steve Jobs, who responded, “we intend to keep innovating” when asked how Apple’s continued success could be ensured. “If you want to innovate, you gotta design,” argued Neumeier, who maintained that competition comes from clutter rather than other businesses. Other highlights included Hannah Donovan’s discussion on improvisation within music providing new thought patterns; Tom Coates’ reference to web industry talent as the “road builders for coming generations”; and David McCandless (pictured) recommending visualising data as a means to focus and avoid information overload – “combining visuals and overlaying meaning creates something beautiful and powerful,” he said. Productivity guru Merlin Mann closed the event by branding everyone present in the hall “nerds”, because they were “people who care”, and reminded attendees that the real opportunities within the industry are “not in chasing commodities, but in doing what you can innately do”.

ClipConverter is a free online media conversion application, that allows you to convert nearly any audio or video URL to common formats so you can play it on your mobile, iPod, PSP and so on. The process involves nothing more than pasting the relevant URL and specifying the output format. Supported services include YouTube, Google Video, Sevenload, MySpace and Vimeo. Chances of survival: 82%

URL placepad.com Described as a ‘sketchpad for places’, Placepad enables you to create an interactive floor plan with photos and notes in a very short amount of time. You can then share your plan on the web. You don’t need to be an architect or even good at drawing: it’s all very simple and user-friendly. Chances of survival: 67%

.net feed

Threaded:

It’s oil gone wrong BP’s public relations blunders were swiftly scorned by web wags, says Oliver Lindberg

Earlier this year, BP screwed bp/rebranded/index.html), improv up spectacularly when they troupe UCBComedy.com attracted failed to plug a massive more than 10million views for its “BP PR hole on the internet. The oil Spills Coffee” spoof (www.youtube. had been pouring into the Gulf of com/watch?v=2AAa0gd7ClM) and Mexico for almost a month when creative agency Jess3 developed @BPGlobalPR started issuing fake a browser plug-in that replaces but very funny statements (bit.ly/ all mentions of BP with dvRuSx) that spread across the blacked-out letters web like wildfire and were and dripping oil remixed into billboards drops (oil.jess3. (bit.ly/9Kok7j). com). TerrorBull > A new BP logo Games, on For all the links was crowdsourced by meanwhile, this page, visit: Greenpeace (www. created print/ ag m et /n m delicious.co greenpeace.org.uk/files/ and-play game threaded208 Operation BP: Bullshit Plug (www. terrorbullgames.co.uk /blog/index.php?id=215). Not surprisingly, when BP released some poorly Photoshopped images to illustrate their clean-up operations, it inspired publications such as Wired and The Huffington Post to run Photoshop contests of their own Spoof of concept @BPGlobalPR (www.wired.com/wiredscience/2010/ parodied BP’s poor efforts at public relations

Tag: threaded208

07/show-bp-how-to-use-photoshop/; huff.to/a1iCcH). And if the penny still hadn’t dropped, BP CEO Tony Hayward must have known things were going downhill fast when a Kickstarter project managed to find 100 volunteers with vuvuzelas to play in front of BP’s International Headquarters in London and raise almost $9,000 for the Gulf Disaster Fund (www.kickstarter.com/projects/ quirk/vuvuzelas-for-bp). The moral here? If you mess up, have a cracking PR team in place to deal with the social media fallout.

The web 10 years ago: November 2000 What we covered Net Nirvana Become an expert in the ways of the online world with our guide to reaching internet enlightenment The running man Three men and a webcam take on the South American jungle Swap shop File-sharing programs that get you free movies, music, pictures and more Behind closed doors Why sex, drugs and gambling are the success stories of the net Engineering success Quick and easy ways to get your site noticed by search engines

<prev

crowdsourcing for a macabre new BP logo

.net november 2010

Also in the news Netscape 6 After two years of open source development, Netscape releases a bloated Mozilla-based browser Presidential election America votes and doesn’t ﬁnd out George Bush has beaten Al Gore for more than a month Millennium raid A criminal gang tries to steal the Millennium Star from the Dome but gets caught in the act Chart toppers My Love by Westlife, Can’t Fight The Moonlight by LeAnn Rimes and Independent Women Pt 1 by Destiny’s Child

Created exclusively for .net

.ten

Slick execution Greenpeace turned to

.net feed

Readers’ @przemek: What were your motives for creating HTML5 Boilerplate (see page 67)? And don’t you think it’s bloated? PI: HTML5 Boilerplate was created the same way most of you have got used to using a similar starting point of HTML, CSS and JavaScript for each project. It reached a point where it was right to share. We take a hard look at everything we decide to include into it by default, but if you have a good reason, it is quite delete-key friendly. I do recommend people use the whole thing, but if not, it’s still worth a look through.

Paul Irish paulirish.com

HTML5 and CSS3 aficionado, a member of the Chrome and jQuery teams, and host of the yayQuery podcast, Paul is a front-end developer with many hats. Here he answers your questions @JustJenFelice: When will support for HTML5 and CSS3 reach a level that justifies development relying on them? PI: Now. For many things, at least. CSS3 is very implementable in a progressive enhancement way, using something like Modernizr to determine if you need to serve images as a fallback. CSS3Please. com will help you with the cross-browser syntax and an idea of what browsers it’ll work in. Parts of HTML5 are reliable for use cross-browser today: the doctype, the new charset, the semantic sectioning elements, audio and video, data-* attrs, drag ’n drop and contentEditable. Canvas, geolocation, web sockets and input autofocus/placeholder take a little more work, but can be done.

Paul Irish Job Developer advocate for Google Chrome, jQuery team member, founder and curator of Aurgasm Age 28 Education BS Technical, Scientific and Professional Communication from Worcester Polytechnic Institute Previous career Senior consultant at Isobar, ecommerce manager for eInvite.com Online paulirish.com and @paul_irish

<prev

.net november 2010

@randypeterman: What are five financial reasons (benefits) for companies to switch to HTML5 now? PI: It’s not a matter of ‘switching’ so much as choosing which features from HTML5 you’d like to use. In general though: 1) less bandwidth used; 2) easier development; 3) a more responsive UX (for repeat business and higher conversion); 4) lower costs in authoring software; 5) less cash spent on training (unified web platform means not spreading training budget thin on Silverlight, Flex, etc). @nekonette: Re: CSS3 modules and validation: should there be a compromise between functionality and valid code? PI: I deduce you’re talking about the vendorprefixed properties like -moz-box-shadow causing an error in validation? I, and many others, have open W3C bug tracker tickets and unanswered mailing list discussions requesting a different treatment of vendor-prefixed properties. So please ignore any of those ‘errors’ from the validator; they’re quite daft. Aside from that, I agree with Nicholas Zakas’ blog post on validation: nczonline. net/blog/2010/08/17/the-value-of-html-validation.

@zachleat: If you had to implement The Wilderness Downtown [an interactive film for Arcade Fire’s single built in HTML5: thewildernessdowntown.com] using progressive enhancement, how would you do it? PI: The Wilderness Downtown makes heavy use of canvas, HTML5 video and audio. Hypothetically, Flash could be used in place of the drawing tool and used to supplant video and audio functionality. Perhaps through the Silverlight bridge of excanvas we could eke out some decent performance of the flocking birds. Would IE6-8 manage pop-up windows with the sort of responsiveness this experience deserves? Not sure, but it’s worth a test. If not, perhaps it all has to happen within a single window. @JohnSandall: When will canvas be ready to be used in multi-touch devices? PI: Today! I’ve made a demo for you all: paulirish.com/demo/multi. View the source to see how to effectively do it. @norbiu: What’s next for Chrome? How are you planning to make it more awesome than it already is? PI: GPU acceleration for the 2D canvas and 3D transforms is huge and means rich and smooth graphics. WebGL is a game-changer, bringing full 3D experiences to the web using the successful OpenGL stack. I’m also excited about the Chrome Web Store, which enables developers like you guys to get your apps in front of a huge audience. @GarryAylott: You’ve been a key figure in jQuery, where do you see your next challenge? PI: I’m eager to help aid an environment of peer education, where we can advance our craft (and the web) by helping others benefit from our experience. We could also use more shared resources where our collective knowledge and code is aggregated. l Follow us on Twitter at twitter.com/netmag

“It’s not a matter of ‘switching’ to HTML5 so much as choosing which features you’d like to use” Paul Irish

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 gearr this month Tempting tech and geeky gadgets

2 1

Modu

Philips Fidelio DS9000

Pure Evoke 1-S

HD Pro Webcam C910

PRICE £99.99

PRICE £399

PRICE £119.99

PRICE £89.99

www.purelygadgets.co.uk

www.philips.co.uk

pure.com

www.logitech.com

Tired of people showing off what their smartphone can do? Step forward the miniscule Modu, the world’s lightest mobile phone. There are just seven buttons, a 1.3in screen, 2GB of internal memory, Bluetooth and a built-in MP3 player. For more functionality and to add personality, you can get various jackets (£30-£50).

With a beautifully crafted veneer, and weighing a hefty 6.5kg, the DS9000 is no ordinary iPod/iPhone speaker. Its looks are matched by crystal-clear audio quality, with a rich warm bass. We couldn’t work out how to play music via the iPhone without downloading the free Philips app, but once we did that, everything was hunky dory.

Digital radio specialists Pure again team up with iconic guitar amp brand Marshall. The follow-up to 2006’s 1XT has an improved OLED display, a compartment for Pure’s rechargeable battery pack and 30 station presets. Considering its size, the sound is far from shabby, but you also have the option to hook up another Marshall speaker.

Logitech’s flagship HD webcam has an excellent autofocusing Carl Zeiss lens that not only produces crisp videos but also snaps 10 megapixel pics. Both can be uploaded to Facebook and YouTube and two mics ensure superior sound quality. There’s a little snag, though: it can only record in full 1080p HD; calls are ‘just’ in 720p.

Verdict It’s fiddly (surprise, surprise) and by no means cheap. Next up: the Modu T, the world’s lightest touchscreen phone.

Verdict It’s minimal: you get a volume control, a 3.5mm aux input, a remote and that’s it. But what it does, it does very well.

Verdict We love the look but the volume control goes round and round and actually past 11 – surely that’s a sacrilege?

Verdict An outstanding webcam. And although it was designed for Logitech’s new Vid HD service, it works just as well in Skype.

<prev

.net november 2010

Buffalo Dualie

MoviePeg for iPad

Samsung Galaxy S

Radiopaq dots

PRICE £169.95

PRICE £12.99

PRICE From free

PRICE £14.99

store.apple.com/uk

movie-peg.com

galaxys.samsungmobile.com

www.radiopaqproducts.com

We’ve never been that impressed by the need for docks, but some people love them. This one combines an iPhone/iPod dock with one for a portable hard disk (which stores 500GB, and comes with the product). It all works very well, and boasts USB and Firewire 800 connectivity (providing superfast transfer speeds).

Many of you will be familiar with the MoviePeg: a handy and stylish stand for your iPhone. Well, it went away, bulked up on protein drinks, cloned itself, and is back to provide your iPad with the same great support! (Due to the iPad’s size you now get two pieces, which are held snugly together by a set of embedded magnets.)

The Galaxy S is very light (118g), yet while logically this should be a plus, it weirdly makes this premium smartphone feel a bit cheap and flimsy on first use. But don’t be put off: the large, responsive touchscreen is a joy, there’s lots of pre-loaded Android apps and browsing is speedy (although there’s no support for Flash).

Even high-end MP3 players usually come with crappy headphones, and it’s always worth investing a bit more to get better sound quality. But you don’t have to spend a fortune. While these in-ear phones look a bit gaudy (they come in green, pink, blue, white, black or red), they do provide a good clean burst of quality sound.

Verdict If you’re happy to pay over £150 for a bit of extra convenience – and a new portable hard disk – then fill your boots with the Dualie.

Verdict Lacks the in-yer-pocket appeal of the iPhone version, and doesn’t work so well on gloss surfaces, but it’s still a fave.

Verdict Samsung has wisely concentrated on the hardware and left the OS to Android 2.1. A worthy rival to the iPhone 4.

Verdict As long as you don’t mind sticking bits of plastic into your ear canal, these cheap and cheerful phones aren’t half bad.

.net november 2010 25

.net feed/reviews

Latest software New web design tools reviewed

“What makes Virb succeed where others fail is its simplicity”

Design

Virb.com

Online site design that works Web www.virb.com Price $10/month System Web app

Web hosting often comes with some kind of web building package attached, usually providing a difficult means of creating ugly web pages. Virb does things the other way round: it’s an online design tool with hosting attached. It’s a much better approach. This is aimed squarely at those who have ‘just enough’ knowledge of web design, or who have something to say or show. Some target users may even fall into both camps. What makes Virb work where others fail is its simplicity: it works best when you don’t attempt to separate style from content. Its key strengths lie in the page creation block; it’s hard to pinpoint which underlying settings are responsible, but it’s easy to make nice-looking pages. It’s not flawless, though. CSS seems hard to get right and there are a mass of core features waiting to be added. Somehow, though, this doesn’t seem to matter too much.

Better approach Virb enables you to quickly and easily generate elegant sites – with hosting attached

.net rating For Straightforward interface Elegant page themes and templates

Against Coding can prove difficult Limited customisability

Verdict Still in its infancy, Virb already shows promise. It’s relatively easy to use – as long as you don’t want to do anything too fancy.

CSS

Stylizer

There is a right way to code CSS, and Stylizer is probably it Web www.skybound.ca Price £50.48 System Mac/PC

There’s no denying that working with CSS demands patience, and lots of it. Certain operations require so much backand-forth that they can be exhausting. Stylizer makes light work of just about all your layout worries. It’s intuitive, provides lively feedback and it just works. This is not one of these systems that professes to do everything for you and then sets about mangling your code, safe in the knowledge you won’t ever look at it. Instead, it provides an environment in which it makes sense to create and edit style sheets. Many visual CSS editors or WYSIWYG web editors make a real mess of your code. Carefully separated styling and structure are replaced with a nasty rash of inline style statements that make little sense if you later edit them manually. Stylizer doesn’t do that – nor does it demand you jump through hoops to keep things separate.

<prev

.net november 2010

All you need to do is browse to your site from within the application and your style sheets are automatically loaded as the separate entities that they usually comprise. You can perform edits by selecting elements either by name in the breakdown panel or by hitting the space bar and choosing visually from the preview window. If you’re working with a remote file, Stylizer will upload your changes, but it’s no problem if you’re working locally or if you just want to copy your changes to the clip board. Having visual feedback on your CSS changes as you apply them is a time-saver across the board. It’s simple, but there you have it: removing a refresh from the cycle really does make a difference. Once you’ve homed in on an area that needs editing, you can either enter your styles by hand – just as you would in any text editor – or use the tools that pop into existence above your rule to pull and push margins and padding and so on. Text handling and colour editing are done similarly. If you’re entering your own rules, it’s worth noting that Stylizer enforces valid syntax, too. Even browser-specific code can easily be created with just a couple of clicks.

Easy pickings Stylizer allows you to visually select elements for editing

.net rating For Real-time feedback Intuitive editing tools Validation

Against UI not too handsome

Verdict It’s hard to find fault with Stylizer: it’s usable, efficient and effective. While enforcing valid CSS, it remains flexible for coding.

.net feed/reviews Coding

Komodo Edit 6 Beta A code editor with standards Web www.activestate.com Price Free System Mac/PC/Linux Komodo Edit gets a good spring clean with this update. Adding support for up-to-date standards in the shape of HTML5, CSS3 and Python 3 – along with a few handy utilities – makes this IDE-lite a reasonable choice for code-hungry developers on a budget. Komodo Edit is the free, slimmed-down edition of Komodo IDE. What’s missing? Well, where the full edition sports some nifty debug functions, Edit makes do with syntax highlights and preview. It also has no publishing capability, or database viewing module. You get the picture. Though it lacks the more advanced IDE features, Edit is actually a nice app to work with. It has an understatedness that’s appealing in itself but that also makes dealing with the numerous panes and windows required by something like a big PHP/ JavaScript project bearable. Not that Komodo Edit is too good at dealing with JavaScript. There’s no debugger in the basic

version – that having been held back for the IDE – but there is still syntax colouring. There are some time-saving features worth mentioning. In the toolbox, Komodo stores macros, code snippets and shortcuts. There’s a selection provided with the install, but these can usefully be added to. The new workspace save and restore is also impressive. Komodo saves incrementally in the background, so if there’s some kind of catastrophic power failure, next time you start the system up you’ll be asked whether you’d like to begin where you left off. Where Komodo comes into its own is as an excellent community tool. There’s inbuilt support for languages such as MEL – the scripting language used by Maya – and also for XUL, the markup favoured by Mozilla for its UIs. Support for the latest web standards is simply a natural extension of this. Speaking of which, there are a number of extremely useful extensions available from the developer’s community portal. Some of these, such as the DOM viewer, are currently not available for trial with the beta version, but their support in earlier releases suggests they’ll make a return.

Understated functionality The Komodo interface keeps things nice and simple

.net rating For

Against

Crash restore Broad language support

Poor JavaScript support

Verdict Komodo Edit is something of an acquired taste, but you might warm to it. The upgrade to IDE is much less tempting than keeping the free version on your machine.

Interface design

Web development

Version control

Webalys’ UI design framework

Pendule Chrome Extension

DeployHQ

Web bit.ly/9bAlIU Price Free System Adobe Illustrator

Web bit.ly/a9IudG Price Free System Chrome browser extension

Web www.deployhq.com Price £6-48/month System Web app

The guiding philosophy behind agile software development is that common problems have common solutions. This framework offers a broad selection of common web design assets so that you can focus on the logic of their use. Even if you don’t decide to use this range of icons, graphic styles and UI elements in a live environment, they’re great for rapid prototyping, and save you considerable time at a project’s thinking stage. There’s something worthwhile in perusing a fairly complete set of UI building blocks.

Firefox may be the current browser of choice for developers, but Chrome is rapidly catching up and Pendule is a good example of why. A quick installation places the Pendule cog in Chrome’s menu bar. From there, with a couple of clicks, you have access to such features as CSS breakdowns, topographic views, a ruler, colour picker, link checker … the list goes on. It’s not rocket science but it does make a massive difference having such useful day-to-day tools available so easily.

Whether you use a ready-built solution such as Subversion or rely upon your own systems, version control is an important part of any development process. Deploy takes this concept one stage further and draws a direct line from your versioning repository to your live server. Ensuring only approved updates are rolled out from a central point means you can take much closer control of your project deployment without getting bogged down with logistics – which is particularly useful if you have several contributors.

Verdict A very straightforward set of Illustrator files that can be used to speed up your UI development loop. What can be bad about that?

Verdict Economical and highly usable. If not a Swiss Army knife of web design, Pendule is at least the Waiter’s Friend.

Verdict Works with Github and Subversion. Having a well-monitored SSH roll-out with careful JSON reporting is well worth the effort.

.net november 2010 27

JOIN THE 1&1 MOBILE REVOLUTION AND TA

WEBSITES

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

SOFTWARE INCLUDED!

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.

* Special offers available 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.

KE YOUR WEBSITE TO THE MOBILE MASSES

GOMOBILE 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!

HURRY – OFFERS END 31/10/2010!

1&1 HOME PACKAGE

1&1 BUSINESS PACKAGE

1&1 PROFESSIONAL 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

£ .99

.49

£ .99

per month

per month for the first 6 months*

per month

.99

per month for the first 6 months*

24.99 £ .99

per month

per month for the first 6 months*

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

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

Call

0871 641 21 21** or visit us now

www.1and1.co.uk

.net feed reviews

Media this month

Extracts from both books and the DVD on your free CD – see page 128!

The latest hot new releases

“This is a great introduction to the subject of HTML5” <prev

.net november 2010

(1-2) HTML5 Now Price £38.77 Publisher New Riders Format DVD In this two-and-a-half hour training video, standards guru Tantek Çelik explains how you can get started using HTML5. You’ll learn how to make HTML5 compatible with existing browsers and progressively take advantage of new support in modern browsers and devices. Plus there’s a 50-page booklet (also provided in PDF form) to refer to as you follow along.

(3-5) A Practical Guide to Designing with Data Price £12 (PDF), £29 (book), £35 (PDF + book) Publisher Five Simple Steps Format PDF or paperback If you’ve ever been asked to create a chart or graph, this book will help you take your visualisations to the next level. Penned by Brian Suda, who writes for us this month on page 58, this is an insightful and inspiring guide to designing charts that focus on the data, avoiding unnecessary distractions and avoiding misrepresentation.

(6-8) Expert PHP 5 Tools Price £30.99 (ebook £21.99) Publisher Packt Format Paperback/ebook Aimed squarely at professional developers looking to raise their game, this book sees Dirk Merkel introduce a range of PHP tools that can help improve both the quality of your code and your processes. Areas covered include unit testing, application deployment, continuous integration, proper documentation and version control.

Verdict Two and a half hours isn’t enough to be fully comprehensive, but this is a great introduction to the subject.

Verdict With over 200 illustrations, this is an engaging walkthrough of the art of data representation.

Verdict An in-depth look at best-of-breed enterprise-level tools. If you’re working with PHP, you’ll want to read this.

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 feed

Hot mobile apps

Little bundles of portable perfection

The Accidental News Explorer PRICE £1.19 OS iPhone OS www.accidentalnewsexplorer.com Brendan Dawes has an interesting view of the world, so it’s no surprise that he’s created an app whose basic premise – that of a news search – hides a host of engaging surprises, most notably the ‘Related topics’ tab, which leads to all manner of connected curios.

Best of the rest… More choice apps

Verdict Search news, add stories to Instapaper, and enjoy great design and typography along the way.

NAME Annamika This is a stunning collaboration between artist Catherine Hubert and developer Scott Collard, which turns your iPad into a kaleidoscope. Add more detail, choose from multiple patterns, or even use your own pics. Gorgeous. Verdict For just £2.99 you can transform your iPad into an interactive masterpiece.

“The app’s basic premise hides a host of engaging surprises” Rightmove

Ustream Live Broadcaster

PRICE FREE OS iPhone OS

PRICE FREE OS iPhone OS, Android, Symbian

iTunes App Store

www.ustream.tv/mobile

Also available for the iPad, this mobile app from Rightmove is the best we’ve seen when it comes to buying and renting property. Add your location manually (or use the auto feature), save properties, get full descriptions, and view them on a map.

This app enables you to stream video and audio direct from your phone, to a live stream, and notify people automatically when you do so (via Twitter). You can also send recorded video directly to YouTube or Facebook.

Verdict If you’re looking to rent or buy a property in the UK, this app should be your first download.

Verdict You’ll see gripes about this app, but it does the job well, and it’s also free! Some people, eh?

NAME Twitter for iPad If you haven’t heard about Twitter for iPad yet, then where have you been? The app has some good inclusions, but – in our opinion – maybe a few too many. Sliding windows can result in the interface feeling pretty cramped. Verdict This is a free app, so you should definitely try it out. And why not tell us what you think?

NAME Conquist Do you like the strategy-based board game Risk? Do you have an iPad? Well you should check out Conquist! Great design, online play, and the option to play offline as well, make this a great addition to your iPad’s game repository. Verdict As iPad games go, and at £1.19, this is definitely up there with the best that we’ve seen!

<prev

.net november 2010

d un 0 th ÂŁa1mon

WYSIWYG

Thereâ&#x20AC;&#x2122;s no enigma surrounding this coding machine Quickly transform your PSD files into live websites

Bring your designs to life - with SiteFusion from 123-reg Try SiteFusion FREE for 14 days at www.123-reg.co.uk/sitefusion

.net feed

Upcoming events oct-nov

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

11-13 12

Wednesday

Thursday

Friday

14-16

Saturday

Sunday

14-16 17-19

Jump London econsultancy.com/ events/jump There are five tracks – Lead, Analyse, Optimise, Socialise and Engage – full of insight from top marketers.

Paris Web 2010 Paris www.paris-web.fr France’s web conference features mostly homegrown talent, but Dave Shea and Nicole Sullivan join the fun, too.

BlogWorld Expo Las Vegas, NV www.blogworld expo.com/ The largest social media conference in the world boasts over 200 speakers and 150 educational sessions.

21-22

23-27

25-29 26-29 27

28-29

30-31

1-2

6-7

WebTech Conference Mainz, Germany webtechcon.de This conference covers web development, web standards, security, APIs and mashups, ecommerce and much more.

CSS3 Online Conference Online thinkvitamin.com/ online-conferences Four sessions, which include Meagan Fisher on bringing designs to life with CSS3.

18-20

Web Design World Las Vegas, NV webdesignworld.com The mantra: provide practical, no-fluff howto. The speakers: Luke Wroblewski, Dan Rubin, Greg Rewis, Jina Bolton and more.

Usability Week Edinburgh www.nngroup.com/ events/edinburgh/ agenda.html The UK leg of usability week covers working with information and, of course, usability.

Event of the month

UX Intensive Toronto adaptivepath.com/ events/2010/uxi/ A four-day workshop series looking into design strategy, research and interaction design.

edUI 2010 Charlottesville, VA eduiconf.org A learning opportunity for web professionals serving institutions of learning. Features Paul Boag and Alistair MacDonald.

<prev

Web Developers Conference Bristol webdevconf.com Among other things, Anna Debenham will talk about how she set up as a freelancer after leaving school.

3-5

nov

An Event Apart San Diego, CA www.aneventapart. com/2010/sandiego/ 12 speakers sharing their passion for design and usability in standard-based web design.

8-9

#140conf Detroit, MI detroit.140conf.com Jeff Pulver’s 140character conference rolls into Detroit to explore the effects of Twitter on a wide range of topics.

Mozilla Drumbeat Festival Barcelona www.drumbeat.org/ festival/ Three days of making, teaching, inventing, hacking and shaping web education’s future.

9 issue 209 on sale!

.net november 2010

Brooklyn Beta Brooklyn, NY brooklynbeta.org One day of fun-filled workshops and one of inspirational talks by Fred Wilson, Cameron Moll, Shelley Bernstein and more.

DroidCon London www.droidcon.co.uk A barcamp and conference focusing on developing for Android devices, covering development, business and design.

Hull Digital Live 10 Hull www.hd-live.co.uk Hull’s very own digital and technology conference. This year with Brendan Dawes, Anand Verma, Matt Brown and more.

Pivot 2010 New York, NY www.pivotcon.com A conference for marketers who want to learn what motivates young consumers to make brand choices.

Adobe Max Los Angeles, CA max.adobe.com This year’s focus: the explosion of content across multiple devices, integrated developer workflows and ways to monetise content.

Bathcamp (the barcamp) 2010 Bath bit.ly/bathbarcamp For just £10 you get short presentations, demos and workshops, plus free stuff, food and a couple of beers.

R3play Blackpool www.r3play.info The arcade, retro and video gaming expo celebrates four decades of gaming history, guest hosted by Gail Porter.

Early bird Hurry! Book now to avoid disappointment

11-12 november

15-17 november

8-9 december

20 january

Social Gaming Summit and Virtual Goods Summit London www.mediabistro.com/ socialgamingsummit/2010/11 Focused on emerging market opportunities for virtual goods.

Web 2.0 Summit San Francisco, CA www.web2summit.com/ web2010 The only place where internet economy leaders gather to debate business strategy.

Le Web Paris www.leweb.net With 2,400 participants from 50 countries, Le Web has turned into Europe’s number one internet event.

New Adventures in Web Design Nottingham newadventuresconf.com This brand-new conference features a punchy, fast-paced schedule of 30-minute talks.

Gary Marshall’s big mouth

What are words worth?

If you can’t afford content, maybe the content business isn’t for you When I still had hair, I played in a band. One of the things we ran up against again and again was ‘pay to play’, a pernicious racket that exploited people who liked making a racket. With pay to play, concert venues would offer new bands a gig on the basis of selling X amount of tickets. If you didn’t sell X, you were expected to pay the shortfall out of your own pocket. More often than not, bands didn’t sell X. They paid up again and again because the gigs offered ‘exposure’. As a vocal critic of pay to play, I spent many years arguing with promoters that they were exploiting bands and that their promises of exposure were nonsense. Pay to play venues weren’t real venues with real audiences; they were venues where bands got ripped off for the privilege of playing to their mates. Only a masochist went to a pay to play venue if they weren’t a friend or relative of one of the bands, and no wonder: most of them were

terrible and the venues weren’t much better. If it weren’t for bands paying up, the venues would have lost money every single night of the week. They were businesses run by people who shouldn’t have been running businesses. ‘Contribute to my website’ is the new pay to play.

Free thinking

The following examples have all been taken from GorkanaPR – a media jobs site – over the past three weeks. They’re all advertised as jobs or internships, but the remuneration is zero. In exchange for lots of writing, a restaurant review site offers a “fantastic opportunity”; an online men’s magazine offers a “fantastic and unique opportunity”; an adventure travel site offers “an ideal chance to … showcase your talent”. A slimming site promises “contacts and a bit of exposure”. Two shoe retailers don’t appear to be offering anything at all. These are not training positions, where you’re swapping your labour

“Writing for a pale imitation of a mainstream magazine will not advance your career”

for skills you’ll be able to use in the future. These are not charity efforts where you forfeit your fee to help the greater good. And these are not profile builders, where you offer your expertise in order to put your name – or more likely, your firm’s name – in front of movers and shakers. These are positions where you’re expected to contribute in exchange for absolutely nothing: publication on obscure web pages in lieu of wages. You’d be better off opening for Satan Deathface on a wet Tuesday night: at least then you’d get a couple of beers.

Exposure?

In the age of social media and user-generated content, suggesting that your name on someone else’s website is “exposure” is like suggesting membership of the HTML Writer’s Guild will boost your chances of getting a well-paid agency job. Writing for a pale imitation of a mainstream magazine where nobody appears to understand how to design, edit or write will not advance your career. The result of your effort will have no more weight than an Amazon review, a Flickr comment or a Facebook update. It’s not exposure. It’s exploitation. l Gary Marshall has been writing for .net since the stone age. www.bigmouthstrikesagain.com

.net interview

“We aim to make better government policy by enabling crowdsourcing through social networks” Anil Dash, Expert Labs dashes.com

Photography/Daniel Byrne

Pioneering technologist and blogger Anil Dash explains to Oliver Lindberg how he’s helping the US government and how a combination of real-time apps and huge open data sets are leading a new wave of innovation on the web Anil Dash began blogging in 1999 and as the first employee of Six Apart, creators of Movable Type and TypePad, slept on the couch of the founders’ spare room. He’s since become one of the most influential bloggers and tech evangelists. Now, in his new role as director of non-profit incubator Expert Labs (expertlabs. org), Dash is helping the US government. “Our mission is to make better government policy by enabling crowdsourcing through social networks,” Dash explains. “The way to do that is by creating new technologies that let people in the White House and other parts of the US federal government ask questions on Twitter, Facebook and YouTube and get back responses from the public to help them form their decisions about policies.” While at Six Apart, Dash made connections with the White House and wanted to help. He realised, however, that he wasn’t government material. He has a preference for slightly inappropriate T-shirts: he famously posed in a Goatse [please don’t Google this – Ed] shirt for The New York Times in 2005 and likes to say silly things on Twitter and his blog. As a government official, Dash would have had to shut down his social networking accounts (and he’s on most of them as “anildash”). But then, after Dash wrote a blog post calling the federal government

.net november 2010

“the most interesting new tech start-up of 2009” (dashes.com/anil/2009/08/the-most-interestingnew-tech-startup-of-2009.html), he started getting messages from White House officials, who eventually convinced him to lead Expert Labs as an independent organisation. It’s funded by a $500,000 grant from the MacArthur Foundation and is part of the American Association for the Advancement of Science, publishers of Science. Expert Labs’ first customer was the White House itself. Supporting the Grand Challenges initiative, Expert Labs asked the public about the next science and technology challenges facing America. Dash hired Lifehacker founder Gina Trapani as project director and selected her crowdsourcing Twitter app ThinkUp (first known as Twitalytic, then ThinkTank) as Expert Labs’ first official technology platform (expertlabs.org/thinkup.html). It helped thousands of people submit ideas through Facebook and Twitter (2,000 in the first 48 hours alone). “ThinkUp works in a simple way,” Dash says. “Gina has around 80,000 followers on Twitter and her questions can get hundreds of responses. She didn’t have a good way to view, publish and share all these responses, so she made a tool to do that, and made it open source. Today ThinkUp can scale this function for somebody at the White House

with millions of followers. For example, I asked my followers what kind of phone to get, and I had hundreds of responses saying ‘iPhone’ or ‘Android phone’ but one person said ‘here’s a list of the most popular handsets in America ranked by the amount of radiation that they outpour’ – now that’s an answer that really informed my decision. And it can easily be determined to be fairly unique. That’s exactly what we were trying to build. How do you highlight unique, interesting, unexpected and truly innovative answers out of a large set of responses? We also want to indicate the popular answers, build visualisations and filtering tools, hook it into other networks like YouTube and create an attractive user interface for managing that data.”

Power to the people

ThinkUp attracted an enthusiastic community of developers and this year became one of the youngest open source apps ever to be chosen for Google’s Summer of Code. Dash wants to show that government can be under the people’s control and adds: “On a more practical level, for policy feedback in the US, you had to fax your ideas, maybe email them, and go to a government website that you’ve never heard of that has an ugly design. If we asked a question in your Facebook news feed, alongside your friend’s video, that’s much closer to where I live. If I see that question pop up on Twitter, I’m much more likely to respond than if I had to remember to go and do my civic duty. We want to make it as easy as saying ‘I like this YouTube video’.” Having the White House as its first customer gives Expert Labs a lot of credibility. Dash expects other agencies to follow soon.

.net interview

“Nobody could ever say blogging is too disruptive when it’s on the website of the White House itself” .net november 2010

next>

.net interview

“The US government launched its own URL shortener two months before Facebook and Google did” “Our Federal Communications Commission is looking into using this tool for helping inform broadband policy. They’re putting a billion dollars into providing universal broadband coverage in America, and we’re going to be able to make a fantastically better policy if everybody who cares about it can be involved in the discussion, using social networks they’re already participating in. There’s a lot of potential and I think we’ll not only get a lot of adoption within the government but, because it’s open source and anybody can use it, I can see private industry using it too. There’s no reason airline JetBlue can’t ask, ‘Do you want better pillows and are you willing to pay extra for that on our plane?’ and not get really good responses.” Traditionally, government agencies have been slow on the uptake of new technology but, says Dash, a lot has changed. “They’ve been moving at startup speed and faster,” he enthuses. “In fact, the environment of technology around government has changed so much that they’re actually able to lead even Silicon Valley and the inventors, innovators and startups. The federal government, for example, launched its own URL shortener at go.usa.gov two months before Facebook and Google did. That’s an extraordinary change.” It was a special moment when, at the inauguration of the new administration last year, the new White House site launched with a blog. “I realised that after 10 years of advocating and

<prev

.net november 2010

fighting for this medium, it had reached the point where all of a sudden it was safe to have a blog,” Dash says. “Nobody could ever say this medium is too disruptive when it’s on the website of the White House itself! We’ve changed the culture.”

Starting point

According to Dash, ThinkUp might just be the first of a new wave of real-time applications that will bring more powerful, customisable tools to the web. “We’re at the starting point of the real-time web,” he says. “People think there’s one service that defines it: Twitter, Facebook or whichever one you want to pick. Now, it always starts with one centralised service. In 1999/2000, all of the blogosphere was on Blogger. One centralised service dominated the new medium, but the nature of all computing is to go back and forth between centralised and decentralised. There was an inflection point, when really customisable, powerful and professional tools started to come into place and there was this explosion of creativity that led to the Huffington Post, to Daring Fireball and Boing Boing. So, I’m super-excited that our very first project is a decentralised real-time platform that could spurn the next wave of innovation. Look at what Movable Type, WordPress and Drupal did for blogging – this is about to happen for tweeting.” Dash is also enthusiastic about the amount of open data that is becoming available from

both commercial services and governments. “The Department of Health and Human Services put out a data set of healthcare outcomes by cost, by procedure, by effectiveness, so we will be able to see how much a diagnostic imaging test costs in one neighbourhood vs another. People built a billion dollar business out of the weather channel – now imagine a health channel. Imagine all the applications you can build.” Dash says the change will be radical. “I’ll be able to move to a neighbourhood where my kids’ illness will be best treated. Imagine that built into Google Maps and Bing Maps. And that’s just one data set from one agency at one level of the government. We’re going to have that happen across a thousand agencies at all levels of government with new, realtime data sets every day. The amount of innovation that will be built around that is unbelievable. It’s as exciting as the birth of Web 2.0!” ●

Anil Dash Job Director of Expert Labs, partner at Activate Age 35 Education High school Career VP (evangelism) at Six Apart, new media developer for Village Voice Media Online dashes.com and twitter. com/anildash

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

.net subscribe

Super saver!

Massive savings off store prices!

Subscribe today Save over £20

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

.net november 2010

.net subscribe

UK: £13.99a quarter USA/Canada: Seep101 Europe: £74.99 – save £88 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 31 November 2010.

.net november 2010

.net fonts

New web developments mean that it’s easier than ever to get creative with typefaces. Elliot Jay Stocks picks 20 fonts that demand your visitors’ attention

Words Elliot Jay Stocks is a designer, illustrator, speaker, and author. His clients include organisations such as Microsoft, Virgin Group, WordPress and MailChimp. He is also the creator and publisher of 8 Faces, a bi-annual print magazine dedicated to typography. www.elliotjaystocks.com Image André Beato is a Portuguese graphic designer and illustrator, currently based in London. www.andrebeato.com

To say that right now is an exciting time for web typography is to make something of an understatement. Recent technological leaps and bounds have brought us one step closer to typographical nirvana on the web, and it’s a step that’s been an awfully long time coming. The freedom to use typefaces beyond the ‘web safe’ fonts installed on most systems has come about largely thanks to three major and near-simultaneous technological factors: firstly, the widespread support for @font-face in browsers; secondly, the emergence of font delivery services such as Typekit and Fontdeck; and thirdly, the development of a new font format – the humble WOFF file – to address many of the foundries’ privacy concerns. But with great power comes great responsibility. Just because we can choose from a vast library of typefaces doesn’t mean we have to; there’s something to be said for painting with a limited palette. Not only that, but there are a lot of sub-standard fonts out there, and with many of them being free, their usage is often widespread but undeserved. In fact, this is part of a much larger problem: the misconception – particularly within the web design community – that fonts aren’t worth paying for.

.net november 2010

This is damaging for both the worldwide network of talented type designers and the design community as a whole. A typeface, like any form of design, is created by craftsmen over a substantial period of time, using the talent and experience they’ve been honing for many years. The benefits of a professionally designed font — various weights and styles to form a complete family, carefully considered kerning pairs, multi-language support with international characters, expressive alternate glyphs to add character and variety to type-setting — are very rarely found in a font available for free. It’s for this reason that we’ve focused almost entirely on 20 fonts that require some sort of purchase, although many of the Typekit-served fonts are available within their free package. We’ve also focused primarily on typefaces that work well for the relatively small body type we use regularly on the web, rather than display faces more suited to very large headings. So turn over and discover 20 typefaces you’ll want to use again and again…

.net fonts

.net november 2010 43

next>

.net fonts

19FF Kava

FontShop Classification Sans serif Designer Yanone

When Kaffeesatz was released for free around the time browser support for @font-face became more prevalent, it found popularity among many web designers and brought designer Yanone to the attention of FontShop FSI, who commissioned him to produce a professional version of the typeface. Rather than simply adding extra glyphs to the font, it was completely redrawn from the ground up, keeping much of its character but including features such as a black weight, small caps and international language support. The result is FF Kava.

<prev

Full of personality and unashamedly casual, Bree might seem suited only to headings rather than body type, especially as it was born from TypeTogether’s logo. However, a closer look reveals that, while headings are certainly its forté, Bree performs surprisingly well at smaller sizes. It’s also just one of the many beautiful typefaces to

.net november 2010

A redrawn version of the free typeface Kaffeesatz, now upgraded to a ‘pro’ level font.

16 FF Trixie

FontShop Classification Typewriter Designer Erik van Blokland

Trixie was one of the first true typewriter fonts and is an excellent choice if you’re going for distressed headings. Simulating the aesthetics of ink being misprinted by a typewriter is no mean feat when the text also needs to remain totally legible, yet Trixie manages to succeed on both counts.

15Centro Sans Pro

Bree

Typekit, Fontdeck Classification Sans serif Designer José Scaglione, Veronika Burian

FF Kava

Avenir

A more friendly take on the ubiquitous Futura that can often found in corporate design.

As strange as it may seem to list a system font associated with the world of Word documents and suits who can’t be bothered to change the defaults, Times New Roman is a surprisingly robust typeface when given a little TLC. The 2008 Seed Conference website (www.seedconference.com/ seed.php) made particularly good use of Times by giving it the feel of a display face. Simon Collison, a designer known for his appreciation of Times’s flexibility and use of it on his personal site, says that “it actually feels quite good to be taking a tired old typeface and trying to squeeze every possible ounce from it” (bit.ly/9UwfiS).

Avenir’s design is based upon the ubiquitous Futura (which was designed as ‘Die Sc Schrift für die Neue Zeit’ – ‘the typeface for the New Time’), but Avenir is described by designer Adri Adrian Frutiger as having a more human touch. Des Despite its popularity as a corporate typeface, it it’ss a well-rounded geometric sans with a subtle personality that adds a friendly smile to serious cont content. Several years later, Akira Kobayashi completed Avenir Next, which refined the original and added italics and small caps.

System font Classification Serif Designer Victor Lardent, Stanley Morison

be born of the collective brains of José Scaglione and Veronika Burian, two type designers who met while completing the MA in Typeface Design at the University of Reading, a course widely considered to be one of the best in the world for aspiring type designers.

Fontdeck Classification Serif Designer Panos Vassiliou

Many super-families or ‘type systems’ enable designers to mix serifs and sansserifs to achieve simultaneous consistency and contrast, and Centro is one such super-family. It has been described as an ‘invisible’ typeface, where its single greatest attribute is its impressive legibility. The sans is strong and sturdy, with a large x-height and, quite simply, it looks absolutely great in use on screen.

Times New Roman

Don’t dismiss it; with a little bit of love, this default can be given a new lease of life.

Bree

Full of personality and warmth, this does well in both small sizes and headings.

New 18 Times Roman

Fonts.com Classification Sans serif Designer Adrian Frutiger

20 Avenir

.net fonts Get started Using @font-face today

14Fedra Sans

Typotheque Classification Sans serif Designer Peter Bil’ak

At the heart of Typotheque’s font library, Fedra is a super-family that was designed to work just as well on screen as in print, and actually started life as a corporate typeface for German insurance company Bayerische Rück. The design faced disaster when the client first acquired and then cancelled the project, then faltered again when Typotheque’s office equipment was stolen. But, with designer Peter Bil’ak being forced to go back and re-examine the typeface, the final design was all the better for the set-backs, and the eventual result was a set of extremely versatile fonts.

Internet Explorer introduced support for @font-face back in version four, albeit only with support for EOT files. Safari caught up several yea later er with wi @font-face @font su years support using TTF forma ormats, and Firefox Firefox and Opera followed and OTF formats, in 2009, thus marking the point where @fontface became available in all the major browsers, albeit with slightly different implementations. If you’re new to linking fonts in your stylesheets using @font-face, don’t worry: it’s a relatively simple affair. The first part involves setting up an @font-face declaration that explicitly links to the files, be they on a server or on a local computer. If you’re using a web font delivery service, this code is usually written for you and wrapped up in an include. Essentially the only part you need to pay any special attention to is the name given to the font family.

The second part simply requires you to reference that family name in exactly the same way you would with other normal web-safe families; e.g: ‘FF Meta Serif’, Georgia, ‘Times New Roman’, serif. The font stack is important: don’t forget that browsers without @font-face support will need to fall back to system fonts. Unfortunately, creating a stack that works well can be something of a challenge: due to different x-heights in different fonts (and weights, and widths, and just about anything), the fallbacks can often look considerably different to the original face, and — at worst — occupy a larger or smaller space on the page. The moral of the story: choose your font stack wisely. I’ll be taking a further look at the nuances of font linking in a more in-depth typography feature in next month’s magazine…

13Museo Slab

Typekit, Fontdeck, Font Squirrel Classification Slab serif Designer Jos Buivenga

Fedra Sans

Its versatility makes this part of the Fedra superfamily at home on screen.

Museo Slab

The slab variant of the extremely popular Museo, adding a little authority and variety.

Centro Sans Pro

Highly readable and part of an awardwinning super-family.

Ready to use @font-face is now supported by all major browsers, albeit with slightly different implementations

FF Trixie

An authentic typewriter font that balances legibility and the distressed look.

The original version of Museo has become extremely popular among web designers and is one of the few semi-free fonts (several of its weights are free) to make it onto this list. Its newer slab variant is a little less playful than standard Museo, and so offers a slightly more authoritative tone, along with a welcome element of variety, given how widely spread the original version has become.

.net november 2010 45

next>

.net fonts

10 FF Unit Slab

Fontdeck Classification Slab serif Designer Robert Besle, Hermann Eidenbenz

The slab style of the Unit super-family – which is often referred to as the grown-up sister of Meta – is a personal favourite of many, including me, and I chose it as the official typeface of my print magazine 8 Faces (8faces.com). It comes across as powerful and almost brutish at its heaviest ‘Ultra’ weight, yet can be seen as deceptively subtle at its thinnest ‘Thin’ weight – the typeface is a great all-rounder that’s just overbrimming with personality. A variation of Unit Slab – Espi – is used as Edenspiekermann’s corporate typeface.

Typekit, Fontdeck, Font Squirrel Classification Serif Designer Jos Buivenga

<prev

Born as the result of an experiment designer Jos Buivenga was performing with an early version of Museo Slab, Calluna is actually his first serious text face. Much like Meta Serif, it manages to exude no small amount of personality even when used at smaller, body type sizes. Like many of Jos’s latterday fonts, there are plenty of OpenType features included, and the regular weight is available completely free.

Proxima Nova

.net november 2010

A geometric design with the ability to slip into a multitude of contexts.

Clarendon URW

07Droid Sans

Typekit, FontsLive, Webtype Classification Sans serif Designer Steve Matteson

Typekit, Fontdeck Classification Sans serif Designer Mark Simonson

The classic British slab serif. See also: Sentinel.

Condensed faces are often used for attentiongrabbing headlines, and often we reach for hard, industrial faces such as Alternate Gothic and its ilk. Sometimes something a little softer is required, though, and that’s where Ronnia’s condensed flavour comes in. Its gentle, playful form plays well with Bree, although it comes across as a little more authoritative: a friendly face with some gravitas.

Calluna

Proxima Nova

Described as a design that straddles the gap between typefaces like Futura and Akzidenz-Grotesk, Proxima Nova is remarkably versatile, and the family includes several weights and widths, bringing the total font count to an impressive 42. Extremely readable thanks to its geometric clarity and humanist feel, it’s a hybrid that works in a variety of scenarios.

Typekit Classification Sans serif Designer José Scaglione, Veronika Burian

A truly modern type super-family, Droid was designed by Ascender’s type director Steve Matteson for use on mobile devices; its name is derived from the Android platform. The sans is a highly legible, friendly typeface with upright stress, open forms and a neutral appearance. To make the most of type appearing on small screens, the letterforms are very slightly condensed. The entire family features multilanguage support so is well-suited to far-reaching websites and applications. Calluna

FF Unit Slab

With a big difference between its weights and a lot of personality, this is a great typeface.

This classic British slab serif is a must-have on any ‘top typefaces’ list. Redrawn by Hermann Eidenbenz to include several weights and widths, Clarendon is offered as a web font by Fontdeck. Also of note is Sentinel by Jonathan Hoefler and Tobias Frere-Jones. Their Clarendon-based typeface added true italics, although sadly there’s currently no web font version, so any web designer desperate to use this typeface must resort to font replacement methods such as sIFR, Cufon, or – dare we say it – image replacement. Certainly not ideal, and perhaps not truly a font for the web (yet), but one too beautiful, too robust, and just too damn popular to omit entirely.

08Ronnia Condensed

FontShop Classification Slab serif Designer Erik Spiekermann, Christian Schwartz, Kris Sowersby

Jos Buivenga’s first serious text face: absolutely beautiful and semi-free.

12Clarendon URW

.net fonts Expert tip Font delivery services

Although initially designed for use in magazines, Tisa has become popular on the web, perhaps because – like the majority of typefaces here – its large x-height makes it highly legible as on-screen body type. Taking slab serifs as an influence and then offering a softer, low-contrast end product, the typeface was originally designed by Miklav i to fulfil the requirements for the aforementioned MA in Typeface Design at Reading.

05 FF DIN

Typekit, FontShop Classification Sans serif Designer Albert-Jan Pool

DIN embodies the spirit of German efficiency (DIN stands for ‘Deutsche Industrie-Norm’ or ‘German Industrial Standard’) and has its roots in signage – everything from road signs on the Autobahn to house numbers. It was celebrated for its no-nonsense geometric style and adorned German design for years in the form of DIN 1451: DIN-Mittelschrift and DIN-Engschrift, its condensed companion. It was updated and expanded into a family of five weights by Albert-Jan Pool in 1995 and has recently been given more stylistic variants, including DIN Rounded.

Paid for Typekit’s tiered service includes font packages

fonts, complete with @font-face options on the site

Designed for legibility on mobile devices, it also looks great at larger sizes.

for personal and professional sites, with different libraries

FF Tisa

Droid Sans

Ronnia Condensed

A softer headline face than typical gothics, with an added element of fun.

Free Font Squirrel presents great commercial-use free

A low-contrast take on the slab serif with huge personality, even on body type.

FF DIN

A modern design classic, undoubtedly German in its origin and gloriously efficient.

Typekit, FontShop Classification Serif Designer Mitja Miklav i

some, such as Typotheque, deliver fonts from just that particular foundry. Others, such as Webtype (from Ascender), are a joint production from several foundries that have teamed up together. Google offers a font delivery service for a small selection of typefaces. FontShop FSI has taken a hybrid approach: it’s offering screen-optimised versions of its popular typefaces — called ‘Web FontFonts’ — that are actual downloadable font files in EOT and WOFF format, ready for the designer to host on their own server. However, to serve browsers that don’t support those formats, the service can integrate with Typekit, and when required, the files are then served by Typekit’s servers. Fontspring, rather than offer a delivery network, enables designers to buy and download font files ready for linking and offers additional @font-face licences. Additionally, its sister site Font Squirrel packages up free fonts designed for commercial use and also hosts the @font-face Kit Generator tool at www.fontsquirrel. com/fontface/generator for designers who wish to create their own multi-format kits.

06FF Tisa

Hosting font files on your own server has two major drawbacks: you’re limited to using only those fonts that are free to distribute and you have to look after the complexities of serving different filetypes yourself. Both problems can be solved by using a third-party font delivery service such as Typekit, Fontdeck and so on. Typekit recently celebrated its first birthday and, at the time of writing, has one of the largest web font libraries from a diverse range of foundries. The other big player is Fontdeck, which — while younger than Typekit — has a steadily growing library. Both generate code for you to use but operate different business models: Typekit has several plans, ranging from free to enterprise level, that enable access to larger portions of their font library as the price increases. You are free to use as many fonts as your plan can access. Fontdeck enables users to pay for access to particular fonts on a case-bycase basis, so if you’re only interested in renting one font, you can do so. There are several web font delivery services emerging from the type foundries themselves:

.net november 2010 47

.net fonts

Alternate Gothic 03 No. 1 Fontdeck Classification Sans serif Designer Morris Fuller Benton

02 FF Meta Serif

Typekit, FontShop Classification Serif Designer Christian Schwartz, Erik Spiekermann, Kris Sowersby

Erik Spiekermann describes his Meta family as, “the nearest thing I’ll ever have to a classic,” and he’s being modest, because Meta really is a classic; especially its serif. It’s an authoritative typeface that works well in a variety of scenarios and offers a logical upgrade to designers who have previously been using Times New Roman. It works well with the other flavours of Meta and also with the Unit super-family. Support for international characters and a wide variety of glyphs for numerals, fractions and so on mark it out as a high-level professional font. More details can be found at metaserif.com. Don’t miss Elliot’s in-depth feature looking at how to use typography on the web in our next issue

Helvetica

The typeface for people who don’t know about typefaces. How could this not be on our list?

<prev

A fantastic typeface for headlines, Alternate Gothic and its variants remain a hugely popular choice for those in need of a hard-hitting, almost brazen typeface. Legible at relatively small sizes despite being condensed, it’s a bold and formidable face; a slice of American industrialism performing

.net november 2010

Alternate Gothic No. 1

Bold, powerful, and not afraid to shout about it.

Georgia

System font Classification Serif Designer Matthew Carter What? A system font at pole position? As hard as it may be to believe, Georgia comes up again and again as the people’s favourite when talking about type that works well on the web. Perhaps it’s because it was designed for screen rather than print; perhaps it’s because it manages to offer timeless beauty in its simple, understated design; perhaps it’s because it has Old Style Figures as default! Extremely legible at small sizes and somewhat majestic in its italic form, Georgia proves its worth despite the new wealth of alternatives, and reminds us that sometimes the best tools are sitting right in front of us.

8 Faces is a new, limited-edition print magazine for devotees of typography created by Elliot Jay Stocks. Printed on heavy uncoated stock, with a foil-blocked cover, and lovingly pressed at just 1,000 limited editions, each issue is a true collector’s item. Each copy is individually numbered, so 8 Faces will be more at home on your bookshelf than in your magazine rack. The physical edition of issue one has sold out but a PDF edition is still available. 8faces.com FF Meta Serif

A typeface that manages to bridge the divide between elegant design and simple legibility.

Georgia

So usable it even beats off the @font-face competition. A screen design classic.

It seems almost impossible to discuss the subject of typography without mentioning Helvetica. Thanks to its generous usage by what seems like every designer in existence, the typeface has achieved legendary status; its name and style known to the general public as well as type aficionados, partly due to the 2007 film by Gary Hustwit. Originally named Die Neue Haas Grotesk and created to compete with Akzidenz-Grotesk, it represents the Swiss style of graphic design from the 1950s, but its widespread appearance in virtually every design context has resulted in the typeface becoming somewhat homogenised, and it has been re-imagined in various (inferior) forms such as Arial. Nevertheless, it remains a modern classic.

magnificently in the digital age. An open source re-drawing, League Gothic, was released by The League of Moveable Type and has since become widely popular on the web, thanks in no small part to it being freely available to download from www.theleagueofmoveabletype.com.

Fonts.com Classification Sans serif Designer Max Miedinger, Eduard Hoffmann

04 Helvetica

next_month

develop discover design

Cool animations with CSS3 Master fades, rotations, elastic menus, accordions and more!

back issues

Missed an issue of .net? Contact our back issues department before it sells out

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

Issue 207 Add magnetism DIY UX; create an image map in jQuery; design a notched tab system; create glossy buttons; tips on designing for kids On the CD

Don’t miss an issue >

new issue

on sale 9 Nov

Subscribe to day, turn to page 40 no w

GSA Auto WebSubmitter Lite; Remove 3.1.2; ecommerce toolkit; Photoshop video training

>> 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 november 2010 49

What our customers say: â&#x20AC;&#x153;Fasthosts listened to what we needed and helped us find the right package to suit our business. We work with a number of leading brands, so we needed an ultra-responsible hosting company, hence our decision to use Fasthosts.â&#x20AC;? PeToBa Media Ltd, Martin Thorne - Senior Developer

I N DU STRY

L E AD IN G TE CHNOLOGY

FOR

OV ER

1 0 YEA R S

WebHosting

fordesigners&developers Designed to run dynamic database-driven websites, our hosting packages support the latest scripting languages and offer MySQL 5.0 and MS SQL 2008 databases. We own and manage two state-of-the-art secure UK data centres, so you deal directly with us and not a third party supplier, unlike other hosting companies. Our customer support team and onsite engineers operate 24/7, so we're here whenever you need us.

WEB HOSTING starting from: £3.49pm £4.10 inc VAT

Up to

Normal price £5.86 inc VAT

✔ Up to 50GB web space - Plenty of space to run dynamic database-driven websites. ✔ Free choice of Windows & Linux - No extra cost and the option to change at any time. ✔ MS SQL & MySQL databases - Operating on our powerful dedicated database servers for optimum performance. ✔ ASP.NET 3.5 with AJAX extensions - For sophisticated web applications. ✔ PHP, Perl & Python CGI scripting - Perfect for dynamic websites. ✔ SSL Secure web space - Create secure web pages for your visitors. ✔ Free search engine advertising vouchers - Worth £105. ✔ Free .uk Domain* - Worth £5.90.

web host 6 montihnsg for †

Visitwww.fasthosts.co.ukforourfullrangeofwebhosting packages plusadditionalsavings forannualandbiennialpayments.

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

Buy now at

fasthosts.co.uk/hosting 0844 583 0711

© 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. *Offer applies to first 2 years registration. Subsequent years charged at standard rate. **Unlimited bandwidth is subject to an acceptable use policy. †Offer subject to a minimum 12 month contract.

World Class Web Hosting Proud sponsor of

.net images

Enhance website images with CSS3 By utilising modern CSS, designers can improve the appearance and management of website images. Craig Grannell ﬁnds out how, with the help of designers already embracing CSS3

Words Craig Grannell is a web designer and writer. Check out his design work at snub communications.com Image ilovedust is a studio providing creative solutions for print and web. ilovedust.com

Of late, most eyes have been on typography when it comes to cuttingedge web standards. But although the web’s most important content is text-based, images are often what attract users, and there’s plenty in modern CSS to assist you in making the most of your site’s images. In this feature, you’ll find out about some of the CSS properties you can use and how they can enhance your images. Code snippets will be provided, along with insight into progressive enhancement and browser support – plus case studies from designers who’ve already immersed themselves in the technology. Ironically, a big part of working with CSS to make images look great online involves relying less on images themselves. This might sound

.net november 2010

counter-intuitive, but bear in mind how often you include ‘extra’ images in designs you’re working on, to add things such as subtle drop shadows and complex edges to components.

Management

Management can also be a major undertaking when it comes to images. With a piece of text, you edit the HTML and you’re done. If you have a complex background image to edit, you may need to find a whole bunch of original assets, rework a complex multi-layered document and then upload the revised compiled image. Typically, using more CSS cuts down the level of management required. “Think about sliding doors, where you fake multiple images on one element, or how much you must do to get

.net images

Newer browsers In compliant browsers, this is what the demo on your disc should look like. It utilises several CSS3 properties

rounded corners on an element pre-CSS3,” says web design specialist Christopher Schmitt (christopherschmitt.com). With CSS3, he argues, these things might soon be consigned to history, leaving designers with less work and more power at their fingertips.

Older browsers In older browsers, little or no CSS3 works. Here’s how the demo looks in IE8. Therefore take care to ‘check back’ when working with cutting-edge CSS

to cover, and so even if you don’t plan on using CSS3 on the site you’re currently developing, ensure you insert the knowledge into your brain for retrieval in the near future. Perhaps the biggest change to using CSS3 with images comes with backgrounds, including

“CSS3 enables us to dictate if any image should stretch to ﬁll the width and height of the element” Christopher Schmitt

Alert readers may have noticed the lack of a definite statement there, with the use of ‘might soon’ – and that’s because CSS3 is in a state of flux, albeit a state of flux that’s happening alongside extremely rapid browser development. However, browser support is regularly sporadic, and you’re often forced to use vendor-specific prefixes on certain properties in order to make things work. (In such cases, include a ‘clean’ property/value pair first, followed by those using prefixes; only including prefixed properties in your CSS is a bad idea, since browsers drop prefixes once behaviour is nailed down.)

Older browsers

Inevitably, older and less compliant browsers won’t ever render many of the things outlined in this feature. Internet Explorer isn’t the only culprit – you’ll find major differences regarding CSS3 support even in Opera if you switch between versions 10.6 and 10.1. Still, as Tom Wittlin, head of digital creative at Folk (wearefolk.com), notes: “As browsers steadily begin to catch up with the rate at which new technologies are being developed, we can start to drip-feed new features into our sites to enhance appearance and usability while maintaining a constant eye on the less discerning web users of this world.” In other words, think of many of the CSS3 properties as a means of offering progressive enhancement. Ensure that any site you build that includes CSS3 remains usable (and, where possible, aesthetically pleasing) when accessed by popular but less compliant browsers – and remember that browsers are rapidly evolving. Even Internet Explorer will soon support all the stuff we’re going

<prev

.net november 2010

the ability to apply multiple backgrounds to any element. “CSS3 enables us to do interesting things with several background images, like apply specific position coordinates, tell the browser if each image

repeats and – the cool part – dictate if any image should stretch to fill the width and height of the element,” explains Schmitt. “This neatly eradicates the need to use a hacky JavaScript solution for any website that has a scaling full-window background image behind other page content, and it also means you can scale the backgrounds of internal components of flexible and adaptive layouts.” Elsewhere, many sites have backgrounds with multiple components, built with less-than-optimal coding. “The power of multiple background images solves issues with having to use absolutepositioned images within pages, or objects that require further overlays,” argues Wittlin. “You can position the background images wherever you wish, just as a regular background, but with the bonus of including more than one element.” Examples of such design are commonplace online

In use Multiple backgrounds Christopher Schmitt Job Web design specialist Company Heatvision.com Blog www.christopher schmitt.com One of Christopher Schmitt’s favourite aspects of CSS3 is the ability to work with multiple backgrounds, which he used for the node.js Knockout competition (nodeknockout.com). “I worked with a team to build a multi-player Battleship-like game within 48 hours, and since we were building an app with a lot of moving parts in a short amount of time, I wanted to ensure we had a decent backdrop that was independent of any inline elements,” he says. Schmitt wanted to capture a “nautical, underwater feel, but with naval and warfare overtones” for the game (hms-dreadnode. no.de). He defined a sea-blue background in a body rule, then used Modernizr to deliver a set of background rules for browsers that support multiple backgrounds. The code lists multiple values for background-image, backgroundposition, background-repeat and background-

size (see schmitt-code.txt on your CD). Schmitt notes that because “browsers layer background images so the image referenced first is on top of the other images,” he first put the textured image bkgd.jpg at the back. “The contest was about ships and coding, so I added a PNG with schematics of naval vessels and starships, and used a negative value for positioning, which allowed the background image to move whenever a user resized the browser window.” Two further images were added to “make the background appear more as if you were in the water” – hence a light source at the top and a dark gradient fade at the bottom.

Backgrounds CSS3 enables you to combine multiple images, potentially making future edits simpler, and giving more scope when positioning elements

.net images In use Border images Jonathan Smiley Job Designer Company Zurb Website zurb.com

Browser compatibility There’s a pretty overview of CSS3 browser support at findmebyip.com/litmus#target-selector; also check out QuirksMode’s tables at quirksmode.org/css/contents.html

– you often see horizontally tiled images with a single overlaid component, or backgrounds with numerous elements. Without CSS3, the former requires either a massive background image that won’t tile on an ordinary monitor set-up, or superfluous markup containing an overlaid component. The latter requires all images to be merged into one, making it impossible to fiddle with a single element without reworking, exporting and uploading the entire image again. With CSS3, it’s simple enough to soften a background image by overlaying a tiled gradient, or to position some other bespoke element over the page’s background. The code for using multiple backgrounds is effectively the same as the standard background CSS you already know, but with multiple, commaseparated items. For example, you could use the following for a single background element overlaying a horizontally tiled gradient: body { background-image: url(badge.png), url(gradient. png); background-repeat: no-repeat, repeat-x; background-position: 20px 20px, 0 0; } The order in which the backgrounds are defined is important if images are to be stacked on top of one another: the earlier entries (those ‘closer’ to the properties) are placed on top of those that come later. While Schmitt adds that “there is another way to code CSS3 backgrounds, by using shorthand”, he suggests that separating properties as per the previous code block makes things easier

to read and keep track of. Otherwise, you’ll end up with something like this: body { background: url(badge.png), url(gradient.png), no-repeat, repeat-x, 20px 20px, 0 0; }

Zurb designer Jonathan Smiley is a fan of border-image: “It has really interesting applications, and we used it for our feedback tool Notable”. Notableapp.com annotations comprise a frame and a ‘glass’ overlay. These are marked up using divs with border and overlay class values within a containing div with a class value of note. When it came to styling annotations, Smiley says “they couldn’t obscure or affect the hue of the content beneath – and they had to look great”. The glass effect is a semi-transparent PNG, but for the borders, Zurb used border-image. “The annotations have a four-pixel border that fades from bright orange to a darker shade as you go from top to bottom,” says Smiley. “We didn’t want to use a canvas knockout, so instead we used border-image, which is a versatile but tricky CSS property.” The team created a 15-by-15-pixel image with a transparent five-by-five-pixel centre, solid colours across the top and bottom and gradients on the left and right edges. “That’s because the sides are the only places that are stretched enough to see a gradient,” explains Smiley. “The browser does a good job of stretching the image as long as it’s not too complex, and so artefacts aren’t an issue.”

All currently shipping browsers apart from IE support multiple backgrounds (Firefox since 3.6); older browsers ignore these ‘background’ rules entirely, so ensure your site works without the images. Note that you can define a background colour in a separate background-color property/ value pair, which all browsers will pick up.

More background controls

CSS3 also brings additional background controls that enable you to size or scale backgrounds to fit a container. This is done using the backgroundsize property, which requires the -moz- prefix for Firefox, -webkit- for Safari 4, and -o- for Opera versions prior to 10.5. When defining dimensions, you can do so in pixels or percentages. If you size one edge using a length or percentage, auto as the second value will ensure the image is resized proportionately. The following code block is suitable for making a body image stretch to the browser window’s width and retain its aspect ratio: body { background-size: 100% auto; } When working with multiple backgrounds, you’ll need to use the auto value for images you don’t

Borders Zurb’s notableapp.com utilises the borderimage property for aesthetic and practical purposes

want resized. It’s also possible to use the values contain and cover instead of pixels or percentages to fill or cover a box while retaining the proper aspect ratio. In testing, it seems browsers currently need background-attachment to be set to fixed for these values to work, and Opera for Mac fares oddly poorly with them. (Anyone wanting to use flexible inline images for adaptive layouts shouldn’t immediately convert them to background images – instead, investigate fluid images, as per unstoppablerobotninja.com/entry/fluidimages.)

.net november 2010 55

next>

.net images In use Replacing gradients with CSS Stephanie Rewis Job Principal Company W3Conversions Website w3conversions.com

We’re cheating a bit with this tip, although it’s still image-related. Designers regularly use images for gradients and faux columns (where you create a container for columns and use a tiled image to make the columns appear to be of equal height). Stephanie Rewis – co-author of Mastering CSS with Dreamweaver CS4 under her maiden name Stephanie Sullivan – notes that there’s a better way: using CSS3 linear gradients instead of an http request and an image. “Though a gradient is typically two colours gradually blended together, it doesn’t have to be. You can allow the colours to run right up to each other, and stop before they blend,” she explains. At present, the CSS required differs between browsers, and Rewis rightly says it “can make your head spin”. She recommends Westciv’s tool (westciv.com/tools/gradients/) for the heavy

CSS image borders

Another aspect of web design requiring more work than should be necessary is complex box edges. CSS3’s border-radius enables you to create rounded corners with CSS alone (Mozilla browsers require the -moz- prefix); if a border is also applied, you end up with a solid border on a box with rounded corners. But what if you want to take things further and add some other decoration? In the past, designers resorted to all manner of inflexible design and hacks, including fixed backgrounds (which require fixed, inflexible content sizes) or complex nested elements with images for corners and edges applied using backgrounds and CSS sprites. But with the borderimage property, things are set to change. “The gist of border-image is that you can set an image of your choosing as the entire border for an object,” explains Zurb designer Jonathan Smiley (zurb.com), although he says the reality is more complex. “What happens is that the web browser takes your image and divides it into nine sections, using a three-by-three grid. It then takes the top-

lifting: “It makes it simple to set the h/v position using percentages, and though it uses hex colours and percentages, you can translate values to RGBA/HSLA and pixels if needed.” In Safari or Chrome, Rewis says to set both v Position sliders to 0 or 100 and click Delete Stop. Colours for the left and right columns are defined in Start and End, respectively, and the h Position values should be the size of the left column. For Mozilla-based browsers, Rewis says: “Change the angle to 180 degrees, define the right column colour in the Start pane and ignore the End pane’s color setting, because it won’t show. The v Position controls the column size, so set it to the percentage needed for your page. In the Stops area, the color selector should be set to the left column colour for your design. Set its position to 0.” Code output can then be copied to your CSS selector, and will look something like this: .container { background-image: -webkit-gradient(linear, 35% 100%, 35% 100%, from(#E2DAED), to(#FFFFFF)); background-image: -moz-linear-gradient(35% 0% 180deg,#FFFFFF, #E2DAED, #E2DAED 0%); }

Gradients Once the code settles down, CSS3 gradients should enable designers to do away with ‘faux columns’ and image-based gradient backgrounds

left section and makes that the top-left border corner, then takes the top-middle and stretches it across the top border, and so on. It also stretches the centre of your image across the entire object.” In use, the border-image property requires the URL of the image, a width setting for each

length isn’t a multiple of the tile size, but WebKit currently makes a mess of this. At the time of writing, Mozilla and WebKit browsers require the -moz- and -webkit- prefixes. The border-image property must also be applied alongside borderwidth settings that mirror the widths defined in

“CSS3 allows us to do interesting things, like dictate if an image should ﬁll the width and height of an element”

Christopher Schmitt

edge and a definition regarding how to apply said settings. On the last of those, options are repeat, round and stretch. The stretch value stretches the relevant portion of the image to the length of the border (good for vertical gradients), whereas repeat tiles the section (suitable for repeating patterns). The round value should tile the section but scale each tile if the edge

Three-by-three When designing the notableapp.com annotation border, Zurb found it useful to sketch how the border-image property worked prior to creating the PNG

<prev

.net november 2010

Rewis notes that when you’re comfortable with the technique, you can create a variety of effects, although since Internet Explorer won’t support gradients until IE9, “you must be sure for fallback to use a text colour visible on your background when the gradient doesn’t render, or apply a faux column image within a conditional comment”. To see more demos using this technique, visit w3conversions.com/sandbox/css3/gradients/.

border-image; confusingly, pixel widths in borderimage should be listed without the px unit, but percentage values still require %. By way of example, a border with edges (clockwise from top) of 10, 20, 30 and 10 pixels could be styled using the following code: #box { border-width: 10px 20px 30px 10px; border-image: url(border.png) 10 20 30 10 stretch; -webkit-border-image: url(border.png) 10 20 30 10 stretch; -moz-border-image: url(border.png) 10 20 30 10 stretch; } With a more regular border, the four width properties needn’t be defined separately – just use a single value. Also, be mindful of a couple of quirks with border-image. First, the spec is only partially observed by browsers and so, while one should have to use the fill keyword to include the middle

.net images

Give ’em some love Folk created a demo specifically for this article, showing how to ‘treat your images to some CSS love’: visit wearefolk.com/preview.php

part of the image, browsers currently default to ‘fill’ rather than ‘discard’. This means you must ensure the centre of your image is transparent unless you want it to appear behind the box’s content. You’ll also find that if your borders have curved edges, box background colours will ‘poke’ out.

Boxes and highlights

Outside of backgrounds and borders, there are a number of simpler CSS3 properties that you can use to boost the appearance of your images. Use of box-shadow (-moz- and -webkit- prefixes, are required for Mozilla and WebKit browsers) takes four values – horizontal offset, vertical

Subtle effects The speakers page at 2010.full-frontal.org uses :target to highlight a clickedto page element; the same technique can easily be transferred to images alone

offset, blur and colour – and, when used subtly, can provide focus to an image, lifting it from the page. A typically good set of values is 0 0 5px rgba(0,0,0,0.5) – no offset, a subtle blur and the use of RGBA to make the shadow more transparent and natural. The transform property can also be used to draw the eye by rotating images slightly. This is common in print but is rarer in the boxier design of online. To rotate an element, use transform: rotate(0deg), replacing 0 with another number. (You’ll need to use prefixes with this property.) Designer and developer Remy Sharp (leftlogic. com) recommends that, once you’ve got these

In use Image stacking Mark Eagleton Job Development director Company ground(ctrl) Website groundctrl.com

Much of ground(ctrl)’s work involves artist community sites, and it can be tricky to keep things from looking cookie-cutter, says development director Mark Eagleton. But because the company doesn’t have to support IE6, it’s increasingly incorporating modern CSS into its sites. “We’re in the midst of spiffing up the image gallery of one of our more flamboyant artists,” says Eagleton. “While the standard thumbnail grid is handy for browsing a catalogue of photos, drawing attention to the gallery on the homepage can be more visually interesting.” For the new website, ground(ctrl) art director Scott Pargett comped up a design of a stack

of photos sprawled out on the page. Images overlap, have distressed edges, and sprawl across the page at irregular angles. “This kind of design has been approached in many different ways over the years, but using the CSS3 border-image and transform properties, it’s nearly as easy to scatter photographs haphazardly on a web page as it is a table,” argues Eagleton. Since the design’s not yet been approved, it’s still top-secret – but Eagleton has whipped up a similar demo, including code, which you can see at dev.thebigreason.com/css3-image-stacking/.

Stacked up CSS3 and CSS2.1 properties provide the means to create a stack of interactive images that can be easily tweaked and edited

properties committed to memory, you learn about the :target selector: “If there’s an element that matches the hash on the URL, it’s selectable via CSS. This means you can use :target for subtle effects, such as drawing focus to a particular element on the page when it might otherwise not be entirely clear which block of content you’ve jumped to.” Click on a speaker at 2010.full-frontal.org for an example – on the page you’re sent to, the targeted speaker’s box will have a drop-shadow surrounding it. Similar methods can also be used with imagebased elements. While the techniques outlined in this feature should give you some ideas for improving the aesthetic appeal of your websites and simplifying the management of certain visual components, CSS3 isn’t done yet. Next month, we’ll be looking into how designers are utilising CSS3’s ability to animate and transform elements, bringing an added dimension to websites. In the meantime, check out demo.html on your disc, which uses many of the properties outlined in this feature. There’s a scaling background image, overlaid with a horizontally tiled gradient; the wrapper uses RGBA for its background and border, as well as having a drop-shadow and rounded corners; and there’s a list of images that are styled with boxshadow, transform and opacity. With the last of those properties, the value shifts from 0.9 to 1.0 when hovered over – a subtle means of focusing a user’s attention on the image. On transform, the use of nth-child provides a degree of randomness to the rotation angles, boosting visual interest. For more insight behind this technique, check out Zurb’s playground at zurb.com/playground/css3-polaroids. Which CSS3 properties have you made use of? Share your experiences at forum.netmag.co.uk

.net november 2010 57

.net visualisation

Create a cool data visualisation Brian Suda explains the basics of turning dry statistics into beautiful, informative data visualisations It’s the best storytellers that history remembers. They’re the ones whose information we still have and use. Ancient Greek plays, Roman myths, Norse sagas, Arabic tales and Oriental fables all stay with us because the underlying point of the stories still rings true. They’re good stories. This is what you need to achieve with your visualisations – you need to tell a memorable story. I’d even argue that if you’re starting by creating visualisations, you’re starting in the wrong place! You can’t write Shakespeare on your first try, so why not take a step back and focus on the basics?

Check out Brian’s book!

ning We review Desig 30 ge pa on with Data F PD a e’s er th plus CD extract on the

If you get stuck, there are plenty of resources online. MetaOptimize is one (metaoptimize.com/ qa) – here you can ask questions and get answers. Topics range from what graph is best to use in which situation, to what software and algorithms are best for mining your data.

Technical approaches

I’ve written before about how to create web-based visualisations (carsonified.com/blog/design/4ways-to-create-web-based-data-visualisations). When rendering graphics on the web, we have a few options. The obvious one to use is the <img> element. There are certainly pros and

Words Brian Suda is a software developer and author of A Practical Guide to Designing with Data (Five Simple Steps). suda.co.uk Image Mike Chipperfield is a member of Magictorch, a small Brighton-based design collective specialising in digital illustration. www.magictorch.com

Left Google Docs Spreadsheet offers fewer charts than Excel (below), but several still hurt more than they help. The options that are boxed out in red are the ones I’d avoid; the grey ones are duplicates

Make it readable

Focus on what makes data readable. How do you tell your story without words, only using the basic, atomic types of charts and graphs? First, work with the well-established tools, such as bar charts or line graphs. Only once you understand these inside-out can you move on to more complex designs. Most charting programs offer more options than you need. Let’s look at two popular choices, Excel and Google Docs Spreadsheet. Both enable you to convert a boring table of data into a much better chart. These charts enable your readers to get a thorough grasp of the meaning behind the data. Unfortunately, due to feature creep, competition or bad habits, many of the charts and graphs they offer actually subtract from the message you’re trying to convey to your readers. To the right is a screenshot of all the possible chart types in Excel. I’ve boxed out all of the charts that I’d advise against using in red. The ones boxed out in light grey are duplicates, which aren’t necessary as an option. The light green boxes are very rare and specific to special fields. Most people will never use or need to see these as options.

Below Excel offers far more chart and graph options than you need. Those boxed out in green are highly specialised to narrow fields

.net november 2010 59

next>

.net visualisation Geolocation data More and more services are producing and using geographically tagged data. So what’s the best way to visualise this kind of data?

Goals graphic Using the Guardian’s Datablog (www.guardian.co.uk/news/datablog) to illustrate how many goals each country scored in this year’s World Cup, compared to how many they conceded

cons with all of these approaches, so each must be looked at based on your needs. The <img> element locks up the data in pixels and lacks interactivity. Other plug-in technologies such as Flash and Java/Prototype work well, but are dependent on several other factors, such as device support. Plug-ins are better than <img>, as you can tab to elements and potentially export the source data, but custom solutions can be expensive.

“Next time you visualise data, remember that your main goal is to tell a story” Recently, there have been two new contenders for displaying charts and graphs for the web. The newest is the <canvas> element. It’s part of HTML5, but works in most major browsers now and enables you to programmatically draw via JavaScript onto the canvas area. This means you can create animations, graphs and even 3D objects. An older solution, but one that’s now becoming viable, is Scalable Vector Graphics (SVG). The major difference between <canvas> and SVG is in how they’re structured. The <canvas> tag is a single element in the Document Object Model (DOM) where all your graphics are drawn. The browser has no idea what’s inside that element. Individual lines, arcs and graphics aren’t identifiable or clickable, which makes it harder to interact with the output. SVGs, though, are elements in the

<prev

.net november 2010

DOM tree, so you can manipulate every last item, adding click events and callbacks. The downside of having everything as a DOM element is that things can get big quickly! The <canvas> element can be much faster in this respect, because it removes all the hard work of keeping track of the DOM tree, by ‘flattening’ all the graphics down to a single element.

Graph types

Even after you’ve chosen how you’ll be displaying your data, you still need to know which type of graph best tells your story. The go-to chart is the bar chart, which can display plenty of types of data in a format that’s easy to understand. The pie chart is often best avoided; it doesn’t do a great job of making comparisons and too many wedges can make it impossible to understand. If you’re plotting data over time, line graphs make it very clear. Beyond these, there are hundreds of other types of graph, and it takes a long time to fully understand which will work best. I tried to explain just a few chart types in my book, Designing With Data (designingwithdata.com) but it only scratches the surface. If you really want to understand all the possibilities, you just need to sit down and try them using real data. Sites such as the Guardian’s Datablog (www. guardian.co.uk/news/datablog) offer great data sets to play with. Using some information from the recent World Cup, we examined how many goals each country scored compared to how many they conceded (above). Even football is full of beautiful statistics if you know how to tease out the data. Next time you sit down to illustrate some data, just remember that your main goal is to tell a story. We’ve all had the experience of looking in awe at a beautiful visualisation and saying: “This is incredible, but what does it mean?” At that point,

Some of the obvious examples place information directly onto an existing map. By overlaying data, it’s possible to create heat-map style visualisations. For example, Emotion Mapping (biomapping.net), a concept by Christian Nold, takes stress data about a region and overlays it onto a map to find and visualise the high and low stress areas of a city. The idea is that if you’re new to or visiting the area, you might want to relax – and the map can direct you to calming areas you normally wouldn’t expect. If you can’t produce your own data, there are plenty of other sources out there for you to use. The Flickr API enables you to search for photos within a given latitude and longitude (www.flickr.com/services/api/flickr. photos.search.html). There are also services to search Wikipedia articles within a given area (www.geonames.org/export/wikipediawebservice.html). Geonames (www. geonames.org), meanwhile, contains latitude and longitude data for plenty of geographic elements, such as rivers, mountains, towns, farms, and so on. You can download this information from the website. To get a quick feel for the data, you can import the CSV file into a spreadsheet and see the data as a list, including the latitude and longitude. Using these two columns, you can quickly plot it to make sure the data looks okay – Excel can handle up to 32,000 data points in its scatter plot chart. Making a scatter plot of latitudes and longitudes can help you quickly get a feel for the information and see what’s available.

Isle be blowed The scaling and axes were modified so data points created the shape of Great Britain

it becomes an art piece rather than an informative graphic based on data-driven design. Your goal is to convey meaning. This doesn’t preclude a beautiful design, but if it’s not comprehensible, it’s not useful. You need to choose the right tool for the job: sometimes, simplicity is what’s needed. Want to get your data visualisations peerreviewed? Share your work at forum.netmag.co.uk

I need to show my friends it’s “ more than just dressing up! ” Hostway specialise in helping all kinds of people get online, whatever they want to achieve.

Whether you’re starting out or more experienced, we’ll provide you with a hosting solution that matches your needs (however unusual!), at a price you can afford. And we’ll make sure there is always someone on the other end of the line to help you when you need it. 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

showcase

This month’s selection of sublime design and creative opinion (below) Focus_ on/Megamenus p74 Matthew Smith – “A mega-menu can be used to promote dynamic content”

(above) Profile/nclud p72 Alex Giron – “HTML5 and CSS3 are changing the role of the web designer”

(above) Gallery/ CMS p70 Ryan Taylor – “Maintainability is a vital consideration when selecting a CMS to use”

This month >

Gallery

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

(left) Gallery/CSS p66 Matt Brown – “I was curious how well this code would work with an HTML5 doctype”

Proﬁle/nclud

Boutique agency nclud is known for its quality UI design. Oliver Lindberg speaks to co-founders Alex Giron and Martin Ringlein about HTML5, CSS3 and playing Mario Kart

Focus–on/ Mega-menus

Don’t miss an issue >

Expand your mind and your navigation with a healthy dose of these big boys, suggests Matthew Smith

Opinion/Crafting web design education

Teaching web design should integrate theory and practice, say Nicklas Persson and Christopher Murphy, aka ‘The Standardistas’

y: Subscribe toda 40 ge pa to turn

(above) Opinion/Crafting web design education p76 Nicklas Persson & Christopher Murphy – “Lecturers should be actively involved in the industry”

.net november 2010

.net showcase gallery

highlights… 65

Mobile > 9web’s multiplatform showcase, GMG Radio’s audio streaming site, and the mobile version of the BBC’s iPlayer

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

Bruce Lawson HTML5 Bruce evangelises open standards for Opera (opera.com/developer), with particular interest in HTML5, widgets and accessibility. He’s one of the HTML5 Doctors (html5doctor. com) and co-wrote Introducing HTML5 with Remy Sharp. brucelawson.co.uk

Paul Wyatt Plug-ins Paul Wyatt is an award-winning digital designer who specialises in design for the internet and motion graphics. His clients include Adobe, Virgin Media, PlayStation, 2Entertain, D&AD, the BBC, Smirnoff and British Airways. paulwyatt.co.uk

.net november 2010

CSS > Simon Foster’s simple infographic, Mike Rundle’s interface design blog, and Matt Brown’s coding challenge website

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

Paul Irish and Divya Manian’s HTML5 resource, Trygve Lie’s audio player, and Josh Duck’s reference table

Plug-ins > Daniel Ruston’s Flash-based art project, Tribal DDB’s AR campaign, and the latest from the California Milk Processor Board

Ryan Taylor CMS Ryan is a designer and front-end developer working for Headscape. He’s obsessed with clean, efficient and semantic HTML, CSS and jQuery (his favourite framework) and has a special interest in making design and CMSes work well together. www.headscape.co.uk

JavaScript > deviantART’s new online art app, John Resig’s jQuery framework, and SimpleGeo and Stamen’s maps

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 > Three websites built on popular CMSes: Armitage Online, Executive Edits, and Circa

.net showcase gallery

gallery Mobile

Nick Francis bringing all of the content on the desktop site to the mobile browser in a very intuitive, no-nonsense format. Users can easily find news, galleries, contests, and of course, online streaming. Phill Clark of Rock Radio’s parent company GMG Radio summarises its mobile strategy. “We took the decision to build mobile versions of our websites to ensure our audience could access all of our stations, including Rock Radio, wherever they were and regardless of device.”

BBC iPlayer

Mobile site of the month

9web

(1-2) London-based 9web (m.9web.co.uk) is a web design studio with a great-looking mobile site. You can tell that a lot of time went into crafting its mobile experience thanks to touches such as the CSS3 text shadows, a quick navigation bar in the footer and integration with CMS to keep the news and portfolio sections up-to-date at all times. The company faced the problem that many web developers face right now – namely, a lack of true mobile experience it can market to potential clients. “We knew we could do it – we just hadn’t had many opportunities to deliver on mobile for our client base,” says Darren Appleby, the company’s operations manager. “Obviously, we’ll be taking our own site as a case study to show off moving forward.” Visit 9web’s website and click the Mobile link at the top right to see its case study and pitch to clients about its mobile capabilities. It’s very well done, and worth taking some time to explore. The 9web team also took into account how the website would be displayed on non-smartphone devices. It degrades nicely, presenting a more basic experience, but still has the same content. “Rather than build an iPhone site and calling it ‘mobile’, we focused on creating a site for all internet-capable handsets,” explains developer Matt Bee.

GMG Radio

(4) As you’re probably already aware, the BBC’s iPlayer (bbc.co.uk/mobile/iplayer) is essentially a website that’s dedicated to putting the last seven days of BBC TV and radio content on the internet for around-the-clock access. The desktop site design is well-implemented for mobile use as well, with the pink-and-black colour scheme giving the site a distinctive feel. One good feature is the use of Favourites. Simply mark a show as a Favourite and all the most recent episodes are just a click away. Your previous viewing history is also listed in Favourites just in case you ever want to refer back to a programme.

(3) Rock Radio (m.rockradio.co.uk) is exactly what the name would lead you to expect, in case you haven’t heard of it before, and it totally gets mobile. Not only has it got a website that’s optimised for several mobile browsers, but it also has native iOS apps. All of which means its audience can tune in just about anywhere. I like its website not so much for the design decisions made, but because it does a great job of

“We knew we could do it – we just hadn’t had many opportunities to deliver” Darren Appleby

.net november 2010 65

next>

.net showcase gallery

gallery CSS

Inayaili de León

“Recently I’ve been really getting into the presentation of information using infographics” Simon Foster

CSS site of the month

For The Record

(1) Simon Foster (www.simonfosterdesign.com) is a freelance web designer based in London. His experimental website For The Record (www. fortherecord.simonfosterdesign.com) is an infographical look into “what’s left” of his 7-inch singles. Inspired by David McCandless’s book Information is Beautiful, Foster gathered some statistics from his collection and used them to explore and play with CSS in a purely visual manner, relegating semantics to a secondary level. The restrained amount of data Foster chooses to display makes For The Record a pleasant discovery, and illustrates how sometimes CSS seems to exist just to have fun with. To achieve the effects for each section, Foster used a combination of unordered list items and nth-of-type selectors, attributing each a different percentage and background or border colours — the simplicity of the CSS is amazing. Apart from advanced CSS selectors, the website also makes good use of @font-face, border-radius, and the often forgotten but useful CSS multi-columns

properties. “Recently I’ve been really getting into the presentation and aesthetics of information using infographics,” says Foster, “and I wanted to see how I could transfer this into CSS.”

radius, box-shadow, transitions, RGBA colours, and many other features to achieve his goal of creating a website where content, design and code culminate in a stunning result.

Flyosity

10K Apart

(2) Flyosity (flyosity.com) is a blog by designer and developer Mike Rundle that focuses on subjects related to how to design and building “beautiful software”. One of his first objectives was for its design and markup to be cutting-edge. “I spent a lot of time agonising over the best organisation of the HTML5 markup, tweaking animation timings until they were just right, and spending time on the typography,” Rundle explains. The website makes good use of the latest CSS3 techniques to add subtleties that would otherwise be difficult to replicate, and that make the difference between a nice design and a beautiful, refined one. Rundle uses child selectors, border-

.net november 2010

(3-4) The 10K Apart challenge (10k.aneventapart. com), promoted by MIX Online and An Event Apart, challenged designers to create a web application using less than 10K, encouraging the participants to use the latest standards, such as HTML5, and to produce apps that work on the latest browsers. The website, designed and developed by thingsthatarebrown (thingsthatarebrown.com), was coded using the 960gs CSS framework. “I’ve used 960gs for as long as it’s been around, and was curious how well this code would work with an HTML5 doctype,” says Matt Brown, the designer. The result is a refreshing design, with clever use of colour, and a grid that is both bold and elegant.

.net showcase gallery

gallery HTML5

Bruce Lawson

Radio Player

(3) Radio Player (apps.trygve-lie.com/radio/widget) might not win any prizes for its looks, but it’s of great use to HTML5 multimedia developers. It’s the personal project of Trygve Lie (www. trygve-lie.com), and plays streaming audio from the radio stations of the Norwegian Broadcasting Corporation (where Lie works), across all browsers including old versions of Internet Explorer, without any fuss or bother. It’s built with jPlayer (showcased in the first HTML5 gallery in issue 204), which is itself built on jQuery. Lie has posted the code onto Github at github.com/trygve-lie/widget-radio-player, and has written up a detailed article about how all the code works at dev.opera.com/articles/view/html5-audioradio-player.

HTML5 site of the month

HTML5 Boilerplate

“Everyone is encouraged to look into and delete whatever they ﬁnd unnecessary” Divya Manian

(1-2) HTML5 Boilerplate (html5boilerplate.com) by Paul Irish (see Q&A, page 18) and Divya Manian is a great resource for people making production-quality HTML5 sites. It doesn’t teach you how to write HTML5 (although there are some excellent books available to do that … ahem), but it does bring together a huge amount of best practice advice. Want links to jQuery in the Google CDN, but with fallback links to your server in case the CDN server is down? Check. Want iOS, Android, Opera Mobile-adaptable markup and CSS skeleton? Check. Need an .htaccess file that serves HTML5 video with the right MIME types? Check. In fact, you can think of this site as a checklist that does the work for you. Of course, like any checklist that tries to be exhaustive, you’ll find some of it is redundant. “It is quite exhaustive,” Manian says, “so everyone is encouraged to look into and delete whatever they find unnecessary. In general, Boilerplate helps hugely even if you’re doing HTML4 or XHTML1.1 development, but it’s got a few more tricks when it comes to HTML5.” There’s also a useful CSS framework, including an HTML5 reset style sheet from my fellow HTML5 Doctor and .net columnist Richard Clark, which incorporates lots of other useful stuff such as classes for clearfix and giving content just to screen readers. I thoroughly recommend watching developer Paul Irish’s video tutorial before starting to use it at net.tutsplus.com/tutorials/html-csstechniques/the-official-guide-to-html5-boilerplate/. Plus there’s still more to come, explains Manian. “We are working to port it to Sass/Haml, but we’re primarily excited about creating a build script that will automate best practices such as minifying JavaScript/CSS, compressing PNGs, and so on.”

Periodic Table of the Elements

(4) I very much like both the taxonomic diligence and visual design of Josh Duck’s periodic table (joshduck.com/periodic-table.html), which shows the 104 elements currently in the HTML5 working draft. Its current incarnation lacks keyboard access, meaning that the explanations of the individual elements aren’t accessible for keyboard users. An easy way to get around this would have been to contain each element that ‘opens’ on :hover in <button> elements (or at a pinch, <a> elements that go nowhere) because links and form elements are focusable by the keyboard. Or Duck could even use the new HTML5 <details> elements and fake support with Remy Sharp’s script at gist. github.com/370590, and therefore ensure full accessibility of his content.

.net november 2010 67

next>

.net showcase gallery

gallery JavaScript

Remy Sharp

JavaScript site of the month 3

Muro

(1-3) deviantART has released several online drawing apps using JavaScript and the HTML5 canvas element. Its latest release is Muro (muro. deviantart.com), an online drawing art app. What makes Muro stand out from the existing drawing web apps is that you can dive right in. There’s no need to register – just open your browser and start painting (it works on the iPad too). You then have a selection of paint brushes that can be used to create all kinds of unique effects, along with selecting colours, opacity, weight and so on. The two features that make this app a winner for me are the Pro mode, which enables you to

“You can group points into clusters and drop scaled gradients on to locations” Andrew Mager

manage layers (something we haven’t seen in canvas-based drawing apps until now), and the filters (sharpen, blur, add noise and so on), which you can apply to individual layers if desired. Naturally, you can export the drawing to PNG and submit (if you’re feeling brave) to the deviantART Gallery.

jQuery Mobile

(4) jQuery Mobile (jquerymobile.com) is John Resig’s touch-optimised web framework for smartphones and tablet PCs. The project is still a work in-progress, but is expected to be finished towards the end of the year. What’s exciting about this project is that there won’t be a separate jQuery library for mobile use. The aim is to have one single jQuery library that supports both desktop and mobile platforms. The elements will be compatible with all smartphones (not just iPhones) as well as tablet PCs. This is definitely one to watch. If you’re already familiar with the way jQuery and jQuery UI work, then it’s likely you’ll be banging out mobile projects in a matter of hours with jQuery Mobile.

.net november 2010

Polymaps

(5) Google Maps can sometimes feel tired and old. But Polymaps (polymaps.org), a free JavaScript library by SimpleGeo and Stamen, makes it easy to create your own style of map with your own custom overlays, enabling you to really own the look and feel of your map. You can add SVG markers with your datasets, and add styles to them using CSS. The SVG marker is a scalable vector, so zooming into the map automatically scales the marker up to the same zoom level as the map. This means all sizes remain relative to the size of your map – again, something that can’t be done easily using Google Maps. At github.com/simplegeo/polymaps there’s a series of example maps you can use for your own project. “Some are straightforward, letting you do things like group points into clusters and drop scaled gradients on to map locations,” explains SimpleGeo’s Andrew Mager. “Others are more robust, letting you do things like change which direction is north by rotating the map and visualise the quality of street surfaces in San Francisco.”

.net showcase gallery

gallery Plug-ins

Paul Wyatt

“I used the various Flash ActionScript APIs to call in the data”

Plug-ins site of the month

Daniel Ruston

Look to the Moon

VW Augmented Reality

(1-2) My inner pragmatist jumps for his high horse when a website describes itself as an “online art project”. It’s because I’ve spent too long on projects figuring out “key benefits for users” and how to “maximise the real estate of the homepage”. But pragmatism can be dull. What’s wrong with letting the user wander around a little aimlessly? In a real world art exhibit you wouldn’t be forced to experience individual art works in a certain order, so why should you on the internet? Look to the Moon (looktothemoon.com) is a beautiful, technically sound website. It acts as an observation platform that monitors and collates online ephemera such as images, words and creations being shared in the digital world. Creator Daniel Ruston calls it “a place to just play, wonder, and reflect what an abstract place the internet is, and to challenge our perspective of the medium”. The site was built using Flash and the myriad libraries such as Papervision 3D, Box2DAS3 and SWX. “I used the various Flash ActionScript APIs of Flickr, YouTube, and Twitter to call in the data,” explains Ruston. Turn off your inner pragmatist and visit this beautiful, inspiring website.

Got Milk?

(3) DDB London and Proximity London’s augmented reality campaign for the Volkswagen Golf Match (www.volkswagen.co.uk/golfmatch3d) delivers an immersive car experience that’s only lacking the smell of the interior and the feel of the seats. Tribal DDB was briefed to give Volkswagen consumers a better experience online, where they can learn about the car from the comfort of their own home. Victoria Buchannan, creative director at Tribal DDB, explains that this campaign isn’t using “AR for the sake of AR – it has a practical application of the technology, which is very useful for prospects”.

(4) “I just discovered an amazing ‘superdrink’, one that can do everything from helping to rebuild muscles to helping to reduce symptoms of PMS.” So says the email from the latest website iteration of the “Got Milk?” campaign for the California Milk Processor Board (www.gotmilk.com). It’s all about the promotion of drinking cow’s milk, which – unless you’re lactose intolerant – is where it’s at. This quirky and funny slice of Flash 3D interactivity is informative, engaging and that horrifically over-used word – immersive. I for one will be giving up my rum and Coke and settling for a glass of milk each morning instead.

.net november 2010 69

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

Ryan Taylor

CMS site of the month

Armitage Online

(1-2) Tackling your own agency’s website can be a daunting task when you consider all the competition out there. But Ryan Downie, creative designer for Armitage Online (armitageonline.co.uk), has risen to the challenge with his bold, simple approach. For a busy agency, keeping your website up to date can often take a back seat to more important client work. To help the agency in this regard, Armitage is using ExpressionEngine (expressionengine.com) for its extensive feature set and robustness. “I think the best feature we use it for is the way we portray our work,” says Downie. Downie has designed the portfolio to show three overlapping screenshots of a client’s website. ExpressionEngine does all the legwork for them, resizing, cropping and placing the images in certain locations automatically. Maintainability is a vital consideration when selecting a CMS to use, and ExpressionEngine is ideal in this respect.

Executive Edits

.net november 2010

Stuart Hobday

and build custom templates within WordPress, it allowed us to be truly uncompromising with the graphic design,” says Mosig. “The beauty of WordPress is that it allows you to create complex designs, which are ultimately maintained by a client with very few technical skills.”

Circa

(4) Paul Mosig from Racket (racket.net.au) selected WordPress to power the website for Circa (circa. com.au), a restaurant situated in Melbourne, Australia. Paul has captured the spirit and distinct feel of the restaurant’s decor to create an equally distinct online presence. More and more businesses are beginning to promote themselves on the web, and restaurants are no exception. Circa shares menus, recipes, reviews and special offers online. The customer’s dining experience is of the utmost importance to Circa. The restaurant wanted this philosophy to come across on its website. “Because we were able to clearly define the required content types

“A percentage of the work is done for you, keeping the cost down for the client”

(3) Executive Edits (executiveedits.com) is a life and culture blog with a minimal layout that marries impressive photography with one-to-one personal interviews. It was built using Squarespace (squarespace.com), which creative director Stuart Hobday has found to be “reliable, fast and offering excellent customer service”. “The beauty of a CMS platform such as Squarespace,” says Hobday, “is that a percentage of the work is already done for you, thus keeping the cost down for the client and enabling the designer to focus on the layout.” Squarespace is a hosted web service, so it can deliver performance and stability that other, selfhosted CMSes can’t. This can also cut down on your client’s hosting costs because they needn’t pay for separate web space and an additional CMS licence.

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 in chief 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 Matthew Smith URL twitter.com/squaredeye 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 showcase proﬁle

profile

nclud Boutique agency nclud is known for its quality UI design. Oliver Lindberg speaks to co-founders Alex Giron and Martin Ringlein about HTML5, CSS3 and playing Mario Kart

www.nclud.com Agency location Washington, DC Team Six Expertise Creative web design Established 2007 Clients Mashable, Apple, Washington Post, Politico, Discovery, Oracle, Puma, Marriott, Ogilvy

recognised by leaders in our industry. I’d say the most important thing that has happened over these past few years is that we’ve been able to develop our internal culture and identity as an agency. .net: Which areas do you specialise in? AG: Our core focus is and has always been UI design, from information architecture to front-end (CSS/HTML/JavaScript) and iPhone development. We love designing websites and mobile interfaces that are easy to use and have a distinct and beautiful UI.

Q&A .net: How was nclud founded and how did you assemble the team? AG: nclud was officially formed in January 2007. I’d been thinking of starting a company for a few months prior to that and eventually reached out to Martin and asked him if he wanted to set up a web agency with me. We’d worked together previously and both had a very similar philosophy for what web design is and how a web agency should be run. He didn’t hesitate and nclud was born. We hired a senior developer a few months later. We needed someone who complemented my and Martin’s skills, as we’re both very design-centric. We’ve since hired three other people, ranging from iPhone app developers to designers/front-end developers. Check out this fun slideshow on why we started the company: slideshare.net/mringlein/ nclud-why-we-started-it-opt.

.net: Can you explain your five-step process? AG: We interview the client to define a project and understand goals; we make sure we understand a site’s content/structure; we do creative explorations and design based on set goals and understanding of the content; we then go into the technical design – building templates and/or an app; and finally we integrate those templates into a CMS and/or submit the app to the app store. .net: How important are side projects – for example, your CSS3 solar system and CSS Beauty – for attracting new clients? AG: We encourage everyone to always try new technologies, ideas and side projects. It’s a vital part of our culture. We believe 100 per cent it’s the only way to stay ahead of the curve and become a better designer/developer. The fact that we get business from it is a bonus: we don’t do it for that, we do it because it makes us better.

.net: How has the agency developed over the last three and a half years? AG: We’ve gone from small projects to much larger projects and more recognisable brands. We’ve been able to establish ourselves as a quality design agency regionally and nationally and have been

.net: On your site you highlight the importance of talent. What do you look for in new recruits? AG: We look for like-minded individuals. We look for designers or developers that are hungry to learn and passionate about what they do. We look for those that are involved in the community, those that are actively blogging about new techniques or trying new ideas. We also look for startup-minded people ready to bring new ideas/concepts to the table and always willing to try something new. .net: You offer your employees unlimited vacation time and constantly seem to be playing Mario Kart … That’s pretty unusual, isn’t it? AG: We like to have fun. While some might see this as a distraction, we see it as a way to keep the mind fresh. As long as our team is comfortable and happy, we produce better results.

L-r: Martin Ringlein (co-founder and senior consultant), Ian Storm Taylor (web designer), Lauren Moon (web designer), Alex Giron (co-founder and creative director), Brandon Jones (senior application developer), David DeSandro (web designer)

.net november 2010

.net: You seem to be big fans of HTML5 and CSS3. How are these techniques changing web design? MR: Advancements in programming languages such as HTML5 and CSS3 aren’t changing web design as much as they’re changing the role of

.net showcase proﬁle

“We believe that if you can dream it, we can build it” 1

Martin Ringlein

the web designer. These advancements come with programmatic complexity, further blurring the line between designer and developer that has traditionally been labelled as the ‘front-end’. We’ve always believed that if you can dream it, we can build it; removing the concept of design limitations. The reality is that we do design within the limitations of our canvas. However, HTML5 and CSS3 help us paint a better picture – one that’s cleaner, more lightweight and less dependent on plug-ins, hacks and filters. The evolution of HTML5 and CSS3 is helping us better separate the visual from the functional. .net: What are the biggest challenges mobile web design is currently facing? MR: The biggest challenges are very similar to those we faced during the browser wars of the late 90’s – a lack of standards. We have a plethora of device choices with varying screen dimensions, resolutions, processor and internet speeds, as well as inconsistent browser support for advancements in HTML5, CSS3 and even technologies such as Flash; for better or worse. .net: Any exciting projects you can tell us about? MR: We’re always working with the team at Mashable and have some exciting projects in the works for some other publishers such as Men’s Health and Al Jazeera; we’ve just helped launch the iPhone app for both Politico and The Washington Post. We also have an exciting app launching soon for Oracle and a destination portal with Marriott. .net: What’s the most bizarre request you’ve ever had from a client? MR: We keep getting these “Make the logo bigger” or “I want it to look just like Facebook” requests. l

(1-2) Partnering with ICMARC, our goal was simple: to dream big. From campaign conception to technical deployment, we worked on all aspects of the ambitious financial marketing initiative in reaching its new young demographic 6 (dreambigsite.com). From leveraging social media trends to advancing technologies, an integrated and social-aware publishing outlet was created from scratch. (3) Pete Cashmore and the Mashable team reached out to us as strategic partners for their upcoming redesign initiative (mashable. com). They sought us out because of our sense of style, experience with online publications as well as our experience

with the unique intricacies in working with hightrafficked WordPressbased websites. (4) Working intimately with the passionate people over at the Earth Day Network, as well as collaborating with our friends at ForumOne Communications, a new and exciting visual experience was designed for an overwhelmingly influential movement, Earth Day (earthday.org). Our primary focus was on designing the visual userinterface for the EarthDay. org redesign initiative. (5-6) The passionate and innovative team at Ecofusion partnered with nclud on the redesign of emPivot.com, the first online network to bring together the wide range

of user-generated and premium video content related to the environment. A visual aesthetic and userexperience was created that properly conveyed the nature of their empowering content to their growing dynamic and passionate audience. (7) The VentureBeat team first reached out to us with a bit of a simple task to help update their website (venturebeat. com). However, what started out as a simple redesign quickly evolved into a much more complex project, more of a renovation than a redesign. The goal was to accomplish the impossible; to completely re-architect, redesign and redevelop the publication from the ground up, within 10 days!

.net november 2010 73

.net showcase focus_on

ffocus_on

Mega-menus Expand your mind and your navigation with a healthy dose of these big boys, suggests Matthew Smith Navigation is one of the most crucial elements of any interactive design. Despite the strong evidence that scrolling is now acceptable, web real-estate is still a tangible issue. Any business with a decent amount of content strives to give visitors ample opportunity to see a broad overview of the site in a compact space. This is where the mega-menu is a powerful interface tool. This type of navigation pattern is made to help the user find content, not just boost SEO or pacify the insistent CEO who wants more in less space. It’s best to limit mega-menus to two-layer navigation, adding a third layer only if you can avoid crowding the design or cramping readability. In most cases, limit the height to 325px so it doesn’t go over the edge of the page on small monitors. Traditional navigation is a window of your sitemap, whereas the mega-menu can expand that view significantly. It’s not just for your page links, though: a mega-menu can be used to promote dynamic content such as recent articles, video thumbnails, or even a contact form. There are a few points to note about megamenus. The famed usability expert Jakob Nielsen has some strong recommendations and a few warnings about their use (bit.ly/nielsenmenu). I think the most important points are: 1) Keep a clear hierarchy using contrast, typography and ample white space. 2) Make all headings clickable and be absolutely clear what’s just text. 3) Use a “hover with intent” technique so you don’t frustrate mouse-moving users. 4) Never depend on your mega-menu; this big boy needs to gracefully degrade so that your mobile browsing or JavaScripthating peeps can properly seek and find. ●

Obsessed with creative inspiration (see his site patterntap.com) and attention to detail (see his work at squaredeye. com), Matthew loves helping designers capture what inspires them.

“A mega-menu is to help the user ﬁnd content, not just boost SEO” Matthew Smith

.net november 2010

(1) Telecomms company TTI uses a mega-menu on its site (www.tti-telecom. com) to display a product listing with thumbnails and descriptions. It also includes a quick search tool and product highlight at the bottom of the drop-down. (2) A great example of the “hover with intent” technique is found at the website of safety equipment retailer Simplified Safety (simplifiedsafety.com). Simply moving your mouse across the navigation doesn’t instantly pop up the mega-menu, which helps avoid unnecessary frustration. It also uses a third-level navigation structure wisely, making sure it pulls out the link lists into easily scannable sections. (3) One of my favourite mega-menus is at the new Reuters

site (reuters.com), which uses it to showcase articles and opinion pieces, complemented by headshots and a simple link list. Check out the solid hierarchy and effective use of white space. (4) Megamenus aren’t just for lists of links. The site of discount retailer Target (target.com) uses them to hide away the baby and wedding list service logins behind a link on the homepage. The pop-up menu that appears when you hover over it includes the fields you type your details into. (5) Apple. com uses a mega-menu for an alternative purpose: search results. Each section is clearly defined with well-styled headings. Every link has a recognisable thumbnail to aid users in their quest for the latest Mac gear or information.

.net showcase opinion

Nicklas Persson and Christopher Murphy on …

Crafting web design education

Teaching web design should integrate theory and practice, say Nicklas Persson and Christopher Murphy of the University of Ulster, aka ‘The Standardistas’ We work in a relatively young industry, one that’s moving fast while trying to find its feet. How can we, as educators, help move our industry forward and improve the state of web design education?

Teaching principles

While a university’s role has traditionally been to focus on equipping graduates with the fundamental principles of a specialism, it’s clear that when it comes to teaching the craft of web design, we face a different challenge. Equipping students with knowledge of design principles is essential, but we must also give them a matching understanding of contemporary skills, ensuring they have the ability to craft well-formed HTML and CSS. Bearing this in mind, it’s clear that there’s a demand for lecturers who can convey how design and craft go hand-in-hand. Ideally, lecturers should be actively involved in the industry, sharing their time between teaching

“It’s easy to become overwhelmed by academia’s glacial pace of change” 76

.net november 2010

and working as practitioners and bridging the theory-practice divide. While this isn’t always possible, collaboration with industry professionals should always be achieved.

Integration

Just as a computer science course with some bolted-on design modules doesn’t work, a communication design course with some boltedon web modules doesn’t work. Integration is key. We’re probably not alone in running a course that’s split into design and technical aspects. In theory, our students are taught design by staff from our School of Art and Design, and programming by our School of Computing and Mathematics. While we produce some extremely talented graduates, we believe this model of two halves is flawed. Delivering the design and programming parts separately is, in our opinion, a mistake. Anyone who works in this industry knows that there is no hard and fast divide between design and development. We believe we must reflect this in contemporary approaches to teaching web design. As designers first and foremost, we may be biased here, but we believe that web design should be taught primarily within a design context. It’s important to stress, however, that emphasising the design context does not mean simply leaving the technical side to someone else. This approach – though sadly still prevalent – is a completely outdated one.

There are areas of overlap between traditional graphic design and design for the web – information hierarchy, grid systems and typography, to name just three – but equally there are areas that require a specialist understanding. The creation of rich, immersive experiences, the crafting of beautiful user interfaces and an awareness of the psychology of interaction are all examples of skills that require such knowledge.

Into practice

From academia’s ivory towers, it’s easy to become overwhelmed by a glacial pace of change and leaden level of bureaucracy. Universities are slow; the web design industry moves at considerable speed. How can we keep up with this rapid pace, ensuring our courses are fit for purpose? One technique is to draw from the tools and techniques we teach every day by actually employing them ourselves; we need to practise what we preach. Continuous learning is an integral part of our industry; it needs to be an integral part of how we teach. It’s an exciting industry to work in, and if we look to it for lessons, we can considerably improve our teaching for the benefit of all. Nicklas Persson and Christopher Murphy, better known as The Standardistas (www.webstandardistas. com), teach interactive design at the University of Ulster, Belfast, where they’ve been active in promoting a web standards-based curriculum.

.net technique

technique Projects and advice for web builders

(below) Build-off/News sites p96 Andy Crawford – “I strive for an individual and

unique look. One way I achieve this is to tailor brush sets in Photoshop”

(above) Makeover/www. ratemyplace.org.uk p102 Yaron Schoen – “The

site’s three-column grid made me feel uneasy”

tutorials > 78

CSS/progressively enhance a menu

How to make your pop-up menus more interesting and fun for users of capable browsers

82 ntial CD On your esse for

CSS/speed up site builds with OOCSS

Building sites in CSS can be repetitive and time-consuming. The ObjectOriented CSS framework offers a nifty shortcut, explains Nicole Sullivan

CSS that scales with the biggest sites on the web”

Mobile/build an Android app

Get your app onto an Android phone with Appcelerator Titanium. Robert Reinhard explains how

need All the files you orials are in this issue’s tut folder the Mag files

(above) CSS/speed up site builds with OOCSS p86 Nicole Sullivan – “OOCSS is a philosophy: a way to build

articles > 96 100

Opinion

The IE9 beta might be out, but IE6, 7 and 8 still have trouble rendering CSS3. Addy Osmani introduces CSS3Pie

102

Makeover

104

How we built

Photoshop/create a social media icon

Bolivian web developer and graphic designer Alvaro Guzman explains how to create a cool RSS icon

Website build-off

This month, news sites

(above) Opinion/Take on IE with CSS3Pie p100 Addy Osmani – “Older browsers

will remain incompatible with CSS3 and HTML5”

Yaron Schoen comes up with a fresh and tasty look for a site about food safety inspections in Staffordshire

Michael Daley, Nick Stanhope and Alexander Ivanov explain how www.historypin.com was created

.net november 2010

.net technique/css

CSS progressively enhance a menu

ntial CD Your esseed ed for this All the files ne found on tutorial can be . this issue’s CD

Make your pop-up menus more interesting and fun for users of capable browsers. Creative design and web development consultant Faruk Ate (farukat.es) explains how Knowledge needed Intermediate to advanced CSS Requires Modernizr Project time 30 minutes While support for most CSS3 techniques is currently limited to WebKit-based browsers, the day will come when they’re as widely implemented as CSS2.1 is today. To that end, my work philosophy is (to paraphrase Wayne Gretzky) that I design to where the web is going to be, not where it has been. With that in mind, let’s go through the process of making a simple CSS pop-out menu progressively more interesting and fun the more capable the reader’s browser is. To ensure fine control over the experience at every level we’ll use Modernizr (modernizr.com), a small, free JavaScript toolkit that I created with Paul Irish. Modernizr detects a browser’s capabilities and makes that info available to you, giving you the freedom of if/else conditions in your CSS and your JavaScript. First we have to write our markup. I’ve created a little site called My Favorite Sci-Fi Things and made some fancy sci-fi art to go with it. The menu

Modernizr and fallbacks Modernizr is not just useful for safely adding layers of progressive enhancement for your CSS; it’s also great for controlling the experience in older browsers and handling fallbacks, which is especially handy with all the new HTML5 features. For a long time, we’ve had to rely on JavaScript for fallbacks, but with Modernizr you can use both JavaScript and CSS and target browsers specifically on the features they lack. Modernizr encourages (and makes easier) the practice of feature detection, rather than the unreliable UserAgent sniffing we used to do. Though our tutorial doesn’t cover it, it would have been fairly trivial to leverage Modernizr in combination with other JavaScript libraries, toolkits and/or plug-ins to support certain features (such as border-radius) in older browsers.

consists of four parent items: Movies, Books, TV Shows and Games. Each parent then contains my personal top five of Sci-Fi ‘things’ in that category. The submenus are all hidden by default and will be triggered by a mouseover state, done entirely in CSS via the :hover property. Note: to be properly accessible, we should use JavaScript to also support keyboard focus (which can’t automatically be given to non-hyperlink elements, such as we’re doing). Techniques for making this menu better and more accessible with JavaScript are, alas, well beyond the scope of this tutorial.

Getting started

Before we write a single line of CSS, we should have a first draft of our structure (HTML) complete. Viewing it in the browser should yield a clean but richly semantic (and accessible) page. I’ll skip over the basic styling parts to the fully designed page with a fancy header graphic, some planet art as the content of the page, and our menu – with the submenus hidden. Let’s dive into the code now. You can follow along with the files on the CD or online at files.farukat.es/creations/css-menu/. First we’ll look at how the submenus are hidden; since each is a ‘top five’, I’m using an <ol> (ordered list) element for them: nav li.parent ol { left: 0; opacity: 0; margin: 0 0 0 -40px; padding: 0 30px 30px; position: absolute; width: 100px; } nav li.parent:hover ol { opacity: 1; z-index: 10; } Pretty standard fare styling, with an opacity of 0 to hide things. The negative left margin centres our menu to each 80 pixels-wide parent menu item, and the padding provides some leeway for the cursor to go out of bounds when we hover over the submenu. Without that padding our menu would feel jittery, forcing visitors to stay on the exact (visible) pixels of the submenu to avoid it disappearing. That wouldn’t be a great user experience, so we add some padding. The :hover state on the parent <li> element is where we make our submenu visible by changing its opacity to 1. You may wonder about that z-index:10. A more thorough search through our CSS will reveal that I’ve made the main content article z-index:1 and position:relative, which prevents the invisible menu from effectively sitting atop of our content and interfering with any mouseovers we may have in that area. However, because we want to smoothly fade the menus in and out later on – something that doesn’t work so well when you also toggle its z-index from 0 to 1 – we have to create some buffer for the z-index to animate.

.net november 2010

.net technique/css

Static view Our first screenshot shows the site fully designed and the submenus

Sliding items The CSS Animations are kicking in, making our submenu items slide in

Opacity Transition This screenshot better illustrates that the opacity Transition is at

Finished project Now our animation is complete, and we have the same result as browsers without support for CSS Animations. The effect is just nicer with support

A value of 10 works in our case, but your mileage may vary. Another thing is that the z-index will work in browsers where the opacity property doesn’t work (read: older versions of Internet Explorer), meaning we have a good fallback in place already. Now let’s add some CSS Transitions to make the submenus actually fade in and out. As you can see, we’ll transition not just the opacity property but also the z-index. That way, when our submenu fades out it won’t immediately fall behind the content again and fade out where we don’t see it! We’re adding the transition: property, complete with vendor-prefixed versions for each browser, to the original nav li.parent ol CSS rule.

By now, we have a functioning menu with submenus that show up when you hover over their parent menu item. In older IE browsers, only the z-index works. In newer browsers it will use opacity, and in all the modern browsers it will transition that opacity property for a nice fading effect. Already our menu is quite lovely, but we’re here today to really push the envelope, right? Right. Before diving into more code, we need to get a good understanding of the upcoming technique: CSS Animations. After all, there are subtle but very important differences between CSS Transitions and CSS Animations, and since we’re about to use both it’s important to understand them. CSS Transitions transition properties when the state of a property changes. This is often triggered by a state change on the element or one of its parents; think of a :hover or :focus action, or a class or id attribute change somewhere up the DOM tree. When a property is set to transition – as we’ve done by telling the browser to transition both opacity and z-index – it takes your parameters and automatically transitions from state A (old) to state B (new). An important takeaway here: Transitions only occur between states A and B, and that’s the extent of what they can do. You can fake multiple states using JavaScript and multiple CSS classes, but CSS Animations are a better solution.

hidden. Hovering over the space of the submenus doesn’t do anything – as planned

work at the same time, even though we didn’t specify that in our Animation

nav li.parent ol { /* existing CSS properties hidden for brevity; */ -webkit-transition: opacity .3s ease-out, z-index .2s linear; -moz-transition: opacity .3s ease-out, z-index .2s linear; -o-transition: opacity .3s ease-out, z-index .2s linear; transition: opacity .3s ease-out, z-index .2s linear; } Note: We’re using the same transition to fade our submenu in and out in this case; if you want a quick fade-in but a slow fade-out, your fade-in transition must be written into the :hover state rule, and your fade-out transition has to be added to the regular state CSS rule. Most people initially write the fade-in on the regular state and the fade-out into the :hover rule, producing the opposite effect of what they expect. This may seem unintuitive, so remember this: transitions may work over time, but state changes are immediate.

from two different directions for a cool and fun effect

Animations

Unlike Transitions, CSS Animations enable you to specify multiple keyframes, which you can think of as states but shouldn’t, as they’re separate from the states we usually mean when discussing browsers and CSS. Rather than being a transition between two state changes, CSS Animations live entirely on their own accord: you specify a set of keyframes (a minimum of two, start and finish) and give the animation a name. Then you tell an element to animate by assigning it that same name. Voilá: animations in your page, done in CSS.

.net november 2010

next>

.net technique/css The animations in CSS Animations don’t require a trigger: they occur the moment you assign the animation name. That said, it’s entirely possible to assign that animation name upon a state change such as :hover. When you do that, the animation will only run once you hover over the element, and not simply as soon as the page loads. To sum up: CSS Transitions are only a way to tell the browser to transition one or more properties when their state changes, while CSS Animations enable you to specify keyframes and a name to form a complete (and independent) animation, and you make that animation run simply by assigning the animation name to an element in a CSS rule. Whether you do the latter by a state change or not is up to you. You may wonder how Animations and Transitions interact or interfere with each other. The answer is relatively simple: Animations support the same properties as Transitions, which means that you can have a Transition set for a certain property (left: for example) which coincides with (part of) an animation you’re also executing on the same element. When this is the case, the Animation takes priority and overrides the Transition, but only for as long as the Animation is set to run. The instant your Animation is complete, the browser continues with whatever Transition is meant to be taking place, regardless of what the Animation might have been doing. That makes combining Transitions and Animations a tricky business that can result in very jarring, jumpy behaviours if you don’t know exactly what’s going to happen. I’ll illustrate this with an example. Say you have an absolutely positioned element and you’ve given it a transition for the left: and top: properties … #parent_box #my_elem { /* Some other properties */ left: 100px; position: absolute; top: 100px; transition: left 1s ease-out, top 1s ease-out; } … and you’ve created a hover state where the box is positioned elsewhere in its parent box: #parent_box:hover #my_elem { left: 200px; top: 200px; } Hovering over the parent container would create a one-second transition for our element, moving it diagonally to the south-east (see below). But what happens if we add this half-second animation to the mix?

@keyframes slide { 0% { left: 100px; } 100% { left: 0; } } #parent_box:hover #my_elem { left: 200px; top: 200px; animation: slide .5s ease-out; } The animation only animates the left: property. The Transition we specified for top: will occur in addition to the Animation, but the Animation will override the Transition for left: – that is, until the Animation is complete, after which the element will suddenly jump to the position it would have been if our Animation had never existed. The screengrab below explains the behaviour visually in three panels, in which you can see that the box will jump the very first fraction of a second after the Animation is complete. This behaviour is straightforward and expectable, so it shouldn’t come as a surprise to you. That said, it is important to keep this in mind, in case you experience strange, jumpy behaviour when dealing with Transitions and Animations. Why all this detailed information explaining a conflict-situation between Animations and Transitions? Because we’re going to take advantage of this behaviour. We’re going to make critical use of the fact that Animations override Transitions, and create a cool :hover transition that makes our submenu items go from A to B to C, where B is the on-hover state. This effect cannot be done with Transitions alone (at least, not without also using tricky JavaScript and multiple classes).

On the slide

Returning to our sci-fi site and menu shenanigans, I now want the submenu items to slide into place from one direction. Once you mouse out again, I want them to slide out, continuing in the direction they were heading. And for added seasoning, I want them to alternate directions. This will really bring these submenus to life – in the browsers that can, anyway. Let’s start by defining the two animations we’ll need. As mentioned earlier, for CSS Animations you write out keyframes. You do this with the @keyframes at-rule, followed by an identifier (an alphanumerical string that begins with a letter), followed by the actual keyframes blocks, which must include 0% and 100%. The words “from” and “to” also work, but all other keyframes in between must be specified as percentages. We’ll call our animations slideLTR (for left-to-right) and slideRTL and specify their keyframes accordingly: @keyframes slideLTR { 0% { left: -50px; } 100% { left: 0; } } @keyframes slideRTL { 0% { left: 50px; } 100% { left: 0; } } I’m showing only the standards-compliant version, but unfortunately – and this is something I think is truly a shame – you’ll need to write out the @keyframes with vendor-prefixes as well, like this:

Regular transition Hovering over the parent container creates a one-second transition for our element, moving it diagonally to the south-east

<prev

.net november 2010

Extra half-second Adding a half-second CSS Animation to our Transition makes the box jump once the animation is completed

.net technique/css Resources Where to ﬁnd out more

@-webkit-keyframes slideLTR { 0% { left: -50px; } 100% { left: 0; } } @-webkit-keyframes slideRTL { 0% { left: 50px; } 100% { left: 0; } }

Designing With Progressive Enhancement amzn.to/prog-enhance If you’re looking to get your head around progressive enhancement, this book is a great place to start. It provides both a clear guide to the principles and benefits of progressive enhancement, and a detailed exploration of putting it into practice, with useful examples that teach you how, where and when to implement specific coding and scripting.

This means that if you want to be properly forward-compatible, you’ll also have to specify your animations with @-moz-keyframes and @-o-keyframes, just like with other vendor-prefixed CSS.

The need for Modernizr

Now let’s see why we need Modernizr. As mentioned before, Modernizr detects the capabilities of the browser for CSS3 and HTML5 features (and related technologies), and makes the results of those tests available to us. One way it does this is by adding classes to the HTML element that indicate whether or not a certain feature is supported. In the case of CSS Animations, this means that the HTML element will have the class cssanimations (and many others) if the browser supports the feature, and the class no-cssanimations if not. Based on that, we can serve certain CSS rules and properties only to the browsers that actually support animations – notice, too, the better practice here of doing feature detection instead of sniffing for the UA, which you should never do. Our submenu items need some different properties when the browser supports CSS Animations, so let’s get to it:

HTML5 Boilerplate html5boilerplate.com A robust base ‘template’ of HTML, CSS and JavaScript files, Paul Irish and Divya Manian’s HTML5 Boilerplate is not a framework, but is full of tricks and tips to get your project off the ground (see page 67 for more).

.cssanimations nav ol li a { left: 50px; opacity: 0; position: relative; -webkit-transition: left .2s ease-out, opacity .2s ease-out, background-color .2s ease-out; -moz-transition: left .2s ease-out, opacity .2s ease-out, background-color .2s ease-out; -o-transition: left .2s ease-out, opacity .2s ease-out, background-color .2s ease-out; transition: left .2s ease-out, opacity .2s ease-out, background-color .2s ease-out; } The .cssanimations serves as a conditional, making only browsers that understand animations include these rules. Rules which, as you may well imagine, we wouldn’t want to be applied for browsers that can’t do what we’re about to do, because we’re positioning the items well to the right. As added seasoning we’ll make the even items in our list sit far to the left instead: .cssanimations nav ol li:nth-child(even) a { left: -50px; } You may have noticed that I haven’t introduced any animations yet. That’s because we don’t want the animation to happen on the regular state, which would make it run as soon as the page loads. No, we want it to trigger once the user hovers over the parent menu item. The transitions you see above are to handle the mouse-out stage, ie when the mouse leaves the submenu. To finish it, we’ll add the :hover states and the animations: .cssanimations nav li.parent:hover ol li a { left: 0; opacity: 1; -webkit-animation: slideLTR .3s ease-out; -moz-animation: slideLTR .3s ease-out; -o-animation: slideLTR .3s ease-out; animation: slideLTR .3s ease-out; } .cssanimations nav li.parent:hover ol li:nth-child(even) a { -webkit-animation: slideRTL .3s ease-out;

-moz-animation: slideRTL .3s ease-out; -o-animation: slideRTL .3s ease-out; animation: slideRTL .3s ease-out; } And there we have it! Now our menu items fade and slide in, alternating from left or right, and once the user mouses away, the items continue their respective direction whilst fading out again. Check it out in a WebKit browser for the full effect and marvel at our creation. One useful rule of thumb to employ when combining Transitions and Animations: make animations longer than transitions, because you don’t want glitches when the animation is done and the browser rounds up to still render part of the transition you overruled. Some closing notes: all this could be done via JavaScript and made to work in more browsers, but it’s compelling just how much you can accomplish with some quick CSS rules alone. Excluding the vendor-prefix redundancies, it’s only taken about 20 lines of CSS to progressively enhance a nicely transitioning menu into a really slick one for browsers that understand the CSS. Not too shabby. l

About the author Name Faruk Ate Site farukat.es Areas of expertise Design, web development, user experience What do you put on your toast? Butter – and then I see how it falls down on my plate. Science!

.net november 2010

.net technique mobile

Mobile build an Android app Getting your app onto an Android phone is easy with Appcelerator Titanium. Robert Reinhard of BKWLD shows us the ropes Knowledge needed Intermediate JavaScript Requires Text editor Project time Five hours

Titanium Mobile is a free Mac and PC application created by Appcelerator, a company whose products are designed to enable developers to create real applications using languages they know. Titanium Mobile currently enables developers to publish to Android and iOS (including iPad) and there are plans to support BlackBerry and other mobile platforms. Functions you invoke from Titanium are kept as platformagnostic as possible, with the goal that you write your application once but deploy it to multiple platforms. The first hurdle to clear may already have been done on your computer, depending on how much development you’ve already done. You’ll need to install the software to compile Java apps. How you do this depends on whether you’re using a Mac or a PC.

Mac

Mac developers should install Apple’s free Developer Tools (developer.apple. com/technologies/xcode.html), which come with a Java compiler. To do this, you’ll need to sign up for a Developer account (developer.apple.com/ programs/register). Once you’ve signed up, download the tools from the developer site. The installation link is prominent on the landing page and installation is straightforward, once you download the massive .dmg file.

ntial CD Your esseed ed for this All the files ne found on tutorial can be . this issue’s CD

Expert tip The future When building your app using a tool such as Titanium, you’re at the mercy of the platform holder. When iOS4 came out, Apple introduced restrictive conditions concerning the development of apps through tools that abstract the native language – although in September, a new ruling reversed that policy. In contrast, Google has taken a more consistently open approach to what apps can be pushed on their devices, so it seems a good bet that your Titanium-produced Android app will be safer long term. Still, it will always be less risky to build in the intended environments for the platform.

index.jsp) and install. Next, you need to tell Windows where to find the Java compiler by adding its directory to our path. Here’s how: 1. Right-click My Computer and choose Properties. 2. Under Advanced, click Environmental Variables and a dialog will open. 3. In the System Variables pane, scroll until you find Path and double-click it. 4. Add the path to your jdk\bin folder to the list of paths. For us, it was placed in C:\Program Files\Java\jdk1.6.0_21\bin. As a result, the edited Path system environmental variable became: %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\ Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Java\ jdk1.6.0_21\bin

PC developers need the Java Runtime Environment (JRE) and the Java Development Kit (JDK). It’s likely that the former is already installed. If not, download it (www.java.com/en/download/manual.jsp) and run the installer. Choose the right JDK installer for your PC (java.sun.com/javase/downloads/

Application setup Titanium creates a project folder with the name you enter in the Name field – in our case the wildly inventive ‘Hello World’

.net november 2010

Push to your phone Once you’ve created your app in Titanium, look for this screen on your Android device, which will allow you to install the app over USB

.net technique mobile

Test it Our demo app running in the Android emulator, which comes as part of the SDK package. Keep the emulator running as you develop your app to speed things along

Interface The Titanium interface in which you create a new application. It’s detected

The next step is to install the Android SDK. Titanium works in tandem with the Android SDK when compiling your app. In fact, the emulator that tests your app is part of the SDK package. This is a multi-step process and you need to install packages manually for each Android OS release you want to support. The instructions that follow assume you’ll install all. 1. First, download the Android SDK from their site for your particular platform (developer.android.com/sdk) and unpack it. 2. Open the Android SDK and AVD Manager. On the Mac, this is done by opening the directory where you unpacked the SDK in Terminal (cd/path/ to/sdk) and running tools/android. On Windows, just launch SDK Setup. exe within the SDK directory. The result is the same – the Android ADK and AVD Manager application opens up. 3. Click the Available Packages link. 4. Tick the checkboxes that are for packages with SDK Platform in the name. 5. Click Install Selected and confirm that choice in the dialog that opens up on your screen next. 6. Make a snack – it’s going to take a while to download and install.

create a project folder with the name you entered in the Name field. In other words, you don’t need to create an empty directory for it. Choose the latest Titanium SDK version. And, if all those earlier steps went according to plan, Android SDK found should be lit next to Installed Mobile Platforms. A bunch of files will have been created within your project directory. This is the default skeleton for all new projects and includes a simple app that will run in the emulator right off the bat. Here is an overview of the more important files in this directory: • build: You don’t want to muck around in here. This is a working directory for Titanium where compiled assets for the platform you’re developing for are placed. • tiapp.xml: You can adjust overall elements of your app within this file, such as the path to the icon, and what state the application launches into. • Resources: This is where all your application code and assets will go. • Resources/app.js: The bootstrap for your application. This file is the first thing that’s executed when your app starts up.

Configure Titanium

Your computer is now ready to start making apps with Titanium, so let’s download it from www.appcelerator.com/products/download. Open it up. Assuming this is your first time, you’ll be prompted to create an account, a quick and free process. After this is done, install any updates it prompts you for. At the time of writing, we were running Titanium Developer 1.2.1, the Titanium Mobile SDK 1.3.0, and Android SDK r06. Switch to the Profile perspective, the third button in the Perspectives bar. In the Android SDK field, choose the directory in which you unpacked the Android SDK. In our case, this was /Developer/SDKs/android-sdk-mac_86. (If you put it there yourself, you’ll be prompted by Mac OS X to authenticate.) Now we’re ready to create a test app. Click to create a New Project. On the screen that follows, choose Mobile as the Project Type (it’s a drop-down menu, although it doesn’t look it). Name the app whatever you want. The App Id needs to follow the standard class path convention of tld.domain.name. In the directory you choose, Titanium will

Expert tip Creating Titanium objects Titanium enables you to configure the objects you create in two ways. In our label example, we passed all our configuration options as properties of an object passed to the create method. However, I could have written it the following way to the same effect: var msg = Ti.UI.createLabel(); msg.text = ‘Hello World’; msg.color = ‘#00a7e5’; msg.font = {fontSize:48};

that the Android SDK has been installed our machine, but that the iPhone SDK hasn’t

With Titanium you write your application once but deploy it to multiple platforms Let’s confirm that everything is working up to this point. Click the Test & Package tab in Titanium, make sure Run Emulator is selected, and click on the Android tab. In the drop-down menus at the bottom, choose SDK 2.2 (to build for the latest Android OS), Screen HVGA (to use an emulator with a 480x320 resolution) and Filter Info (which affects the level of messages shown in the Titanium console). Then click Launch. The Android emulator (a separate application) will launch. Watch the Appcelerator console (the black box that should be filling up with blue text) for it to tell you Application should be running, then switch to the emulator. This process could take several minutes. Unlock the UI by sliding the Lock icon in the phone UI to the right. You should see the Appcelerator default application appear: two tabs with a main window.

Test your app

Now we’ve confirmed that all components are working, let’s make our own test app. Create a new app.js to replace the existing one in the project’s Resources directory. As we mentioned before, the code in app.js is what runs first for app startup. Our Hello World app is as simple as they come: we’ll make the app window fullscreen and paint a simple “Hello World” to the screen. Through this example, you’ll see how simple the JavaScript is that’s required to create a functional Android app. First, let’s set the background of the app to black: Ti.UI.setBackgroundColor(‘#000’);

.net november 2010

next>

.net technique mobile Any time you want to interact with the device, you’ll invoke one of the Titanium SDK’s methods. They’re all part of the “Titanium” or “Ti” namespace. Appcelerator has exposed a lot of functionality to developers and it’s well-documented on the developer site (see developer.appcelerator. com/apidoc/mobile). You’ll use the UI module the most, because it contains all the methods for creating UI elements such as text labels, buttons, tabs, drop-down menus, switches and more. SetBackgroundColor() works as you’d expect; it sets the background colour of the app. You pass it the hex value of the intended colour. Next up, we’ll create a window instance in which to render our text: var win = Ti.UI.createWindow(); win.fullscreen = true; win.navBarHidden = true; A window is a container, within which UI elements can be added. The window itself contains properties that affect its appearance and positioning. After creating an instance of a window object, we set a couple such properties. Fullscreen tells the window to take over the full screen, overlapping the status bar at the top that shows battery life and reception. Setting navBarHidden to true hides the title bar that usually contains an application’s name. So far, though, our app is still empty. var msg = Ti.UI.createLabel({ text:’Hello World’, color:’#00a7e5’, font:{fontSize:48} }); win.add(msg); CreateLabel() is used to create a block of text. A Titanium convention with most methods is that if a method accepts multiple parameters, they’re passed as properties of a standard object. The first property we set is the text we want to display in the label. The colour of the text is set with an aptly named property and it accepts a hex value. Font attributes (such as fontFamily and fontSize) are set in the font property as additional properties of a new object.

Resources Where to ﬁnd out more

Titanium Mobile Documentation developer.appcelerator.com/ apidoc/mobile/latest The resource you will turn to the most, this lists all the methods and properties available, grouped into namespaced modules.

Titanium Mobile Guides developer.appcelerator.com/doc/ mobile/guides A list of tutorials and tools to assist in development. If you’re a Textmate developer, make sure to grab the bundle.

We’re just going to use the fontSize property, setting the text size to 48px through a numeric value of 48. Lastly, the label we created is added to the window by invoking a method of the window instance, add(). We pass the label instance to the add() method; all UI instances are made visible this way. Without taking this step, the label we created only exists in memory and isn’t actually displayed. If you launch the app at this stage, you still won’t see anything in the emulator, except for the black background. This is because we haven’t opened the window we created (which now contains a label). This is done through the open() method, as follows: win.open(); Now, when you launch the app, you’ll see the message we created, as well as the app extending to cover the whole screen. Try tweaking the properties that you set and launching the app again. If you didn’t quit the emulator or hit the Stop button in Titanium, you’ll notice that your new build installs and opens much faster than the first time you launched it. With this in mind, it’s convenient to keep the emulator running as you develop your app, to help speed things along.

Push to your phone

A great thing about creating apps for Android (as opposed to iPhone) is how easy it is to get your app on your phone. The first step is hooking your phone up to your computer via USB. Then, turn on USB Debugging on your phone. You can find this by going to home screen, clicking Menu and launching Settings. Then go to Applications, then Development, and finally turn on USB Debugging. Now, to get your app on your phone, return to Titanium and choose the Run on Device tab within Test & Package. Then just click Install Now from the Android tab. Your phone may not give you much in the way of feedback that the app has been installed, but lo and behold, it will appear on there alongside your other applications. With a good grasp of JavaScript, you should be able to take it from here, on your way to making the next killer app for Android. By using Titanium, it will be easier to port to other platforms and you’ll be able to have a functioning prototype in a short period of time rather than slogging your way through Java textbooks to get everything working. l

About the author

Getting started The many dialogs you must traverse to add JDK to your system path in Windows. If you’re a Mac user, you need to install Apple’s Developer Tools

<prev

.net november 2010

Name Robert Reinhard Site bkwld.com Expertise LAMP and ActionScript programming Clients Outdoor industry, music industry, ad agencies What do you put on your toast? Bacon, lettuce, and tomato. And mayo. And another piece of toast.

Save 50% up to

Save 35%

£33.49 - 13 issues

Save 30%

£36.49 - 13 issues

Save 35%

£41.99 - 13 issues

Save 50%

£25.99 - 13 issues

Save 33% £51.99 - 13 issues

Save 50%

Save 35%

Save 40%

Save 33%

Give a magazine subscription £25.99 - 13 issues

£41.99 - 13 issues

this Christmas!

A subscription is the perfect Christmas gift for your friends and family or why not treat yourself? Choose from over 60 titles online – a magazine to suit every interest Convenient and free home delivery every month

£46.49- 13 issues

£51.99 - 13 issues

Speci Chris al tmas offer!

Plus a free gift card you can personalise to announce your gift

2 easy ways to order

myfavouritemagazines.co.uk/Z801 0844 848 2852 Quote Z801 (lines open Monday-Friday 8am-9.30pm and Saturday 8am-4pm)

.net technique css

CSS speed up site C builds with OOCSS Building websites in CSS can be repetitive and time-consuming. OOCSS offers a nifty shortcut, explains Nicole Sullivan, who started the open source project Knowledge needed HTML, CSS Requires Text editor Project time Download the OOCSS framework and you can be building complicated page layouts in minutes. OOCSS (Object-Oriented CSS) is a way to build websites that are fast, and based on clean, easily maintained code – even as they scale to millions of visitors and thousands of pages. Is it a philosophy? A tool? A framework? It’s all of these. OOCSS is a downloadable framework with a page template, grids and modules, to get you started and to show you how it’s done. And it’s a philosophy: a way to build CSS that scales with the biggest sites on the web. Put together, it represents the next step in the evolution of CSS, making CSS both more powerful and more predictable. It’s a way to create code that’s sane, scalable and maintainable – not to mention blazing fast.

Current practice

A new paradigm

In CSS, up until now, we’ve spent all our effort inside curly braces, getting the right combination of property-value pairs. And a lot of great work has been done. We’ve solved some really cool problems, such as creating tabs, carousels and rounded corner boxes that work cross-browser.

We need to stop re-inventing the wheel each time we build a site or even a new page But the next step is to step back and focus outside the curly braces. We need to realise that the architecture of our sites lies in how we structure our selectors. Clean, logical CSS development requires creating good selector structure. What does this mean? It means we need to stop re-inventing the wheel each time we build a site or even a new page in our site. Instead we need to build a component library, like a toolkit of Lego® we can use and reuse, with different mixin components and different skins hung on top. Creating the right components in the first place enables you to add

ﬂickr.com/photos/nickwheeleroz/2474196275/in/photostream/

ﬂickr.com/photos/wwworks/2475349116/in/set-72157608035966422/

Here are some problems with CSS the way it’s developed now: 1 It requires expert ability just to get started. Right now, you need to be an expert coder with years of experience before you’re of any use to a team. This is not normal. When the first non-expert who touches your code breaks it, your code is too fragile. 2 Code re-use is almost non-existent. Developers don’t trust each other’s code. And the way CSS is currently developed, it’s not surprising. A heading, list or module from one place might act completely differently elsewhere in the site. It’s not worth figuring out why; much easier to cut and paste and rewrite. And so the code grows and grows and grows. Which leads to …

3 File size is getting bigger in a 1:1 relation with your site. And the evergrowing CSS slows your user experience and drains your development resources maintaining mountains of confusing code. But it doesn’t have to be this way.

Not broken There’s nothing wrong with CSS itself, but the way it’s currently developed can lead to problems such as bloat and developers not trusting each other’s code

.net november 2010

Building blocks The basic concept of the Object Oriented CSS framework is building a library of reusable objects (or “Lego”) for your website to save time and effort

.net technique css Q&A “It’s what we’re supposed to transcend to” Murray Nuttall Job title Web developer URL www.trademe.co.nz About Murray Murray has worked in web design and development for Firstlight E|R|A, CWA New Media and currently, Trade Me

Granular It might seem logical that this Facebook posting (top) is one ‘object’, but to be really useful, the proper OOCSS architecture needs to be much more granular (above)

new pages without writing new CSS – just put together the HTML using your already-built components. And remember, reusing elements makes them performance freebies. Once you figure out what the basic ‘Lego’ of your site is and abstract out the structure, skins and mixins into separate classes, you’ve laid the groundwork for a fast, scalable site.

Granularity

The key to successful OOCSS is getting your granularity right. You don’t want to think in terms of templates for individual pages, but rather repeating visual patterns, such as headings, lists, modules, grids and buttons. To begin, you want to look at your design and abstract out the visual patterns. It can take some practice to see your site this way. You might have to learn to see your site’s “pieces” in a finer way than you’re used to. Take this example from Facebook (top). It might seem logical that this is one ‘object’. But to be really useful, the proper OOCSS architecture needs to be much more granular (above). As we make the objects smaller, we begin to see the same patterns emerging over and over, and our objects become more reusable. (And our CSS becomes much smaller and faster!) See the screengrabs below for how the different components are broken down in the Facebook example.

.net: How did you get started using OOCSS? MN: I came across OOCSS a year ago, while working on a project for my former employer, building an in-house framework of commonly used components for educational websites. I was feeling frustrated at how I kept having to write paragraph and list styles for every box or sidebar I made. A lot of the components we were building were similar, but each had entirely separate code. There was no reuse. Googling around for solutions, I found one of Nicole’s videos and it crystallised what I’d been feeling. The problem was our granularity. We’d focused on the design of a set of templates, rather than smaller elements we could use to put various templates together. I built my next project using OOCSS. Consequently, the designer was able to spend less time worrying about layout, and more time designing pretty elements. Development was a lot quicker than in the past once I had built my content, containers, layout pages – my Lego®. Where it failed was when I went on holiday. Another developer took over and, not understanding fully, started building old-method CSS, which ruined some areas of cascade. Where it finally succeeded, though, is when after some explaining, the other developer came to understand OOCSS. He still uses it today. To me, Nicole’s work is as important as Andy Clarke’s Transcending CSS. I think OOCSS is what we’re supposed to transcend to. .net: What are you doing now? MN: I’m now implementing OOCSS at Trade Me (one of New Zealand’s most trafficked sites, with over a million visitors a week). The best moment with OOCSS so far was when I showed my newly built Trade Me library of components to a colleague, the guy who wrote Trade Me’s current HTML and CSS, a guy who was sceptical of the value of OOCSS. Using Firebug, I dropped one module inside another and everything – spacing, paragraphs, lists – behaved perfectly. “Holy crap,” he said. “I’m impressed.”

What this does is abstract out the heavy lifting. When you’re working on a big site, this means the senior designers can build this underlying Lego, and the newer members of the team can easily and cleanly build new pages using the pieces in the toolbox.

One heading

Five media blocks

Two link styles

One comments list

Action list

One paragraph

.net november 2010

next>

.net technique css In the OOCSS framework you’ll find already-created grids and modules, which are extremely light and configurable. To use them, simply add the selectors to your HTML.

Using inheritance in CSS

Once you’ve discovered your base objects, use the concept of inheritance to define the differences, or to add different style skins. For example: .error { border: 1px solid black; padding: 10px; } .error .icon { background: url(errorIcon.png) no-repeat 0 0; height: 15px; width: 15px; } .infoError .icon { background-image: url(info.png); } infoError extends error, containing only the code that makes it different. <p class="error">Error: The following photos failed to upload.</p> <p class="error infoError">Information: You can add photos more quickly by using the uploader.</p> You can see how much code that would save when you have many different types of error messages. You also want to do this to separate your objects’ structure from their style. For example, in the framework, the structure of the modules lives in .mod, the style in classes such as .simple that extend .mod.

New best practices

Once you’ve started building your site using the OOCSS framework, you want to keep the following rules in mind: 1 Avoid location-specific styling. Instead, apply classes to the object you wish to change. For example, instead of: .sidebar ul {} .header ul {}

The way CSS is developed now, even according to current best practices, leads to massive code duplication which, as your site grows, can bloat to surprising proportions. Stoyan Stefanov and I decided to take a look at the most visited sites on the web to gauge the situation. Our data is based on the top 1,000 sites according to Alexa. These stats are for all the CSS downloaded on one page (generally the front page):

float

Searching for float tells you whether or not the site has a consistent, abstracted way of laying out information. Worst offender: 733 56% greater than 10 13% greater than 100 If you are constantly floating your elements, your code is probably not just inefficient, but really difficult to maintain – each person who tries to modify the code has to first figure out the other’s idiosyncratic way of laying things out. Use a grid system instead.

h1-h6

What about headings? We searched for h1, h2, h3, h4, h5 and h6. We found: Worst offender: 511 56% greater than 10 9% greater than 100 511 different headings on one page? Obviously redundant. But even having more than 10 is high.

font-size

Of course, just searching for headings doesn’t give you the whole picture. We also searched for font-size to catch heading changes hidden in divs. Worst offender: 889 78% greater than 10 23% greater than 100

use .mainNav {} .subNav {} to extend your ul like this: <ul class"mainNav">...</ul> This makes it possible to reuse code, since it’s much easier to tell which rules are affecting an element or object. Your code becomes more predictable, and that’s a good thing. 2 Style classes, not elements. Define default values, and then create classes for the exceptions. For example, maybe you have six different headings (h16), but you want one h2 to be red for a warning, rather than the default blue that you set site-wide. Instead of using an id, or a location-dependent style, make a new class: .warning { color: red; } and use it to extend your h2 <h2 class="warning">This is a warning!</h2>

<prev

In depth The truth behind code duplication

.net november 2010

That means the worst offender had an astonishing 889 font-size declarations on one page. There are not 889 usable font sizes on the web. Globally declared headings would make a big difference, in terms of both performance and maintenance. Try it on your site – we used grep for our test, but if you’re not comfortable with command line tools, you can do it in Dreamweaver (just click Find All on the Search menu under Find and Replace to see all instances of your search term).

This makes it easy for you to look at the code and understand right away what’s happening. 3 Use hacks sparingly, and don’t let them change your specificity. Though browser rendering engines are getting better, occasionally we still need to use hacks to make something work cross-browser, particularly in older versions of IE. When a hack is unavoidable, use attribute hacks rather than selector or class name hacks so as not to interfere with specificity. For example, to account for the three-pixel float bug in IE6, you may be tempted to create a .ie class. But now that rule is more specific than the base rule applied to other browsers, and your extended objects will not work predictably. (This is a good way to convince yourself you’ve discovered a new IE bug, when in fact, you’ve just undermined your own architecture!).

.net technique css

Be consistent Good CSS is predictable. Unpredictable code is un-reusable code. Using a framework like OOCSS helps to straighten things out It also may be tempting to use conditional comments and hide the styles that only apply to IE in a separate style sheet. This is bad for a couple of reasons, not least of which is that it adds one more http request to a browser that already struggles with performance. Attribute hacks may be ugly, but hacks should be ugly: it will remind you to use them as infrequently as possible! 4 Avoid using ids to style. Ids should be used for JavaScript hooks and site indexing, not styling. One problem with ids is that they can’t be reused. And

Avoid using ids to style. Ids should be used for JavaScript hooks and site indexing while you might think that whatever you’re building is never going to be used more than once on a page, as your site grows you may just be surprised. A scalable site is a flexible site. Classes are, ids aren’t. More importantly, ids impact your specificity. Good OOCSS code is predictable. Styled ids are an unnecessary complication. 5 Give all rules the same strength: use the cascade to overwrite previous rules. The biggest cause of code unpredictability in CSS is the sometimes bewildering power of specificity. Especially in big teams (though it can easily happen in a team of one), it’s common that as the code base grows it becomes more and more tangled – with multiple selectors, location-specific styles, multiple redefined elements, styled ids, !importants, even inline styles. And the rules of specificity can be confusing even to CSS experts. But there’s a better way. Give all rules the same strength and use the cascade to decide which one wins. To override a style, put it later in the style sheet. That’s it.

Using the framework

But enough talk. Try out the OOCSS framework and see for yourself: ● Download all the files from wiki.github.com/stubbornella/oocss/ ● Set up a local directory ● Create a new directory for your site ● Copy template.html into your new directory and rename it ● Create a file, custom.css, for your site-specific code ● Fix paths in your renamed template Template.html will be the template you use to create every page in your site. It includes a header, footer, left and right columns and a main content area. But say your design doesn’t have a right column.

Granularity Get your granularity right: once you’ve defined your objects, simply mix and match to build your site Just remove rightCol (and its contents) from the HTML – <div class="rightCol"> <h2>Right Column</h2> <p>The right column is...</p> <ul> <li>.gMail = 160px</li> <li>.gCal = 180px</li> <li>.yahoo = 240px</li> <li>.myYahoo = 300px</li> </ul> </div> – and you’re done. Now, maybe you need some more structure in your main area. The grid object makes it easy. Simply add this to the HTML: <div class="line"> <div class="unit size1of2"> <h3>1/2</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of2 lastUnit"> <h3>1/2</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div> You’ve divided your main area into two sections. And you can nest your grids to make much more complicated layouts, just as easily. This is just the beginning of what you can do with the OOCSS framework. Once you’ve laid out your structure, use the principles behind the framework to build your own objects, and you’re well on your way to building the next generation of fast, scalable websites. For more info, check out the documentation at wiki.github.com/ stubbornella/oocss/ and oocss.org/. Try it for yourself, and send feedback and bug reports to groups.google.com/group/object-oriented-css. ● With thanks to Sarah Harlin for her help writing this tutorial

About the author Name Nicole Sullivan Site stubbornella.org Twitter twitter.com/stubbornella Expertise Performance and scalability of high traffic websites. Clients Facebook, W3C, Kongregate What do you put on your toast? A layer of butter and then a layer of blackberry jam. Yum.

.net november 2010

.net awards_2010

MAGAZINE AWARDS_ 2010

The .net magazine Awards 2010

With the nominations phase over, it’s time for the judging to commence! It’s all over bar the shouting: voting is officially closed and you can now see which entrants have made the shortlists on the Awards site at www.thenetawards.com. The top three nominees in each category have been sent to our biggest-ever panel of judges – more than 100 industry notables, including such stellar names as Jeffrey Zeldman, Molly Holzschlag and Tim Van Damme. They’ll make the final decision, and the winners will be announced at a glittering ceremony at London’s Ministry of Sound.

Subscribe and save over £20 – you’ll never miss an issue again! Turn to page 40 for details

Check out the .net Awards website for all the latest news and developments

WINNERS ANNOUCED 18 NOVEMBER!

www.thenetawards.com In association with

.net november 2010

Latest news

Since users may want to visit the site to gather some helpful food safety tips, I’ve created a small widget for them to catch up on all the latest news. Bearing in mind that all the food safety sites out there are pretty ugly and not always that useful, either, it would be nice to have a one-stop place to get all your food safety-related information. Currently, the widget leads to a different website, but in the future it would be good to have a section within the site that would hold all this content, perhaps a blog.

The logo

The branding looked like it was taken from a 1998 ‘Photoshop for beginners’ class. It had overused Photoshop effects and wasn’t memorable. So in order to tie the whole design together, along with the concept of the quality badge that would be distributed to clean establishments, I decided to rebrand the logo using the badge. I removed the gloss and Photoshop effects from the logo, too. The best logos shouldn’t rely on Photoshop effects: they should still look great and recognisable when in black.

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

.net november 2010

103

.net technique how_we_built

how w_we_built

www.historypin.com

Social movement We Are What We Do wanted to bring the generations together on the web. Michael Daley, y Nick Stanhope and Alexander Ivanovv explain how Historypin was created y,

.net: What is Historypin? NS: Historypin is a place for people to see and share history. It has three main features: it adds a timeline to Google Maps, so users can add and access images by location and date; it enables users to layer street-level images onto Street View; and it enables users to add their own or other people’s stories to images. Over time, Historypin will become a rich and complex archive. It aims to provide a really exciting way into history for young people, especially through its Street View layering functionality, and to motivate them to start scanning their grans and geotagging their grandads. It also gives older people a new reason to get online. .net: Can you tell us a little bit about We Are What We Do? NS: We Are What We Do (www.wearewhatwedo. org) is a global, non-profit movement that aims to make a difference to social and environmental problems. Not by lecturing people, but through

Making a difference Historypin aims to bring young and old together to bridge the generational ‘digital divide’

www. historypin. com From the beginning…

104

Sep 2009 Lots of discussions with the We Are What We Doers and Google about what the Historypin site should actually do.

.net november 2010

changing everyday behaviour. For example, our anti-plastic bag campaign of 2007/8 conceived the ‘I’m Not a Plastic Bag’ shopper with designer Anya Hindmarch. Within two years, the bag and our campaign had helped to massively reduce plastic bag usage in major supermarkets. .net: What’s Google’s involvement in Historypin? NS: Google’s involvement has been to support the development of the site and then help us market it, with We Are What We Do retaining the overall ownership and management of the project. Our developers have worked closely with its engineers and product teams, with some special integration work undertaken around Maps, Street View, Picasa, Accounts, and Google App Engine. .net: How has the site been marketed? NS: We have three main marketing aims, all of which complement and feed off each other. First, we’ve set out to get early adopters and influencers excited about what we’re doing. For example, we started lots of conversations with influencers in the digital and archive worlds that informed the final stages of development. Google’s involvement has certainly helped with this. Second, we’ve wanted to get a mainstream media audience excited, so we’ve worked really closely with Frank PR to get heaps of great national, local and international coverage – often showcasing the Street View layering feature. Finally, there’s a strong educational and community thread to this project, so as well as writing to every school in the UK, we’re going to be rolling out a lot of educational and community outreach work over the next few years.

Picture in picture Historypin enables users to permanently pin photos in place over Google Street View many of them are getting bigger and bigger all the time. Our aim was to make sure that the more photos are added, the better the experience gets, which is normally the opposite of what happens. This meant creating a really good Maps experience. For instance, the timeline provides hundreds of ways of cutting up huge amounts of content – maybe even thousands, eventually. We’ve also been working on adding different ways into content, and the launch of Collections has been an important part of this. Collections, either accessed in a gallery of pictures or on a filtered map view, could be made up of themes, events, periods, organisations, products – anything that people want to share around. .net: Which part of the site are you most proud of, and why? MD: The pinning to Street View functionality. It’s a custom bit of code that works hand in hand with Google’s map API. It stores the location, zoom level, pitch and yaw of an exact Street View frame, and places the photo on top.

.net: What steps have you taken to serve up an engaging experience? MD: There are a lot of sites out there with large batches of images to look through, from gigantic Flickr pools to national archive collections, and

.net: What were the main challenges you faced during the site’s design? AI: Getting our heads around working with Google App Engine. Playing by App Engine’s rules means

Oct

Dec

Agreement on the best features. Ideas tested out on mature family members who have stories to tell and photos to share.

Nov Development of wireframes to spec out the site. Style guide created to make sure the site fits with the We Are What We Do brand.

Mock-ups are done in Photoshop, keeping the Google APIs we’ll be using in mind. Back-end development begins.

Jan 2010 Front-end development begins, focusing on user accounts, showing photos on the map, and filtering results by date.

.net technique how_we_built The techie bit

Close up www.historypin.com 1

Search and date filter bar

The main tools you use to navigate the site. These enable the user to find photos by location, keyword and date – optionally down to the exact day.

Navigation

Photo bubble

Photo cluster

Popular photos

Historypin is built over the Django Python framework while running on Google’s cloudbased network, App Engine. We use GAE database technologies (Google Datastore and Google Blobstore) to save all the information on the site. Historypin relies strongly on advanced JavaScript, powered by jQuery. JavaScript is heavily used for the integration with the Google Maps API. All of our code is kept under source control with SVN. Omnigraffle was used for many of the wireframes and site mapping. All of the actual design was carried out primarily in Photoshop and Illustrator.

This gives you quick access to the parts of the site that enable you to get involved and contribute your own content.

A multi-level bubble. This enables you to navigate all the photographs in a cluster and see details for specific ones.

This shows photos that are piled up on each other. It’s dynamically created on the fly in JavaScript using local and server caches.

We wanted to drive users to the best bits of the site and immediately into the Street View experience.

making sure your site is designed to be distributed around the globe, that it plays fair with other sites hosted on App Engine, and that it doesn’t use up too many resources – for example, any request that takes over 30 seconds is terminated. The database doesn’t run on a traditional SQL service, but uses Google’s own NoSQL implementation, Big Table. All of which can cause lots of problems when you’re trying to run complex queries such as finding all photos within a certain area between two dates. But when you manage to code efficiently, App Engine really rocks. .net: What’s the reaction been like? NS: Amazing! The media, as well as the public, have been extremely supportive and enthusiastic.

Feb Development begins on advanced functionality, such as storytelling and the pinning to Street View functionality.

March We begin testing the website’s functionality using some trusted partners, friends and family members.

At this point, we’ve had more than 5.5m page views, 270,000 unique visitors, and about 18,000 pictures posted. Additionally, we’ve had more than 11,000 blog posts and thousands of tweets – both really interesting to watch spread in real time. .net: What are your development plans? MD: We’re still very much in our initial development cycle, so we’ve got pretty detailed plans for the next six months. This will see us build the facility for users to add more than just images, and also tell their story in more ways. So by October, movie and audio files will be uploadable, and we’ll enable people tags and links to other sources of information, such as Wikipedia. Next year, we’ll be launching an Android app. ●

June The beta site launches with an event at the Royal Historical Society.

July onwards Continuing refinement and optimisation of the map search functionality and integration of new features based on user feedback.

Proﬁle Name Michael Daley Job Digital director Company We Are What We Do Website wearewhatwedo.org

Proﬁle Name Nick Stanhope Job CEO Company We Are What We Do Website wearewhatwedo.org

Proﬁle Name Alexander Ivanov Job Web architect Company We Are What We Do Website wearewhatwedo.org

Turn the page to learn how to create a site using Google App Engine >> .net november 2010

105

next>

.net technique how_we_built

ccreate build sites in Google App Engine Get cheap and scalable hosting, and enable users to load your site quickly. Alexander Ivanovv explains how to take full advantage of Google App Engine Knowledge needed HTML, Python programming Requires Google App Engine SDK, web browser, code editor, Google account Project time About a day It can be a really tricky job determining which hosting service you need to get to host your websites. Do you go with virtual hosting, or a dedicated box, or even a clustered hosting solution? Then, once it’s up and running, you have to pray you don’t get a massive spike in traffic that your site can’t handle. One solution that enables you to rest more easily is Google App Engine. For pennies you can host an extremely complex website that can scale

up almost indefinitely if you needed it to. Keep in mind that your website doesn’t have to be at all complicated to use App Engine. You can happily post a few static HTML pages if you like. App Engine enables your site to load quickly wherever the user is, because it uses Google’s own infrastructure – much like Google Search and Gmail. It’s almost free and has an almost infinitely scalable cloud computing platform. Microsoft, Amazon and others offer a similar solution, but we decided to go with App Engine when building Historypin because it offers loads of other things that plug right into it, such as Google Accounts API and Google Maps API. This means you’re halfway towards a pretty advanced site before you’ve written any code at all. ●

START

Choose version Next you need to download the App Engine SDK from Google (code.google.com/ appengine/downloads.html). You have two choices: a Python version and a Java version. This enables you to run a local version of your site to test before deploying it.

Test it out Once you’ve finished building, you can run the application locally on your own computer to see if everything works. It’s really just a matter of clicking Browse to have a play around and iron out any kinks in performance.

Decision time First you need to decide if App Engine is right for you. It may not be the way you’re used to working, but it really can help to make your site future-proof. If you’re looking for an introduction to building for cloud computing, here’s where to start.

Build site It’s now time to build your site locally. There are loads of demos on the App Engine site to start playing around with. I’d recommend using the Python version if you want to do something simple. If you have any PHP experience, it’s pretty easy to learn Python.

<prev

106

.net november 2010

Expert tip Indexes Be careful with indexes: the SDK doesn’t collect all of them and you have to write some manually. By default, all queries run in development, but on Appspot, a query that needs a composite index will return an error if there’s no entry in the index.yaml file. Starting the SDK with --require_indexes will help you catch most of the missing indexes. Always watch the logs: they have most of the information you need while debugging, and you can log additional information there. We tried to put everything in memcache, bypassing most of the datastore requests.

Appspot Now create an Appspot account using a Google account. If you’ve got Gmail, you’ve already got a Google account. You’ll end up with a dashboard to manage everything. You can create up to five websites or applications using App Engine.

Upload Click Deploy to upload your site to App Engine and browse to the URL provided in the versions of the site. One of the great things about App Engine is that you can store multiple versions and roll back to one you know is working if you have problems.

FINISH

.net web_pro

This month’s selection of advice and opinion from the web industry’s leading professionals (below) Security/ Automatic updates for your apps p115 Mike Williams – “This could

be a major breakthrough in security management”

(above) Analytics/Q&A p118 Brett Bannister – “All

the insight in the world is useless unless it’s shared and acted on”

discover > Don’t miss an issue >

y: Subscribe toda 40 ge see pa

114

Ecommerce/ Indie etailers

(above) Expert advice/Access all areas p111 Alastair Campbell – “The usual way drop-downs are

implemented can cause accessibility issues”

The borders between online and ofﬂine are breaking down, says Fadi Shuman

115

Security/Automatic updates for apps

experts > 108

Secunia’s latest release makes patching software easy, explains Mike Williams

116

Startup/Communicate your idea

A good business idea needs to be communicated effectively to turn it into reality, says Wendy Tan White

117

Hosting/Do extras add value?

113

Expert advice

Columns from Joe Leech and Alastair Campbell plus your questions answered by Dave Chaffey, Struan Robertson, Wendy Tan White, Usman Sheikh and Tom Hughes-Croucher

Opinion

Charles Weir explains why locationbased services are about to get big

(above) Focus on/The myth of the page fold p108 Joe Leech – “We’ve

found people are comfortable scrolling”

Which extras should sway your decision in choosing a web host?

118

Analytics/Problems with Facebook data

A new report points to the problems in measuring the effectiveness of social media, says Hugh Gage

119

Search/Measure your search success

How do you know if your SEO is performing as well as it should?

.net november 2010

107

.net web_pro/expert_advice

_ expert advice Web pros answer your questions

Geotargeting

I have a client who is debating whether to create sites for different countries using a single domain with subfolders for each country or to host a separate domain in each country. Which is the best approach for SEO? From: Guy Dave Chaffey: The best results are achieved by creating a separate, locally hosted site for each country that uses the top-level country code domain. However, this can be difficult to set up in practice. Another approach is to set the geographic target for each subfolder in Google Webmaster Tools. You will have to add each subfolder as a separate site and you can then set the geographic target. Several companies have told me that this approach has been effective for them.

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. 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’]);” Another 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.

Waiting for payment

I’m waiting for a payment from my client. Although I’m clear about what’s morally the case here, I’m not sure whether I have any other grounds for insisting on a settlement. I did some back-end work for a designer and we slipped into what seemed to be a mutually beneficial arrangement. I recently completed two

smallish jobs for them and sent in my invoices as usual. Although I stated on the invoices that I required settlement within 14 days, I expected that it might run to 30 as this wasn’t the first job I’d sub-contracted from them. Thirty days have been and gone and I’ve emailed them asking for settlement, only to be told that they’re waiting for payment on the job that I’m currently working on for them – their client has apparently said that they will pay in full when the site goes live. I calculate that I’ve now waited five weeks for payment of my fees for the two previous jobs, and given that I have probably another week’s work before I hand over the current project, it’s clearly going to be at least six weeks before I get paid for these two earlier projects. I’ve had a difficult exchange of emails with the designer, who seems to have no regrets at all about making me wait simply because the current job was expected to be completed earlier and therefore payment for that would have covered my invoices for the first two jobs. I don’t see why I should be inconvenienced by their cashflow problems (if that’s what it is) as I’ve done the work and the client has accepted it. This has soured the arrangement somewhat and my gut feeling is to hand over the current project (which is about 75 per cent finished) and

Focus on… The myth of the page fold Proﬁle Name Joe Leech Job User experience consultant Company cxpartners URL www.cxpartners.co.uk

The myth that the page fold – the area you see on a web page before you scroll down – is an impenetrable barrier to users is just that: a myth. We’ve found people are more than comfortable scrolling long, long pages to find what they are looking for. A quick snoop around the web will show you that successful brands such as the BBC, Play, Amazon.co.uk and The New York Times aren’t worrying about the fold either. They have very long homepages with lots of content below the fold.

108

.net november 2010

Over the last six years we’ve watched more than 800 user testing sessions and on only three occasions have we seen the page fold as a barrier to users getting to the content they want. When we user-test here at cxpartners we use an eye tracker. The eye tracker lets us see what the user sees. We then take the combined eye tracking data from each study and produce a series of heatmaps. The heatmaps show us what as a whole the user group is looking at. Scrollbars are used to assess page length and to indicate content below the fold. One of the most common things we see on a heatmap is a strong hotspot over the scrollbar. The scrollbar is used to assess the page length. Users expect to scroll. Less content above the fold may encourage more exploration below. Some recent eye tracking work we did with Bristol Airport showed activity concentrated at the top of the page. We discovered

that having less content above the fold (one large content block as opposed to two smaller ones) encouraged exploration below (see right). It’s still really important to place key links above the fold – just don’t be tempted to cram everything in. We can offer three design tips to ensure content below the fold is seen: 1. Less is more – don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration. 2. Stark, horizontal lines discourage scrolling. This doesn’t mean you should stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold. 3. Avoid the use of in-page scroll bars: the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen. ●

/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

suggest they get someone else to complete it, and that they pay me 75 per cent of the agreed fee, but I’m not sure if that’s possible – I can’t honestly see me doing any further work for them if they’re prepared to make me wait. What are my options? From: Name supplied Struan Robertson: If the terms of the current job were that payment would be made on completion, handing over 75 per cent of the work and asking for 75 per cent of the fee is risky. They could claim that you are in ‘repudiatory breach’ of your contract with them. You might be unsuccessful in arguing that non-payment of earlier jobs is justification for your demand. Basically, it could get messy. Instead, I’d suggest that you arrange a meeting with them to talk this through to see if you can come to some arrangement. Email is not a great way to resolve a situation as sensitive as this, particularly if there’s a possibility of an ongoing working relationship. If the problem is cashflow, as you suspect, it’s a problem shared by many right now and a heavy-handed approach could backfire. If further negotiation isn’t an option, though, I suggest that you consult a local solicitor for help.

Legal Struan Robertson

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

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 marketing director of Gandi.net. www.moonfruit.com

“Email the host, notifying them of the infringement and tell them to take down the offending pages right away” Struan Robertson

Identify a site owner

How do I identify the owner of a website? Whoever built it has no contact information on the site. They’ve infringed my copyright by using my images without permission, but as I don’t know who they are, I don’t know how to go about taking them down. What can I do? From: Evan Struan Robertson: If you’re looking to stop this without involving solicitors and there is nothing on the website, there are some free tools you can use. You’ve probably tried a WHOIS search on the domain name and that may have drawn a blank. But you can get other useful info from sites such as domainhostingtools.com. If you can’t contact the owner, contact the host instead. You can find the host via whoishostingthis.com. Email the host, notifying them of the infringement and tell them to take down the offending pages right away. That’s a good way to get the owner’s attention quickly.

Out of copyright

Once material is out of copyright, are there any restrictions remaining on it? For example, if a book is out of copyright, could I print copies of it and sell it online? Or sell an ebook version? Or do I have to get permission from someone? From: N Parsons Struan Robertson: If a book was published so many years ago that the copyright has expired, it is now in the public domain and there are no longer any restrictions on copying that book, so you can print copies or sell an ebook version of it. Just be careful to check that everything you plan to use is indeed out of copyright.

User reviews

Downward trend Less content above the fold encouraged users to explore, as this heatmap shows

Marketing Dave Chaffey

I’d like to add functionality to my online store, which sells educational software, that will allow users to post reviews of the products. However, I’m worried that this may be a double-edged sword. If no one posts reviews, it will look like no one is buying the product. Even on Amazon, a lot

of products don’t have any reviews. Do you have any tips for encouraging people to write reviews? From: Rashan P Wendy Tan White: User reviews are useful to customers when deciding between products, as many people place more trust in their peers than the traditional forms of product advice. Users are naturally driven to write reviews when they’ve had a great or a terrible experience, but external incentives can help to give fuller coverage: for example, offering some kind of prize draw/discount vouchers for participation. Try setting up a trusted reviewer scheme, encouraging people to fill out personal profiles and offering a one-click rating system to ease people into giving feedback. Lastly, don’t be afraid of what your users might say: the internet is a big place and they can always say it elsewhere if you don’t provide the tools and the trust for them to build a community.

Buying a web business

While I have bought and sold businesses in the past, I’m now – for the first time – considering buying an entirely web-based business. Is there anything obvious that I need to check for or do differently, either legally or in terms of good business practice? For example, when assessing the financial projections of the company should I use different criteria from normal? Is there a different ‘business cycle’ for online stores than real-world shops, for instance? From: Scott Bateman Wendy Tan White: If you’re buying a web store, which runs like a traditional business, (eg buys things wholesale, sells them retail, makes a profit), then the way that you would assess it would be just as you would with any traditional cashflow-based business. If you’re buying a web service that has the potential for fast growth, but is more speculative, then you are in a very different situation, involving the kind of risks that VCs would take on. For the second set there are a huge number of

.net november 2010

109

next>

.net web_pro/expert_advice complicated variables, so it’s probably easier to focus on the former. When buying an online store, all the normal assessment should take place, but on top of this you will want to dig deeply into where the traffic comes from. This will be hugely important in assessing the longerterm prospects. This will include things like the search engine rankings on core terms, sites that refer/recommend them, and their overall online marketing strategy, including the increasingly popular social marketing tools. If you take on the business and you don’t understand the dynamics of how they attract their customers, this will be a big risk for you. You’ll also want to make sure you understand how they fulfil their orders and manage their shipping. This can also be very important as it will be key to scaling the business and remaining profitable. And finally, if you do buy an online business, make sure you get everything you need. In particular, get the HTML source and the IP for the identity and website. And don’t forget the domain name!

Multipage web forms

I would like to place some application forms on my website but as a novice I haven’t got a clue how to do it. Does anybody know of any software, tutorials or even how to create dynamic multipage web forms that can be used across different CMS software ie WordPress and Joomla? I really don’t want to pay a monthly fee for hosted forms. I’d much prefer to pay for software or learn how to do it myself. The aim of the forms would be to email the information to a designated email address: nothing too fancy but ideally multipage, as the questioning on some could be quite long.

I should point out that I am actually a mortgage adviser so preferably I would like software that can help me create my desired forms. Web design is a hobby more than a career and even though I have books on PHP, HTML etc I don’t really intend to get too deep into code. I have found an example website that is packed with similar forms to those I need to create: www. leadbay.co.uk/supply_leads.html. Obviously they sell leads, whereby I want to generate my own. The reason I want cross-CMS compatibility is to allow me to place my form on other people’s websites as well as some of my subdomains, eg www.sidstone.co.uk (Joomla) and pricebeat. sidstone.co.uk (WordPress). Neither site is 100 per cent completed yet, but I mainly need these forms and I was hoping I could create one for each service and use the script on different sites to save me from having to rewrite the same one again and again. Any help would be greatly appreciated. From: Sid Usman Sheikh: Sid, considering that you’re not a professional web developer and are not really interested in going into too much detail, I think you have two possible options to consider here. One is to go with something like Wufoo (www.wufoo.com) or Email Me Form (www. emailmeform.com), both of which enable you to create great looking web forms with minimal technical knowledge. I know you aren’t too keen on having a hosted form, primarily because of the recurring costs. However, depending on how many forms you are planning to build, these services don’t need to cost you anything, because both of them offer a limited free service. Also, since both of them allow you to simply copy and paste the code for the forms

“Wufoo and Email Me Form both enable you to create web forms with minimal technical knowledge” Usman Sheikh

into your own code, they seem like the most appropriate option for your needs. Alternatively, if you do want to code this yourself then I would suggest that instead of building a true multipage form, you can simply fake it by breaking up your overall form into smaller sections and then revealing them one after the other using something like jQuery. This would give the illusion of a multipage form to the user but would primarily be just a single-page form for you to code easily. There’s a nice little tutorial that would take you through this process step by step at bit.ly/cu3qDx.

CSS image link problem

I’ve been working on my personal website for a while now but have a problem that I can’t seem to solve. Basically, in my CSS sheet I’ve set out the a:hover property like this: a:hover { background-color: #FAF7EE; } All the other hyperlink attributes are set to textdecoration: none. This background-color attribute creates a small box around the text when the mouse hovers over it. However, the problem is that it also does this for image links. I don’t want this to happen, I want image links to be undecorated, but I can’t work out how to do this. I’ve thought about creating a class and then applying it to each image link, but this wouldn’t work because several of my image links already have a class, so I’d have to edit each of these existing classes as well, which would take ages. And anyway, applying a new class to every image link would be a cumbersome way of doing it. Really I want a method where I can just use one piece of code in my CSS file that will be applied to all image links automatically. Does anyone have any ideas on how I can sort this out? Or have I missed something painfully obvious? From: Waterish Usman Sheikh: I don’t think you can solve this problem without providing some sort

Expert tip of the month IE testing on a Mac

What do people recommend for testing IE on a Mac? I’m running a PC at the side of my nice shiny new iMac but it’s terribly slow and I just want a quick way to do initial cross-browser testing. From: Gulliver Usman Sheikh: What you effectively need to do is to get your Mac to run Windows. This way you can run IE on your Mac and not bother with your old PC. There are several tools that allow you to do this, the most popular ones being Parallels (www.parallels.

<prev

110

.net november 2010

com) and VMWare Fusion (www.vmware.com/ products/fusion), both of which have similar features and enable you to run Windows applications within Mac without having to restart. Both of these cost under £100, with 30-day free trial. Alternatively, if you’re a slightly more advanced user then you can try VirtualBox from Oracle (www.virtualbox.org). This is a virtualisation tool that enables you to do the same as the others, but with the added advantage of it being free! ●

Mac testing To test IE on a Mac, get your Mac to run Windows, using a service such as VMWare Fusion

.net web_pro/expert_advice of differentiation between your normal links and your image-based links. You can try specifying some background-related styles to your base image tag in your CSS, which might counter the problem. However, since you’re also suggesting that all your image links already have classes linked to them then depending on exactly what attributes you have already styled, this might not work. There are two possible solutions to your problem. You can either update the styles that relate your image-based links or, instead of specifying the background colour style to the base anchor tags, you can define a pseudo-class for it and then specify that class to all links where you would like that effect.

Coding v slicing

I did a graphic design course at uni and we were taught how to design working sites without having to know anything about code. We designed our sites in Photoshop and used the Slice tool to split them up into buttons/links etc, and then imported this into Dreamweaver. I’ve taught myself coding but it’s so much easier just to slice it all up in Dreamweaver! But I’m guessing people wouldn’t bother learning code if they didn’t need to. So why is coding better than slicing up a site designed in Photoshop and importing into Dreamweaver? From: Name supplied Tom Hughes-Croucher: There are a lot of different reasons, which .net magazine regularly covers in some depth. However, your question actually hits the nail on the head. ‘Graphic design’ is really doing just that: creating a visual piece that communicates something visually. Web pages, on the other hand, are much more complex, and they involve interactions that aren’t necessarily visual. Reading text, for example, is visual for a sighted user, but auditory for a non-sighted user. Even when experiences are visual, the needs of users vary a lot: some people need bigger fonts, some smaller. By constraining yourself to the strictly graphic output of a design tool you are not allowing the users of your websites to tailor the experience to fit their needs. Finally, when you export from a graphical package you lock the information into image files. This makes it very hard to maintain and extend the information on a site that’s anything more than a few pages. More than that, you can’t create any interactive experiences beyond simple rollover effects. The information isn’t accessible to search engines to be indexed, and there are many other problems. A site entirely composed of images is a long-term nightmare. Being able to design a beautiful site is a great skill, but being able to turn that design into a flexible, maintainable site is another one entirely. Keep reading .net and find some more details on the few brief points here. ● Send your questions to netmag@futurenet.com or post them at forum.netmag.co.uk

Access all areas

Drop-down menus can cause problems for accessibility, but there are some straightforward solutions, explains Alastair Campbell Using a select box (drop-down) for navigation is something that still crops up regularly when I test client websites. It doesn’t have to be a problem, but the usual way drop-downs are implemented can cause accessibility issues. One of the easiest ways to use a select element as navigation is to apply the JavaScript onchange event. For most people, you then navigate by clicking the drop-down. The select box then shows the options (as in the screengrab of the Nokia music store shown above). The user can click the option they want, and the new page loads. Notice the use of ‘click’ in that description. Using a keyboard can be quite a different experience. For people using a keyboard with Internet Explorer, using onchange means that it activates when you press up or down. Often that means someone using a keyboard presses down and is immediately whisked away to another page. Historically, the advice from those who know about accessibility is to include a ‘Go’ button after the drop-down. That way everyone selects an option and presses a button, which is a standard way of going to a new page. The (top priority) checkpoint from the accessibility guidelines is that: “Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behaviour before using the component.” A setting would be the value of a form element, such as the text in an input or the option in a select box. A “change of context” would be going to a new page, or opening a new browser window. As I started this article, I thought there must be a solution to this issue out there by now; after all, it isn’t a problem for keyboard users with other

browsers. I started by creating a ‘bad’ example as a baseline to check against. Using jQuery, this was very simple: $(“#mySelectBox”).change( function () { var url = $(this).val(); window.location=url; }); (You can view the full example at alastairc.ac/ testing/select-nav-test.html.) However, this bad example wasn’t as bad as I was expecting! It seems jQuery (in version 1.4.2) has worked around the main problem. When using jQuery’s change() function, Internet Explorer does not automatically follow the first item. The keyboard accessibility of a drop-down created in this way is pretty good. You can tab to the select box, press up or down with no ill effect, and pressing return takes you to the new page. It’s not perfect. If you (accidentally) change the value and then try to tab away from the select box, it still activates. So you do need to make sure people know it is a navigation mechanism. Providing a label is the most obvious method as it’s required for form elements anyway. Just be sure that if you use another method, you include both keyboard users who can see it and those who cannot. ●

Proﬁle Alastair Campbell is director of user experience at digital agency Nomensa (www. nomensa.com). From a usability background, Alastair embraced technical web standards seven years ago.

.net november 2010

111

.net web_pro opinion

Charles Weir on…

Locationbased apps

Mobile-based location services are about to get big. Really big. Charles Weir, managing director of mobile software developer Penrillian, explains why the future’s bright Harnessing the full potential of mobile location-based services bewitched developers and handset manufacturers during the last decade. Too often, the technology was proclaimed to have come of age, only to vanish when companies reached out to monetise it. But despite the false dawns, Google, Facebook and the other juggernauts of the mobile world are still hot on its heels. With new applications coming out and more users willing to share their whereabouts via handsets, the true realisation of location-based services is at last on the horizon. We’ve seen attitudes to location-based services develop rapidly over the last few years. Location is now a key component in social offerings such as Foursquare, Google Buzz and Twitter. This burgeoning technology has a long way to go, with issues around privacy and other social concerns still to be addressed, but it has limitless potential.

Early adopters

Today, users can choose to share their location with a select group of individuals in return for a perceived benefit. Foursquare, for instance, acts as a forum for early adopters to share where they’re drinking coffee or what their favourite bookshop is – a pretty slim-value proposition for most of us. But as mobile social networks grow in popularity, users will be able to form new communities instantly, based on location knowledge. The growth in mobile location applications among businesses is being spearheaded by those who can gain value from tracking the locations of their staff or colleagues. We’re developing a tracking application for Romex (an employee

management and protection service) that enables any employee to run an app on their phone that tells other people where they are. This kind of application has enormous value for an employer. Companies managing fleets of delivery personnel or mobile workers need up-to-the-minute info about their location. Details supplied by the platform we’ve developed enable Romex to offer customers solutions that make staff more efficient. As phones become more sophisticated, with improved battery life that enables always-on GPS, location technologies will become more robust and ubiquitous. Indeed, at Penrillian, we’ve been working on new software technology that reduces GPS’s battery use on existing phones. People will start to use location-based services that rely on sharing their location information with everyone. At this point, brands are looking to target consumers in a very specific way and giants such as Google could be the first to reap rewards. Marketers can use location to create campaigns aimed at more specific age, gender, income and

“It’s so powerful that one day all apps will make use of location in some way” Charles Weir

lifestyle segments. Google indexes nearly all online content, products, businesses and even locations via Google Maps – though the main concern is how it uses the data it collects.

The future

We can only speculate as to how location technology will be used further down the line. As long as consumers are happy for trusted sources to know their location, the captured data can be of huge benefit to the industry. The potential of the technology is enormous: it could be applied to anything from playing 3D real-world games where players on the same street are involved in your game, to arranging business meetings with those in the same area. In the shorter term, it can give a context to all the user does – am I at home, at work, or at a club? Once user demand picks up enough momentum to snowball mass adoption, location-based services will reach true ubiquity, with most consumers taking them for granted. In the long term, mobile location services will become a key tool to help consumers get to where they want to be – not just through navigation, but by networking them with valuable people, products and services. The rapid development we’ll see in this area over the next decade spells massive opportunity for innovation and revenue generation in the mobile software industry. We just need to decide where we want to go with it. ● Charles is managing director for Penrillian (penrillian.com), and an expert in developing software for the mobile industry. Penrillian works with firms including Vodafone, T-Mobile and O2.

.net november 2010 113

.net web_pro ecommerce

Ecommerce The borders between online and ofﬂine are breaking down, encouraging small retailers to ﬂock to the web, says Fadi Shuman

This month’s recommended… Business builders Name Cartfly URL www.cartfly.com Info You can sell just about anything on just about any website using this clever widget. Simple but does the job.

Indie etailers: the new rock stars Increasingly, the online and offline worlds are working seamlessly together, and ecommerce is actively helping to level the playing field for any would-be retailer. A great example of this is supermarketsarah. com. Sarah has taken her Portobello Road Market stall and placed it online. Her website has become a shop window from which everything is for sale. Every month she has a new window display online and has become so well known that she now has guest celebrities designing her window displays. She used to have 100 people walk passed her store and now she has 10,000 visit her every week. Similarly ReKnit (rekn.it) was a small family business that turned old or unwanted sweaters into more practical and usable items, such as gloves, scarves and hats. The site enables you to send your unwanted items in and choose from a number of designs for your new hand-made, oneof-a-kind piece of clothing. The business is now growing at a rapid pace thanks to its international exposure through going online.

Name Payvment URL payvment.com Info Build an ecommerce store-front within Facebook and start selling your wares to everyone in your book. It’s free and easy to implement, and checkout happens through PayPal.

The internet of today is socially connected and is the perfect environment to help a good idea be transformed into a great business with ease. Systems such as Wazala (wazala.com) enable you to build an ecommerce store within your site in just 15 minutes. Payments provision is another sphere in which things are changing fast. Wazala works with both Google Checkout and Paypal, and the arrival of systems like Square (squareup.com) means you can accept payments anywhere, providing you have a smartphone or an iPad. Square enables you to plug a special dongle into your headphone socket and take credit card payments. While it’s currently only available in the US and transactions are limited to $70, it’s still a great example of how advances in technology are taking shape to help the regular Joe etailer. These are just a few examples of how the retail market is now available to anyone. There are plenty more diamonds out there waiting to be discovered and new SME-friendly technologies coming to the fore. ●

Name Alvenda URL www.alvenda.com Info The best of the social ecommerce widgets. The advantage Alvenda has over its rivals is that the checkout happens within the widget. ‘Like’ 1-800-Flowers on Facebook to see it in action.

How to… Send out more profitable email campaigns Expert advice Name David Hughes Job title Founder Company The Mail Academy URL theemailacademy.com

You don’t need reminding that we’re entering the “Golden Quarter” of 2010. Between now and 22 December, ecommerce fortunes will be won or lost. What can you do to make sure you’re on the right side of the equation? In these harsh recessionary times it may be best to hang on to the customers that you have, and so here are some tips for delivering relevant, engaging email campaigns that will give you the best chance of a Merry Christmas.

114

.net november 2010

1 Do something different About 90 per cent of your customers won’t have clicked on one of your email links for more than three months. Why not use a different ‘From’ field for these people, such as offers@acme.com, or sophie@acme.com? Why not send out shorter emails, or three that build a story? 2 Don’t be boring Our inboxes are full of bland, dull, one-size-

fits-all email messages. Cut through the clutter with well-written, interesting messages, rather than just “shouting” discounts. 3 Be relevant Segmentation is easy. Break down one campaign into ‘old customers’ and ‘newer’ ones, or ‘product A’ rather than ‘product B’ purchasers. Make the messaging relevant for each group and you’ll get better conversion rates as a result.

4 Personalise Personalisation is not just starting with ‘Dear Firstname’. How about a different subject line for your best customers, or different images based on what they bought before? “More great widgets in our Autumn collection” is a far more compelling subject line for widget buyers than “October Newsletter”. 5 Preview pane You have just seconds to convince people to read more: use text,

not images, in the first few lines of messages for your non-clickers. People will now have enough information to consider opening your message and clicking through to your site.

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

.net web_pro security

Security

Secunia’s latest release takes much of the hassle out of patching your software. Mike Williams explains how it works

This month’s recommended… Secunia security resources Name Personal Software Inspector 1 URL bit.ly/secunia1 Info PSI 2.0 is still a beta, so you may not want to rely on it for your security just yet. Secunia PSI 1 is still available, and perfectly adequate as a pointer to your insecure programs.

Automatic updates for all your apps (almost) It’s no secret that security patches should be installed just as soon as they appear, to minimise your exposure to malware. But let’s be realistic – the mechanisms for doing this are a total mess. Windows uses one system; other Microsoft apps can use it too, but that won’t necessarily be enabled on every PC. Adobe uses a custom updater for its software, Apple uses its own system for its programs, and it’s the same with many other vendors. So you end up with a host of separate updaters, all with their own interfaces, each with its own way of warning you what’s going on. And all of them use up RAM, system resources and bandwidth. As I said, it’s a total mess. Secunia PSI (Personal Software Inspector) offered some limited help in the past, scanning your PC and reporting on any applications that had security patches available, or that had become unsupported. That was good, but then you still had to locate, download and install all the patches yourself. Now though, Secunia has just released the beta of PSI 2.0, and this improves the program in a couple of useful areas. The first is installation. PSI 2.0 can now watch the programs you’re installing, and will warn you if you’re installing something that isn’t the most up-to-date version of a program.

How to

Get started with Secunia PSI 2.0 No one has time to wander around the support sites looking for updates to all the programs they’ve got installed. So it’s just as well that Secunia PSI 2.0 can do this for you. And in many cases, it’ll locate, download and install the necessary files, too. Despite the fact that it’s still a beta, the system seems well-implemented and is extremely easy to use. Here’s what you need to do to keep things up to date.

Better still, PSI 2.0 doesn’t only detect insecure and outdated programs; in some cases it now understands how to update them. So when we tried the program, it detected we were missing updates on our Flash Player, Adobe Reader and VLC Media Player. Flash and Adobe Reader were automatically patched, with PSI locating, downloading and installing the necessary files for us. And it also knew where the VLC Media Player update was located: all we had to do was click an ‘Install Solution’ button to get the latest version on board. At the moment, PSI 2.0 can only do this with a few programs. But it’s only a beta, so that’s no real surprise, and even now there’s real value here and promise for the future. It looks like Secunia PSI 2.0 really could replace the current tangled mass of company-specific update tools with a single, unified product that can handle security patches for most major applications (and plenty of minor ones) all on its own. If so, it will be a major breakthrough in PC security management, and a great way to help keep the Windows world safer. Download the beta yourself from secunia.com/ blog/123 to have a closer look. ●

1 Launch PSI 2.0 and wait while it checks your web connection. If it doesn’t launch a scan immediately, click Scan in the top-left of the screen, then Start Scan.

2 The scan should take a minute or so. When done, click View Dashboard to see what it’s found. End-of-life and insecure apps will appear at the top.

Name Online Software Scanner URL bit.ly/secuniaoss Info If you’d rather not install another package at all, try Secunia’s online scanning service. This detects outdated programs, missing Microsoft patches and more, all from the service’s web page.

Easy life Secunia PSI 2.0 can identify outdated apps, and will sometimes even download and install the upgrades

Name Secunia Blog URL secunia.com/blog Info Secunia’s blog isn’t updated too often, but when posts arrive, they usually contain detailed information on security and patching that you won’t find elsewhere. Well worth a read, especially for the technically minded.

3 Messages will tell you some programs are being updated automatically. Click any Install Solution buttons to get the latest version of that program.

4 Check the AutoUpdatable box to see which apps PSI 2.0 can update on its own. There are only a few for now, but this is sure to increase over time.

.net november 2010

115

.net web_pro startup

Startup

A good business idea needs to be communicated effectively if you want to turn it into reality, says Wendy Tan White

This month’s recommended… Pitching advice Name Growing Business URL www.growingbusiness. co.uk/how-to-createthe-perfect-businessplan.html Info Advice on how to create a clear and concise business plan that will generate interest from investors.

Communicate your idea so it lands Whether you’re communicating your business idea to a potential partner, investor, customer or bank manager, you need to be sure that it resonates in the right way with the right audience. This can happen in any way from the classic two-minute ‘elevator pitch’ to a two-hour formal presentation to an investor, but it’s important to realise that there are different means of communicating the same idea. Following Moonfruit’s recent announcement of $2.2m investment for international growth, this point of communicating your ideas to investors has been all the more prominent in my mind. To start with, your presentation should hold an executive summary upfront – this contains your entire presentation in a one-page nutshell. Moving on from there, you should outline the team of people your business holds – to prove your credentials, that you’re right for them and that they’re right for you. From here, address what problem it is you’re trying to solve. As mentioned in last month’s article, typically a business will look to provide a

How to

Nail your elevator pitch You have an extremely short amount of time in which to make your impact, so make sure you’re clear and certain of your business before delivering it. Given that your time is short, it’s important that you inject personality into what you’re saying too, – first impressions count. As much as it’s a cliché, business is people-led, so for someone to buy into your business idea, they need to buy into you too. A successful way of executing this is to know something about them with which to engage. Here are the key points to address in your elevator pitch…

116

.net november 2010

solution for an existing problem; this is your market opportunity. The next logical step is to share your primary and secondary research to back up the need for your business, and this should act as a proof point for why you believe your business deserves investment. This can also be elaborated upon further through a case study – an example of someone who is better off thanks to your business. Depending on your product or service, this could be a physical demonstration by a potential customer, even if it’s a friend in your living room! This often brings a reality to your product for those you’re presenting to, and the more you can do to prove the worth of your business, the better. You should already have your business model, which explains how you are going to make money. Over a given period you should forecast your sales, revenue, costs and when you’ll be profitable. Even if you’re going into debt, always be honest and realistic in what you’ll be investing personally and, ultimately, how you’ll survive. Finally, be passionate and be yourself; most people are buying into you, not just your business.

1 What your idea is – you should be able to explain it in one line. This should cover what problem or issue it is you’re solving and who it caters for. See pitches. techcrunch.com for some good examples.

2 Why now is the right time: what the market opportunity is, and what the business model is. For an overview of the different models, see mashable.com/2009/ 07/14/social-mediabusiness-models.

Name Harvard Business Review URL blogs.hbr.org/ nivi/2009/04/how-towrite-an-elevatorpitch.html Info Article on how to translate the concept of the elevator pitch into a short email. Name Read Write Web URL www. readwriteweb.com/ archives/twitpitch_the_ elevator_pitch_hits_ twitter.php Info Explains the idea of pitching publicly in just 140 characters or one picture via Twitter. 3 Why this should interest whoever you’re talking to. What about the idea will appeal to them? For advice from Business Week on how to tailor your pitch to a specific audience, see bit.ly/cbNR5u.

4 Has it landed? Is your audience engaged and asking questions? Ideally, your pitch should lead to further dialogue and interest. For further tips on pitching from Business Insider, see bit.ly/8ZtKlQ.

.net web_pro hosting

Hosting

We asked the experts which extras should sway your decision in choosing a web host. Their answers may surprise you, says Karl Hodge

This month’s recommended… Search ad resources Name Google AdWords URL adwords.google. com Info Here’s where you can get Google traffic delivered to your site. Spend your AdWords vouchers wisely, using Google’s keyword and analytic tools.

Do extras really add value? As long-term consumers of web hosting packages, we’ve seen plenty of marketing tricks designed to reel us in. They range from free email boxes and extra domain names to bundled software and discount offers. But are any of these extras really worth signing on the dotted line for? We asked industry experts – and they were almost unanimous in their opinion. “I think for 99.9% of users, most extras are complete fluff and of no use to them at all, and they’ll never use them – it just makes them feel like they’ve got a better deal,” says Karl Austin of KDA Web Services Ltd (www.kdawebservices.com). “I guess the most useful ones for some websites could well be Google/Bing advertising vouchers.” Jacob Colton of Catalyst 2 is in agreement. “The answer is relatively simple,” he says. “The extras that enable your site to be promoted and marketed for no cost, such as AdWords and adCentre vouchers, are great. But random pieces of software that are

Name Google AdSense URL www.google.com/ adsense Info Enables you to carry advertising on your own pages. Match ads carefully to content and your site could soon pay for its own hosting.

most likely going to be installed and uninstalled in quick succession are going to add little value.” However, there’s a dissenting voice. Edward Dore of Freethought (freethought-internet.co.uk) argues that AdWords vouchers aren’t something you should base your decision on. “They seem to be the in-thing to give away at the moment, but you can find them nearly everywhere without too much effort, so are a poor reason to choose a host,” he says. So, what about other extras? “Probably the most useful ones you can get with hosting packages are free or reduced-price domain names,” says Dore, “although you always need to beware of becoming tied in to your host if they register the domain in their name!” And here’s one final thing worth noting: when you sign up for a reduced price, check out whether that reduction applies to renewals too. It’s often the case that the price will rise when the time comes to re-register your domain name. ●

Name adCenter URL adcenter. microsoft.com Info Microsoft’s Bing is the second-place search engine. Spend vouchers at Bing’s adCenter, and the more places you advertise, the more hits you’ll get.

Watchdog Karl Hodge probes Webfusion’s services Expert advice Name Karl Hodge Job IT journalist URL www.spodgod.com

Piotr Chmielinski wrote to us about problems with his Webfusion hosting account after months of emails and a letter of complaint. “I am completely disappointed with their service and lack of response,” Piotr

told us. “Even my ‘dedicated account manager’ simply ignores me.” We could understand his frustration. The dedicated plan he’d taken out wasn’t cheap, yet hadn’t really worked from day one.

Piotr’s issues with the account were mainly to do with poorly configured server components. First he needed a new control panel installed, then web mail, then issues started popping up with script functionality. When Piotr contacted us, he was ready to cancel his contract and seek legal action to retrieve his fees, totalling over £1,800. Webfusion reacted quickly once we became involved. The

company’s hosting support manager, Craig Ingham, contacted Piotr personally to discuss the issues he’d written to them about previously. “The outcome of the conversation has been constructive and friendly,” Webfusion told us, “Craig has provided Mr Chmielinski with his direct contact details should he have any further questions regarding our services. “Mr Chmielinski raised concerns regarding the time it

took for his problem to be fully resolved; Craig acknowledged this feedback and gave assurance that these issues have been taken on board – they were not synonymous with the service Webfusion offers for its dedicated servers. He apologised for any frustration surrounding the contact Mr Chmielinski had received.” When we contacted Piotr again, he seemed happy with the way the situation had

been resolved. He had been offered a refund for the time that his hosting plan was out of action and had also been given an apology for his experience with Webfusion.

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 november 2010

117

.net web_pro analytics

Analytics

A new report points to the problems in measuring the effectiveness of social media, says Hugh Gage Q&A Name Brett Bannister Job title MD Company SportsShoes.com

The problem with Facebook data The 2010 Online Measurement and Strategy Report from Econsultancy and Lynchpin has been published. As usual, it provides a valuable insight into the state of the web analytics industry and the issues faced by businesses as they continue to develop their online measurement and performance improvement strategies. Unsurprisingly, this year there’s more talk about measuring the commercial impact of social media. As Facebook surpasses half a billion users, it becomes harder to ignore, even for its most strident detractors. The measurement of social media also shines a light on another area that’s providing a challenge to the analytics community, that of tracking performance through the line, such as from offline to online and vice versa.

Measuring impact

On Facebook, people can “like” things, but getting them to take action is another issue. Twitter might produce a sudden avalanche of activity around a brand or an issue, but measuring its impact is hard because it moves extremely quickly and doesn’t necessarily result in directly traceable visits that are referred to a desired website. As the report indicates, Google Analytics had another good year and is now used by the majority (87 per cent) of companies surveyed, with 38 per cent using the tool exclusively and 49 per cent using

it in conjunction with another tool. Because it’s free and is also encroaching on enterprise-level territory in terms of its feature set, companies are able to save money on this area of technology. Money saved on technology can be used to pay for that other precious resource – people. Comprehensive measurement strategies often use more than just a standard click-stream web analytics tool, meaning that the emphasis on the people needed to draw together various types of data from different sources becomes ever greater. It’s the analyst who bridges the gap between social media and sales and between online and offline. Companies are seeing this and are now starting to invest more in their people, either by training them up internally or by hiring in consultants to help interpret the data and turn insight into action. The final issue is budget, which continues to stunt growth; a lack of understanding was also cited, and the two are probably connected. Again, people are important here. People are needed to demystify web analytics and its commercial benefits when making the case to budget holders. The lesson that I take from this year’s Report, and from my own experience over the past year, is that people are important to effective measurement and improvement strategies – not just for their ability to interpret the data and produce insight to drive action, but also, more importantly, for their ability to communicate it in a compelling way. ●

Statistics Web analytics expenditure in 2009

Web analytics expenditure in 2010

Technology: 39%

Technology: 30%

Consulting and services: 19%

Consulting and services: 17%

Internal staff: 42%

Internal staff: 53%

Source: Econsultancy in association with Lynchpin – Online Measurement and Strategy Report 2010

118

.net november 2010

.net: What technology do you use to improve site performance? BB: We’re using Google Analytics, Google Website Optimiser, Adobe Merchandising, DC Storm and heat mapping coding from Clickdensity. .net: How many teams work on your site? BB: We have three internal teams – Development/Tech, Onsite Design/ Merchandising and Marketing – and three external teams: Analytics, Search Engine Marketing and Affiliate Management. .net: How are you sharing insight across your teams? BB: All the insight in the world is useless unless it’s shared and acted on. Having loads of data and not doing anything with it is a waste of time and money – and in Yorkshire we don’t like either of those. Each team provides a monthly report that’s shared across the entire online team. The key reports are the online report, the best-sellers report and the channelspecific sales reports. We also use Wikis to document things internally and have various topic specific email groups, which include both internal staff and external partners and provide the forum for some lively debate.

.net web_pro search

How do you know if your SEO is performing as well as it should? David Deutsch of Fortune Cookie explains all

This month’s recommended… Analytics SEO resources Name Wordtracker URL wordtracker.com Info Wordtracker enables you to dig deep into the ‘long tail’ of keywords. It has been designed specifically to help you find new money-making niches.

Measure your search strategy’s success Over the past two articles, I’ve been telling you how important it is to spice up your SEO so that more people see your content and click on it. What I haven’t touched on yet is how to measure the effectiveness of your SEO listings. In this article, I’ll take you through a technique that will help you to gauge how well your site is doing compared to what it can actually achieve. Step one: Make a list in Excel of all the keywords you’re trying to target. Don’t be shy: add as many long-tail keywords as you can think of. You’ll need to write one page of content per keyword later, anyway. Step two: Copy your list of keywords and go to adwords.google.com. After you’ve pasted your keyword list into the form and make sure the results only show traffic for your target market and that you choose the ‘Exact Match’ option to get the most accurate figures. Download the results from that search in cvs format so that you have it on file.

Name Analytics SEO URL analyticsseo.com Info Analytics SEO is an online SEO software that integrates with Google Analytics and helps you to improve your website’s ranking with search engines.

Step three: Go to whatever analytics platform you use and create a filter to track all of the keywords in your list. Save the results on Excel and compare them with the number of people actually searching for your target keywords. Use Excel to find out what percentage of your target market you’re getting versus how much you can achieve with perfect SERPs. Step four: Perform a search on all of your keywords to see what position you’re in for each keyword and record it with the other data. This procedure will reveal exactly how well your search listings are doing compared to their potential. You’ll most likely find that your listings can be doing much better than they actually are, which is why I attempt to create the perfect SERP for each targeted keyword. Being the first result listed from a Google search simply isn’t good enough any more. Next month I’ll be explaining how to use blogs to their highest potential. ●

Name Seoquake URL seoquake.com Info Seoquake is a powerful tool for Mozilla Firefox, aimed at helping web masters who deal with search engine optimisation and internet promotion. All SERP changes are tracked down and taken into account.

How to… Ensure effective SEO reporting Expert advice Name Laurence O’Toole Job title Managing director Company Analytics SEO URL analyticsseo.com

In my experience, marketers tend to be better at creating, planning and executing than they are at reporting and analysing their successes and failures, and identifying ways to improve their ROI. Poor SEOs probably fall into this bracket, too; good SEOs don’t. Being successful at SEO doesn’t require rocket science, but rather a systematic approach to the whole process. Effective analysis and reporting is required at every stage, not just the end of the process.

1 Stay up to date SEO is a continuous process. Search engine algorithms don’t stand still and nor will your competitors – every day there are new rivals chipping away at your share of search results. You need to implement a process that can report on this activity as it happens. 2 Benchmark yourself Competitive benchmarking is essential. Benchmark where you’re at before you start.

Don’t just look at how well structured and optimised your site is; look at how well you are doing compared to your rivals, too. 3 Set your goals Set yourself specific targets and measures of success. Ensure you have an easy means of checking how you’re progressing to target. 4 Keep an eye out Create a mechanism for monitoring the competition and how the environment is changing. Who

is growing links aggressively? Who is adding new content? What new entrants have appeared in the search engine results? 5 Report back Identify your key stakeholders and what they’re looking for, and deliver this when they need it. Don’t send the same report like clockwork every month. Mix it up a bit; use PowerPoint instead of a long Word document or PDF, for example, but keep it brief.

6 Allow some time Things don’t always immediately go as planned. Set alerts to warn you if you slip and set aside time to refine your approach at the start of each campaign.

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

.net november 2010

119

.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

Catalyst2

Mega Deal (Windows/Linux)

www.catalyst2.com

Power (Windows/Linux)

0844 484 9361

0800 107 79 79

£1.49

250MB

2GB

£4.99

750MB

10GB

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

Key hosting Service level agreement

Hosting type

Professional

£2.42

5GB

50GB

200

Business

£6.99

12GB

120GB

Unlimited

Daily Internet

Linux Entry

www.daily.co.uk

Windows Entry

0845 466 2100

Firewall

0844 3577 307

Virus ﬁlter

Unlimited

1GB

Power VPS (Windows/Linux) Home

Shopping cart

100GB

200MB

Cobalt Web www.cobaltweb.co.uk

Database support

10GB

£1

Telephone

Front page extension

£29.99

Package

Cost per month

Name and URL

Web control panel

D - Dedicated

Email support

R - Reseller

Phone support

M - Managed

O - Optional

POP3 accounts

V - Virtual dedicated

S - Shared

Monthly bandwidth

Hosting types

N - No

Disk space

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

£2.80

2GB

10GB

Reseller windows

£19.95

5GB

50GB

100

Reseller Linux

£19.95

500GB

50GB

100

Fasthosts fasthost.co.uk

Home

01480 26 00 00

£4.99

2GB

Unlimited

500+

Developer

0844 583 0777

£8.99

5GB

Unlimited

1,000+

Business

£15.99

Unlimited

ForLinux Ltd

Dedicated Apache cPanel webserver

£349

2x250GB

300GB

www.forlinux.co.uk/linux

Dedicated MySQL database server

0845 4210 440

£449

2x300GB

500GB

Dedicated Application ﬁle CMS server

£495

2x1TB

1TB

Virtual Email server

£229

100GB

120GB

Virtual Website CMS server

£349

240GB

Website Hosting Cloud

£499

100GB

200GB

Private Cloud

POA

As requested As requested

Bespoke high speciﬁcation solutions

POA

As requested As requested

MD S

Heart Internet

Starter Pro

£2.49

5GB

30GB

1,000

£19.99

www.heartinternet.co.uk

Home Pro

£8.99

20GB

60GB

10,000

£19.99

Business Pro

£10.75

Unlimited

£29.99

Unlimited

£79.99 & £89.99

160GB

Unlimited

Reseller Pro Dual Core (Windows & Linux)

0845 644 7750

Continues–over–the–page

.net web_pro/classiﬁeds Key hosting

Package

Telephone

Firewall

Phone support

Email support

Web control panel

Service level agreement

Hosting type

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

Disk space

Name and URL

Virus ﬁlter

D - Dedicated

Shopping cart

R - Reseller

Database support

O - optional

Front page extension

M - Managed

POP3 accounts

V - Virtual dedicated

S - Shared

Monthly bandwidth

Hosting types

N - No

Cost per month

Y - Yes

£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

£3

500MB

5GB

100

£6

5GB

Unlimited

1,000

RESELLER

£25

Unlimited

MAX

£50

5GB

100GB

1,000

Nicobyte Web Solutions

Linux Unlimited

www.nicobyte.com

Windows Unlimited

0800 061 2801

N/A

£4.99

Unlimited

N/A

£4.50

Unlimited

N/A

S N/A

Email Hosting

£1.50

Unlimited

N/A

Site Builder

£6.49

Unlimited

N/A

Shop Builder

£7.99

Unlimited

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

£1.99

25GB

500GB

£4.99

100GB

1TB

100

Hosting type

020 7252 2310

Pro

Service level agreement

Personal

Web control panel

OVH LTD

Email support

Telephone

Phone support

Package

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

TwentyHost

Reseller Advanced

www.twentyhost.co.uk

Reseller Professional

UK2.net

Starter

www.uk2.net

Home

01332 600300

0800 612 2142

£60

11GB

170GB

Unlimited

£80

15GB

23GB

Unlimited

£2.95

500MB

1GB

£3.95

3GB

100GB

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

0871 641 2121

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

OS support

Dual-Core XL

Cloud/hybrid available

www.1and1.co.uk

Telephone

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

Quad Core I

From £69 2x250GB Unmetered SATA RAID-1

www.1steasy.com

Quad Core II

From £99 2x250GB Unmetered SATA RAID-1

Dual Quad Core I

From £179 2x500GB Unmetered SAS RAID-1

Dual Quad Core II

From £249

4x1TB

Unmetered SAS RAID-1

Dual Hex Core

From £399

4x1TB

Unmetered SAS RAID-1

Catalyst2

Bronze

www.catalyst2.com

Silver

0808 222 2221

0800 107 7979

Gold Custom Virtual Dedicated ehosting

£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 260000

£80

n/a

SAS

0845 4210 440

£349

2x250GB

300GB

SATARAID1

£449

2x300GB

500GB

SAS

ehosting.com Fast2host fast2host.com ForLinux Ltd

Dedicated Apache cPanel webserver

www.forlinux.co.uk

Dedicated MySQL database server Dedicated Application ﬁle CMS server Virtual Email server

£495

2x1TB

1TB

SATARAID1

£229

100GB

120GB

SATA

Virtual Website CMS server

£349

240GB

SATA

Website Hosting Cloud

£499

100GB

200GB

SAN

Private Cloud

POA

As requested As requested

Bespoke High Speciﬁcation Solutions

POA

As requested As requested As requested

SAN

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

Y Y

Hostway ltd

2 vCPU

0808 180 1880 Request

50GB

Request

SAN

hostway.co.uk

4 vCPU

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

NetBeneﬁt

0845 200 0699

N/A

0800 328 7477 Request

Netcetera

VM500

0800 061 2801

www.netcetera.co.uk

VM2000

Various

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

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

ServerBeach

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

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:

MAGAZINE AWARDS_ 2010

0845 544 0465

From

£75

2.6Ghz

Up to

24GB

1TB

Ricardo Sidoli - Account Sales Manager | telephone: 0207 042 4124 | email: rsidoli@futurenet.co.uk

VOTE NOW!

www.thenetawards.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

.net on_the_cd

Full program >

Advanced Web Stats 1.1

Your essential CD this month Track your performance Analysing your website statistics provides you with the information you need to ensure that your marketing strategies are working effectively, and to help you we’ve included a great piece of software on this issue’s disc. Advanced Web Stats enables you to effectively track and analyse your website’s performance over time and measure its effectiveness. You’ll also ﬁnd a full version of Rooster 2.9.2.1 , a powerful newsagent for Windows; over an hour of video training from the Inﬁnite Skills DVD Learning PHP MySQL Training; quality templates from Boxed Art and Allwebco Templates; a Flash toolkit; PDF extracts from the latest books, and more.

Website statistics analysis tool Requires Windows & OS X URL www.advancedwebstats.com

Advanced Web Stats enables you to effectively track and analyse your website performance over time by providing the right metrics to help you turn visitors into customers. It includes an innovative hybrid tracking method that analyses web server log files and JavaScript page tags at the same time. This clever method of analysis brings together information from both client and server side, and gives you increased accuracy and flexibility with the data that’s collected. Advanced Web Stats helps you quickly get powerful insights about your visitors’ behaviour by transforming raw data from web server log files and JavaScript page tags into intuitive reports that maximise website performance and ROI. Additional features include the Distributed Scheduler, which uses multiple instances to distribute the processing power for log files parsing and reports visualisation. It’s also possible to add multiple log sources to your profile if your website is load balanced over two or more servers to analyse the performance of your website, as well as export and share the reports provided by Advanced Web Stats with your colleagues or clients in the following useful formats: PDF, XML, CSV or TSV. If you’re using your website for ecommerce, then Advanced Web Stats provides advanced reporting and shopping cart analysis to properly analyse transactions and revenue by product or quantity. Users who are new to web statistics analysis will benefit from the simple and intuitive wizards included with the package, which provide step-by-step instructions allowing tasks to be completed quickly and easily. More seasoned users can customise the layout by installing their own CSS styles, as well as personalising headers and footers with their company’s information.

Please visit the following website to apply for your full version key: www.advancedwebstats.com/dotnetmagazine.html

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

Stats brilliant Advanced Web Stats transforms raw data from web server log files

and JavaScript page tags into intuitive reports that help you maximise site performance

128 .net november 2010

.net on_the_cd

Full program >

Rooster 2.9.2.1

News and RSS feed support Requires Windows

URL www.drivehq.com/web/brana/rooster.htm Rooster is a powerful news agent for Windows that provides support for RDF, RSS & ATOM feeds, simultaneously downloads articles for multiple feeds, posts articles to ATOM-enabled blogs, and more. You can simultaneously download articles for multiple feeds, schedule general checks and checks per feed, post articles, and edit and store a variety of download-conditionals. Rooster also enables you to manage, display, move, delete and flag articles in an extremely flexible way. Any articles you have downloaded can have a variety of actions performed upon them. Save, print and transfer feeds, as well as forward them by email, flag them, and more. Customise your news centre using the powerful Filters tool, and store articles for offline reading. Rooster also enables you to order your feeds with ease by managing names, edits, feed creation and deletion via the newsboxes for feeds options.

The version in the folder is fully registered.

Trial >

Handy tool Rooster is incredibly easy to use and provides an efficient way of managing address feeds while keeping URLs within an editable table for quick and regular updating

Resources > A collection of useful additions to your toolkit Requires Windows or OS X

SoundScalpel Sound Effects

PeepCode screencast

URL www.boxedart.com

Requires Windows or OS X

Requires Mac or PC

URL www.soundscalpel.com

URL peepcode.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, insects, weather and more. This issue’s CD contains 14 helpful effects for use in your projects.

PeepCode creates ﬁrst-rate training screencasts, with a new hourlong video every month. You can choose to buy a single episode or subscribe to the complete collection. This month’s extract shows how dynamically generated content can be served with Node.js. The full video can be bought at the PeepCode website link above.

BoxedArt templates

Infinite Skills PHP/ MySQL training Requires Windows or OS X URL infiniteskills.com This issues CD includes over an hour of quality training from Infinite Skills Inc dealing with PHP/ MySQL. Infinite Skills specialises in providing narrated video tutorials on a wide range of applications and programming languages, presented via an intuitive, easy-to-use interface. The complete DVD, Learning PHP/ MySQL Training, narrated by Robert J Tucker, comes complete with practical working files.

As well as the full version you’ll ﬁnd in the Full Software section, we’ve also included a trial of the very latest version of Rooster. Rooster 3.3 includes all of the useful features included in your free, full version as well as a variety of security enhancements and graphical interface enhancements.

BoxedArt supplies templates, interfaces, banners, buttons, menus and more. If you’ve purchased the unlimited download membership you can download any website template or other product type from dozens of web design, print design and multimedia categories for free. Full support and tutorials are available too, making BoxedArt a one-stop shop for almost all of your needs. Flexible, low-cost plans are available to both Personal and Developer Members looking for direct access to BoxedArt’s template collection. BoxedArt templates make it easy to create sleek, professional websites at a fraction of the cost of custom website development. On this issue’s CD, BoxedArt has supplied .net readers with ﬁve website templates. Bikini Model Contest, Landscaping Beauty, NetworkedGlobally, The Newsstand and Virtual Vault, in three useful formats: CSS, HTML and PSD.

AllWebCo web templates Requires Windows or OS X

Review extracts

URL allwebcodesign.com

Requires Windows or OS X

AllWebCo offers a range of complete sites with built-in JavaScript, Flash, CSS and multiple pages. Anyone looking to set up their own site can ﬁnd everything they’re looking for at allwebcodesign.com. On the CD are four exclusive Flash banners for general use. Please read the readme documents for usage instructions.

URL designingwithdata.com, packtpub.com/expert-php-5-tools/ book, tantek.com Extracts from A Practical Guide to Designing with Data by Brian Suda (Five Simple Steps), Expert PHP 5 Tools by Dirk Merkel (Packt) and HTML5 Now by Tantek Çelik (New Riders). See page 30 for details.

.net november 2010 129

.net on_the_cd

DISC

208 Complete listing

Full software

Extract from A Practical Guide to Designing with Data by Brian Suda (Five Simple Steps) Extract from Expert PHP 5 Tools by Dirk Merkel (Packt Publishing)

Rooster 2.9.2.1 (Windows only) Powerful newsagent that provides support for RDF, RSS & ATOM feeds, simultaneously downloads articles for multiple feeds, posts articles to ATOM-enabled blogs, and more.

SWF ’n Slide Pro 1.031 (Windows & OS X) Flash Banner Maker 6.4 (Windows only) Flash Decompiler Gold 2.3 (Windows only) Flash Packer 1.0 (Windows only) MicroVideo Converter Pro 8.2 (Windows only) Video To Video Converter 1.1 (Windows only)

Trial software Advanced Web Stats 1.2 (Windows & OS X) Statistical software.

Rooster 3.3 (Windows only) Powerful newsagent.

Resources

AllWebCo Templates BoxedArt templates SoundScalpel Professional Sound Effects PeepCode screencast

Free inlay

> 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 november 2010

PDF book extracts

Advanced Web Stats 1.1 (Windows & OS X) Statistical software that enables you to effectively track and analyse your website performance over time and measure website effectiveness.

Flash toolkit

Magazine ﬁles Tutorial/Android Feature/CSS3 Tutorial/Icons Tutorial/Menu

Video training

Over an hour’s worth of video training from the Inﬁnite Skills DVD, Learning PHP MySQL Training Extract from HTML5 Now: A Step-byStep Video Tutorial by Tantek Çelik Free branding aids courtesy of

>>Never miss another issue! Subscribe now When you subscribe, make a massive saving and get each issue delivered to your door for no extra cost

Visit www.myfavouritemagazines.co.uk or call 0844 848 2852