P. 1


|Views: 206|Likes:
Published by rhikunia

More info:

Published by: rhikunia on Mar 16, 2011
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





ar o ne
'rt)lcr,yo-~'I(;n ~,w,?·"
-.~ I


"4f.. of c-«stoIMe,vs ave wa.lki'''\9 Away frolflA.bt<sjl'tesse.s

J'\eglect to c1uu'l. up t/t\eir carboli\. rootp!t"iV\t.


compal'\y website. C.reates



of CO:J<t elM;SSlOYl.5 e.Vtwy year.

carbon Mutrnf

FOLlI'" thOlAsaV\CI. bLlstV\t.sses have a Ire-ady l'\£utraUsed. fheir website emissiol'ls. Have you?

CaU now
or visit www.ukfast.co.uk/carbon-neutraL-hosting.htmL

co.. now is the time to read to the changing demands of your customers.uk/ carbon.neutral. www.With 81 000% increase in spending on products that tackle climate change.htm l Your future is our business . ukf·ast. Don't get leU behind. contact us today to find out how to quickly neutralise your website free of charge.-hostin 9 .

era Logo Yoursetf Why hire an expensive firm to rebrand? .n 4 .net/february 2011 .

corn CSS/maintain style sheets with Sass Core contributor to Sass Christopher Eppstein explains how to use it Gallery The best new websites in the following categories CS5. HTMLS promises a weaMh of new features for developers.Flash framework 71 Opinion Our creations need to be more human. using HTMlS's Canvas 58 Get clients on your side The relationship between designer and client can be fraught. CM5 and mobile 40 Simple development for jQuery Mobile 1 Meel your teacher 2 Intro 10 jQuery Pro HTMLS tips for 2011 Although far from finished. Rina Miele comes to the rescue ~ed9l offerl Welcome Inbox Feed UK/overseas su bscri ptions US/Canada subscriptions 102 101 subscripponS :> Startup Big issues for new busi nesses Online games PCforensics 10 14 56 76 113 114 115 116 117 Opinion Security Hosting Opinion Joni Korpi explains how he built a grid system for creating multiple layouts that are as consistent as possible Turnt. says Matthew Smith 52 The .~ (or@e76for USand Canada) A reader asks about application hosting Ecommerce Opinion Google moves into fashion From Photoshop to mockup How we built Mark Heqartyand Mike Creighton of HEGAexplain how web standards were at the heart of the award-winnlnq site they created for Nike Search Google Places Marketing Visitor tools 106 Expert advice 118 Big Question 129 Next issue . lead user experience designer at Mai'lChimp 48 Mobile 3 The Boilerplate 4listviews Pi 4b Listviews P2 5 loading pages Pi Sb Loading pages P2 6 Working with Buttons 7 Working with Forms 8 Installing Word Press 8b Building a Mobile Word PressTheme 9 Conclusion The new app stores Open web app stores offer big money-making..neti CO ntent Pro HTMLS tips for 2011 issue 211/february 2011 crt articles> 36 technique> 78 showcase> 64 Your essential CD this month Interview Twi tie r's crealive di rector Doug Bowman chats about the new Iwttter. opportunities to web designers and developers. Tom May chats to Laura Jordan Bambach and Simon Gill to find out what makes it tick 75 Focus_on I f you're designing without well-crafted content you're missing half the influence and power of your work. Sara h Pa rm enter explains how to create the perfect U I for your app 72 Profile LBi London i5 one of the UK's top agencies. says Aarron Waller.net Awards We relive a night when the web community toasted its heroes 90 HTM.net challenge. says Leigh Howells of Headscape 94 Website build-off Three leading designers accept the . JavaScript. This month. But can it be used today? Patrick H Lauke has the answers 82 Flash/build sites faster with Gaia Ash Warren and Scott Cook of Driftlab explai n how to get started with the Gaia. Ryan Carson explains why we should all get on board 86 Mobile/design an iPhone app UI Designing for i054 devices is totally different from designing for th e we b. HTMLs.L!c. plug-ins. a page flip effect Hakim EI Hattab from Fi shows us a new take on the 'Flash page flip' we all love to hate.netrfebruary 2011 5 . but it needn't be.reate. workshops regulars> Web Pro 110 111 112 7 98 Makeover A site that sells unique handcrafted jewellery needs modernising.

100 AddHiona] 10% offyeariy accounts. web designers and develope..ukdeliver you the uncornprornisinq power and control. Each private server comes with guaranteed dedicated RAM and CPU ensuring that you have maximum resources available at your disposal 24x7x365. ora dedicated server a.ernait accounts and domains From ditinnrtJ nrorl· ct fp tt rpc.co uk GireatHosting .Use Virtual Private Servers Don't gamb ith your . o.aiLy.. email accounts & domains or Hyp r- c 08.et . D bian Dr Ubuntu From • Int. 1 • I:Idrnowl dy!IJ. instaU any software Wi dowsVPS ind 08 VirtuolZO • Host mu'ltiple websites.. Ideal for r:eseUers. IS part: of Dally Intern r PI pooa! discount offer applies to rrst year hosting only .co.t a fraction of the cost..it's about time Prices exclude VATunless stated otherwise..u D':lIfy. All aa k:J nd It.' . Use code: NET2 o LY.4.rs who want to host multiple websites.Plesk or WebsilePane:L • FuU root access.54662. os n9 Virtual Private ServerslVPS) from D. • n a99 pm 5.Dual Quad Core Processors VPS optimised • Super fast HAID disks to serve your data -Guaranteed dedicated RAM up to 8GB I uxVPS • Customer scheduled VPS back up & restore • Choice of MS SQl '05& 'OSar MySQl • Choke ·of control panel.

that \ ou'll never nuss an issue trekkina -- to the shops - rOI full rletails. we go behind the scenes with Nike. Fadi Shuman WMiiliilliQ'" Julie has been working in digital since the web began. She currently writes about technology . and can be found at twitter..he speaks at events worldwide.just between us . d. She's a frequent keynote speaker and recently won Female Entrepreneur of the year at the 2008 Fast Growth Business Awards. now would be a good time to let us know. And if you want inspiration.tY.we're about to make . and we catch up with one of the UK's most innovative agencies. look no further.i]. and e.hotograAhY and diving. and you'll san' tune and eftorl - Andy Budd is designer and director at design consultancy Clearleft ~ clearleit com]. see pLlg\' i6 i1. He also organises the .stutfandnonsense.com/danoliver Never miss an issue! now and ~('t [I\<"ISSI\.co. Molly is group leader for the Web Standards Project. The founder of Stuff and Nonsense (www >lutii>mjOQOSe05e .twitter.uk Andy Clarke Margaret is CEO at 'Reading Room. Ryan is the founder of Bath-based web application and event company Carsonified. I yancarson LOm Ryan Carson E' S.S of'l StOI ppm {"s You'll also have fJl'cH e of lI1111d trorn know lilt:.netrfebruary 2011 7 .readinaroom.co.co. W IV Molly Holzschlag w.ln a previous life.uk .lV 111lj.com Margaret Manning Fadi Shuman is director and co-founder of POdl. She wrote PAS78.6 level y whei e elsei myfavouritemagazines. the UK's fi rst web accessibility standard. juliehowe ll. a global network of digital agencies providing integrated ecommerce and marketing solutions for leading brands and retailers.lge . and we're kicking things off in true .uk Julie Howell Ortginatty from Colorado. and enjoy the issue! Dan Oliver editor-in-chief www. Andy Budd S ISliimitl . but if you've got any requests for back-end content you'd like to see us cover.com/ryancarson.'S/CCllklr\dl or p. We can't reveal what we're planning just yet.net a whole lot better.11 Andy is a UKdesig ner who's passionate about web standards and accessibility. want a guide to using HTML5. In this issue we speak exclusively to Twitter's Doug Bowman about the design of the company's new site. co-a uthored wi th Dave Shea. VVhetheryou're looking for advice on dealing with clients.net style over the next 132 pages.Q IJk)..rnollyx om I Patrick works as web evangelist in the Developer Relations team at Opera Software ASA.Construct web conference. And . Have a great month. for BBC WebWise. LBi.or are looking for a host of fantastic tutorials. Patrick H Lauke "Ifyou've got any requests for backend content.corn. www. he worked as web editor for the University of Salford. now would be a good time to let us know" Welcome to another jam-packed issue of the world's best-selling magazine for web designers and developers! 2011 looks set to be an amazing year of innovation and development. www.net/home ladvisory panel A well-known web standards advocate. we've got it covered. we reveal the hottest new sites in our Gallery section. Among her 30~ptus books is The Zen of (55 Design.

Tbe ~glstered o:ff~ of ls Future Publishi.1~of the 'Witlh. Aswdate Editor Ollver I"inclberg. a.v A~nue.o.t. M.lindbe..F'm. [""'I"l"l <tunl.L Art EdItor !R1Jb Bowen. tanya . EdItor Tum ~.:ecioitivejeanne Wnite.oliver@fuiLfrenet..h your submiss..!I1~.rd torbe pric-e of produru/sel'vk:-es r'Cf~r'€d to in this.·. ilovedust. certifioo forestry and (ntorinffiee manutacture.com i.is... more Fut= pk pullli.:o::taS8.uk It: Editor ~n chief Dan Olfver.·Sons ltd.rectcr lan Miller u-eat~ O!~ct.". Ryall Florence.Qticn!50E":.>lomdron !>Iud< E>r.1itine . Simon Middleweek.n·!)"aOO9 1-utJ ."CSth.. ~ 1"11 ~ 1 """""0 tho~ 'N__ Gro". Ry9n T3~lQr. Staffwrlt:er Tar"l}'d Cambnndc.online. f\€l']ny Meyers. Manager ~it::atdo 5idoli..Tom Hugh~.. our ~ubU"..n..""'-llh.W:lber@'ul.:. 'W€I~manaqed.& Op!!ICI. _bsile..te~d in England and wetes.utllreretLom Print &: Production PI-oduction COordlnClto~Craig Bruadbridqe. matthew.zlne_ If you !'LJbmit un:.30Monm01.cOfll PrcrTJ..sido'i @ftJwre-. Simon Braun. suture Publishirtq and its paper suppliers hi3\l€been inde~rtdentl.I!MCh.kenS:ing Head of Internatiol't~l"kerL$ing flm lHud50n. I'!<UII.iludsol!l@fufU~enet.rt'if"fudn t aLt::ordBlI)C:~ the n...5} l'E9is.L_ L Oe9gner Ieanne O'Hara. joanr:te.2lphy -iBtya i1 T.may@ tuturenct. Gm)' Marmo2ll~.rlIlLrum Head of Production Richard Mason.'i"1I! Offlet!r (UK) Malk Wood. . Mar. rotxbowenrgfuru-enec..e"t ." "'~~ • ~"'" Ct.5In White.com .:lb.com J. correcr at the time of going to peess.. teanre.:! "'"' ""fl'Jn u' . rckk Gccdchlld. tl. vaig (j'!3nnel!..corn ..::e.<llleditions of the magazine.oom Cootril::mtors jason 6eairo.london ECl.<IS we are eware. includi"Q fcensed editions.:. Distributed in the ur by Seymour Distribution Itd. Sarah Parmenter. ""'" ~ mr ~p. + 4410)'''5 7»275 futl.(. ne'it~er ~u~re nor ~ts employees.Ptt.E'@fL>turen.~ lid _rots an. Future cannot accept any responstbutyfor errors or inaOOJrade-s in such in'orm$ltlorL Re9del5 a re advSsed to ccotact rna l'IufactlJre~ antd reta11ers dir'eltly with r~.tIIII..! or darnape.I~oom.nduo...AtholJt rbe Vi'rltten perml. AU information contained il1 tlliosmagdzine is.tfon::l COl...rl'<Z.[}j.m O!ill!r ~curl. Smlth. c:raig. Mike ChipperfieW Rich Cla~ Scott Cook. Joe Dollar.ilir. g[)i_ Tel:0207 4~9 ~ A '''CIt! rnernberor the Aut¢i'L WBnllO_ k>rFUI"<~l BIJI--el!Uof(_ifClJlati(m~ \Il. 1 Pebruary '010 Pratted in the UK by ViJilli<lm Gibbons..pJerce@futlJlre~t_OJ..d flltur~et_rom @ Subscrfpttcns PI1<Irle 0..Nr.com New M-edia &iitor ~d.'il"ltelT":lijgatines.o!. We recycle . Ni~k FrQrlC.: a nd...Ik&tt::~ to ~b[l:. Mi1:.'lJLHte@fuw1ell. 10m gorpt Patricik: H Lauke..gl1mitoo ii!atB~l.myfavol".=.!' I Adverti.. ""relut!1i3'9OL"<I~es. Wendy T.p"niOOo .n)up Ar1.=.net/february 2011 are committed to only usir'i'l_} ITlIiiIga:zlnepaper which is derived fr'OJr"l.:. 020 7~2 ~.er_-::om Marketillg Bralld Mallager Dan Bruce.. leOllie \I\l'atson. Uann~ \Vi~kill$Qn.ion i i1 '-"flo!e o~in P<lITjlll.stoodley@fururenet. m.hYSiG31 dtqttal fern-nat tl-eouqhout the world.:umbrinck@rututi!Mt.tl4..$t~r.!n of the pub~i5Iler_ Future rubli:. agoots or subcontractors ~ha!1be tiab'~ fa~ I.:....urenet..'lbffil~6·cvi. Il"\dYaifi de LeO".1gh l1o'.. Site Editor Jim Mea u::ley.. Christopher Eppsretn.=.A.t..o. a~thougn every care ls taken.ac'hael. Dlro.broadbridg(o@fu~LJffi. t"MW.._ . David Deutsch."y Collier. ji m. 2 test Pooltr.a9.i<"'.cndQll Sales.ljm.lre Publishing Umjte.t lPenfo1ct S. danieUxlK." UK hctline 0044 848 >852: internatio"al.tt~.wm Mount SCliIA:!!5.t .I. f>""<I1.j Publisher MCitthiew sterce."9 l.5sk.g limited {company number .. as far .Itumatlcalty gicln~ ftJturG' . r.trUM Robertson..'jobs 18...tor inrormatio" only and ts. worldwide arlid in any p.1idt~d materlal to us. Sacha CireTf.".lth. $ Aarrcn Walter.Ha'drn EI H... 8 ._com . Mike Cretqhton.4IRaIIll © Future Pl.. we've got 'em all Future Publishing.Ckir Jim DOLJgla. ft. &. LL::. iRe-my Shalp.@f.net rn.iPaulVti'y. ('44) i") 251045 Slu bscrfbe to . Bath BAl 2BW Tetephone Editori1t +44 10)n!5 44.l"cPor'l' 5.mo:autey@ruturenet.~or.Io .. MaIk Ki!my.\I'IN. designers and net gurus.oo_uk NEXT ISSUE ON SAlE. VI/illenlkll' on beha:lt of Pusure.om To! +. 020 7042 £!l.Director Miilkolm stoodley..oom . We've scoured the web to find the best writers. Bath BAllBW. Joh~ ll¢iN_mo~ reo ~·1OlZO 7(142 4UCO lLo'l:>Gonl . Simon lees Oroup SEnior EcIitw Steve Jarratt (.cocf:.~. bet:k'. Rina Mi-ele.at 'JIJI.n.:ltt PtJotogf. AU rights r-eserved. FSC {Forest Stewardship Council]. Tfi3de Marketing Director Radlael Cock..ohea @futIJrer-ret.. IictL3 rdmasonrgfuturenet.et. Karl Hodqe.J2'.imited 2011.tlon~. From authors and activists to user experience specialists. Any material you or slJbmit is se-nt at your risl.co.sh Warren. ".-g @fu~lJrenet. M<:irl: Hega~ JMf lHemenway. 10)"'5 783'S3 r. mag.o .Hugh vage.<44 Wei"ite www..nctmaq.::-WLIliam!:.y . Dace ellaffey. rom .~. 30 Monmouth Street.019 J.or Robin Abbott !Edlt:orICil.l'k:wo::..Ideve lop! discove r!d esig n Icontributors Don't miss this month ."9 . dan.tl!.S6..I\!t~l'1""OO fUIill "'3 lkl" IS( magzzl'es. eyan Carson.. E=iildi htJmM. us-en Sbteikh...cern arrulation.wm ..J:avid [ M:am". No part of mis magazine may be use-d OJ reproduced . rica~do. you aL. rnakclm . olhier..rbtishing l.

!. 2." . 2.. I'II'iIIII~~rdff~1 ~ ~"'~I!l. 05700 £119pm...!. 11 Co" (PU.d (ore (PUs HPU Core.J[rI ~~p"y...ity Unlimited liPs bandwid ill 2x 2..:i Call us now to get your server online Ilmtd_ot World Class Dedicated Servers zmz The Cireat EKhlbltlon ~a I.iceof OSinduding Windows' & Linux' 2GBRIIM TOOMtlp' ronn .-J fJ. Lu! wJ~ I'MIT Ilh.rt.ll.jw.Industry leading power & performance Designed for the most demanding websites. PnJdUo:! mf :II:o'jli. '{lffrr1U~JN1~ . 3006S SAS HD D Ix 5006B SATA HD 0 MID 1 16GB MM 1OGMbps mn"ectivit.ily Unl imited tlandwid Ih 2 IPs 4GB RAM 1OGMtlps mn"Nti. 'f~ .. 05300 .Jn Uldil1U1i 'lIJ:iu' ~ dlll'ge DIIe] aul P' m lOti. .fasthosts. Unl imited bandwidth liPS i.'. 14 CPU (0".Jm.. ~II""I!I wi'I~UllJJliIr." lit £209pm .!1ed.ukldedicatedselVers -tJ an il.I'll f:.\. lOOGBSAS HDD RAID 1 8GB'MM HIOMtlp.1 6Hz AM 0 Op Ier on .:!'I: f'hlh)!I"S~ld 1M Ei:i11M~ ~r.(Ii.86Hz Intel· Dual (0" CPU lCPU CO". 25 O6B SATA HDO MID 1 2. t!o.fIJI" -"..wiwJl.l'lJ. databases and web apps.<Ilj. 05500 x. 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 2x 2.'.~ 2x 2. Unlimitell ba ndwidth 21Ps 300GB SAS HD D 500GB SATA HDD MID 1 l16BRAM 1OOMbps m""fflillit..co..ity Unlim itell ba n dWidth 21Ps Unlimited bandwidth" • Fast setup • 24/7 UK phone & online support 0844 5830714 www.(wJiII.. £59pm . 2.'!liJJrr11).sI. it RU.Rf.rn"""cti.~1 hiLIM!I":J.il6Hzlntel' Dual Core CPU lCPU Co. -. our powerful dedicated servers give you the performance you demand.. Unli m ited bandwidth 2'IPs t/ t/ t/ t/ NEWAdvanced Server Monitoring FREESSLcertificate for the first year Full root access via KVM(ontrol Cho. OS1000XX 051100 I £349pmc<. PIi=~I.J U1u~P'l~Jr II.lhh It.l!.16H11 ntel" ~"'n" Qu.. lOlG'MRINUOr nlE.< 05900X £149pm.it.66GHz In tel" X'Oil" Quad (0" CPU 40PU (0".IGHllntel' Quad (ore CPU 4 CPU (0'" 2x300GB SATA HDD :RAID 1 8GBMM 1OOMtlps "m"ecti.!!i on: [3i :I): 1m 'Urill'Film ~r.es S OOGS SATA HDD 2.ilan(~1 ~I"(\:m ~o i~'Ii1H .lIle Wlr 1I1~1l o:r1~.) rrlNrrtJlI'I1) tlMih Follow [J'.. f79pm .<.

Bing. but personallyl prefer it when you really get under the skin of a. I hope you'll consider giving talented con t ri butors Ii ke t his ext ra spa ce in fut ure when appropriate.opment-related subjects you'd like to see covered in future issues of . Overstock. For this reason it was great to see Ste Brennan's tutorial on embedding your website into Facebook {issue 210).net. The US Whitehouse. The World Wide Web Consortium's standards-rnakinq process is geared toward ensurtnq that technical issues are dealt with very early in the process and the speoftcattons have very broad review from the vast majority of the major technoloqy companies that will be using the technology. it's a "layered specification" on top of HTML5. Even though the document isn't an official recommendation yet.com II"However. My only little niggle is that your tutorials often don't go into as much depth as rd like.corn. Best Buy.who is using the technology? RDFais being used by Google. The same has been said about Microdata and HTML5. coding. core HTMLS or an add-o n. zinei'discover-interviewi'ioi-ito) : it's [RDFalstill a recommendation" ••. is sti II up in the air:' This isn't accurate .. When talking about any web technology. business news or whatever. RDFa.gh my interests lie towards the techie/back-end a rea of web development. O'Reilly.uk/ Well'lL to gt4 In lour hi Email your comments and suggestions to netmilg@futul'enet. There are many more large companies that are getting ready to launch RDFadeployments. This is the opinion of the HTMLs editor. Althou. The leap from the normal three or four pages to five really paid off.t the moment. HTML+RDFaoutlines the use of RDFain HTML4 and HTMLS. to name a few. While it is true that RDFawas only specified "officially" for XHTML. As you said. the UK Government.the article makes it sound like this hasn't happened yet. I understand that you need to appeal to aII sections of the web professional community. and The Public Library of Science.net/february 2011 . as gone through an extensive series of h tests and review. allowtnq the reader to really explore the subject in detail. Ben. Newsweek. and the number is growing daily_ We stand corrected. who is just one voice in the 800+ people that are working on the HTMLS specification. and I read it from cover to cover every month. "However. whether that's related to aesthetic design. Thanks for your kind words. comments and tweets Subject: Joi Ito interview From: Manu Sporny l'm currently a Chair of the RDFaWorking Group. neither is HTMl5 by the way: people are starting to successfully deploy ROFain HTMLS. just like HTMlS Microdata . Yahoo. if there are any particularly devel. and we want to make sure there's something for everyone in the magazine. we're seeking to appeal to a broad church. Drupal. There are a few statements that are misleading in your interview with Creative Commons CEO Joi Ito (wWIN_netmag_w. from newbie to old hands like me. RDFabecame a Web standard in October 2008 .it's not "up in the air". I think it's encurnbant on anyone who calls themselves a designer or developer to at least be aware of ali the developments in the industry. There are tells of thousands of additional sites publishing RDFaa. what one should focus on is deployment ..subject. HTMLs editor Ian Hickson recently admitted that RDFa still seems to have 'some pretty serious problems':' * Mail of the month Subject: Extra space From: Ben Smith I'm a big fan of your magazine. Facebook. Manu! Creative comments Manu Spornymakessome detatled commentsabout our interview with 10. please let us know. Thanks for your comments. RDFais built on top of HTMLS. "Recommendation" is special terminology that the World Wide Web Consortium (standards body) uses to refer to a 100% official Web specification. there is definitely an HTML+RDFaspecification which is being actively worked on and published via the I-lTML Working Group. HTML+RDFa sits at tihe same level of publication status as HTMLs and they will move forward through the World Wide Web consortium together: "that the theoretical discussion around which spec it's included in. Iesco.netlinbox Your emails. As our editor-in-chief Dan says in his welcome page. The future of RDFa 13 IJ in HTMLs is far more secure than the article describes. Ito 10 . Obviously.



Daniel responds to our Big ouesn on about patent law in issue 209

Just arrived at the #netawards at the ministry of sound. Quite:l a venue. Quite an event' I'm at #netawards. There is a tv screen with tweets on it, eyes are on it so I'm going to promote myself. Hell.o!

Thousands of tweets were sent during the .net Awards: here are just a few ...

Drunk on Red Bull and destroying @ChrisDKemperat Pacman.1 are winner!!

These awards are sodding heavy, do they not understand. this industry? We don't have arm musde strength! #netawards yfrog.com/ eP476kj

The .net awards ... Discussing penis enlargement sparn, and behavioural targeting with @adambankin_labs #netawards

Raverly woman am free tonight

looks hot ... I #netawards

Patently absurd?

Subject: Patent From: Daniel


Purple and green lights ... it's all a bit Joel Schumacher at the #netawards.

Re your Big Question in issue 20g ('ts it time to abolish the patent system ?'): patents are designed to give firms an economic incentive to research new technology and create innovative products. They are necessary because companies have no incentive to invest in research only for it to be copied by their rivals. That being said, patents are abused far too often. Things like new camera designs, innovative algorithms, efficient industrial processes and hybrid eng~nes all deserve patent protection. But blinki ng J-shirts aren't exactly innovative and providing someone with a patent for that is economical'ly inefficient. Patents were never intended For silly things like that. We'll have to disagree about blinking T-shirts, Daniel- we think they're awesome. But aside from that, the rest of what you write makes a lot of sense ...

Holy crap! Just got word that Typekit won the #netawards Web App of the Yea r!

You guys at #netawards are missing a great episode of Springwatch. There are starlings and everything, all flying arou nd#bbc

@ #netawards and so is @ jackwhiteha II- want to go and touch him mmm

@ravelryWOW!! Ravelry just won the #netawards Commu nity Site of the Year! Amazing! Thanks to the judges! We love you, Ravelers!

Although I'm sick, really tired and lost almost atl of my English vocabula ry, this was an awesome party! #netawards

Awesome atmosphere at the .NET awards! Let the good times roll! #netawards

So excited! @Modernizrhas won Open Source App of the Year at the #netawards! Thanks to a IIwho worked on/ contributed to it!

Thanks #netawards for a great party .... And rna king my feet hurt and @ryandownie so very drunk! <4
@Jessica Stott

Subject: The basics From: Jason Palmer
I am finding your magazine interestinq but books more practical for a newbis like me. It is very confusing .. NET, PHp, Dreamweaver ... It's very confusinq, all these different wa,ys of building sites. We'd agree Jason, books are the best w.ay to learn the basics, but the mag is a gre<lt w<ly to keep on top of new developments and technolcqies, industry news and so on. Keep at it _ things WILL get less confusing the more you learn and do .•

So is the internet dosed tonight if we're all here? #netawards

Congrats to @zeldman for the #netawards hat trick and @happycog for the Agency of the Year award. Most excellent work.

@jackwhilehall Cool seeing you at the #netawards _ I am making a shirt saying 'Proudly Lost to Jeffery @Zeldman!' :)

Itouched Zeidman's #netawards


Torturing people in the food line by eating food #netawards

polagem: Mesmerised by the #netawards hashtaq .. must. do. work

For the record, airport security didn't bat an eyelash at OLJr trophy. It came carry-on the whole way. Heavy plastic cubes are OK! #netawards @sentience

Join the debate
As well as writing to us, you can also join your fellow readers and the .net team at


.net/february 2011 11

"We at learn2Saii have found the hosting and services offered by 1&1 extremely reliable and excellent value for money. Their control panel is simple to use yet full of features. We hope to grow au r sai Iing school website for years to come using the services offered by 1&1." Mark Sanders, learn2Saii www.learn2sail.com

WI·' •• f'll ....._.., ......... __


......,..._I!~- ~, ....~ ~
-. I'

-~~......._...~.~ ....... ~--.~ .... _~'i.~ .......

.......... .... ~~~:Ii!!iI!I'"" ~ ...
.. ~ ~ ....

..... I».~


==-~~ ~~.,~~
-'~.JiM~oI!iIiIi!IiI!II_1III .... ~lJII!iriilf:ql~II'111I1Q


.IIMII......... -._


• 1 .uk domain included .10 GB Web Space • UNLIMITEDTraffic .1,500 IMAP/POP3 E-Mail Accounts .1,500 Online-Office Accounts .1 MySQl Database • PHP5 indo Zend Framework, PHP6 (beta) and Perl • NetObjects Fusion® 1&1 Edition* • 1&1 Easy Shop .2417 Express Support


per month for the first 6 months. then £4.99 per month'

Check out our website for more fantastic offers, such as ...

.info domains only £0.99 first year' .CO.lIl< domains only £2.49 first year'

Ribot also wants more optimal frameworks. though. jQuery Mobile Ijquerymobile.net/february 2011 ." And Singer. It's bum to support one or two platforms but relies on jQuery." he says. and calls it "a robust set of too Is for mobile i nte rfaces" but says he's on the fence reqardinq such frameworks.. which can be good for a unified user experience." Right now. wants a framework that "allows you to build templates that feel like ERB in Rails. He hopes new developments wiH "keep the essentia Is of the 33 Big mouth With cyberbullying on the rise. whose comments sparked much discussion about mobile frameworks. and that we'll see more specialised frameworks for things like gaming.com). says Tanya Combrinck * New and improved frameworks vie for attention in the mobile arena mobile experience intact without forcing a homogeneous interface".js Izeplojs. Zepto's aim is typical: "A zk library that handles most drudge work with a nice API so you can concentrate on getting stuff done. had more positive experiences with jQTouch. plus the latest gear and software The mobile frameworks space looks to become a. interactive designer at centresource {centresource. and so it's doing work that's not needed:' Jared Scheel. in 2011. Gary Ma rshall asks who's responsible for the dark side of the net 14 . developers remain sceptical." he says. but found it slow for rnobtle-only apps. "but without the desktop crossbrowser stuff or h eavy-qoi ng API (a lis that aren't optimal for mobile. I don't care about duphcatin g the look and feel of native widgets" • Get over 90 mins ofjQuery Mobile video training on your CD: see page 130 24 Reviews A new Sims expansion pack. but leads to designers feeling they can't be or don't need to be creative. major strides are being made with Sencha Touch (sencha_com). While the Rails-like framework by 37si9nais is some way off (Ryan Singer mentioned it in a Think Vitamin interview but told us it's currently "exploratory work"). built to support multiple desktop browsers.net/feed shortcuts> Make sure you don't flick past any of this lot! 16 Brains behind Dane Boedigheimer discusses why Youlube viewers can'tget enough of The Annoying Ora nge 20 Threaded Launch a bad logo on the world and internet culture will bite back. "They mostly attempt to emulate native interfaces. "For mobile applications written in HTM1S we need a simple JavaScript framework like jQuery.uk) told us: "We used jQTouch.com). books on Git and Photoshop. dovetailing with an explosion in smartphone and tablet usage. Antony Ribot (ribot co.very big deal.com) and Zepto.

" "If there's one thing an email provider must have. with the recent new. I Ms.com) jokes that this underscores Jamie Zawinski's Law of Software Envelopment . and reckons if the company succeeds "it will open up technology to a majority of the world filled with emai I. thereby obfuscating the targets all the more. Social media consultant Suw (harman-Anderson (suw.rk Zuckerberq claims email is "too formal" for most. The social giant considers its new Messages system a modern take on messaging. and it should: get smarter over time.and says Facebook's move is "a fairly safe gamble to stay relevant and stave off competition". Schmitt is "keen to learn how Facebook aims to control all these disparate electronic messaging services in one location". thai Ask. until your mouse explodes.The social network squares up Gmail in a battle for the soul of the web Facebook aims to replace email I.'Every program attempts to expand until it can read mail' .com address.corn wish it had a two-character domain. both in terms of execution and reach.corn said only 18 percent would switch personal email to Facebook. The system handily separates friends and 'everyone else'." With Facebook smashing 'Like' buttons into people's eyes with a hammer. U.cebook. bundles.com has thrown in the towel." • il~~iiiif~iiiir~~"' "iiiMjNJilii:lj'" U. texts and. Now. (EQ Ma. "A straw poll from Techtree. describing it as "a central place to control all of your private communication. so bit. both onand off Facebook". SociaI networki ng disa ster ilunes Ping took a' bold step towards becoming so mewh at relevant in November. you can inanely dick 'Like' on Amazon. . Expect the feature to be rolled out internationallysoon' The homogenisation 01 the search industry is going nicely.J 1\. it's customers' trust. if you grab an @fa." (harman-Anderson adds. 'From a: desiqn and UX standpoint. placing messages into separate mailboxes.8% Ask'. the writing was on the wall lor '3. aiming to replace email and give Google a huge smack in the face. Facebook is attempting its most audacious land-grab yet. reducing a huge link to 20 character.ly now offer. people won't make the switch. You can now find Twitter contacts on Ping and tweet Ping activity_ Natu rally. tweets link ba e'k 10 sonqs and previews from the ifunes store. and: says the company's trying to "make it so people don't have to think about [delivery mechanisms]" Designer Christopher Schmitt khristopherschmitt.org.ly 'link.corn products. SMS messages a nd tweets". and making fuseurt. "and this is likely influenced by the service's poor reputation on privacy and data shari ng.which will now concentrate on Q&A_ For some people. enabling Connect to Twitter. or so isn't good enough." she says. These enable you to shoehorn seve raI URts into a single bit. "Without that. With Google controlling two-th irds of th e rnarket and Bingyahooborg much of the rest. it was pe rha ps inevit ab Ie Amazon would roll out something similar. ernatls.uk) is more cautious about Facebook's plans.It mashes together conversations with friends. chats.

we want to change how people use the Iweb by offering the most complete and customisable browser in the world. "Our objective is to significantly beat our own growth pace. With Opera 11. The number of people using the organising tool Evernote. The quickfire mixedmedia blogging service.the same number related to fixes in Apple's own proprietary code. althouqh he partly puts this down to their ease of creation. &>vt'&>n.J __ This all sounds terribly exciting. according to the company's blog. . served t.net/february 2011 . He hopes that figure will increase once Opera i rs fully in the wild. browser shares are in decline or stagnant. but perhaps it will differentiate Opera going forwards. Opera 11 was readying itself for further shenanigans. and there's certainly potential. After all..6. Opera VP of desktop products. a clearer address field. buoyed by the news that its mini-me had doubled its share over the last year.. Opera's hoping its desktop will make similar gains." he says. The percentage of security issues in Mac OS X 10. "We doubled our user base over the last two years." Given the trend towards simplification.5 that were patches related to Flash . . It provides 'tal~!!I_ stacking' (an organisational tool that enables you to group tabs). Standel thinks so and says the company's twice mcreassd its staffing: level to cope with approving "incoming extensions.. but we wonder whether anyone will care enough..What's planned next? a [iout those untll they actually -cprev 16 . but the latest took under three months.dnln< support." he adds." • ~ ~ Things you never knew you never knew The number of USdisplay ads over 03 2010 that Facebook delivered. and nn·-rI"m".. act tnat the eRlsoaes are snort ana The year-on-year percentage growth of Tumblr. momentum these days is with Google Chrome: other .nrlr plug-ins. "People a re different and ~ have different needs. improved mouse gestures. ·'9"'''. according to com Score." retorts Jan Standel. "It's extremely simple to make an extension using open web technologies and then reach more than 50miUion people using Opera.zbtllion page views in October 2010 and had nearly ten million Tumblogs .net/feed • IJ * Opera goes to ---_ 11 Pump up the volume: Norwegian browser plans to shout loud in 2011 As we were going to press.. It took over a year for the service to grab its first million U5efS.. This means Facebooks market share is a smidqeon over 23 per cent. The brains behind . --. "Simple browsers are boring. this seems a contrary move. With Opera 11. according to comScore. which is sure to 'please' Adobe.

developers. and domain names to your product range. . unlimited bandwidth and the ability to host unlimited domains at no extra charge.a II sa les@ he'a rtmt e rnet. Exchange hosting.)'DebH A 1. 'to "--S·_#4\.llJ'\. V. Offer your customers a complete web hosUng solution by adding. co u k Prices exclude VAT .!.DlRECT E. Te '0845644 775'0 .. _s __ _ I ·0 Our reseller hosting package includes unlimited web space. dedicated servers. agencies and IT entrepreneurs of all sizes.perfect for designers.

mostly mobile. They've improved their participation in the W3C and support for standards.Mozilla and Revisionj. an initiative to fa. com/2010/034it2/diso-2-personal-domains.te the creation of open buildi ng blocks for a decentralised social web.but none of them have really succeeded. like RDF. but it also has its own psrrnashorthnk. h'Review and even the draft hRecipe standard. One of the things that'. until rnicroformats came along and made it simple enough for typical web designers and developers. and Google's Android. And Silverlight is not really competition any more either. and empower the open web applications platform to provide just as rich experiences as any pro prieta ry platform.• Tantek <.and even microdata .net: What form will it take? T~: I'm focusing on an implementation called FaIcon (ta ntek.com With roles at microformats. It's no longer enough to just publish content on your own site. I'm working on two vartants: a software insta II that you can ru n on your own server.netrfebruary 2011 . Rich Snippets feature has helped drive a lot of adoption of hCard. Here he talks to Tanya Combrinck about lEg. both of which are personal and controlled by me.org. . Tantek Cebk tantek.to/qOMroh) . The remaining competition is proprietary mobile platforms. to take the best of what the proprietary platforms have come up with. the open standards guru is busier than ever. Here is the copy that went to Twitter for example: twitter. Note that due to Twitter's limitations. To be social.0. There are some areas in which Internet Explorer 9 needs to show some improvement.net: What's your take on lEg' T~: rrn fairly pleased with the progress Microsoft has mads. based on a tweet I made earlier this year: tarltek. using their own website. Google'.org/TR/ geolocation-API/l_ So far there is no sign that lEg is going to support geolocation.net: You're a big advocate of micro formats. impressed me about Firefox is the dedication that its developers have to precision standards support. which helps a.com. instead of depending on a single site like Facebook_ In the past year. Steve Ivy and I have recast and updated the DiSo vision.com{t/'status{8581278202.!2! -cprev 18 .hortener-hatom-push-1'elmeauth. all of us that work on web standards and web browsers. .net: Why is Mozillaa good place to do web standards work? T~: MOliUa has been focused on implementing high fidelity standards support since its inception.com/w/Falcon) that lets you run your own site as a node in a global distributed social network. Recently.corn. Education Studied Computer Science at Stanford University Previous career Chief Technologist at Technorati and representative to the W3C for Microsoft Online tantek. It's easier for users to get started with a hosted web application. . computer scientist for Microformats. That URLis a tweet that is hosted on my own site.:: The biggest challenge is competition with proprietary application platforms. the creator/ publisher. . 'RDFa. as blog posts do.org. We've reached a level with HTMLS. CSS3.11 web users. How's that going. standardise it.and JavaScript that we're able to build most what people used to use Flash for with standard. prototype it. while maintaining the connection back to the original so that your friends know where to go for more. however.net/feed . tantek.? T~: The chaltenqe is to produce a product and/ or service that enables people to own and control their social presence on the web.net: You're involved in DiSo. When Firefox supports any particu lar web standard.. as you would install WordPress open source software. In addition. the content is abbreviated [elltpsed) and provides the aforementioned personal permashortlink back to the original. instead. alway. XML. (Further reading: bitiy/exwJyx and www. hCalendar.. that "personal tweet" is also rea-ltirne-syndicated to Twitter and Google Buzz. It has its own perrnalin k. similar to the original Slogger FTPtool. So now it's our job. such as Apple's iOS. and then they can install and run their own if they wish . you have to automatically syndicate your content into the communities where your friends and broader social network participate. such as implementing the nascent W3C Geolocation API Specification {W3. What's the state of play at the moment? T~: Historically there have been nu merous efforts at encoding "semantic" data on the web. it does so very thoroughly and with a great deal of attention to detail. microformats and developments in DiSo .net: What are the main challenges for web standards at the moment 7 1(. plus a hosted web application that you can lise to publish the content on your server. the W3C. which is a shame .elik Job Consultant for clients indudinq MoziUa and Revision3. This really is the key to DiSo 2.they really should support it since it is stable according to the W3C.cjlita.

Vaizey soon backtracked and tried to side with net neutrality advocate Tim Berners-Lee . is Report loda!-j The time 10 act is now. but UK communications minister Ed Vaizey's latest dance had terhie chins wagging in late November.ukfast." she adds .friendly version of their blog for free 'in five minutes'..org.md discover how a critica] change In customer buying.co. "Before long. director of production at centresou rce (lifeasachip. behaviour crealing.• -"-II1II---I - . believes a move away from net neutrality would be disastrous.mashape.a. . There's a native Word Press pluq-in. Any software component listed on Mashape can be used via a single interface.I. YouI'" Free DownLoa..net/feed www..who admitted Vaizey's passage didn't say he was against net neutrality but nonetheless stated the pair's thoughts weren't "entirely in line"...:. www.uk) agrees. U"" . A paid-for version is also on offer for commercial sites. with infrastructure all set up. strangling ad networks and killing startups that can't afford to make deals that would en sure thei r content flows freely "There isn't always a dear separation between .. broken market where costs to access become less about speed and more about the content you consume. .uklwhat-customers-wanthtml Call now 0800 954 0895 \ UHFClSI::. It'd be bonkers to expect politicians to be transparent and not rapidly spin. preventing smaller startups from having the same exposure and ability to succeed. but about slowing competing content. the greatesl online opportunity in history.-- .Sounds good to us. when it appeared he didn't support net neutrality... The passage that caused concern talked of "the evolution of a two-sided market where consumers and content providers could choose to pay for differing levels of quality of service". There's a video explaining how the process can be completed in under two minutes. since a two-sided market becomes a." he says. This sfte enables anyone to create a mobile. "Providers with money would have an unfair advantaqe in the method of delivery and availabi lily of their content. the potential for abuse will be vast. where ISPscan create commercial relationshi ps that favour some content sources over others." Social media consultant Suw (harman-Anderson {suw.dyour free 1 Minute Guide: What Customers Wanl.:. and 50 they call themselves "the Etsyof Cloud Services"." This isn't about reiqoinq in filesharers..think of Vtrgin or Sky . and even ad network integration.com). Chip Hayner. What Customers Want DOWII\!Qa. with the mobile blog up and running immediately. (harman-Anderson believes.50 such abuse is easy to imagine. consumers feel ripped-off in paying for 'bundled' content they don't cafe about. End users would suffer.. One unified way to access services: Mashape enables developers and service providers to instantly make an APIavailable to other developers. adding: '·Ifthe UK government gives the go-ahead to creating a two-tier internet.mm thrown into doubt Hazy Vaizey sparks debate on the future of British internet access UK net neutrality 'One API marketplace.ISPand content provider .

III1BrI":wKEN ACCEPTABlf PRACTICE? BECOMe MI 0[DTHI5 -cprev 20 .netlfebruary2011 . Also In the news All your base The "All your base are belong to U5" rnerne goes wild.• 10_years_ ••••.important to us B".t to us )'01. Meanwhile craplogg.me/cQwTS5). Looking at terrible logos is so much fun that someone has set up a competition to create the most horrible design possible howlowcarwourlogo.ou'look at this $i1e tclills what aOOuloorbllSln ess.• Ta_g: threade~l1· Your opl:n'lon 'Is very Important to us Yellow periL A Simp50ns-inspired of the London 2012 Olympics logo ___ . and they're all after cash.• _ .1 think Belore y.••• ago: ••• __ • __ •••• February _ .net/feed H. Your opin.iQus. Big brands would do well to recognise the danger posed by thi s sit u ati on.•••••••••••••• 2001 __ •••• _ •••. visit: first tried to . Bart Head'{buzzfeed. Designers live on the internet. Pop talent Robbie Williams picks up three Brit Awards.M.rarol n etrnagj pretend the ~breild_ed 21:1launch of the logo had been a 'crowd sourcing project' (on. becau se mi sta kes will provoke a very public outpouring of mockery and abuse. the intern~ backlash was fierce an d unrelenn ng London 2012 Olympics logo. php). Gap this page. me gave people the opportunity to recreate their own logo in the new Gap style and the Twitter account @Gaplogo featured the log.." wrote Jay Hathaway at urlesque.t )IOU Ga: Loco Logo When Gap ditched its old logo Ileftl for a new. com!2010/1o/o5lnew-gap·logo-isa-box-of-fail/. 1-. when the unveiling of its new logo (right) offended. :> Backpedalling f~ll the links on like crazy. Dorsey Shaw reworked the unpopular image (left) a s 'Usa Simpson Giving.•• _. The debacle was reminiscent of rework the controversy surrounding the B 10" youstelt eaUI'I£I. Your o. 'Is it the beginning of the end of the free internet? Web builder Drearnwesver 4. Check out the gallery: there are some real corkers in there .dglK.••••••.COM Your opinion Is very Q . well.• The web ~ ••. com/201o/10/0](gap-ugly-new-logos and there were similar comments at bit-ly/gxhJ DJ and the selfexplanatory yourloqomakesmebarf. Chart toppers Don't Stop Movin' by S Club 7 and Thank You by Dido.o itself venting.• _ .com. 50 super search tools How to find everything you're looking for quickly and easily.pinion is very lmportant to us Designers are very particular about design. rubbish one Irightl.joh Is very Imporian.4. Fireworks 4 and Netscape 6 reviewed.coml provincialelilist!2012·01ympics-logo· lisa-simpson-qivinq-bart-head-4tS) and the Goatse parody (above) even made it onto the BBC news (londonistcom/2007/o6/extra extraolym.ell us Whal l 1I1.•~ .U us 'vii'>al you thinlc: 8Iboo1 oor bus ness. Sti cky co nte nt Top desiqners on how to build a site people won't want to ~eave.nk about oor rest8Uf. End of the free ride Big companies are taking over the web. about its hurt feelings. _ •••••••• What we covered New Year's Revolution 12 foolproof ways to make 2001 yourbe~everyearon~ne.( lick patent An injunction against Barnes & Noble for infringement of Amazon's r-Chck patent is lifted. everyone! "My cat knows more about logo design than whoever approved this stinker.•••. .lol'9 you pumplhat gas t". Ariel Sharon ukud Party leader becomes Prime Minister of lsrael._ . Gap recently learned this the hard way.lb. then finally admitted defeat and reverted to the old logo.E SRADS IRADCO ION.


l"lddiscover new places.For the most part.. something. He provide. designing for iOS. What do you attribute this to' KJ. go with your friends. : @stuartbates24: Gowalla seems to have penetrated deeper into the web design community compared to Foursquare. friends and co-workers for feedback. but to push the bounda ries. who are active users of the service. Keegan Jones gowalla. It's a fun and easy way to share the places you. ve free a reign or is there a body of suits making decisions? KJ: Thanks for the kind words! I work with two very talented desiqners: Tim Van Damme and Drew Yeaton .tmobile design is a different beast from the web .com The designer for location-based service Gowalla answers your questions on rivalry with Facebook and Foursquare. New interfaces are being dreamed up everyda. I personally find it fascinatinq to look back a year ago and remember where I was. But once you know the rules.n on the design. rd love for someone to create a tool with half of the feature. you. @keN @PhilReadman: The design of the Cowalla site is great. We're all trying to create a quality product that we like using curse Ives..ntegral part of everything we do at Gowalla and it has been since our tnception. It's a must for anyone desigl"ling for iOS.o. myself included. The real value is what happens after the check in and that's what we are focused on building. Share places you g.et started was Tapworthy by Josh Clark. The best way to learn is to jump in and start making. visit.t stamp gets added to your GowaUa Passport.net/feed rule. Jeffery Zeldrnan and Dan Cederholm. that me et th at vi sion . you can break them. We listen very closely to our community of users. such a.• -cprev 22 .. Do you h. it's nice to have outside eyes give a fresh perspective of the pain points. of Photoshopand geared towards desiqners.. we have free reig. Whel"l you travel. By seeil"lg the places your friends go.So it's important to not feel limited by what has already been done. at Gowalla.I had very little knowledge when I started mobile design. Keep a rich history of the countries cities. The 'Check In' button witl continue to be added to many apps in 2011. and stories that are important to them' Gowalla is like a passport for your phone. Bu. Our goal is to encourage people to go out and discover the world and we've developed and will continue to build feature.uidelines. II"lmore thanizo characters . Design is an i. Fireworks vs Photoshop and dealing with suits . And when you checkin to a place on your phone. Hopefully we'll see some better tools emerge in the next few years. It's a fine balance of trying new thinqs and sticking with the familiar.. behind great software.nebfebruary 2011 . @get_dave:ln light of Facebook's 'Places' launch. how does Gowalla intend to ~ differentiate itself in future releases' KJ: location-based servicesere still in their infancy. @richardkendall: How would you sell the tdea/beneftts of Gowalla to a newish techy in 140 characters? KJ: Keep up with friends. even though it has become a very bloated piece of software. One book that helped me g.y. B Keegan Jones Job Desiqner at Gowalla Age 22 Education Self-taught Online ~egE!}jQ!"l~. And each stamp has a story or memory attached from your journey.It's important to understand the dHfferencesand constraints . which basically says "I'm here'. And sometimes that causes us to have tunnel vision. It's well-done. Every place you visit has a' stamp. The guidelines help get your head wrapped arou nd the characteristics and I u-I@Ph. How can we give people a way to share the place. tha. They help us figure out what we can make easier and dearer. We spend a lot of time iterating and improving on the design 01 our web and mobile apps. We feel very fortu nate to be so well received by the web design community and the high profile folks in the industry. we hope to inspire you to visit new places in your city and around the world.S. a good overview of mobile design. The closest thing that I've seen is an app called Pixelmator. @chrismj83: When you started designing for iOS did you read the Apple design guides or did you design to what felt right for you? KJ: I read' the interface g.. and place..ilReadman:FireworksorPhotoshOP " for comps? KJ: Photoshop. So. but missing some key features that I use on a daily basis.. but also dives into the nitty gritty of the iPhone interface. a stamp gets added to your passport. A lot of people come into mobile desiqn from a web background.om. A.

)t....rackspace.uk .computing as a service from Rackspace. -------08008401279 _ No more . benefit from the flexibility and scalability of pay-per-use hosting solutions. Don't klingon to your servers. Choose Rackspace Hosting.co.Beam Scotty .rackspace.hern up. ..co. servers . .uk/nomoreservers ..AsT serviCe a • - Managed Hosting • Cloud Hosting • Email & Apps www. it's time to see the new way of computing . choose Fanatical Support"'! Find out more at www. free your business from the hassle of in-house server management. If you are still buying in-house servers and managing them yourselves. . Choose a better way to manage your computing resources.

and you can write notes in the margin or highlight text. Handily. but it's highly reflective and terrible for picking.-£ II Arches 32 internet tablet 129. At any point in a project. up prints.word with your finger or the stylus to get a dictionary definition.8 This Pocket Edition reader packs in some impressive features . a PMP with WHFi capabilities. featuring custom illustrations from Kevin Cornell.99 www. Verdict The screen is responsive. If you're a fan. and the text is very pleasant to look at. but that's e--ink for you.net/feed/reviews *Latest gear this month Tempting tech and geeky gadgets . light and feels wonderful to hold. Verdict The on-ear design appeals more to some and less to others. They come with two green cables: a short 1.6ft one. mJ ling (fl09) www. cprev 24 .99 m Mental Notes II Sony Reader PRS-350 lEI Q460 mini headphones ama:J$45 qetmentalnotes com ama:J £159..archos com &&4%9·8. conductor for Frank Sinatra and producer of Michael Jackson's Thriller album.. This deck of cards from Stephen p Anderson. WonderfuLly illustrated. brings you 50 insights into how humans think that you can use to kick-start your creativity. We'd go for an iPod Touch instead.harman com These on-ear headphones come with a ringing endorsement from Quincy Jones. too. 8GB of storage and a 3.6-footer and a longer 3.net/february 2010 .. they can be folded flat and packed into the included protective carrycase. the ear cushions are soft and the portability is handy. There's a VGA camera. pick a card and consider how you might exploit the given facet of psychology to achieve a certain design goat Verdict Each card is a bite-sized source of inspiration that will enliven any creative process.2inch screen. There'. Can be a bit slow. It shoots video and the whole thing runs on Android.you can double tap a. Verdict Thin. also a separate application for rnaking notes and d rawi ngs. It supports an impressively large range of coders. Comes with 2GB on-board memory and a nice aluminium finish. I The Archos 32 has a feature set similar to that of the Wod Touch: it's a phone-sized device that isn't a phone but can accessthe internet.

com Ilf you're still using Wireless·G. Verdict Good value and great for films and games.99 www. but the build quality isn't wha.Ii! EX297 Time Speaker Dock / _£49. There's also a funny little dock for when the iPhone isn't there.99 www. _£134. easy in staUation. which means they get the seal of approval for PC gaming and multimedia on the desktop. you're missing out on the substantial speed and range improvements of N technology.devolo. Verdict The sound is quite good. Verdict A great solution if you have trouble extending a network over a large space (and who doesn't?). and is compatible with the newest Wi·Fi standards.smm on one of the satellites and also a headphone jack. It's a 200·watt system.99 www. transforming any power socket into three ethernet connections.srnm on the sub. pushing your network out into hard-to-reach areas. and the dock works as an FM radio on its own. The E3000 from Linksysdelivers wi reIess speeds of up to 300M bps and Gigabit Ethernet.exspect. but make sure you try before you buy if you want to use them a lot for music.co.linksysbycisco. and has a built-in media server Includes Cisco Connect software for step-by-step. It also charges up your i:Phone.uk This slightly comedic object enables your iPhone to i mperso nate a nan alog ue cloc k radio via an app that displays the hands of the dock and the number 12. These versatile speakers are THX-certified for multimedia use. . another 3. There are plenty of convenient inputs: .co.logitech.com 2. which uses electrical wiring to transmit data. Verdict AUthe power of an advancsd ro ute r ina packaqe that's ea.uk Extend your home network with this handy powerline kit.1 also creates WHi access points.sHy operated by people who aren't tech-savvy Performs well. / dLAN 200 AV Wireless N iii III E3000 Wireless-N Router 1:1 Logitech Z623 _£149 www.RCAand s.1 speakers -'-£119. Additional adapters are £80.t you'd expect lor this price and the app can be annoying to use.netlfebruary 2010 25 . 1.

[j kely to need. ble IEiIiEII e Book Know nothi ng abe ut IOU rce cod e rna na 9 ernent and version control? This guide helps you set up and use Git. onal Techniques (8--10) Getting Good with Git Sl9(Eu) Rock.. or ha nq with vampires instead and have half-human. Th ere's a la rge secti on 0 n rreatin g web fu rniture.netl feed/reviews *Media this month The latest hot new releases 1~ I. and progresses into SOme of the more advanced features.99 G!l!I..ticaUy. ttn s is a set of co no sely ex plai n ed practice I techniques tailored to what web desig ners are . but this probably i sn't a book thai will inspire a rti. followed by instructio n on sped" I effects.. halfvampire children. Sims am befrie nd celebriti es and en gage in pretentious behavi ou r. All these a dventu res take place in a' city of gru ngy dive ba rs and swanky dubs..net/february 2011 . 26 . Verdict Great lor lea ming lots of releva nt techniques quickly. screen ca sts ca n a lso be bought separately lor $9. The included two and a hall hours of 'mmmm!!I_ "£2. Ihis ebook !lui des you through acorn plex subject with the minimum of stress. "Hanq with vampires and have half-human children" -cprev Verdict lots of new things to do. There's a lso advice a be ut wh ere to go when you want to push yo ur knowledge even further. Wiley IEii'iflD Paperback Suita ble fo r anyone fa. rly new to Photoshop. two new Ii:!lIiiI!IJ ImmfZ4. edges and favicons.lmID. dubbing and vampires.9-99 Electronic Arts PC a nd Mac Th e tate Night Expa n lio n Pa ck add. Ii!GIIIm!lI 1m rea 1mI 01 experience to your Sims' lives. sue has bloq heade rs ba ckg ro u nd tiles. Verdict Written in plain and simple lang ua!le. II DESIG"IHGA SlOG HfADER 8 9 II pCS5 7 (l·l! The Sims 3 late Nighl Expansion Pack (3'7) Smashing Photoshop ($5: 100 Proles. but it's a ha ssle 10 bui Id bars in your old towns and clubs are otten wei rdly em ply.


ures doing.reat animation tool. but right now what it mostly does is cause teeth gnashing. the results \>ViII only work predictably with WebKit browsers since these are the furthest along. It's not a pa rticularly glamorous topic. or you can throttle it so your web use isn't compromised.lt ain't pretty but it sure does work hard on your behalf Against Good motion tools Simple to learn Lacks fi n esse Short on basic commands a sufficiently Once its UI has reached sophisticated level (hopefully in time for the full release).cp@products@nimalor Price Preview is free System CSS3animation from the 'look mom. There have even beer) people creating animated fig. Animator lacks many of the capabilities you'd expect of a production tool. to tell the truth this is more like a pre-release version of Flash than anything else. this is a good off-si Ie storaqe/backup solution. Windows New web Any backup system has three essential qualities: security. Mazy will take care 01 it Against Simple interface Autometic settings Good security Initia. Things can be done but they take a lot more time that you'd like. Once you're over the initial setup and backup hump. Windows. or particular directories/lites. linux -. So long. hope you'll. But should you ever actually need it. If you wanted a ball to bounce around the screen. it develops a kind 01 mystique only true panic can induce. 'But if you Mo. But once Sencha has done some serious reworking of the interface and beefed up the animation tools. At present. take ages you as Sa ckup tools a re Iike insurance: do. copy and paste.50/GB per month System OS X. One example is the timeline-selection system (click there first.com/pro Price S3.l backup can Everythinq is encrypted for transfer and that transfer ca n be as quick as your connection. or a message to appear from behind some kind of graphic.ld Sencha Animator (beta) Web www.although. That's quite frustrating. But when it comes to things like animating text or transitions there just isn't the flexibility or degree of subtlety in place yet. but at least it gives some time for the team at Sencha to take in the beta feedback and produce a full product that could have the same ki nd of future ahead of it that Flash did before the Millennium. There's also a local backup option.95 per month + SO. This is going to have to go eventually. never have to cash in. _.. for example. MozyPro enables you to set backups of file types.:yPro delivers just such a service. as x.netffebruary 2011 .. The interface for setf ng this up is no more complex than Windows Explorer so even for the most non-technical user. you can just leave it running and forget about it. such as multiple select. you want it to be as straightforward possible. then g.iii". -cprev 28 . beinq able to export valid (553 that would take forever to tweak by hand is a win ninq proposition. You could. the latest standard. But whatever the weaknesses. this is going to be an in-demand piece of software. it will make a lot of sense to at least create prototypes this way. MozyPro has all these. '!!. obviously. simplicity and speed. As it stands.netl feed/reviews *Latestre M~zyPro softwa design tools reviewed You could set it to auto-backup your music folder plus your accounts spreadsheet" it AninsurancepoLicyforyourdatl Web mozy. set it to auto-backup your music and document folder plus your acco lints spreadsheet Keep it safe IIyou have d ocu m ents pictures or vid eo' that simply cannot be lost. You can see that the potential is there for a g. There are some comparisons between Animator now and Hash in the 90S .sencha. backup. CSS3 animation effects are only going to get more popular and having the ability to crank them out without getting up to your elbows in code will be more than a !lttle appealing to designers. as the price is right. It may be a little rough around the edges but Sencha Animator has a lot of promise. with adopting. no codingl' school The strongest aspect of the system is actual motion. that would be no problem.Eiit. Time saver (553 animatton toot Sencha Animdtor.rab the item on the stage). basic walk cycles.

. But overall it's successful at keeping. but it is limited. then finds your way to the hotspot of your choice. !ftIiI!. Total Hotspots seems to have a viable community of users. given the ability to properly separate style and structure. dean HTML. To take those edits to your live site you're going to either download first.net Price Free System as x iStumbler sniffs out local Wi·Fi networks but also takes care of Bonjour. whkh keeps you on top of your edits at all times.. the ability to see margins and basic syntax highlighting. spotting openzonss and the like for what they are. and the make of the router can't hurt. the live feedback and the dea n cod e it fosters are all first rate. .Mobile/Symbian Thcl. It may not have a II the bells and whistles but that 'spart of its charm.. Verdict A usable and reliable app.S ~.wefi. so i Phone users have to rely on directory apps to find open Wi-Fi spots. Th e key to its success is its live feedback loop between (Ode and design views. If there's a free network withi n reach. Once there you can edit to your heart's content. few updates such as some kind of visual measuring toot. .. if you're working with a site that's written in PHP or the like. Verdict A handy application for anyone familiar with the pay site redirect that usually results from trying local networks at random.. Verdict iStumbler is very usable and the addition of Bonjour and Bluetooth isn't without merit. _.com Price Beta System Firefox web app An HTML/CSS design tool that lives in the browser: it's a nice...com Price Free System iPhone/Android It seems Apple aren't keen on applications that actually scan local hotspots.. Also.eity ilrtn . I(j<· "*-"imbong. There's even a vibrant enouqh community attached to Total Hotspots that many of the venues have reviews attached. The encryption level is pretty useful too. this is a really nice app to use A"gainst Smart interface Code separation No syntax highlighting Really nice to use. simple idea and BuildorPro does a good job of keeping it that way. but it would be even more useful if unsecured connections could be scanned to see if they're free to join. There need to be a.d_"u". then Wefi has a g.com Price Free System PC/AndroidjWindows Total Hotspots 1... Buildorl'ro gives you the ability to work on pages cloned directly from UR Ls_Just paste the page address into the relevant pop-up and you r page's HTMLand its associated styles are cloned into BuildorPro.1 Web totalhotspo\s. creating live pages with BuHdorPro seems like a good idea. is where BuildorPro excels.. Working from scratch to create nice. The interface is a simple list affair that links to a mapped version should you need to.. 1'1 might be handy to have a level meter for the networks within reach. ll's a nice app to use but on the Wi-Fi front doesn't go much further than your in-built network detector system..netlfebruary 2011 29 .. then re-upload. Total Hotspots is a nice example of this approach..di.2. as is the temptation when not immediately faced with the consequences. For creating prototypes and demos this is a really interesting option and. you're going to have the whole integration process to look forward to once your design work has been completed in BuildorPro.t!. there's a n extra step involved in the process that most people won't appreoate.. either saving your changes as a preview or (more sensibly) by ftp-ing to your site or downloading to your home machine .ood chance of getting. along with information on their status. Even in beta. or you'll want to ftp with a changed name to avoid any unfortunate accidental overwrite" Either way. indicating slqnup pages and noting! encryption where it's relevant. your design on track without adding a ton of additional superstructure or requiring you to work in a certain way_ Interface BuildorPro'~ de~ign/code interface is a real strong point. It's not infallible but on a good percentage of occasions Wefi hits the nail on the head.__ Weft Web www. you on Iine. iStumbler Release 99 Web tstumbler... . which means its database will continue to evolve. Seeing your design react to code chances means you pick up mistakes very early on and quite quickly fall into a pattern of assessinq changes on the fly rather than letting them accumulate.net/feed/reviews Site builder BuildorPro (beta) Design and code for both live and prototype sites without ever leaving Firefox Web buildorom. Bluetooth and location services. Looking for a free Wi-Fi connection? Wefi does all the necessary work in advance a nd presents you with a nice list of available networks. The Hoating menus.".. This is the first problem BuildorPro faces. with your CSS pulled out to a separate file. Allied to this straightforward approach we have an intuitive floating menu system that just works.

. • ~ Happy Snapper Gowalla has taken the bold step of making itself interoperable with its closest rivals. rotated and edited. Facebook status updates.. .--..... -cprev 30 . the image can be unleashed oraTwitter or Facebook.net/feed *Hot mobile apps Little bundles of portable perfection 'There's a huge selection of styles available. There's a huge selection of styles available. Hickr photos and the like are pulled in and placed on a page for each day_ "didl Wonderful for keeping a record of your online life that you can enjoy in years to come .Check-ins can also be shared on Twitter and Turnblr. .mlIII You can now see check-ins from friends if they don't use Gowalla .netrfebruary 2011 . Once your rnessaqe is finalised.exceltent! ~ This enables you to add customised stickers or badges to pictures of your friends. Perfuct if you're looking for an outlet for your unexpressed:caption-writing talents._ even .while tweets.including pictures . and each can be resized" Gowalta Momenta iTunes App Store Momento is a diary in which you can post private entries . The latest version of the iPhone app enables you to check-in to Facebook Placesand Foursquare with a single lap . and: each can be resized. I.


. Workshops b"Y'l"" dl(! boc:i.....net/feed *Upcoming events -an-feb The best web events of the month for your diary I Monday Tuesday Wednesday Thursday Friday Saturday Sunday Frve Simpl Go..!IIt.II".. So"_ .d8"P' .Ii...... !. ~ -cprev 32 .l f..fl ..:d.s r.net/february 2011 . It. ..

But that doesn't mean they should be able to say "not my problem" either. The social networks where kids hang out are too big. though. the courts are considering a pa rti cu la rly nasty ca se involving a teacher and some students. we don't act: we look to see what everyone else is doing first and take our cues from them.• Gary Marshall has been writing for . Of course. The websites where we interact don't show up on an Ordnance Survey map. That doesn't mean the union is wrong. accept the unacceptable or defend the indefensible we're telling the barbarians that it's not our internet. Kids have always talked about their teachers. but this wasn't the usual "X looks li ke a horse". The teacher's ordeal is part of a wider issue.----- With cyberbullying at an all-time high. too busy . because while there's no legal responsibility to police content I think there's a moral obligation to do so. The social networks won't do it. because it's not their problem: they provide the paper for other people to write on. And we won't do it. stab me. it means much the same thing. Online. Should site owners be held legally responsible for the actions of their users) Probably not. "X is gay".ets 700 status updates per second.bi!lmQ{Jt/7strikesQgain. bum me.Facebook g. WWJi!t. Gary Marshall asks who is really responsible for the dark side of the net At time of going to press. because it's not our problem: it's not our site. which is that nobody's policing bad behaviour online.net since the stone age. They won't get it. it's theirs .and too far away for the authcnties to have the slightest chance of controlling them. When we see something horrible. Aware of a strange atmosphere in class. :Inevitably. the teacher called the police.and in real places the landlord has a responsibility to keep the bad 'uns out. everyone else is doing the exact same thing so nobody moves." Terrified. "They wanted to shoot me in the face. Twitter 600 tweets and so on . the female teacher Googled a few of her students and discovered that they'd been talking about her online. because it's not their problem: they've got enough to be getting on with in the real world. and of course there's the chilling effect on free speech. The bystander effect So whose problem is it? It's as if we're suffering from a collective case of Genovese Syndrome. It's not just down to the site owners.mm ." the teacher says. and we're not the ones misbehaving. It's down to the rest of us too.shop being looted. but they're still real places . When we tolerate the intolerable. the teacher's union is campaigning for new regulations to make site owners responsible for the things people say online. The police won't do it. Even the roughest pubs have bou ncers. UK libel laws are bad enouqh without adding yet more opportunities for the rich to stifle Iegitima'te criticism. better known as the bystander effect. "The sexual content was horrific. or standing in a crowd watching someone get beaten or a. "X does it with Y" pueri le nonsense you'd expect from a bunch of young teenagers. l'n the real world that means sitting still while smoke curls from under the door.

which supports a staggering 192GB of RAM and can be configured 'with up to 12lntel® XeonlM processor cores and twin 4GB graphics cards. i USB ports. And workstations are just the be9inning:: with the latest technology in our scalable servers and storage solutions. uk/precision or call us on 0844 444 3903 34 . and inadequate kit could be costing you cash. software and certified application issues.net! advertoria l Part 1 Hardware for hard times In the current climate. but exceed them..co. music to magazine publishing. Your time is valuable. the most powerful 3D graphics cards and room for as much RAM as our apps can handle. You've got better things to do. Dell ProSupport provides 24/7 direct access to Dell Expert Centres. Unleash your full creative potential Dell Precisions are designed to be the world's best workstations. your productivity and your data you need support that's as impressive as our hardware. while Dell Precision Mobile workstations offer performance that many desktops would strug:gle to deliver And then there's the Dell Precision T7500. That means a portfolio with solutions for every possible workload. Protect your productivity To protect your investment. extensive ISV certification and testing to ensure that your applications and add-ons work flawlessly. when we spoke to cashstrapped PC users we discovered a world of shared frustrations: systems that freeze or crash at crucial moments. but it can be a smart step in the current climate. please visit. us at dell. is older kit a false economy? Powered by he" ar touqh times 8"dg'" ar tight. product design. a driver or the software itself? Let us do tile diagnosis. Is it the operating system. competition is fierce and every single penny counts. systems that sound like Heathrow at rush hour when they're running at full throttle: and worst of ail. But there's more to it than hardware horsepower. making it suitable for virtually any industry.epoint of contact for hardware. systems that can't cope with multiple applications. next working day on-site repair and a singll. Quiet and efficient cooling is a must. headphone sockets. and build-to-order flexibility that ensures you only pay for what you need. animation and digital irnaqinq. card readers and external SATA ports for quick connection of external drives. they told us: We want the machine to work as hard as we do. When we say "flexibility" we mean it: the AutoCAO-certified Dell Precision T1500 delivers workstation-class performance for just £499. We expect the fastest Inte!® multi-core processors. Dell is the one-source partner to match your IT ambitions. there's price. We work with leading Independent Software Vendors (ISVs) to ensure optimised performance in the most demanding environments. Designed specifically for professionals like you. The power users we spoke to prized adjustable monitors. It's a tough spec but we like tough Dell Precision workstations don't just meet those requirements. Of course power users want the world's most powerful workstations . application or environment The Dell difference We've become one of the world's leadlnq workstation vendors by desiqninq systems that work as hard as you do. easy access to To find out more.and the most powerful mobile workstations . It comes in more than 1 billion possible confiqurations. systems that take an eternity to shut down when you're brain-dead and boggle-eyed after yet another epic shift At Dell. and rock-solid stability is essential when you're typically running several demanding applications simultaneously Details matter too. and our Precision workstations are specifically desi9ned for gilfaphics intensive professionals in enqineerinq.but they also want workstationspec pes at everyday prices and low total cost of ownership. Replacing computer kit might not top your to-do list.netrfebruary 2011 . From advertising to architecture. And of course. we know it doesn't have to be that way. Your ideas deserve better When we asked power users to describe their perfect system.

These partnerships. combined with an extensive portfolio of world-class support services.com Powering your IT needs Celeron. top-end 3D OpenGL graphics cards with 6GB of dedicated memory and more DDR3 RAI'v1 than your applications know what to do with. 8 35 .co. Intel Inside.netffebruary 2011 . with twin PCle cards providing outstanding graphics and cost-effective quad-monitor support. the Dell Precision 17500 delivers outstanding scalability.uk/precision or call us on 0844 444 3903 Dell Precision T7500 A powerhouse of productivity combining lightning-fast. outstanding graphics technology and exceptional memory capacity Your personal supercomputer The Dell Precision 17500 delivers stunning performance. and Xeon Inside are trad e marks or IrMI Corporation m the US. Pentium Inside. make the Dell Precision 17500 easy to manage.dellcreativestudio. vPro Inside. With six-core Intel® Xeon™ processors. performance and reliability. Pentium. Intel Inside Logo. Intel Core. Intel vPro. xeon. That means it's ideal for virtually any industry.Brought to you by 8 To find out morel please visit us at www.dell. One in a billion From six processor cores and 2D graphics to a dozen cores. Intel Intel Logo. www. support and deploy. ltarnurn ltaniurn Inside. there are more than one billion ways to configure your workstation. Intel Atom. Intel Atom Inside. up to 192GB of RAM and ten terabytes of storage in a flexible chassis. Celeron Inside. application or environment Certified and optimised Dell partners with more than 35\eading ISVs to test and certify system and application compatibility for 90 key applications . 54-bit multicore Intel® Xeon™ processors. and/or other countnes.and we also provide the platforms vendors use to develop multi-threaded and 64-bit technologies. Core Inside.


"Westarted out with a smaller set of goals but Evan Wi Iiams wanted us to jump four steps ahead"
Doug Bowman, Twitter

Influential designer and Twitter's creative director, Doug Bowman, talks exclusively to OIliverLindberg about the design process that led to the new Twitter.com, the value of intensive user testing and his fondness for classic proportions
The new Twittencorn, unveiled on 14 September, was one of the most talked about redesigns of 2010. It introduced sig"inca nt cha nges to th e layout to pull in extra context. A new details pane now displays photos and videos as well as related tweets right on the page. However, as Twitter's creative director Doug Bowman reveals, the team didn't originaUy plan such a radical redesign.
"We started out in February with a smaller set of goals, mainly just to improve the user experience and address some of the scaling problems of the old Twitter UI," Bowman explains. 'The right sidebar was growing enormously larqe. Every new feature of the interface was added in the right column and that just wasn't scaling at all, so we focused on creating this natural evolution of the previous UI. It was the logical next step for Twitter that turned the UI into more of an airport hub, where we could scale the UI for future releases by adding and removing terminals and key locations." After a couple of months, the design team (Bowman, designer, Vitor Lourenco and Zhanna Shamis, and two design researchers) believed the new UI to be final and the eng~neering team started prototyping it. But Evan Williams, Twitter's co-founder and CEOat the time, had other plans, "He called us into a room and said he wanted us to start thinking, about the future and, specifically, delivering it now. He thought we had done a great job of determining what the next step for Twitter shou Id be but he wanted us to jump three or four steps ahead, That was when he introduced the idea of the extra details pane. So we went back to the drawing board and addressed critical issues like scrolling and scaling of the U 1.." Eventually the desiqn team moved i nto aconference room with engineering to work collaboratively "We commandeered it as a war room," Bowman remembers. "That was the place where lots of debates were constantly happening. It was fantastic, Even Evan moved in with LIS to make himself available, We also had these boards where we'd hang up all of our latest designs, so that we could gather around and have discussions about current features or designs." Four versions of UI prototypes were being worked on during different phases of the project. For example, there were several iterations of three-column design" "We had some of the navigation in the left column, the timeline in the main column and then the extra modules on the right And after we'd introduced the details pane, we started exploring some very desktop-app like


~ c.



~ ~




designs, where the UI went full-bleed and filled out the browser, eliminating browser backgrounds entirely. We planned on going forward with it but a few of LIS got together and realised it didn't really feel like Twitter, It felt much more like a desktop app and there was a lot of familiarity we would've lost in going with that direction. We needed to reintroduce user backgrounds, at least in some way, and the customisation that you apply as the user" In May Twitter began intensive user testing that lasted up until a month before launch, "We would bring in four or five users every single week and test the current version of the UI," Bowman says. "We were especially concerned with the new details pane because it was a,new interaction for Twitter. In the very beginning we noticed a general confusion - not quite a satisfactory experience, We had to guide user, and it wasn't until we were making some substantial iterations (of the backgrou nd colour for the hover of each tweet and the button in the top-right corner) that users started discovering the details pane on their own. One of our researchers assembled a series of screenshots from the testing. videos and we noticed that the facial expressions changed over time as we were making. changes to the UL They went from a confused state to a happy smile, when users realised that they could see embedded pictures and videos right there."


Classic. inspiration
A few days after the redesign went live, Bowman posted a picture to Flickr that indicated that Twitter hadn't left the proportions of the new design to chance (bitlvJas3mOo)_ The narrowest

~ ~ ;f


.net/february 2011

version of the UI is in fact based on the golden ratio, an ancient mathematical constant thought to be aesthetically pleasinq. "I've been a fan of classic proportions for as long as I can remember," Bowman enthuses ..'There's just sornethinq about them that 11"1"1, right. Sometime, using g.olden ratio proportions is accidental because our eye, just gu.ide us in creating something that feels balanced and harmoruous. At other ti mes it's just a,good starting point to use naturally appearing proportions like these that have been studied and re-used in art and architecture for centuries. When we went throug-h a few iterations of the desiqn, each desiqner was using slightly different column proportions. In attempting- to lock those down, we honed in on a set of measurements that use g-olden ratio proportions. We already felt close to those because we were naturally choosing proportions that gave appropriate weight to different types of content, so it was just a matter of adjustinq a few start and stop points for each column." The design team wasn't able to maintain one set of proportions because they realised they needed a larger details pane to highlight the embedded media capabilities. "We still wanted a Ul that fitted comfortably within a 1024x768 resolution but we also felt strongly that the ti rneline width shouldn't be decreased. We couldn't dynamically resize it as the browser widths change 'because that would have affected the vertical position of tweets, so

we implemented a model where the right column flexed and grew as the browser window got wider. It mean> we lost some of the perfect proportions but it was an acceptable compromise."

Visual language
The new Twitter is similar to Twitter for iPad - and that's no coincidence. "When we acquired Tweetie, we wented to share some elements of the iPhone client and use them across other products to start unifying, our visual language," Bowman says. "Loren Brichter I developer of Tweetie and Twitter for iPad] also knew of our intention, to use a details pane in the new design, so we started working in parallel, Even though the Twitter for i Pad version launched a few weeks earlier, the developments on both were happening in tandem and influenced each other." More than 70 people directly contributed to the new Twitter and, although it', company policy not to talk about features, Bowman hints that there', more to come. "The new Twitter is just scratching the surface of what's possible in terms of delivering a,richer consumption experience for users. Tweets are still limited to 140 characters but there's more information and detail crammed into those tweets. Helping user, discover and get to the content that they care about as fast as possible is alway, going to be one of the goals we're striving towards" Another one is to create a more consistent visual language, which is becoming a bigger and bigger

challenge as Twitter continues to grow: there are over 17smillion users across multiple platforms already It's the aim of Bowman and his designers to make the experience feel native across these, while keeping the ultimate features and core concepts of Twitter interactions the same. The iPad, for instance, offers opportunities to explore and in novate and Bowman suggests it might inform the development of other interfaces in the future. Talking to Bowman, who famously cited Gcoqle's over-reliance on data as the reason for his departure (bit.ly/svNqB), it becomes clear that he remains as enthusiastic about his job a, he was when he joined almost two years ago_ He sa,ysTwitte r valu es de sig:n and th e user expe n ence highly, and that he can impact both much more than at Google, partly because Iwttter enables him to monitor feedback within seconds. With the new Twitter.com he really has made his influence felt .•

IImI Creative director

Doug Bowman
at Twitter

Jms~·i·il;d BA in Graphic U
• ·stopdesign.com and@stop

Communications from Point lorna Nazarene University

Visual desiqn lead at Google, founder of Stopdesign





.5 TB SATA II £81Month 1 x 300 G8 SAS £13/Mol'lth zn DNLINE_ 2 x 750 GB SATA~II HDD (Software-RAID 1) Linux operating system Windows Server from fl21Month Unlimited Tra c' Rescue system • Hostil'l9 Next Level means that Hetzner Onnne now offers the mast powerful dedicated dedicated hosting plus 4-Port Hardware-RAID Controller £13/Month 1 It 120 OB SSD £13/Montn • • linuxoperatlng system Windows Sefl/er from £l21Month Unlimited Traff~c' solutio s currently available. i7-9'2O Quadcore Inel. Hyper.com SAVE C7_50! As a new customer yo can save £7.Thread.info infoCthetzner.OPTIONAL UP TO 4 HARD DISKS i7-980X Intel" --- ~------------- --------------- - HETZNER DEDICATED HETZNER DEDICATED ROOT SERVER EQ 4 • • ROOT SERVER EQ 10 _______ Inte I"Core . Coupled wtth best prices and outstanding support.hetzner.ng Technology 24 GB DDR3 RAM Up to 4 hard d ks selectable. 1 .50 on your [irst payment for a"y of these sdvarnsed products.ghef level of "peed network structure in • • Domain Regismnioo Robot 100 GB Backup space No minimum contract Setup Fee £115 our self-awned data centres in Germany.l"'Y11} . we surpass arou nd customers'expectations • • • • • Rescue system DomainReglmtion Robot 100 GB Backup space No minimum co tract Setup Fee £115 the world_ www. The HetznerOnline server plans are designed to provide with an extremely !:table a h. Please use the voucher code: 042101 (Expires on 04 Febl"l.fflre:ading Technology 8 GB DDR3 RAl\" • • • • InteI'"Core"17-980X Hexecore incJ Hyper.



for instance). makes feature detection a doddle 42 . it adds a variety of class names to the <htmb element to indicate the features supported in the current browser.com) saving aU of us a lot of time and effort r Plan 8?'1 1 Mark Pilgrim's Dive into HTML5 (diveinto htmIS.. and gives us a chance to include fallback solutions. the web was a mostly static place. with another question mark over when browsers will fully support it.Smin.net/february 2011 ... . But essentially. when your page is loaded. they're a workaround to compensate for the limited form controls available in HTML. there was the odd comment form or guest book script. bringing.. u. For many people. all the major browser man ufacturers (yes.~_ r Canvas is supported. Modernizr (modernizr. the 2010 .I. First... the browser has already become a window into a world of complex. This can be used to write speri fie (55 styles that show/hide certain areas of the page. The latest estimate puts the final date for the core HTMLs specification (when it will move to W3C recommendation status) somewhere in 2012.ry UI (jgueQ/Ui. They "fake" the more complex widgets (such as date pickers and sliders) by layering additional (not Power 1001 Modernizr. This avoids unsightly browser error messages being thrown at the user.. HTML5 is still in active development.. if we already have one in our page. but generally websites were there for visitors to simply read. including Microsoft) are already in the process of implementing many of the more stable features (as well as adding preliminary support for the less stable ones. The script also creates a new Modernizr object... and what advantage do they bring for developers] Richer forms Back when HTM L 4.. Simply grab a copy of the script (make sure to update it when new versions are released] and add a reference to it from your markup: <script src="/path/to/rnoderrnzr-r. This should be nothing new for conscientious developers familiar with best practices in scripting: before using a Java5cript object or running a particular method. HTML5 clearly defines the algorithm for parsing markup. HTMLS also introduces a whole host of APls. detailing various new objects.. developers have been taking advantage of Javascript libraries and frameworks {such as jQuery UI or YUI).oro) includes an extensive guide to feature-detection. So how safe are some of these features to use. to test if a browser supports the Canvas element. with methods and properties that can be queried for easy feature detection. get a reference to it) and see if the object we get back has the Canvas-specitic API method getContext: if (! I document. Modernizr does two things. To fill the need for the more sophisticated controls required for such applications. we can now simply replace the complex if statement with: if (Modernizr. Taking the example above.. methods and properties available via JavaScript. Yes. .. it's worth havinq a look at the (non-minified) code in Modernizr ~ it can be a valuable reference for how robust feature-detection should be implemented.01 became a stable recommendation in 1999. It includes ready-made detection for the majority of new HTMLs (and (553) features. But" particularly if you're wanting to test a wide range of features.canvas) Even if you prefer to still code your detection routines by hand.com) is a small script cre ate d sped f cally to rnake this task easie r.. while new technologies are already being rolled into browsers from the various other specifications that sit alonqside it. 1 else ( 'I elements. However.IlriII!If ... Many of the more complex features of the specification are still being refined. web-based applications that try to bring an almost desktop-like experience. hand-rolling your code can get la borious.. ~ . something. . rich functionality to web pages and even starting to incorporate screen reader support through bridging technologies like WAI-ARIA. but these may soon be replaced by native solutions in browser" workarounds such as jQue. Many of the more complex features of the specification are still being refined Lastly.. we can create one in memory (or. getContex-t) { .. the web has evolved. meaning that (once universally implemented) even invalid markup will be interpreted the same way in all browsers.createtlementl'cenvas'). Developers have been taking advantage of JavaScript-based for years.net Awards winner for Inn ovation of the Yea r. js"></script> Now. each browser applied its own heuristics and error correction in order to make sense of it and build its internal DOM representation ~ which often resulted in inconsistencies between different browsers.It's fairly easy to determine if a browser supports the new HTMLs functionalities through traditional Java5cript-based featuredetection. or to only send specific style rules to browsers that fully support a particular feature. as well as some common fixes for improved browser compatibility. we should check if it's indeed available. Since then.. These solutions have certainly rnatu red over the years.M-itt . As an example. though these will likely change by the time HTMLS becomes a finalised recommendation).let's draw Workamund.a.

another tedious task that. authors can directly embed multimedia filesinto their pages the same way that they would an image. so we have a head start towards interoperability. up to now.raphics into websites involved the use of plug-i ns such as Flash. if not impossible. The WHATWG has documented additional features beyond the HTML5 feature set that are of interest to them.net: What's the process that leads to an official recommendation. context-scecitic keybca rd layo ut sfo' newi n put types Above Form validation released Ope ra 11 on-screen error messages in the . The differences between the descriptions of HTMLS by the W3C and the WHATWG are minor. the use of plug-ins can lead to problems.start to use HTML5 today? PH: Some specifications capture current practice. Problems arise when there is some level of interaction required between the page and the plug-in itself. it's safe to use the new inputs: browsers that support them will benefit from the On the desktop. or should developers . all the key vendors and the web community at large are standardisi ng HTMLs and building a supporting test suite. many people are already implementing HTMLS features in products.. the Working Group makes a' decision to publish a new Working Draft. and be implementable. as browsers can now get an idea of what type of values are expected. any plug-in-based content included ina page is essentially a "black box" Browsers will reserve a certain area of the page and hand off responsibility for it to an external program. On the desktop.with due caution .rather than simply defining text inputs. the parties involved want to keep the divergence to a minimum. This makes these richer form controls machine-readable.and as this can be feature-detected (see Feature Detection. have received wide public review. while older browsers can proceed to load external JavaScript libraries to "fake" the support for more complex form control widgets and validation. the likes of Flash have helped move the web along from its static origins. HTML5forms:valida . notably the people on the WHATWG mailing list (many of whom also participate in the W3C HTML Working Group). meaning that if no further changes are made.oqv"> <!. confirmed by the public and other groups Candidate Recommendation: The W3C encourages implementation and testing Proposed Recommendation: The W3C asks its members to express support for the final document Recommendation: The specification is a web standard ready for widespread use The HTML5 specification is a Working Draft. and even complete colour and date pickers.net: How does the W3C see the parallel developments at both the WHATWG (with its "super-set" standard that rolls all new proposed features into one ever-growing specification) and the W3C on HTMLs and the related APls? PH: Under the umbrella of the open W3C Process and the Royalty-Free Patent Policy. by giving users and developers a glimpse into the Audio and video With HTMl5. Also. More importantly. Opera currently has the most complete irnplernentation of native validation. support for all the new form-related features of HTMLS is still fairly low. Undoubtedly. though. the browser will switch from its regu lar text entry on-screen keyboard to the more context-relevant variants. For instance. <video src=vmovie. Early adopters provide imp'lementers and the W3C with valuable feedback about issues with the specification and interoperability gaps. without any need to know what actually goes on inside that part of the page..net/february 2011 43 next> . and tnteracttvitv Fundamentally. . and where is HTMLs currently? PH: For the W3C to recommend a specification as a web standard. The W3C HTML Working Group seeks input from a variety of places. j-- "~. On the plus side. These are the steps: Working Draft: the specification is a work-in-progress .J recommendation.for more special cases . Multimedia The feature of HTML5 that's caught the public's attention is the inclusion of native multimedia capabilities. URLs. Authors can specify the ki nds of entries they expect from inputs . The W3C intends to issue a "last Call" in May 2011. the parsing algorithm captures the state of deployed content. while video is new. audio and video are treated as firstclass citizens. HTMLS does both: for instance. possibilities offered by the inclusion of rich media.vaScript or use some ready-made validation script/library. others innovate with ideas not yet road-tested.> . :Q4!€i"~i'Itit'1 W3( Responsible for development of the W3C Open Web Platform ."We have a head start towards interoperability" _Interaction domain leader _ Last Call: the specification satisfies technical requirements.Hash movie [reqard less of whether or not the movie itself was made keyboard-accessible).provide a regular expression. As far as the browser is concerned. left). they can also offer native form validation. Until now. making them render natively in the browser and obviating the need for these script-heavy workarounds. One issue is that currently the new form controls and native error messages are not com pletely stylable. offer the user a better experience). The W3C encourages implementation and testing long before a specification becomes a standard. required authors to write reams of Ja. it must be technically sound. and trying to ptace HTML content on top of a plug-in's output can be difficult. Using plug-i ns isn't necessari ly bad.net: Should we walt until HTML5 becomes . in certain browsers it may be problematic for keyboard users to TAB in and out of a. authors ca'rl explicitly create inputs for email addresses. ----j TOp Mobile Safari uses different. However. but it's on the roadmap for all other browsers as well.newly- always semantic) markup and a slew of JavaScript on top of pages. number entry fields. the focus will turn to implementations. so browsers can understand the purpose of these inputs. HTMlS aims to standardise some of the most common rich form controls. video or dynamic g. .> </video.. In between those. as in the case of Mobile Safari. and others do both. Overa II. browsers that don't support the new input types will simply fall back to displayi ng them as sta ndard text in puts .fallback -. Opera currently has the most complete implementation of native validation more explicit semantics (and. A simple example of how this can be useful in practice is the behaviour of Mobile Sahri: for form inputs marked as email or URL. the only way to include audio. to enable authors to easily create sliders. It defines a whole series of new input types. there are Editor's Drafts that include material that may not be part of the final specification.1iIP-'~~""""'4"4 ion . Every few months. or . Rather than having to wrangle with complicated plug-in code.

older browsers will use the fallback content . By design. but the real power of native audio and video comes with its associated API. even the HTML 4.. Aside from the (often impressive) graphical doodles and experiments that seem prevalent today.modern browser (indudi ng shiny i Devices) wi thout having to rely on plug-in support.which could still include a Flash-based player. this extra work is a small price to pay to ensure that all audio/video-capable browsers will be able to work with our content Another aspect that's been criticised is the lack of content protection. And the reai-world benefit: your audio and video win play on any platform with a. ellipses.the spec merely describes the mechanism throuoh which these can be induded in a page. In the same way. anything from simple geometrical shapes (lines. authors may bemoan the fact that they now have to encode their files in multiple vanants.browsers can then pick and choose which particular container /codec they support.oqa"> <!. ta king advantage With Canvas it's possible to easily create dynamic graphics client-side to define a whole series of source files for audio and video . Another useful application of Canvas could be the dynamic creation of graphs or sparklines. . So. HTMLS doesn't include any sort of DRM support. qsolccation and offline support {web apps can preload their resources i ntoa special 'application 44 . With a minimal amount of Javascript knowledge it's now possible to create custom audio and video players. HTMLs itself doesn't define which types of files browsers should be able to handle. which may well still involve generating graphics server-side.01 specification never defined what types of image formats could be used with the img element . In spite of these issues.fallback content-> </video> Yes. completely client-side. rectangles) to complex layering! and manipulation of image files. com(mezzoblue/Paintbru. powerful tool.net/february 2011 .allowing. more practical uses of Canvas are now starting to emerge. and generally use and manipulate multimedia elements inside a page as we would any other native element. HTMLS includes the abi lily Canvas With Camas it's possible to easily create dynamic graphics client-side thanks to a ranqe of API methods .shlS) enables developers to apply Photoshop-like filters to their images. Fortunately. For tnstance. and there's currently no single type of video or audio file that will work in all browsers.. Dave Shea's Paintbrush. which already works fairly well in all modern browsers. There's been a lot of di scussion around i nteroperability: different browsers chose to implement different container formats and codecs. it's relatively safe to use.Above Kroc cernen's Video for Everybody. web storage.mca" type="video/mp4" I> <!.particularly when we consider the complexity of providing fallback solutions for older browsers.com!code/video for everybody). but a large part of the enhanced capabilities of HTML5 are "under the hood" Aimed at making web appltcanon development easier. of the API's ability to access and change image data. pleylists that dynamically load different audio files. big video sharing sites such as YouTube and Vimeo are already tentatively using the video element today . but unless we're talking about a huge multimedia archive. it's trivially easy for a savvy user to look into a page's source code and find a reference to the audio and video file> used.webrn" type=rvideo/webm"> <source src=rnovle.js (https:/lgithub. Nonetheless.an indication that even for largescale deployments. though. they expose new APis and: features that eliminate the need for dirty hacks (such as the lise of hidden ifrarnes to store data) and bring new powerfu'l features such as web workers (parallel execution of separate Java5cript threads). the markup is a lot cleaner. as in Kroc Camen's Video for Everybody (camendesign. it's a new. fa I!back fo r native vi dec su pport using Flash as Right YouTube is already using the video element and multiple file formats (MP" and WebM) to great effect <audio src=rmusic. and beyond The very visual additions such as mu ltimedia support may be what's capturing the public's imagination. This approach may not be right for every situation .fallback -> Browsers with native audio and video support will try to load and (in the case of video) display the media files. <video> <source src=tmovie. and just as with images. allowing for rich web experiences without the need for any proprietary or third-party solution.

.A lot of the discussion at the moment still seems to centre around whether or not HTMLS will spell the end for Flash and othe r plug-i ns.. Paul Irish (of Modernizr lame) maintains a fairly comprehensive list of the best polyfills at https:llgithub.. developers are bei ng given a choice . pol yfi lis ca n help silently ta ke ca re of browser compatibility while allowing developers to focus on writing dean and future-proof code... But. .. --..: __ . lor better or worse. t houg h..ushJ5 !.---~ ~_ Best in class Paul Irish's list of the best polyfills on github is detailed and comprehensive Above Th omas Fuch s' eve rytl m ezOne. particularly because of its multimedia support.cache' in the browser. 50 support for older browsers will have to remain a consideration for web developers.. For projects that are primarily aimed at the latest browsers.. for the ftrst time.. Instead of focusing on which technology wiU prevail in the long run. .. To me.unrecognised input types are simply rendered as plain text inputs.. google.. unrecognised structural elements are treated like generic inline elements. possibly on a prolect-by-proiect basis. but still need to cater for older versions. and for each project or site they can now decide on which approach will work best.for instance.. I personally find it more exciting that.il github..01.__IIIiI .. Genera lly referred to as "shims". Are you developing an intranet site fora company whose employees are still stuck with In ternet Explorer 6? Then you may well decide that you'll stick with HTML 4. HTMlS as the FLash-killer? .is disinqenuous.s Canvas to a pply Photos hop-h ke fi lters to images Safe to use? Is it too early to use HTMLS. Yes. HIML5 contains a myriad of powerful new tools..iven that the technology isn't fully mature? Do the advantaqes that it brings to users of modern browsers outweigh the necessity to still use (often convoluted) fallbacks for older browsers? These are questions that developers need to answer for themselves. Lastly. is certain: we have some exciting times ahead of us. allowing. providi ng a fa llbac k can be quite 0 nerous.com/m ezzoblu el PaintbrushJSi us . ..com/Modernizr/Modernizr/wiki/ HTMLs-Cross-browser-Polyfills.. _1IIIIi-. tom uses HTMLs·s offline capabilities fo ran a Iways-avafla b Ie native a pp ex peri ence Rig hi Paintb. HIML5 and it. there are many scripts that have been developed over the last few years that aim to plug the gap in older browsers. such as mimicking native Canvas support by going through Flash (flashcanvas. and I can't wait to see how the next gen eration 01 we bsites and a p pli [a tion s wi [I sha pe up thank...opero. "shivs" or "polyfiUs".com for a great example of this). visit dev. developers can resort to "patching in" support for new HTML5 functionality. there will inevitably be users who don't have the latest and 9reatest versions. There's a lot of really good legacy content out there on the web which. with everincreasing: feature sets and standards su pport.. Working on a video-heavy site that needs to work well on the latest generation of mobile devices? In that case.com . but it's up to us to start usi ng them in a considered and conscientious manner But one thing.There are new tools at thei r disposal.. Don't expect these patches to be as performam as native support for HTM LS features in modern browsers. In situations where performance is not a primary concern. them to run even when there is no internet connection available see Thomas Fuchs'everytimewne.com/p/ht_mlsshim{j "teaches" old IE how to correctly handle HTML5's new structural elements such as header. happens to be in Flash. For detailed onictes on and exomple5 of many of the (001 new features of the open web technology stock.. native video support could be a viable choice. There are still many situations where plug-ins can provide powerful functiona lity that is simply not possible to achieve otherwise . to the new possi bilities offered by these evolving open web technologies.... in unsupported browsers . this sort of reasorrinq ..net/february 2011 45 . despite the speed at which browsers Me shipping new versions..lJ1mi..! ~-----"""'-- ___ . But for the moment. plug-ins have their justified place in the web ecosystem.at least at this early stage . including HTML5 and C553. Others use admittedly ugly workarounds.... Some of these are quite simple: htrnlsshirn (code. as it has always been. application s that need to access a user's webcam and microphone currently have no option other than the use 01 Flash. future versions of HTML will likely add this functionality in due course (picking up the prevtous example.. . work is already underway on a new <device> element that will allow webcam/ microphone access in JavaScript). footer and nav. g.net). particularly when we move beyond these and into the new APIs.

fasthosts. co.uk/virtuaiservers Create your virtual server today at: .

.co. and oufages caused by user activity.u C 2010 AU right!> reserved." Excludes 1 mOr\~ ceaeaets.. apptj.. !Excludes planned outages Terms and conditions Call us now on: World Class Web Hosting The Great Exhibition Z011 see !Nebs-Itt. . see website for details..Ul'lllmltt<! BandWidth Is. Prices .subject to acceptable use-poliCY.. alid at time of print.fot deralls . t!SMS usage alerts service is available from H:OOpm & limits apply.0844 klvirtualservers2432 583 fasthosts.. ffil/owU501't!' . Fasrhosts and the Fasthosts logo are trademarks of Fasehosts Intemet Ltd.


._=kU= .comfmac/app. you csn either charge for your web app or have it be a free download. If you ignore it.. you're good to go. but instead of selling downloadable native a pps such as Angry Birds.see p_ag_e_9. C553 and other sta ndards. C55 and JavaScript.. If you buy a web app in the Mozilla Open Web App Store. These are normal web applications with a small amount of rnetadata provided in a JSONapplication manifest. No lock-in Apps aren't locked in to the browser they're bought ill. +Image JlllIl Mi ke Chipperfie ld is a member of Brighton- based collective Mag:ictorch. Who won the coveted com/webstore) while Mozilla's store . Open standards web technology +Words All apps sold in these stores will need to be built on open source technologies such as HTML. lnstallable web apps are primarily enabled by HTMLS with X-Doc Messagillg and Local Storage. 2.ins._IiIIIIbIiIIiIf_ ~~ IIIIIiiIII. Safari.'_ t~ "- ch~e web store ~ ~I . "_M __ . interested in keeping its store nonbrowser centric. Any modern T e ew 1. 4..~L- '---_--. Mozilla has christened its store the 'Open Web App Store' ~ mozillalabs.magictorch. Let's dive in.bel iBFVrmyald4) and Gooqle's overview of the Chrome Web Store (youtu.store) and Facebook via their app platform. You can build and deploy these apps exactly as you. memhersh!ll·thinkvitilmin._=~~ . would with normal web apps. 5. Ryan Carson is the founder of Carsonified. They will most likely take a cut of the Below Google's Chrome Store aims to bring web a DDS to the rna ss rna rket \Ne_R_i. ' U~"'![1"11111 ... Two videos well worth watching are Mozma's overview of its Open Web App Store (youtu. PHP and Rails. the 'Chrome Web Store' khrome. JavaScript. More . A lot of games will be given away with the hope of in-game purchases driving revenue. If you're on top of it. . They introduce the nine prima ry tenets of open web app stores- 3.com).be/f'ja-TCLWpUc). ~_.~ I~ ~~-a. Google has already launched its offering. Distributed via a central store or setf-cubhshed You can build a web app and submit it to the open web app stores so they can di strtbute it for you.netl app_stores app stores Open web app stores offer big moneymaking opportunities to web designers and developers.. IEg. As long as the browser supports HTMLS.. This signals a fundamental shift in the way apps are sold. A. Firefox and Opera. you could ride the wave to success. built in open web tech like HTMLS... distributed and marketed..~~DIIIIpII'IiIII'I!lI ~.com Packaging your apps Open web app stores are much like the ilunes store. which has recent Iy tau nched " libr.lPPottbeyearl if" .. The only thing that is different about an tnstallable web app is how the epp is packaged. browser You'll be able to use aII these apps in any mode rn browser such as Chrome.google. Ryan Carson explains why we should all get on board Google and Mozilla recently announced something that could change the life of every web designer and developer: open web app stores. I predict that Apple will follow suit by ailowinq web apps to be submitted to its new Mac App Store !appie..net Award 2mO? is sent for release in early 2011. you can use it in Chrome.. (55. HTML5 Canvas and JavaScript will be used for games instead of plug... they package up and sell web apps. using any server-side or clientside technologies you like.ry of high-quality training videos tor web de si9 ners a nd develope rs. ~ -=--~ .~ 1:1_ .. Free or paid a pps As with Ilunes.~ -49 ~ . www. you could end up washed up on the beach..net/february 2011 next> . we go to press.

customers whom you otherwise might not have reached at all. you'll simply dick 'Uninstall' and the app will be removed..IfI!tl'_~ ~"GDo. This obviously takes time and money. It makes sense for all of them to launch open web app stores.d"'''llIi~1itiIl r .web app with a monthly subscription and you cancel that subscription. you have to build up significant traffic to your site in order to construct a successful web application. One-dick purchasing The powerful piece of this puzzle is that Googie and Mozilla will work with payment providers such as PayPal and Goog:le Checkout to enable users to buy web apps with one dick of the button. date.nd install it without pa'ying a fee to the open web app stores . ~1nIt p. it's in everyone's best interest. Purchase an app A bove It'll be interestt n g to see how cross-com pati bility works between sto res from Mozilla and othe r big names Right Mozilla's Web App Store is currently at demo stage. As we see more and more web usage heppentnq on mobile devices such as Android phones.. It will a 150 ask your permission to access various things such as your location... The way in which this works is along strntlar lines to how Twitter is using OAuth to authorise apps built on their API. 5.. this will become a powerful feature. 4. don't need Mozi. remove the app from your dashboard. buying and installing apps through open web app stores will be a breeze. There's no need to manually enter your 16-digit credit card number..1 you buy a.Browse. Mozilla..'_n:. This beneAt i 5 exactly what iOS developers have enjoyed in the iTunes store. Single sign-on Since your name.. while also selling direct to visitors to their own website.. • Google vs MoziUa vs Facebook vs ... 9.. You will then either search for an app or start browsing through categories of apps . then you can self-publish your own app so people can buy a.... 7. go to chrome. every purchase will be I one-dick easy. Web app stores will have the one-dick buying ease of ilunes. but we'll have to wait and see.com!webstore. T. ultimately.oIfl. _"iI!iD'Id"'~ ~~~.... tItiI"I'~~ ~ ddriPm.ll4lR!IIIl:r.yPa details. Once you've punched in your Gooqle Checkout or Pa. 6..~ . it will add an icon to your app dashboard in the browser and will download the source code for offline functionality and storage.. you might dick into the Photography category to see what apps are availa bIe there.. working on the same model as the iTunes store. Yes. it can wait to sync until there is a web connection by making use of this loca I stor age . Twitter or Facebook... Uninstall the app What's the big deat? Right now.lf!~· . Desktop and mobile apps are welcome Web apps that are designed for either desktop or mobile (or both) will be welcome. If your app needs to transmit data. it will be a onedick operation. Once you've purchased theapp. Gl4.net/february 2011 . It will take some time... Offline functtonality Web apps that are sold through the open web app stores will all work offline..&1PiiI. but as the iTunes store has proved. you'll click 'Purchase' and i'f you've a lready signed in to Google Checkout or Paypal. lot of developers will do both: reach new A customers through the open web app stores.-ijIfIljW.. it's likely Mozilla will give tt front-page treatment. google. For the Chrome Web Store. The most powerful thing about open web app stores is that you immediately have a direct distribution channel to everyone who has Chrome or Firefox installed."~ -. tablets and iOS devices.. 8.._To' . email and phone number wil. No need to enter your credit card details or billing address.. ChaoChing.. -cprev 50 . through the use of HTMLS Local Storage. which will always be kept up to. you won't need to create new user accounts every ti me you want to buy a web app. but it will be interestinq to see how they negotiate which standards to base these stores upon. Click into the store 3.. They get to ride the wave of huge traffic that Apple generates (especially if they get featured). combined with the tremendous traffic it brings. Facebook.. bilhnqaddrsss and security code every time you want to buy. 1. then the app will no longer be authorised to use you r profile data.. but it's likely that a reasonable sta ndard will be agreed upon because. it's a relatively small price that's well worth paying.__ There will definitely be a shakeout when all the big players . . When the Open Web App Store launches. gtII .IdIrJ!8I!Ir ClIi:·Iii"fO!. Apple have implemented this.M~:. For example. If you already have a popular site or blog and you. revenue in the same way that Apple does with the iTunes store. Ul.lla or Google's distribution power. here's how it'll look when you install apps Once you've selected an app... 2.! be stored in your profile. buy and install Finding. You'll only give them a share of the revenue for the new customers you qain from their app store . You'll simply give permission to web apps to use your profile. So if you already have a lot of traffic to your site..". IlI~ .It will be bad news for developers and designers if they have to build a custom app for each store..Google. Open OlmonltratJolI Al:lPI your browser . The one potential downfall of this model is that there may be gridlock between these companies when it comes to cross-cornpatibtlity of web apps from one store to another . Let's walk through the process 1. The other powerful thing is that you can distribute through the open web app stores and publish your app independently. you won't have to give Gccqle or Mozilla a cut. Google or Mozil'la may take a cut of the revenue..jcltldt.1I!iIJIMif . address. Install the app If you decide you'd like to.

1IIIlcI monay Include flnmn.ta. .uk CaUOB45 D~ 1045 or . Slt.· ""'lne MlNID- 'Sltcmalre( Is one ot the best muIU-""rpose sltebulldlng toolsl' Your own website In 5 easy sle!):!!. 'WIthout I doubt.. lib pIJIltnts...Frll GDlgI. IIplau ynr . nrtII.co.' go to wwVl....webed n.uk _eden.... ta £5D music II1II NP3s Sellpmlllds.1IIII$$Ip IInnl!.•• vertilill I.i AlWonis nuchIr Unllmltal __ ".emaker Is tfJe slldce5t of these website b~nde<$..

net/february 2011 .. The event.js. a frenzy of networking and drinking commenced. to which the compere could only respond 'This man is a web design GODI" With the presentation complete. snatching Community Site of the Year from the jaws of Facebook and Twi. held in asscdation with Windows Inte met Explorer 9 Beta. As the doors opened. and reflecting on another amazing year in web design and development. Roll on 20111. playing arcade games.Next. attracted the leadl ng lig:hts of the web community.net Awards 2010. some flying in from Australia.reeting.net/awards In association with Beta Category sponsors .net This year our Awards moved to the Ministry of Sound and became bigger and better than ever.. there were cheers for Modernizr. as 400 spedal guests packed London's tconic Ministry of Sound nighclub for the presentation of the . whoops for Ncde. A special photobooth provided by UBeily did a roaring trade as new friends and old aq uaintances took the opportu nity to capture the moment (you can see the pictures at bitJy/netawardsl_ Soon it was time for the main business of the night Comedian Jack Whitehall took to the stage to cries 0 f "Look! It's him off the telly!". the US and continental Europe.rds hashtaq soon began trending. dancing to cheese in the retro room. Jeffrey Ze~dman strode up to collect one. then an amazing three awards. then two. Explorer9 Wind~lntemet BoseKit e . but it was knitti ng community site Rawlry that truly brought the house down. the crowd were then free to spend the rest of the evening meeting and g.tter. As he presented the coveted awards. Screens around the venue displayed people's tweets and the #netawa. in London and Philadelphia. We relive a night when the web community toasted its heroes It was the biggest night of the year. that trul~ 52 . in a slick double act with Nei I Bentley of Heart FM.

it sitec.9Beta sitecore 0Sose\<.ore .

<prev 54 .net/february 2011 .

1 a 1"(\ontn tor the first '3 ff\Of\tn S with N'£.Of\al code on 'PhlS aCCOUf\tS and you Building sites with Basekit is like having your own team of geeks. Allyou have to do is design.- INTRODUCING - BlIseKit's Gee" Team business manager developer sys admin support front end dev hosting £.com BoseKit .\'3 'PfOfI'\oti. Learn more at www.basekit.

. MasI1!r~rOUl"ld ~ add a'1'laZifllJ bottIer..Why leading web designers and developers rea ..net ..nJ I1oe! withCSS3 yoUrlmages Se~up .

99 .net Just visit ~--_-- Uvein USA Canada? Turn to page 76 save 35% r. UK (13 issues) Europe (13 issues) Rest of world (13 issues) TERMS & CONDITIONS £51.Subscribe to .99 £74.99 £89.

this feels like a betrayal. Basically. number of possible reasons: • Our contact is often not the one making decisions.. in the real world. We fire off an email with an attachment into the unknown. Remember. We're both nervous to me et for th e first tim e. We're hopi ng for the best and glo. hopeful hearts. family. Wha. We're a little excited. in various sectors . We've had a good few dates.. For us. like the start of a love affair. we await an answer with pounding.co. How could he do this to us? Why didn't he trust us? We thought we had something special. leigh Howells.co rn Breach of trust So what's happening here! Why doesn't our client trust us! Why do they feel the need to involve others far and wide? There are a. and next door's web-savvy teenager. This is particularly common with larger sites and companies.sing over allY thing that feels even remotely negative. that's not likely to happen. of client. yourst e • * * * * + + ~~ Word. we aren't completely ourselves.gn. and much like with a love letter. In the beginning.t's far more probable is that our client goes out and shows the result of our blood. leigh Howells is a creative consultant for Hesdscape where he d ea ls with different type. desperate to be liked and to li ke each other. We've 'pulled' following our excellent chat-up lines during the pitch (and obviously our good looks and charm). Client relationships can feel like this in the begin ning.The relationship between designer and client can be fraught. positive response: 'It's perfect! Great job I' Of course.net/february 2011 . We're agreeing with each other a lot. our first date. got along well and made some plans. tmag e Ilovedust is a studi 0 provi ell nq creative solutions for print and web ilovedust. They may have to get approval from 'higher up in the orga nisation. They 58 . an understanding . This might include random colleagues.uk). many clients have never run a website or made decisions about desi. What we're expecting is an immediate. lt wasn't ea5}1 finding each other and we're keen to get everything rig ht from the st art. both eaqer to please. We've been waiting for this moment for a while and want this relationship to work. sweat and tears to everyone within reach. • They ma. we're hoping for sornethinq lasting and meaningful. creative consultant for Headscape (headscape. both ea ger to make a good impression. This often happens at the point when the client ts given the first glimpse of their new deslqn a design that's been slaved over for many days.y feel out of their depth. friends. but it needn't be. we're flirting. Then the first cracks begin to appear. reveals how you can transform the experience into a beautiful meeting of minds Get clients on• It'.



·.'• •

· ·

"" " "" "

·.... .. ·.. .... '... ·
• .. II .. •• .. .. .... II ...




. .. . ...







MOOvaOARll I.....I'P""' .... ~ ." ., I-. ......"-<lllj. ~ l



" .... ...,

lot ~

,~llJ" I""


Riglt Good things to include in a moodboard are textu res a nd colour them es. Copy an d paste thi nqs you li ke 0 nto a digit" I version with lots

of an notaf 0 ns

meetings, but we're produdng a digital product here and not printwork and we shouldn't lose sight of the fact. Sometimes it (an be tricky to find the type of elements you had in mind and it (an becorne a time-consuming process just copying and pasting

if you can't filld that great concept you saw a
while back, This is where a well ordered inspiration scrapbook or Hirkr account can be helpful for cataloquinq design elements you like. Oh, and this is very important A moodboard should NOT look like a website - even though this ca n be a hard design habit to break. How many? Sometimes as many as five are necessa ry, a Ilowing for at least one that's cornpletely off the wall; occasionally only two are needed. But throuqh experience, three now feels like the perfect number. When introduced to a moodboard, clients can be confused by what they're looking at, especially if any element, such as a block of navigation, is too strong. It's essential to reiterate what its purpose is, otherwise clients can quickly start to think they are being shown an actual website design. Keep things abstract and scattered and just for now, lose that grid com pletely


~\ Nabile
,I ..

therefore feel the need to get the advice and opinions of others to reassure themselves of their decision. • They're aware that their opinion is subjective, Surely others need to be consulted to torrn an opi nion beyond simple personal preference' • They want to share the responsibi lily. In many organisations there is a culture of blame. They know that if they consult wider and higher, then it's harder for them to be blamed should thi ngs go wrong further down the line, • They know they have to deal with internal politics. Without consu lting intsrna I stakeholders (those with influence and a vested interest in the project) the design is likely to get blocked just out of principle alone. And so it begins. The dreaded 'design by committee', Even if there is no actual committee, the virtual committee of friends, colleaq ues and assorted busybodies is always ready and waitinq to jump in and stert meddling with your feelings. undermining the fledgling relationship.

Moodboa,rds can be created in many ways, and we've been through a bit of an evolution with just this step of the desi gn process, They can range from tai lored graphical elements such a s designed bits of navigation or buttons to a simple copy and paste job of found elements (most likely from around the web), arranqed to give an overall feel for a design. We tend to favour fuUy dig;ital mood boards for most clients, simply due to the ease they can be passed around and displayed at meetings. Paper versions have their place too, especially in smaller

What about wireframes? Ideally they should be desiqn-free, created with simple line work and

Agency view

360 Creative

. 36ocreative.co.uk

Techniques for wooing
It's clear, then, that rushi ng in with all guns blazing - ernailinq a design and asking the loaded question "So what do you think?" - can be a sure-fire way to murder a client-agency romance. However, we've learnt a few techniques at Headscape to help keep love alive, What you need to do is slow things down a little, and proceed with your desiqn step-by-step. What does that mean in practice? Well, in the same way that we've separated design and content between our (55 snd HTMl, it's also important to devise ways to separate design and content in the client approval process, At Headscape, we achieve this using a twopronged attack: rnoodboards and wirefrarnes, Moodboards consider only the qensral look and feel of a design, while wireframes demonstrate the functional elements required lor the page. 360 is a design studio located just outside Farn ha m that wo rks with 0 rga rrisation s bi g, medium and small in many different business sectors. We have a passion for design and know that good design leads to good business. Big clients supply a feed of the all-importa nt everyday jobs, but if you're good at the bread and butter work you also get a shot at the 'big stuff'. Smaller clients have the potential to provide us with more open and creative briefs where we can start a design from scratch and not inherit cumbersome brand guidelines and restrictions in how we supply ideas. Good communication is crucial throughout our design process. Happy clients are the ultimate communication and networking

tool; they spread the news and make recommendations to potential new contacts, If we've informed them along the way then they can spread their new-found knowledge too. We'll always take the opinion of our clients on board, but if they insist and there is no talking them out of something we strongly disagree with, we'll simply work with it. Of course the finished work won't always make it into our portfolio. It's u nfortu nate, but there vvill always be rare occasions when a design can be derailed due to unavoidable circumstances or conflicting persona lities.

-- - --Busi ness sense Keeping the die nt' s wi shes in mind is important, even jf you disagree with them



.net/february 2011

'3...I.A."feE: 'D '" 0 0 no... 1) R


s:rl:.:lI"'~' oJ. ~

..,w ......,... '1 .~

.. 1IUI1!:..c..tr tlh·"wCi.f:l..t!!ft. eR..h. ... .,.. .ok: ..... 1"'<>I.""""oJ: " ...

L.netl clients
Healthy relationships
As creatives, we can often become defensive during the design process. But there are techniques to help ensure a pain-free experi ence for a II. Ensure the client understands their role in the project. Starting with the kirk-off meeting, reiterate that the client's job is to find problems, not solutions. Have a strong methodology and instill confidence in the project by making sure your development proce ss is dea rly out Iined to th e client. Include the client often and early so that they feel engaged in the progress and development of the design project. Educate your client about design decisio ns. Explai nan d justify yo ur final decisions so the client will be confident and able to explain changes to other stakeholders or superiors. Ask for specific kinds of feedback from the client. Target your questions and focus on the end result: "Will users like this?"; "Does this fulfil our original design objectives?" Avoid saying "no" during the process. Be open to discussing and negotiating prospective cha nqes, Involving clients as team members during the design phase can eliminate the element of surprise that often comes from designing an entire site, then releasing it to the client in a single chunk. See it as your duty to keep your clients involved, as a measure of good customer service, allowing teamwork and involvement at important design milestones,

• -Nabn"


-=-..+=-- -

a basic font to demonstrate and initiate ideas of content and functionality. Whereas the moodboard tries to avoid looking as though it has structure or layout, so the wireframe should not look Ii ke it has any design. Sometimes even adding the logo can set a precedent that can later be difficult to unfix from the client's mind.

Although Headscape designers have often presented to the whole committee, either in person or over the phone, the process works much better if we're able to deal with one or two stakeholders at a time. individual discussions take more effort, but the benefits are enormous • It prevents 'design on the fly'. When a group of people discuss design, th loytry to reach a

The process works much better if we're able to deal with one or two stakeholders at a time. It_prevents 'desiqn o~ the fly~
'First impressions rea Ily can last with wirefrarnes. I've found many times that the client has spent so lonq looking at a wireframe that they can get hooked on its layout. This can be hard to shake even if you think you have found a better layout solution later on. We often start wireframing on paper and build up to a digital version for clarity and presentation later on. The nice thing about packages such as Balsamiq and MockIngbird is that they produce neat digital versions while maintaining, that neutral, hand-drawn look, consensus. This mea ns that they make design changes in the room and you can lose control. Speaki ng to individuals can prevent this. • It neutralises the 'a lpha rnale.ln group meetings you'll always find somebody who dornin ates the conversation (not always a man I). Either through personality or position in the company, they overwhelm quieter members and bounce peop Ie into agreei ng with their standpoint. By consulting with people individually you avoid their dominance. • II puts you. in control. By speaking to stakeholders individually, you're the on ly person who knows what has been said. This puts you in a powerful position that allows you to pick and choose the feedback you use. Of course, clients should be allowed to express their opinions, 'bul it's important to ensure those opinions are informed. Some stakeholders will argue that they do not need background information on a design in order to judge it. Their argument ru ns that users don't have that background, so why should they? The answer is simple. They aren't users. A stakeholder needs to judge the design from both a business and end user's perspective. They need to understand the business objectives, the corporate quldellnes and what the competition is doing. In short, they need to understand the context in which the design was created.

Charm offensive
Great, we've created some sexy rnoodbcards and wirefrarnss. Now what? We need to arrange another 'date'.

However, in many cases the stakeholder is simply given a design and then asked: "What do you think?" One method we've found effective at Headscape is to record a short soeencast video of the moodboards or design mockups with a vokeover explaining our approach. This commentary is hard to ignore and ensures the design will never be seen out of context, allowing the designer to stay in control, Not all designers are brilliant presenters and could be intimidated by a' full bosrdroorn. The video is a useful tool to have avatlable and g:ives scope lor a designer to explain their 'vision'.

Pa per trail Sha ring you r idea 5 0 n pa per i 5 a good way to look at different options before presentinq to your client

The problem doesn't just lie in controlling the presentation, it's also important to control the feedback. If you ask stakeholders: "What do you think?" you're encouraging a

.netffebruary 2011 61.


If you can.tewiU help th em understand you r design Keep them informed It can be tempting. it opens a discussion that simple yes/no answers prevent.. any amount of stakeholder feedback has a limited use. By asking users to comment on design you effectively render the personal opinions of stakeholders redundant. Asking "Why not?" achieves two things. on a live site with full data analysis. Second. hard wa re failures. The project is over. However. "If not. A great service worth investigating is Visual Website Optimiser {visualwebsiteoptimizer. Is there a way you can get them on side and alleviate their pressure? Help your client to feel like you are both part of the same project team. long-term relationship.hl just be that your client is a git. many of the desig. but now it's ti me to go our separate ways. or deadlines. whenever possible. Succsssfu' design should be a collaborative process and not something that springs spontaneously from the creative mind of an individual designer.II.n process. Comments like: "I don't like the green. For example: • Is the design in line with your company's corporate brandi ng? • Is it what you expected based on the approved moodboard? • Does it reflect the information hierarchy agreed in the wirefrarnes? All the above questions require a simple yes or no answer. testing is always going to be more effective than the opinions of stakeholders. Do not be quick 10 respond to difficult arnails. can break that deadlock. to avoid a difficult client but it's important to keep them up-to-date with the project and inform them as early as possible of any potential problems. These clients simply can't make up their mind. Testing Ultimately. there will be times when people can't agree. This is how it should be. Things can be changed later. design testing can be done cheaply and easily using services such as Ethnio (ethnio. By using some of the techniques shown here you can guide and woo your client into seeing..n decisions anyway. and can damage what could have been an amazing. We never tried to exclude the stakeholders from the desig. That's why. For larger sites (where the stakes are higher).com). Document everything Always follow up a call with an email outlining what was discussed and decided.wm). -cprev 62. Their input and knowledge of their users was vital: we just had to find a way to draw it out of them. Unfortunately. • Unreasonable Some clients are just unpleasant.co. They may be under pressure from an unreasonable boss. It's much more useful to ask questions tha t focus the stakeholder on the real issues. Headscape Ltd headscape. This prevents the feedback stra. Try to understand them It mig. Ultimately. a design should be tested with real users. Speaking to somebody in person or over the phone is always preferred. and will always be friends.-_J Wireframes Showing your clients how information flows across th ei r s. Ma ke su re th at yo u keep these audits so that you have them to refer to later. when the unforeseen happens. but more often than not there is something else behind the scenes.l!!!IiI ml'A H. A-B testing should be informing. it's worth rernmdinq stakeholders that no design decision is set in stone like it is with print." help no one. we have a piece of work we are proud of. and the client is happy with how they helped shape their site. The stakeho Ider is not the user and it's the user that the design rnu st appeal to. it's also a little restrictive. so we always ask. They have unrealistic demands and show no sense of understanding. And when they finally do make a decision.ying into personal opinion. etc. We found understandinq. why not?" after each question. etc) and make clear what the consequences of these might be. but they can be broadly cateqorised as: • Controlling These clients just will not let you do your job. no matter how well presented a design. -I~::.nebfebruary 2011 .your creative vision and carry them with you over the threshold and into production. Best of all. Their contribution has to be informed and shaped into something that is actually of use to the designer. End of the affair We had fun. . Helpful tips Involve them early Enable your client to buy into the whole process.: . They often try to dictate the timescale. which allows A·B testing.uk Project manager Difficult clients come in different shapes and sizes. • Indedsive personal response. This is not the kind of feedback you are seeking. Finally. It's also worth focusing the client on factors that informed the design. client irritates you. have somebody check your responses before you send them. Include the things that are out of you r con tro I (staff sickn ess. constantly attempting to bring things forwa rd. Do whatever you can to help them out. be polite. First it forces the sta keholder to articulate the problem and ensure there is a well reasoned argument behi nd their statement. they'll change it a short time later. You can make it live and see what happens. Testing. Stay calm and polite No matter how much a. have great memories.

"HTMLS lays a solid foundation for pot entia lly ex pa nd ing the capabilities of the site" This month> 64 Gallery The best new websites in the following categories: (5S."Conlent on the web will be read differently than in print" - '_ • ."We run a lot 01 ou r projects Agile. Subsoibe today: tUrr"l to 203 e 56 (above) Opinion{ Emotion in desiqn P71 Aarron W~lter"Examples of emotional design abound" says Matthew Smith . Tom May chats to Laura Jordan Bambach and Simon Gill to find out what make. it tick Don't miss an issue> 75 FocuLon/ Web copywriting Ifyou're des. CMS and mobile 71 Opinion/Emotion in design Our creations need to be more human.0 we can rapidly respond to chanqe" UB_ .."Themeleon enables you to create a custom style for your Twitter background" (left) G~llery{HTMLSp67 Jeremy Frank . (above 1 Profile/LBi London P72 Laura Jordan Bambach .. "'0'0 (above) Gallery/ Java... says Aarron Walter.igni'ng without wellcrafted content you're missing: half the influence and power of your work. . _' (below) Focu~_on/Web copywliling P75 Matthew Smith .net' showcase This month's selection of sublime design and creative opinion . pluq-ins.5criptp68 Remy Sharp .JavaScript. . lead user experience designer at MailChimp 72 ProfHe/LBi London It's one of the UK's top agencies with a client list to die for. ~- fHE SPACE . HTML5..netffebruary 2011 63 .

'lI'il·.fQ!Il. Tennessee. Rerny is a:developer who loves his Javascnpt.. Virgin Media.#"...net/showcase/gallery highlights . 70 eMS> Sites built on the Magento.htmlsgallery.orgl. Get Sati sfa cti on and What Shall! Do? make the most ofHTMLS Rich is head of interactive at KMP Digitata. com) and editor and author for HTM1. ..ariscapccouk 64 .". Reeder and Kuleto's showcase clever uses of CSS Iiiji§iM"]'u - III Imyaili is a Londonbased.1'.co. Mapquest and Vito Sport Our experts reveal this month's hottest new websites BACK ! S. Perch and WordPress content management systems www.com) and is a jQuery team member. .11(. Paul Wyatt is an award-winning digital designer and writer. (55 and jQuery (his favourite framework) and has a special interest in making design and CM5es work well together. 2Entertain. She works at Fox Land Ifox-Iand.. print and animated creative for clients such as Adobe.. a design agency in Nashville. Did we mention he's keen as mustard on his JavaScript? 'M·lla.5 Doctor Iwww.htmlsdoctor. He's the founder and curator of HTMLS Gallery (www. P!lIb 66 (55) You Know Who.net/february 2010 . semantic HTML and (55. efficient and semantic HTML. Smirnoff and British Airways. He's obsessed with clean.. D&AD. MarkUp and Therneleon richclarkdr sign com . He's produced websttes. He runs UK JavaScript conference Full Frontal (full-frontal. 68 JavaScript > Cutting-edge Java Scri pI from Swarmation. PlayStation.com). while The Battle of Britain makes good use of Silverliqht rsrnysharp com Ryan is a designer and front-end developer working for Headscape. In :1008.. '¥'iliiiiu not creating sites or coding clean. blogs on JavaScript for HTM1. Portuguese web designer.uk) and has an unhealthy fascination with cats. 69 Plug-ins> Devil Yogurt and Monet 2010 show what Fla:sh can do.. the BB(. which features the best in mobile web design inspiration and helpful resources for mobile developers. he and his partners set up mobileawesomeness . a diqital agency based in Manchester.'T Nick creates websites at Project83.5 Doctor (htmlsdoctor. When she's 67 HTMLS> Rumpetroll. she's writing about it on her blog. 65 Mobile> Great mobile sites including Plank Design."".

WebKit·based browsers on the more popular mobile operating systems are creating better experiences for users and developers alike.uk)istheuniquedesign. "We'd been doing some R&D on mobile web development and decided that our own site would be a good test bed to try out new technologies before imposing them on our clients. which is a perfect fit.net/showcaselga llery /gallery/ Mobile Hom~ Nick Francis touch gesture support. Despite a. "Once we had a chance to play with jQTouch a bit. 1 II re lin.. most likely to appeal to the target market. "The qeneral design sprang from a desire to have a browser app that looks and acts like a downloadable. As well as viewing videos and photos from events. MapQuest will continue to add features that blur the tine between downloadable and browser-based experiences. As browsers add features (HTMLS).ln many cases I prefer it to the native Google Maps application for the i Phone because of options such as the ability to avoid highways or toll roads. we realised we could design something simple. even the ability to capture your GPSposition. It's great to see bigger companies making mobile a priority." says Piank Design's founder Warren Wilansky. The whole site can be loaded in a single HTML file and jQTouch does all the work to load page content with a variety 01 fancy transitions and native-like interactions.!!' rVl:cc Plank Design (1-2) Plank Desiqn (WlNw. MapQuest shows how modern. What sticks out immediately to me about its mobile site {http://m.lt's very textured and alternattve."T YOUR tDEAL 81XING PARTNER MapQuest (3) The latest iteration of the MapQuest mobile site (http://m. to. S~. a:n even di scover what d music they're listening.est has definitely made the most of its opportunities on the mobile web." says mobile product manaqer Michael lams. couple of shortcomings (why is all the live text Times New Roman I). fun and well-suited to the small screen.vitosport.net/february 2010 65 next> .plankdesign.com) is all interactive agency based in MontreaL The mobile version of its website is optimised lor the i Phone using' the jQTbuch mobile framework. from the design to the optimised page copy.com)isreallyuseful. MapQu. users can follow a team of bikers t hat are LI sing the car. you'll get client-like features: 4 . the site is still spectacular." Frameworks such as jQToLich are enabling developers to create mobile sites in hours rather than days or weeks" Plank Design executed its mobile strategy perfectly.mapguest. so we just pushed ahead. Work Vito Sport (4) The Vito Sport is a new car from Mercedes~Benz that's explicitly marketed to people who fide bikes and need a grea't way to transport them. IIITHE vir. drag and pan maps. "If you visit MapQuest from iPhone or Android. and now have another platform they can promote to potential clients." [ love the tact that web apps are now competing with native apps because they can support similar functionality.co. but still very easy to navigate.

..." explains Parmenter.. - ~ ..~-. "I love C55and usually try to do agency responsible for the design and development f les help to bring the design together..._.. enthusiastic testimonials and welldrop shadows. --. -. "Using C5Sanimations to morph between the The info rm ati 0 narc hitectu re wa s crafted in Don't miss Sarah Parmenter's tutorial on page 86 such a way that the user tsn't overwhelmed by the shapes was just the logical next step as ali icons use the same elements ..._. created using pure (55......brandculture..~ ..-.." says Eric Pinckert........... ... ........ The website is sprinkled with CSS3goodness. -- jiIIII~ ~ ' ~_ .. The result is a truly charming and elega. the background images and absolutely positioned PNG into one another. ' I~~W..t." says Pinckert.~_ ....... ~ . .. ." '" POST O'FFICE TELEGRAM Gro4 ~..coml is the studio of Sarah Parmenter.net/february 2010 .. "Repeating textured of the app ." she says..... "Inspired by an old: postcard: I picked up while 4 on honeymoon in LDS Angeles. with fine and delightful details across every page... iPad and Mac versions of Chef Helstrom and his team... ~ ..the icons that illustrate them morph MD at BrandCulture (www. as much as possible without using... C55in clever ways. - . .... Ilin!i.... 11 .. border radius and a pphcanon's user interface" crafted stories" "We wanted the website to capture transitions. ... including developer of the a:pp) echoes the simplicity of the photography..... ......b .......W' 3 You Know Who {ll You Know Who (wwwyouknowwhodesign. "It {2} Reeder (reeder~QQ. tIiIl~f_. " variety of menu options." Reeder Kuleto's 66 .. the icons on the front pa. "We sought to present the variety of menu options without overwhelming users with a morass of content.._. I wanted: to achieve 2 a bit of old glamour._ .....11... ..net/showcase! gallery /ga lery/CSS Inayaili de leon .... .. -.. Its main navigation or by allowing. _ ••• . the visitor to and styIish i nterfa ce..... iPhone and iPad. as for the buttons... '!I _. ...'lnnlIIlII -~ .~'. - ...com) is an iPhone and iPad app that enables you to sync your RS5feeds {3-4} San Francisco's Kuleto's is well known use.... Its aceo rnpa nying we bsi te.. -f . an Essex-based user interface designer who specialises in the web. and makes good use of C55sprites Surprisingly.. For example.... r!IIll!. The recently launched redesign shows us a beautiful retro-flavoured website.com)...the iPhone.ge were the warmth and welcome of Kulsto's hospitality.".. photography from Getty._.. .. As you hover over each of well as showcasing the incredible culinary prowess Parmenter also used exquisite stock the options ...nt website. the Contact page draws its inspiration from an old Post Office Telegram form...... such as in the responsive from Google Reader.._.__... text shadows.." says of the site along with Dotfusion (dotfusion...com).""'-t . _ DtIl'l!'Yl'~'".... .-..... captivating us with beautiful background images in their full beauty... providing you with a clean for its delicious food and vibrant service... irnaqes. Riui...~'1I!!I' ~~~ . website (ku letos"com) captures the essence of hide the content in order to view the colourful designed and coded by Silvio Rizzi (who is also the the resta urant..........

WebSockets. JavaScriptand CSS3to produce an interactive chatroom application full of swimming tadpoles. Hans Peikerno and Simen Brekken to experiment. the code is available on Github {github. *_IW _ .. It. 4 -.com). If you feel like getting involved... you can now place SVGmlloe with HTMLs. so the code had to be rewritten to cater for a large user base.:mdCulture chose HTML5 "primarily to lay 1!l.com/da nielmahaURumpetroll) and the authors are actively encourag. . Danie'l believes that "HTMLS with all its features is a g. which in turn broadcast. Frank explains that they utilised the Raphael JavaScript Library (raphaeijs. for which they ended up using EventMachine. it really fast.de} is built using new HTMLS elements such as <header>. The matn challenge for the team has been keeping the server up and running. Adding. 'This make. then teamed up with Daniel Mahai." explains Ahlberg.reat way to make the web more interactive and usable".netffebruary 2010 67 next> . Daniel then used the locabtoraqe API to "save your data into your browser" and make sure your to-do list remains when you return to the site. support for lEis on Daniel's to-do list alonq with fncorporating the Drag and Drop APt.. which is Norwegian lor tadpole. With a keen interest in the development of the web. fQ. The logos within the 'Wheel of Satisfaction' on the site's homepage have been created using SVG {Scalable Vector Graphics). Get Satisfaction (3) Get Satisfaction is a tool that helps you build and manage communities online. <footer> and <aside> while making use of Remy Sharp's shiv to allow these to be styled fori E. it to every other tadpole.ing contributions..com). Web technologist Jeremy Frank explains that . <hqroup> and <footer>. SVGisn't part of the HTML5 specification. however.." The 'pond' is created using the <canvas> element and associated 20 API..net/showcaselga llery /gallery/ HTMLS RumpetroU (1-2) "It started as a joke. which made the decision to use HTML5. which is essentially a DOM object that can be manipulated with JavaScript" What Shall I Do? (4) Digital to-do list application What Shall I do' was built by German student Daniel Ra:uberin his spare time.!l:lI capabilities of the site in the future".corn) is a combination of HTMLs canvas.. marketing site has been redesigned and: developed by andCultu re landculture.." So he registered the domain. "The app uses WebSockets to keep the connection between browser and server alive at all times. an image into an SVGcanvas (VML for IE).. <section>. blackfruit. The result [rurnpetroll.. One tadpole sends at most five updates per second to the server.!ll) for the rotation and that "Raphael embed. The front end of the site {todo.. We look forward to seeing the updated version. ''I'm Swedish and I always loved the word 'rumpetrotl'." explains interactive art director Hugo Ahlberg {hugoahlberg.--- What shall I do? .. The site uses new elements such as <header>._'Ii!!!li1"'~dI a solid foundation for potentially expanding the 1III""'I..

... It provides variety of tools to express your thoughts..r 0 . enabling you to change the colour palette and backqrounds and you instantly get to see what it looks like.s. -_ ....~:. It then dynamicaUy updates the Twitter profile page by way of a preview._-. ColourlOVERS released the Themeleon tool !www.~68 .....colourlovers..net/february 2010 ..~ .::. I' I ... com!themeleon).was written in 48 hours for the Node Knockout and earned its place as the overall winner of the competition... As a sinqle-paqe application it performs its task perfectly and offers a much more usable interface for styling Twitter than the existing method via the settings in Twitter.. Therneleon enables you to create a custom style for your Twitter background..so the person who views your feed back seesexactl y wh at you see.._... ~-=. :Recently. MarkUp has taken a screenshot of that particular page .. Our biggest challenge is building a powerful and focused featurese! that feels effortless to use Themeleon (4-5) CoiourLOVERS {www..) MarkUp (markup... Ben Weaver of Tennessee-based aqency Medium {thisismedium. anonymous way. hea!/ily relying on JavaScript APls .. you can share that annotation INith a colleague or friend."We designed it to brinq the experience of jotting down notes on paper into the browser.." team member David' Miranda recalls..t .. "There was no goal yet .m members immediately went to the site and started following each other around the board. and once you're done... which enables users to browse and upload their OWIl colour schemes..com/ theme leon).._ .io) is a very useful application that enables you to annotate any website.....'•• 'fillal . which relies entirely on JavaScript to create a single-page application.=. -__. _. It was so cool....net/showcase! gallery /ga lery JavaScr·pt a II Il CI II II~ Remy Sharp U rP n " Il II II Swarmation (1-2) Swarmation (swarmation.= ..colourlovers.t makes Mark. You can also share your notes and overlaid drawing...". _._..._... by presenting you with some predefined themes as a sternnq point. has been around for some time now..followinq the release of the new Twitter interface..Up particularly special is that there's nothing to install: to start 'marking up' you just hit a bookrnarklet... All of the tea.all you could do was move your pixel around the screen.com) explains why they built it "MarkU p is the tool we've always wanted for quickly sharing ideas and feedback with each other. . but maybe it was just the thrill of interacting with other people in a.... "Our first user came on right after we put the site on the internet.really basic.. Wha. I don't understand why." - MarkUp (3._ ~. And behind the scenes. __ ." he says.com) is a beautifully simple multiplayergame where the player must join forces with the swarms of anonymous players to collaboratively form the correct shape together in order to achieve points.. make a potnt or just simply edit.both on the client side and the server side . The entire spplication.

photos. The TimeSlider tool views the maps in context.sg. 'Built in Flash by French agency 84'M {www. target maps and the latest Microsoft technology to provide an engaging and: absorbing experience .elly means" and "scary berries" along the way. created by Singapore-based creative agency Kinetic (kinetic. it's a pu n-tastic venture into a beautifully crafted underworld. adding sprinkles of "j.JJ. Delightful enqaqement and a beautiful site in which to become lost in. cgmjp_ol.. the works of the founder of French impressionist painting take on an almost 3D quality with depth and movement. " The site brings history to vibrant life with a rno dern -day rsso nance.corn) that brings the works of Monet into vivid life. built to promote a five month-long exhibition at the National GaUery in Paris. Here. remember to pick up a couple of tubs of Devil Yogurt whilst you're down there. remarks that "Shoothill has once again provided a superb interactive experience for MSN.rea. it enables technology and art to come together and erith rail and educate in an ente rtai ni ng wa.net/february 2010 69 next> . Alastair Bruce.. though.com. is a quite wonderful website (www. with the present-day cities giving the maps richer context and meaning. rncnetzoao. bringing together archive documents." Frozen yoghurt doesn't last long in hell. Make magpies fly by clapping your hands. Such was the constant drone of stifling fact upon fad about the g. uilt using Silverlight.tmasters and their collected works. Yes. senior content manager at MSN UK. rnaki n9 thi s th e uIti mate destination lor anybody interested in learning more about this crucial period of our history.j. Jonathan Yuen from Kinetic explains that the site "draws a sharp contrast to the usual run-of-the-mill frozen yoghurt shops and their websites by creati. the maps show the Luftwaffe's born bing targets in both dries. so pay a vi sit to this stylishly drawn and cleverly animated site to start crea ting yours.net/showcaselga llery /gallery/ Plug-ins Paul Wyatt Devil Yogurt (1-2) The next time someone tells you to "Go to hell". This cheerfully gruesome site (www_devilyogurt. Education can suck the life out of art. takes you on a whimsical journey as you create a personalised tub of De-vii Yog. . 5 (3-4) Now this is extraordinary (5·-6)White being ta:ught art history at school. which gives us the necessary flexibility to implement our idea and: make Devil Yogurt's world: come alive. Using scans of oriqinalGerrnan allocation maps and aerial reconnaissance photos from the Imperial War Museum.com). using Flash. change the seasons or turn the seils of a windmill by blowing 01"1 your computer's microphone. shows London b and Coventry before. whic h enti ces you to interact with th em. I'd frequently pinch myself to stay awake.y_ On this site.urt.. during and after the World War Two blitz raids.ies84. com). The Battle of Britain Time Map (www_shoothill. The Battle of Britain A window into the past and an interactive learning tool.ng a dark yet lighthearted world:.

." If . the images are resized into thumb. from the portfolio content population to collecting contact form submissions." he explains. microwave slippers and other well-being products.' ~ 3 4 .net/february 2010 .. om) . "We found the Perch CMS very easy to implement into the site and it's also very intuitive when instructing the client how to update their content. .~ ." he says. Christopher is also a member of the development team for the pluq-in: "We devote a consistent amount of time to that project in order to better utilise it. eo.-Id!<)a clean and minimal brochure is site designed by Andrew Strachan at Apricot Studios (apricot-studiQgom)_ This type of site is a' perfect example of when eMS fad lities are needed for the client to be able to update the site easily.r."We discovered it c around two years ag:o and haven't looked back... "It makes building any website easier..and full-sized versions on the fly.. ours induded. "l'rn particularly proud of the way Perch handles the jQuery lightbox image galleries. a lightweight but perfectly formed CMS. It's a big piece of software and: to gel it running at the speeds we've bench marked is no small task!" Iron to Iron (5) Iron to Iron {in.." ex plains Koster.co." i . reliable and flexible and Magento has lived up to these expectations. For this reason Strachan selected Perch (qrabaperch.kfast (woodedgekill~arn~co-.mtoiron_wm) is a two-person company founded by designer Kevin Richardson and developer Jonathan Christopher.net Zhu-Zhu (1-2) Zhu-Zhu (zhu-zhu. . When the client uploads imsqes for the gallery via the CMS." An ecommerce solution needs to be fast....._ ~. _.." They're also using the Pods CMS (podscms. he adds. textu red appro ach th at rnarrie s perfe ctly with the fun and wsll-photoqra phed products. "We're very proud of the performance of our Magento builds. 2iQ) plug-in to give them additional functionality and control of their content.._----- site offering wheat bags. ' ':. - •• . com). niche ecommerce Wood edge Killearn (3-4) Woodedge Bed and Brea.co.:om Ryan Taylor . itsextendability and its familiarity..uk] is a.net/showcase! gallery /ga lery/ eMS Think your work 'h oule be in Gallery? Tell us about il al netma futurenet.uk) has taken a beautifully i llustrated. is one of the many benefits. . It's a big timesavsr to be able to begin each project with the same code.1 10 . Automating things. Designer James Koster at Jigowatt (jigowatt." They use Word Press for all of their client work. .. The site is built on Magento imaqentocommerce . but integrating a complex solution such as ExpressionEngnne or Drupal would be overkill. . . 01 their own site Kevin says: "We needed to effectively display our brand as well as our philosophy. "Its be n ef Is in d ud e its co m mu nity.lII'~"". file structure and theming system.

Extreme pleasure is something we often overlook in web design. stable place to publish and a more enjoyable environment for users. customers relate to it Designer Dave Gorum explains further: "The informality makes it super ea. Until recently. funny charm of Eddie Izzard. and raw emotions. we're a little bit more authentic. products and services we consume.syto open a dialogue with our audience. they're about a relationship you'll build with a product. flaw. we hope for more than an a. while John Hodgman plays the dweeby PC that bungles basic tasks.not your typical fare for a: site that's conversion focused. Octopuses and unicorns frolic in a fantastical landscape on the homepage .spreading web standards. We're like their goofy friend who's really easy to talk to and can make them a sweet portfolio." Showing personality in design is risky. We want taste. Jusrln tong represents a Mac that effortlessly tackles complex problems. Today.com).com) and author of upcoming book Designing for Emotion" UsabliLity = edibility Examples of emotional design abound. Some people might hate it. The ads aren't about features. but designer Jason Putorti knew rationality wouldn't win people over: "Trust is a gut feeling" and visual design affects emotions. Vimeo (vimeo_com) and MailChimp (mailchimp_com) are a few modern interfaces that let personality shine through and have created a loyal following. and we too often forget that businesses are collections of people . it hasn't been a high priority for web designers because we've been fighting battles on other fronts . I can't help but notice one tangible outcome of our revolution: for better or worse." The right angle Humour is a' powerful tool for disarrninc sceptics. and many sites use it.p well to loqic. if we're aiming to make a usable interface. clever presentation and ambience. inspiring trust. This sets the company apart and help. After all. things can have personality We've seen this with the Volkswagen Beetle. As web creatives. layouts into our medium and making interfaces user-centric. place trust and express the entire gamut of human feeling. But comedy isn't always appropriate. translating. That shift cha nges our expectations of the brands. It's the experience layer we should create on top of a functional and reliable system. We want them to be as human as we are.vera. exposing our insecurities. In it. passions. but an emotional response is better than indifference.gn in automotive history and a cultural icon for generations thanks in no small part to the welcoming face formed by the headlights and swooping bonnet Apple illustrated this point in its ad campaign 'Get a Mac'.a handy tool for rnakinq and manag:ing an online portfolio .gemeal. A5 we move on to new objects of affection.We've spent the past two years cooing over social networking. The task of designing enjoyable.com) . We're openly sharing the mundane moments of our lives. But we can do better sti II.nettfebruary 2011 71 .• Aarron Waiter (@oarron) is the lead user experience designer for MailChimp (mailchimp'. Through our characters we share humour. humans want to connect with others. Our public fa(e is no longer so different from our private one. which have made the web a more . When we go out for a fancy dinner. Finance site Mint (mint-com) uses emotional design to overcome tears about sharing details" The elegant set-up distances Mint from bland competitors and lets users know care was taken with the app. That line of thinking doesn't stand u. we enjoy the spoi Is of our victories. it's the same as a chef striving to make edible food. Wufoo (wufoo. emotionally engaging experiences is made easier when we create a distinct personadty for our interface. After all. but the shine is starting to dim. Carborimade (carbonma:de.expresses its personality with the earnestness of Jimmy Stewart and the exploding. the most successful desi.



•.HEVV .7 C. U!!.• 4M ..

H:'s a. said that typography "must draw attention to itself before it will be read.. (5) Few de 5igne rs use better lang u"ge to illumi nate thei r desig ns than Veerle Pieters. We've got to combat this instinct and there's no better way to do it than to obey the direction that well-crafted c. Content on the web will be read differently than in print or on a mobile device. Yet in order to be read it must relinquish the attention it has drawn". (4) Using humour to get the readeron side con be a clever tool. Comp tlIly " . small food market called Brooklyn Fare is d riVe n by de a n photog ra phy. !Robert Bringhust..000 Ac:wunt SlOI"ec up 1lI 1. Many web designers do it without thinking twice.ite (duoh. The portfolio ~l site of Jared Ch ri stensen (www. and not about the copy itself.ontent can lead your work. com)...com) popping up. says Matthew Smith How many times have you started a web design with the latest hot style in mind? I've done it.-_...om). I let my clients know that I believe copywriting to be more important than visual desiqn.___ ~ft!II ~~ .. Getting your clients to understand copywriting is a valuable investment .. If they're feeling stingy. Great web copy is memorable. (brooklV!l@_re. • \ his site eatterntap.net/showcase/tocus. Every sentence on her agency....lI'.. Matthew Smith loves helping designers capture what inspires them. com/artides/Lea. bea uti ful typoq Fa phy and winsome word. so we need to meet those expectations deftly to inspire confidence... .':t:"'""~ .. you may strongly request that they hire a copywriter for at least a portion 01 their project. they'll likely respect your opinions about aspects 01 their website. The reader has different expectations for each of these.alistapart. and it has gone a long way in helping me secure great copywriters for my web projects.jaredigitill. com) and onennon to detoil (see his work at squaredeve.rntowrite is a good place to start . focusing on major headings and conversion poin ts.net/february 2011 75 . author of The Elements of Typographical Style. learn to write .z) fun.. (1) You can't go too far in" web copywriti n 9 conversation without the website 0 f le"dl n 9 aqen cy 37sign"ls (psianals._' ~ . great place to gel good writi ng ideas. . Its copy is as finely ho ned a nd well th ou 9ht -0 ut as 37si9 nals' simple and effective p rodu cti oity tool s (. .com/ about) does this very well.000 sull5£nDen "". -. but leaves you thinking about the product or service. (_3)The website of a.o n Web copywriting Ifyou're designing without well-crafted content you're missing half the influence and power of your work. If all else falls. frie nd ly.. is perfectly persuasive " and: compels you into looking at her work... What is great copywrittnq for the web? The best copy on the web clearly communicates with an intentional voice according to the articulate goals of the client you're working for..approa ch able 'I" nguage is strewn throughout MailchimlHOm and th ei r email newsletter application. the same is often true in the relationship between design and content.• Obsessed with creative inspiration (see "':.. even if it lea ns a little heavy on self-deprecation. 5vtd up I" 6. month ~ .':.Ifyour clients respect your design abilities. In my opinion.t..

Offer ends 31st March 2011 76 .com/net-ao14 Or call toll-free on 1-800-428-3003 and quote code: a014 Great reasons to subscribe • Get your copy early • Stay updated on new web technologies • Exclusive access to the world's leading experts • Great offers and gifts • 132 pages of tutorials. Your subscription will start with the next avaflable tssue. please notify us in writing and we will refund all unmatled items.netlfebruary 2011 . Pleo se note you wi II receive U Ie ve Clio n titled "met" not Pr"ctiu I Web De..88 (45%) a year with either of our payment options AMAZING SAVINGS! Don't "'*by continuous credit card great offer miss this nRMS &.99 each from newsstand.i 9 n. You will be charged in USD_Minimum subscription term is 12 mo nth s.net/new _ year_offer Subsc -be owi Save 5%* Subscribe online: imsnews. CONDiTIONS 'Savings based on averaqe price of buying 13 issues 31 $15. insight and inspiration! Exclusive USA/Canada offer USA Canada? Turn to page 56 Don't live in Save $92. II you are di ssatisfied in" ny way d u ri ng th e next 60 day. Yo U wi II receive 13 iss ues 01 _net" yea r.

Ash Warren and Scott Cook of Driftlab explain how to get started with the Gaia Flash framework articles> 94 This month."For a long time. Core contributor to Sass Christopher Eppstein explains how to labove) . bui ld sites faster with Gaia .. HTMLS has begun to change all this" an iPhone UI . Sarah Parmenter explains how to create the perfect UIfor your app A site that sells uniq ue handcrafted jewellery needs modernising. and strip out functions as necessary" tutorials> 78 Vmaintain style sheets with Sass Sass is a style sheet lang uaqe that makes your style sheet as beautiful to read as your web page. web developers leaned on plug-ins. Sarah Pa rmenter ."With the dick of a few toggle buttons. workshop sites 98 86 Designing for iOS4 devices is totally different from designing for the web."Media queries are the key elements of adaptive websitss" 101 Joni Korpi explains how he built a grid system for creating multiple layouts that are as consistent as possible go create a page ip effect Hakim El Hattab from Fi shows us a new take on the' Flash page flip' we all love to hate.: Ash Warren & Scott Cook . you ca n scaffold a project in less than 10 minutes" use it 82 Vbuild sites faster with Gaia In the first of a two-pa rt tutorial. using HTMLS's Canvas 102 • Mark Hegarty and Mike Creighton of HEGA explain how web standards were at the heart of the award-wi nni ng site they created for Nike _net/february 2011 77 .net/technique • Projects and advice for web builders (below) /create a page flip effect •. I Hakim EI Hattab . Rina Miele comes to the rescue static design • • Joni Korpi ."Yo ur mantra should be: keep it simple.:.

Too simple.SO she uld you 78 . } 2. 10%) I => #7f007f => 10%) desaturate(red. width: SlNidget-width.but they were missing the point. These tools make it easier to create and maintain style sheets over time by giving greater expressiveness to the style sheet itself . It wasn't the frameworks that were fundamentally flawed.~·}_o!-!!_~. It was a nice idea in theory. C5S has a very simple syntax. 0.Sborder-width.netltechnique/ C55 /CSS/ma·ntain style sheets with Sass Sass is a style sheet language that makes your style sheet as beautiful to read as your web page. the opposite effect than was desired has been achieved . _ _ Requires Ru'byinstalled on your development computer (but not necessarily Project time 15 minutes for setup. 0.~~:. 1-2 hours to understand the basics of Sass _. basic ability to use the command line They argued against (S5 frameworks as fundamentally flawed . Sassis an evolution of the (55 syntax that has been enhanced to provide sophisticated tools for intermediate and advanced (55 developers. background-color: Sforeground-color. 0.:~i. but in practice it is a failure of monumental proportions. 10%) fade-out(red.. blue) lighten(red.~ . If you've ever been tasked with the job of writing and maintaining the style sheets of a mediurn-to-Iarqe website. Sforeground-color: lighten{complement($background-colorJ.gs. 10%) soturote(#511.~.25) fade-inC . professional CS5 developers find their hands tied by the good intentions of the (55 spedftcation.~ ..0%). -. #conta. II Fix for the broken box model width: SlNidget-width . contrary to years of well-founded best practices.bordersd-widqet ( Sborder-width: 2.. and 960.PX. Frameworks About four years ago. } } Advanced Theming do r ken (red nri. @import "cornpass/cssj": Sbackground-color: #446688._ _ . At the other end of the spectrum. marly common (55 patterns started to be codified as (55 frameworks such as YUI.ckg.round-color.widget ( @indude box-shadow{darken($background-color. . The simplicity of the syntax and lack of indirection were intended to make CS5 more accessible to non "programmers..£. Blueprint. . SlNidget-lNidth: 2.net/february 2011 . these frameworks were built using the only mechanism of abstraction that CS5 affords us ..widget. 0...50px. Unfortunately.the class attribute.~ _..e needed Firm understanding of (55.~_ . 0. 0. 20%). it was the syntax they were built on. border: Sborder-width solid li9hten($ba.iner { background-color: sbackqround-color: ..xCred.. 20%)).(5) CoLourmanipulation Colour functions in Sass enable you to manipulate colours Stop the madness Software developers use other software to speed up their creatl om . This encouraged the mixing of content and presentation in markup.25) grayscoleCred) complement(red) j us! like you would in Photosho p ""> => => =-> => => => #ff3333 #cc0000 #f20d0d #5a0c0c #808080 #00ffff rgba(255.there is a tremendous amount of knowledge and learning required before you can style a web page to a point where it looks acceptable. By limiting the expressive power of style sheets._ _ _~. @extE!rld . you know that it is no small feat. Many (55 developers responded by picking up their pitchforks. Example So what are these tools? Let's get started with an example.0.(5) rgbaC2S5. Core contributor to Sass Christopher Eppstein explains how to use it Knowledg. These quickly became popular among beginning and intermediate level (55 developers because they took a lot of drudgery and knowledge requirements out of building web pages.0.

The other (arguably more important) area is making Sasseasier to use. I . which means that you can format your source style sheets how you like As you can see. in the Sassfile just once. we have to remember to apply the same properties with the same specificity for .) .. Chris Eppstein and myself.. A variable is any (55 identifier (such as a class name or id) that starts with You set a variable just like you would a property: $background-color: #446688.The first is making the language more powerful: exploring features we can add to make it easier to express and' share complex styles.. majoring in Computer Sci.. I .Nmr.7 NW: There are two major areas of improvement we're focusing on for Sass. You can use a variable just like you. you just change the value and the Sassprocessor does the hard work for you. Let's go over how this all works now .net: WmIllUilUWI!Ii NW:I've put a lot of work into the online tutorials and documentation. Global variables are declared at the top level of the file (not within any curly braces). so those shou Id be good places to sta rt.net: Wliere 1S Sa» qoinq in future release. Figuring out the algorithms for this and implementing them properly was a major achievement.48px.2. would lise a static value when setting a property: background: $backgroundkolor.r II r I f!' i"'•• Ii 11:. and I think it has a real shot at improving the way people write styles for the web across the board. but first let's see what we get after processing this Sassfile into C55that we can send to the browser: #contai'ner ( backgrou nd-color: #446688.*ilM~tI NW:I got into open source in general because I like writing code and I like making people happy. If you need to change that value. limw. lnstead.net/technique! I'll explain what's going on here in a second. .widget. Welcome to the future of style sheets.. there's no need to go through an error-prone search and replace.) Format style sheets Four output formats are available in Sass. the best resource will probably be the SaS5 in Action book.3344rpx rpx sox: -o-box-shadow: #2.netlfebruary 2011 79 next> .. and I think the biggest benefits of @extend are yet to be seen. Sassmakes a lot of people happy. -webkit-box-shadow: #2. The iollowi'ng example shows some nested selectors and the C5Sthat they become: #container { . .child { . In our CS5 file we have four colours. } In the C5Swe have redundancy everywhere. t compact compressed Nested ruLes Nested rules enable you to remove the duplication that results from creating seeped selectors. In our CS5 file.bordered-widget block. In our example.. width: 250px. } { .widget width. #container . the .. in our Sassfile we don't have to remember this relationship" it is explicit. There are some great screencasts available on the internet. In our CS5file.sidebar & { '" ) nested expanded &:hover (. in our Sassfile we have one colour that has been transformed three times. We're looking into ways we can let users avoid the pain of installing Ruby and running the compiler from the command line. 1".bordered-widqet -rnoz-box-shadow: #223344 rpx ipx 5Px.bordered-widqet: in our Sassfile we don't have to remember to do this..the implementation is very complex and detailed. } #container . it is explicit. r Sass Output Formats ~ {_ ~.) #container .. and generally make setting up and using Sass as smooth as possible..widget ( . Open source software give. ••• ! ) Variables are seeped to their enclosing block. we have to remember to change the width of the . in the Sassfile just once. In the not-too-distant future.'selector A should behave like selector 6' . border: zpx solid #7799bb.widget #container . s.~ I~ ~~. background-wlor: #bb9977.2. We would have typed box-shadow and the corresponding value four times. . We would have typed #mntainer four times.bordered-widqet { width: 2. me a chance to do both of those at the same time.'.borderedwidget correspondingly.child {.sidebar #container #container:hover {.net: Whalls your lavourite Sass feature? NW: I have a big soft spot for @extend.widget should look or behave.net: g~lIall!11l.enceand Philosophy . if we add a new selector that describes how a . Although conceptually this directive is pretty straightforward . co-authored by Wynn Netherland.. Variables Sassallows you to store a value into a variable for later use. $border-width is a variable that can only be used within the . } { .3344apx apx Spx. & is a reference to your current scope and enables you to create a range of selectors in a seeped context.. when we cbanqe the border width or C55 "Sass makes a lot of people happy" UDldUJ { Lead developer and architect of Sass Gmai! Offline Sync developer at Google Graduated in 2010 from the University of Washington. box-shadow: #223344 ipx lPX 5px. } #contaiiner .

widget { @extend . ~\ xi n column(Sn. . selector can inherit attributes from any simple selector such as an element. visibility· hidden.Sborder. First the defi ninon: @mixin clearfix { &:after { : "\0020". patterns and reuse them: Here we've defined a rnixin that implements we can include that mixin in any selector. .lI>Iidget. morgln-right: Sgutter. . } content display heig:ht "zoom: 1· Mixins can also accept arguments. both. height: 0.ls. one of the downsides of rnixtns is that it gets very easy to create very large style sheets.rounded { border-radius: 5px. ) .bright-widget border-radi us: 5px. . Seal: 40pxj Sgutter: 10px. In Sass. To address this.net/february 2011 .$padding float: left. Spodding. clear overflow : hidden. } . border-width: podding: } Reduce the noise With Sass's optional Curly braces and semicolons add a lot of visual noise to your (ode.rounded. a common allowing us to isolate common styling dearfix strategy.bright-widget border-color: } . visibility: hidden. sta rt havi nq fu n wrlti n 9 code ag ai n! not a pain.widqet { @indude clearfix: ) sradius: -ms-border-radius: sradius: -webkit-border-radius: $radil. display: block. dear: both.briqht-widqet border-color: } blue.rounded: border-color: blue. width: Scolwidth. Creating style sheets should be a pleasure. Now @mixin border-radiuslsradiusl { -moz-border-radius: . } . Sass provides another form of abstraction called selector inheritance. You ca n create Mixins Mixinsenable us to create reusable chunks of style. ) can be sta m ped out easi ly with mixi ns. border: 1pX solid #ccc. { I :widget. border: rpx solid #ccc. though. . you don't need them Sborder. : block. $border: . -o-border-radius: Sradius. Sp eedy grid S Reu sa b Ie patterns your own grid in minutes And this will become: . class or 10.1) • Sgutter.'px) { $eolNidth: Sn • Scol + ($n . . border-color: #9999ff. { The Drudge retort Yea rs Resolution.net/techmcue' C55 $cols: 24. overflow: hidden. 1) • Sgutter. $podding: 'px. : 0.bright-lI>Iidget { @extend . The @extend directive is used to indicate which selector to inherit from . Selector inheritance is an idea that finds its roots in Nicole Sullivan's 00(55 (see issue 208).. border-radius: sradius: Of course. Stotol-Ntdth: Seals • Seal + (Seals .widget:after ( content: "\0020". Your New -cprev 80 .widqet. . indented syntax.widget { "zoom: 1. Scoh~idth: Scolwidth . There are two sides to a mixin. { #9999ff. the idea is expanded to include more than just classes: a.

di'W~d SIre e. I think you'll find that Sassis an indispensable tool. Sassunderstands the H5L and HSLAcolour representations introduced in CSS3. this copy-and-paste approach is undesired. 'lighten' or 'darken'. • We can debug our Sassfile output by enabling line number comments or using the FireSassextension for Firebug.eppsteins.. 1 Conclusion This article has only briefly touched on the power and features that are available to you by using Sass. 'saturate' or 'desaturate. unlike mixins that apply contents into a selector. Sassprovides an alternate syntax that uses lines breaks and indentation instead. 2-in + 3cm + rpc is converted to 3.net/february 2011 81 .aware mathematica I expressions. bill clients more per hour. 'In addition to these HSLtransforrnattons. This allows your style sheet to be kept smaller with many of the same advantages that mixins provide. with your style sheets dictati ng how t hey are con structe d. But once you have variables. It means that we don't have to make difficult tradeoffs between how we think about our files and how we deliver them to the browser: • We can write comments that the user won't see.net.00(55. • Dozens of pluq-ins you can use. in the following example.forget about vendor prefixes! • Helper functions that make advanced techniques such as image embedding and using asset hosts a snap. Sass provides a number of other useful functions for worki ng with colours.filename that starts with an underscore . Colour support Sassunderstands all the (553 standerd colour representations . For instance. Compass (compass-style. you can 'adjust-hue'. The reason that H5L colour space is preferable to RG'B that is transformations in the H5L colour space are based on how humans perceive colour. These colour functions make it a snap to build complex colour themes based on just a few colours.gs.net/technique! (55 Compass Stop reinventing the wheel! Sassgives new power and expressiveness to our style sheets.• Sasscan also add and subtract numbers of different u nits as long as they're comparable to each other.343in.llf1e01s Im~ &<deI·Aildi~~ ecx bShadaw Bm:SIzInt: COlumns. • For those who dislike curly braces and semi-colons. and HTMLS Boilerplate. you'll find you spend much less thinking about cross-browser issues.generated from simple images. If you have to build and mai ntain designs across browsers. so Sass provides transformation functions for transforming colours created with any representation into a new colour.such files are called partials.org) is a style sheet authoring framework powered by Sassthat provides a wealth of tools for you to use when managing your design projects. Compass stays upto-date wi til a IIthe nuances of browser compatibility to Numbers and maths Numbers in CSSmay have an associated unit. and get the corresponding 'grayscale' or 'complement' colours. • (553 library .1<g!!lt!n(! Font fOK~ Cr. Please visit our website sass-Ial"lg. . inheritance applies selectors to other selectors.Jn particular. The ability to create rich concepts with little-to-no need to adjust our markup means that you can share style sheet libraries across projects.com for more information . the width would be assigned a value of 33. Por instance. • Mix and match (55 Frameworks with relative ease.column { width: 400px ~ sern-raro: has a. In Sass. @'chriseppstein Expertise Building large websites and web applications Worst injury Broke my foot when I kicked a door in rage after breaking my favourite beer qiass: not one of my finer moments . This means that you can copy and paste an HSLcolour and tweak it to a new colour without needing to use a colour wheel to convert back and forth to ROBor hex. Sasswill not create a CSSfile for any Sassfile that Name Christopher Eppstein Role Creator of the Compass Stylesheet Authoring Framework. including plug-ins lor popular frameworks such as 96o. It integrates with any application framework and can also be used stand alone..even named colou rs. Developer tools Having to process your Sassfiles into CS5is certainly an inconvenience but there are some great advantages of having this step in your development process.333em: $em-ratio: rem 112px. or just lake that time and go outside and play. Compass provides: W3C comparison but they don't always make your life easier. lnlrn:e '1lIQC~ Opildty T!!Xt Shildll¥l Transform Tl"ilt"ts'ltllln Up date CSS3 is an evolving standard. • Battle--tested cross browser utilities. With time lime extra a firm understanding of Compass. Experience the power of (5$3 today with Compass Standards are important As you can see. core contributor to Sass Online chris. • Sprites . • Project templates to get you up and running quickly with the framework of your choice. • We can compress the output or select one of several pretty-printed ou t put form ats.comments starting with II and continuing to the end of the line won't be found in the CS5 file. For instance. • The complete Blueprint Framework as mixins instead of ugly class names. Susy. you can 'mix' two colours and adjust the alpha layer of a colour with 'opacify' and 'transparentize' Compass CSS3 !Modules Updned for you as brow5ers develop Clip ~"dOrliln 8. For instance. Sasshas unit. • Ability to create your own personal framework to share across projects. • We can organise our source files into several smal! Sassfiles and import them into another Sassfile. meaning you can spend more making a better design. • Only use the parts of frameworks that you need. Another one of the major advantages of selector inheritance is that it removes the need for error-prone duplication of classes in the inheritance hierarchy from needinq to be applied to your markup. Enter Compass.

s such as SE~. you should see the Gai" framework extension enabled in the manager panel.~.Enter the Gaia open-source framework. skating at Rob Flynn's ramp Area of exp erti se We bsite design and development Clients Bacardi. schedules seem to have become more aggressive over th e past few yea rs. Ash Warren and Scott Cook of nasii"':wp_Q netm~ Dynamic assets (1) Leveraging dynamic assets in Gaia is a.com Area of expertise Website design and development ~. deeplinking. At the same time. regardless of subject matter or scope. A streamlined process for implementing these "fundamentals" is crttical. Ford Worst injury Hurt my back lifting an old tube television In this tutorial.3 05 we go to press).: XN!~~ _ 'Requires Hash (55. Example: <asset ld.."soundtrack" sr(.3. we'll attempt to unpack some of the benefits of the Gaia framework and detail how we've experienced its workflow-supercharging power. Here they'll h ow to save Ii m e by u sf ng the Ga1a framework to strsa m line the website b wilding expe risn ce sh ow you needed Flash (55. Save the . and the SfC is a path to the file to load.xml lile to provide the framework with the asset's specifications..rnxp to your hard drive. Disney. We've put together a practical guide that demonstrates these key features..h ~::~:::!~! Clients Bacardi. by default we need at least two: the id and SIC attributes."soundtrack. No more timeeating implementations of 5W'Address_ You have the magic of Gaia at your fingerti ps! ~~ii.DownLoad Gaia Visit wwwaai'atla. the id will be a unique identifier used within Gaia. So bust open Flash a nd let's get our a utomation on! • Framework extension 1101'1 goes wel'l.com and dirk on the Download Gaia button -_ _--_ _-(version 3.net/february 2011 . This node is placed between the opening and dosing page tags for the associated page that will be accessing the asset. preloading and the standard transition in/out are now fundamentals. Disney. twopart process. First we'll add a node to the site. Cra s h (au rse Knowledge The website for Alia nta and 5t Lo uis-based agency D riftl a b mi ght inspi re you.'.mp3">.netltechniquelt1ash IF ash build sites faster with Gaia Driftlab explain how to get started with the Gaia Flash framework (an be found at Part one In the first of a two-part tutorial. then dou ble-ch ck 0 n the file to open the Ado be extension manager and install.~~~~ AC~~~Jn?0pt. Name Ash Warren Site driftlab. Element. Fla s h develop ers are often tasked with deploying a full-featured website in just two weeks. You'll see in the notes at the bottom that it shows th at th e pa n e'l ca n be lou nd un d er Window > Other Panels> Gaia Framework (make a mental note). With the click of a few toggle buttons and the specifying of a few file paths. text editor (preferably a code editor such as Flash Builder or FDT) Project time 45 minutes As the Flash microsite has evolved over the yea rs. 82 .~' ---~-. . c ertaln p roced ures and conventions have emerged as standards for virtually every project. you can scaffold a project in less than 10 minutes. Much like page nodes. Ford Worst injury Busted a tooth homework. There are many attributes that can be set here.

net/technique/flash ~M~~ ~ ~. Once it COmes to..._...u-~ GAIA .--_..... throu g h the featu res he re you'll see that t:hisis an extremely robust tool with ~ ton of functionality bundled: in.".. Thi 5 scree n mimics th e project pa n el in Flash an d en a bles yo u to access any FLA.. but fla5hDeveLop and FlexiBuilder ore great as welL We'lIle3ve these alone.~ ~l:Zl GAIA _ . GllIIIl'h~. you can certainly still create AS2 projects uSing it if needed.s a free 1001 provided by Steven Sacks.. and pu bli sh the project as a who le ._----------~-----------------GAIA ... .._.swf file opened up in the IDE. but if you find the Gaia framework useful. (lick On that Scaffold Pro j eel bu tto n.. For Fo lder P~th s yo u' II n oti ce that Gai. Project name Let's go ahead and enter a project name of Gaia Test Site and select a project folder (we store OUrs in OU rule r fo lder under _Projects). : Animation styles You should now be staring at the Scaffold tab with the class packaqe pages shown. .t:(iQJ'l' .J13 . you can edit this as needed. go to Window > Other Panels > Gaia Framework and open the Gaia Framework panel. However. _Project set-up files At the bottom of the panel yo u 'II se e that Gaia ca n create project set-u p f les for your tool of choice. We'll leave this 0.oing to focus On AS3. moment in a flickering potpourri of lights and context windows. These • Edit sta ge size 1n th e Gai a Framework pa ne I.$cl ...... leave this as default._ . you should see your project's main.:IUIII 041' • ·r . Create a. Under Properties we ca n edit th e 5 ta qe size an d Ips ~ s needed....i'I.N. GAIA v3.. See the Create AS3 button) (lick itl Srrolli n g..-------------------------------GAIA .... places your files in their respective folders. on this list item and we can start custcrnisinq our sitamap ('""use one page a._ ~'IJf":!~~t'lllt ..netlfebruary 2011 83 next> . ~~.. co. Click on the (reate New Project button...~~.3 ~ OpEnl'm ~er 1 For now we can leave SEQ Sea ffoldi ng un checked. please donate a lew bucks to the cause. window. ActionSt.....I~1 1't"'IIJ{. Under Options you can select either of two animation styles..ript. se lect P layer ve rsio n 10. GAIA ------------------------------"""'1 ~...in't gonna..sh should lose its he<ld for a. .. cut it). ". ca n be edited but we'll ·1eave th ese at the det au It setti nqs. Gai<l i.2.. . ~ Open Panel Open Flash (55.. • Sca ffo Ld Pro [e ct Publish tab Click on the Publish tab at the top. but it time:lines are your forte.~ r-"~ . If <lIL qoe s well fla. At Driitlab we use FDT. GAIA I Start customising Go ahead and close the SWE The Gai a pa nel sh ou Id sti II be ope nand at th e to p our Gaia Test Site ts listed in the text erea Double-dick."'.a~._ ~-~_ .. new foLder named Gaia Test Site within said folder and select Choose in the dialog.. \'ou'lisee here that you can either test your project or view t he Iib files ina drop-down.!l..~ Create AS3 For this arttcle we're g. I~J ..

.. Add pages Na."'_I!A'~iI'Ii~.. Open lib/ horne. \..~~ ...~.-:.net/tec hnique/flash . ~ E!~~iII .. tUb 1[/!fIIC'I!'~ ~~ . the template each page in Gaial uses. ~'-'-""""""~.."....'·1 . except now wh en weri 9 ht-dick you sho u ld lee 0 II of you r new paqes. "'._ __...l!. It contains ali of the ba Ii c com pon en ts eac h pag e need I to tra nsrtio n in/out and! i nitia Iise itse If withi n the Gai a fra mewo rk ........ .i..r.U...rl t I _1iI"'..iIII"'" ~ .IDI... ~.. This document class serves a. ..... ~ l..nd click on the pencil next to the Class textfield.1 Dig deeper We'll dig in a bit more. let's just navig ate to the directory where we created our project You can See that Gaia has created the default project structure for us...!~... I..n l'Iotytr 10 SCrlot..:IiiiiI!' . . soundtra(k)..._f' VS.o:l'"'4lL~ 'IIIII*'III~~L·. We need: more.t1 -.... In this example we'll be loading in an rnpj file.. Project folder Go ahead and open your project folder in finder again and naviqate to the bin/index. '111 lifo. ._. staqe colou r a..rt-. Nice! 4.. Now that we've edited the site.... that both the address title and the address ore chonging as well.O. . In order to access the asset we can use the this keyword first to reference the instance of the page itself... " ~l~~ . ~ ~1 ~-~.. .. ~ ~ ul.... (ISound isthe Sound interface within Gaia) inside our transition method.Y"C'lo'IIit'ClrC"lwf"'_~ "'V'IiIJ" i.~ . do..0 IPiJllu. . some form of About Us. nasI! Ool. . t~~ .. ""''III!Ir'"..xml let's click the Scaffold Project button aqain....lfa "MiI' rl......play{)..- ""* [(ioI"~.". • TempLate 'By default this should just open in the built-in FI.~ "lItiIiIIIlIl .dding/removing pages and dynamic assets in our projects easy.. IC"U" 1IIjIJW "1:'-"'" iIIIIIIIIo.-" .. Id is th e u niqu e ide ntitie r th at Gaia uses.t.. ~~IiIIIIIroi· iII·~.~ oJi"E ... !II'("o.~1jI:- II'DIio .. You'll notice when you nsviqate page...t¥....xml file and open the file in your text editor. ... Even our dowment class has been wired up... "'1_" .. AOlonSCtlp() .~.Jt liIF'I:.sh text editor. That's it! home. AlIIIi!IHiJ~ I~ .. lt's important to note here that the asset isn't available until the transition method is called. as well as a._ ... _lP-"l tit: ~~ r ~ 'W"P. 50 in order to access our "soundtrack" asset we'll type 150und(assets.a .vigate to the bin/xml/site.. ~IIIJt..._.. • View pages The Gaia panel should be open and set to the scaffold tab...._.. the paqe to the right-click menu in Flash. .JrifI l.' uu.~ _.~"""" _ ~~.. 'I 'WIT·rh U·!II' .~'= . v PI. p:. This should open the same main.. Contact page Let's copy and pasts the page n ode for home a few ti m es.... ... this site.. ~111! ... . -...-d.net/february 2011 ..html file Open this file in a browser.. It Default attributes We get four page node attributes by defa u It.....iill ~~Il_ ._.~ .r... ...HomcP.~ ""'pt_.. _ . '!!IIIIII.".fla in the IDE and let's see what we have here.:r • ~_.. ...I. All sites need: a COntact pa 9 e.. .:II!=oiLiI!I .. right) Make sure your XML matches th e screenshot a nd: conti n u e on. i. ~... _L.!JiiLL1IBP'I-!. You can lee that Gaia h as let ou r fPI. --. Works section showing off a bit of whatever it is you. r-"'r~~ _l!6I rpo...n.tIi!t! I .. .~"""'t. You'll notice we only have one page... src is th e SWF asset associated with th e pa g e. title is th e pa g e tit Ie you'll See in the add ress bar. .. -. k.I1U5H Pmver... ~~ ~-u....""tJt\4:~ Uf!lt itt ..xml file mimics the page hierarchy and makes a.....nd stze..u.. a nd me n U add..swt file we law before.. Project structure Try clicking the Open Project Folder button......iIII. home. This is the power of SWFAddress that comes built-in to Gaia... -cprev 84 . Allassets within a page node are preloaded with that page: Gaia provides many helper ciasses to dea I wit h rna ny asset types.llllilihJIJlllil n'" d.. Anything happen? Didn't for us either+ co uld be a Flash or Ma ( t hi n g. Go ahead a..rII· I'jTa- ~~'Fri'lIII!!"iJOrl ....j~""' ...... ..

..n..1 ~ I .).onInO: f super. with our default transitions in place. We now have the "bi lily to switch from page to pa g e vi ewi n g. _ Publish homepage Next. [_ Flaii~ I'~~~I~~ ~Uf. placeholder content..t we'll go back into our document class.. Go ahead and import each page's respective qraphic.. .... \'C"'~'::r..L Basics down Click On the small pencil icons for each rLA: you should see it in the Properties panel next to the Class textfield. If we'd selected Tirneline. Once complete..-. let'. g. Save the file..:t11" U . f N Scar~old~h\<)· otd 19 II Z0 Z1 23 override :~ubHc function trans1.... ::..t. .S'wl Il1dt:w hlml _ _ _ i AboutPogl! elumls Abstr'ClctPogl! ItboutPogeO pubUc function ( 15 17 16 10 } 5up-erO.0.. 7 B 9 . qrab the horne..l(1 l I ~. 2( o.. Add screenshots In order to better show off our page transitions... .oreqistration so everything lines up nicely..11~J ~ . on(OMJIl tte: trenst t tonlnCOI:!Iplet1e}). .. we'll show you how to extend your use of Gaia.. OJ port eM.. controllinq the transitions of the paqe..ld'_~~".. on(Or:Iplete : [:l1'(lnstt1onGLitCoqlete} ).tlflll'll . b ~ 2 { port f\D1h." . giving you..ve.s. Now go ahead and comment out the new Scaffold {this). Document class Fir. _!lafb~~ ""_"_litIIiK. ~ series of frarnelabels would be created.as. bin La.~"~"""I·... Loa k at that: bill the dient. . lt~III'1I~~I-. -.~l~i..... t:he tools you'll need to build engoging interoctive destinations! .l!..... 5WFAddress i ntaqratio n ~nd su ppo rti ng cia 55 file s.it needs to go.. trans 1ttorUnO : IlfeenMO)[.fla (leave it as a flattened bitmap]..e. HomePage.."-.. -.. port COlI. Other pages Import graphics Open up our threerernaininq page FLA files: about. gal ofrQ:le-. Now do a' File> Publish... ~~'I1rV . line in each document class... olpho • 0. we are done I Well. _A'i)st:ro...L...!I. go\ofrQl!lewt)rl( .. 50 about. Rem e mbe r to p 10ce the g raphic s ri g ht on the stage with o.... .pnq graphic and import it onto the stage of horne.. super.mework_evants.~~.3. not quite. our com PI.ro rk _teaplote.s .~"~·= ~"'l!"~. 1"W'!f.). 1 'i:lDC091!pog@$ You should: see our home graphic and alternately fade out once we right-dick and select a different navigation element. We can comment out the new Scaffold (this).: .5wf .. to(th.t. trGnSt ttonOutO. our oth er pa g es are still spa rti ng ou r place ho Ide r sea ffold content: this needs to be chanqed. This would usually be the first phase of any project After receiving the comps from the AD we pop them in place to show the client the site's flow.. etc. ~_""'II!I~'~_-: ~"la. This is a placeholder that enables us to see some basic graphic and textual information on initial scaffold of the project . [0.1. contact and work. ~piII. . line. (0 nta£(.ldRj I '""'". _~ ....rrlde public ( } MeuM transtttonOutO:vold {alpha:El. port COllI.home.1ofrGmtlltlrk . port nosh _events _.atofr.lII.~ 'l... let's go back into our bin/index. . Once 'it's do ne.I:I~":::~. he eDl4x.boul. (alpha: I.html file ano open it in " browser.. add: in a few screerishots we've pulled from our existino site..dtspioy.I .... This wi II a Ilow our g ra p hi cs to show up instead of th e place ho Ider COntent ° Remove placeholder content We've laid out the sitemap. plJbUc class portcM. . toethts.. 15 17 iG } 19 za } Tl'!een~.sed: Gaia project. ope n the bin/i ndex .swf L __ • 10 11 11 13 14 "L upr~1-!nstall.debug.tt.. ~r... In pa rt two.netffebruary 2011 85 .gO.ctP'ag.9. Publish remaining FLAs Publish all three FLA files for the rernaininq paqes. ~.net/technique/flash ~.ept ..'"'a"'II~n~ Defa ult sty les The Green sock twee ni ng cia S se I ate bundled with Gaia and are used here as the default in/out animation styles for any ''l\ctionScript''-ba.. Unfortunately... C(l. ~ 3.pnq for the Abo ut pa 9 e.htm I f Ie an d take" look. irrittal site structure.. 9 ree nsoc 11.

fun use of sound this and strip out functions be the core functionality. someone functions What might You won't be able to provide overloading Work the exact same experience of complex Make peace with Remember. 'serious entertainment'.e Requires Project needed Pen. Movies the ifunes app.. designing for i054 devices is totally different to the web and shouldn't be launched into by simply opening Photoshop.. as tempting as it may be. the Application Definition Statement (ADS) 86 . as you land a plane in Flight Control you get a visual feedback of "Great" or "Welcome" to make you realise you're Serious playing can I make this task easier?" correctly sounds a bit like an oxymoron Basically. There are five main types of app: 'serious tool'. use of colour Good examples in a smqle app without will people app and Where T07 Fun entertainment has a very simple umbrella the most graphically and visual feedback. that summarise the core functions of your app. Or maybe you've been a bit cheeky and enhanced your skill set a tad because it's an area that interests you.. you'll Fun tools and explore.pnqs) app. For example.. of colour and are fairly . 'fun entertainment' and 'utility.~~ ~·U'LriillI . than gra phics and kee p a minimal colour palette Short but sweet Start with a couple of concise sentence. these are they hold Statement of intent I always start with what's called the ''App Definition a couple intended the project overexcited of sentences audience. Far Left Fun Tool. that depict the core function It's kept intentionally Statement" (ADS): back of your app and the be referred get functions and keep short and should unnecessary entertainment this it took me a while to get my head around cateqory apps that use standard and meant Now! to be and controls top and bottom but the content is custom entertaining .The best examples of these are Sky News app.. paper.net/february 2011 . time Nothing but a keen eye for detail editor and basic Photoshop that can output Once you've your written your ADS. and you now find yourself with an app to design. above questions: the best apps respond ami?" to the following • "l'm bored: how can I pass the time?" By visual feedback we mean attention to detail has been paid towards the U I. Either way. wondering where to start. Maybe your dient has entrusted you with their iPhone app after completing a website for them. • • "Where "How be used to on the web.netltechniquelmobi le IMobile/des·gn an iPhone app UI Designing for iOS4 devices is totally different from designing for the web. ~~"cpdl . Each involves its own unique user interface decisions. l'hJt. Your mantra hundreds should be: keep it simple. people possibilities. Sarah Parmenter explains how to create the perfect user interface for your app Knowledg.games_ These are always and have a. such a 5 Deliveries have a mode". simplistic encourage but with get an idea of how a They have moderate in hierarchy. Dropbox quickly and lnstapaper. 'fun tool'. tool should keep a minimal Good examples be presented. if the user has the sound turned off. The Ocado they want you to pick up the app colour palette and are driven by data If you are Mail. te use .II)'OW· """""'tll!l . rich applications available . use your app for. or deliver the user. decide the design type that would best fit Photos hop (or any graphic . to throughout the process to curb adding on track. will all else? as necessary.. out what Types of app Serious rather serious tools always than graphics. avoiding about future the inevitable feature scope creep a.implistic in h iera rchy such as 0 ro pbox are ~ driven by data rath e. 2-5 hours Your first project in iPhone UI design normally comes about in one of two ways. known a. and graphics of fun tools and are always fairly are Deliveries. leisurely a definite productivity: purpose. have a look at the UI of all of these apps.

By putting your thoughts down on paper and explaining details concisely. d ep art u re and arri val ti mes and eve n th e make. Apple calls these the "fast food" of apps. keep it simple: don't produce detailed icons or anything' that could steer your client away from signing off the functionality BilCk to basics Last but not least comes my favourite category to desigll for .) atlantic I Wi refra ming You can wireframs however you like . It also enables passengers to check-in via the app.each of which is meticulously produced and meet the nee ds of the user perfect Iy . . well a. selling flights . Don't be tempted to just send off screens as an attachment in an email: give them purpose and show them in the most realistic environment you can.~~DII -=r::a. telling you when to avoid sleeping. It also holds information about your upcoming flights. If you're presenting your wire frames to clients..while also providing a useful service that customers will be enth usiastic about using. Giving the user a visually rich landscape :mode ca n really add brownie points to your app. always "on brand" and easily recoqnisable as Virgin Atlantic . such as buttons.. the best time to exercise and even a date that you'll become fully adjusted back to your own limezone. they're great fun to design for as they're always graphica Ily rich.II1II'- . you'll minimise questions and queries from the client throughout the process.utility apps. we'll no doubt see these go from strength to strength. You also have to think about the space between anything: au ser will need to touch. The ideal finqertip tarqet is a comfortable 44 x 44px. All this wrapped in a beautifully intuitive user interface design with some interesting extras for passengers to discover. in case users have the sou nd switched off i You're also going to need to think about the space for touch gestures. For the iPhone 4. w hie h also caters for Blackberries and Android phones. Flying Without Fear is aimed at people who are sea red of flying. The third app is one that many of us might not need but which may be invaluable for those that do.netlfebruary 2011 87 next> .paper. take the time to produce comprehensive documents.' Now we can actually move onto some iPhon'le UI. The three apps availa ble all serve very different pu rposes. Example. Rig ht Uti lity apps such d s Phases are usuall y 9 ra phically rich. in which case you'll need to wireframe this too. I always embed my screens into a Keynote document. Ego and Phases. telling them all about fli9 ht de lays. they can sign off design ele m e nts late r. The recommended minimum space between elements is between 12 and 22px.net/technique! me bile Virgin Atlantic Few companies have worked out just how to leverage the iPhone platfor:m to their advantage without crude sales techniques.and one rn 0 bi le-speci Iic we b site. I never embed . aural Service-focu se d product Vi . Let's get wireframing! (Note: Throughout this article I'll refer to pixel sizes for various elements. Normally sinqle-screen or stacked up like a deck of cards one under each other.gin Alia ntic's a pp s provide usetu I services that su pport the . si n g le-screen.and since their recent rebrand. Flight Tracker caters for the needs of the passenger.but don't get too detai led: keep to shades of grey and white and block elements.E8D (r' TIP LATER SCREEN When wireframing your spp. you'll need to exactly double these figures. Think about the gestures a user will need 10 use to get from one screen to another or to refresh a page and sign these off at this stage as well. Virgin Atlantic get this pretty much spot-on in my opinion. Virgin. Their user interfaces are distinctive. as they're normally used for 30 seconds or less. providing them with a calm environment to learn about the most common noises on board a plane and answers to questions such as "What ilall the engines lam".~eUing flig hts .without appea ri ng overly sates-tocused Below Games should be designed with visual feedback. and used for 30 seconds or less a. Photoshop . of uti lity apps are Weather. with the screen on the left and a parag raph about the screen to the right.. Aside from all the icons looking virtually indistinquishable from one another. You rniqht also want to bear in mind whether you're going to support a different landscape mode. Don't produce detailed icons or anything that could steer your client away from the main task of signing off the functionality.in this case. Virgin Atlantic's iPhone strategy centres around three powerful apps on the App Store . Virgin Atlantic's apps are a great example of how to support your primary product . stacked up un d er each other. annotate where required and reinforce any design or UX decision s you've had to make for the greater good of the app . Jet Lag Fighter is an app that combats jet lag. model and name of the plane. The minimum hit size on an iPhone is 44 x 22pX: anything smaller than this and a user might get frustrated with mis-hitting their intended buttons.. Fireworks.

Don't forget about your icons for the App Store. Start on paper: it's expendable and easy to let your ideas flow without committing to anything.lwa'ysportray a single. Try to leave text out of the icon it rarely works and is mostly unnecessary as your app name will be presented below the icon anyway. you feel you could develop further and better on the computer. keep your documents neat and tidy.. defined silhouette and tell a story of what your app represents....~'I'.... and dean.. custom icons within your app (of course.. Prototype On paper: it's ea sy to let yo u r ideas flow Left Spotlight icons are seen on the sea reh scree n s of the iPh on e such as the Twitter bird. It's a good habit to slightly downsize the artwork for presentation.. The "pull to refresh" has become a sta ndard gesture across many apps and coupled with a beautiful user interface.... Keep to shades of grey and white and block elements In context If you're presenting your wirefrsmes to clients.net/technique/rn obi le 1I.~_41111. . that attention to detail is in abundance and that they're pleasing to the eye" The apps that get the greatest graphical reviews are those that follow suit. --.... aIway~ tell ~ story of what the app represents Below left Great icons. all used sparingly and appropriately). ~. ~ . These are seen on the search screens of the iPhone...... this isn't frowned upon... Whilst Photos hop is an industry favourite. Flat.. as this is what is used for development. Studyinq the UI of your favou rite app will help you to see these little details but the best apps are always those that get the U'I and the UX right.. high gloss finishe.. ._ ...... Once you.. take the time to produce comprehensive documents..... tactile backgrounds. It's always worth asking your developer whether they'd like you to pre-slice the UI into PNG files.i"lllll. crisp.... ~_~tbooH ~a. make sure you group and name layers sensibly.. full quality artwork because I've had my fingers burned too many times. Designing the UI You'll notice that the apps that ship with your i Phone or iPad are of the highest quality. to put your design in context It's normal to hand over a Photoshop document to a developer at the end of the process: unlike the web..... The approval process Apple's approval process (an sometimes take you.-_ t. have something.. texture and realism can lift your app from good to fantastic. you (an work in any program that (an export PNG files.. 5potlight icons often get forgotten. ~_1Ir-:-!-!. move forward. -cprev 88 ... such as the Twitter for iPhone app (formerly Tweetie).~. While you're designing.... Icons I'd argue that your icon is one of the most important things you'll design: it will be sorneone's first contact with your app on the App Store.... . Photoshop or just good pen and paper. Get wired old-tashioned Create your wirefrarne however you like: Fireworks.. . annotated where required. They're 29 x 29px with a border radius of 5px. Other elements that can make an app beau tiful are text highlights. it's no wonder it has become a favourite amongst Twitter iPhone users.iI.i.. Your standard iPhone icon is 57 x 57px with a border radius of lOpx and iPad icons 72 x 72px with a border radius of 12px.... hints of gradients.net/february 2011 . The iPhone and iPad are in such close proximity to your eye level that it's possible to make the most subtle of textures and gradients noticeable...1I111' .. If you're working in Photoshop...JIIII~~ . __ " . SUbtileshadows. The best icons a..!l . . which are a supersize 512 x 512pX but normally scaled to 175 x 175px for the App Store. down winding paths and leave you scratching your head as to why your app has been rejected and a Far left. block colours can work well but just adding.11 .

don't 'use allY Apple trademarks such as iPod or any other derivative of the "i" brand. If you've done your UX and wireframing correctly. The scar is fortunately fairly small but unfortunately visi ble . I've seen apps get rejected for this reason before. you would need two files. you can save it within the app for future reference.net/technique! me bile Starbucks The Seattle-based coffee company that so many web designers and developers rely on for their morning kickstart is doing some great iPhone-5pecifk work on its a pps. usable figure and so you'll have shot yourself in the foot if you're charging per screen. scaling up should never be an option. However. you'll know your back-end code won't ever be a. In the States. this is a third set of artwork that needs to be completed. logo. On a normalapp (by which I mean not a game. Take time at the start to wonk out the best design route and you'll be on your way to success. you'll find it neatly stored here. 'if possible. the artwork suitable for iPhone 4. By the same token. So it's interesting to see what Starbucks are introducing in the US app. Wrap up Following: theseguideli nes should stand you in good stead for your first iPhO'ne app. you should qet into the habit of producing them in vector format. with flashes of Starbucks' trademark green. Although there's no holy grail for getting approval. as you can only stretch the pixels that are there in the first place. designing for this platform can be very time-consurninq due to Whether you want to check the calorifi c value of your skinny latte or pay with you r mobile. with the developers being asked to swap them out for "something more custom" Know thy workload Once upon a time it was easy to estimate your design workload for the iPhone. an accident that was entirely my fault. you should have condensed the number of screens to a nice. Nowadays. and this will result in a blu rred. has an spp for th at having to produce another set of artwork for Retina display. coupled with Cocoa and Objective C. I made this mistake once" I used what I thouqht was a generic podcast icon but it actually belongs to Apple and they don't want you using it in any of your apps. as you might find you can easily scale down some elements as you work through. it's always best to start with the largest.netffebruary 2011 89 . With all these different formats to consider. there are certain things you can do to maximise your chances. And if you're designing for an iPad version of an app. Some "gap" methods use forms of JavaScript that Apple doesn't always like. now the company has installed "touch points" across various stores whereby you can scan your loyalty card on your phone (through Starbucks Card Mobile) and it will deduct the balance from your pre-paid total.youknowwhodesiqn. as the UK normally ends up mimicking these eventually. Beautifully designed. iPad and web Clients All under NDA Worst injury I had the right-hand side of my lip ripped off when I was 13.• Site www. 'For example. I can usually get two screens completed per day.png with @2x depicting.com Expertise User interface design for iPhone. highest resolution artwork that you need 10 produce. You can also customise and save your favourite drinks within the app. Any iPhone app that can create a better experience within the actual store always gets brownie points from me. Apple also isn't too keen on you using popular stock icons found around the mternet. So if you try something new one day and are fearful you'll forget the full name of that Skinny Decaf Vanilla Latte. a wealth of information at your fingertips. elegant and clean.problem.. purely use the SDK. If you're producing custom icons within your app. Above all. as these can then be used across all I'LLdrink to that screen sizes and simply added to your Photoshop document. Starbuck.and without making you feel like you're immersed in an app whose primary goal is to take money from you. png and logO@2x. Those who frequent Starbucks stores often will already be aware of its loyalty card system. keep your solutions simple. Something else Apple doesn't like is use of its icons or imagery. as these are the most timeconsuming graphically). !Finally. if you had a logo.iPhone 4 'Retina display artwork is automatically used when a developer adds the images to the app package by adding @2x to the end of the filename. the main app provide. Whether you want to find the nearest Starbucks store or look up just how many calories are in that daily latte or the food they serve. Using purely the SDK. the company has recently rolled out a new method of paying. amateur-like mess. Presentation skiLLDon't be tempted to just send off screens as an attachment in an email: give them purpose and show them in the most realistic environment as you can similar app has been let throuqh. A dear balance screen and in-app top ups via PayPal makes purchasing coffee in any number of their stores worldwide a breeze and a pleasure . but never charge per screen.

PAGE_HEI. selected by a.Any type of contents here -'> </div> </section> </div> </d:iv> We have one main container element for the book. <canvas id""pageflip-canvas"></canvas> <div id""pages"> <section> <div> < 1.com) Paper texture A background image containing the paper texture and brown book jacket. Flip example The book cover and home page of '20 Things 1Learned About Browsers and the Web' (www.uk/tut/canvaS-211. var BOOK_HEIGHT" 260. We at F-i.. so if you want to change the size of the book you witt also need to update the values there.com). The div has a fixed width and the section is set to hide its overflow. 50 remember to reference the tutorials files (netmaq.GHT /2.co.e needed JavaScript. var PAGE_WIDTH" 400. HTML5 has begun to change all this by bringing some of the most crucial building blocks of these web augmentations to the open web.net/february 2011 . Inside of the section element there is a div wrapper for the content . visitor or found by in-browser 830."book"> For a lonq time. A lot of effort went into the graphical and interactive treatment of the reading flowespecially how the pages of the books flip from one page to another. Note that some of the constants defined here are also set in CSS.we need this to be able to change the width of the page without affecting the layout of its contents. Let's start by lookinq at the description of the constant vatues we'll be using throughout the code. which in turn contains the different pages of our book and the Canvas element that we will be drawing the flipping pages on. using HTMLS'sCanvas and JavaScript searches.netltechniqueJhtm l IHTM L/create a page flip effect Knowledg.com collaborated with the Google Chrome team on an HTML5based educational web app called 20 Things I Learned About Browsers and the Web (2othingsilearned. s added to the boo k elem ent go . var BOOK_WIDTH" The markup It's always important to remember that what we draw on Canvas can't be indexed by search engines. web developers leaned onpluu-ins to bring truly immersive and rich interactive experiences to their users. has been left out of the snippets in this article. For that reason. but it is quite extensive since it invotvesa lot of procedurally generated qraphics. var PAGE_Y" { BOOK_HEIGHT .com) shows us a new take on the 'Flash page flip' we aU love to hate. Some of the rudimentary code. HTML.l1Q Hakim El Hattab from award-winning agency Fi (f-i. We dedded that the best way to achieve the feeling of a. The markup required for this is minimal: <div id.pnvaS-211.zipJ for the complete code. The script The code required to power the page flip is not very complex. (55 Requires Text editor. The CANVAS_PADDiNGis added around the Canvas so that we can have the paper extend outside of the book when flipping.. the content we wi II be working with is put directly in the DOM and then manipu lated by JavaScript if it is avai lable.. This tutorial wilt tab you throuqh the process of creating your own page flip effect using the Canvas element and plenty of JavaScript. Since the contents of the book is very much about open web technologies we felt it was important to stay true to that by making the container itself an example of what these technologies enable us to accomplish today.2otbjngsileamed. This results in the width of the section acting as a horizontal mask for the div.. One of the key ideas behind this project was that it would be best presented in the context of a book.real-world book would be to simulate the good parts of the analogue reading experience while leveraging the benefits of the digital realm in areas such as navigation. var PAGE_HEIGHT" 250. any browser that supports the HTML5 Canvas element Project time 3 hours All the files you need can be foUnd at ~l@!!L . ) var CANVAS_PADDING" 60.. such as variable dederations and: event listener subscription.

II Prevents the text selection cursor from appeannq when dragging event. page: paqesli].i: flips. forI var i " 0. First we need to make sure the pages are layered correctly by organising the z-tndexes of the section elements so that the first page is on top and the last page is on the bottom. sing le-a xi s.style. even though it might have a lot of psrforma nee ave rhead.x <: ? -1 ' 1iff flips [iI_target """ 1 ) ( page" page . That's the mentality behind this technique for applying simple.lenqth: i++ ) ( iff flips[i[. A workaround for this is to draw a slightly larger solid block behind the image that matches the colour and outline of the texture.x) <: PAGE_WIDTH) { if (rnouse. including code. You'll find a working demo.cltentr' .itfhakim/simple perspective.net/february 2011 91 next> . from both a performance and graphical standpoint.x <: 0 &&.offsetl. so t here is nolo ng er any need for the added performance overhead of using vertices.dragging ) ( flips[il_target" mouse..... this will always be antiahased and hence result in smoother edges.clientx . len" pages. The most important properties of the flip objects are the progress and target values. 1 else if (rncuse. Now that we have a flip object defined for each page we need to start capturing and using the user's input to update the state of the flip. function mouseUpHandler( event) { lor{ var j " 0.y " event. page . to custom-tailor the solution.leng th: i <: len. the outer edges of our image (the columns. we can build a basic implementation of how a 3D engine typically breaks its objects into vertices. I 2.so it's important to fine-tune this to achieve an acceptable quality/performance balance. 1 else { ° ° Fresh perspective thinking Sometimes it's simpler to custom-tailor a solution.se.x " event.x > 0 && page + 1 <: flips. Sometimes the timing factor can also play into this and make you want to go for an out-of-the-box solution.. Except in our case we know that we are only working with a singIe axis (h orizonta lin this case).iI_dragging" true. pers pectiVe to image s on ca nvas.0 rnouse. If antialiasinq is not applied. Bitmap perspective Apply single-axis perspective to images When a new challenge lands on your table and you're unsure of how to tackle it. That's the behind this technique: check it out at jsdo_it/hakim/simp1e perspective . var pages" book.netltechniquelhtm l Values .1 >" 0) { flipsjpaqe .eft " ( BOOK_WIDTH mouse. ).1 : page.-+---WIDTH-----------+---------------T--+---WIDTH----------BOOK HEIGHT PAGE BOOK The constant valu es used throughout the cede to tra ck interacti on and ~raw th e page flip HEIGHT PAGE Next we need to define a flip object for each page" These will constantly be updated as we interact with the book to reflect the current level 01 progress in the flip.pushl] progress: 1.prsventuefa u:ltO. i++ ) { pagesli]. In the end it is often mo re efficie nt. at jsdo.. a means the dead centre of the book and +1 means the riqht-rnost edge of the book.dragging " true. var book" document. target: 1. function mouseMoveHandler{ event) { II Offset mouse position so that the top of the spine is 0.1 >" ? page . To achieve perspective distortion on images..getE'lementByld{ "book" ). It's worth noting that some browsers do not apply antialiasmq to dipping regions.getElementsByTagName( "section" ). The number of columns used to render this is crucial for performance . actually) will be very jagged.oftsetIop: function mouseDownHandler( event) ( if (Math_abs(mou.ggiflg: false I). length) ( flips[page]. Instead we break the image into columns and scale those individually to achieve a believable perspective simulation. These are used to determine how far the page should currently be folded: -1 means all the way to the left. it's easy to have the mind wander towards overly complicated solutions.book . dra.bcok. i <: flips. Since we can utilise the Canvas API methods for copying the pixels of a source image (drawlmage) and scaling them using a transformation matrix.zlndex -= len . this ends up performing reasonably well even when working with high-resolution image assets.

.dragging II Math. smooth and animated progression of the flip since it updates on every frame... .. PAGE_Y+ CANVAS_PADDING).dragging " false.ma. AI!!IIIl 0.e + 1 : page. The original 0.x( Math. "1I'iiII'l"'.~ .35. -1 ).ength ? pag.proqress )( Math. 0.. -1 to 1 scale rather than actual pixels.ma.style.progress ). var foldGradient " contexl..0.addColorStop(0.. via tran~latel~.prcqress._ . we need to make sure we only redraw the ones that are active. fo'idGradient.. foldX. .addColorStop(0. or if it is flagged as dragg. +" ( flip.9. We also ensure that another page exists in that direction since we might be on the Arst or last page.. II var foldWidth" (PAGE_WIDTH • 0.max( Math. If the flip is being dragged we update its target to match the mouse position but on a.rGradient(foldX .progress + foldWidth.dragging flip.73.. II The maximum width of the left and right side shadows var paper$hadowWidth " ( PAGE_WIDTH * 0. ~ .strokeStyle " 'rgba(0.fii!Style " foldGradient.. context. since that is where we want the page fold to appear. CANVAS_PADDING + ( BOOK_WIDTH 12 ). context.net/february 2011 . This section of the code starts by calculating a number of visual variables that we need to draw the fold in a.--. 0) + "px": if! fIip. contexl..paperShadowWidth. It's time to look at the Arst part of the drawFlip(flip) function.. 0).paqe. '#fafafa').. Strength of the fold is strongest in the middle of the book var strength" 1 .. iff flip."Er·..0 '-1•• -""~pII~ Turning over a new leaf IIippi n 9 0 r being dragged Thi~ ts what the page fold 100k5 like when the page ts by the user In position The point from which we draw the page mp. In mouseDownHandler we start by checking if the mouse was pressed down on either the left or the right page so that we know which direction we want to start flipping towards.0 point is in the top left but by changing that.. /I Width of the folded paper /I The mouseMoveHandler function updates the mouse object so that we are always working towards the most recent cursor location.. realistic manner.Math. The page number is also updated to reflect this navigation. 1 ).prog ress ) • 0. foldGradient.flip.prcqress ) < 0.997 ) ( drawHip( flip ). it will be rendered. The next block of code we are going to cover is inside of the render function.createLinea. 0 ). we need to draw the graphical representation of a flip depending on its current state. 0. '#e2e2e2'). -1 o +1 page" page -t. we simplify the drawing logic -cprev 92 ..translate] Since we are going over all of the flips on every frame. which is called 60 times per second to update and draw the current state of all active flips. foldGradient. This will result in a.x(fotdX. we just have to use the values we have gathered to draw the flip. ) If a flip is not in very close range of the book edge. '#eeeeee'). If a valid flip option is available after these checks.x I PAGE_WIDTH.5 ) • Math. Once we reach the mouseup+la ndler we go through all.targel" flip... The progress value of the flip we are drawing plays a big part here. . We also increment the progress by a fraction of the distance to the target. l ) ) flips[il.min( mouse.abs( fli p.savell: context.abs( flip.addColorStop(l. II How far outside of the book the paper is bent due to perspective var vertica IOutdent " 20 • strength.5) • ( 1 . 1IIpCI.5 )..target . When a. '#fafafa').0.1 < flips .progress J.~-. Now that all of the logic is set up. X position of the folded paper var foldX " PAGE_WIDTH * flip.ing. ~..min( 1 ftip.net/techmque/htm l Calculated approach The proq res sand tarq et va lues of the flips are used to determine where the folding page should be drawn on a "1 to +1 scale..2. ."~ nJiIIIiM~'11 ' .flip.addColorStop(0. foldGradient.flip is released we set its target value to match the side it should flip to depending on the current mouse position. . Now that all of the logic is in place.. This effect is at its peak when a flip is close to the book's spine. of the flips and check if any of them were flagged as dragging and should now be released.O. we set the dragging flag of the corresponding flip object to true. . II Mask the page by setling its width to match the foldX fltp.O.width= Math.Y).06). To add depth to the page flip effect we make the paper extend outside of the top and bottom edges of the book..

animation. A good example of this is that when erasing pixels with the dearRed(x. ~IWft.se.filll]: Antialiasing To allow for sub-pixel drawings. it's very benefidal to dear and redraw only the pixels that have changed and not.ot a giant paper plane thrown slraig.. -vertica'IOutdent . which can be used to apply masks and control layering amongst other things.. beginPath(). JavaScript. especially at high resolutions. Wacom What's the worst injury you've ever sustained? Probably when I g..y] method is used to offset the co-ordinate system so that we can draw our page flip with the top of the spine acting as the 0. the canvas is reset.f-l. context. When you download the files. This is good to know when working with a dynamically sized canvas as you'll notice your drawings disappear every time it is resized.h) method. There's a wide array of available composite modes and when combined they can perform some very powerful tasks.. all browser implementations of canvas employ antialiasinq (although this is not a requirement in the HTMLS spec). . 2.. you might notice that the drawing.net/february 2011 93 .. That's it! You've now got a fully functional page flip navigation in place. Atari..y.. 20 Things I Learned About Browsers and the Web check it out at www20thingsilearned..0 position. ActionScript Clients Google.... What I mean by that is the fewer pixels that need to be processed with each frame. .. One important optimisation rule to follow is to re-use as many pixels as possible between frames..• Site haklm.__. the faster your program will run.com..". PAGE HEIGHT).. Antialiasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. Unlike the Flash Player's redraw regions this management of "dirty regions" needs to be done manually for Canvas_ ~\oIQllLl'J"l'lll'K'''''''''' .~._ Compositing A very powerful tool at hand when working with Canvas is the composite modes «2DContext>..y. context. ~t.. foldX. For example....quadraticCurveTo(foldX.>E'/exgeriments/htmI5/bakemon%l) made possible by the cornpostti ng cepabililies of Can~"s.moveTo(foldX. PAGE_HEIGHT+ verttcaloutdentj: context. 0).._. .s.globaICompositeOperation). performance can be a challenge since bitmap operations are very processing-expensive.w.. foldWidth. When ever the width/hei ght of the ca nva s are set. There you will see how the pag. foldX- Ctearing the canvas To dear the entire canvas of any existing pixels you would normally use the dearRect(x.._.... l .w...... ~ 2).stroketl: context.quadraticCurveTo(foldX. ~IWIIIII!''''''''''''' . 0). .. context... SSC.. We also add a very thin line around the paper drawing so that the paper doesn't disappear when put against light backg rounds" All that remains now is drawing the shape of the folded paper using the properties we defined above..corn... though) .hakim.h) function but there is another option available..e flips can be applied in a real application and how powerful it becomes when paired with other HTMlS features ... The foldGradient is what we will fill the shape of the folded paper with to give it realistic highlights and shadows. the teeth are larger than what you can see-within the mouth to allow for it to open and close Going further This is only one example of what can be accomplished by utilising HTMlS features such as the Canvas element. even if they a re set to the same value repeatedly.restoret]: The Canvas API's translatelx. PA"GE_HEIGHT (verticalOutdent + foldWidth. section of the code has some extra bits in the Java5cript file: those are shadows that were added as further graphical enhancements. 1111_. -verticaloutdent): context.. for instance. .Iinefolfoldx . \2hakimel Expertise Interaction.. context.ht in my eye (wearing an eye patch was pretty cool.. I recommend you have a look at the more refined book experience from which this technique is an excerpt.netltechniquelhtm l Canvas tips TO 20 THINGS Make the most out of the Canvaselement Performance When working with animation on Canvas. context ImeTo(foldX. __ ~~JI!II' . The left and right sides of our paper is drawn as straight lines and the top a nd bottom sides are curved to bring that bent feeling of a folding paper across. a full screen 1920Xl280 sized canvas. Note that we also need to savI"O the current transformation matrix of the Canvas and restcret) to the identity matrix when we are dons. Monster magic W<l S This critter Iwww... Going further The soft page flip in this tutorial paired with other book-ttke features such as an interactive becomes even more hard cover powerful when contexUineWidth " o.... .... rontext. Nintendo.". To work around this you will need to either round up to integer values or offset by half a pixel depending on whether you're drawing fills or strokes..

Three experts show how it's done Iwebsite build-off 'd'BI Mock up the homepage for a workshop. how much the tickets are and what the best way to buy them is. It sh 0 uld get the visitor interested and provide enough information for them to find out what the session is for.net/techmq ue/bui ld off workshop sites Group tutorials are popular learning tools.net/february 2011 . Also let them know when and where it's happening.. 94 . and the web is crucial for publicity.

Colo u rs I knew I wa nted 10ud. and the other on user inte rface tren ds at Pattern Tap [pattergtap. For fun. If it's a Saturday in autumn. vivid sh 0 des. THE MIYABI CENTERINDRLANDO.fm tells me my top four artists are still Radiohead. you have to make it fun and engaging if you want people to show up and have a. as well as the odd home improvement show. Modest Mouse and Cake.• Jason Beaird's month What have I been doing? Having spent most of my career churning out site afte r site for agencies. Diagonal lines invoke a sense of movement and create depth.com/email-jitsu). so I ded ded to use yellow "n d vio let (complementing COIOUT5). but last. you have to prove that you can offer some educational value. Date and Location Along with the wo rksh op na me. grid-based layout. To accomplish this. What have I been Listening to? A mix. th ese details are critical pieces of information for any event I've placed them at the top left and provided prominent ca Ie ndar and direcno ns Iinks. That doesn't mean you have to be boring. so I've treated th e m oni ker Iike th 01 of a head Iine band on a con cert po ster: it's big. Event name I want people to rem ernbe r the title of my wo rksh op and te II th eir frie nds about it. • CaLLto action Now that my visitors are excited ~bo ut the event. paired with black ]he trio re presents th e novice. .. Turn over to see solutions from Sacha Greif and Simon Braun » 95 .2B. I ran with a martial arts theme and a fairly unconventional. asn DIRECllOHS Sites I've visit.king at the email marketing service MailChimp. I'm well aware that most web workers see designing and coding HTMl email as a tedious and difficult task. Wor. I'm enjoying the challenge of shaping UX at MailChimp.. fu n ky an d bold. it's ti me to provide dear encouraqernent. inte rmedi ate a nd expert be It colou rs in th e rna rtta I art.This PDF is designed to take a humorous approach to teaching email design and coding tactics.net/tech niq ue/buildoff Jason Beaird's solution Let's face it. The aim of my design was to make potential attendees feel as though they wouldn't j ust be learni ng skills they need for work if they signed up. com for inspiration.'Email Jitsu' (resources_ mailchimp. My main goal with this fictitious workshop website was to enhance the challenging aspects of the topic to make it more excitinq and less scary. I've been posting lots of photos to lnstaqrarn and collecting Gowalla items and pins. A workshop is an event. No matter what the subject is. AIIof th ese are tree and safe for @tont-face embedding. ADD TU CALfNDAR .IT FeB . If you expect companies to send their employee. but I enjoy watching anything on the Science Channel. The name and general concept for the workshop came from one of my favourite MailChimp guides . Flogging Molly. 10 a workshop.net/february 2011 next> .rom]. They'd also be picking up an ancient art from black-belt email rnarketinq champions. What have I been watching? I'm attempting to avoid wasting time in front of the lV. I'm hoping they'll dick the ye'llow Register button that pops off the black ba ckgrou nd. leagu e Gothic and Helvetica. it's college football. or for freelancers to devote a valuable day to one. Typography I used Gang of Three. Texture This is key to taking the web out of web desiqn. but injecting some humour and a fun theme is sure to stir up buzz and bring in more people .ed I try to keep one eye on unrnatchadstyls. using the idea of an ancient web master from the 1990s. though.good time. while th e pape r ba ckg rou nd: and noise pattern S break up the solid colours.R . The three karate silhouettes are glyphs from a free Ding bat font ca lied Karate Chop. The approach may seem a little goofy for a professional training workshop.

kb:i...c. Althoughgraphica I elements can be eff·ective for conveying your message. Users will quickly get bored and leave your site if they have to think too much about their next move.> . ...:-w. ."" ...lId·t.lIn 10111'1" >!tamp)""""''_ """''''11'''..pl.... But I enjoy watching some TV series.'l • SCIt::!JIl-mm. JI"' . ~ij1~"ftIr 1 UIftfourPfb stn• _. ". .I:Llrp"~l:J..J ~..... • Footer It may only be small.. Wo<Id (Ia_W~P.. ~ 1ltJ. and right now' like Bun B and Big Boi. you don't risk scaring off a big fraction of the audience .jl.j'·~I(t'f""''''''''''''''t"Uj:I.. I'm .nl) to give me some help with the illustration of the Doomsday machine. Notice how the be.r!W~ 'UW'II':'l~III''Lr-. __ " H. ..""--... E-loue (e-Ioue. . so it's better to break that news once the user is already el"lgaged in the buying process. mad geniuses and other James .~~ 'F. .0 arti st Ric..pt."". orlWllllfllf"'ll • _.I..-.com) and Hipmunk (hipmunk....._..t:!I:IIT'~ . The first is a rental marketplace... . What have I been Listening to? Mainly rap.ElJ w_. because you'll often find it's impossible to do everything by yourself.'iiltfftViiUr M . ..i ~...Bond villains who try to conquer the planet only to fail miserably because of a single secret agent.. Icons These offer a really effective way in which to com m u nicate ani d ea. . Also notice that I haven't shown a price.__ .id to use big typo g rephy fa r yo u r ho me page he" d er This ts whe re a ~imple descriptio n 01 wh.~..M .OI1d'"""'~r:m~ _~1L""" • tA.rtta:I1I.! In:Iillbt. com). l~I~:tr':~ ..... being forced to read long paraqraphs.l'"IiW .. __ 1. ~~.I·ID... nJ11 - . The second is a travel stte. _-.. If you want a real challenge..lJl_'"'-""'I!UOl... and: you can tak ." ..~ .s~~...Jf'P1 ut II"qI .~J ~':i'. . Bot h see a lot 01 traffic and h ave pass! onate communities. In this case. Text Inte met user._.'. 1'1'112ild"~~ .. . Doomsday machine As I said.. .. main image.. coding software or even running a startup...t Il f"!.m. advantaqe of it by adding recommendations 10 yow site.netltechniq uelbui ld..\1.. TestimoniaL Social proof is a powerful phenomenon. try conquering the world I (Hopefully it will be apparent by now that this concept isn't to be taken seriously} If there are folks who really need help from a workshop.I .. ~. it's those poor evil scientists. • J!r2':. rdo De Zoete helped me out with the website'.nt. the easier it is to know what the site is about.""" . .. _ _'TI.:.. n. sol asked my friend Ricardo De Zoete (rzdesign. but you should never forget about your site's footer. Sites I've visited The one I visit most for inspiration is Dribbble (dribbble. and feature basic information such as the date and location in a prominent sidebar.I~!~ ..illllmt ~"'~'.-cti ..'L ~fIjDllI""" • i:1'II~:fiip 1 1""Nt1• 1~"" nc~. ~.n.. Don't neglect your text.. such as It's Always Sunny in Philadelphio. I can't draw at all.. Another great source is Web Creme (webcreme. I need to take into a ccou nt existi n g user patterns.' ._ 1:I'.~ . It'....'m. for example.Iot_ . mtiICl.off Sacha Greif's solution Forget about designing websites. a C55 gaUery of gorgeous sites... d-..' terri ble i llustrato r. of course. Take the graphical bullet point....... so it's highly important to 'include a strong call to action in your design.. the better. They don't likJ.net/february 2011 ....1 ~..""... """. ~.-.J'l·IM~".. .. "~.HiI'[T~''''II':1. com).~.to Iill va:. I'.. the most direct way to reach your audience is still with the site's copy.. so aside from doing the best job I can... Tit LeNever be afra.. That way.....• Sacha Greif's month What have I been doing? This month I've been working for two great companies. Workshops can be pretty expensive.. ~)..~~I~It. and I'm helping redesign the site.. ~ great pia ce to put social media Ii nks copyright notices and a repeat of your main naviqation system. "..r[ . I've used here.~..IIL11IJ"*.. work is a good skill to have..0:1 "i 110.at1'll.... What have I been watching? I don't watch many movies because they take too long and distract me lrom work. It means that we allen look to others for quidance on how to behave.1 yo u' re selling should go.-~"I'fIiottIf4'~trftI-'r~~ ·..... -cprev 96 ...IlhD_ I ~1iI"'r:r. Knowing when to use other people'.lI~J"IIIciU'lbD..~ t . it's the orange Register button._ ~ft 'ljtl.. ttu>oboh'. and we're fixing a few problems with the user interlace.nn. have a love/hate relationshtp with copy.ifO frIIn'I"" 00" hll._. but they Co n a lso hel pan ch or text and provi d e structure. . but words are still the most effective w"y for them to learn about something..'Ih&mJ'!f.' tried to answer most qu estions on the workshop through the text. m i" leadi ng th e vi ewer's attention to the Register button....

of visual references to g'aJdening . a progTamlDe of half dJI3' MlJ'kIIhopS around central UJudrm dUlgn. • Simon Braun's month What have I been doing? I've been busy on a number of pitches. The site could also extend to give advice about finding and maintaining an allotment. Online community The site shouldn't just include the workshops and advice. <3 . or recommend shop> stocking quality tools and gardening kit at a discount for workshop attendees. but for someone who was disappointed when the caterpillars chomped their way through most of a crop. when Britain wa s fa d ng ratio ni ng. Thi s enables the user to get quick and' easy access to what's 0 n offer. and I wanted to give a down to earth (no pun intended).. I D:-u. just after World War IL This is reflected in the colour palette and typography. with encouragement from the likes of Hugh Fearn ley-Whi. When coming up with the visual style for the site. • Twitter updates I think Twitter could a 150 be usefully em p loyed to e na b Ie people to contri but" ha n dy hi nts and ti ps. . What have I been listening to? Playi ng th e g uita r opened my ears to many forms of music from around the world. The workshops themselves are held in a number of lccations around the capital.t and vegelabl . Last but not least. Self promotion I wanted to include j Qu e ry ca rou sel to display th e ra nqe at ot he r worksho ps availa ble as dea rly as IX' ssi b le. The styl. grow it. as well as starting concepts lor the new CIPFAsite.. Th ese h ave been u sed for CO II to a cti on butte ns. It also enables them to book online or hook up with other like-minded people through a dedicated Facebookgroup and Twitter feed. no-nonsen se angle. there could be a section devoted to recipes so that visitors can prepare delicious meals from all the lovely stuff they've grown: sow it. b lu es and tra dition a I folk.. To retain participant interest. It gives clear details on the course. Visual elements I chose to use lot. but with the help of Sky+ I've been catching up on The tnbetweeners. com is a great resource for up to minute examples of inn ovative pa ges. prominent signposts for enrolment and information on spede I offe rs and th e cou rse leader.everything from silhouette icons of tools and plants to old. You11 OJWtIr nMdlo blQ' Uuun ag&In. first-time qardeners might want to know about pest control or weather-related: issues.ttingstaIL It all looks so easy on a Cha nnel 4 programme... eat it. it's not that surprising that a: lot of people have developed an enthusiasm for growi ng their own food. I've used muted colo u rs and appropriate typefaces. I've suqqested they join a F~ceboQk group where they can swap notes and stories. MasferCheJ and The Apprentice.e Tne look and atmosphere of the website inte ntio na lIy ha rks back to ~hat post-war period of the 19405. Main event The central par! of tbe page is devoted to the featured workshop. grow yow. professional help has its attractions.own dallcloua. I'm also finishing off designs for a' major new stte we're developing for The Wildlife Trusts.fashio ned woode n pia nt labels.netlfebruary 2011 97 .ed. I was thin king of the graphics that were used th roughout Britain's first austerity period. Book her<e .. and the website is there to market the company and alert people to upcoming sessfons. -~ What have I been watching? With work and music I don't get much time in front of the TV. For ex" m pie. Given the current economic outlook. including rock. Only £22 . and cssline.I.net/tech niq ue/buildoff Simon Braun's solution The Potting Shed is a fictional company deditated to teaching people in tendon how to grow their own produce. About Worlahops Allotments Bh(Jp Rectpos lUE l~lTllH~ SHt:U I U 3---0 Learning how to grow ~ Wertlll. das sicaI. to htlp ytm Sites I've visited There are two I go to more than most: !Mtternt~p.com is a good place to get inspiration lor individual element styles.

the more those things stand out.e helps d~rect th e user fu rth e r. but it's not a primary message for the site. g. Straight away I eliminated a lot of copy. has its place .e and it's unclear what's important. This could form the news and updates that get pulled into the site through the callout I designed. the products feel very luxurious and high end.and others that. Region selector. The designer Name !Rina Miele Company .Really subtle stuff. The site could be informative and useful. Honey Design collection to be featured on the homepag.honeydesign. everything. you weren't sure where to look or even what the site was for. The News 610g-was umnterestmq.iving the page a bit of earthiness otherwise the site could be left feeling far too stark and cold. and typography The site was in a state of di$array all of the elements were compiled in a conglomerate of content on the landing page. Brand dimension Given the new look of the site. It allows the primary message to be conveyed dearly in a beautiful way an dgi ve s a ric he r expe ri en ce despite h avi n g fa r less content. Dalo Jewels an opulence they did n' t have befo re t:he red'esig n. out of date. qui te frankly. The scenes need to be properly lit. which didn't let you focus on the product.net/february 2011 . The fewer things on the page.not a' very refined colour palette. The site is a showcase for selling products. imagine what a professional photographer will be able to do. I didn't want to get too creative as this would muddy up the messaging and the practicality would be lost.. but there's no need for such a large space on the site to be consumed by news. Even without a complete and thorough logo exploration. and transformed the page completely into something much more professional an deleq ant. dressed and adjusted. Some of these had strong. Product photography is the single most important thing on this site. The current site has navigation links all over the pag. simply using a dean modern sans serif font as a' logotype raises the level of elegance and polish. This reflects directly on the brand itse. logo and identity design. The shots weren't suited for the subjeds .th ey lac ked ere ativity an d we ren' t consistent with one another. and more. needs modernising. It's important enough to be on every page. Dalo Jewels features images taken in di fferent setti n g son set ups that. above all. Consequently.. This needs to be easy to find and omnipresent. but aren't overwhelmed with goings-on.. can't skip any of these steps or the photos will look like you took them with your mobile phone. Som e shots we re ta ken on ma nnequins. use rs wi II be enticed by bi g product images. I took shots of jewellery from my own personal collection. There were no defined sections. Having a small callout seems logical.com Areas of expertise Web and UI design.com Site dalojewels_com Site owner Lori and Steve (ranson Brief The owners think that the website needs rncdsrnisinq The site of Dalo Jewels. colouraticn. which sells unique handcrafted jewellery. For this kind of site I thi n k th at.rit. and took up quite a' bit of space on the home page. creating a richer setting for the content. additional navigations. Choosing a single I think a fatal flaw in this site was its product photography. This way the user can always reach for the search. where appropriate. I don't think this is essential to this kind of site. I also used a subtle noise texture to add a hint of g. That's what blogs. You. If I. so I added it to the top of the header. News can live elsewhere.netltechniquelma keover Imakeover 11M. but it was failing to guide the user through the eKperience and keep them interested enough to stay on the site. maroons and a fluorescent cyan . Facebook and Twitter are for The site owners updets their Facebook page regularty. do n' t do th e prod u cts justice. contact. That's wha. or busts or other apparatuses. This would only distract and detract from the products themselves... Subscribing to the "less is more" methodology is precisely what it needed. while helpful and unique. giving.il. There were some things on the page that were completely unnecessary. belonged on subsequent pages. 98 . I kept the style fresh and smooth with rnlrumal styling where appropriate . I pulled out the high level jewellery csteqories for the main naviqation and used complementary points of interest for the secondary naviqation. That way. With all the filters and sorting capabilities out there in the world. so it's best not to add any scphtsticatsd graphical elements/styling. social media links. sometimes users just wa.can achieve such qual-ity.just not all on the Home screen. The original site used bright pinks. using a carefully selected lettsrform really adds to the look and feel of the site. U!Rl www. In terms of typography. The site has to accommodate a lot of products in a range of styles. My design featured solid navigation and subnavigation. press and legal information can be easily accessed in the footer of the page.t I tried to do here. callouts. where to buy. users feel they are constantly getting fresh content with each return visit. New York-based Honey Design creative director Rina Miele comes to the rescue I curated the entry points to what I felt were the most useful and signifkant. the storefront.nt to search. I toned it down a bit by using dark purples with beige accents. This gave the text grace and style. promotions. which is fantasttc. before being retouched. I used a combination of sans serif and serif with a lot of tracking. dalojewels. We have to keep this at the forefront. The Minstrel Script font logo felt very "default" and lacked a great deal of sophistication. I stripped the page to the bare minimum. Design and styling My direction is very dean and clear. Again.

Don't distract the user.. No Iri lis. or possibly up to three items would suffice. A sentence can be added. 6 Hero I feature The left a rea. Th e cu rrent site has fa r too rna ny navigation systems. I simplified this for a more direct approach. They had a "Featured Produ cts" sectio n but th ere was no 9 rand gesture. j u xtsposed with a serif face. so a large. Subseq uently they are able to find other useful sections in the seco nda ry naviga ti on. but the goal is to keep things simple. of th e pa ge contains product photos within a Hnear st-ructure. enticed . Facebook or Twitter feed . huge list of updates on the landing screen. I've chosen to keep this extrern e Iy dean . Upon ro 1I0ver. Tell us about . Either way this could swap out the main larger Hero feature. there was no central focus on any prod u ct 0 r selecti on of p rodu cts. with" deep link to" news archive. I didn't choose to em bellish it wi th button s or dividers and such. You want the user compelled.net/february 2011 99 . fu II bleed irn ag e. The mo re up to date the site feels. leoving the user feeling very indifferent. arrow navi g ati on "I e le me nts appear and allow you to scroll d ownwa rd (on a lou ch d evi ce. I think one. The styli ng is extrern e ly sim pie as well. the more comfortable and enti ced the user will become. news isn't the primary goal. Much like witih the na"ig"lion. The user can in sta ntly see the productts) and in great detail. The updates could be from" blog. detailed product shot co u ld be ea sily seen. On the original site. a swi pe cou ld be the action to view more images).net/techniquelma keover 2010 Natural Selection ( 20lllEWPROOI Natur " Navigation I chose the most important ent ry poin t s based on jewell ery cateq ori es. most rece nt news item cou Id appea r on the paqe. where applicable. lured.I've created that h ere with th e use of a. 111 e user can drill down into what ki n d of jewellery they are looki ng fo r ri 9 ht away. News callout A si ng le. I just set some really clean sans se rf typo 9 ra phy. without even interacting with the paqe.or all of the above. so there's no need to include a.just some nicely set typography in a single ca II to actio n. guide them. Given the nature of the site. no big impact. 0 ne butte n is used to ernphastse that an action should be taken here. fu II screen.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->