Innholdsfortegnelse for No. 287 i Web Designer

Code your own HTML Web Components were announced with gusto and enthusiasm, and then gradually slid back under the web designer’s radar. Like many technologies before them, it was a waiting game for browsers to catch up before adoption could really take off. Well, browser support is now (almost) green across the major players. Chrome, Firefox, Safari and Opera are all onboard — we’re just waiting for Edge to join the party. So, now is the perfect time to dig deeper into the world of web components and discover what they can do for you. Our latest lead feature (page 46) delves into the powerful APIs that make up web components. Find out how they work, what you can do with them, their key features, the best frameworks and tools…

There are too many people with UX in their job titles who have never even seen live user research before, let alone taken the time to actually speak to users. But without an understanding of what users actually want and need, how can you deliver it? If I were asked to design a solution with no user research, I wouldn’t have a clue where to even begin. It’s such a foundational tool that I would be lost without it. Yet this is what a large proportion of UX Designers are asked to do every day. They bang out wireframes and user flows based on nothing but educated guesswork and assumptions. They focus purely on the screens and interface when making their decisions. Yet, in my experience, true UX practitioners worry…

1. Initiate HTML document The first step is to define the structure of the HTML document. This consists of an HTML container used to declare the document, which contains sections for the document head and body. While the head is used to include the external CSS stylesheet and JavaScript document, the body section is used to store the visible content elements created in step 2. 2. HTML content The HTML content consists of a heading, used to display the title, and a navigation container. The navigation container stores a series of links that will be presented within the menu that appears. The absence of class names, attributes and unnecessary elements used for styling keeps the content search engine friendly. 3. JavaScript: element search Create a new file called 'code.js'. With…

Developers love components. They are a great way to define blocks of code that can be dropped in and reused anywhere they are required. There have been a few attempts to convey this idea on the web over the years with varying degrees of success, but not around in this modern web era. Mozilla’s XML Binding Language and Microsoft’s HTML Component specifications date back all the way to Internet Explorer 5 almost 20 years ago. Unfortunately, both attempts proved unwieldy, failed to gain traction in other browsers, and ultimately were removed. While they may not be around today, their concepts formed the basis of the modern approaches in use. “BY COMBINING THE BENEFITS THAT THESE TECHNOLOGIES PROVIDE, IT’S POSSIBLE TO START BUILDING CUSTOM HTML ELEMENTS THAT LOOK AND BEHAVE JUST…

Creating a unique and engaging landing page is critical to making a great first impression with audiences. It sets up the tone of the site and the experiences to come. The landing reflects the identity of the brand, and how you want the visitor to feel when they engage with it. It should be well focused, and above all, it should communicate. With WebGL, you can deliver high quality visual content right in the browser. You can do it without plug-ins or any special requirements. All modern browsers support WebGL, along with mobile devices and tablets. WebGL enables you to create incredible 3D scenes. It can power webVR experiences, manipulate video, render graphics shaders and much more. In this tutorial, you’ll be making a landing page for the fictional film…

This tutorial assumes you are on a Mac, and the tutorial for getting started with Valet focuses on this. There are alternatives for PC in Homestead. A basic knowledge of Terminal is good, although you should be able to follow along, as the commands are all fairly simple. They are mainly to get the prerequisite components installed and running. After completing this tutorial, you will have set up PHP, Homebrew and Composer on your machine, installed Valet and learnt how to set up local sites. Whatever sort of website or project you are working on, you have a few different options for building and deploying your creation. You could build and develop on your site live. You should never do this, primarily because you risk taking down your website (or…

WebVR promises a lot, and one day will deliver the experience that designers, developers and users want. It’s not quite there yet, but that is no reason not to join in and start learning now (if you haven’t already). For those who have yet to delve into the world of WebVR, it can seem like an area that is awash with vast lines of code and complicated techniques. But to make something successful, adoption needs to be as easy as possible. Make it difficult, and people will soon tire (apart from the dedicated few). Make it simple, and people will come, people will try, and people will create. Mozilla’s mission has been to make the adoption of WebVR as relatively simple as possible. It’s not something they suddenly jumped on…

“WE’VE DONE MANY OVER THE YEARS, AND CHOOSING JUST ONE WOULD BE IMPOSSIBLE, BUT MY RECENT PERSONAL FAVOURITES INCLUDE THE SITE WE DID FOR AIRBEL — A GOOD CAUSE, SHARP, AND EDGY — AND THE REDIRECT METHOD WE DID FOR GOOGLE, WHICH WAS TECHNICAL BUT ALSO BEAUTIFUL, AND EFFECTIVELY EXPLAINS A VERY COMPLEX EXPERIMENT THAT WE WERE PROUD TO HELP BRING TO LIFE.”MICHAELNIELING FOUNDER, CREATIVE DIRECTOR WEB The Airbel Center is the innovation team at the International Rescue Committee (IRC). They develop products, services, and systems to improve humanitarian response. We built their identity to fit within the current branding of IRC, including a nod to the bold black arrow within the yellow rectangle — but also to stand alone, capturing the essence of the Airbel mission to generate human-centred…

The good news is that web components are supported natively in almost all modern browsers. Depending on the visitors to your site, it is possible to use web components today without issue. Major websites such as YouTube already do. A great way to start using web components is to have them as a progressive enhancement. If a visitor comes to the site, check if web components are supported and use them if they are. If not, provide a fallback experience. If you do need to polyfill, then Webcomponents.js is a popular choice. It includes polyfills for custom elements and shadow DOM, alongside optional add-ons for related behaviours like promises. Further details about webcomponents.js can be found at https://github.com/WebComponents/ webcomponentsjs.…

While there are a lot of complicated things you can achieve with web components, simply getting up and running actually involves very little code. This first tutorial focuses on building a component to display user comments by making use of the HTML templates and shadow DOM APIs. 1. Provide a template The component needs a generic template it can copy in order to generate its markup. This can live anywhere that the custom element class itself can access through its unique ID. Add the <template> element directly in the HTML of the page. Any styles written here will only affect the component. 2. Add in markup Along with the styles, the template contains the structure of the component’s internals. In this case, it is set of <div> containers for layout…

There are so many websites that are one page designs in the contemporary web design culture. These sites all have one thing in common — animation. Each of these pages will thoughtfully animate the content onto the page, but only as the user scrolls to that section of the page. Previously, you would have to detect the browser’s scroll distance, then the distance between the top of the page and the element you want to animate, and then animate this. There are many shortcut libraries to help of course, and in this tutorial, we are going to explore the Scroll Animation Library, or sal.js for short! This library is impressive, as it handles looking after the scroll position, triggering the animation only when on screen. The library is only 2.3kb,…

Visual builders have existed for a long time for WordPress, but have always caused division with their use. Most had significant drawbacks in terms of page speed and the code that they generate, and more often than not the drag and drop blocks in the editing screen were not a realistic representation of the final result. On the other hand, sometimes you just want to be able to design and prototype quickly without having to write code. Using the pagebuilder plugin ‘Elementor’ with the right setup, WordPress can be converted into a minimalistic visual builder, almost independent of the theme, that wields an array of settings, allowing you to create complex designs with ease. Using the Twenty Nineteen default WordPress theme, you can build a ready-to-use canvas that can be…

Keeping bots out always is a numbers game — sadly, the availability of easy-to-use machine learning libraries made cracking many classic captcha types simple. Google stands at the forefront of the botting storm — after all, something only exists if it can be found (prominently) in Big G’s indices. Due to this, Google engineers devote significant amounts of effort into designing anti-bot systems and solutions. They are made available to third parties via a product called reCAPTCHA, which we will go over together during the following steps. Before getting started, however, a few basic things must be cleared up. First of all: keeping bots out always is a server game. Inspecting the return values of your anti-bot measure on the client is idiotic. An attacker can analyse the source code…

A local development environment allows you to use your own machine to run your website, instead of using one provided by a hosting company. You can customise the set up without worrying that’ll it will affect your live site, as well as make and test site development before uploading your site. Taking away risk when building something makes the development process much less stressful. Another benefit of working locally is that you don’t have to be connected to the internet. If you have slow wifi, like to work in the garden or are travelling, there is no need to search for a Wifi signal all the time. You might not think it now, but the time spent ftping to a staging site and waiting for your site to refresh really…

Cat Noone https://twitter.com/imcatnoone Founder of both Stark and Lyra, Cat Noone has improved the way that we think about accessibility by leaps and bounds. Steve Spohn https://twitter.com/stevenspohn Steve Spohn is an advocate for inclusivity in game design. UX Pin https://twitter.com/uxpin UXPin is the only UI design tool that ships with a colour contrast analyser build-in, checking contrast in realtime. Accessibility Cop https://twitter.com/a11y_cop An anonymous Twitter account that (politely) reports on websites that aren’t accessible. L. Lamar Jordan https://twitter.com/lamarjordanux Lamar Jordan constantly tweets out some of the most intriguing links on the topics of inclusive design and accessibility.…

Netcetera netcetera.co.uk 03330 439780 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 hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS & JS Tutorial project files All the assets you’ll need to follow our tutorials Plus all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 75 Film and retro effects from Sparklestock (worth $14) (www.sparklestock.com) • 100 Film Lightroom presets from Sparklestock (worth $29) Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital Download only the files you want,…

01. Route Fifty https://routefifty.caffeina.com A simple and addictive little game where you need to beat the clock, making sure to avoid the obstacles 02. ContraryCon IV https://contrarycon.com An animated, interactive, multi-layered title adds depth and engagement for visitors 03. Questions in the sky https://questionsinthesky.airfrance.com Got a question about planes? This neat, interactive game style site has the answers 04. GUCCI ZUMI https://zumi.gucci.com Style and substance help make the sell in this neat stylised scrolling site showcasing handbags Graphics Bureau Beer https://bit.ly/2WDnZXm This label — by the talented Yeye Weller — alone would make us buy this beer Colour picker Sultan Kite School https://bit.ly/2WJnM5f Typesetter Couturier Poster https://bit.ly/2OFK5pw An elegant and stylish serif style font with big swashes and ligatures. Ideal for headlines that impress WordPress Klamath https://bit.ly/2KdTiaf A multi-talented creative…

“Working with Hive to integrate the 360 experience into the site was a relatively smooth process,” admits Business Director John Wilks, when quizzed about handover. “We worked with their measurement team to ensure everything was correctly tagged, in order to get the data that both Waste and Hive were looking for. Once tagged up, we handed all the project files over for implementation.” Much of the convenience during launch phases was attributed to a synergy between both parties throughout. Early positive engagement and close relations with Hive’s development team meant that Waste were aware of all the requirements, so when the build files were eventually handed over. its deployment was made quick and easy. “As the majority of the testing had been conducted prior, after a short testing phase with…

Always work with decision makers We never, ever subcontract for other agencies, and we always insist on working directly with the actual decision makers on a project. Never work with committees It’s needlessly difficult to convince an entire committee that we know what we’re talking about. No RFPs If a potential collaborator, client, or colleague tries to run us through a gauntlet to prove ourselves — ignoring a personal referral and/or clear evidence that we have the chops to do what they need — we tend to let the project pass us by. Don’t give clients options; give them solutions New clients often expect to be presented with a series of options, choosing the one they like best. This has become the standard approach of most firms, so it’s a…

“INDIVIDUAL FRAMEWORKS OR LIBRARIES LIKE BOOTSTRAP, JQUERY, D3, GSAP, REACT, ETC., ARE KEY TO THE SUCCESS OF AN INDIVIDUAL PROJECT, BUT WE BELIEVE IT’S NEGLIGENT TO COMMIT A CLIENT TO A TECHNICAL DEBT FOR OUR OWN AGENDA. THESE TOOLS ARE GOING TO COME AND GO. THERE IS ALWAYS A NEW TREND.”TOMBECK TECHNICAL DIRECTOR WEB Bittercube Bitters are created in Milwaukee, Wisconsin, by hand with real botanicals—no pre-made extracts or flavours. Since 2009, the company has grown from producing one-gallon jars of bitters to 210-gallon batches, but the process has mostly stayed the same. When it became time to elevate the Bittercube brand to match the quality and sophistication of their products, Ocupop jumped in. Also, once the Bittercube team saw the new logo, every one of them had a new…

1 LITELEMENT  https://lit-element.polymer-project.org Spearheaded by Justin Fagnani at Google, LitElement aims to supersede Polymer Classic as their premier approach to web components. It provides helper methods and classes to create web components, without the required boilerplate setup. It has dramatically increased in popularity since its first stable release in February. 2 STENCIL https://stenciljs.com Stencil is a compile-time tool from the Ionic framework team. It will analyse each component, optimise it as best as it can, and return a version that can be used across different browsers and frameworks. It includes added behaviour such as JSX, which handles data binding like a React project. 3 VUE WEB COMPONENT WRAPPER  https://bit.ly/2uKQiY6 While the Vue framework can work with web components without issue, using an existing Vue component as a web component…

Custom elements can also extend existing ones. It helps to save time by not having to recreate some of the behaviour that’s already in the browser. This tutorial shows how to extend the &lt;time&gt; element to display relative times that machines can understand. 1. Create the class Custom built-in elements start life exactly the same as autonomous ones, but instead of extending ‘HTMLElement,’ they use an existing element as a starting point. This component uses HTMLTimeElement — the class that <time> elements use. It includes all the behaviour around the ‘datetime’ attribute, including the format it expects that data to be supplied in. 2. Define the element Again, much like autonomous custom elements, these also need to be registered with the browser using the ‘define’ method. One added detail is…

Accessible Brand Colours https://abc.useallfive.com Analyse your brand colour accessibility, in various hue and tone combinations. A11y for Managers https://bit.ly/2Ilesk1 Are managers not listening? Set up fake accessibility complaint tweets. WCAG 2.1 Accessibility Standards https://bit.ly/2U6zqFp Meet WCAG 2.1 standards by disability type. A11y Project https://a11yproject.com A community-driven effort that is looking to make web accessibility easier. A11y Weekly https://a11yweekly.com Get a dose of web accessibility delivered to your inbox each Monday.…

Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just 12 weeks • Part-time: Fit our curriculum around your life in 24 weeks 5 tips from the pros 1. Get started with coding…