netMay 2016的目錄

Knowing that it’s OK to just say ‘No’ for the greater good of the website. #speakup @3fiveInc Jedi mind tricks. @matthamm A thorough understanding of the client’s brand and the provision of an effective solution. @gramatter Repeat the client’s wants and desires back to them during the pitch, while illustrating how you will solve each one. @shumylaj In a crowded market, sell your agency’s beliefs and explain how they align with those of the potential customer. Everyone can bamboozle someone with techology! @lukewillmatt Showing prototypes. @rajrindra It’s all about providing value. If you’re not showing how the site is communicating brand ideas and driving sales, then it won’t work. @cm_vernon PSDs. Clients love them. Lots of PSDs, lots! @danjdavies Be honest about expectations and don’t try to bullshit your way…

What is the best resource for learning how to apply a11y on websites? Anneke Sinnema, Enschede, NL GC: There are a number of helpful resources you should look into. These are some of my favourites. THE A11Y PROJECT + This is one of my favourite resources. It is a collaborative project that strives to make accessibility easier to understand. You can find accessible pattern libraries, plus a checklist that is helpful for beginners. SIMPLY ACCESSIBLE BLOG + Accessibility is not just ticking checklist boxes, so it can be helpful to delve deeper. On this blog (netm.ag/simple-279) there are fantastic articles. Search through the archive for clarification on any confusing topics. WEB AXE + Web Axe (www.webaxe.org) is a regularly updated website and podcast with plenty of resource roundups. Its Twitter…

REVIEW AND REARRANGE @theonico85 says, “review code, and (slowly but surely) move snippets into smaller partials to improve at later date. Test, test, test!” @dalecruse agrees: “Take inventory first. You can’t throw out the garbage until you know what you have.” But @theonico85 reminds us to be careful: “Even just moving CSS around can have adverse effects.” TAKE IT SLOW “Painfully,” says @iandevlin, who warns that a full modernisation takes a serious amount of patience. “Reconsider every code construct and mercilessly kill every one that doesn’t need to be there,” adds @dalecruse. @CHEWX suggests Sassing it up: “Copy and paste from CSS to SCSS and slowly modularise.” @ryannoondesign agrees, and also prescribes “a good SMACSS treatment.” JUST DON’T @LuckychairNews wouldn’t bother. He comments: “Retire legacy code and rewrite!” @LucPestille has…

NINA FREEMAN Game designer www.ninasays.so FLIXEL When I first started making games, some friends introduced me to Flixel – an open source AS3 game library. It’s straightforward and fits my needs as a beginner programmer. It taught me all the basics I needed in order to graduate to languages like C++. www.flixel.com DISNEY TSUM TSUM I travel to a lot of events and my airport time-passer is Disney Tsum Tsum, a simple match three-style game. You swipe to match a row of digital Tsum Tsum plushies. I am shamelessly addicted to these toys, and have a pretty huge collection. netm.ag/tsumtsum-279 GIRLSCAMERA GirlsCamera is an iPhone app for people who like to cover their selfies in adorable stickers. GirlsCamera has a great DIY feature that lets you draw stickers and share…

NOW WHAT? CONFERENCE DATE: 13-14 APRIL 2016 LOCATION: SOUTH DAKOTA, US With top-notch speakers including Facebook’s product UX and content strategist Jonathon Colman, Now What? Conference offers two days of talks and workshops to help you maintain and improve your site. 2016.nowwhatconference.com CONVERGE SE DATE: 13-15 APRIL 2016 LOCATION: SOUTH CAROLINA, US With its vision of a united, thriving web design community, Converge SE has grown into one of the most popular events in the US. Featuring Cards Against Humanity’s Jenn Bane, Adobe’s Bradee Evans and CodePen’s Rachel Smith, this promises to be an inspiring event. www.convergese.com REACT AMSTERDAM DATE: 16 APRIL 2016 LOCATION: AMSTERDAM, NL This conference is “a celebration of three good things coming together: React and spring in Amsterdam”. There are talks from PayPal’s Jamis Charles and…

INFO job: Partner, Filament Group t: @pattytoland w: www.filamentgroup.com For Patty Toland, the top priorities when making a website are accessibility and performance. “Those are far and away the most important pieces, ” she emphasises. “Making sure the site is fault-tolerant, that it works on slow networks and is usable if you have a visual impairment or are using a screen reader – those are essential right out of the gate.” Toland is co-founder of Filament Group, a small agency that was voted Agency of the Year in the 2015 net awards and is known for its dedication to open source and principled stance on building websites. Functional problems, such as an intricate UI or a situation where the complex must be communicated in a clear way, are the team’s niche.…

Personal sites such as blogs or portfolios are a great way to learn more about the people we follow in our industry. We can see them outside of their social media avatar and get a glimpse of their life outside of their work. About pages can easily become an afterthought, but with a little thought you can create well-written and wellpresented, authentic content that matches your personality. When working on an About page, there are a few key things worth considering. First, plan out the content. Share a little about what your life is like outside of work – this is important, yet can easily be overlooked. Share your hobbies and interests, and write as if you were introducing yourself in real life. You could even consider using first person.…

Conferences are a great way to meet like-minded individuals and hear from the leading voices in our community. They’re also a great place to learn new skills. Whether your focus is on design or development, there’s a conference that fits your bill perfectly – you just need to find it. Lanyrd, a social conference directory, helps you to find the conferences that are right for you. Even better, it allows you to make connections with other ticket-holders so you no longer feel like you’re attending an event alone. Sign up and you’ll soon discover a wealth of learning opportunities. We’re blessed with an abundance of web industry conferences. Three that spring to mind are Generate (run by the net magazine team), Smashing Conference and beyond tellerrand. All have built strong,…

Non-disclosure agreements (NDAs) are a contract between a designer and their client that protects information the client deems confidential. They can raise problems when it comes to sharing work in your portfolio. Some designers choose to share their work regardless. This approach will lead to many hiring managers questioning your ability to keep a confidence and concern about your professionalism in general. Just don’t do it. An attractive option is to anonymise any affected work. Be careful if you adopt this approach, particularly if you intend only to remove the name of the client. It is often possible to identify the client by crossreferencing the obfuscated design against information in an accompanying CV. The ideal situation is to avoid signing an NDA in the first place. The best time to…

ABOUT THE AUTHOR DONOVAN HUTCHINSON w: www.hop.ie t: @donovanh job: Frontend designer and developer areas of expertise: CSS animation, web design and development, startups q: what’s the most useless gadget you own? a: A solar-powered Japanese waving cat. It uses a solar panel to charge a tiny battery, which powers an electromagnet to rock the arm. I love it VIDEO Ever wonder how you can bring animation into the workflow of a larger project and keep it consistent? Donovan Hutchinson explains how in this video from Defuse Dublin: netm.ag/defuse-279 Animations can help our user understand our designs. They can also add polish and even make your site feel faster. We can have animations that introduce the page content, or animations that activate when we interact with the UI or when we…

ABOUT THE AUTHOR MARC ANDREW w: themmed.com t: @themmed job: UI designer, author areas of expertise: Visual design, frontend development q: what’s the most useless gadget you own? a: A Beanie hat with built-in earphones. Yes, really Exclusive offer! £10 OFF Get £10 off the Discover Sketch app book at netm.ag/offer-279 with the code NETMAG Offer expires 29 May 2016 VIDEO Marc Andrew has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/zeplinvid-279 Sketch has gained quite a bit of traction and a lot of acclaim over the past few years. It has become the de facto application for the modern-day UI designer, and rightly so. Since Sketch started to make a significant imprint on the digital landscape, many companion apps have sprung up around it that…

ABOUT THE AUTHOR CHRIS PEARCE w: chrispearce.co t: @chrisui job: Frontend engineer, Lystable areas of expertise: JS applications, scalable frontend development q: what’s the most useless gadget you own? a: A Fitbit, for all the exercise I don’t do RESOURCES Take a look at the slides from Christopher Chedeau’s ‘React: CSS-in-JS’ talk, where it all began, at netm. ag/js-278. For a comparison of different CSS-in JS-techniques from Michele Bertoli, go to netm.ag/bertoli-278. Finally, you’ll find an introduction to CSS Modules from Glen Maddern at netm.ag/maddern-278. VERDICT Both solutions require an atomic, component-style architecture to be utilised to their full potential, and really shine at larger scales. They are both pretty new, and under constant iteration by some of the cleverest engineers around. CSS Modules (being a minimal layer on existing CSS)…

HTTP cache headers are used by the hardware between your servers and the user’s browser. These network caches can greatly aid performance and reduce load on your servers. At the BBC, we use Varnish Cache to provide our own HTTP cache as part of our server infrastructure. This is known as a reverse proxy cache. Varnish works much like the browser cache. For files marked as public, it can cache the complete page or parts thereof, and serve them direct to the user. It will serve the files until the maximum specified age of the file is reached. Varnish is very fast and easy to scale. If you need more capacity you can add servers to your Varnish pool. For a high-traffic website, even short caching periods of a few…

CHRISTOPHER MURPHY Christopher is a writer and designer based in Belfast. He’s a passionate educator and from page 68 lays out 10 web skills you should be focusing on w: www.christophermurphy.org t: @fehler IAN FENN Ian is an independent consultant in London, where he helps businesses get UX design done. From page 76 he explains how to create a top UX portfolio w: www.chopstixmedia.com t: @ifenn ALLISON WAGNER Allison is a frontend developer working at Happy Cog and living in Philadelphia. She curates our gallery this issue, from page 44 w: www.alliwagner.com t: @alliwagner DONOVAN HUTCHINSON Donovan is a Dublin-based frontend designer and developer. On page 84 he explains how to create a bank of micro-interactions w: www.hop.ie t: @donovanh…

WEATHER MEN + Side projects are a great way to test out new skills and make your CV look even more impressive. Sometimes, though, they take on a life of their own. This was the case for Jonas Downey and Trevor Turk, who spent two years developing their successful Hello Weather app on the side. netm.ag/helloweather-279 FIGMA FURNITURE + ood design can draw inspiration from some pretty surprising places and the recently launched Figma is a case in point. Having previously studied furniture design at college, Sarah Pease explains how she transferred that discipline’s principles to help create this collaborative interface design tool. netm.ag/furniture-279 BUTTON BOOST + Technology curation site Product Hunt already had a thriving Twitter community, so it was wary of developing a Facebook login platform if there…

What we think (1) Carry the core principles of RWD wherever you go thanks to these notebooks designed for your back pocket (netm.ag/notebook-279). (2) It’s finally here! The Oculus Rift offers an immersive VR experience for tailor-made games and content. But you probably knew that already (netm.ag/oculusrift-279). (3) Rachel Andrew walks through the cutting-edge essentials of CSS Grid Layout in this guide (netm.ag/grid-279). (4) Remind yourself of the web design fundamentals with these posters inspired by vintage propaganda artwork (netm.ag/uxposters-279). (5) In one working week companies of any size can solve problems and move forward. Find out how from three partners at Google Ventures (netm.ag/sprint-279) (6) Inspired by Tomer Sharon’s column (p37)? Discover more about user observation in his book (netm.ag/productideas-279).…

The world of frontend development today is an intimidating one. With so many frameworks and libraries, it can be quite difficult to figure out the best choice. We keep seeing beginners asking the question: Which framework should I learn? The answer is almost always: It depends. You have to pick the right tools that fit the constraints of each project. BIG FRAMEWORKS It can be tempting to go with a full-featured framework that claims to have solved all the hard problems for you. However, it will only be a good choice when you are indeed facing the problems these frameworks are designed to solve. Are you building a fully-fledged singlepage application that requires client-side routing, hundreds of components and multiple teams working on different features in parallel? If the answer…

Sensational design and superb development ALLISON WAGNER Allison is a frontend developer living in Philadelphia and working at renowned studio Happy Cog w: www.alliwagner.com t: @alliwagner The Forecaster is an interactive extension to the documentary of the same name detailing the investigation of financial advisor Martin Armstrong. It’s intended as a research tool for viewers of the documentary, to help them unpick the complex backstory surrounding the controversial figure. “One of the most pressing questions viewers will have is if they should believe Armstrong and his forecasts,” says designer Nico Roicke. “We didn’t want to give a predefined explanation, but all the information that’s needed for them to find their own answer.” Typography is used to express hierarchy as well as delineating different content types. Additionally, content filters help structure the…

“The friendly icons and well-considered animations make this site a joy to browse” YESENIA PEREZ-CRUZ (@YESENIAA ) Parcours Canada is a gorgeous site designed and developed by Montreal’s Locomotive to promote Canadian tourism. Its purpose is to aid and inspire individuals, couples and families alike in the planning of custom trips throughout Canada. There is a lot to love about this site: the art direction is spot on, with meaningful and succinct iconography, a playful colour palette and gorgeous photography. The team has also taken performance and display density into consideration, employing SVGs for all graphical elements. Before starting work, Locomotive researched similar sites. “While studying the competition, we discovered the same tools and mechanisms were used interchangeably from one site to another. But more important, we were amazed that…

MY MONTH What have you been doing this month? Working on two new websites for the Sheldonian Theatre and Examinations School at the University of Oxford. Which sites have you visited for inspiration? www.fornasetti.com and performingarts. withgoogle.com. What have you been watching? Agents of Shield (guilty pleasure) and season five of Breaking Bad. What have you been listening to? Mostly ‘Magic Dance’ in honour of the late, great goblin king himself, David Bowie. The site has been designed for a large metropolitan theatre and venue space with lots of different performances, shows and events on a rolling basis. The challenge I set myself was how to balance the needs of the theatre with lots of ‘stuff’ to sell, with the needs of the user who wants to find out what’s…

@mikebusby INFO Location: Toronto, Canada Designing since: 2007 Areas of expertise: Creative direction, product design and development Worked with: adidas, Ford, Notable.ca, BitGold, GoldMoney In the digital world, the way we trade currency is evolving rapidly. Recent startup BitGold allows you to pay and save in “the century’s best performing currency”: gold bullion. In January 2015, busy co-running an agency and with a lifelong interest in economics, Mike Busby was offered the role of BitGold’s chief designer. He jumped at the chance, and led the company to remarkable success – it is now used in over 100 companies around the world. We got the low-down on his creative process. net: What drew you to BitGold? MB: I have always been interested in finance and economics, so when the opportunity came…

There is plenty of conflicting advice online about UX portfolio design. Here are some of the wiser posts. 10 Tips for a Better UX Portfolio netm.ag/moser-279 An excellent selection of tips from hiring manager Craig Moser. Avoid these 5 things when building your design portfolio netm.ag/schneider-279 Tobias van Schneider covers key annoyances often found with webbased portfolios. Never trust a skinny chef netm.ag/stockwell-279 Amanda Stockwell explains how a spreadsheet helps her design her UX portfolio. How to wow me with your UX research portfolio netm.ag/travis-279 David Travis with advice for user experience researchers. Designing a UX Portfolio lobsterbook.com The website of my upcoming book, containing further wise resources.…

ABOUT THE AUTHOR JODIE DOUBLEDAY w: www.holidayextras.co.uk t: @jodiedoubleday job: UI architect, Hungry Geek areas of expertise: CSS, beer q: what’s the most useless gadget you own? a: I bought a camera to check up on my new puppy at home. It just means I can now watch my dog chew my mail remotely We often start our CSS clean, simple and with good intentions, but as teams grow and we continue to deploy our code, it’s usually the style sheets that suffer. Developers scroll to the bottom of a CSS file, adding in their new bits as they go, with blatant disregard to the structure or rules that have gone before. I thought I was the only person who was tired of seeing relatively simple websites with 3,000-plus lines of…

ABOUT THE AUTHOR SHEHZAD AZRAM w: bitbucket.org/shez1983 t: @Cohaesus job: Web developer, Cohaesus areas of expertise: Backend development, PHP, Python q: what’s the most useless gadget you own? a: Electronic bubble wrap (it was a gift). No one can resist the temptation of bubble wrap! READING For a really great breakdown on how to style with SVGs, take a look at this article from Jakob Jenkov: netm.ag/jenkov-279 Things have come a long way from the days when we used plain images as icons. Yet there are still a number of accessibility issues when it comes to icons. Thankfully, SVGs could go a long way towards addressing this problem. In this article, I’ll take you through the different icon options we have used in the past, then explore the benefits (and drawbacks)…

CONTACT US @netmag /netmag +netmagazine netmag@futurenet.com net.creativebloq.com LAYOUT WOES Do we ditch Bootstrap 4 and go with flexbox, or use both for adaptability? Can they be combined? Gregory Danelian, Edinburgh, UK net: Here’s what Zoe Mickley Gillenwater had to say: “Good news – Bootstrap 4 actually includes flexbox as a layout option! To use it, go to _variables.scss and set $enable-flex to true . The full details are at netm.ag/flex-279. It’s also possible to add flexbox on top of older versions of Bootstrap, as flexbox automatically overrides most other layout CSS in browsers that support it. Adding flexbox as a progressive enhancement will get you easy vertical centring and equal-height columns, and blocks that are more responsive in size to their content.” “Your website is a manifestation of your organisation’s…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... HEATHER BURNS Heather is a web designer and digital law specialist based in Scotland* w: www.webdevlaw.uk t: @webdevlaw HEYDON PICKERING Heydon is a freelance web accessibility consultant, interface designer and writer w: www.heydonworks.com t: @heydonworks SCOTT JEHL Scott is a designer and developer working at Filament Group w: www.scottjehl.com t: @scottjehl GERI COADY Geri is a colour-obsessed illustrator and web designer based in North America w: www.hellogeri.com t: @hellogeri * Heather Burns is not a lawyer, and her answers pertain to UK law QUESTION OF THE MONTH Do you use any ‘offline’ tools for illustration? Sara Soueidan, Lebanon GC: My illustration process is exactly the same as my web design workflow – I always sketch on paper first. Even the roughest of sketches gives me a…

By day, I’m a self-employed designer and marketing consultant who helps clients establish and build visual identities to meet their marketing goals. I love helping clients create a visual identity to use throughout all of their marketing and branding collateral. Working as a designer and marketing consultant means I spend a lot of time on the computer – more than I’m willing to admit. While I love what I do for a living, so long in front of a screen can be stressful and taxing. Feeling unmotivated and on the verge of burnout drove me to find another creative outlet that would pull me away from the computer when my work was done for the day. I’ve loved candles since before I can remember, so making my own seemed to…

Zero UI has been sometimes misinterpreted as meaning getting rid of the interface entirely. What it actually refers to is a process where many of the visual interfaces we currently spend so much time with recede into the background, leaving us open to engage with the stuff that is important and useful to us. It is analogous to inbox zero, where we strive to achieve a blissful state in which everything is dealt with, calm and invisible. If that is possible, of course. I started my career as an interaction designer in 1994, although it wasn’t called interaction design then. My job title was probably ‘graphic designer’ , and since then I have been labelled a UX designer, experience designer and service designer. What we can deduce from these titles…

STEVEN FABRE Founder, Easee www.stevenfabre.com Generally speaking I like to use the Chrome Inspect Element tools, which are getting better every day. Instead of typing everything manually or doing the back-and-forth from cubic-bezier.com to your text editor, you can now change the animation’s speed and easing with a slider and visual cubic-beizer graph editor. Once I’m happy with the timing and easing of the animation, I like to enable paint flashing to identify and fix elements that may potentially make the animation jerky. DUDLEY STOREY Designer and developer www.thenewcode.com First, I avoid typos by writing CSS animations in Sass, using either CodePen or CodeKit – both of which flag syntax errors. If I am stuck with an unexpected result, I work backwards: one simple check is to set my CSS…

This month ... THEATRES PROFILES YUNMIE KIM Yunmie is a senior designer currently working at UX agency cxpartners w: www.cxpartners.co.uk t: @yunmie JEMMA PROCTOR Jemma is the founder and managing director of One Ltd w: www.oneltd.co.uk t: @oneltd KEV HOYLE Kev is the owner and designer of Lancashire-based agency Iced w: www.icedgraphics.com t: @icedgraphics BRIEF We’d like you to design a website for a theatre. It could be a huge theatre in the West End or a smaller, independent venue dedicated to uncovering local talent and grassroots acts. Users need to be able to see what’s on quickly, and book tickets easily.…

What’s on your desktop? Two Thunderbolt Displays, 15" MacBook Pro, 12" MacBook, business cards, a wicked pyramid sculpture, a glass of champagne and a sketchbook. Little things that make your life worthwhile: Websites: StumbleUpon, Medium, Dribbble Music: EDM, metal, drum and bass Podcasts: ShopTalk, Design Details, 99% Invisible What do you have on the walls? I just moved into a new apartment, so the walls are a blank canvas. What will you do for lunch? It’s winter here in Toronto, so I try my best to bring lunch to work. What hours do you work? I usually start around 8am and finish around 6pm, although the ideal time for me to work is actually 7pm until 2am. Unfortunately, I don’t get to work those hours that often. What else do…

To prepare yourself for the future, three areas I think worth focusing on are motion design, augmented reality and discursive UI. Motion has the ability to inject character and personality into interfaces, as well as offering affordances in terms of screen real estate. As a result we’ve seen a rise in animation that is now migrating to the web. I believe animation is going to be an increasingly important tool in any product designer’s toolbox, and one that designers need to start adopting now, before they get left behind. Augmented reality is certainly not new, but with the nearing release of HoloLens, 2016 is going to be the year that it hits the mainstream. In the early stages, these augmented experiences will most likely be created by game designers. However,…

Ian (@ifenn) is an independent consultant in London, where he helps businesses get UX design done. He’s the author of the upcoming book Designing a UX Portfolio For any UX designer looking for work, a portfolio is practically mandatory these days. Apple, Google, IBM, and Adobe are among the many companies that insist job candidates submit a UX portfolio along with their CV. Hiring managers will review both documents, but typically only those with a decent portfolio will be invited to interview. In this article, I’ll run through some tips for pulling together a portfolio your prospective employers can’t ignore. TELLING YOUR STORY Over the past four years, I’ve spoken with several hundred hiring managers and recruiters from across the globe. What they see from candidates most often is portfolios…

BROWSER SUPPORT We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported. EXCLUSIVE VIDEOS Look out for the video icon throughout our tutorials. This issue, Marc Andrew has created an exclusive screencast to complement his article on Zeplin: take a look to see how Sketch and Zeplin can be used in tandem to enable communication and bridge the gap between design and development teams.…

+ There are great sources of inspiration online if you’re getting started with your own CSS animation library. Some you can simply include in your project and start straight away, or you might want to use them to create something custom for your brand or project. If you need more inspiration, you can also find lots of CSS and JavaScript animation examples on CodePen. Animate.css daneden.github.io/animate.css This is a solid starting point, containing a massive list of classes you can apply to elements. Simply reference the CSS file, and when you add classes to an element, the animation happens. This works best when adding or removing classes using JavaScript. Motion UI zurb.com/playground/motion-ui This Sass library from ZURB makes it easier to apply custom animations to your UI. It’s a little…

Download a free chapter of CSS Secrets by Lea Verou at oreilly.com/go/netmag2016 In the past years, CSS has undergone a transformation from being a simple styling language with limited power, to a complex technology with its own developer ecosystem, conferences, frameworks, and tooling. CSS has grown so much that it’s practically impossible for any single person to hold all of it in their brain. As a CSS user, you know that the challenge today is not to memorize all of CSS’s features, but to use its features in a creative way to come up with DRY (Don’t Repeat Yourself), maintainable, flexible, lightweight, and as much as possible, standards-compliant solutions. That’s exactly what CSS Secrets is all about. Popular speaker and author Lea Verou aims to open your mind to new…

+ Font icons on their own are not really accessible in older (and some newer) browsers. In particular, mobile browsers such as Opera Mini and Blackberry do not support @font-face . With these browsers serving millions of users worldwide, it is imperative we address the issues if we are to use font icons. If your site is already in production or you support older browsers, it may not be wise to switch to SVG icons yet. Also, it does take some time to get accustomed to a change in your workflow. In the meantime you can use the following techniques to make sure your font-based icons are accessible and render properly in problematic browsers. Most popular libraries use :before or :after CSS to include icons. However, screen readers will try…

ABOUT THE AUTHOR JAMIE KNIGHT w: www.jkg3.com t: @jamieknight job: Senior accessibility specialist, BBC areas of expertise: Accessibility, performance, HTML, CSS q: what’s the most useless gadget you own? a: A Three-branded Skype phone I keep as a ‘spare’. It’s a terrible phone but works reasonably well as a hammer or a doorstop RESOURCE This is a great discussion of different approaches to caching, with pragmatic advice on when and how to use different techniques: netm.ag/basics-279 Last year during a user testing session for the BBC News app, one of the users made a comment that has really stuck with me. They declared: “I like to flow”. I don’t think there’s a better summary of what performance means to our users. On a fast app or website, the user can flow…

ABOUT THE AUTHOR CRAIG SULLIVAN t: @OptimiseOrDie job: Optimiser of everything, Optimal Visit Ltd areas of expertise: Analytics, UX, split testing q: what’s the most useless gadget you own? a: A videophone featuring a (gasp) 1200/75 modem and keyboard, with CRT monitor. It’s like something from a 60s Bond film! RESOURCE If you want to use Google Analytics to optimise your device experiences, this article gives a complete stepby-step guide to mining the data profitably: netm.ag/mining-279 I started messing around with HTTP log files and user agent strings over 15 years ago, analysing and attempting to understand all the different devices rocking up at the early John Lewis ecommerce websites. What advice would I give myself, if I could go back in time? It would be this: Every website or…

+ There are some excellent tools and techniques for getting feedback on your product. You want focus? Immerse yourself in customer feedback. Lab in a laptop With the right software, you can turn your laptop into a mobile usability lab that captures video, audio and faces. Here are some options for this: • CamStudio (www.camstudio.org) – Basic but free • Camtasia (www.techsmith.com/camtasia.html) – Good for the price • Snagit (www.techsmith.com/snagit.html) – Brilliant despite some limitations • Silverback (Mac) (www.silverbackapp.com) – Widely used • Techsmith Morae (netm.ag/morae-279) – Pricey but excellent Recording mobiles and tablets Whilst I love usability rigs where you put your device under a camera and lights, it just never feels natural. Plus, it doesn’t work in a pub! So, some clever solutions here to mirror a device…