Inhaltsverzeichnis für January 2019 in net

Given the web’s aim is to bring us together, it’s vital to ensure that we’re all equally able to access it. According to the World Bank, over one billion people – or 15 per cent of the world’s population – have a recognised disability (https://netm.ag/2qKDLBX). But evidence submitted by AbilityNet to the UK government’s Work & Pensions Select Committee’s Assistive Technology Inquiry found 90 per cent of sites don’t even meet single-A compliance with the Web Content Accessibility Guidelines set by the W3C – meaning that they fall below the legal minimum of AA (https://netm.ag/2RQ1zzO) Doing the bare minimum in terms of accessibility – whether it’s supplying alt text for images or sticking to a 16-pixel font size for body text – is no longer enough. Which is why we’ve…

Design for digital platforms has the potential to influence the lives of billions of people around the globe. It is, therefore, our ethical imperative to ensure that digital products and services are designed to be as inclusive as possible, by ensuring they can be used easily by everyone. However, despite being well-intentioned, organisations of all shapes, sizes and sectors currently fall short in this regard. Considering our increasing reliance on tech and digital services, a world in which we do not consider the ethical consequences of our design decisions is a world in which many people may be discriminated against, excluded and potentially even harmed by the tech we increasingly rely upon. As the saying goes: “the road to hell is paved with good intentions”. Unfortunately many well-intentioned designers and…

Everyone should be concerned about web security. Whether it’s online banking or casual browsing, users should be confident that the connection they make to a site can’t be eavesdropped on or tampered with. HTTPS is the mechanism to achieve this and you’ve probably seen many HTTPS URLs. It provides two-way encryption between a client and server using a protocol called Transport Layer Security (TLS), which helps ensure that the website the client is communicating with is the real thing and that nobody can intercept and read or modify the communications. Achieving this relies on both ‘symmetric’ and ‘asymmetric’ cryptography. Symmetric encryption is straightforward: you encrypt information with a key, share the key with someone else and decrypt it with the same key. Asymmetric encryption uses a pair of different keys…

https://www.access-is.com/ Without getting too political, this website could see some even bigger traffic spikes post-Brexit. That’s because Access IS is a developer and manufacturer of those electronic systems that both enable – and presumably disable – the movement of people. Programmable keyboards, plus passport, ID and ticket readers are typical examples, targeting multiple industry sectors and global client brands. This new brochure site from Hampshire agency Bigger Picture, skilfully places those fairly dry technical products into a backdrop that immediately makes sense to every visitor. “Our animated 3D digital city allows us, in 19 seconds, to show a variety of scenarios where people interact with Access IS products in everyday life,” explains Bigger Picture’s MD Simon Bonello. “Each target sector is clearly shown to ensure quick interest and engagement from…

parall.ax In the midst of a recession and a terrible jobs market, a meetup for drinks and cocktails in Leeds, United Kingdom, in 2010 eventually led to the formation of Parallax (parall.ax). Between its four founders there was a salesman, designer, front-end and back-end developer – enough to band together and start earning for themselves by making bits of the internet. Since then Parallax has grown into a well-respected digital marketing and product innovation agency with clients located all over the world. We spoke to the team – Dario Grandich, director; Liam Bush, head of marketing; Jack Sails, account director; and Jamie Sefton, head of back-end development – to get the inside story. How would you describe your studio philosophy? Sails: We’re always looking for ways to improve and every…

Close up (1) The homepage features a large-scale image region, which gives an immediately visual, cinematic element to the site. This region can also support video content. (2) Every page has a unique footer reveal featuring important information for visitors. This gives the effect of having the rest of the site overlaid on this footer. (3) Rather than just have bog-standard text, the 404 page features an iconic scene from a cult film, providing a relevant, surprising and comic element for visitors. (4) The no search results page also features an animation in line with the website’s audience that is both funny and on topic. (5) Links feature micro interaction as the bar changes colour before the arrow moves when hovered over. This delayed animation adds extra refinement to the…

+ There are plenty of sites already making use of Gatsby’s powerful rendering system. Here are some of the best. React reactjs.org React itself uses Gatsby for its site. In order for bots to easily crawl the documentation, the React team needed a solution that involved server rendering. The solution was to use “gatsby-plugin-feed” to generate a fresh RSS feed for the blog each time an update is posted. Every update automatically builds a new version, enabling others to preview the changes. State of JavaScript stateofjs.com The annual State of JavaScript survey collects information from developers about the tech they use. Each year a microsite is generated to display the results. Gatsby enables the core data to be displayed while the JavaScript-powered charts load in the background. Each page is its…

+ Wireframes and flowcharts are basically diagrams created early on in the design process as a way of developing the core UX of a design. A wireframe is the skeletal structure of a screen (or series of screens) that show the content and user interface in its most basic form. Fundamentally, wireframes consist of text, lines and shapes. They are designed to help develop the most important aspects of usability, accessibility and the overall user experience before starting to think about visual aesthetics. When designers refer to mid-fidelity design (or sometimes low-fidelity design), they’re often referring to creating wireframes. High-fidelity would be considered fairly detailed with the addition of colour, fonts and other visual aesthetics. We‘d typically move up to screen design tools for that. But how do we decide…

In our previous articles, you have learned all about shaders and how to get them into your 3D projects. You learned how to make cool glitch and blur FX shaders as well. This tutorial continues the series by showing you how to add post-processing effects via the EffectComposer in Three.js to create your own creepy fog or smoke effects. The effect you will be creating can be applied to 3D scenes as a post-processing effect. It’s written as a graphics shader and can be used in other frameworks such as Unity, openFrameworks or Processing. PART 1: SET UP A 3D SCENE GET A 3D MODEL Go to Sketchfab (https://sketchfab.com/models/) to grab a 3D model. We used Crypt Location by bocharova for this tutorial. Use GLTF as the format. It’s super…

+ At Zopa.com we build apps that start small but often scale up to millions of users. Therefore we must carefully consider organising our code so it’s easy to use and maintain. Senior developer Alexis Mangin shares his experience: “Categorising files based on what they represent is an easy way of partitioning your project and has became a popular practice with developers who use patterns such as MVC. In our experience, that’s okay when you work on small applications but it can have a tremendous effect on the team’s velocity as the application grows. One way to avoid poor-planning headaches is to structure your codebase around the concept of modules, each with its own responsibility. Creating a module means you will group a set of related components, methods and assets…

CLIENTS FROM HELL A friend referred me a client who had written a book and needed a website to promote it. My friend told me that the client had – and I quote – “a lot of money” and that I shouldn’t be modest with my estimates. He already had WordPress set up but needed a custom theme developed as well as a few features added. Me: Given the scope, my estimate is $XXXX. Client: Oh, no, no. I can only afford a quarter of that. I can give you $XXX and not a cent more. Now, my friend said this guy was rich but I didn’t know if that was true or not. Maybe $XXX was a lot of money for him. Me: Well, I can cut out some…

Can you introduce yourself to those who might not know you? I’ve been designing and building websites and digital products for 20 years, so I was an early webstandards advocate scarred by the browser wars. Way back, I wrote books about CSS and spoke at events all over the world. These days, I try to blend into the background, make sense of all the pace and complexity. I believe that designers should care for the arts and humanities and draw from a vast array of diverse inputs. I also think digital tech can be a force for good if we commit to that version of our future. You’re also known for organising the New Adventures conferences. Why do you think these were so popular? New Adventures began as a trilogy…

SITE OF THE MONTH https://timeforamammogram.breastcancerfoundation.org.nz/ When it comes to health, government agencies and charities are increasingly innovating with their outreach channels. Keen to leave a lasting impression on the public, this compelling site on behalf of New Zealand’s Breast Cancer Foundation achieves the goal thoughtfully. Colenso BBDO’s enlist of Resn has proven a genius move in blending custom fragment shaders and physics engine work with highly emotive storytelling. “Time for a Mammogram emphasises how breast cancer impacts not only the affected individual but the entire family,” explains Dan Mercer, project creative lead at Resn. “The imagery and motion are symbolic of the cellular spread of the disease, while the simple interactions focused the narrative structure and messaging.” Visitors are encouraged to “help stop the spread” of the on and off-screen…

https://kobu.agency/ Portfolio sites, unsurprisingly, continue to provide some of the web’s most fertile ground for creative expression and inspiration. This online calling card for Portuguese agency KOBU follows that ethos with actually a very tasteful and restrained design, still bubbling with character. Calling itself a “brand laboratory” that is unafraid of experimentation, the technical work here instead demonstrates imagination over complexity. Over a series of elements, we get a reminder of how CSS and SVG can be combined for maximum front-end character. Absolute positioning is used to overlay charming wireframe motifs, breaking up the lines between bold background colour blocks and link sections together. A looped HTML5 video panel gets a unique wiggly edge using an SVG shape as a mask positioned above, before case study images have their border…

Beyond is a fitness brand for people who want to excel in their exercise effectiveness while using a high-quality product and service. ‘Going beyond the typical’ is the theme. So products are made of the highest grade material and services are designed well and tightly integrated. This homepage impresses the first-time shopper by showing the brand’s comprehensive offering: products, digital services and community connections all working together. Bright colours push photography beyond the normal spectrum. While this is laid out as a desktop view, the mobile view would be a hub-and-spoke navigation. The three main segments would be the hub in one screen and then users would navigate each segment spoke individually. This approach would also play well into web marketing links and promotional landing pages. The Beyond app would…

+ When starting a site for the first time, Gatsby asks for any starters it should use. A ‘starter’ is a ready-made package with a set of features ready to go. They can be a great way to try out Gatsby without having to set anything up. Here are some starters that are great for a few common scenarios. Gatsby Starter Deck github.com/fabe/gatsby-starter-deck It’s always a good idea to have presentation slides hosted online. What’s even better is if these can be cached offline and easily digested for use in bookmarking sites. This starter will generate slides for content written in Markdown. Gatsby Docs Starter github.com/ericwindmill/gatsby-starter-docs API developers will always need a way to be able to document their code. This starter provides a layout suited to quick referencing and code snippets.…

+ You are using Three.js as the WebGL renderer in this tutorial. If you are not familiar with Three.js, here is a quick primer on the elements you will be using. The scene The scene is a container object that encapsulates the other objects and elements that we wish to show. Camera Three.js has a few different camera classes, including a perspective camera, which we will use for 3D, and an orthographic camera, used for rendering 2D scenes or UI elements. Renderer The renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. Typically you will call the renderer to render each frame. Materials Three.js comes with several materials, such as Normal, Basic, Lambert, Phong and Shader. Materials are used to…

+ GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, Three.js, iOS games, interactive installations, Unity, openFrameworks, Processing and many others. The graphics pipeline Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline – vertex shaders and fragment shaders. These are the core of the OpenGL shading language and the WebGL graphics pipeline. Vertex shaders Vertex shaders handle the processing of individual vertices, which can be thought of as points on the triangles that form a mesh. Vertex shaders are used to transform…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH The people behind fintech (financial technology) often boast about being ‘disruptive’. But do we really want our economic life disrupted any further than it has been since the 2008 crash? David Smith, Cork, Ireland LF: Disruption in fintech terms is, I believe, about applying the latest technology to improve access to and experience of products and services. In fact, rather than undermine financial institutions, it is democratising access to data and information and empowering end users to make more informed decisions. Look at online banking: that was disruptive ‘fintech’ when it first arrived but it revolutionised personal banking by making the process easier and more convenient. Today, with the new regulation in place, fintech and financial institutions are accountable in ways…

WORKSPACE When trying to picture Kinetic’s space, we find it best to imagine one of the oldest buildings in Birmingham, Alabama, juxtaposed with a Cowboys & Aliens themed interior. Since Kinetic started in 1995, we have been helping companies worldwide understand and apply the latest internet technologies in an innovative way and where we work has always been an extension of that same creativity. When we outgrew our original space down the street, we felt it was time to really let our creativity run wild. We teamed up with a local designbuild firm that truly understood our vision. We started with a foreclosed building that had previously been a total of four restaurants and three nightclubs and this is the result. Situated on one of the last cobblestone streets in…

https://timeless.ee/ It would seem that Gallery-worthy websites are like buses; you wait a month for them and five arrive at once. However, this mobile-first example by Kiev-based agency Hexagon in fact delivers a fleet of 14 buses, representing the boutique rental service of Timeless. What we get is a mixture between museum brochure and vehicle-hire catalogue, built around a gorgeous array of professional photography. Celebrating the classic retro appeal of each model, the site sticks to modestly modern colours and typography. Two column layouts react responsively to screen size, while the black versus white flipping of text and background keeps paragraphs legible. The content itself is then floated into view with all the grace of an Ikarus Lux, employing subtle GSA P effects on scroll. The biggest highlight is one…

https://biglavendergame.com Big Lavender Game is a hilariously engaging shoot-em-up to promote an Old Spice launch at Walmart. Produced by Wieden+Kennedy and those digital high priests at MediaMonks, players control bazooka-wielding Teven Garramondi. Reluctantly coaxed out of retirement, our hero travels to three locations to blast rogue plants and fill bottles of body wash with scintillating scents. Built on a custom WebGL engine alongside Unity for level creation, the developers used a novel 2.5D solution to render background and static objects. “This is done by pre-computing a colour-and z-buffer of the static environment and rendering these buffers to the screen first,” reveals creative director Rhys Davelaar. “[This] makes the game run smoothly [and allowed] us to place the objects in the WebGL engine in 3D. Finally we worked with a PBR…

There seems to be a gap for a shoe-shopping destination that feels bespoke to shoppers for two main reasons: it matches new shoes and clothing to their existing wardrobe and it recreates a high-street decision-making process where decisions on which shop to visit depend on what that shop sells. For the user, both of these would reduce the cognitive load required when making purchase decisions, increase engagement and margin through multiple purchases. Retention would also be higher with the option to get the same look for less. All the first-look imagery is of people wearing shoes. Most sites have static product shots, which makes people have to think about how they would look on their own feet. As well as responsive imagery, the copy is responsive. Scrolling happens quicker on…

It’s nothing new to promote the notion that accessibility should be a key consideration at the start of any design project. In reality, tight budgets and timescales can often render the big features needed to make our digital products fully accessible either neglected or considered ‘something to add in later’. The end result is that while broad-brush accessibility best practices get implemented, many of the finer elements of accessibility or inclusive design can often be overlooked. Fortunately, as you’ll see, many of these oversights can be addressed with minimal effort. Taking just a handful of these points into consideration may help empower an additional percentage of your audience to better engage with your digital products in ways that they otherwise wouldn’t have been able to. Remember the alt In a…

In the past, developers have often approached their new web projects with the mindset of developing everything from scratch. When we would begin a new project that called for similar functionality to an existing project, we would simply copy and paste the relevant code from the older project into the new one, whether it be a simple button or something much more extensive such as a full login form. Some of us developers still follow this approach and there is nothing wrong with that. The concept of component reusability is nothing new but it has probably only attracted most developers’ attention over the last couple of years. Let’s not get confused about what component reusability actually is. You should always think of code reusability as a development strategy. Components are…

Frameworks like React only send JavaScript down to clients, which is then used to create the elements onscreen. The HTML that loads on the page is minimal, as all of the content is generated on the client side after everything has loaded. In projects that have dynamic data, such as a blog or a shop, the JavaScript has to come down first before any other data can be fetched. Even when using speed-boosting techniques such as code splitting, if the bundle fails to download, the entire site will stop working. Static-site generators take dynamic content and create pre-built pages ready to serve. If the data does change, the project can be rebuilt and the new content served. The end result is improved speed, scalability and – without constant connections to…

Creating sitemaps, user flow diagrams and wireframes as part of the UX design process serves two main motives. To begin with, it helps designers plan design projects so that they don’t become too complicated later down the line. It’s really easy to think of an app or website design as simplistic when we’re designing the first few screens but as the number of screens increases, it’s not uncommon to wish that we had dedicated more time to planning, as taking steps backwards is a lot harder the further we get into a project. What’s more, breaking down the development of UX into smaller steps offers designers more opportunities to involve users and stakeholders in the core decisions, which is really an opportunity for the designer to collect valuable feedback that…

Typography has to be accessible and consistent, regardless of what platform or device it is viewed on. Office printers, smart-home displays and smart watches are viewed within different contexts and from different distances. Furthermore, the physical size of the rendered font depends on the font metrics. This means Roboto will be different in size to Avenir, even when both are set to the same point size. To complicate matters, the same font will differ in size depending on the rendering engine. Little Voice believes accessibility needs to go beyond guidelines and consider how the user ends up seeing something. This said, we struggled to determine what font size was best for readability. So, we drew on scientific research published in 2011 by G Legge and C Bigelow (https://netm.ag/2zk29yc). The Legge-Bigelow…