Indice dei contenuti per September 2017 in net

The world of web accessibility can be a daunting, confusing beast at the best of times. Even so, it should be at the forefront of how we design and develop digital experiences. As the web becomes the most important resource in virtually every aspect of modern life, it’s essential that it provides equal access and equal opportunity to people from all walks of life. Don’t worry, conforming to accessibility standards doesn’t mean sacrificing design or innovation, as our cover feature this issue – written by the Paciello Group’s Henny Swan – explains. We delve deep into the Inclusive Design Principles to show you how it is possible to design a better web for everybody. Our second feature looks at the fascinating trend of brutalist web design. It’s crude, confrontational and…

SVG BAD PARTS + Using SVGs on the web is in general pretty amazing, but it’s not all roses. In this article author Alkshendra Maurya discusses the limitations of SVG and looks at some workarounds for common points of frustration. Browser inconsistency, styling issues, code bloat and more are covered. netm.ag/297-SVG PSYCHOLOGY FOR UX + There are certain principles of psychology that are worthwhile for UX designers to bear in mind, and this concise article from UX Planet lays out some of the most useful. By learning how people perceive your interface elements, you can make your sites easy and pleasant to use. netm.ag/297-UXpsychology DESIGNING THE PERFECT ACCORDION + The accordion is a versatile design pattern that will help you solve all manner of complex problems, providing your users with…

DON’T WRITE FOR SEO “Ensure it’s written for humans first and not search engines – Google search engine, Bing, SEO, Google SEO, Google Google, UK Web Design…” says @Octavector. Of course SEO is important to get your customers to the site, but if you’re talking to a computer instead of them, it’s going to be a turn-off and you’re less likely to achieve your objectives. GET TO THE POINT How many times have you seen a site that puts their company philosophy or mission statement ahead of the actual information you require? “Get to the point,” says @benelliotleach “while being as personal as possible (no jargon), and presenting a problem and offering solutions.” KNOW YOUR AUDIENCE @Candorem echoes the point about jargon – “Use their terminology” – and also presses…

What we think (1) Flipboard (https://flipboard.com) has undergone a big redesign. Version 4.0 introduces a Smart Magazine feature that “quietly guides people to define their interests for any given category.” (2) CSS Database (netm.ag/297-CSSdatabase) is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards, written by Jonathan Neal. (3) Wix introduces Wix Code (www.wix.com/code/ home), a new solution allowing users to create powerful web applications. (4) Contrast (https://usecontrast.com) is a macOS app for quick access to WCAG colour contrast ratios. (5) Abstract (www.goabstract.com) is a new platform for modern design teams to work together. (6) Mozilla has launched Project Common Voice (https://voice.mozilla.org), a project to help make voice recognition open to everyone. Check it out.…

INFO job: UX strategist, author and professor w: jaimelevy.com t: @JaimeRLevy These days, most people know Jaime Levy from her book UX Strategy, widely regarded as the definitive work on the subject and published in six different languages. But there’s much more to the American author, university professor, interface designer and UX strategist’s career to date. Her journey began back in 1990, when she was working on her master’s degree at New York University (NYU) in Interactive Telecommunications. It was an exciting time, as she recalls. “I was surrounded by people who were trying to really push technology. Even back then we were doing stuff with virtual reality, reading cyberpunk books… It was a really good time to get fully engrossed in a mindset where ‘Hey, I’m not going to be afraid…

TOM GREEVER Author and UX director, Bitovi tomgreever.com By talking to my own team. I lead a group of designers at Bitovi, a web application design and development agency. The variety of client projects we work on exposes us to a lot of different trends and ideas on a daily basis. We are always sharing news, tips and ideas together, whether it’s over chat, at in-person training, or from our client projects. I find that my team is the best source of this stuff because we’re all working on the web every day. That kind of practical knowledge is invaluable. KATE BOLIN Marketing executive, Heart Internet www.heartinternet.uk I don’t keep track as much as I should. Newsletters provide me with a lot of information, right in my inbox. I can skim, click…

Sublime design & creative advice PROFILES AMY PARKER Amy runs Fore Design, a brand-driven visual communications studio in Boston. w: foredesign.co t: @amyhparker LUKE BURFORD Luke is a UI designer and front-end developer based in Cornwall. w: lunamedia.co.uk t: @lukevburford PAOLO CAGLIANI Paolo is a visual designer at E3 srl. w: www.linkedin.com/in/paolocagliani t: @cagliani_paolo BRIEF This month we would like you to design a website for a fictional cabaret act. This gives you a chance to be really creative with imagery, type and anything else you can use to make your design convey some of the fun and atmosphere of the show. AMY PARKER PARIS JE T’AIME A minimal, Swiss-style site with rotating colour palette I thought it would be an interesting challenge to convey the fun, energetic, ‘rowdy music hall’ vibe of a cabaret in…

How long have you been running brutalistwebsites.com? I set up Brutalistwebsites.com in 2014 as a personal project. It took me about 15 minutes to set up the whole page. It’s still a personal project, but one with around 100,000 visitors per month and a lot of attention from media outlets worldwide. What’s the appeal of brutalist web design? Ignoring the rules to come up with something unexpected. But to do so, you have to know the rules. What processes are involved in making a brutalist site? A lot of submissions are created on a lowtech level by just using notepad. There’s no ‘best practice’ on how to create a brutalist website, but starting from scratch with just an editor is a good start. Is this web design’s punk rock moment?…

Over the past few years, there have been several cases of popular ISPs (Verizon being one of the big ones in the United States) injecting ads or tracking cookies onto other people’s websites. This has been done so they can track people, or provide them with unsolicited advertising. The worst part of this is that the ads could appear on any website that you view, regardless of whether that website wants to display ads at all, and of course, all the proceeds would be going back to the ISP rather than the website owner. To do this, the ISPs are injecting content directly into requests that are sent using insecure HTTP. On the other hand, requests sent securely don’t have this trouble at all, since the content of the request…

ABOUT THE AUTHOR TYLER NICKERSON w: tylernickerson.com t: @tylernickerson job: Freelancer areas of expertise: HTML, CSS, JavaScript View source files here! All the source files you need for this tutorial can be found at netm.ag/297-pushJS As the popularity of smartphones has risen over the past decade, the demand for real-time information delivery has grown exponentially. Gone are the days of commenting on a Facebook post and waiting for an email to inform you someone commented back. Today, all information comes in the sound of a buzz and in the form of a notification on your lock screen. Not only has this new form of information delivery significantly streamlined a user’s ability to receive information regarding the platforms they use, but it has also managed to significantly improve user engagement as well. Users are…

This tutorial only scratches the surface of Push and Firebase. To learn more about these two powerful frameworks, check out the resources below. PUSH Push.js: An introduction blog.tylernickerson.com/push-js-an-introduction-49291ac986e8#.t7o5izwi9 My personal introduction to Push.js, written last year, discussing the motives and goals of the library. Quick Tip: The easiest way to show browser notifications tutorialzine.com/2017/01/the-easiest-way-to-show-browsernotifications A tutorial on setting up local notifications on your website via Push. Push.js FCM plugin github.com/Nickersoft/push-fcm-plugin Full documentation and source code for the Push FCM plugin. FIREBASE Set up a JavaScript Firebase Cloud Messaging client app firebase.google.com/docs/cloud-messaging/js/client Further documentation on the Firebase Cloud Messaging API, as well as how to send messages to multiple devices.…

ABOUT THE AUTHOR MARK GOODYEAR w: markgoodyear.com t: @markgdyr job: Co-founder of Big Bite Creative areas of expertise: JavaScript, HTML/CSS, React/React Native INTRO TO REACT NATIVE React Native is a platform that lets us build native mobile apps using JavaScript. As the name implies it uses React, so composing mobile interfaces is relatively the same as using React on the web. Rather than creating components using HTML tags, it has its own set of components that bind to native UI components. React Native can be tricky to set up, especially when it comes to push notifications. We’d need to set up certificates and dive into Objective-C for iOS and Java for Android. However, Expo eliminates the need for this. INTRO TO EXPO Expo lets us create React Native apps and deploy them…

React Native is a framework that lets you build native mobile apps using just JavaScript. Getting started can be a scary place with needing to learn tools like Xcode and Android Studio, setting up developer accounts and certificates, and diving into Objective-C and Java to get things up and running on a device. No more! This is where Expo comes in. Expo is essentially a toolkit that bridges the gap and makes getting started with React Native a joy. Also you don’t need to get your hands dirty with the lower level side of things. From development, to distributed testing, to publishing an app, Expo has it all handled.…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... CHRIS KALANI Based in San Francisco, Chris is a CEO and founder of Wake, a tool that makes it super easy for designers to share work and collect feedback from their team. He was previously product designer at Facebook, where he was instrumental in the design of Facebook Messenger. w: wake.com KRISTA RADOEVA Originally from Bulgaria, Krista works as a type designer at Fontsmith, a leading boutique type foundry with a complete font design and production service, based in central London. w: fontsmith.com QUESTION OF THE MONTH Do you start out planning to earn revenue after a certain amount of time, or do you have any tips on what’s worth investing time in? Tom Wade, Leeds CK: Most of the early work should be…

ALYSSA LOW Product designer at Eight Bit Studios w: alyssalow.com HIDDEN BRAIN While I’m designing, I like to listen to NPR’s Hidden Brain podcast. Every episode addresses unconscious patterns that drive human behaviour through science and storytelling. This sort of critical thinking allows me to broaden my approach. netm.ag/297-brain PUZZLE GAMES As a product designer I’m always coming up with the best way to solve a problem . My two favourite mobile games are Two Dots and Monument Valley. Aside from being aesthetically pleasing, the way the puzzles are designed stretch the way I problem solve. FLIPBOARD Staying up to date on current events is important to me. The Flipboard app is great because I can curate the content based on my interests. I love that everything I’m interested in reading…

GENERATE LONDON Date: 20-22 September Location: London, UK net magazine’s very own conference is back at the Royal Institution for three days of insight, inspiration and practical take-aways. generateconf.com HIGHE DWEB 2017 ANNUAL CONFERENCE Date: 8-11 October Location: Hartford, USA HighEdWeb is created by and for all higher education web professionals who want to explore the unique web issues facing colleges and universities. https://2017.highedweb.org MIRROR CONF 2017 Date: 10-13 October Location: Braga, Portugal MirrorConf is a conference made for front-end developers and web designers held in a laid-back environment. Speakers include Jeremy Keith and Brad Frost. http://www.mirrorconf.com BEYOND TELLERAND Date: 6-8 November Location: Berlin, Germany Marc Thiele’s much-loved web design conference returns to Berlin for another year. Speakers include Paula Scher, Jonathan Snook and Pip Jamieson. https://beyondtellerrand.com PIXEL PIONEERS Date:…

When Apple opened up the App Store in 2008, my first thought was I can program those type of apps, so I decided to give it a try. After a while, I found that while I really enjoyed writing and designing mobile apps, I really didn’t enjoy the languages used. Objective-C (iOS) felt old and outdated, and to be honest I have never really liked Java (Android). It was frustrating to enjoy what I was creating, but not the tools I was using to create them. Then something incredible happened - Apple announced Swift during the 2014 WWDC. I was first introduced to programming when I was 13 years old. That was 35 years ago. Ever since then, I have been infatuated by all things related to computers and tech,…

Brutalist Framework brutalistframework.com Many web brutalists pride themselves on hand-crafting beautiful code in Notepad, but if you’re just getting started this open-source framework could be essential, providing readymade templates, grids and effects, as well as typography class helpers. It’s tough out there netm.ag/297-tough Want to learn more about brutalism? This article on the less warm and fuzzy side of the web covers it all, from its architectural origins through to code samples and plenty of helpful guidelines on fonts, palettes, imagery and language. Complexion Reduction netm.ag/297-reduction It’s not just brutalism; here Michael Horton from SWARM in NYC outlines Complexion Reduction, a minimalist trend in app design that shares much of the web brutalism philosophy with its focus on bigger, bolder headlines, and simpler and more universal icons.…

Setting up push notifications can prove to be a tricky thing to accomplish, especially if you’re not familiar with native iOS or Android development. For iOS you will need to join Apple’s Developer Program at £79 per year. You will then need to create certificates that have push permissions and set up provisioning profiles to be able to run an app on a device. For Android this is a similar process so you will need to sign up to Google’s Play Console, and pay a one-time fee of $25. You’ll then need to set up a key for the Google Cloud Messaging Service. Both of these methods will require native code implementations to complete the process. With Expo, this is all nicely handled for you out of the box so…

+ Space: Balance between black and white is essential, especially on screen where we have the limitation of pixels. Look for a typeface with a large x-height, open counters and terminals, and generous proportions and spacing. + Hinting: Hints are an added layer of data within a font that describe the degree by which a pixel should be turned on or off to improve the quality of a letter when it’s set at a specific pixel size. Despite improvements in screen resolution, font hinting is still an essential type design process. + Weight: No matter the proportions or the hinting quality, you should be careful with the choice of weights for web. A very light or very heavy font is a big risk, as weight can change dramatically across browsers…

BEYOND PIXELS Nobody can ever forget the first time that they watched Star Wars. Aged only six years old, I remember going to the cinema with my older cousin Mike to watch The Empire Strikes Back. It blew my mind. I was hooked. Luckily, Mike already had a few Star Wars toys, so we could immediately re-enact those epic battles. Now I wanted my own collection of Star Wars toys. I used to regularly go to my local toy shop, Dentons in Witney, Oxfordshire and pore over the wall of Star Wars figures on display. As you can imagine, now top of my Christmas wishlist was the iconic Millennium Falcon ship. After Return Of The Jedi was released in 1983 and my cousin started to grow out of playing with…

Think back to your latest digital project. I imagine it probably happened because something old had problems, or someone identified an opportunity to do better. Almost all of our projects (excluding those for learning or fun) are borne out of a desire to improve. We want to make websites faster, more secure, look nicer, or be easier to use. The rate of change of technology available to us means there’s always something we can be tweaking to take advantage of the latest spec, API or library. Nothing stands still. Everything moves and we, as people who work with the web, move with it. CHANGING FOCUS My career’s a good example. Starting out as a back-end developer, I got more and more interested in ‘whys’ and my work shifted towards discovery…

CATT SMALL Catt is a Product Designer and game maker who enjoys designing experiences at Etsy and teaching people to code. Bronx born and raised. w: @cattsmall t: www.cattsmall.com SITE OF THE MONTH GOOGLE EARTH, CSS, HTML 17776 https://www.sbnation.com/a/17776-football The brainchild of Jon Bois, 17776 is a strange experience about the future of American football. “I’m a lifelong football fan and an American, and it’s very complicated to be either,” Bois said. “I decided to try to filter out the things about both that I hate, and present a concentrated idea of the things about both that I love.” That love turned into a 25-chapter story, which unfolded on the site throughout mid-July. Bois worked with developer Graham MacAree, two editors, and fellow designer Tyson Whiting to build the site. MacAree created…

What’s on your desktop? A screenshot of a client promising me and my team a round of beers. Other than that my desktop is very neatly organised with folder structures – just cleaned it up. It will only last for a few more days. What hours do you work? From 9am to 6pm – in fact, I would say that we are really good at not overworking, and unnecessarily burning the midnight oil. There is a big understanding from all managers that all dogs needs to get their rest and spare time to practise our endless talents. What goes on in the office? We make sure we keep up with all the latest trending memes and viral sensations. If we can do so by pulling a joke on one another…

ABOUT THE AUTHOR DANIEL SCHWARZ w: https://mrdaniels.ch t: @mrdanielschwarz job: Co-Editor at SitePoint areas of expertise: Interface Design, UX, Sketch With the introduction of Sketch Cloud, a rethought file format and a brand new subscription-based pricing model, Sketch has had an exciting run. Besides a string of small but highly intuitive improvements, Sketch Plugins now update automatically, and outdated ones are disabled. Plugin management is heaps better, and the library is getting bigger with every day. So let’s take a look at ten of the best Sketch Plugins that are drastically changing the way that we design user interfaces. Group Resizing is a native feature that was added to Sketch late last year. It lets the user change the way that objects react when their artboards or parent groups are resized –…

ABOUT THE AUTHOR TIM HOLMAN w: codepen.io/tholman t: @twholman job: Engineer at CodePen areas of expertise: HTML, CSS, JavaScript MOVING TO HTTPS CodePen provides its users with a development playground, whereby people can create small webpages that we call Pens. These Pens are a mix of HTML, JavaScript and CSS and are used for a wide variety of reasons. Whether it be to show off a UI concept, an API, to debug a problem or to show off some fancy Canvas work – CodePen aims to be the one-stop shop for quick, unhindered development. The move for CodePen to being entirely HTTPS was a large one. We have over 15 million Pens created and since CodePen puts no serious limitations of what people can create, over three quarters of Pens created have…