netの September 2016 の目次

Flash? And no one was an ‘expert’ yet. We were all still trying to figure this web thing out together. @IanMacDowell The wild west feel of MySpace profiles being pimped up to the Nth. @ajd    &n bsp;  &nbs p;    @MarmaaDuk Richer animations! It’s so hard for illustrators and animators to contribute to this space now. @rachelnabors Not having to understand 23 technologies, on top of design, to get something live. @LucPestille There were less rules. We did not fill in boring standardised UX grids. We created custom artistic layouts & emotional environments. @shanemielke No frameworks, no build tools, just a text editor, some browsers and core languages. @mattFrankJames I miss clients who wanted something new and interesting, not something the same as everyone else but with more pop. @bingojackson Hit counters!…

Lawrence Agyei, Chicago, US JW: The best way to get started is by jumping right into it and working on relevant side-projects. Your first 10 designs and websites are going to be pretty bad. And that’s OK. Get them out of the way as soon as possible. DESIGN + Develop your design eye, your ability to identify and critique good design. Spend time looking at the objects and structures around you. Notice their colour, shape, and function – and their design. FRONTEND + For frontend development, start by reading through the HTML and CSS tutorials on Mozilla Developer Network. If you’re more of a hands-on learner, check out Codecademy’s interactive tutorials. PUTTING IT TOGETHER + Frontend development’s beauty is that you can master it in conjunction with design. Find a…

PERSONALITY COUNTS The right candidate isn’t just someone who does their job well, they’re also someone you can bear to sit next to all day. With this in mind, @cole007 recommends a pub interview, and @wez simply cautions: “Don’t hire assholes.” @alexispratsides suggests splitting the interview process in two, with a company-fit interview first, and if that goes well, a second interview focusing on skills. SOFT SKILLS Talent or a super-sharp mind can only get you so far; certain soft skills are required for a hire to become a good member of your team. “First and foremost, I look at attitude and passion,” says @felise. “Lack of those two are more detrimental than any lack of skill or experience.” @halfnibble advises that you ask them to show you the work…

BRENDA STORER Designer and frontend developer brendastorer.com SVGO The time to use SVGs is here! But programs like Illustrator and Sketch still add clutter and hidden elements to files. SVGO is a Node.js-based tool that optimises SVGs through the terminal command line and can decrease SVG files by over 50 per cent. github.com/svg/svgo BOURBON AND BITTERS For projects where I use Sass as a CSS preprocessor, I add Bourbon with Bitters. Bourbon is a lightweight Sass library of mixins; Bitters complements it with base style sheets and variables ready to be customised to the design of your application. bourbon.io / bitters.bourbon.io ASTRUM Astrum is a pattern library I use to create style guides of reusable components for larger projects with many contributing devs. I like it because it’s JS-based and…

WEB SUMMER CAMP DATE: 31 AUGUST-3 SEPTEMBER 2016 LOCATION: ROVINJ, HR PHP gets a shakedown in this four-day hands-on event, which also focuses on the eZ Publish CMS as well as sessions on web design, UX and content. www.2016.websummercamp.com FROM THE FRONT DATE: 15-16 SEPTEMBER 2016 LOCATION: BOLOGNA, IT Subtitled ‘The frontend guide to Life, the Universe and Everything’, this takes place in one of Bologna’s oldest theatres. www.2016.fromthefront.it DESIGN MATTERS DATE: 28-29 SEPTEMBER 2016 LOCATION: COPENHAGEN, DK The theme at this year’s Design Matters is the ‘relaxed, friendly, joyful’ attitude emerging in apps and websites. Speakers include Slack’s Brandon Velestuk and BuzzFeed’s John Niedermeyer. www.designmatters16.dk WEB UNLEASHED 2016 DATE: 3-4 OCTOBER 2016 LOCATION: TORONTO, CA A 50-strong lineup that promises to bring attendees bang up to date with frontend…

INFO job: Head of communication, Netlife Research w: www.idaaa.no t: @idaaa By her own admission, Ida Aalen is a very impatient person. “If I see something that doesn’t work, I get an urgent need to fix it, ” she laughs. “It’s almost a problem. When I see tourists on the street holding their map upside down, I have to go over and help them.” It’s hardly surprising, then, to learn that Aalen is a champion for user testing, both in her day job as senior UX designer at Oslo-based digital design agency Netlife Research, and in the wider web community. “Some problems are more messy and complex than others, ” she explains. “Strategy is a way of digging into what the problem really is – what is it that we really…

Freelancing tools are great to help with admin and the day-to-day running of your business. But what about actually attracting clients and getting paid in the first place? Here are a few insightful resources, ranging from courses to books, to help you get started. The Creative Class www.creativeclass.io A great course by Paul Jarvis for those looking to take a deep dive into business, marketing and sales for freelancers. Learn about pricing, positioning, the importance of process, exposure and more. I’d recommend this course to anyone new to freelancing. Pay me or Else www.thenuschool.com/pay-me-or-else Written by Lior Frenkel, Pay Me or Else teaches you how to avoid clients who don’t pay. The book contains bonus advice from 14 other freelancers, and best of all, it’s free. Start your Freelance Career…

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 for the video icon throughout our tutorials. This issue, three authors have created screencasts to go with their pieces: Daniel Zen makes an app with Angular 2, David Berner uses the Shadow DOM to craft components, and Gareth Wilson introduces HyperDev. Plus, turn the page for 22 more free screencasts!…

ABOUT THE AUTHOR PETER NOWELL w: www.pnowell.com t: @pnowelldesign job: Designer areas of expertise: Sketch, SVG, UI/UX q: which city has the best web community? a: The best community is online; live where you love Exclusive offer! 20% off Sketch Master To save 20% on all Peter Nowell Sketch courses, visit sketchmaster.com/net284 Expires 30 Sept 2016 RESOURCE These lessons have been taken straight out of Peter Nowell’s upcoming Sketch Master course, Advanced Typography in Sketch, which dives into Sketch’s advanced textlayout and hidden font features www.sketchmaster.com As designers and developers, we know that great typography is more than just choosing a pleasant font. But what are the practical techniques we can use to take our text to the next level? And how do we execute those techniques in a design tool…

+ Because full cross-browser support for Shadow DOM isn’t quite there yet, we have some awesome polyfills to aid us: • webcomponentsjs (netm.ag/polyfill-283): A suite of polyfills supporting the Web Components specs • X-Tag (x-tag.github.io): A Microsoft-supported, open source JavaScript library • Polymer (www.polymer-project.org): Created by the smart guys at Google, this is more of a platform than a straight-up polyfill Here are some useful articles on Web Components, the Shadow DOM and using it today: • Introducing slot-based Shadow DOM API (netm.ag/slot-284) • The state of Web Components (netm.ag/hacks-284) • Slots proposal (netm.ag/proposal-284) • How you can use responsive Web Components today (netm.ag/today-284): Disclaimer – I wrote this one! Finally, there are the official specs. These aren’t always the easiest to read, but they’re a great way to find…

CONTACT US To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “In 15 years of web development I’ve used countless numbers of hosting providers. Catalyst2 have surpassed all others in terms of support, server performance and ease of use. I wouldn’t hesitate to recommend them.” Eliot Webb, Director, Nordic Creative Limited EXPERT TIP SERVER TIP... When looking at managed dedicated servers, check that everything you need is covered within the price. Do they include all security updates, monitoring, offsite backups, UK-based support, hardware and software firewalls and migration to the server as standard? Catalyst2 managed hosting Catalyst2 is an award-winning managed web hosting and fully managed dedicated server provider based in the UK, specialising in Linux and Windows web hosting. Catalyst2 offers a unique solution…

FEMKE VAN SCHOONHOVEN Femke is a digital designer, lover of side projects, and co-host of the Design Life podcast. From page 68 she explores 20 great new tools for freelancers. w: www.theapartment.co t: @femkesvs JEN SIMMONS Jen is a designer and developer advocate at Mozilla, and the host of The Web Ahead. From page 76 she busts six layouts myths and invites you to break away from old habits. w: www.jensimmons.com t: @jensimmons LEAH BULEY Leah is a veteran of experience design and author of the book The User Experience Team of One. On page 28 she assesses the state of UX in 2016. w: www.leahbuley.com t: @leahbuley PETER NOWELL Peter is a San Francisco-based designer of apps, websites, brand IDs, and more. He reveals three typographic techniques for Sketch from page 96.…

THE FUTURE OF THE WEB + A sizeable brouhaha has erupted between people who believe that JavaScript is the way forward for the web, and others who are concerned that a web that doesn’t work without it will have negative consequences for accessibility. In this post Matt Griffin lays out the argument and considers how we can make things work for everyone. alistapart.com/article/thefuture-of-the-web THE MYTH OF THE ‘REAL JAVASCRIPT DEVELOPER’ + What makes you a ‘real’ developer? In this talk Brenna O’Brien, a frontend engineer at TED, discusses how as an industry we should work to reduce the intimidating level of cultural pressure to know absolutely everything. netm.ag/realdev-284 ARGUMENTS AND PARAMETERS IN ECMASCRIPT 6 + The latest version of ECMAScript has made significant improvements to parameter handling in JavaScript. In…

What we think…

Opinions, thoughts & advice Think of the quandary: You’re an established public service broadcaster with significant digital real estate, and product teams delivering and maintaining a backlog of requirements. How do you seek to move past those product team innovations, and push bigger changes that look beyond the here and now? Step in Connected Studio (www.bbc.co.uk/connectedstudio), a partnership between BBC R&D and Marketing & Audiences that has enabled the organisation to navigate the tricky waters of idea generation. Since its launch in 2012, the team has worked with the creative industry to help the BBC advance its innovation thinking through building and testing new concepts. PITCHING The process starts by the Connected Studio team highlighting where the challenges are: those steps that will advance a particular area of the BBC,…

Active Theory www.activetheory.net Sensational design and superb development Dan is an ex-graphic designer who fell in love with code. He is now senior frontend developer at Viget w: code.viget.com t: @dantello5 Before things got started at Google I/O 2016, up on the screens was a web app the crowd could play with. Attendees could fold a sheet of paper into a paper plane and then launch it into a virtual sky by making a throwing motion with their phone. At this point, the phone became a net, and they could motion to grab someone else’s plane out of the air. When the plane unfolded, it revealed geolocation-based stamps left by other plane catchers, as well as the opportunity to leave a new one. At the time of writing, the experience hadn’t…

The Zone team talk through the sketches, wireframes and plans leading up to the final design…

Once we start making websites with CSS Grid, it’s likely we’ll assume we should code layouts the same way we do now: specify a fixed number of columns, place each item in a particular track, and alter the placements at different viewports using media queries. But CSS Grid can do things that no current framework can do. It’s much smarter and can figure out things on its own. Here’s an example using a common layout: a flexible, fluid grid of rectangles (you can see this example at netm.ag/spice-284). It’s easier to accomplish this with Flexbox than floats, but Flexbox is still a bit of a hack. You still have to use media queries and specify content widths. CSS Grid is the right tool for this job. And it only takes…

Over 5 hours of tutorials RESPONSIVE WEB DESIGN RESPONSIVE DESIGN FOR ENTERPRISE SITES netm.ag/RWDvid-282 CREATE A GRID THAT ADAPTS TO ALL SCREENS netm.ag/gridvid-281 RESPONSIVE UX DESIGN WITH ILLUSTRATOR netm.ag/AIUXvid-278 FLEXIBLE LAYOUTS WITH SUSY AND BREAKPOINT netm.ag/susyvid-274 CSS BUILD INTERACTIVE EMAILS WITH CSS netm.ag/emailvid-281 REVEAL & HIDE A MENU WITH CSS ANIMATIONS netm.ag/animatevid-281 USE CSS BLEND MODES FOR DRAMATIC EFFECTS netm.ag/blendvid-278 CREATE A PYRAMID LAYOUT WITH CSS netm.ag/CSSvid-277 ANIMATION AND DATA VISUALISATIONS CUSTOM ANIMATIONS WITH MOTIONUI netm.ag/foundationvid-276 CREATE A BRANDED LOADING ANIMATION netm.ag/gifvid-274 DATA VISUALISATIONS WITH LEAFLET.JS netm.ag/mapsvid-276 DATA DASHBOARD WITH ANGULARJS netm.ag/angularvid-274 SKETCH FILL YOUR SKETCH DESIGNS WITH DATA netm.ag/sketchvid-282 COLLABORATE WITH SKETCH AND ZEPLIN netm.ag/zeplinvid-279 CREATE A CONSISTENT ICON SET IN SKETCH netm.ag/sketchvid-274 CUSTOMISE SKETCH WITH PLUGINS netm.ag/pluginvid-273 MATERIAL DESIGN CREATE A FLOATING ACTION BUTTON netm.ag/pixatevid-281 BUILD A SITE…

ABOUT THE AUTHOR BEN GREMILLION w: www.uxpin.com t: @ux_benjamin job: Content designer, UXPin areas of expertise: UI design, HTML5, CSS3, Photoshop q: which city has the best web community? a: New York! It has one of the highest concentrations of talented web agencies In the world of apps, navigation doesn’t always fit. Navigation links take up space on every page. They’re either in the way or too far out of the way. They’re too small to tap with one finger or too big to fit in with everything else. As apps gained popularity, designers quickly learned to hide links until users needed them. The off-canvas navigation ‘drawer’ , which stays out of sight until triggered, became just as common a solution as drop-down navigation bars on widescreen websites. Variations on the…

+ As you explore the Typography panel, you’ll notice tons of options you never knew existed. These features hint at typography’s rich history and the conventions developed to support text in every imaginable design scenario. Here are a couple of personal favourites: Ligatures These combine multiple letters into a single character. This is particularly practical for combinations like ‘ ’ and ‘ ’ where parts of the letterforms would typically collide – like the top of the ‘ ’ and the dot on the ‘ ’. Those are ‘common’ ligatures, whereas others are considered ‘discretionary’ – highly stylistic and ornamental, like ‘ity ’. Numerals Numerals are the characters used for numbers. The distinction is that a ‘numeral’ is the visual symbol, and a ‘number’ is the actual value. ‘Old-style’ numerals…

ABOUT THE AUTHOR DAVID BERNER w: www.davidberner.co.uk t: @DaveOrDead job: Senior frontend developer, Campaign Monitor areas of expertise: CSS architecture, JavaScript, usability q: which city has the web community? a: The Sydney dev community is unreal. There is a meetup group for every language, regular conferences and all-round friendly devs View source files here! All the files you need for this tutorial can be found at netm.ag/shadowgit-284 VIDEO David Berner has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/shadowvid-284 We all start our projects with the best of intentions, but on large-scale projects, CSS always ends up spiralling out of control. We don’t set out to sabotage our future selves, but there are a number of factors at play. As teams grow there are more contributors…

ABOUT THE AUTHOR DANIEL ZEN w: www.zen.digital t: @danielzen job: System architect and CEO, zen.digital areas of expertise: Full-stack JavaScript, agile deployment, best practices q: which city has the best tech community? a: I’ve lived in NYC and San Francisco and loved working in the Bay Area. I’m still curious to know what living in Korea or Japan would be like ... View source files here! All the files you need for this tutorial can be found at netm.ag/materialgit-284 VIDEO Daniel Zen has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/angularvid-284 Angular Material is a UI component framework that implements Google’s Material Design specification for Angular 2 – the new, faster implementation of Angular, written in TypeScript. Although still in alpha, Angular Material already provides…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine WRITING A PROPOSAL net: In issue #280, we shared a range of advice from net readers on how to write a web design proposal. When we posted the article online at netm.ag/proposaltips-284, it elicited these further thoughts. In a web design proposal, I’ve always aimed to talk in terms of business over creativity. I usually try to make my points and push ideas in terms of potential results. However, I’ll never make up unreachable results to excite a client, or make promises I can’t keep. I’ve just found that most clients are thinking in terms of return on investment, and thus I try to make sure I bring them good ROI. Anyone can say, “I can make your company look great”. But few…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... HENRIQUE ALVES Henrique is a frontend consultant focused on user interfaces and UX w: www.alves.im t: @healves82 NIR KAUFMAN Nir is the head of Angular development at Israeli consultancy 500Tech w: www.nirkaufman.com t: @nirkaufman MAT MARQUIS Mat works at Bocoup and chairs the Responsive Issues Community Group w: www.matmarquis.com t: @wilto JONATHAN WHITE Jonathan is a designer and growth engineer, and writes on Medium w: www.mrwhite.space t: @jonathanzwhite QUESTION OF THE MONTH What role does paper play in your design process? Christopher Murphy, Belfast, UK JW: I always start with paper and pencil. I use paper to record my observations during research and user experience interviews. I also use it to sketch out different wireframes and flows. Paper allows me to iterate quickly. Once I…

We have seen big investments to buy, build or bolt-on design programmes in recent years. A few events stand out in my mind: IBM’s announcement it would earmark $100m and hire 1,000 designers in 2012; the tumult of design agency mergers and acquisitions through 2014 and 2015; Mike Bracken on stage at the O’Reilly Design Conference earlier this year reporting the jaw-dropping fact that the UK Government Digital Service has saved UK citizens £4.1billion. Despite those big moments, I continue to encounter many small moments – in hallway conversations at conferences or in phone calls with clients – that suggest lots of companies are still barely scratching at the surface of user experience design’s potential. So, before we haul out the confetti cannons, let’s stop and ask: Are the success…

RACHEL ANDREW Co-founder, Perch CMS www.rachelandrew.co.uk Many of the people I have spoken to since the referendum are seriously looking at moving all or part of their businesses into Europe – that includes everything from small companies like mine through to larger startups and big organisations. This is going to have an impact in terms of available jobs in the industry and the vibrancy of the UK tech scene. ANNA DAHLSTRÖM UX designer www.annadahlstrom.com It brings a lot of uncertainty. Right now I’m trying to find positives. The low pound makes it cheaper for clients outside of the UK to hire us and I hope that leads to working relationships that otherwise wouldn’t have happened. We’re a talented and creative bunch and Brexit isn’t changing that. Perhaps this mess will…

This month ... CLIMBING CENTRE Sublime design & creative advice PROFILES PAUL WELSH Paul is the creative director at Manchesterbased digital agency Stage Two w: wearestagetwo.com t: @spacedawwwg MICHELE MAZZUCCO Michele is a designer and college student living in Brescia, northern Italy w: michelemazzucco.it t: @michelemazzucco MAT T RIDDING Matt is a digital creative at Birminghambased web agency Clevercherry w: www.clevercherry.com t: @clevercherry BRIEF We’d like you to design a website for a climbing centre. Perhaps it’s housed inside an interesting building such as an old church, or maybe it’s an outdoor centre in a beautiful area. Make sure you provide easy access to practical information such as opening times and prices.…

Partner What’s on your desktop? Books, magazines, papers, a framed drawing, a little bird. A whole lot of coloured moderation cards – they are everywhere in our office and I often use them to take notes. What little things make your life worthwhile? Coffee, chocolate, smiles and happy clients. What do you have on the walls? A few posters and some framed stuff, but not a lot. The whiteboard and chalkboard paints mean the walls are always changing. What hours do you work? We like our office hours to be regular, pretty much nine to five. Taking breaks is important. Getting sleep is important. Sometimes I hear people brag about their excessive working weeks and I think that they’ve got it all wrong. What else do you do in the…

You’ve been freelancing since 1998 (pjrvs.com). What made you to decide to build your own tool? PJ: Client work can definitely be difficult, but no one will push your skills and problemsolving abilities more than yourself – that’s why side-projects are so important. I helped build ofCourseBooks (ofcoursebooks.com) to stretch my UI skills in a team environment. And as a tool, we saw a severe lack in the market for how students wrote and shared notes in courses they took, so we decided to build something to help with that. In your almost 20 years of experience, how have freelancing tools influenced how you run your business? PJ: Freelancers aren’t good at their craft because of their tools. They’re good at their craft because of the understanding and knowledge they’ve…

Jen Simmons Lab labs.jensimmons.com I’ve created dozens of examples of what’s possible using new layout CSS. See them at different screen sizes. Inspect the code. Three presentations on layout jensimmons.com Videos of three presentations about layout design and CSS: ‘Modern layouts: Getting out of your ruts’ gets into the history of web layout, its job and where we might go. ‘Revolutionise your page: Real art direction on the web’ explores future possibilities. And ‘Progressing our layouts’ teaches you how to implement new design ideas now, even if browser support is less than 100 per cent. Firefox Nightly nightly.mozilla.org The easiest way to see CSS Grid in action is to download and use Firefox Nightly. It has the most complete implementation of Grid, and you don’t need to bother with turning…

ABOUT THE AUTHOR GREGOR ADAMS w: www.codepen.io/pixelass t: @GregorAdams job: Web developer and artist View source files here! All the files you need for this tutorial can be found at netm.ag/reactgit-284 Components are containers that can be added in web pages, and act as an architectural guideline for writing reusable code. Some components are simple (a button, for example), while others are more complex – or contain groups of other components (such as a date-picker). It doesn’t matter which language we use to write this code; what’s important is how we structure it and how it can be used. Let’s write some simple components: The code above will just show the current date. Since it removes its own content and id , it can be used multiple times on one page.…

ABOUT THE AUTHOR GARETH WILSON w: www.fogcreek.com t: @_gw job: Member of technical staff, Fog Creek Software areas of expertise: Code, copy, community q: which city has the best tech community? a: Sadly (as a proud Londoner) it’s still San Francisco. Its open, supportive culture means it’s easy to get meetings and advice VIDEO Gareth Wilson has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/hypervid-284 A developer - we’ll call him Bob - had an idea for a web app he wanted to build. He thought it would take a couple of days to develop a prototype and then he could find out whether other people liked it. He added it to his to-do list. A few days passed, and whilst he kept meaning to…

+ The Shadow DOM has been kicking around for quite a while and has undergone some revisions over the years. Needless to say, not everything ended up making the cut. When you research online a lot of these defunct terms still come up for the Shadow DOM, so it’s worth being aware of which ones you can ignore. Replacements These have been deprecated, but the new versions haven’t been applied in any browsers yet. Here is a list of the old versions alongside their new variations: Didn’t make the cut These all enabled the consumer of the component to smash into the shadows and go wild with styling. Of course, this went against much of the original idea behind the Shadow DOM, so they all got the chop. I know…

+ Google’s Material Design guidelines provide a single underlying system for a unified user experience across all platforms and device sizes. As Angular 2 is designed for development across all platforms (web, mobile web, native mobile and native desktop), using Material Design makes more sense than ever. While mobile precepts are fundamental, touch, voice, mouse, and keyboard are all first-class input methods. ‘Material’ is a metaphor for a rational space and system of motion within our devices. Based on the study of paper and ink, as well as shadow and light, it is a virtual representation grounded in a tactile reality. Surface and movement are key to conveying how objects move, interact and exist in space and in relation to each other. Imagine taking a notebook into the Matrix, giving…

ABOUT THE AUTHOR RAY VILLALOBOS w: www.raybo.org t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend design, fullstack development q: which city has the best web community? a: Nova Scotia. I walked into a burrito shop there and someone recognised me from my tutorials ... instant respect VERDICT NW.js offers a bit more support for browser features, so if building things like Chrome apps is important, it’s the better fit. If you’re comfortable building Node.js apps, Electron will feel more natural and has the edge in terms of support and momentum – plus it helps that it’s backed by GitHub. Winner: I am Electron, like my father before me. FACT FILE QUICKSTART Electron has an excellent interactive demo application that is a great way to kickstart your own projects.…