Practical advice from Send your questions to [email protected] industry experts

THIS MONTH FEATURING... QUESTION OF THE MONTH SARA SOUEIDAN What are your tips for workflow across Sara is a frontend developer, writer and distributed teams? speaker from Lebanon Madeleine White, Staunton, UK w: sarasoueidan.com t: @SaraSoueidan

JASON LENGSTORF Designer and developer Jason is spending 2015 traveling through Europe w: lengstorf.com t: @jlengstorf

LARA HOGAN Lara is the senior engineering manager of performance at Etsy w: larahogan.me t: @lara_hogan

LUCASZ ZELENZY distributed teams Tools like Trello (above) can help promote clear and effective communication Lukasz is the head of organic acquisition at uSwitch.com JL: In distributed teams, the need for well-defined expectations cannot be w: uswitch.com overstated. Every step left open to interpretation is a potential point of failure. t: @LukaszZelezny For every project, write a thorough scope with clear deliverables – if there’s anything on the list without a clear ‘yes’ or ‘no’ answer to determine if it’s finished, the scope needs further clarification. Create concrete processes (and documentation) for any repeatable tasks. Choose tools the team will actually use – I recommend Trello (trello. com) and Slack (slackhq.com). Most important of all, trust your team to do the job they’ve been given.

SVG animating SVGs with CSS, SMIL or JS canvas QuestiOns is easier than animating Canvas – the SVG or HTml5 canvas? latter requires that you draw every Simon Nolan, Manchester, UK single frame using JavaScript, while SVG ss: It depends on what you are working can additionally be animated using on. SVG has many advantages over declarative syntax (CSS or SMIL). HTML5 Canvas – the most important SVG has an accessible DOM API, many being that SVG content is accessible, authoring and optimisation tools, and – while Canvas content is not. Moreover, of course – is scalable. These advantages

10 april 2015

NET265.exchange.indd 10 2/3/15 11:30 AM Q&As

3 simple steps Should we use CSS, JS or SMIL for animations? Jack Hawkings, Rome, IT

SS: CSS, SMIL and JavaScript each have pros and cons. Weigh them up with your needs to make a decision .... [For an extended answer, visit netm.ag/SS-265]

Incentives The team at Etsy has a ‘Performance Hero’ award to celebrate great site improvements

make SVG the better choice for things same team. It’s kind of a trend now. like infographics, for example, and web You can see the same with SEO and social app user interfaces. HTML5 Canvas is media, for example. When PR is really a great choice for creating interactive focused on high quality content, we SEOs CSS for tranSformatIonS and dynamic bitmap images, generating may help with nuances like search CSS is often great for animations. and exporting raster graphics, editing volume, optimisation and seasonal CSS animations on SVGs perform images, and operations that require demand fluctuation. All of that helps better on mobile than SMIL animations. pixel-based control. PR content to rank better and that’s why, However, not all SVG properties can be whenever possible, PR and SEO should animated via CSS. Performance work closely together. Buy-in incentives What’s your advice on incentivising buy-in WorkfloW of web performance through gamification siLveR BuLLets in a team environment? Do you think agile is the silver bullet Kevin Lozandier, California, US for all workflow problems? LH: We celebrate performance wins Bailey Bradley, Sheffield, UK from other development teams at JL: Unfortunately, there’s no such thing Etsy. We have a wall monitor dedicated as a silver bullet. I’ve seen agile teams SmIL ISn’t future-proof to celebrating a ‘Performance Hero’ implode, and waterfall teams run like The advantage to SMIL animations – someone who has found a great well-oiled machines. The trick is to over JS animations is that they are performance improvement on their find an approach that everyone in your preserved when the SVG is embedded product or feature and improved the site organisation is willing to follow, then as an image. However, SMIL will be substantially. We update this and dole follow it religiously. This is doubly deprecated in favour of the Web out lots of high fives whenever there’s important for management! If the Animations API. a big new win; people respond really process isn’t followed, it’s completely well to the positivity and encouragement. useless. But when everyone works We’ve found that when people see it, together and plays by the same rules, they’re reminded to look for their own teams tend to function wonderfully. performance wins. Seo Seo On tHe way Out PR secRets Will Seo become obsolete? Do you think Seo and Pr are coming a lot Phil Ward, Adelaid, AU JS offerS CreatIve freedom closer together, with great Pr leading to LZ: SEO is at the root of search engines JS makes animating easier if you better rankings? so the concept of it will remain the same. use one of many available SVG James Bavington, Rugby, UK Imagine how a search engine would look animation libraries, and gives you finer LZ: During the last few years, it’s been without organic results – it would just control over timing functions and easing. clear that PR and SEO are playing on the be a classifieds website. A few years

april 2015 11

NET265.exchange.indd 11 2/3/15 11:30 AM exchange Q&As

ago, people were freaking out about voice recognition search, saying it would kill SEO and the way we used to use search engines. The only place I see people using voice recognition is on commercials trying to sell voice recognition. Long live SEO!

Performance Retina ResOLutiOn are double-res images worth their weight? especially if traffic to your site is under 6 per cent retina? Andy Layman, Seattle, US retina resolution Here the size at which the Google logo is displayed is smaller than the size of the logo file LH: Using the new picture spec, you’re able to deliver correctly-sized images Seo them, transform the entire group. If you (including retina) to the right devices, sitemaP sHaRing only need to transform one element in which is a huge performance win as Sitemap submission – yes or no? the group, then do just that. it reduces unnecessary overhead. The Jordan Foord, Sydney, AU question is really: is the development LZ: There is a big ongoing debate about Seo time needed to optimise and deliver the pros and cons, and dos and don’ts suBdOmains those images worth it, if your traffic relating to sitemaps. My answer is – it are subdomains bad practice for Seo? is under 6 per cent retina? Weigh the doesn’t cost anything to generate one Lallo Vigil, Colorado, US development investment against the (especially if you use XML-Sitemaps.com LZ: It’s more about website architecture engagement metric gains from delivering or similar), but it may help your site to than SEO. Take a look at Wikipedia more beautiful images. have one. Remember about the HTML or HubPages. Wikipedia places each version too, as a part of your website. language version on a subdomain, while SVG HubPages – a blogging platform – places cLeaned uP Performance each user on a subdomain. If any user I’d love to know best SVG ‘cleaning Hack HangOveR starts linking to their own blogposts up’ practices – Illustrator and Sketch Will there be a hangover from all our against Google’s TOS, a manual action leave bloat. performance ‘hacks’ once HTTP/2 and will likely be placed on a specific James Rosen, San Francisco, US SPDY is rolled out? subdomain rather than the whole site. ss: Editors do generate a lot of bloat and Justin Avery, London, UK unnecessary code that you can (read: LH: Yes! I wish we could say that one day WorkfloW should) remove before using your SVG. we will be in HTTP/1 land, and a switch emaiL timesaveRs Cleaning up SVG code is recommended will be flipped, and the next day we’ll Is there a way to automate some of the whether you are going to dig into the code be in HTTP/2 land. Unfortunately, there emails I have to write for every project? and style/animate/script the SVG, or you will be a long time in which we have to Louis Castaldo, Florida, US are going to just use the SVG as a static plan for a mix of the two. We’ll have to JL: Absolutely! For personal use, try image on your website. The most popular continue to do things like concatenate TextExpander for Mac (netm.ag/text-265) SVG optimisation tool is SVGO (github. assets for a while. As we creep closer or PhraseExpress for Windows com/svg/svgo). SVGO comes with many to more support, check out: caniuse. (phraseexpress.com). With these you can tools that you can fit into almost any com/#feat=spdy for specific cases. create abbreviations for your frequently workflow – like Grunt and Gulp plugins, used snippets of text. For example, when OS X folder actions and GUIs. SVG I type ‘callme’ it auto-expands to my Note that optimising an SVG using scaLe and ROtate hours and contact info. If you’re working SVGO could change the SVG document What is the best option for scaling and on a team, tools like Zendesk have structure and might eventually affect rotating SVG elements in a group through ‘macros’, which are like TextExpander any scripting and animations you have JS? on the group or each element? snippets with added functionality. Both applied, so choose your optimisations Leif Ringstad, Copenhagen, DK tools allow for variable input where you wisely. If you are only going to use the ss: For JS, SMIL or CSS animations, it can insert the client’s name or other info SVG as a static image, you won’t have depends on whether you want to preserve that changes in each message. Give these anything to worry about – just make the spatial relationships of the elements a try – it should save you thousands of sure the SVG viewBox is preserved. within the group. If you want to preserve keystrokes a day!

12 april 2015

NET265.exchange.indd 12 2/3/15 11:30 AM