issue 219 september 2011 www.netmagazine.com

Issue219

september2011

£5.99

THEWORLD’S BEST-SELLER! FREE HTML5 VIDEO CD THISMONTHissue

219

Also inside >

Thewebdev’s intro to the cloud

Proguide to JS regular expressions

UpgradeDrupal sites toHTML5

Addautocomplete searchwithCSS3

Get the top5 free tools for SEO

Create iPadpublicationswithMag+

Createperfect sitestyleguidesGetconsistencywithourpro tips

Discover the topdesignand

developmentappsTODAY!

4 .net september2011

Build-off:Visitor attraction sites 112

Gallery 70 Profile/BrianHoff 82

“Thefield isevolving at thespeedof light”

Kristina Halvorson, page 38

.net content

50 freewebdesign tools 55

Opinion/MikeHook 98 Mobile attitudes 50

Feed 16

.net content

.net september2011 5

50 freewebdesign tools issue 219/september 2011

Specialsubscriptions

offer! >Turn topage42

(orpage84 for

USandCanada)

Web Pro126 Social mediaWhy

online reputationmatters

128 Hosting The newtop-level domains

129 Security Learn how tothink like a hacker

130 Marketing Is the timeright for SMO?

131 StartupsMarketing yournew business

132 Ecommerce Rewardusers for being loyal

133 Search Free SEO tools

134 Big Question How doyou handle email?

articles >14 The .net Awards

We explain how you canhelpmake the 2011 .netAwards the best ever

38 InterviewKristina Halvorson talks aboutthe emerging discipline ofcontent strategy and how tomake it work for you

44 Create the perfectstyle guideSteve Fisher explains how togo about writing a style guideto ensure consistent brandidentity across your sites

50 Mobile attitudesJust who is accessing the webviamobile devices andwhy?Mike Cornwell, chief executiveofficer ofMRM London,investigates

55 50 freeweb toolsthat rock!GaryMarshall shares 50 of thebest free web tools to helpbuild your site, fromwellknown tools asWordPress andDrupal through to some youmay have never considered

regulars >6 Welcome

10 Inbox

16 Feed

42 UK/overseassubscriptions

84 US/Canadasubscriptions

122 Expert advice

146 Next issue

showcase >

70 GalleryThe best newwebsites in thefollowing categories: CSS,HTML5, JavaScript, plug-ins,CMS andmobile

78 Focus_onLocation-based apps, contactpages and even portfolioscan be enhanced by theintelligent use of maps,saysMatthew Smith

80 OpinionDoes the release ofSchema.org spell the endof RDFa ormicroformats?Emily Lewis thinks there’smore to it than that

82 ProfileBrian Hoff reveals how hewent fromworking in anApple shop to using theiPhone to gather inspirationfor his design business

technique >

86 CSS3/adda searchbox toyour siteChristian Krammer explainshow to add a search box toyour site and enhance it withCSS3 functionality

90 InDesign/publishonthe iPadMike Haney demonstrateshow to incorporate video andHTML5 elements into yourdigital magazine

94 JavaScript/getstartedwithREGEXAndy Croxall gets under thehood of regular expressions

98 Opinion/a shiftinmindsetMike Hook looks at the hugegrowth and increasing impactof behaviour-driven design

100 Android/automateyourapp testingJohn Senner, KoaMetter andEmoryMyers ofMokaSocialreveal how to delegate thedirty work of testing

104 Drupal/simplifyandimproveyourHTMLJen Simmons shows you howto improve your HTMLmarkup

111 Q&AMartin Beeby talks about theIE10 Platform Preview 2

112 Websitebuild-offThis month, visitorattraction sites

116 MakeoverDevon Keller givesPresentWise a facelift

118 HowwebuiltMembers of Legwork Studiodiscuss thisshell.com

.net contentGet thetutorialfilesonline!● CSS3/add a searchbox to your sitenetm.ag/css-219● JavaScript/getstarted with REGEXnetm.ag/js-219● InDesign/publish onthe iPadnetm.ag/mag-219●Android/automateyour app testingnetm.ag/android-219

OR download thewhole lot atnetm.ag/files-219

.net july2011 7

>>Never miss an issue!

Subscribe now and get massive savings off store prices. With a

print subscription you’ll also get access to our digital archive via our

website – see www.netmagazine.com/premium. For full details,

see page 84 (US/Canada) or page 42 (everywhere else).

www.netmagazine.com/shop

“Following feedbackfrom our 2010Awards, we’veintroduced a numberof new categories”

advisory panelMolly HolzschlagAwell-knownweb standards advocate,Molly is group leader for theWebStandards Project. Among her 30-plusbooks is The Zen of CSS Design,co-authored with Dave Shea.www.molly.com

Fadi ShumanFadi Shuman is director and co-founderof Pod1, a global network of digitalagencies providing integratedecommerce andmarketing solutionsfor leading brands and retailers.www.pod1.com

Julie HowellJulie has been working in digital sincethe web began. She wrote PAS78, theUK’s first web accessibility standard.She currently writes about technologyfor BBCWebWise.juliehowell.co.uk

MargaretManningMargaret is CEO at Reading Room.She’s a frequent keynote speakerand recently won Female Entrepreneurof the year at the 2008 Fast GrowthBusiness Awards.www.readingroom.com

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

Andy BuddAndy Budd is designer and directorat design consultancy Clearleft (www.clearleft.com). He also organises thed.Construct web conference, andenjoys photography and diving.www.andybudd.com

Patrick H LaukePatrick works as web evangelist inthe Developer Relations team atOpera Software ASA. In a previouslife, he worked as web editor forthe University of Salford.www.opera.com

Ryan CarsonOriginally from Colorado, Ryan isthe founder of Bath-based webapplication and event companyCarsonified.com, and can be foundat twitter.com/ryancarson.

ryancarson.com

Voting has officially begun in thisyear’s .net Awards, and it’s timeto have your say on who deservesrecognition. Based on reader’snominations, we’ve drawn upshortlists in each of 17 categories.And we haven’t been resting onour laurels. Following feedback

from our 2010 event, we’ve introduced a number ofnew categories. Alongside familiar categories suchas Agency of the Year and Open Source Applicationof the Year, there are also a number of new additions,including Designer of the Year, Developer of the Year,and Brilliant Newcomer.

Under-21s are also being honoured for the first time,with the introduction of the Young Designer of theYear and Young Developer of the Year categories.

Public voting is open until 30th September, afterwhich, a shortlist of three in each category will besent to our panel of industry experts, who’ll make thefinal decision. Please take a moment to visit www.thenetawards.com and help us celebrate the hottestmtalent in web design and development!

editor-in-chiefwww.twitter.com/danoliver/

Want access to all ofthis great content?

Subscribe today to theprint edition of .net andget exclusive access toour digital archive!

www.netmagazine.com/shop

.net inbox

>>Write to us!Want to get in touch? Email

your comments and suggestions to

feedback@netmagazine.com

inboxYour emails, comments and tweets

Subject:3D in digitalFrom: Nik Antstis, www.gm-design.co.uk

I wanted to write in to congratulate andendorse the comments made by Chad Turnerin last month’s ‘Plan your way to a perfectsite’ feature and perhaps also attempt to getpeople to treat the use of 3D in digital withless surprise.

I’m a 3D motion graphics designer whohas become immersed in the world of digitaland UX design along the way, and I agreethat 3D is a massively under-realised andperhaps even misunderstood resource in thedesign arsenal. At gm-design we often flickopen Cinema 4D when discussing a conceptwith a dubious account handler or anenthusiastic and fast thinking client.

The speed at which potentially complexthought processes or design layouts can beexpressed is extraordinary. I feel it allows aless creative or visual client to understandand get to grips with the designer’s visionmuch more easily than perhaps a wireframeon its own could (dependent on the project).I’ve also found it to be an invaluable tool toinspire and excite in breakout sessions as avery quick and disposable discussion point,which everyone involved, creative and non,can instantly relate to. I’m in no way sayingthat this negates or indeed replaces theuse of wireframes or other more traditionalmock-up methods, but I certainly believe that3D represents a very useful addition.

Software solutions such as the wonderfulCinema 4D are coming into the budgetaryrealms of normal agencies and with powerful3D stock libraries such as Turbosquid at ourdisposal, previously inconceivable mock-upsor animatics can be rapidly realised. Usingopen source 3D software such as Blender isalso a viable solution for many tasks.

With web skills increasingly beingtransferred to mobile/touchscreen devicesand the drive to allow users to interact moreand more with our creations or client’sproducts, 3D seems to be a natural resourceto exploit in order to step past that screenpartition (mentally at least).

We live in a 3D world and I agree withChad that the time for being intimidated by3D is indeed over!We couldn’t agree more, Nik. Anyonewanting to go further with 3D, by the way,should check out our market-leading sistertitle 3D World (www.3dworldmag.com).

Subject:Weirder andweirderFrom: Chris Hester

After reading the latest issue cover to cover,I couldn’t help but feel that web design isgetting weirder, with all kinds of buzzwordsand acronyms flying around. We’ve now gotclouds, buckets, dragonflies and more. Takethese phrases in .net for example ...

“If you’re not sure what I mean by Agileand waterfall, you probably work waterfall and

might want to check out an Agile method, suchas scrum.” – Mike Byrne, page 90.

“There are no limits. One application can goeverywhere, even into your fridge.” – AugustoMarietti, page 107.

“It’s a brave new world … yarrr!” – AndyMarshall, page 90, pretending to be a pirate.

“Be careful out there.” – DerekFeatherstone, page 54.

While it’s good to see serious technicalarticles in .net, the above do make it evenmore fun to read. Just be careful out there,yarrr! There’s a waterfall in your fridge!True, Chris, discussions in our industry cansometimes get a bit Alice in Wonderland.But you can rely on us to steer you throughthe choppy waters of obscure acronyms anddodgy metaphors …

Subject: Lorem ipsumFrom: Sebastian Green

I wish to weigh in on the controversysurrounding the use of lorem ipsum (Inbox,issues 216 and 217). There is no point inwasting time using real content on designmockups. Save it for the development stage.

However, I do think the client should havesome final content ready, or at least havesome idea of the content, otherwise how canyou design? The design should be based onthe content and should make the contentshine, so without some idea of it there’s noway for the design to be truly effective.

What readerswantWe asked our Facebook followers (www.facebook.com/netmag) which page orpart of the magazine they turned to first. Here’s what they said:

Pedro Reis: Last one. I always go backwardsfor a preview.Steven Grant: Design OffMG Khin: PHP tutos :PBen Ceglowski: The magazine part of themagazine. :DBaz Kika: Design off: all the chit chatand theory put into action. Defo bestbit. Be good to open it to the publictoo. So we can enter, best one getsput in the mag!Bimal Tailor: Design off.

Rikki Tooley: Cover story. They’re usuallywhy I get an individual copy!Mark Johnson: The contents page! Thenwhatever takes my fancy :)Nattapong Sompinta: Agree with Mark !!Martin Feer: Usually the Showcase and Prosection.Rob Golbeck: Usually I turn to the coverstory first, but I’ll often stop and read GaryMarshall’s column along the way.Jay Patel: The Showcase section is my firstpoint of call followed by the tutorials.

Potential for prototyping Nik recommendsCinema 4D as a tool in the web designer’s arsenal

10 .net september2011

Thanks for your thoughts, Sebastian. You’reone of many who feel strongly about thissubject: check out the comments on JohnMcGarvey’s recent opinion piece for ourwebsite (www.netmagazine.com/opinions/stop-using-lorem-ipsum).

Subject:Tutorial files (1)From: Loren Swendsen

Hi guys, love the magazine. I suspect thereason you separate out all of the downloadlinks (netm.ag/make-216, netm.ag/css-216,netm.ag/js-216 and even each individualbuild off design) is for tracking purposes orsome reason like that. It can’t be for us thereaders, can it?

As long as I’m subscribing to the magazineI’m going to want all of the supplemental

files. So is there any chance you can add anall-files-from-issue-216.zip download as well?I’m getting a little tired entering in all theseindividual links, saving, and unzipping.

Subject:Tutorial files (2)From:Mikie Booth

I’ve just bought the .net magazine issue 217and was going through the Flixel tutorial.Do you know where I can find the sourcefiles that go along with this to download? Inthe magazine I can only find a bit that saysdownload the tutorial files, not where.Mike – you’ll see the appropriate URL in thegreen/blue circle at the top of the first pageof each tutorial. They’re also listed on thecontents page. Loren – that’s not a bad idea.We’re going to start this from this issue: soto download all the files at once, point yourbrowser to netm.ag/files-219.

Subject:Education (1)From: AlexOlder, alexolder.com

In regards to issue 218’s Big Question – “Howmuch do you value a formal web designeducation?” I think, if done right a webdesign education can help. There are stillmany institutions, though, that are stuck withold books, old technologies and people whodon’t understand what’s involved in modernweb design and development.

What also needs to happen are internshipsand placements alongside devoted courses.These can really open the eyes of studentsabout what’s really going on, can lead tojobs following university/college and alsobuild upon skills that are being learned inthe classroom.

Obviously you can teach yourself, but Ithink there are many, many people who needpointing in the right direction and need ahelping hand to understand some basics. Butthe main problem is that a web design course

won’t cover everything that can be done onthe web so there needs to be some selectionoffered to students who want to focus ondifferent areas instead of forcing them allthrough the same course.

Subject:Education (2)From: Gordon

Great topic and great selection of pros on thepanel. As a professional ‘webucator’ I have alot of hope for the future of web education.I also know all too well the realities of tryingto write, implement and constantly revise acurriculum at the middle school, high schooland university levels.

If we accept the fact that educationalinstitutions are going to be 10-15 yearsbehind the latest trends in any industry thenit’s evident that we’re just now approachingthe first time when we can actually haveweb programs that are based on lastingweb standards (and not Dreamweaver andFlash). It was only 10 years ago or so that theweb standards movement had true tractionwithin the industry. Now we’re approachingthe time for the movement to move into theeducational system.

Your Big Question panellists were right tomention the WaSP and Opera curricula: theseare awesome! But they are just curricula, notactual programs. There are very few true webprograms at any level of education. That said,I think that in the next five to 10 years we’llsee more web courses covering a range oftopics, from web infrastructure to design anddevelopment, and even UX and accessibility.

At least that’s what I’m working towards,and I know I’m not alone. There are a lot ofother folks out there teaching full-time orpart-time in the evening to make this shift inweb education happen.

Hopefully as we continue to askthis question in the coming years, the

.net september2011 11

98 .net summer2011

.net technique opinion

“HTML5 is thefuture of desktopandmobilewebbrowsing andwebapps” Andy Marshall

The past year has seen companies suchas Google and Apple, as well as the likesof Andy Clarke and Jeffrey Zeldman,

making the case for HTML5. Heralded as an endto the proprietary muddle of third-party plug-insand archaic browsers that have plagued the webfor over a decade, HTML5 is the future of desktopand mobile web browsing and web apps.

Having decided to try my hand at this new-fangled HTML5 thing, I put out a tweet asking fora starting place. Diveintohtml5.org was the first tocome back, and in I dived. Soon I was ready to jointhe worldwide crusade to rid the web of unsightlypresentational HTML elements, inappropriate useof tables and browser hacks.

Flying the flagHTML would be my skeleton, the bare bones,the content laid out neatly with no presumptionsabout how it should look. On those bones I’d placelayers of carefully crafted CSS and jQuery thatbring the skeleton to life, making it move, danceand look rather pretty. The tools of my new tradewould be the likes of <header>, <footer>, <nav>,<section>, <article> and <aside>.

Unlike their presentational predecessors, theseelements no longer define, or even suggest,where their content will be placed on the page,nor dictate what it should look like. Instead,they simply imply the nature of the content, itsmeaning in relation to the document and itssurrounding content. Like microformats, we nowhave ways of writing HTML that give a machine themeaning and nature of the content so it can betterunderstand and index it. Which is pretty cool.

Yet while many of us appreciate these virtues,there’s also been a little confusion, particularlysurrounding the use of <article> and <section>. TheW3C documentation talks generally about whatarticles and sections might be used for and variousblogs have shed more light on the subject, but wemay still find ourselves floating in choppy waters.

In practice, we could have a section containingseveral articles each containing an aside, insidewhich you may find a footer, a header andanother section, and it would still happily validate.Essentially, there are no hard and fast rules asto how these new semantic elements can beused. We should instead take a leaf from CaptainBarbosa’s Codex Pirata, and better think of thesedocuments as guidelines:

“The Code is more what you’d call ‘guidelines’than actual rules. Welcome aboard the BlackPearl, Miss Turner.”Captain Barbossa to Elizabeth Swann, Pirates ofthe Caribbean: The Curse of the Black Pearl, 2003

Andy Clarke’s book, It’s Hard Boiled, draws on asimilar metaphor, alluding to the era of film noirwhere the anti-hero stood against the system andgot things done. He goes on to show what we canstart doing with HTML5, CSS3, @media queries andother progressive techniques right now.

Rebel with a causeDon’t design for the lowest common denominator(aka Internet Explorer), says Clarke; certainly don’tspend the next decade waiting for a fully cross-browser-standardised HTML5. Instead, designfor the best browsers now, while still providingan appropriate experience for those using lesscapable ones.

Thinking a little like a rebel will free up thatbit of creativity and courage to try your hand atHTML5 on a project today. Certainly, your visitorswill appreciate it, even if they can’t actually puttheir finger on it. And users stuck in older browserswon’t even be aware of what they’re missing.

“There’s the Code to consider.”“The Code? You’re pirates. Hang the Code, andhang the rules! They’re more like guidelinesanyway. Bloody pirates!”Elizabeth Swann to a bunch o’ lily-livered seadogs, Pirates of the Caribbean: The Curse of theBlack Pearl, 2003

It’s a brave new world … yarrr!●

Andy is co-owner of Moogaloo (www.moogaloo.com), a web design agency in Sheffield. He’spassionate about Photoshop, HTML and real ale.

HTML5for piratesTake a leaf out of Captain Jack’s book and think of HTML5 documentationas guidelines rather than hard-and-fast rules, says AndyMarshall

Andy Marshall on…

Yo-ho-ho Andy Marshall’s pirate-oriented takeon HTML5 tickled Chris Hester’s fancy

Lessons to learn Should we value formal web design education? Alex, Gordon and Leaper share their views,but what do you think? Weigh in on the issue and send us your thoughts

Brought to you by

.net Inbox is sponsored by Fasthosts Internet(www.fasthosts.co.uk), a leading UK webhosting provider. Since 1999, Fasthosts hasbeen at the forefront of server technologyand is an expert for reseller hostingsolutions. From only £19.99/month+VATfor the first year, Fasthosts Reseller Hostingoffers industry-leading products, an all-in-one control panel, exclusive resellerdiscounts and an independently certifiedtraining programme. All data is hostedwithin Fasthosts’ secure UK data centres andfeatures unlimited bandwidth and super-quickconnectivity. With 24/7 UK phone, onlineand email support, Fasthosts offers a resellerunrivalled performance, quality and greatvalue. More details at www.fasthosts.co.uk

answer will change and pros will cite moregreat web programs.

Subject:Education (3)From: Leaper

I think that saying you need a formal webdesign education to succeed in the industryis quite clearly not true. Some of the mostsuccessful designers out there (includingweb designers) have no formal designeducation at all. However, we shouldn’tunderestimate the value of having a formaldesign education. Although education can’tfully prepare you for the working world, itdoes lay solid foundations for you to buildyour career from and can teach you valuablelessons from an early stage.Thanks for your views, guys. If there’s aquestion you’d like to see answered by ourBig Question panel, let us know by emailingus at feedback@netmagazine.com.

Subject:Awards nominationsFrom: Irving Briscoe

Hey, you wonderful people at .net. It wouldbe awesome to be considered next year tobe a nominee in the .net Awards for YoungDesigner of the Year or Young Developerof the Year. I’m a 19-year-old designerand interactive web developer based inMinneapolis, Minnesota. My portfolio canbe found at irvbriscoe.com.

I’m not sure what your selection processis but it would be cool if you used populardev and design communities like Forrst andDribbble to search for potential nominees.I know some great devs and designers onthose sites that are around my age thatdeserve a nomination.

Maybe you guys can use their API toautomatically generate potential nominees.Just an idea. Some of us young devs anddesigners don’t really like to flaunt our ages.Nice portfolio, Irving: you’re obviously doingall the right things! To be up for a .netAward (thenetawards.com), someone hasto nominate you during the nominationsphase, which takes place between May andJuly. It’s too late for this year, but if anyonewants to nominate Irving in 2012, I’m sure itwould make his day …

@netmagHere’s what you wrote about issue 217,issue 218 and themag in general ...

funny how@netmag shouldhave an article on Coldfusionsecurity just when I’m doingColdFusion for myMScProject. huzzah!!

@stewartritchie

twitter.com/stewartritchie/status/93981116477870080

@netmagWhat happened tothe percentage in the BetaMeter section? I noticed itvanished a fewmonths ago.Makes me sad =[

@leebaillie

twitter.com/leebaillie/status/93623623545389056

According to an article in thismonth’s #netmag, developersaren’t “creatives” ....#designeruphisownbum

@ste_brough

twitter.com/ste_brough/status/93617619604750336

@netmag Any chance of a fulltechnicolour Nyan Cat pulloutposter in the next issue?

@benjaminparry

twitter.com/benjaminparry/status/84355945391587329

i bought my first @netmagand i think it’s awesome,really helped withmydesigning

@AshleyKelly95

twitter.com/AshleyKelly95/status/93601667496411136

@netmag and@ComputerArtsare really makingme think tobuy an iPad besidemy ebookreader just to be able to readthem in electronic format

@szabcsee

twitter.com/szabcsee/status/93572665608126466

lay in hospital reading@netmag ... great read & garymarshall’s face is so soothing#juskiddin

@andykinseytwitter.com/andykinsey/

status/85475155144478720

@netmag Sunday eveningssuck less with a net magazineto read

@ORIZONSTUDIO

twitter.com/ORIZONSTUDIO/status/92703867661332481

Like GaryMarshall in@netmag ‘sensible ppl postingveiled warnings, angry rants,self-pitying screeds’ on FB atweekends - so true!

@Dobwalls

twitter.com/Dobwalls/status/91820726310543360

Feelin like puttin @netmag towork and gettin crazy into#devmode with some #html5& #css3. Programmalicious

@SniggitySnax

twitter.com/SniggitySnax/status/88361796590776321

diggin into good read of@netmag issue 217. Lovin thefact the CD has gone, replacedbyURL links, savingmoney andhelping environment sweet

@kiran13xtreme

twitter.com/kiran13xtreme/status/91574590492512256

the articles in the new@netmag are really helpful!Especially the one about thenew@wordpress and the oneabout #newsletters.

@TimV_

twitter.com/TimV_/status/91408308098965505

I love that @netmag are notscared of the slightly nichegeeky topics :)

@lornajane

twitter.com/lornajane/status/85275794083037184

Just had choice of renewingmy@netmag subscription foranother year, or paying fortwoweeks’ food duringmymasters year. I chose .net.

@rhiaro

twitter.com/rhiaro/status/90800768801710081

Inspiration from #netmag thismonth onWordpress multisites on one installation...Clever stuff!

@ajdf

twitter.com/ajdf/status/90371257106841601

@drbparsons OMG! I fuckinglove .net magazine. /cc@goodonpaper @netmag

@eoghanmccabe

twitter.com/eoghanmccabe/status/85790523025133568

@Rich_Clark every issue of@netmag has an article thatmore than pays for themagand in issue 216 it was yours.Thanks!

@TwoLittleFishes

twitter.com/TwoLittleFishes/status/86104216690622466

@ryancarson great interviewin #netmag, really felt inspired.Shame I can’t convince thebosses to accept a 4 dayweek :(

@emma_swift

twitter.com/emma_swift/status/87202712910954496

Just read@ryancarson ‘sarticle in @netmag. Greatread. I cursed, because I sent abig long essay email to himonce... :( Sorry Ryan!

@dooburt

twitter.com/dooburt/status/90436623497576448

totally dorking out onWordPress 3.2. Amazing!Missed abunchof new featuresin the 3 release but@netmag’sgreat article explains all...

@timboreader

twitter.com/timboreader/status/91424656489324544

Reading a great magazine,“Web Design Essentials, Vol2.” from@netmag! Fantasticcontent. Can’t put it down.

@carlinscuderi

twitter.com/carlinscuderi/status/85189119784910848

Tweet feed

Brought to you by

Green for go You’ll find the URL for downloadingtutorial files in the coloured circle on the first page

12 .net september2011

Cartography has a long history, andsome of the most beautiful maps in theworld are ancient ones. Have we lost

the beauty of great maps and relegated them topure utility with Yahoo or Google Maps? Not atall. An open API, new map tools and good designsensibility can help us to have the best of bothworlds. Beautiful cartography is back on the map– so to speak.

Design your own mapsUsing Google’s Map API (http://code.google.com/apis/maps/documentation/staticmaps) or tools suchas MapBox (http://mapbox.com), we can createdynamic colour systems and content-focused mapsthat get the data you don’t need out of the way, sothat the stuff you do need can rise to the surface.For instance, if you’re designing a map to look likepost-World War III America, you could remove alltraces of roads and buildings, and replace all mapicons with zombies. C’mon, you know you want to.

Don’t lose your headAs with any good design, it’s important thatyou don’t lose the usefulness of the map as youredesign the style. Make sure you’re maintainingclear distinctions for roads, boundaries, labels andother elements when necessary. The user should beable to achieve the actions you’ve set before them– whether the map is decorative, for exploration,or an integral tool to an app. No one said thatuseful roads must be yellow, but keep in mind thatyour audience may be confused by a map stylethat breaks the common colour patterns that havebeen established over the past decade. Do yourhomework and choose your styling carefully. ●

It’s important thatyou don’t lose theusefulness of themap as you design

focusf _on_on_

Usingmaps

(1) This example of a nightstyle map of Baltimore,Maryland, is an amazingshowcase of what’s possiblewith the MapBox tool anda great colour scheme(mapbox.com/#/tileset/baltimore-dark). (2) Youmay not need a worldmap. If this is indeed thecase, take some inspirationfrom the guys at theIrrland Tumblelog (irrland.sonntagskunst.de), whoare mapping a socialexperiment using Tumblr,

with this map as a postingplatform. (3) If all you wantto show on your map is aset of data points and eventhappenings, then checkout StartupWeekend(startupweekend.org/events), who have made asuper-sexy blue and whitemap with indicators ofthe most popular StartupWeekend events going onacross the world. (4) Thefolks at DocteurBourbon(www.docteurbourdon.be) stayed in the spirit

1

2

5

4

3

Location-based apps, contact pages and even portfolios can beenhanced by the intelligent use of maps, says Matthew Smith

.net showcase focus_on

78 .net september2011

Obsessed with creative inspiration (seehis site, patterntap.com) and attentionto detail (see his work at squaredeye.com), Matthew Smith loves helpingdesigners capture what inspires them.

of Google Maps, butdesaturated the colours togo for a subtle, in-brandeffect on their contactfooter. (5)Meanwhile,EveryBlock (www.everyblock.com) reallycustomises the lookand feel of its maps,turning them into simpleoutlines of districts andneighbourhoods that areeasily recognisable. Gettingthe details out of the waymakes for an elegant andeasily readable map.

90 .net september2011

.net technique indesign

InDesignpublishon the iPadMag+ enables you to create a digital magazine using InDesign that incorporates video andHTML5 elements.HTML5 elements. Mike HaneyHaney Mike walks you through the process walks you through the processyHaney Mike

What you’ll learn In this tutorial you’ll learn how to expand the functionality and userexperience of digital magazine tool Mag+ with some HTML functionality. It’s easier than youthink. With this you can take magazines, catalogues, presentations and so on, all on to iPad

Knowledge needed InDesign

Requires Adobe InDesign CS4, CS5 or CS5.5; Mag+plug-in for InDesign, Mag+ Production Tool, Mag+Reviewer, Photoshop CS4, CS5 or CS5.5. DownloadMag+ free plug-ins at www.magplus.com

Project time 1 hour

The possibilities for digital magazines onthe iPad are breathtaking. Manypublishers are moving their titles on to

this format. One software solution really catchingon is Mag+, from Moving Media+, the platformbehind pioneering titles such as Popular Science+and Transworld Snowboarding+.

Mag+’s simple InDesign-based workflow putsfull creative control in the hands of the designers,not the tech guys. Video, HTML5 elements andother interactive features are added directly inInDesign. It’s the only system with instant fullyfunctional layout review on iPad, so designers can

try new things and immediately see what the userexperience will be.

A Mag+ page creates a tactile experience, withenhanced design, making a digital canvas thatdoesn’t limit your design to the edge of the screen.

In this tutorial you’ll learn a more advancedtechnique, adding HTML functionality directly inInDesign to enhance the user experience.

The software, plus everything that you needto know about using it, can be downloaded forfree from www.magplus.com.

Expert tip InDesign and images

Always convert placeholder images into132dpi. InDesign is much better at inchesand millimetres than pixels so doing theconversion in InDesign is tricky. It’ll be mucheasier if you convert the image to the rightresolution in Photoshop. This is an importanttake away: the iPad screen is 132dpi.For native Mag+ pages, this will happenautomatically on export, but here you wantto make sure your dimensions are correctfor the HTML element box you’re creating.(Note: You can also scale the HTML elementby checking the Scale box on the plug-in.)

2 Set up document Activate the Mag+ plug-in andfill in the required fields. Issue is the folder you export to,Id is the name of the document you will have in the code,Name is what shows up in the Production Tool and whenusers bookmark a page, so make it something descriptive.

START The right template Start up InDesignand open the included template file [FILENAME]. This is themain template for all design work in the Mag+ format. Ifyou want to add your own swatches and formats you do soby creating or importing them into your new document.

About the authorName Mike HaneySite www.popsci.comAreas of expertise DesignKnown for Popular Science’sContributing Innovations EditorWhat was the last CD youbought? Foo Fighters’One byOne

Downloadthe files! >All thefiles you

need for this tutorial

canbe foundat

netm.ag/mag-219

Read ourZinio edition! >Read .netmagaz

ineon

your iPadvia aZinio

subscription: see

netmagazine.com/

shop fordetails

.net technique indesign

3 Prepare your assets Prepare your image assetsat this stage. The images you want to switch should all beof the exact same size and resolution to avoid any issueswhen switching. Use Photoshop or any other editing tool,and save the files at JPEGs.

9 Basic layout In InDesign, create your layout,remembering to make allowances for the richerfunctionality and reader interaction. So don’t place toomuch stuff on top of the image you are defining as anHTML area. More on this in the next step.

6 Code writing Substitute the included image linksin the HTML document for the ones you just created. Thestring <img src=”assets/chair0X.jpg” /> should insteadpoint to your files. Also, change the viewport parameterwidth to the width in pixels for the images you’re using.

7 Test-run in WebKit Test-run your HTML documentin Safari or Chrome, since they give the best approximationof how this function will work on the iPad. The webviewwindows in Mag+ use the iPad’s built-in browser capabilities.But it still makes sense to test-run on the desktop.

5 Assets in place The folder [Changing Images]holds all your HTML assets. In here you’ll find the assetssubfolder. Place your prepared images, except for the132dpi version, in here. In the included HTML document wepoint to that folder, but you can change it to another folder.

11 Object type The image you dragged into InDesigncan now be set up as an HTML area. Select it and setObjecttype to HTML in the Mag+ plug-in. Click on File to choose thelocal HTML file you have set up. This will now use thatarea as a webview window for your HTML.

4 Make a copy At this stage, you should alsoprepare a layout version of the first image in thesequence by making a copy of it and then settingthat copy to 132dpi resolution, without changing thefile’s dimensions.

10 Drag and drop The 132dpi image you created inStep 3 is your placeholder for the replacement HTML file.Simply drag and drop it into your InDesign workspace. The132dpi resolution will show up at the correct sizein your document.

.net september2011 91 next>

8 Test-run on iPad You should also test run your HTML functionality in Mobile Safari on the iPad. The simplestway to do this is to use Dropbox’s public folder for a direct web link. For more on how to achieve this in a simple way,see the Expert tip on the next page.

.net technique indesign

12 To scale You can set your pinning options for theHTML just like you would with any other object. But thereare a couple of options, especially for the HTML object type.In this case, when we have defined an exact viewport sizewe can leave the Scale contents to fit box checked.

18 Include in issue Hit Refresh if you haven’tdone so already. You should now be able to see thevertical you exported within the separated Clipboardsection of the Production Tool, to the left-hand side ofthe programme.

14 Fast review Hit Fast Review to check out yourvertical on your iPad. The HTML and the included assets areexported to the device and are locally stored within the file.Test out your HTML functionality on the iPad. You’ll see thatthe placeholder image is just used for the lo-res preview.

13 Setup for review Set up your system forreviewing by starting your Mag+ Reviewer app on youriPad. Input the IP address from the Help field at the top inthe Reviewer app into the Push review to device field underthe Settings tab in the plug-in.

FINISH Creating order Drag that verticalinto the Content Verticals area and place in whateverposition you’d like. If you have multiple verticals you canpreview them all together at once by hitting Review Allor Review Selected.

17 New brand You may also have to go into Settings and create a new Brand. Go to the Filemenu and chooseOpen Brand Settings Editor. Click New and fill in the fields. Brand ID will show up in the filename of your final exportedMIB. For the MIB version, always choose the highest number. Hit Save, and then choose that brand from the menu.

Expert tip Check with Dropbox

If you don’t use Dropbox already, open afree 2GB account at dropbox.com. For thispurpose you’ll only need the Public folder,which will act as your web server. Anythingyou drop in the folder gets a URL you canuse to download that file from anywhere.

Copy your HTML folder into the Publicfolder of your Dropbox folder. Then right-click on the .html file and choose Copypublic link. This is now your HTML index file.

Send yourself the link, or write it directlyinto Mobile Safari on the iPad. Now you cancheck that your HTML works as it should.

<prev 92 .net september2011

15 Export to PT When you’re happy with whatyou see in the fast review, you’re ready to export yourvertical to the Production Tool and add it to your issue.Simply make sure the Issue folder is set up correctly andthen hit Export.

16 Production Tool Open up the Production Tooland then direct it to that folder.