Innholdsfortegnelse for No. 261 i Web Designer

“Bots allow for a more human experience with technology, and it’s now possible to write something simple in one evening” THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content WebVR, WebAR, Chatbots. Are you using them? We all know the web is forever moving forward. But, it’s when new specifications get browser support that things start to get interesting. So, what are the design trends that are/ should be making the web a better place today? WebVR, chatbots, SVG, CSS Grid, microinteractions, voice search and WebAR may not be new, but now’s the time to be using them. Who better to ask than those in the industry? They are at the forefront of…

If you need an instant hit of Web Designer, then check out our digital specials. ‘The Web Apps Handbook Volume 2’ and ‘The Developer’s Guide to JS’ reveal the best tools and methods to build apps with web technologies and learn how to get started with ES6 and NPM. Don’t forget ‘Animate with HTML & CSS’ and ‘3D and the Web’. We cherry-pick a collection of the best animation and 3D-related techniques to add interest to any project. Plus, check out ‘Advanced Angular’, ‘20 Quickfire HTML & CSS Techniques’ and ‘Amazing Websites and How to Build them Vol 03’. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl download the free Web Designer app and find them waiting for you as an in-app purchase.…

UX London 2017.uxlondon.com A collection of engaging industry leaders presenting a combination of inspirational talks and hands-on workshops. UpFront 2017.upfrontconf.com ‘A front-end conference for anyone who makes for the web’. Get inspired by a number of well-known speakers. HOW Design Live howdesignlive.com A large gathering of creative professionals, with speakers, previews and workshops. An Event Apart bit.ly/2nYDyIH Three days of intense focus on digital design and UX. Speakers include Chris Coyier, Jen Simmons and Val Head. Respond webdirections.org/respond16 Respond addresses challenges designers and developers face in delivering modern, responsive web experiences.…

“Personalisation is key. You want to be sending out highly targeted, laser- focused messaging to individuals and tailoring it to them” When I first started ALT 11 years ago, there were far fewer ways to acquire clients than there are today. It’s also far more competitive today, but finding a constant flow of clients shouldn’t be all that daunting. Customer acquisition comes down to trialling a number of things on a small scale and then doubling down on what works – while all the time tweaking to improve what does already work. The first thing to be aware of is that personalisation is key. You want to be sending out highly targeted, laser-focused messaging to individuals and tailoring it to them based around some key personal information you may have…

1. Document structure Start the project by initiating the main HTML document. This step defines the document structure for the HTML document and its inner sections for head and body. The head section is used to store descriptions of the document as well as links to external resources – the CSS file in this case. The body is used to store the visible content elements, to be added in the next step. 2. Navigation content The example makes use of a navigation that has the liquid effect applied to it when hovered by the user. This is made from a nav container containing a series of links for the navigation. Inside the nav container, it’s important to have two span elements as the first items – these will be used…

MailChimp is a company built on enabling small businesses to grow without compromise. We worked with Droga5 to create a web campaign that shows MailChimp practises what it preaches: Being creative and true to yourself is good for business. The campaign, Did You Mean MailChimp?, was inspired by a now-famous incident in which a 13-year-old Norwegian girl inadvertently mispronounced MailChimp as ‘MailKimp’. We took that idea to the next level by creating a weird alternate multiverse where everything isn’t quite ‘MailChimp’. The ideation process started with a laundry list of MailChimp name variants. During the creative process, we whittled this down to nine favourites and developed a website for each. The process was highly collaborative, with both Resn and Droga5 bringing ideas to the table. WhaleSynth is an instrument that…

Resn was asked to showcase the cutting-edge, water-resistance features of the new Converse Chuck II’s by creating an interactive music video featuring 23-year-old Korean trap superstar, Keith Ape. The result is Converse Diamonds, our WebGL-saturated, interactive music video, made in partnership with Anomaly and BRTHR. To make a psychedelic interactive experience, we unleashed a flood of user-activated hallucinogenic GIFs, leveraging unique, in-camera shots and B-roll footage from the music video shoot. We built a custom online platform to deliver our GIFs and allowed users to activate them from desktop or mobile. We created the innovative real-time WebGL water effects using a displacement map as a fragment shader – a technique we like to call WetGL. One of the biggest challenges we faced was enabling the video to display the water…

Microsoft Bot Framework dev.botframework.com A bot framework from Microsoft allowing .NET developers to build and connect powerful bots to popular messaging platforms leveraging existing dev skills. “Open-source Bot Builder SDKs allow you to build dialogs; Cognitive Services enable bots to see, hear, interpret and interact.” Facebook Messenger Platform messengerplatform.fb.com Create a bot using Node.js on the social media giant’s Messenger platform. “Now people won’t need to download an app to interact with you. Just build your bot and instantly reach people on whichever device and platform they use.” Based on the technology of wit.ai. Motion.ai  motion.ai “If you can draw a flowchart, you can create a chatbot.” A simple no-code approach to creating chatbots, with integration to major channels including Facebook Messenger, WhatsApp and Slack. BUILD…

1. Utilise local listings Most people use voice search to get information about physical places they want to go. Voice search can recognise ‘near me’ searches and turn to the Google My Business listings to populate the results. Make sure your Google My Business account is up to date and select relevant categories. 2. Target long-tail keywords People talk differently than they type, think how you would speak naturally and search for things verbally via voice search. Inevitably these will be longer keyword phrases, which should address any questions or concerns your audience may have. Be conscious of the ‘why’ behind what users are searching for. 3. Make the most of Schema – data markup Schema enables you to comprehensively ‘describe’ what the data on your website means, which in…

Navigation is one of the most important elements of your website, so in this tutorial we’ll be creating a modern overlay-style menu using jQuery and Flexbox. Starting with the layout for mobile, we’ll stack the elements on top of one another and then move on to horizontally align the navigation items and share the available space between them. We’ll use Flexbox to fix the whole content block, perfectly centred at a set maximum width, allowing the height to be dictated by the content. We’ll be creating the menu and close icons using CSS from the same elements, with just a simple class addition. We’ll be using jQuery to handle the opening and closing of the menu by toggling a state class on the container. We’ll be using the code from…

Data attributes are used to store custom metadata for a specific element instance in your code. Having data available in the DOM is frequently useful as a developer, but there used to be no straightforward way to achieve this, leading to hacks involving class names. Now, where you need additional data about an element and there isn’t an existing attribute to meet your needs, you can define your own attribute of the form <element data-*=’value’>. The value can be any string. The attribute name must be of the form ‘data-*’, and be only lowercase letters using hyphens for separation. Helpfully, it is converted to camelCase for use in your JavaScript. For example, data-mountain-height becomes mountainHeight. Data attributes have been implemented in all current browser versions, so there’s no reason not…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need. What we offer • Managed…

01. Shantell Martin shantellmartin.art Black and white brought to life with some smart rollover effects. 02. Riverdale Comic Creator riverdalecomiccreator.tumblr.com Interactive comic book graphics engage the viewer in the story. 03. Visit Britain expedia.com/greatbritain Clever multiple in-sync video snapshots tell a tale from different destinations. 04. 15 Years of SB Dunk swoo.sh/2o9R53A Love Nike trainers? Then celebrate with this online homage with smart transitions. Graphics Charles Williams bit.ly/2ofXNSn Charles Williams is a very talented illustrator and produces gorgeous typography. Take a look and be inspired. Colour picker Dream Machine bit.ly/2nur0ZJ Typesetter Born Ready   bit.ly/2oxiCs3 A dry marker handwritten font with textured lines that comes in three different styles: Regular, Slanted and Upright. WordPress Honshi bit.ly/2oxC1sA A multi-talented and multi-purpose theme with a strong focus on big, bold typography and…

“For the MVP to be successful, it has to have a minimum level of user experience to communicate the value of the product” More and more designers are thrown into cross-functional agile teams these days. What would be your worst nightmare working in an agile team as a designer? Not being given enough time to craft your design? Losing the big picture? Being asked to “just colour it in”? My first tip is specifically for designers who are struggling with no up-front design time or no brand – something that is common in the agile world. Simply put, my tip is to ask for a Design Sprint. A Design Sprint is essentially five days of rapid prototyping framework, made popular by Google Ventures. If you’re interested, I recommend reading Sprint:…

We worked with GTB Shanghai to let a user feel like a kid again, by picking up their phone and playing with it like a toy Mustang. To turn a user’s mobile phone into a Ford Mustang, we needed to track the phone’s movement. We gather data from the phone’s gyroscope, which measures rotation, and the accelerometer, which tracks linear acceleration. Using this data, we generate a real-time map of a virtual race track. By analysing the motion path and changes in device rotation and acceleration, we reconstruct the Mustang’s manoeuvres. Finally, we dynamically edit together a sharable custom video of a real Mustang replicating the user’s moves. To create the final video with a real Mustang, we needed to film a real Mustang. We took one Resn creative director…

Long before the world wide web was actually invented, the shape of what was to come was already fertile in the minds of sci-fi authors and futurists. But what they saw looked nothing like the four corners we’re used to today. Instead, it looked a lot more like WebVR. In his 1984 classic cyberpunk novel Neuromancer, William Gibson introduced a new term that would immediately become synonymous with the internet: cyberspace. WebVR breaks down a barrier that has existed for a long time in web browsers: the third-dimension. But, one of the nifty things that WebVR, and specifically A-Frame, has done for the web and its developers is abstract WebGL in a way that makes it more accessible. It’s a great place to start innovating, and relatively uncrowded for devs…

Use a combination of CSS Grid and Flexbox Nesting flex-containers inside of grid items can be used to create complex layouts with very little code, allowing for one-dimensional layouts to be created inside the two-dimensional layout of the grid, altered at different viewport sizes using Media Queries. Grid template areas CSS Grid has a bit of a trick up its sleeve. You can use the grid-template-areas property to define a grid using a visual representation of the layout. This is achieved by defining named areas on the grid inside the CSS and then creating a visual diagram using those named areas. Define repeating patterns When defining either rows or columns we can use the new repeat() function, which is now built right into CSS. For a grid with five equal…

There are many image formats out there, including JPEG, GIF, PNG and WebP, but when it comes to vector images, SVG is the clear winner. SVG is now universally supported, with no need to create the clunky fallbacks of the past, so there’s no reason not to be using them today. SVGs are infinitely scalable and crisp at any resolution, often with a very small, easily compressed file size, making them ideal for web use. SVGs are only suitable to vector graphics though; once you start adding raster or photo type images, file size will balloon. Icons, logos and the like are the best use of SVG. Vector graphics (and SVG) differ from other formats in that they are mathematical descriptions of the graphic, as opposed to a bitmap expressing…

There has been a rise in card and panel-based layouts on the web over recent years and the Masonry-style layouts that go along with this are particularly good at displaying content across devices. One reason is because the panels are small content blocks to begin with, so it makes the designer’s job easy in adding more panels across the webpage on wider screens. This tutorial takes a look at how to share background images across different panels, which are of course div elements. In order to do this a library called multiple.js is going to be used. Multiple.js is the work of Denis Lukov who saw a design on Dribbble and wanted to recreate it in code. He managed to get it to work in pure CSS on desktop screens…

The text outline The text outline is made from an element set in the foreground that has empty space inside to show anything that appears in the background. Stencil options Three options to create the stencil are with the use of transparent PNG, SVG or CSS-based background-clip. Animation effect The background colour element changes height, giving the illusion of the colour gradually filling the shape of the stencil element. Animated background The animated background is placed on a z-index below the stencil outline element, giving the illusion of the colour filling the shape. Loading animation timing JS is used to trigger an additional animation on the screen when all DOM content is loaded, allowing the main web content to appear. The file size of modern websites is regularly increasing through…

HTML5.1 was published as a standard in late 2016, and there is already a Working Draft of 5.2. It will be some time before the new 5.2 features become standard, and longer still before browser support is comprehensive. As a result, the specification remains subject to change. The current changelog for 5.2 includes a number of common-sense fixes and efforts to standardise implementations of features that currently differ across browsers. Among the objectives is enabling improved modularity of code, which we’ve seen already through the introduction of the Web Component specifications. To this end, one of the focus areas for HTML5.2 is support for JavaScript modules, which aims to provide a standard and efficient way for loading modular code. This is promising for future development of complex web applications for…

Integrating with foreign libraries Adding libraries to a project is like jiggling a cube of ballistic gel: an operation that is better avoided. If your product requires a large amount of libraries, omitting jQuery saves grief from namespace contention and similar problems. Be aware that some libraries require jQuery to function, and will exhibit weird behaviour when it is missing. Tailoring code to specific browsers Even though jQuery prides itself on its wide-ranging browser support, some older platforms such as the Blazer and WebPro browsers found on Palm OS are not supported anymore. Developers armed with text editor and sufficient patience can craft out code that supports these dinosaurs. Do not, however, try backporting jQuery. Creating high-performance applications Performance increases in JavaScript runtimes mean that most applications run sufficiently fast,…

Xanadu bit.ly/2p8vDZ7 An eCommerce theme with a strong focus on furniture. Offers contemporary styles to display products at their best. Lira wphash.com/wp/lira A simple, stylish and visually led blog theme. Perfect for photographers and designers to show off their wares. All4Home bit.ly/2ofXhWP This collection of stylish themes concentrates on presenting home-based delights in an engaging manner. Strings bit.ly/2nRyghG One for musicians and bands. A big fullscreen hero image, ideal for big egos, is accompanied by videos, audio and podcasts. rustic state bit.ly/2oHEYuI The name of this theme perfectly emulates its style; rustic fonts are matched with muted pastel palettes.…

Year 2004 No. of employees 4 Resn is born. The agency was founded by Rik Campbell and Steve Le Marquand. Year 2005 No. of employees 7 Resn nearly doubles in size. Makes funny advergames and stuff for Kiwi clients. Year 2008 No. of employees 10 The agency releases sites for Kiwi musicians Minuit and Luke Buda. Wins first FWA. Year 2009 No. of employees 10 Breaks Pixel Awards record, winning Best in Show, Best Agency and a record five awards. Year 2010 No. of employees 16 Releases Sponsifier with Saatchi & Saatchi LA and NASCAR Team Toyota. Year 2011 No. of employees 17 Unleashes Threaded, the world’s first truly evil AI. Plots global domination. Year 2012 No. of employees 25 The agency opens office in Amsterdam. Develops the REI 1440…

Christopher Bot www.christopherbot.co This is a bot written by a 14-year-old school pupil that asks students questions like, “Do you have homework for maths?” after each of their classes at school, and then later reminds them to do it before it’s due. DOM The Pizza Bot www.dominos.co.uk/easy The pizza bot from Dominos is integrated into Facebook Messenger to let hungry users order food directly within the Messenger platform, with the ability to request food using single words or even emojis. SU www.nexus.cx/su A bot designed to support people who are struggling with change. It uses the fact that it’s not a human to its advantage; studies of SU have shown that people are more open when knowing there is no human at the other…

Currently the best solution for creating AR content on the web right now is using AR.js, a highly efficient JavaScript solution that can get speeds of up to 60 frames per second on some phones. This is built using open web standard technology of WebRTC to access the camera and WebGL to render 3D content in real time. It’s built on top of existing libraries: so the ThreeJS library is used to handle WebGL, and it runs under Mozilla’s WebVR A-Frame library (also based on Three.JS). To create the AR.js library, the open-source ARToolKit was cross compiled from C using Emscripten and asm. js. This has a roadmap for improved performance and has several good demos to get you started.…

Fast response time A near-instant response, ideally within 0.1 seconds, keeps the user feeling in control. Nobody wants to be waiting around staring into an unchanging screen wondering if what they just did actually worked. Keep the user informed A status icon or loading bar keeps the user engaged. They know what they want is on its way and are willing to wait. This will prevent the user from losing interest, button bashing or at worst leaving altogether. Well-recognised elements As with all design there are some elements, icons or positioning that have become commonplace online. Incorporating these will bring a feeling of familiarity to your user and make them feel at home on your site. Keep it simple The beauty of a microinteraction is in its simplicity – small…

THE AVERAGE PERSON CAN TYPE 40 WORDS PER MINUTE,” BUT CAN SPEAK 150 Thanks to the rise of mobile and digital assistants like Apple’s Siri, Microsoft’s Cortana and Amazon’s Alexa (Echo), voice-activated searches and commands have become more mainstream and a growing trend. These smartphone personal assistants listen to what you say, figure out what you mean, and then attempt to do what you ask. Whether it’s looking up a phone number or booking a table, they work by linking speech recognition to complex natural language processing (NLP) systems. This allows them to figure out not just what you say, but what you actually mean, and what you want to happen as a consequence. A major reason for growth is convenience and the ease of use in comparison to typing.…

Marvel is an excellent online tool that enables designers to create prototypes of mobile applications and web projects with ease. But there’s plenty of incredible prototyping tools out there such as InVision, Framer and Flinto, so why would we want to use Marvel? Marvel boasts a number of useful features, including Dropbox syncing; as you work in Photoshop and hit save, the prototype updates in real-time. You can also add sketches from a mobile app if sketching on paper is how you normally start a project. There are different types of transitions and gestures and you have the ability to create unlimited teams that can see or work on your prototype. And lastly, you can link Marvel up to other online tools and apps such as Sketch and Slack. So…

“Well-written, standards-compliant HTML is likely to stand the test of time” In the modern world of web development much of the focus is on frameworks, and developers are increasingly required to understand CSS preprocessors, JavaScript libraries, TypeScript and much more. For many, long gone are the days when pages were built purely by opening up a text editor and getting lost in angle brackets and <div> soup. As a result, there’s a risk of losing focus on HTML development practices. However, HTML still sits at the heart of the web. When a page is loaded by a browser, its HTML is parsed to form the DOM. Based on this DOM, the browser determines what to render to the user. It is also by manipulating the DOM that interactivity is built…

Creating 'vanilla' user interfaces JavaScript DOM manipulation is terse. If your application has to make do with a lot of user interface-related things, deploying jQuery is a sure-fire way to cut down the amount of man hours needed. In most cases, UI code is not performance sensitive – the measurable performance overhead of jQuery does not fall into account in practice. Adding UI to PhoneGap applications PhoneGap does not come with a GUI stack. jQuery UI has since established itself as a quasi-standard for jQuery user interfaces. Due to this, most users have already seen jQuery UI's widgets and feel right at home when confronted with them. As blending in is always good advice, harnessing jQuery UI is a very sensible thing to do. Creating heavily animated programs Ever since…

“Europe’s #1 developer boot camp, running highly selective classes of our offline course every six weeks, and a remote course every 12 weeks .” About us Makers Academy is a fully immersive, 12-week computer programming boot camp. With their help, you will learn the principles of software craftsmanship and they’ll also help you get your first job. They’re Europe’s number-one developer boot camp, running highly selective classes of the offline course every six weeks, and a remote course every 12 weeks. They take a ‘learn by doing’ approach, through project-based work. Students are encouraged to work in pairs on coding challenges, with weekly tests, culminating in a final project. They help set up job interviews via their network of hiring partners including ThoughtWorks and Deloitte Digital. What we offer…