netApril 2016的目錄

Unless your business is truly awful you should have more users than staff – therefore more content. @inpocketdev It sells the product/service from the user’s perspective. @muzzlehatch_ Writing skills need to be honed before you get a big audience. @sladedesign When done right – it can go oh-so-wrong – this is the path to global exposure (Reddit, etc). @nonswearyphil Because it’s cheaper! @Gary_SmallSEO It creates a wider sense of customer value and inclusion, and it covers an aspect of market research. @JohnnyMcCauley2 Genuine UGC is the best way to give your product or service authenticity in your target market. People relate to real people. @barrymcgee It takes away the time needed to manage site content manually – time that can be used to grow and invest in the business. @mezzarino…

What’s new in web typography for 2016? Clarice Gomes, Toronto, CA JS: Here are three trends in type that I’ve been noticing lately and that I expect to see more of throughout 2016 ... HEAVY SERIFS Heavy, high-contrast serifs such as Noe Display will continue to become more and more popular, as high-density displays are better able to render the fine lines of serifs like these. PLAYFUL SANS-SERIFS Quirky, geometric sans-serifs such as GT Walsheim are trendy at the moment. This style of typeface takes the geometric model of Futura and adds a few playful touches, creating warmth. TYPE DIVERSITY I think we’ll see a more diverse use of type on the web in 2016. People are sick of seeing the same small handful of typefaces used everywhere. Typewolf is…

No matter how much work you put in, sometimes it can be difficult to feel deserving of your success. We asked our followers how they tackle impostor syndrome BUILD CONFIDENCE @neil_berry suggests taking time out: “Build confidence by looking back at your designs and you’ll realise the great work you’ve achieved.” @soopadoubled agrees that taking a step back can help: “Network, talk to other designers/developers. Read and learn.” @IvanMcConnell turns the problem on its head: “I manage it through discussion with people I respect, but also use it as fuel to prove I AM good enough.” FAKE IT If that doesn’t work, fake it ‘til you make it. “One word: Bravado!” says @PXLagency, while @cjkoepke jokes: “Accept that we’re all impostors.” EMBRACE IT @AshConnnolly reminds us it’s not necessarily a…

HARRY BRIGNULL User experience consultant www.brignull.com ETHNIO Recruitment for user research can be a pain. Avoid agency fees by doing it yourself with ethnio. You create a questionnaire so you only get target users, and they book themselves into the calendar. It can also pay them using Amazon gift cards. Neato. www.ethn.io VALIDATELY Validately offers a bunch of user research tools. I love the ‘moderated discussion’ screen sharer. When participants connect to a specific URL, it instantly starts sharing their screen and webcam with you. Everything is recorded in the cloud. When you’re interviewing lots of people it’s so much easier than Skype. www.validately.com STATWING Statwing basically analyses user surveys for you. You give it the raw data, it gives you charts, tables, t-test results, and even natural language descriptions…

ENHANCECONF DATE: 3-4 MARCH 2016 LOCATION: LONDON, UK EnhanceConf is a one-day event focused on progressive enhancement, and how we can use it to push the web forward without neglecting any users. Speakers include Jen Simmons, Anna Debenham and Robin Christopherson. enhanceconf.com JAVALAND DATE: 8-10 MARCH 2016 LOCATION: BRÜHL, DE Created for Java enthusiasts, JavaLand offers a programme of lectures, community activities and an entire day of training. The event offers plenty of networking, and even a kids’ event for the programmers and developers of tomorrow. www.javaland.eu CONVERSIONXL LIVE DATE: 30 MARCH-1 APRIL 2016 LOCATION: TEXAS, US Pitched as the most useful conversion optimisation event you’ll ever attend, ConversionXL promises to reveal processes that will boost profits on any website. Speakers include Annie Cushing, Pauline Marol and Nir Eyal. live.conversionxl.com…

INFO job: UX designer, Google t: @rachel_inman Rachel Inman doesn’t like exclusivity. Describing herself as a “bit of a nerd” growing up, it reminds her of when one group of kids felt entitled to exclude others. In a business environment, people can often unconsciously create an ‘us versus them’ mentality too. “The ‘them’ could be the clients, the project managers, your engineering team – anyone you perceive just doesn’t get what you’re trying to create,” she says. “You feel like they are against you or threaten your power. This is dangerous because it can lead to secrecy and defensiveness. Communication breaks down. Egos flare.” Thankfully in her role as UX designer at Google, Inman is able to ensure everyone on her team has a say. “It’s baked into our process,…

Scaleable Vector Graphics (SVGs) are now fully supported in most wellknown browsers, going a few versions back. We’ve seen SVGs go from experimental and partially supported to a delightful part of the user’s experience, and an extra layer of personality for web apps, products and online brands. A lot of this came in the form of animation, supported by CSS3 and by lightweight JavaScript libraries. Using some key features in Sketch and Illustrator, designers can export HTMLsupported code to display an SVG (including shape tags like rectangle, circle and line). To find out how to animate SVGs without tinkering in CSS, take a look at this article by Jakob Jenkov: netm.ag/jenkov-278. However, with CSS alone, SVGs not only respond to changes in scale, but to other CSS3 animation attributes. They…

Making your first style guide can be a scary thought if you haven’t used one before. Thankfully there are plenty of resources out there from talented internet folks who have been there and done that! Here are some of the best. Style guide boilerplate brettjankord.com/projects/style-guide-boilerplate Think of this as Bootstrap for style guides. Brett Jankord provides the essential framework, making sure you’re covered for all potential assets that might appear in a web project. It’s particularly useful if you are giving clients WYSIWYG editor access in your CMS. Frontend style guide and pattern library netm.ag/debenham-278 Anna Debenhan has been collecting style guides in the wild. Take a look if you want a few examples to inspire your own approach. StyleGuides.io styleguides.io If you really want to deep dive into improving…

ABOUT THE AU THOR DUDLEY STOREY w: www.thenewcode.com t: @dudleystorey job: Developer, designer, instructor, writer areas of expertise: HTML, CSS, SVG q: what is your earliest memory? a: My younger brother breaking his leg as a toddler (not my fault!) VIDEO Dudley Storey has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/blendvid-278 You may be familiar with blend modes from Photoshop or other parts of the Adobe suite: they’re the curiously-named options in the Layers palette that can create dramatic differences in how layers of pixels interact with each other. What you may not have been aware of is that Adobe, in combination with contributors from all over the world, has been quietly moving much of its innovative work in layout, typography and imagery into…

ABOUT THE AU THOR GALYA ILIEV w: www.sketchapp.com t: @galyailiev job: Community, Bohemian Coding areas of expertise: Sketch q: what is your earliest memory? a: Playing with a toy truck gift from my 3rd birthday VIDEO For more on pixelprecise editing in Sketch, take a look at this video from the Sketch team: netm. ag/sketchvid-278 With Sketch you get the best of both worlds: scalable vectors and precise pixel controls. The tools you’ll find in Sketch will help you create sharp edges and defined, balanced outlines, which are the foundation of a great design. Sketch can automatically align your shapes to pixel edges, and also provide you with the ability to preview and edit each pixel to ensure your exports are sharp. This is especially important when you’re preparing assets for…

ABOUT THE AU THOR MAT T D. SMITH w: mds.is t: @mds job: Design director, Studio Mds areas of expertise: UX, UI, HTML, Sass q: what is your earliest memory? a: Hiding in the closet and pooping in my diaper VIDEO Matt D. Smith has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/AIUXvid-278 Think Adobe Illustrator is for print design and logos? Well, you’re right, but over the last decade the graphic designer in me has morphed into an intensely focused UX and UI designer. And guess what? Illustrator is still my main weapon of choice for wireframing. I use and love Sketch for detailed UI, but not for UX. Illustrator is blazingly fast at rendering vectors. No software handles a massive amount of points, shapes,…

ABOUT THE AU THOR JON NEMETH w: www.zurb.com/notable t: @jon_nemeth job: Design lead, ZURB areas of expertise: Product design, frontend development q: what is your earliest memory? a: Pre-school Mickey Mouse dance sessions. I don’t remember what it looked like or what it had to do with Mickey Mouse, for that matter Exclusive offer! ONE MONTH FREE ZURB is offering net readers one month’s free access to Notable. Go to netm.ag/notableoffer-278 to claim Offer expires 30 April 2016 Taking a product from prototype to production requires enormous amounts of communication. From design sketches and wireframes to actually producing code, meaningful iteration requires organised and actionable feedback. Product design platform Notable and two of its powerful modules, Notebooks and Code, were born out of the ZURB team’s frustration with collecting feedback on…

At Webflow, we want to empower everyone to create for the web. But for web creativity to mean anything, it has to be consumed. It has to be created for someone. It has to be designed to meet people’s needs, whether for entertainment, education or support. So we’re just as passionate about empowering everyone to consume web content. And that’s one reason responsive design is so important to us. For design to be truly responsive, it has to give people the content they’re looking for, anywhere, any time, and regardless of what device they’re using. It means helping people all over the world, whether they’re using a feature phone in Tunisia or a 6S in Silicon Valley. It means that instead of making assumptions about what people want when they’re…

ABOUT THE AU THOR SARAH DRASNER w: sarahdrasnerdesign.com t: @sarah_edo job: Senior UX engineer, Trulia (Zillow Group) areas of expertise: JUX, SVG Animation on the web is particularly nuanced, as we have to adjust our work to take into account bandwidth, code compatibility and product design. In this article I’ll explain the recommended set-up for a truly scalable animation. I’ll also cover different ways of working with the animation to achieve positive user experiences and parity across our multi-device world. I will cover a selection of key use cases: adding CSS animation to SVG sprites, dealing with standalone graphics that require complex movement, creating a responsive experience that adjusts to the viewport, and making animations simpler for mobile. I highly recommend using SVG (Scalable Vector Graphics) for graphics with responsive animations.…

LOUIS LAZARIS Louis is a frontend developer, a managing editor at SitePoint and curator of Web Tools Weekly. From page 68 he lists 50 amazing free tools for web pros w: www.impressivewebs.com t: @ImpressiveWebs JORDAN MOORE Jordan is a freelance user experience designer specialising in responsive web design and mobile technologies. From page 76 he dives into living style guides w: www.jordanm.co.uk t: @jordanmoore WREN LANIER Wren is a UX designer with a passion for creating beautiful digital products. This issue, she curates our gallery of great new sites (p44) w: www.wrenlanier.com t: @heywren DUDLEY STOREY Dudley is a designer, teacher and author from Calgary. On page 84 he explains how to use CSS blend modes to create exciting effects w: www.thenewcode.com t: @dudleystorey…

FEEDBACK LOOP When is web design critique useful, and when is it damaging? In this article, Facebook product designer Tanner Christensen explains how the social media company constructs its critique sessions to ensure they remain valuable and effective. Sure to get the thumbs up from design teams everywhere. netm.ag/feedback-278 WHO NEEDS MARKETING? This blogging omnibus charting how Stuart Hall built a health and fitness app in just six hours – which then went on to generate 2.3 million downloads and a full-time salary – sounds too good to be true. But here he details the process from day one, and reveals how the app relied on a good story to sell itself. netm.ag/seven-278 ES6 MADE EASY Still haven’t learnt ES6? Eric Elliott explains why it’s about time you did, and…

What we think (1) Whether you’re new to Sketch or a seasoned user, Marc Andrew’s got you covered in this guide (netm.ag/sketch-278). (2) You’ll find this wearable masterpiece from Hvass&Hannibal in InVision’s new T-shirt Marketplace, along with creations by Mike Kus and Alice Lee (netm.ag/tshirts-278). (3) Future turns your daily events calendar into a spiral, making it easier for you to see what’s around the corner (netm.ag/future-278). (4) Anonymous social media app Koko crowdsources cognitive therapy to guide you through your problems (netm.ag/koko-278). (5) Take to the skies with Axis VIDIUS, the world’s smallest first person-view drone that streams straight to your mobile (netm.ag/axis-278). (6) This month’s Q&A star Scott Hurff (p41) shares the secrets of great product design in this book, with over two dozen expert interviews (netm.ag/products-278).…

You’ve all heard about agile methods like scrum and Kanban. They have proven to be successful ways to build and manage software. But are agile approaches also compatible with the project-based business model of an agency? Is it possible – or even advisable – to use a method that keeps your client in the dark about what they will get in the end? Welcome to Edenspiekermann, a global agency that shapes brands by creating digital products, services and experiences. We are around 100 people from over 16 nations working in five offices worldwide. With backgrounds in graphic design, corporate design and typography, we have gone through an interesting transformation over the past six years. The world has changed and the design business has changed. We are now deeply involved with…

inTacto www.intacto.com Sensational design and superb development WREN LANIER Wren is a UX designer with a passion for creating beautiful digital products. In her spare time, she enjoys eating bagels, making trouble and napping w: www.wrenlanier.com t: @heywren Fleximize provides loans to UK businesses, and this clever microsite showcases just how keen it is to connect with entrepreneurs. Built with HTML5 and SVG animation, Fleximize: Mission pushes the boundaries of web technology. Engaging illustrations and transitions move the viewer through a series of venues. An elaborate animation sequence introduces one of the heroes of the mission as he parachutes into headquarters to introduce three mini-games. And while you probably wouldn’t choose any of the games over your favourite mobile time-waster (hello, Two Dots!), each has been well designed, with its own unique…

www.hactar.is Jonty Sharples and Andy Beaumont met whilst working at London agency Albion; Sharples a design director and Beaumont working as a creative technology director. After three years at the company, the two decided to go their own way, together. They launched Hactar in 2014, with the aim of only working on projects that brought about social good. We spoke to the co-founders about the challenges of their chosen career path, and why Hactar is a business with a difference. net: Hactar helps organisations with a social conscience. Why is this important to you? AB: If the thing you do for a living can be used to either make the world a better place or to make it worse, why would you choose the latter? Despite the stresses of starting…

THE WEB DESIGN AND DEVELOPMENT TOOLS – YOU NEED TO KNOW – AUTHOR LOUIS LAZARIS Louis (@Impressive Webs) is a frontend developer, a managing editor for SitePoint, and curator of Web Tools Weekly, a newsletter for frontend developers. He blogs at www.impressivewebs.com ILLUSTRATION TOBIAS HALL Tobias is a freelance illustrator, letterer, designer and mural artist working out of London. He has worked on an eclectic mix of projects and boasts a growing list of international clients www.tobias-hall.co.uk In many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform and repeat many microtasks. The fact we work with open web technologies that are often used to build free and open source software means we have…

What happens when you want to apply a style guide to an existing project? Bringing a set of established designs under the control of a style guide can seem like a daunting task, but much of the work is already done for you. Just like you would with a set of sketches, I recommend getting a bird’s-eye view of your entire product and running an audit. Ask the following questions: What is consistent? Identify the type, grids, colour and modules that are consistent throughout the product and start to group and catalogue them under the appropriate headings. Be aware of similar styles that are perhaps inaccurate copies of other items, and which can be corrected and grouped under an existing style. What is redundant? Now is the perfect time to…

CSS blend modes are supported in every modern browser except one. Microsoft Internet Explorer / Edge has yet to build support (although you can – and should – vote for the developers to do so: netm.ag/background-278 and netm.ag/mix-278). In addition, Safari 9 doesn’t yet support the hue, saturation, colour and luminosity modes. Chrome 46 also has a few bugs when it comes to rendering elements that use the multiply, difference and exclusion modes. Because of those issues, it’s important we treat blend modes as a progressive enhancement to our designs, not a required (or expected) feature, with graceful fallbacks. In most of these examples, that will happen automatically – IE/Edge users will see and interact with the original unaltered content, with no functionality lost. Detecting browser support for blend modes…

Sketch offers a number of features to help to keep your workflow smooth and take the pain out of complex tasks. Here are two that are worth trying. Custom shortcuts To create a Round to Nearest Pixel Edge shortcut (or any custom shortcut), simply open Keyboard in your Mac System Preferences and click on the Shortcuts tab. Next, select App Shortcut and ‘+’ to choose Sketch from the Applications list. You must enter the exact name of the menu item (in this case ‘Round to Nearest Pixel Edge’), and enter your own shortcut combination. Sketch loves maths You can perform math operations in all numerical inputs of Sketch’s Inspector to speed up your design workflow. You can add, subtract, divide, multiply, and in some cases, use percentage to tweak your…

I’ve experimented with a ton of wireframe presentation styles, but one has stood the test of time in terms of readability and clarity: a simple outline style with incredibly minimal colour usage. There’s a reason why default HTML styles are so simple. They may not win any design awards, but they do exactly what they need to do – communicate functionality. The styles offer no confusion about black text, underlined-blue text, checkboxes, or radio buttons. It’s all crystal clear. When designing wireframes, we have one objective: to be crystal clear. I haven’t found a better way to achieve this than with a simple colour palette using global swatches coupled with the outline style of UI elements. Colour guide We want to create these wireframes as quickly as possible so we…

ABOUT THE AU THOR ANTONY D’ANDREA w: antonydandrea.com t: @antonydandrea1 job: Full-stack PHP developer, Newsflare areas of expertise: PHP, JavaScript, MySQL q: what is your earliest memory? a: Playing with my Lego in the living room View source files here! All the files you need for this tutorial can be found at: netm.ag/webhookcode-278 VIDEO If you are completely new to Slack, Steve Dotto has done a great overview of its main features and how these can be used within a team: netm.ag/dotto-278 Slack is an instant messaging service that has really taken the world by storm. Companies around the globe are using it not only as an internal messaging system but also in many other creative ways. This is largely made possible by the excellent API that Slack gives developers access…

AUTHOR BEN CALLAHAN Ben is the president of Sparkbox and founder of the Build Right workshop series. He writes about the web on industry blogs, and speaks at events seesparkbox.com ILLUSTRATOR MIKE BRENNAN Mike (@mike_ brennan01) is a graphic designer based in Bath. He is currently art editor at Total Film Every time I hear someone ask, “Which is better, responsive or adaptive web design?” I wince. The question itself reeks of misunderstanding, similar to the ‘native apps versus web apps’ conversation. Rather than attempting to answer the question of which is better, I’d like to try for a bit of clarification around these terms. LAYOUT Back in 2010, the foundations of how we worked on the web were challenged with the introduction of responsive web design (RWD). Initially defined…

Of course, Webflow is more than just a visual web design tool and hosting platform. With the allnew, all-visual Webflow CMS, you can easily build totally custom, content-driven websites. With no need to mess with databases, PHP, or hiring a developer. Or trying to cram your unique content into what is, in the end, just another blogging platform. With Webflow CMS, you can create completely custom structures for your content, design that content in a familiar visual interface, and edit it right on the live website. Plus, adding new dynamic content is as easy as filling out a form. While other CMSs can produce similar end results, they usually require extensive collaboration with designers and developers – an involved process that can take months. But with Webflow CMS, a single…

CONTACT US @netmag /netmag +netmagazine netmag@futurenet.com net.creativebloq.com CALL TO ACTION I was flipping through the February issue of net and your editor’s note caught my eye. I recently turned down a full-time job offer at Clearleft to explore how design and technology can help refugees prosper in Europe. Andy, Rich and Jeremy have been kind enough to let me rent a desk at Clearleft while I get Prosper (prosper.community) off the ground. I really liked your call to use design as a force to make a difference. We’ve grown a community of digital workers from around the world who are working together to build an opensource platform that is a central database of refugee crisis initiatives. You’re playing a wonderful role in a great magazine with readers who might be…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... ANDY BOOTH Andy is senior designer at Telegraph Media Group in London w: www.theandybooth.com t: @theandybooth MARKO DUGONJIĆ Marko is the founder and UX director at Creative Nights and Typetester w: www.maratz.com t: @markodugonjic JEREMIAH SHOAF Jeremiah is a freelance designer and creator/curator of Typewolf w: www.typewolf.com t: @typewolf BRUCE LAWSON Web developer Bruce is an advocate of the Open Web and lurid hair dye w: www.brucelawson.co.uk t: @brucel QUESTION OF THE MONTH Should I use a carousel on my ecommerce site? Dan Davies, North Wales, UK MD: Ideally, no. Studies have demonstrated that users miss content on carousels, with items that aren’t immediately visible often being engaged with less. My suspicions are that users perceive automatic movement on a page to be advertising. A…

Branding has always been a very top-down process: through identity and messaging, brand designers have tried to define and influence what consumers think. Then with consistent exposure, they hope to build recognition, trust and eventually loyalty. This approach arguably worked when you had control over static mediums like advertising, packaging and even television, but these days brands no longer exist purely on a shelf or a billboard. They live online. I’m not just talking about purely ‘digital’ brands. All modern brands now find themselves in a fragmented, multichannel environment where, as consumers, our first or most frequent engagement is a digital one. We no longer just walk past brands on the streets or shelves; we’re carrying them in our pockets and wearing them on our wrists. As consumers we now…

AARON GUSTAFSON Author, Adaptive Web Design www.aaron-gustafson.com I always begin any website project with the purpose of the site. I list the core tasks a user would need to be able to accomplish on the site, before examining the content to ensure it clearly links to those tasks. Following that, I author markup that supports those tasks. Next I begin to look at ways visual design can ease the completion of those tasks across a broad spectrum of screen sizes, colour profiles and such. Finally, I look for ways to enhance the interactive experience with JavaScript in order to create the best experience possible, on whatever device a customer might be using. INAYAILI DE LEÓN PERSSON Lead web designer, Canonical www.yaili.com For a responsive retrofit, start with a group exercise…

Sutu www.sutueatsflies.com In These Memories Won’t Last, award-winning digital comic artist Sutu has created a beautiful, poignant interactive story about his grandfather’s rapid slide into dementia and memory-loss. Unlike many online comics that sit on the screen just as they would on a page, TMWL incorporates movement and music into the reading experience in ways that both illuminate and challenge the reader. The carefully crafted scrolling and interactions highlight the fragile nature of memory. “By the time you reach the end of the story, the earlier parts will have completely faded away and cannot be retrieved,” says Campbell. “I designed this effect to frustrate users, to share with them the pain of losing a memory and not being able to go back.” Best of all, the site is accessible across devices.…

This month ... HAIRDRESSERS PROFILES SIMON CARR Simon owns DesignUps, a digital design agency in Tennessee w: www.designups.com t: @simoncarr MAT T WILLMOT T Matt is a web designer and dev, concentrating mostly on the Shopify platform w: www.mattwillmott.co.uk t: @matt_willmott MICHELLE BARKER Michelle is a designer and front end developer at Mud, with a passion for CSS w: www.michellebarker.co.uk t: @mbarker_84 BRIEF This month we’d like you to design a website for a hairdressing service. It could be a freelancer who travels from home to home, or for a new company entirely. The new site should be straightforward to use, but also aspirational.…

Co-founder What’s on your desktop today? Laptop. Artefact Cards. Empty coffee cup. Time-share cat. Lots of files. Too many tabs in Safari. What little things make your life worthwhile? Websites: www.YouAreListening.To, www.giphy.com, www.bugsnag.com Apps: Slack, Sketch, 1Password Audio: ‘The Best Show’, Radio 4, a mysterious high pitched buzzing sound that seems to come from all corners of the office at once Reading: Whose Mouse Are You?, Tom Drury, recruiter spam What do you have on the walls? The Polish poster for Trading Places, which makes it look like some great lost psychedelic masterpiece. What will you do for lunch? Anything egg. What hours do you work? All of them, in order. What else do you do in the office? Complain about the price of office space. Discuss where to eat…

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 guide to creating effects with CSS blend modes, and Matt D. Smith’s tutorial on creating a responsive UX with Adobe Illustrator.…

While they are still fairly new, the web offers a lot of further education on blend modes: CSSgram (una.im/CSSgram) – Una Kravets uses blend modes and CSS filters to excellent effect in this filter library, which replicates popular Instagram filters in pure CSS. CSS blend modes could be the next big thing (netm.ag/feely-278) – Bennett Feely gives an excellent overview of blend modes in this article on Medium. His CodePen account (codepen.io/bennettfeely) is also full of useful examples, as is his blog (bennettfeely.com/gradients). Compositing and blending in CSS (netm.ag/composit-278) – Sara Soueidan has an excellent technical, in-depth overview of compositing and blending on her blog. Blending Modes Demystified (netm.ag/demystify-278) – This useful article by Justin McDowell was recently published on A List Apart. It covers all the basics of CSS…

Communication lies at the heart of successful applications and businesses. The ability to connect users efficiently paves the way to amazing user experiences. Take carwow (www.carwow.co.uk), a new way of buying cars, and landmax.pro (landmax. pro), a software service that covers the needs of property agents and landlords. carwow reversed the car purchasing process. Rather than having to find a dealer to sell you a car, you choose the car you want and let local dealers send offers to you. carwow discovered that dealers prefer to interact with customers over the phone, and turned to Twilio Voice to handle those calls. The integration was implemented within a day. When a user receives an offer they have the option to either call the dealer and enter a unique offer ID, or…

Wireframes are like scaffolding for a new building that’s under construction. Before you can work higher than the first storey on a new building, scaffolding must be put up around the perimeter. When the work and the building is finished, the scaffolding will be disassembled and there will be no trace of its existence. It’s the same with wireframes. Although when you’re starting a web project it’s definitely possible to jump straight into code or designing a layout, you don’t necessarily want to build something before you count the cost – not on a large-scale, anyway. Multi-device wireframes are great for helping visualise the scope of the work at hand. Scaffolding is pretty generic; most looks the same and provides the same function. Similarly with wireframes, it’s OK if they…

ABOUT THE AU THOR MARTIN HUGHES w: wefail.com t: @wefail job: Director, Wefail areas of expertise: HTML, CreateJS, JavaScript, Flash, iOS development q: what is your earliest memory? a: Drawing dinosaurs; always drawing dinosaurs. I could draw you anything, as long as it was a dinosaur Download the files here! All the files you need for this tutorial can be found at netm.ag/animategit-278 RESOURCE If you want to browse for tips on putting your code together, a good place to start is the CreateJS thread on Reddit: www.reddit.com/r/createjs Remember when you could animate things in Flash and add ActionScript to make fun sites? Well now there’s a new way: with CreateJS (www.createjs.com). CreateJS is a set of JavaScript libraries created by ex-Flash god Grant Skinner. Modular libraries including Tween, Easel, Preload…

We have been keen supporters of the idea of responsive web design since the very beginning, and, boy, have we come a long way. It’s not a theory any more. It’s now a well-established standard that has truly revolutionised web design. That doesn’t mean it’s got any easier. Designing for a myriad of devices (and global audiences) poses significant challenges. And thanks to Google’s mobile-friendly update last year, it’s now more important than ever to figure responsive design out. So for this special guide we have invited some of the best experts to cover the issues that should be integral to every responsive design project: Ben Callahan discusses the difference between responsive and adaptive design, Matt Gibson dives into content strategy, Sarah Drasner explains how to create scalable animations, Andy…

When I graduated from college, I took a job as a software engineer. I was basically responsible for fixing the bugs. I worked with this guy (we’ll call him John) who was my ‘tester’. Any time I committed code, John was notified and would test it for me. Nine times out of 10, he denied my requests to merge code and rejected my work. Nine times out of 10, the work I was submitting was actually correct and ended up getting merged. Let’s just say, John and I didn’t get along so well. So what was happening? John and I were operating from two different perspectives. I was looking at a problem from the context of a developer who wanted to build the best possible experience. This drove me to…

ABOUT THE AU THOR MAT T GIBSON w: cyber-duck.co.uk t: @duckymatt job: Chief creative officer, Cyber-Duck areas of expertise: UX, IA, HTML and CSS, project management Usually, when we talk about responsive design, we talk about implementation. We muse about how to use media queries, fluid grids and other techniques to make our designs stretch and adapt to any screen size or environment. While that’s a good start, these techniques alone won’t ensure our designs are easy to use across a plethora of platforms, let alone actually useful for our audience. This is where content strategy comes in. It defines which content we’ll need, and – more importantly – why we need it in the first place. MOBILE-FIRST The approach outlined by Luke Wroblewski in Mobile First is quite rightly touted…

JANK FREE www.jankfree.org The Chrome team’s performance website offers articles, videos and guides to educate developers on how to avoid performance pitfalls while animating. SVGOMG jakearchibald.github.io/svgomg Jake Archibald’s SVG optimiser can save you from an incredible amount of cruft. This visual GUI extends the terminal-based SVGO, but its visual indicator quickly shows you the results of your work. ANIMATION IN RESPONSIVE DESIGN 24ways.org/2015/animation-in-responsive-design Val Head’s responsive animation article presents different ways to implement responsive design with focused art direction and choreographed UX, without limiting performance. ANIMATING SVG WITH GSAP greensock.com/svg-tips This post takes you through a myriad of GreenSock features via live demos of capabilities and comparisons. Each section comes with links to their docs, which provide good jumping-off points. RESPONSIVE ANIMATED INFOGRAPHICS netm.ag/info-278 In this presentation, I take a…

ABOUT THE AU THOR ANDY DAVIES w: andydavies.me t: @andydavies job: Web performance advocate, NCC Group areas of expertise: performance, ecommerce, web development Mobile phones and tablets are quickly becoming the main way we access the web, with many retailers and news organisations seeing more than half their traffic coming from these devices. Phones and mobile networks are getting faster, but there’s still a huge discrepancy in capabilities. Cheaper phones tend to have slower processors and less memory – and even though 4G networks are being rolled out, we still spend large amounts of time connected to 3G or even 2G networks. 4G speeds in the US fell as more people switched, so faster networks might not save us, in any case. The sites we’re attempting to deliver are getting larger…