Page 1

THE WORLD’S BEST-SELLING MAGAZINE FOR WEB DESIGNERS issue 213 april 2011 www.netmagazine.com

Boost SEOwith microdata

issue

213

Get to the top of Google with this hands-on HTML5 tutorial

The designer’s guide to Tumblr > We reveal how to simplify your blog, design pro themes, and much more!

FREE VIDEO DISC! 8 MUST-SEE LESSONS

Master responsive web design TODAY!

Plus > How to survive a conference Build a 3D carousel with CSS3 Load your scripts conditionally Make an iPad app with Sencha Wales on Wikipedia turning 10

Discover how to create amazing sites on a shoestring with our step-by-step guide

Issue 213 april 2011

> 15 ways to make great sites for less!

£5.99


.net content

Feed 14

Make great sites for less 44 iPad/build an app 86

Pro’s guide to Tumblr 56

Build-off: Museum sites 96

Gallery 64

“Traffic has shot up like crazy” David Karp, Tumblr Interview, page 40

4

.net april 2011

Profile/Centresource 72


.net content

.net content Make sites for less

Get the tutorial files! All the code and assets you need to follow this month’s tutorials can be found here:

44

carousel www.netmag.co.uk/tut/ css-213.zip

with Sencha Touch www.netmag.co.uk/tut/ ipad-213.zip

52

conditionally

l Postion:fixed on iOS

and Android

Make great sites for less

56

www.netmag.co.uk/tut/ mobile-213.zip

The designer’s guide to Tumblr

Jonathan Moore explains how to get the best out of the popular platform and create an amazing looking blog

regulars > 110 111 112

7

Welcome

8

Contributors

and SMEs

10

Inbox

importance of redesigns

14

Feed

hosting for ecommerce

20

106

UK/overseas subscriptions US/Canada subscriptions Expert advice

129

Next issue

Web Pro

Search Domain names Opinion Web designers

Marketing The

114

Hosting The right

115

Security Beware of

116

Ecommerce Why are

online scams

retailers so hesitant to launch a Facebook shop?

76

78

CSS/build a rotating carousel

Explore CSS3’s new 3D features and create a 3D carousel that rotates. Paul Hayes takes you through the project

82

Microdata/make pages findable

You may be familiar with using microformats to make web pages more findable. HTML5 adds another technique – microdata. Stephen Fulljames walks us through it

86

How to survive a web conference

It’s time for the web’s best and brightest to come out and play. Gary Marshall discovers how to survive the conference season

l jQuery/load scripts

www.netmag.co.uk/tut/ jquery-213.zip

Interview

Tumblr’s founder and CEO David Karp talks to Oliver Lindberg about the recent outages, its rivalry with WordPress and why it’s such a hit in the fashion world

During spells of economic uncertainty, cost-effectiveness is key for web designers and agencies. Craig Grannell explains how to keep costs down while ensuring you have a full toolset

l CSS/build a rotating

l iPad/build an app

technique >

articles > 40

issue 213/april 2011

iPad/build an app with Sencha Touch

Create a web app that feels native on the iPad and other mobile devices, using the Sencha Touch library. Robert Douglas of ribot leads the way

91

92

100

102

64

72

74

Gallery

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

Profile

Centresource is an agency that likes to give back. Leading members chat to Tom May about working in Nashville, winning awards and avoiding narcissism

Focus_on

Fixed-position navigation executed with care can add a subtle sense of joy, says Matthew Smith

Opinion

The latest code of practice from the British Standards Institution is a firm basis for improving accessibility, says Peter Abrahams of Fix the Web

jQuery/load scripts conditionally

yepnope is a compact wrapper around the LABjs script-loader that lets you load only the scripts users need. Addy Osmani explains how to use it

96

showcase >

Website build-off

Special subscriptions offer! > Turn to page 20 (or page 76 for ) US and Canada

This month, museum sites

Makeover

We ask Juanma Teixidó to redesign the site of the Southbank Sinfonia

How we built

Karl Westin and Aristides Lourenço talk us through the creation of the Ben the Bodyguard promo site

.net april 2011

5


.net feed/reviews

2

Latest gear this month Tempting tech and geeky gadgets 1

3 1

2

Kindle 3

Joby Gorilla Mobile

4 3

Samsung ST100 camera

4

HP Photosmart eStation

PRICE £152 (£111 for Wi-Fi only)

PRICE £35 for iPhone 4

PRICE £225

PRICE £355

www.amazon.co.uk/kindle

www.joby.com

www.samsung.com/uk

www.hp.com

The latest version of the Kindle is a joy to behold. The casing is smaller, but the screen remains the same size at six inches. It embodies new Pearl E Ink technology, which improves the contrast and makes it readable in sunlight. The battery lasts up to a month, access to the 3G network is free and there is a built-in dictionary.

Position your phone or camera anywhere and get a steady shot with this super bendy tripod. It will sit on a flat or sloped surface, or you can hook it around something. The Joby holds your phone by means of a clip-on case, and there’s an adapter clip for use with a camera. It’s also available for other phone models.

Clever Samsung has put a 1.8-inch screen on the other side of this camera so you can look at yourself when taking self-portraits. It’s also good for getting kids to look at the camera. There’s a 14.2MP sensor, 5x inner optical zoom and 3.5-inch rear LCD, and it shoots 1280x720 video using H.264. It also offers face recognition.

The concept here is a strange one: a seven-inch tablet and a printer combined. The Android-based Zeen tablet can browse the web and enables you to print documents remotely – but bear in mind you’re paying more than £200 for this capability. It’s a great printer, but you can get one without the tablet for just over £100.

Verdict You may find the keypad and menus slightly clunky, but the screen and case are wonderful and it’s a great price.

Verdict The Gorilla is portable, fun to use, and enables you to get shake-free shots in places where an ordinary tripod would struggle.

Verdict The extra screen is useful, but you are paying quite a bit extra for it. That said, this is a dinky, nicelooking camera.

Verdict The Zeen tablet is massively expensive, slow, unresponsive and often can’t tell the different between a tap and a swipe.

<prev

28

.net april 2010


7

5

8

6

5

Kindle lighted leather cover

6

LEGO Wii Remote

7

3DConnexion mouse

8

Asus Eee PC 1215N

PRICE £50.99

PRICE £35

PRICE £99

PRICE £459.99

www.amazon.co.uk

www.firebox.com

www.3dconnexion.com

eeepc.asus.com

The Kindle has special holes to fit the hooks of this cover, which protects it and makes it more like a book. The outside is finished with a hard pebble-grain leather, which isn’t as attractive as you might hope, and inside is charcoal felt. The handy light pulls out of the top corner of the cover and is powered by your Kindle’s battery.

Sometimes we wish that more things were made of LEGO, and this Wii controller gives you a chance to add a touch of knobbly coloured plastic to another aspect of life. There are 31 coloured tiles with which to customise your controller, and there’s even a tiny spanner to tweak off any bricks you change your mind about.

If you use any kind of 3D application, even if it’s just Google Earth, you’ll enjoy this superb controller. Instead of using your mouse to rotate 3D objects or navigate between buildings, you hold the SpaceNavigator in your other hand and use the joystick to spin, pan and tilt. There’s a learning curve, but it’s worth it.

With its 12-inch display and 1.5kg of heftiness, this netbook isn’t really a netbook: it’s only a bit smaller than an average laptop. The native resolution is 1366x768, it’s great at playing HD and there’s an HDMI port for hooking it up to your TV. There’s 2GB of memory, dual core Atom processor and Nvidia Ion graphics.

Verdict The felt interior is very pleasant and the cover overall is nice and hard, but the leather finish could be better.

Verdict Great fun – although it could be LEGOier. There’s no space to stick bricks to the sides, and only a bit of room on the back.

Verdict Using a mouse in both hands makes you look and feel like a hardcore power-user, and it gives a very fine degree of control.

Verdict This pricey notebook makes an awkward compromise between spec and portability, but the design is quite attractive.

.net april 2010 29


.net shoestring_design

44

.net april 2011


.net shoestring_design

15 ways tomake great sites for less Website design is complex and time consuming, but during spells of economic uncertainty, cost-effectiveness is key. Learn how to keep costs down while ensuring you have a full toolset

Words Craig Grannell is a web designer and writer. Check out his creations at snubcommunications.com Image Simon Middleweek is a designer and illustrator with more than 10 years’ experience in editorial design. @simonmiddleweek.

There isn’t a single economic authority who’s suggesting that 2011’s going to be a great year from a financial standpoint. While governments and industries continue battling the fallout from the banking crisis, major economies are perpetually teetering on the brink of recession. Profit warnings are commonplace and throughout every field of business, budgets are therefore strained, squeezing what’s available for online work. Web designers and developers are certainly not immune to the crunch. Taxes and costs are rising, but many can expect to have to work harder to maintain income levels, and resources may be stretched across the board. We aim to help. We’ve broken down the website-creation process into 15 bite-size stages, including initial

planning and content strategy, design, coding, testing, feedback, delivery and maintenance. We’ve also asked a number of experienced designers and developers in the field to recommend free or affordable tools, services and resources they think can best help you to simultaneously save money and make your working life easier. Naturally, there’s some crossover between some of the stages of site creation, and so some tools make multiple appearances. Also, one person’s ‘shoestring budget’ is another’s extravagance, but we’ve attempted to focus on products that are recognised within the industry as great value for money. Nonetheless, if we’ve missed your favourite little-known inexpensive tool that you think .net’s readers should know about, write to us at netmag@futurenet.com and let us know.

.net april 2011

45

next>


.net shoestring_design

1 PLANNING PRODUCTS FOR LESS When designing on a shoestring, the need for careful planning and time-tracking is of the utmost importance. Here are some cheap and free tools that can help

You need to carefully plan your time when working to a tight budget. Joel Morgan, graphic designer at centresource (centresource.com), recommends mind-mapping app Mindnode (mindnode.com, iOS and Mac) for sorting initial ideas. A single user licence is $19.99, but Freemind (freemind.sourceforge.net) is a free alternative. To organise thoughts into task lists, Remember the Milk (rememberthemilk.com) provides free online to-dos with reminders, sharing and location functionality. In broadly similar territory is Doris (beta. dorisapp.com, free online, £1.19 for iOS) and for simpler online to-do lists there’s Ta-da List (tadalist.com) and WorkFlowy (workflowy.com), which user experience designer Sjors

Timmer (svirsk.org) says “stands out through its simple, flexible design”. For development work, Linked by Air partner Dan Michaelson (linkedbyair. net) recommends Pivotal Tracker, (pivotaltracker.com, free), which he says “is iterative, focused on ‘releases’ and lets you prioritise tasks”. For time-tracking, Dan Fields, director of interactive production for BKWLD (bkwld.com), recommends Harvest (getharvest.com), also useful for expenses and invoicing. Designer Anthony Calzadilla (anthonycalzadilla. com) considers toggl (www.toggl. com) the best bet. There’s a free plan, but for $5 per month you get access to Basecamp, iCal and RSS integration, reports and the ability to track earnings. There’s no contract, so you needn’t pay every month.

2 COMPETITIVE TOOLS FOR PROJECT MANAGEMENT Project management tools can be extremely costly, but there are bargains to be had out there if you know where to look. Good news: these guys do

Robust project-management is a must for collaborative work, or even relatively complex solo jobs. Basecamp from 37signals is a firm favourite with many designers. Alec East, founder of THBOOM! (thboom.com), says it “scales as you need it and there’s no contract”. Its emphasis on communication and collaboration makes the $49 per month fee seem reasonable, but if money’s tight, there’s a basic plan (15 projects, 5GB

Camp classic Basecamp is a firm industry favourite for project management, and there’s a free (albeit limited) version

<prev

46

.net april 2011

storage) for $24 per month and a free plan (one project, no file-sharing). Glasscubes (glasscubes.com) also offers a free-for-life basic option (two workspaces, unlimited users) as does Huddle (huddle.com, one workspace). Jocelyn Kirby, head of marketing for Metakinetic (metakinetic. com) considers Milestone Planner (milestoneplanner.com) a good alternative to Basecamp, saying its relatively low cost of £120 per year gets you a “highly intuitive, intelligent

Above Remember the Milk provides a free online means of managing your tasks, with optional reminders via various services Left Toggl offers a free trial for its timetracking system, and paid accounts start at a reasonable $5 per month

project management tool created with agencies in mind”. Dan Fields suggests you consider the codeoriented Codebase (codebasehq.com, from £5 per month), which combines project management with Git, Mercurial and Subversion hosting. If paying is a deal-breaker, then Travis Roberts, developer for centresource (centresource.com), recommends Redmine (redmine. org), which has “great version control integration”. Fields adds that Google

Docs (docs.google.com) can also be a “great cure for everything – have Gmail host your email, and use Documents and Spreadsheets to manage resources”. He feels the suite is “unparalleled in terms of the feature-to-cost ratio, because the cost is zero”. Mister creative director Mike Sullivan (studiomister.com) suggests adding Evernote (evernote.com) to the mix: it’s free and it enables you to collect, store and access information from just about everywhere.

“Google Docs is unparalleled in terms of the feature-tocost ratio”

Dan Fields, BKWLD

Feature-rich It’s not the prettiest project management system in the world, but Redmine is free and quite feature-rich so you can’t really complain


3 INEXPENSIVE TOOLS FOR CONTENT STRATEGY Affordable applications and handy web articles can help you create content strategy deliverables without breaking the bank

You shouldn’t think of site content purely in terms of management, hence the current move in the industry towards ensuring content strategy is a defined part of the website-creation process. This area of production concentrates heavily on research, the structure of content and how content scenarios can be validated. There’s crossover with project management and wireframing, and some tools covered in the later feedback and SEO sections are relevant – for finding out more about your audience and what potential visitors might search for. Google Docs (docs.google.com) is the recommended free tool of choice

for everything else. Content strategist and copywriter Relly Annett-Baker (supernicestudio.com) has created several simple templates for content strategy deliverables using Google Spreadsheet. However, for collecting larger volumes of written material and tacking research clips to it, she recommends buying Scrivener (literatureandlatte.com, $45 for Mac and imminent for Windows). You can also get a headstart by creating templates based on content strategies from luminaries such as Leen Jones (leenjones.com/2008/08/what-iscontent-strategy-part-ii-examples) and Erin Kissane (alistapart.com/articles/ content-templates-to-the-rescue).

Research aid For collecting large volumes of written material and integrating

Getting personal Get up to speed quickly when it comes to persona formatting by checking out examples on the Fluid Project wiki

4 LOW-COST RESOURCES FOR PERSONA CREATION It’s important to know who’ll be using your site before you forge ahead with content and design, and free or cheap tools can help you out When working on persona creation, you need facilities for carrying out tasks such as recording interviews, compiling and interpreting results, and formatting and presenting defined personas. For recording, any free audio recorder should be suitable when doing interviews in person (such as QuickTime Player for Mac or Voice Memos for iOS), but a checklist in a text document may be sufficient. Richard Caddick, managing director of cxpartners

(cxpartners.co.uk), recommends Java-based Freemind (freemind. sourceforge.net) for mind maps, while Google Docs (docs.google. com) should be sufficient for formatting results as straightforward biographies in Document. Free online resources can save you further time. The Fluid Project wiki provides useful tips on both creation (netm.ag/e449iy) and formatting (netm.ag/dR4zyX) and LUXr offers a ‘persona cheat sheet’ for download at netm.ag/eFjB88.

research (websites, images, texts etc), Scrivener is the ideal port of call

5 AFFORDABLE ONLINE AND OFFLINE WIREFRAMING If you covet Adobe Illustrator or Fireworks for wireframing, realise that there are better, more affordable alternatives out there

With web designers and developers increasingly understanding the value and importance in quickfire prototyping regarding a site’s structure and architecture, robust wireframing tools are key. The cheapest is pencil and paper, wryly recommended by Nikolas Head, tech lead for We Love (welove72.com). He says nothing beats it for rapidly getting layout and functionality ideas down, enabling fast iterative wireframing. For the next step – sharing and updating – getting online is the

best bet. Google Docs now includes Drawing, which is free and offers sharing, and Morten Just has created useful templates to speed things along (netm.ag/hiRBW2). SlickPlan (slickplan.com) is also handy for creating site maps and flow charts. For more emphasis on interactivity, try Mockingbird (gomockingbird.com, from $9 per month for two active projects), Jumpchart (jumpchart. com, free for a single 10-page project, then from $5 per month) and HotGloo (hotgloo.com, from $7 per month for one project).

In the frame Mockingbird is a great online tool for rapidly creating wireframes. Its fees are low and there’s a save-disabled free version for good measure On the desktop, things are pricier, with OmniGraffle (£59.99, Mac OS X) and Balsamiq Mockups ($79, requires Adobe AIR) being firm favourites, despite the latter’s penchant for Comic Sans. However, bargains also exist, including open source vector

editor Inkscape (Mac and Windows builds from inkscape.org), Apple Keynote (£11.99 from the Mac App Store) and iMockups for iPad (£5.99), which UX designer Aral Balkan (geekninjafactory.com) considers a “pure joy”.

.net january april 2011 2010 .net

47

next>


.net tumblr

56

.net april 2011


.net tumblr

Looking for a blogging service that’s a cinch to set up, fits a designer’s busy lifestyle and is hugely versatile? Jonathan Moore presents the pro’s guide to Tumblr, with tips on using themes, harnessing the community and integrating with mobile

Words Jonathan Moore (@newezra) is founder of @stylehatch and New Ezra, a digital culture agency jonathanmoore.com Image ilovedust is a studio providing creative solutions for print and web ilovedust.com

How many times have you said, “This is the year I’m finally going to start a blog”? Like many, you begin the lengthy and difficult process of designing a site for the most difficult client – yourself – only to watch it move onto the back burner every time real, paying clients get in the way. Once you finally nail down the design, the process of building and developing your blog begins. After weeks (or months), it’s finally time to hit the launch button. Somewhere between your fourth and fifth insightful and brilliant post it hits you … keeping this blog up to date is going to take an enormous amount of work. Personally, I’ve found myself trapped in that exact cycle more than once over the years. In early 2009 I came to the realisation that I needed to rethink exactly what I was trying to accomplish with a personal blog. The idea of writing lengthy blog posts a few times a week sounds amazing, but for me it simply wasn’t

realistic. I was already tweeting, but what I really needed was the ability to share just a bit more with short, direct and to-the-point posts. My search for simplicity led me directly to Tumblr. On 6 April 2009 I signed up for an account and started posting. Using Tumblr’s Theme Garden, I picked a basic theme that I knew I could live with while I gave Tumblr a test drive. The simplicity of the platform also meant that I didn’t have to worry about installing blogging software on my server. I put all my effort into curating content on design, culture, technology and business along with my personal thoughts and opinions. Almost two years later I’ve managed to stick with blogging on Tumblr with close to 600 posts: an average of 0.85 posts a day. Today I’ve come to realise that the simplicity is what’s helped me to stay consistent with posting,

.net april 2011 57

next>


.net showcase gallery

highlights… 65

Mobile > Brilliant on-the-go experiences from Nissan, Visua Design and Creuna

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

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

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

64

.net april 2011

66

CSS > BankSimple, Typekit and Brizk show off their seamless CSS usage

Jenn Lukas CSS Jenn loves structural semantic markup and CSS and is the interactive development director at Happy Cog (happycog.com). She also blogs about development at The Nerdary (thenerdary.net). jennlukas.com

67

HTML5 is employed to great effect by Nike, Agent 008 Ball and Sounds Good

68

JavaScript > Cloud-based code editor Cloud9 IDE and micropayments service Tip The Web make good use of JavaScript, while EaselJS aids devs

Rey Bango JavaScript Rey is a JavaScript, HTML and CSS evangelist for Microsoft. In addition, he is the director of community for the jQuery JavaScript project, writer for Ajaxian. com, and editor of ScriptJunkie.com, a resource for web development articles. blog.reybango.com

HTML5 >

69

Plug-ins > Good uses of Flash by We Dance to the Beat, Ifly and Diesel’s underwear campaign

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

70

CMS > Sites built on the TradingEye, ExpressionEngine and Drupal platforms


.net showcase gallery

gallery Mobile

1

Nick Francis

Creuna

(4) Creuna (creuna.com) is a full-service digital agency with multiple offices across Scandinavia. Its site has some really cool design touches when viewed on mobile. I love how the logo continually transitions into different designs every five seconds or so. I also really like the contact navigation and how it pops out on every page. The main links expand and contract when touched, which is successful because it doesn’t require a page refresh and shows the user lots of additional content. I’d love to see it work like an accordion, closing the other sections when one is opened, but it still works well as it is. Creuna mobile concept developer Simon Kibsgård is clearly passionate about mobile. “We are true believers in the concept of ‘mobile first’,” he says, “and use Creuna.com Mobile to both showcase some desirable touch-based interaction and to experiment with the design and features for new versions of Creuna.com on more platforms.” The agency has even developed software that simplifies device detection for your website and integrates with any .NET CMS. This can be found at mobiledetect.creuna.com.

2

Mobile site of the month

Nissan

(1-2) The Nissan UK mobile site (m.nissan.co.uk) has an innovative, touch-friendly design. It’s easy to scroll through available vehicles by type, look at product photos and find the nearest store. The homepage features a slider, enabling you to scroll through the types of vehicles by using the arrows or sliding your finger across the screen in either direction. After selecting a type, you can scroll through the different models and view specifics, including videos and available colours. All in all, the site is wonderfully done. My only problem with it is speed. Browsing the site over 3G simply isn’t fast enough, as every click is followed by a five- to seven-second delay while the content loads. If Nissan can find a way to optimise the size of this otherwise stunning design, it should be quite successful.

Visua Design

3

(3) Visua Design (iphone.visuadesign.com) is the digital playground of UK-based designer, developer and photographer CJ Spencer. He made the decision to scale back for his mobile site, showcasing only his portfolio and linking to the full site for everything else. “Originally it displayed Twitter feeds, blog posts and a map, but it evolved to become simpler. Keeping things simple is the key,” explains Spencer. The jQTouch framework was a great fit, he adds: “It enabled me to apply several transitions that mimic iOS. It also enabled me to add features such as a loading screen and a home screen icon.” My only suggestion would be to redirect visuadesign.com automatically to the iPhone version of the site upon detecting a mobile WebKitenabled device. Otherwise, it’s an outstanding mobile designer site.

4

“It evolved to become something simpler. Keeping things simple is the key” CJ Spencer

.net april 2011 65

next>


Theworldâ&#x20AC;&#x2122;sgreatestgadgetmagazine, whereverandwheneveryouwant.

Availableinprint,online, onmobileandiPad

www.t3.com The latest issue of T3 magazine is available now at iTunes, Zinio or at all good newsagents.


.net technique

technique Projects and advice for web builders

(below) iPad/build an app with Sencha Touch p86 Robert Douglas – “We’ll make

use of Sencha’s data stores and proxies so updating is dead simple”

(above) Build-off/museum sites p96 Dan Jukes –

“I tried to look for a simple yet cost-effective solution”

tutorials > 78

CSS/build a rotating 3D carousel

Explore CSS3’s new 3D features and create a 3D carousel that rotates from panel to panel. Paul Hayes takes you through the project

82

Microdata/make your pages findable

You may be familiar with using microformats to make web pages more findable. HTML5 adds another technique – microdata. Stephen Fulljames walks us through it

86

iPad/build an app with Sencha Touch

Create a web app that feels native on the iPad and other mobile devices, using the Sencha Touch library. Robert Douglas of ribot leads the way

92

jQuery/load scripts conditionally

yepnope is a compact wrapper around the LABjs script-loader that lets you only load the scripts users need. Addy Osmani explains how to use it

(above) How we built/benthebodyguard.com p102 Aristides Lourenço – “We built the prototype in one-

and-a-half days, then spent two months polishing”

articles > 91

96

Opinion

The latest code of practice from the British Standards Institution is a firm basis for improving accessibility, says Peter Abrahams of Fix the Web

Website build-off

(above) Opinion/Fixing the web p91 Peter Abrahams – “The new standard is essential for anyone creating web products”

This month, museum sites

100

Makeover

102

How we built

We ask Juanma Teixidó to redesign the site of the Southbank Sinfonia

Karl Westin and Aristides Lourenço talk us through the creation of the Ben the Bodyguard promo site

.net april 2011

77


.net technique css

CSS build a rotating 3D carousel Download the files! >

Explore CSS3’s new 3D features and create a 3D carousel that rotates from panel to panel. Paul Hayes takes you through the project

need All the files you can be found at .uk/ www.netmag.co tut/css-213.zip

Knowledge needed HTML, advanced CSS, basic JavaScript Requires Modernizr, jQuery, Safari browser (not Chrome, for now) Project time 1 hour By now we’ve all played with CSS3’s rounded corners, gradients and drop shadows, but these only touch the surface of what’s now possible. CSS transforms, transitions and animations take our beloved HTML elements and contort, tween and mutate them. What was once dogged scripting and glitchy animation is now smooth, hardware accelerated and easy. And whilst purists aren’t happy about using CSS for behavioural declarations, everything just got a whole lot simpler. There are two sets of CSS transforms, the widely supported 2D ones (w3. org/TR/css3-2d-transforms, working draft) and the more advanced and exciting 3D versions (w3.org/TR/css3-3d-transforms, working draft), which have a hardware acceleration bonus and which we’ll be using in our carousel. Currently, only Safari browsers will render these correctly (since April 2009 no less). Chrome support is coming soon and early work has started at Mozilla. Fingers crossed for 2D transforms in IE9, but 3D won’t happen for a long while yet. Importantly, iOS devices (iPhone, iPad and iPod touch) support hardwareaccelerated 3D transforms beautifully. Based on browser support, and for brevity, only WebKit-compatible CSS will be used in this tutorial. We’re going to create a six-panel rotating carousel, and to keep things simple we’ll make it a fixed width. Let’s start with a basic HTML5 outline. We’ll put all our CSS in carousel.css and JavaScript in carousel.js. We’re also using Modernizr (modernizr.com) to detect 3D transform capabilities (as well as for the HTML5 shim) and jQuery. When 3D transforms are supported, Modernizr will add a class csstransforms3d to the HTML tag, which we can use in our CSS. <!DOCTYPE html> <html> <head> ...

60 degrees apart Oh dear, that’s not quite right. The panels are rotated but they’re sitting on top of each other. We need to spread them out

<link rel="stylesheet" type="text/css" href="css/carousel.css" /> <script src="js/modernizr-1.6.min.js"></script> </head> <body> ... <script src="js/jquery-1.4.4.min.js"></script> <script src="js/carousel.js"></script> </body> </html> For our carousel we’ll use a list, with each list item being a panel. To navigate the carousel there are previous and next links that will hook into some JavaScript: <div id="carousel"> <div class="container"> <ul class="panels"> <li> <div> <h2>Panel title</h2> <p>...</p> </div> </li> ... (6 panels total) </ul> </div> </div> <nav>

Starting point Our styled carousel and panel before we apply any 3D transforms

78

.net april 2011

<ul> <li><a href="#prev">&laquo; Previous</a></li> <li><a href="#next">Next&raquo;</a></li> </ul> </nav>


.net technique css

Transitions and transforms

Transforms rotate, scale, translate and skew elements. Transitions define a behaviour for moving from one state to another (www.w3.org/TR/css3transitions). And animations use keyframes to change multiple properties over a time period (www.w3.org/TR/css3-animations).

Transitions

transition: <property> <duration> <timing-function> <delay> Example: When the opacity changes (eg, on hover from 0.5 to 1, or back again), transition from one value to the next linearly, over 50ms: -webkit-transition: opacity 50ms linear; -moz-transition: opacity 50ms linear;

Transforms

transform: <transform function> [<transform function>]*

Calculate radius Our six panels are connected in a circle. We can calculate the radius

A number of transform functions are available to you, the most useful being:

Before we delve into the 3D realm we should have some basic styles set up, so the carousel looks roughly like we might expect. The carousel has a black background, and a fancy radial gradient (from dark grey to black); it’s centred with a light border. The background will only show through when the panels are animating. We’ll need to add overflow:hidden to this later so the element acts like a window, but while building it’s helpful to see everything:

Scale: scaleX(), scaleY(), scaleZ(), shorthand: scale(x,y), scale3d(x,y,z)

of the circle using trigonometry

#carousel { width: 580px; height: 300px; background: #000; background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(70,70,70)), color-stop(0.57, rgb(0,0,0))); margin: 0 auto; border: 1px solid #ccc; } The containers are absolutely positioned, with a slightly larger width (600px) so we can space out the panels a little and make them more visually appealing during animations: #carousel .container { width: 600px; } #carousel .panels, #carousel .panels > li { width: 600px; display: block; position: absolute; } #carousel .container, #carousel .panels > li { height: 300px; } And finally come our panels: 580px total width, the same size as the carousel, but with a little padding, gradient and text-shadow to prettify it. During development, making this panel slightly transparent can help solve bugs and illustrate 3D structures more clearly: #carousel .panels > li > div { background: #fff; background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(255,255,255)), color-stop(0.57, rgb(230,230,230))); height: 260px; width: 540px;

Rotate: rotateX(), rotateY(), rotateZ(), shorthand: rotate(x,y), rotate3d(x,y,z) Skew: skewX(), skewY(), shorthand: skew(x,y) Translate: translateX(), translateY(), translateZ(), shorthand: translate(x,y), translate3d(x,y,z) Examples: -webkit-transform: rotateX(-10deg) rotateY(20deg); -webkit-transform: translateX(10px) rotate3d(20deg, 20deg, 5deg);

padding: 20px; text-shadow: 0 1px 0 #fff; }

3D needs perspective

To begin our 3D adventure we need to give our carousel some perspective. It’s a one-liner with a hefty explanation: .csstransforms3d #carousel { -webkit-perspective: 800; } Here’s the science part. In three dimensions we have three planes, x, y and z. x and y run left to right and top to bottom respectively. The z-plane runs from front to back, perpendicular to x and y. The perspective value defines the distance of the z=0 plane from the viewer, which affects the magnitude of the 3D effect. With a low number the z=0 plane is very close, and small changes have a big effect. Imagine standing beneath a skyscraper and looking straight up: you’re small and the object is huge. With a high number, the z=0 plane is far away and changes are more subtle – it’s the same skyscraper, but this time you’re flying way above and looking down. A perspective around the 800 to 1,000 mark feels natural. By default, the perspective’s origin, ie its vanishing point, is centred – this suits us fine, but it can be altered if necessary: -webkit-perspective-origin: 50% 50%; The perspective applies to all the child elements, and the element with perspective becomes a containing block. This may sound

.net april 2011

79

next>


.net technique ipad

iPad build an app with Sencha Touch

Download the files! >

need All the files you can be found at .uk/ www.netmag.co p tut/ipad-213.zi

Create a web app that feels native on the iPad and other mobile devices, using the Sencha Touch library. Robert Douglas of mobile design specialists ribot (ribot.co.uk) explains how Knowledge needed CSS, HTML, intermediate JavaScript Requires Sencha Touch framework, Chrome or Safari (and an iPad if you’ve got one handy) Project time One day Sencha Touch is a cross-platform library aimed at next generation, touch-enabled devices. That means we can use all those years of front-end experience to build native-feeling web apps on iOS and Android devices. Plus they’ll run just lovely on your desktop WebKit-based browsers, Chrome and Safari. You can get the most recent build at sencha.com/products/touch/download. php. The documentation, examples and community are superb so get them bookmarked. The API docs are at dev.sencha.com/deploy/touch/docs/. So what makes it so special? Well, the folks behind Sencha (based on ExtJS) have done all the hard work for us and created a rich and extremely powerful set of tools with which to design and control your app. Features include: 1. Solid layout components including headers, menubars, popovers, panels and carousels 2. Custom events, built for mobile, including tap, double-tap, swipe and pinch 3. Hardware-accelerated transitions 4. An incredible data-powered templating system This means you can easily create app-like layouts that have all the transitions and interactions users expect on their mobile device, with screens that update easily from your data source. You’ll see over the course of this tutorial that with basically no HTML, a smattering of CSS, and a couple of hundred lines of

JavaScript (including comments) we can create something quite impressive for your iPad. C’est cool, non? We’re going to create an iPad app that pulls in the latest (or random) videos from Vimeo’s lovely ‘Staff Picks’ channel and enables users to swipe through these pages of videos in a carousel and tap to watch their favourite ones in a popover. In the background we’ll make use of Sencha’s data stores and proxies so updating is dead simple. And, finally, we’ll store data locally, so we can save the state. Let’s get started...

Setting up the HTML

This couldn’t be simpler. We start with an empty <body> tag, add JavaScript and CSS files for Sencha Touch and OAuth to the <head>, and then finally our own JavaScript and CSS application files. Let’s take a look: <!DOCTYPE html> <html> <head> <title>Just One More</title> <link rel="stylesheet" href="resources/css/sencha-touch.css"/> <link rel="stylesheet" href="resources/css/jom.css"/> <script src="src/js/sencha-touch.js"></script> <script src="src/js/oauth/sha1.js"></script> <script src="src/js/oauth/oauth.js"></script> <script src="src/js/jom.js"></script> </head> <body></body> </html> Now we’re ready to start on our main application file. Sencha Touch fires an onReady event once it’s finished setting up the page for touch events and the like. We simply add our code within this onReady event. Ext.setup({ tabletStartupScreen: 'Default-Landscape.png', icon: 'appIcon256.png', glossOnIcon: false, onReady: function() { // Our code will go here... }; }); So, after setting a couple self-explanatory variables for our application, we can start building up our code. First we’ll define the model and store for our data, then create the views, and finally whip up some Ajax to power it all.

Models, stores and proxies

Our app The ‘Just One More’ app pulls in the latest (or random) videos from Vimeo’s ‘Staff Picks’ channel and enables users to swipe through them in a carousel

86

.net april 2011

Let’s define some terms. Models describe the information we keep for an object (in our case, videos). We retrieve our data via a proxy, which converts the individual data items into model instances. These instances are then kept in a store, which populates our views.


.net technique ipad Expert tip Testing on your desktop The lovely thing about using web technologies to develop apps is that you can test as you go, right in your browser. Sencha Touch is built for WebKit browsers so just open the index.html file in Chrome or Safari and you’re away. Open the Web Inspector and have a hunt around the HTML that Sencha creates (this is quite verbose) and drop breakpoints into jom.js to see what calls are being made and what’s being returned. Much easier debugging on your iPad, trust me!

load: { fn: function(store, records, index) { handleVideosLoadedFromLocalStorage(store, records, index); } }, clear: { fn: function(store, records) { handleVideosRemovedFromStore(store, records); } }

Handy library Sencha Touch is a cross-platform library aimed at next-gen, touch-

enabled devices: get the most recent build at sencha.com/products/touch/download.php

First, we describe our model, providing the fields and methods a video should have: // Set up the model that will be kept in our Store Ext.regModel('Video', { fields: [ 'id', 'available', 'description', 'height', 'thumbnail_medium', 'thumbnail_large', 'title', 'url', 'username', 'width', 'watched' ], markAsWatched: function() { var videoId = this.data.id; if (!isVideoWatched(videoId)) { localStorage.watched += videoId + ','; } this.set('watched', 'watched'); this.store.sync(); } }); The fields are straightforward; we’ll get these directly from the Vimeo API. We do add two extra fields: available, with which we can tell users which videos have mobile versions (and so are available on the iPad), and watched, to keep track of which they’ve watched. The store and proxy are a little more complex. // Our JSON Store which uses a proxy tied to localstorage var videoStore = new Ext.data.JsonStore({ storeId: 'videos', proxy: { id: 'video', model: 'Video', type: 'localstorage', reader: { type: 'json', root: 'video' } }, listeners: { add: { fn: function(store, records, index) { handleVideosAddedToStore(store, records, index); } },

} }); We give the store an id and define its proxy, which acts as a bridge between our data source and our store: 1. type: localStorage: this means that data will be synced with the device’s HTML5 local storage 2. model: videos: this is the model we defined earlier and is what the proxy will create instances of 3. reader – this specifies what kind of data the proxy is expecting and the root within a JSON object. We then attach listeners for when data is added to the store (from our Ajax call), when data is loaded into the store (from localStorage through our proxy), and for when we clear the store. Each of these listener functions just calls updateCarousel, which we’ll get to soon. Models, stores, proxies and readers are the trickiest to come to terms with, so it’s worth reading up on the different options in the API documentation. But that’s the model side of things defined. Let’s move on to layout components. If we were to lay out our app in simple pseudo-code it would look like this: <wrapper> <header> <logo> <menu> </header> <carousel> <page1> <page2> <page3> <page4> </carousel> </wrapper> I like to work from the inside out, so we’ll create the four pages (numberOfPages below) for our carousel and keep them in an array we can access later: // Create pages for the carousel var pages = []; for (var i=0; i<numberOfPages; i++) { pages.push(new Ext.Component({ id: 'page'+i, cls: 'page', tpl: [ '<tpl for=".">', '<div id="summary{data.id}" class="summary {data. watched} {data.available}">',

.net april 2011

87

next>

.net Preview  

.net Preview (Issue 213

Read more
Read more
Similar to
Popular now
Just for you