THE WORLD’S BEST-SELLER! FREE HTML5 VIDEO CD THIS MONTH
issue
219
issue 219 september 2011 www.netmagazine.com
Create perfect site style guides
Get consistency with our pro tips
gn and Discover the top desi DAY! development apps TO
Also inside >
£5.99
Pro guide to JS regular expressions Upgrade Drupal sites to HTML5 Add autocomplete search with CSS3 Get the top 5 free tools for SEO Create iPad publications with Mag+
Issue 219 september 2011
The web dev’s intro to the cloud
.net content
Feed 16
50 free web design tools 55 Opinion/Mike Hook 98
Mobile attitudes 50
Build-off: Visitor attraction sites 112
Gallery 70
“The field is evolving at the speed of light” Kristina Halvorson, page 38
4
.net september 2011
Profile/Brian Hoff 82
.net content
.net content 50 free web design tools
Get the tutorial files online!
38
44
50
55
128 129 130 131 132 133 134
online reputation matters
100
think like a hacker
10
Inbox
Marketing Is the time
16
Feed
Startups Marketing your
42
Ecommerce Reward users for being loyal
84 122
UK/overseas subscriptions US/Canada subscriptions Expert advice
146
Next issue
Search Free SEO tools Big Question How do you handle email?
JavaScript/get started with REGEX
showcase > 70
78
80
Andy Croxall gets under the hood of regular expressions
50 free web tools that rock!
Welcome
new business
94
98
6
InDesign/publish on the iPad
Mike Haney demonstrates how to incorporate video and HTML5 elements into your digital magazine
Just who is accessing the web via mobile devices and why? Mike Cornwell, chief executive officer of MRM London, investigates
top-level domains
right for SMO?
90
Create the perfect style guide
Mobile attitudes
CSS3/add a search box to your site
Christian Krammer explains how to add a search box to your site and enhance it with CSS3 functionality
Opinion/a shift in mindset
Mike Hook looks at the huge growth and increasing impact of behaviour-driven design
Android/automate your app testing
82
Gallery
The best new websites in the following categories: CSS, HTML5, JavaScript, plug-ins, CMS and mobile
Focus_on
Location-based apps, contact pages and even portfolios can be enhanced by the intelligent use of maps, says Matthew Smith
Opinion
Does the release of Schema.org spell the end of RDFa or microformats? Emily Lewis thinks there’s more to it than that
Profile
Brian Hoff reveals how he went from working in an Apple shop to using the iPhone to gather inspiration for his design business
John Senner, Koa Metter and Emory Myers of MokaSocial reveal how to delegate the dirty work of testing
104
regulars >
Social media Why
Security Learn how to
86
Interview
Gary Marshall shares 50 of the best free web tools to help build your site, from well known tools as WordPress and Drupal through to some you may have never considered
Web Pro
Hosting The new
We explain how you can help make the 2011 .net Awards the best ever
Steve Fisher explains how to go about writing a style guide to ensure consistent brand identity across your sites
OR download the whole lot at netm.ag/files-219
126
The .net Awards
Kristina Halvorson talks about the emerging discipline of content strategy and how to make it work for you
● CSS3/add a search
box to your site netm.ag/css-219 ● JavaScript/get started with REGEX netm.ag/js-219 ● InDesign/publish on the iPad netm.ag/mag-219 ● Android/automate your app testing netm.ag/android-219
technique >
articles > 14
issue 219/september 2011
Drupal/simplify and improve your HTML Jen Simmons shows you how to improve your HTML markup
111
112
116
118
Q&A
Martin Beeby talks about the IE10 Platform Preview 2
Special subscriptions offer! > Turn to page 42 (or page 84 for ) US and Canada
Website build-off This month, visitor attraction sites
Makeover
Devon Keller gives PresentWise a facelift
How we built
Members of Legwork Studio discuss thisshell.com
.net september 2011
5
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 first 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 Carsonified.com, and can be found at twitter.com/ryancarson. ryancarson.com
.net july 2011
7
“Following feedback from our 2010 Awards, we’ve introduced a number of new categories” Voting has officially begun in this year’s .net Awards, and it’s time to have your say on who deserves recognition. Based on reader’s nominations, we’ve drawn up shortlists in each of 17 categories. And we haven’t been resting on our laurels. Following feedback from our 2010 event, we’ve introduced a number of new categories. Alongside familiar categories such as Agency of the Year and Open Source Application of 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 the Year and Young Developer of the Year categories. Public voting is open until 30th September, after which, a shortlist of three in each category will be sent to our panel of industry experts, who’ll make the final decision. Please take a moment to visit www. thenetawards.com m and help us celebrate the hottest talent in web design and development! editor-in-chief www.twitter.com/danoliver /
>>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
Want access to all of this great content?
Subscribe today to the print edition of .net and get exclusive access to our digital archive!
www.netmagazine.com/shop
.net inbox
inbox
Your emails, comments and tweets
>>Write to us! Want to get in touch? Email your comments and suggestions to feedback@netmagazine.com
Subject: 3D in digital From: Nik Antstis, www.gm-design.co.uk
I wanted to write in to congratulate and endorse the comments made by Chad Turner in last month’s ‘Plan your way to a perfect site’ feature and perhaps also attempt to get people to treat the use of 3D in digital with less surprise. I’m a 3D motion graphics designer who has become immersed in the world of digital and UX design along the way, and I agree that 3D is a massively under-realised and perhaps even misunderstood resource in the design arsenal. At gm-design we often flick open Cinema 4D when discussing a concept with a dubious account handler or an enthusiastic and fast thinking client. The speed at which potentially complex thought processes or design layouts can be expressed is extraordinary. I feel it allows a less creative or visual client to understand and get to grips with the designer’s vision much more easily than perhaps a wireframe on its own could (dependent on the project). I’ve also found it to be an invaluable tool to inspire and excite in breakout sessions as a very quick and disposable discussion point, which everyone involved, creative and non, can instantly relate to. I’m in no way saying that this negates or indeed replaces the use of wireframes or other more traditional mock-up methods, but I certainly believe that 3D represents a very useful addition.
Software solutions such as the wonderful Cinema 4D are coming into the budgetary realms of normal agencies and with powerful 3D stock libraries such as Turbosquid at our disposal, previously inconceivable mock-ups or animatics can be rapidly realised. Using open source 3D software such as Blender is also a viable solution for many tasks. With web skills increasingly being transferred to mobile/touchscreen devices and the drive to allow users to interact more and more with our creations or client’s products, 3D seems to be a natural resource to exploit in order to step past that screen partition (mentally at least). We live in a 3D world and I agree with Chad that the time for being intimidated by 3D is indeed over! We couldn’t agree more, Nik. Anyone wanting to go further with 3D, by the way, should check out our market-leading sister title 3D World (www.3dworldmag.com).
Subject: Weirder and weirder From: Chris Hester
After reading the latest issue cover to cover, I couldn’t help but feel that web design is getting weirder, with all kinds of buzzwords and acronyms flying around. We’ve now got clouds, buckets, dragonflies and more. Take these phrases in .net for example ... “If you’re not sure what I mean by Agile and waterfall, you probably work waterfall and
might want to check out an Agile method, such as scrum.” – Mike Byrne, page 90. “There are no limits. One application can go everywhere, even into your fridge.” – Augusto Marietti, page 107. “It’s a brave new world … yarrr!” – Andy Marshall, page 90, pretending to be a pirate. “Be careful out there.” – Derek Featherstone, page 54. While it’s good to see serious technical articles in .net, the above do make it even more fun to read. Just be careful out there, yarrr! There’s a waterfall in your fridge! True, Chris, discussions in our industry can sometimes get a bit Alice in Wonderland. But you can rely on us to steer you through the choppy waters of obscure acronyms and dodgy metaphors …
Subject: Lorem ipsum From: Sebastian Green
I wish to weigh in on the controversy surrounding the use of lorem ipsum (Inbox, issues 216 and 217). There is no point in wasting time using real content on design mockups. Save it for the development stage. However, I do think the client should have some final content ready, or at least have some idea of the content, otherwise how can you design? The design should be based on the content and should make the content shine, so without some idea of it there’s no way for the design to be truly effective.
What readers want
We asked our Facebook followers (www.facebook.com/netmag) which page or part of the magazine they turned to first. Here’s what they said: Pedro Reis: Last one. I always go backwards for a preview. Steven Grant: Design Off MG Khin: PHP tutos :P Ben Ceglowski: The magazine part of the magazine. :D Baz Kika: Design off: all the chit chat and theory put into action. Defo best bit. Be good to open it to the public too. So we can enter, best one gets put in the mag! Bimal Tailor: Design off.
10
.net september 2011
Rikki Tooley: Cover story. They’re usually why I get an individual copy! Mark Johnson: The contents page! Then whatever takes my fancy :) Nattapong Sompinta: Agree with Mark !! Martin Feer: Usually the Showcase and Pro section. Rob Golbeck: Usually I turn to the cover story first, but I’ll often stop and read Gary Marshall’s column along the way. Jay Patel: The Showcase section is my first point of call followed by the tutorials.
Potential for prototyping Nik recommends Cinema 4D as a tool in the web designer’s arsenal
Brought to you by
.net technique opinion
Andy Marshall on…
HTML5 for pirates
Take a leaf out of Captain Jack’s book and think of HTML5 documentation as guidelines rather than hard-and-fast rules, says Andy Marshall The past year has seen companies such as Google and Apple, as well as the likes of Andy Clarke and Jeffrey Zeldman, making the case for HTML5. Heralded as an end to the proprietary muddle of third-party plug-ins and archaic browsers that have plagued the web for over a decade, HTML5 is the future of desktop and mobile web browsing and web apps. Having decided to try my hand at this newfangled HTML5 thing, I put out a tweet asking for a starting place. Diveintohtml5.org was the first to come back, and in I dived. Soon I was ready to join the worldwide crusade to rid the web of unsightly presentational HTML elements, inappropriate use of tables and browser hacks.
Flying the flag
HTML would be my skeleton, the bare bones, the content laid out neatly with no presumptions about how it should look. On those bones I’d place layers of carefully crafted CSS and jQuery that bring the skeleton to life, making it move, dance and look rather pretty. The tools of my new trade would be the likes of <header>, <footer>, <nav>, <section>, <article> and <aside>. Unlike their presentational predecessors, these elements 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, its meaning in relation to the document and its surrounding content. Like microformats, we now have ways of writing HTML that give a machine the meaning and nature of the content so it can better understand and index it. Which is pretty cool.
Yet while many of us appreciate these virtues, there’s also been a little confusion, particularly surrounding the use of <article> and <section>. The W3C documentation talks generally about what articles and sections might be used for and various blogs have shed more light on the subject, but we may still find ourselves floating in choppy waters. In practice, we could have a section containing several articles each containing an aside, inside which you may find a footer, a header and another section, and it would still happily validate. Essentially, there are no hard and fast rules as to how these new semantic elements can be used. We should instead take a leaf from Captain Barbosa’s Codex Pirata, and better think of these documents as guidelines: “The Code is more what you’d call ‘guidelines’ than actual rules. Welcome aboard the Black Pearl, Miss Turner.” Captain Barbossa to Elizabeth Swann, Pirates of the Caribbean: The Curse of the Black Pearl, 2003
“HTML5 is the future of desktop and mobile web browsing and web apps” Andy Marshall
Andy Clarke’s book, It’s Hard Boiled, draws on a similar metaphor, alluding to the era of film noir where the anti-hero stood against the system and got things done. He goes on to show what we can start doing with HTML5, CSS3, @media queries and other progressive techniques right now.
Rebel with a cause
Don’t design for the lowest common denominator (aka Internet Explorer), says Clarke; certainly don’t spend the next decade waiting for a fully crossbrowser-standardised HTML5. Instead, design for the best browsers now, while still providing an appropriate experience for those using less capable ones. Thinking a little like a rebel will free up that bit of creativity and courage to try your hand at HTML5 on a project today. Certainly, your visitors will appreciate it, even if they can’t actually put their finger on it. And users stuck in older browsers won’t even be aware of what they’re missing. “There’s the Code to consider.” “The Code? You’re pirates. Hang the Code, and hang the rules! They’re more like guidelines anyway. Bloody pirates!” Elizabeth Swann to a bunch o’ lily-livered sea dogs, Pirates of the Caribbean: The Curse of the Black 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’s passionate about Photoshop, HTML and real ale.
98 .net summer 2011
Yo-ho-ho Andy Marshall’s pirate-oriented take on HTML5 tickled Chris Hester’s fancy Thanks for your thoughts, Sebastian. You’re one of many who feel strongly about this subject: check out the comments on John McGarvey’s recent opinion piece for our website (www.netmagazine.com/opinions/ stop-using-lorem-ipsum).
Subject: Tutorial files (1) From: Loren Swendsen
Hi guys, love the magazine. I suspect the reason you separate out all of the download links (netm.ag/make-216, netm.ag/css-216, netm.ag/js-216 and even each individual build off design) is for tracking purposes or some reason like that. It can’t be for us the readers, can it? As long as I’m subscribing to the magazine I’m going to want all of the supplemental
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
files. So is there any chance you can add an all-files-from-issue-216.zip download as well? I’m getting a little tired entering in all these individual links, saving, and unzipping.
Subject: Tutorial files (2) From: Mikie Booth
I’ve just bought the .net magazine issue 217 and was going through the Flixel tutorial. Do you know where I can find the source files that go along with this to download? In the magazine I can only find a bit that says download the tutorial files, not where. Mike – you’ll see the appropriate URL in the green/blue circle at the top of the first page of each tutorial. They’re also listed on the contents page. Loren – that’s not a bad idea. We’re going to start this from this issue: so to download all the files at once, point your browser to netm.ag/files-219.
Subject: Education (1) From: Alex Older, alexolder.com .net Inbox is sponsored by Fasthosts Internet (www.fasthosts.co.uk), a leading UK web hosting provider. Since 1999, Fasthosts has been at the forefront of server technology and is an expert for reseller hosting solutions. From only £19.99/month+VAT for the first year, Fasthosts Reseller Hosting offers industry-leading products, an allin-one control panel, exclusive reseller discounts and an independently certified training programme. All data is hosted within Fasthosts’ secure UK data centres and features unlimited bandwidth and super-quick connectivity. With 24/7 UK phone, online and email support, Fasthosts offers a reseller unrivalled performance, quality and great value. More details at www.fasthosts.co.uk
In regards to issue 218’s Big Question – “How much do you value a formal web design education?” I think, if done right a web design education can help. There are still many institutions, though, that are stuck with old books, old technologies and people who don’t understand what’s involved in modern web design and development. What also needs to happen are internships and placements alongside devoted courses. These can really open the eyes of students about what’s really going on, can lead to jobs following university/college and also build upon skills that are being learned in the classroom. Obviously you can teach yourself, but I think there are many, many people who need pointing in the right direction and need a helping hand to understand some basics. But the main problem is that a web design course
won’t cover everything that can be done on the web so there needs to be some selection offered to students who want to focus on different areas instead of forcing them all through the same course.
Subject: Education (2) From: Gordon
Great topic and great selection of pros on the panel. As a professional ‘webucator’ I have a lot of hope for the future of web education. I also know all too well the realities of trying to write, implement and constantly revise a curriculum at the middle school, high school and university levels. If we accept the fact that educational institutions are going to be 10-15 years behind the latest trends in any industry then it’s evident that we’re just now approaching the first time when we can actually have web programs that are based on lasting web standards (and not Dreamweaver and Flash). It was only 10 years ago or so that the web standards movement had true traction within the industry. Now we’re approaching the time for the movement to move into the educational system. Your Big Question panellists were right to mention the WaSP and Opera curricula: these are awesome! But they are just curricula, not actual programs. There are very few true web programs at any level of education. That said, I think that in the next five to 10 years we’ll see more web courses covering a range of topics, from web infrastructure to design and development, 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 of other folks out there teaching full-time or part-time in the evening to make this shift in web education happen. Hopefully as we continue to ask this question in the coming years, the
.net september 2011 11
Brought to you by
Tweet feed
Here’s what you wrote about issue 217, issue 218 and the mag in general ...
@netmag Green for go You’ll find the URL for downloading tutorial files in the coloured circle on the first page
answer will change and pros will cite more great web programs.
Subject: Education (3) From: Leaper
I think that saying you need a formal web design education to succeed in the industry is quite clearly not true. Some of the most successful designers out there (including web designers) have no formal design education at all. However, we shouldn’t underestimate the value of having a formal design education. Although education can’t fully prepare you for the working world, it does lay solid foundations for you to build your career from and can teach you valuable lessons from an early stage. Thanks for your views, guys. If there’s a question you’d like to see answered by our Big Question panel, let us know by emailing us at feedback@netmagazine.com.
Subject: Awards nominations From: Irving Briscoe
Hey, you wonderful people at .net. It would be awesome to be considered next year to be a nominee in the .net Awards for Young Designer of the Year or Young Developer of the Year. I’m a 19-year-old designer and interactive web developer based in Minneapolis, Minnesota. My portfolio can be found at irvbriscoe.com. I’m not sure what your selection process is but it would be cool if you used popular dev and design communities like Forrst and Dribbble to search for potential nominees. I know some great devs and designers on those sites that are around my age that deserve a nomination. Maybe you guys can use their API to automatically generate potential nominees. Just an idea. Some of us young devs and designers don’t really like to flaunt our ages. Nice portfolio, Irving: you’re obviously doing all the right things! To be up for a .net Award (thenetawards.com), someone has to nominate you during the nominations phase, which takes place between May and July. It’s too late for this year, but if anyone wants to nominate Irving in 2012, I’m sure it would make his day …
12
.net september 2011
funny how @netmag should have an article on Coldfusion security just when I’m doing ColdFusion for my MSc Project. huzzah!! @stewartritchie twitter.com/stewartritchie/ status/93981116477870080
@netmag What happened to the percentage in the Beta Meter section? I noticed it vanished a few months ago. Makes me sad =[ @leebaillie twitter.com/leebaillie/ status/93623623545389056
@netmag Sunday evenings suck less with a net magazine to read @ORIZONSTUDIO twitter.com/ORIZONSTUDIO/ status/92703867661332481
Like Gary Marshall in @netmag ‘sensible ppl posting veiled warnings, angry rants, self-pitying screeds’ on FB at weekends - so true! @Dobwalls twitter.com/Dobwalls/ status/91820726310543360
Inspiration from #netmag this month on Wordpress multi sites on one installation... Clever stuff! @ajdf twitter.com/ajdf/status/ 90371257106841601
@drbparsons OMG! I fucking love .net magazine. /cc @goodonpaper @netmag @eoghanmccabe twitter.com/eoghanmccabe/ status/85790523025133568
Feelin like puttin @netmag to work and gettin crazy into #devmode with some #html5 & #css3. Programmalicious
@Rich_Clark every issue of @netmag has an article that more than pays for the mag and in issue 216 it was yours. Thanks!
@SniggitySnax twitter.com/SniggitySnax/ status/88361796590776321
@TwoLittleFishes twitter.com/TwoLittleFishes/ status/86104216690622466
@netmag Any chance of a full technicolour Nyan Cat pullout poster in the next issue?
diggin into good read of @netmag issue 217. Lovin the fact the CD has gone, replaced by URL links, saving money and helping environment sweet
@ryancarson great interview in #netmag, really felt inspired. Shame I can’t convince the bosses to accept a 4 day week :(
@benjaminparry twitter.com/benjaminparry/ status/84355945391587329
@kiran13xtreme twitter.com/kiran13xtreme/ status/91574590492512256
i bought my first @netmag and i think it’s awesome, really helped with my designing
the articles in the new @netmag are really helpful! Especially the one about the new @wordpress and the one about #newsletters.
According to an article in this month’s #netmag, developers aren’t “creatives” .... #designeruphisownbum @ste_brough twitter.com/ste_brough/ status/93617619604750336
@AshleyKelly95 twitter.com/AshleyKelly95/ status/93601667496411136
@netmag and @ComputerArts are really making me think to buy an iPad beside my ebook reader just to be able to read them in electronic format @szabcsee twitter.com/szabcsee/ status/93572665608126466
@TimV_ twitter.com/TimV_/ status/91408308098965505
I love that @netmag are not scared of the slightly niche geeky topics :) @lornajane twitter.com/lornajane/ status/85275794083037184
@emma_swift twitter.com/emma_swift/ status/87202712910954496
Just read @ryancarson ‘s article in @netmag. Great read. I cursed, because I sent a big long essay email to him once... :( Sorry Ryan! @dooburt twitter.com/dooburt/ status/90436623497576448
totally dorking out on WordPress 3.2. Amazing! Missed a bunch of new features in the 3 release but @netmag’s great article explains all... @timboreader twitter.com/timboreader/ status/91424656489324544
lay in hospital reading @netmag ... great read & gary marshall’s face is so soothing #juskiddin
Just had choice of renewing my @netmag subscription for another year, or paying for two weeks’ food during my masters year. I chose .net.
Reading a great magazine, “Web Design Essentials, Vol 2.” from @netmag! Fantastic content. Can’t put it down.
@andykinsey twitter.com/andykinsey/ status/85475155144478720
@rhiaro twitter.com/rhiaro/ status/90800768801710081
@carlinscuderi twitter.com/carlinscuderi/ status/85189119784910848
.net showcase focus_on
ffocus_on
Usingmaps
Location-based apps, contact pages and even portfolios can be enhanced by the intelligent use of maps, says Matthew Smith
1
Cartography has a long history, and some of the most beautiful maps in the world are ancient ones. Have we lost the beauty of great maps and relegated them to pure utility with Yahoo or Google Maps? Not at all. An open API, new map tools and good design sensibility can help us to have the best of both worlds. Beautiful cartography is back on the map – so to speak.
Design your own maps
Using Google’s Map API (http://code.google.com/ apis/maps/documentation/staticmaps) or tools such as MapBox (http://mapbox.com), we can create dynamic colour systems and content-focused maps that get the data you don’t need out of the way, so that the stuff you do need can rise to the surface. For instance, if you’re designing a map to look like post-World War III America, you could remove all traces of roads and buildings, and replace all map icons with zombies. C’mon, you know you want to.
Don’t lose your head
As with any good design, it’s important that you don’t lose the usefulness of the map as you redesign the style. Make sure you’re maintaining clear distinctions for roads, boundaries, labels and other elements when necessary. The user should be able 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 that useful roads must be yellow, but keep in mind that your audience may be confused by a map style that breaks the common colour patterns that have been established over the past decade. Do your homework and choose your styling carefully. ● Obsessed with creative inspiration (see his site, patterntap.com) and attention to detail (see his work at squaredeye. com), Matthew Smith loves helping designers capture what inspires them.
It’s important that you don’t lose the usefulness of the map as you design 78
.net september 2011
2
4
3
(1) This example of a night style map of Baltimore, Maryland, is an amazing showcase of what’s possible with the MapBox tool and a great colour scheme (mapbox.com/#/tileset/ baltimore-dark). (2) You may not need a world map. If this is indeed the case, take some inspiration from the guys at the Irrland Tumblelog (irrland. sonntagskunst.de), who are mapping a social experiment using Tumblr,
with this map as a posting platform. (3) If all you want to show on your map is a set of data points and event happenings, then check out StartupWeekend (startupweekend.org/ events), who have made a super-sexy blue and white map with indicators of the most popular Startup Weekend events going on across the world. (4) The folks at DocteurBourbon (www.docteurbourdon. be) stayed in the spirit
of Google Maps, but desaturated the colours to go for a subtle, in-brand effect on their contact footer. (5) Meanwhile, EveryBlock (www.every block.com) really customises the look and feel of its maps, turning them into simple outlines of districts and neighbourhoods that are easily recognisable. Getting the details out of the way makes for an elegant and easily readable map.
5
.net technique indesign
InDesign publish on the iPad
Download the files! >
All the files you torial need for this tu at d un fo be n ca 9 netm.ag/mag-21
Mag+ enables you to create a digital magazine using InDesign that incorporates video and HTML5 elements. Mike Haneyy walks you through the process Expert tip InDesign and images Always convert placeholder images into 132dpi. InDesign is much better at inches and millimetres than pixels so doing the conversion in InDesign is tricky. It’ll be much easier if you convert the image to the right resolution in Photoshop. This is an important take away: the iPad screen is 132dpi. For native Mag+ pages, this will happen automatically on export, but here you want to make sure your dimensions are correct for the HTML element box you’re creating. (Note: You can also scale the HTML element by checking the Scale box on the plug-in.)
Read our n! > Zinio editioine on
What you’ll learn In this tutorial you’ll learn how to expand the functionality and user experience of digital magazine tool Mag+ with some HTML functionality. It’s easier than you think. 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. Download Mag+ free plug-ins at www.magplus.com Project time 1 hour The possibilities for digital magazines on the iPad are breathtaking. Many publishers are moving their titles on to this format. One software solution really catching on is Mag+, from Moving Media+, the platform behind pioneering titles such as Popular Science+ and Transworld Snowboarding+. Mag+’s simple InDesign-based workflow puts full creative control in the hands of the designers, not the tech guys. Video, HTML5 elements and other interactive features are added directly in InDesign. It’s the only system with instant fully functional layout review on iPad, so designers can
90
.net september 2011
az Read .net mag Zinio your iPad via a e subscription: se m/ netmagazine.co shop for details
try new things and immediately see what the user experience will be. A Mag+ page creates a tactile experience, with enhanced design, making a digital canvas that doesn’t limit your design to the edge of the screen. In this tutorial you’ll learn a more advanced technique, adding HTML functionality directly in InDesign to enhance the user experience. The software, plus everything that you need to know about using it, can be downloaded for free from www.magplus.com.
START
The right template Start up InDesign and open the included template file [FILENAME]. This is the main template for all design work in the Mag+ format. If you want to add your own swatches and formats you do so by creating or importing them into your new document.
About the author Name Mike Haney Site www.popsci.com Areas of expertise Design Known for Popular Science’s Contributing Innovations Editor What was the last CD you bought? Foo Fighters’ One by One
2
Set up document Activate the Mag+ plug-in and fill 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 when users bookmark a page, so make it something descriptive.
.net technique indesign
3
Prepare your assets Prepare your image assets at this stage. The images you want to switch should all be of the exact same size and resolution to avoid any issues when switching. Use Photoshop or any other editing tool, and save the files at JPEGs.
4
Make a copy At this stage, you should also prepare a layout version of the first image in the sequence by making a copy of it and then setting that copy to 132dpi resolution, without changing the file’s dimensions.
5
Assets in place The folder [Changing Images] holds all your HTML assets. In here you’ll find the assets subfolder. Place your prepared images, except for the 132dpi version, in here. In the included HTML document we point to that folder, but you can change it to another folder.
6
Code writing Substitute the included image links in the HTML document for the ones you just created. The string <img src=”assets/chair0X.jpg” /> should instead point to your files. Also, change the viewport parameter width to the width in pixels for the images you’re using.
7
Test-run in WebKit Test-run your HTML document in Safari or Chrome, since they give the best approximation of how this function will work on the iPad. The webview windows in Mag+ use the iPad’s built-in browser capabilities. But it still makes sense to test-run on the desktop.
9
Basic layout In InDesign, create your layout, remembering to make allowances for the richer functionality and reader interaction. So don’t place too much stuff on top of the image you are defining as an HTML area. More on this in the next step.
8
Test-run on iPad You should also test run your HTML functionality in Mobile Safari on the iPad. The simplest way 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.
10
Drag and drop The 132dpi image you created in Step 3 is your placeholder for the replacement HTML file. Simply drag and drop it into your InDesign workspace. The 132dpi resolution will show up at the correct size in your document.
11
Object type The image you dragged into InDesign can now be set up as an HTML area. Select it and set Object type to HTML in the Mag+ plug-in. Click on File to choose the local HTML file you have set up. This will now use that area as a webview window for your HTML.
.net september 2011
91
next>
.net technique indesign
12
To scale You can set your pinning options for the HTML just like you would with any other object. But there are a couple of options, especially for the HTML object type. In this case, when we have defined an exact viewport size we can leave the Scale contents to fit box checked.
13
Setup for review Set up your system for reviewing by starting your Mag+ Reviewer app on your iPad. Input the IP address from the Help field at the top in the Reviewer app into the Push review to device field under the Settings tab in the plug-in.
14
Fast review Hit Fast Review to check out your vertical on your iPad. The HTML and the included assets are exported to the device and are locally stored within the file. Test out your HTML functionality on the iPad. You’ll see that the placeholder image is just used for the lo-res preview.
15
Export to PT When you’re happy with what you see in the fast review, you’re ready to export your vertical to the Production Tool and add it to your issue. Simply make sure the Issue folder is set up correctly and then hit Export.
16
Production Tool Open up the Production Tool and then direct it to that folder.
17
New brand You may also have to go into Settings and create a new Brand. Go to the File menu and choose Open Brand Settings Editor. Click New and fill in the fields. Brand ID will show up in the filename of your final exported MIB. For the MIB version, always choose the highest number. Hit Save, and then choose that brand from the menu.
Expert tip Check with Dropbox
18
Include in issue Hit Refresh if you haven’t done so already. You should now be able to see the vertical you exported within the separated Clipboard section of the Production Tool, to the left-hand side of the programme.
<prev
92
.net september 2011
FINISH
Creating order Drag that vertical into the Content Verticals area and place in whatever position you’d like. If you have multiple verticals you can preview them all together at once by hitting Review All or Review Selected.
If you don’t use Dropbox already, open a free 2GB account at dropbox.com. For this purpose you’ll only need the Public folder, which will act as your web server. Anything you drop in the folder gets a URL you can use to download that file from anywhere. Copy your HTML folder into the Public folder of your Dropbox folder. Then rightclick on the .html file and choose Copy public link. This is now your HTML index file. Send yourself the link, or write it directly into Mobile Safari on the iPad. Now you can check that your HTML works as it should.