netSummer 2016的目錄

Focus on the site’s goal. Establish the grid. Determine interaction hierarchy. Get inspired, then go do what you do best! @TKDSNR I sneak up from behind when they aren’t looking and stuff them in a big bag. @stewartritchie Depends on the need, but optimised for speed and mobile bandwidth. Currently I use Bootstrap, Sass and import only what I need. @cbillowes Look at Awwwards. Realise there’s not the time/budget to attempt anything half as good. Go home. Light a candle. Cry in the shower. @Octavector It needs to be centred around the content, and what that content will look like on a mobile device. @jpeach17 I try to determine how the business’ needs for the site will match up with the user’s expectations, then build to that. @anthonylweb I write…

Sara Soueidan, LB KH: It may seem like there are hundreds of collaboration tools for remote teams to choose from, but if you consider them in three basic categories, it’s a lot easier to pick what’s right for your team. ASYNCHRONOUS DISCUSSION TOOLS + Slack seems to rule the market in the web design space, but a lot of the enterprise teams I know that use JIRA and Confluence opt for HipChat. VIDEO CONFERENCING TOOLS + There are many choices, but I keep two around because one invariably fails. I usually go with Appear.in or Hangouts, both of which can be launched directly from Slack. I like UberConference as a third fallback. SHARED DOCUMENTATION TOOLS + Docs can be simple, Office-style docs (Google Docs), prototypes (Balsamiq), or even shared whiteboarding…

A GOOD STORY Of course, it works best if you can come up with a name that means something to you. @de says, “When myself and @ryanhavoc were at our lowest point, we came together to build something stronger.” They liked the phrase ‘United we stand, divided we fall’ from the fable of the lion and the oxen (netm.ag/divide-283), and got the name No Divide and the ox logo from there. RANDOM ELEMENT If you don’t have that, a more unstructured approach can work. When @deanleigh was after a name for his full-service agency, a random name generator came up with Wholething. The team at @parallax “repeated words out loud to each other until we found one that sounded cool”, and @hankchizljaw likes to translate words into Latin until he…

Developer, CodePen www.rachsmith.com FROM UP NORTH I find a lot of inspiration for my web animation design in film and video. A friend recommended the From Up North galleries and I’ve been coming back ever since. www.fromupnorth.com COOLORS This is the easiest way for me to come up with attractive colour palettes for demos. It’s great for people who are not naturals at choosing colours that work together. www.coolors.co DEVELOPER TEA Developer tea is a short podcast that explores topics outside those specific to development. It keeps me thinking about the human side to a profession that can often focus on the technical. www.developertea.com PRODUCTIVE APP Productive is a simple yet very customisable app that helps me form good habits. I love the UI art direction; it’s not too overwhelming. productiveapp.io…

CRAFTINI DATE: 5 AUGUST 2016 LOCATION: ONLINE If you’re a crafter (not the kind who’s handy with papier-mâché), you can explore everything to do with the Craft CMS from the comfort of your own desk thanks to this online conference. www.craftini.net JSCONF ICELAND DATE: 25-26 AUGUST 2016 LOCATION: REYKJAVIK, IS Designers and devs from Mozilla, Microsoft, npm and Netflix are all lined up to share their gems of web wisdom at this Nordic JavaScript extravaganza. 2016.jsconf.is FRONTEND CONFERENCE DATE: 1-2 SEPTEMBER 2016 LOCATION: ZURICH, CH Design meets tech for this twoday show with speakers including Sara Soueidan and Tim Kadlec. Tickets have sold out for the past five years, so don’t dilly-dally. www.frontendconf.ch SMARTWEB DATE: 7-9 SEPTEMBER 2016 LOCATION: BUCHAREST, RO A superb lineup including Bruce Lawson, Una Kravets and…

INFO job: Design partner, True Ventures t: @veen w: about.me/veen “I’d never thought, like, some day I’d be in finance, ” says Jeff Veen. But here we are; having played a major role in some of the most web’s most important developments – spearheading UX-driven design at Adaptive Path, bringing analytics to the masses at Google Analytics, and upending the way we approach fonts on the web at Typekit – Veen is now a design partner at venture capital firm True Ventures. He’s also made the surprisingly smooth transition from the West Coast to Hoxton, London. “You know, we’re on the other side of the road when we’re driving around, but other than that it’s still startups and pourover coffee and fixed-gear bicycles everywhere I look, ” he smiles. Veen’s early…

Appy Fizz is a sparkling drink that describes itself as ‘the champagne of fruit drinks’. The new Appy Fizz website was part of a more extensive rebranding project by NYC-based design firm Sagmeister & Walsh. As the creators explain in their case study, the identity “visualises carbonated bubbles through a dynamic graphic language of 3D spheres and circles.” The design is an interesting mix of super-flat and implied three-dimensional elements. The circular language written in bold red, white and black reminds me of the work of Yayoi Kusama, the worldrenowned artist associated with pop art, minimalism and polka dots. Art and its space in commercial industries is a theme Sagmeister & Walsh play with throughout their work, and it’s a topic I’m interested in. Even more interesting to me is…

Modernizr is a collection of lightningfast tests (or ‘detects’) devs can use to tailor their experience to the user’s particular browser. The Modernizr.com site was recently relaunched and now utilises a number of features listed in this article, including AppCache support and offline support through Service Worker. The download page features a completely client-side build process, which enables every visitor to configure a customised version of Modernizr. Use of the ‘full’ build version had increased exponentially, a fact that saddened the team because most sites never use any of the detects included in it, and as a result it wastes users’ bandwidth. After determining that this was mostly an educational issue, the team added a Web Worker to the page that calculates the size of the build, as well as…

Entrepreneur alert! If you’re looking at starting your own company, or are curious to see some of the inside dealings of one, CodePen’s Radio podcast (blog.codepen.io/radio) is an incredible resource. It’s not often you find a company that is completely transparent about more or less everything it builds, but CodePen is just that. The initial episode ‘The Big Idea’ talks about the origins of the company; the initial goals and problems it set out to solve, as well as what users could look forward to. The following episodes move on to some topics all companies must address, including server setups and frameworks, how the team communicates, to handle money coming in. The great thing about this resource is that it evolves with the company. One week there will be a…

ABOUT THE AU THOR DEAN HUME w: www.deanhume.com t: @deanohume job: Engineering manager, Huddle areas of expertise: Web performance, Service Workers, squirrels q: how do you take your tea? a: I’ll have a rooibos tea with honey, please! View source files here! All the files you need for this tutorial can be found at netm.ag/servicegit-283 and you can see a demo at netm.ag/demo-283 VIDEO There is a great video from the Chrome Dev Summit that covers helpful Service Worker libraries that minimise the amount of boilerplate code you’ll have to write: netm.ag/posnick-283 If you have ever been travelling through an area with poor (or no) mobile connectivity and needed to urgently access some information on your mobile, you’ll know how frustrating this can be. What if I told you there is…

ABOUT THE AUTHOR FEMKE VAN SCHOONHOVEN w: www.atomic.io t: @femkesvs job: Marketing and communications, Atomic areas of expertise: Design, prototyping, marketing q: how do you take your tea? a: Weak! I love loose leaf flavoured green tea, and can easily enjoy a whole pot to myself over a morning VIDEO Femke van Schoonhoven has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/atomicvid-283 It’s easy to get caught up in trying to develop an idea within a static mockup or flat file drawing tool, but a prototype is worth a thousand meetings. Why would you settle for anything less than exploring your ideas in an interactive way? Maybe you have an idea for how a transition could behave, but you’re not quite sure if it would feel…

+ Ionic 2 is a hybrid app framework that helps in building native and progressive web apps. App developers can code in the languages of the web (HTML, CSS and JavaScript) and then build the app into a platform of their choice. Ionic also provides several pre-built components to enable you to bootstrap the application, so building basic applications is relatively easy. Features like push notifications, one-stop solutions for authentication, and the ability to make changes to your apps without the need for an update makes Ionic 2 one of the best frameworks for building apps. These features were present in Ionic 1 too, but folks at Ionic decided to bring more to the platform with Ionic 2. Ionic 2 is still in beta, but you can start building apps…

ABOUT THE AU THOR RYAN IRELAN w: www.mijingo.com t: @ryanirelan job: Founder, Mijingo areas of expertise: Web development, CMSs, education q: how do you take your tea? a: Green! Save $19.99 TESTING COURSE Free access to Mijingo’s Learn Web Performance course mijingo.com/netmagperf Code: NETMAGPERF VIDEO Ryan Irelan’s video course ‘Web Performance Testing’ on the fundamentals of web performance testing. It takes everything in this article and goes more indepth: mijingo.com/webperf Web pages are growing. In 2015, according to the HTTP Archive, the average web page has increased in size by 16 per cent. Two-megabyte pages are common now, and it’s not hard to find even bigger pages. These big pages can be slow and expensive for visitors. Fortunately, we can fight the trend head-on by performance testing throughout the project process.…

CONTACT US To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “We have several servers from Netcetera and the network connectivity is top notch - great uptime and speed is never an issue. We would highly recommend Netcetera.” Suzy Bean EXPERT TIP CLOUD TECH TIP ... If you’re going to fully utilise cloud technology, before deciding on a service provider, ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; an underutilised cloud will be a waste of money. Netcetera provides hosting from one of the most energyefficient datacentres in Europe, all powered by green energy. It offers everything from reliable low-cost hosting for a single site right through to complex cloud,…

PATRICK KETTNER Patrick is product manager for Edge at Microsoft and the core developer of Modernizr. From page 68 he highlights seven killer web features you can use right now w: github.com/patrickkettner t: @patrickkettner TIM HOLMAN Tim is an interactive developer at CodePen. From page 76 he walks through eight amazing features of the frontend playground you need to know about w: www.tholman.com t: @twholman AMANDA CHEUNG Amanda is lead UX developer at DockYard and adjunct professor at the Massachusetts College of Art and Design. She curates our gallery this issue, from page 44 w: www.dockyard.com t: @acacheung ROHIT BOGGARAPU Rohit is a yogi in the making, and software engineer at Adobe in Bangalore. On page 96 he walks through how to create interactive charts in Ionic 2 w: github.com/rohitb4 t: @4two2…

CONVERSATIONAL INTERFACES + Designer Adrian Zumbrunnen recently made his website conversational as an experiment. He was overwhelmed by the response: he received over 300 emails within the first day and a burst of media coverage. Here he details what these kinds of interfaces might mean for the future of web design. netm.ag/conversation-283 A WEB FOR EVERYONE + The principle of ‘offline first’ is a laudable one, but it requires JavaScript capabilities that aren’t present on every device. Jeremy Keith reminds us that sites that are reliant on JavaScript exclude millions of users; we should be building a web that works for everyone. netm.ag/keith-283 ETHICAL DESIGN + Tristan Harris is a former design ethicist; he used to work at Google where his role was to “design things in a way that…

SIDE PROJECT OF THE MONTH INFO job: Designer and developer w: simoncaminada.ch t: @SimonCaminada net: What is Alloy (alloy.simoncaminada.ch)? SC: Alloy is a web browser. What’s different about it is its structure: Alloy is task-based, which means you can associate tabs to tasks and only display currently relevant content. It’s designed for the power user who has many tabs open at once. net: How did the idea develop? SC: I often have multiple browser windows open, each packed with tabs for different tasks. I thought that this problem couldn’t be uncommon and that browsers haven’t really evolved in user experience for a long time. I mapped out what could be better, and now that’s what Alloy is all about. net: Can you explain the tasks and tabs work? SC: The tabs…

What we think MEEP FREE BEAR FREE (BETA) SKETCH APP ESSENTIALS FROM $28 MOD $29 BOORDS VARIOUS DATA VISUALISATION £31.99…

Opinions, thoughts & advice It was 2009, and people all over the world were awaking to find lost and lonely cows wandering into their Facebook feeds. FarmVille, Zynga’s light farming simulation with heavy viral-sharing mechanics, was sweeping the globe, heading a boom in web-based games. Millions of dollars poured into social games from both players and investors. Elsewhere, indie developers were creating unique games with Flash, uploading them to an audience of millions on portals like Kongregate and Newgrounds. While standards-based web technologies allowed for only limited gameplay possibilities, plugins like Flash, Shockwave, Java and Unity enabled a richer experience, closer to traditional console and PC games. In this golden age of web gaming, broadband adoption was growing rapidly, but speeds were still not great; many users didn’t have the…

Sensational design and superb development AMANDA CHEUNG Amanda is the lead UX developer at DockYard and an instructor at MassArt. She is based in Massachusetts w: www.dockyard.com t: @acacheung Ray Bradbury’s classic Fahrenheit 451 opens with, “It was a pleasure to burn, ” in reference to a world where books are banned and burned upon discovery. Pleasure to Burn is a project that aims to change the way we tell stories on the web, hoping to evolve digital storytelling in both creation and experience. “Illustrators create each scene, while editors build out the story on their CMS. Stories can be deployed as fast as they can be created, ” says Lifeblood’s Travis Weihermuller. The site includes an excerpt from the aforementioned dystopian novel, paired with layered illustrations. Text moves through painted…

The team at Leo Burnett walk through how the idea progressed…

Just like jQuery did for the DOM, clipboard.js plasters over the ugly parts of clipboard access to give you an elegant API to add Cut, Copy and Paste support to your site. The clipboard API seems cumbersome to many, which is why Zeno Rocha’s clipboard.js is such a godsend. Its super-simple API abstracts away all the unsightly code that is required to get Copy functionality, while weighing in at a svelte 3KB. After being added to a page, you just need to include a button and the custom data-clipboard-action and data-clipboard-target attributes. You’ll get amazingly easy crossbrowser clipboard access – all without ever having to rely on Flash, or any of the other hacks that have been around for so many years. There’s no need to modify your HTML to…

Seeing people experiment with code is perhaps the best part of my job. Every now and then, someone will make a pen that acts as a live demonstration of a certain JavaScript or CSS feature. I find these incredibly informative and useful as resources: Flexbox playground netm.ag/siques-283 This playground Pen by Gabi Siquès demonstrates interactively how each flexbox property behaves in relation to one another. With this tool, it’s really easy to find the specific properties you’re looking for. Easing Playground netm.ag/roblewsky-283 This Pen by Craig Roblewsky lets you edit and customise GreenSock easings in real time, so you can get those interactions silky smooth. Loaders and Spinners netm.ag/loader-283 This collection supports over 500 unique loaders and spinners. If you’re ever in a rut, this will be the single point…

ABOUT THE AUTHOR MARCELO SOMERS w: www.marcelosomers.com t: @marcelosomers job: Experience design solution architect, Slalom Consulting areas of expertise: Design systems, CSS architecture, UI prototyping q: how do you take your tea? a: Coffee with too much creamer RESOURCE Marcelo Somers explores alternative strategies for distributing your pattern library and keeping it in sync in this blog post: netm.ag/grail-283 The aim of a pattern library is to reach a situation where the library’s documentation is automatically in sync with the apps it powers, which tends to mean sharing CSS code so the developers can copy and paste HTML snippets that ‘just work’. In practice, this gets complicated quickly. We regularly see situations like: • The desire to share the UI code in multiple codebases so different apps can look similar •…

Developing a site progressively means building on the strengths of browsers, while compensating for their weaknesses and the relative fragility of the web. Sites are built in layers of technology: 1 HTML: Content is built and delivered in semantic HTML5 markup written in logical order, which also serves to enhance SEO and accessibility. Since there’s no page without content, this is considered the base layer of any site or web application. 2 CSS: This markup is enhanced with CSS for layout, presentation and light interaction or animation. If the CSS doesn’t load for any reason, the resulting page will probably be ugly, but it can still be used. 3 JavaScript: Finally, the functionality of the page is enhanced with JavaScript. Since JavaScript is the code most likely to be blocked,…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine IS WEB DESIGN DEAD? net: As the web continues into its awkward 20s, society is becoming less and less reliant on web professionals. In issue #276, Conny Liegl explored this phenomenon, and took a closer look at the areas where web designers can’t be replaced by DIY tools (netm.ag/design-283). The web is becoming more reliant on professionals if anything, as applications are increasing in complexity. The need for web-based software to be testable and performant has never been more important. Also AI is a long, long, long way from automating programming. netm.ag/crockford-283 gives this some context. Robert Smith, Manchester, UK Web design has become so sensitive that it can change the base of a business if not executed properly. UX and content are the…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... ZOE GILLENWATER Zoe is a web designer and dev specialising in UX, RWD and accessibility w: www.zomigi.com t: @zomigi JACKIE BALZER Jackie writes CSS as head of frontend development at Behance w: www.Jackiebalzer.com t: @jackiebackwards TIM MILLWOOD Tim is a freelance web developer with a focus on Drupal and Ruby on Rails w: tim.millwoodonline.co.uk t: @timmillwood KEVIN HOFFMAN Kevin specialises in digital and content strategy, and UX design w: kevinmhoffman.com t: @kevinmhoffman QUESTION OF THE MONTH How different is Drupal 8 to previous releases? Graham Dougmont, Brisbane, AU TM: Very, but you may not notice. For site builders who never touch a line of code, but just install and configure modules, nothing should be too unfamiliar. The biggest change comes for developers and themers. There…

Here’s a problem: You’ve been working on a super-cool project for a couple of sprints, only to discover the end users don’t really need whatever it is. Or you’re part of a startup, focused 150 per cent on getting the technology stood up, but your friends and family don’t understand the reason for the thing you’re building. Or you’re the product owner on an agile team, buried deep in the enterprise. In spite of being trained in product ownership, you don’t have a good sense of the end user’s expectations – only the business group’s ‘requirements’. What do you do now? Let’s be clear: inventing the future is hard. Really hard. The statistics bear it out – less than 10 per cent of startups are still in business two years…

CHRISTOPH REINARTZ UI/UX engineering lead, Trivago www.creinartz.de Two situations make refactoring difficult: scope changes and unforeseen issues. I try to scope refactorings as much as I can. Defining the main goals for each step and doing requirement engineering on the most critical steps beforehand helps with this. I also try to be lean in my process and avoid overhead in planning. It is not about striving for instant perfection – I concentrate on base functionality first and to improve this in every step. LEWIS COWPER Frontend developer, FinLeap hi.lewis.red Step one is making sure my test suite is up to scratch, and I’m confident my tests will fail if I make a mistake. I start by fixing any low-hanging fruit, which helps familiarise me with the code. I then draw…

Small Victories is an interesting new service from creative studio XXIX. “The idea for using a service like Dropbox for super-simple web hosting and publishing had been kicking around our studio for a couple of years, and we finally had the bandwidth to resurrect the project this year,” explains Jacob Heftmann, principal at XXIX. “People in our shared studio started using it for presentations, moodboards, event photos and client proposals – we knew then that we had a useful tool on our hands. The most interesting technical aspect is probably the fact that even the marketing site is hosted on Small Victories itself.” I found the website’s aesthetic as appealing as the tool itself. Small Victories gives off a De Stijl vibe with its simplified visual components and use of…

Sublime design & creative advice PROFILES LUKE MAT THEWS Luke is a creative director at Essential Marketer in Birmingham w: essentialmarketer.com t: @lukewillmatt DYLAN SMITH Toronto-born Dylan is a freelance brand and web designer based in London w: www.dylanatsmith.com t: @dylanatsmith SIMON FOSTER Simon is a freelance frontend web designer based in London w: simonfosterdesign.com t: @simonstretch BRIEF Please design a website for a new community café. The design and UI must clearly communicate its two strands of business – its tasty, affordable menu, and its programme of events – while reflecting the café’s values of being friendly, fun and accessible for all.…

What’s on your desktop? A Cinema display and a Lego TIE fighter. Little things that make your life worthwhile My first morning coffee … and the second one. Also jogging towards the Golden Gate Bridge. What do you have on the walls? A Totoro poster and another smaller one from David Lanham. I also have a printed canvas of one of my own photographs. What hours do you work? It varies a lot depending on the project. I usually try to keep a somewhat consistent 9 to 5 schedule. Sometimes more, sometimes less when I need time for myself. What else do you do in the office? Listen to podcasts a lot. I also try to focus so I can get out of the office – that way I’m happy…

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, two authors have created exclusive screencasts to complement their articles: Dudley Storey’s top tips for creating responsive SVGs, and Femke van Schoonhoven’s guide to creating hi-fidelity prototypes in Atomic.…

ABOUT THE AUTHOR ROHIT BOGGARAPU w: github.com/rohitb4 t: @4two2 job: Member of technical staff, Adobe areas of expertise: JavaScript, UI development, data visualisation q: how do you take your tea? a: Green, boiling hot, with lemon View source files here! All the files you need for this tutorial can be found at netm.ag/ionicgit-283 RESOURCE For a user, a hybrid app is no different from a native iOS or Android app. But for a dev things are very different. This article explores what exactly a hybrid app is: netm.ag/hybrid-283 When you work in a small team, it tends to be difficult to write and maintain separate code for Android, iOS, and Windows. That’s where hybrid frameworks like Ionic come into the picture. They not only enable us to write a single piece…

ABOUT THE AU THOR DUDLEY STOREY w: www.thenewcode.com t: @dudleystorey job: Developer, designer, instructor, writer areas of expertise: HTML, CSS, SVG q: how do you take your tea? a: Green, in a Zen garden VIDEO Dudley Storey has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/SVGvid-283 The many advantages of SVG – including infinitely scalable vector images, small file sizes and direct integration with the DOM – make it a natural fit for responsive design. Despite the SVG specification being a decade old, it’s relatively recent support in many browsers and tools means there are still a number of tricks, loopholes and gotchas that catch out even experienced web designers and developers. Here, I’ve summarised the most important of these as 10 golden rules. 1…