Innholdsfortegnelse for No. 262 i Web Designer

“Many of us have been using variables in CSS for a few years through the use of preprocessors like Sass and LESS, but now we can use them in native CSS” 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” CSS is growing up CSS was a sensitive soul, once an awkward teenager, but now, with the help of browser support, it is starting to grow and realise its potential. Our latest lead feature (page 44) takes a closer look at the latest tools and rules that are taking the king of styling forward to a brave new era. The darling of the moment CSS Grid is here. We take a look at…

Need an instant hit of Web Designer? Then check 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 04. 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.…

Web Rebels www.webrebels.org There’s a great selection of speakers at this two-day, one-track event in Norway, with 16 speakers in total. Generate bit.ly/2qSmdC4 The conference heads to San Francisco and brings with it a host of speakers across two tracks for one day. UX Scotland uxscotland.net/2017 A UX and design conference that ‘allows participants to connect and learn from their peers and leaders in the industry.’ Kerning 2017.kerning.it Two days of workshops and a one-day conference in the heart of Italy dedicated solely to typography. Patterns Day patternsday.com An event for web designers and developers on design systems, pattern libraries, style guides and components.…

For Falters Inferno we worked with Salon Alpin – an Austrian animation studio – who had already developed an amazing short film for Austrian newspaper Falter. We wanted to bring their animation alive digitally and somehow transform the linear narrative into a non-linear interactive story. To do that, we brought all different animation layers into WebGL and added custom WebGL Shaders and subtle interactions which you can trigger by moving your mouse or interacting with touch. We optimised the experience to perform especially well on mobile and focused on making it as seamless as possible. For this project, we spent about two full weeks just on fine-tuning but I think the effort has paid off. People really liked it and even though Falter is only available in some parts of…

.ANIMATE() The simplest way to create an animation is to call.animate() on an element. TIMELINE The player timeline allows for the current time of an animation to be either written or read using.currentTime(), allowing multiple animations to be synced or staged. CONTROLS AND PLAY-STATES Play-states can be detected and triggered using .pause(), .play(), .cancel() or .finish(), allowing animations to be user controlled or chained together. PLAYBACK RATE A separate control for the speed of playback allows for fine-tuning an animation without changing the easing or duration properties using animation. playbackRate = .25. KEYFRAME, GROUP & SEQUENCE EFFECTS These new properties provide a simple way to group keyframes, timing properties and animations into groups, which can be played in sequence.…

FRAMEWORKS: SIMPLIFY YOUR WORKFLOW  Frameworks can help you develop better, faster code. But is it worth the effort to learn one? When we talk about front-end frameworks, fundamentally we’re thinking of collections of tools and libraries that aim to simplify web development practices. You’ve probably heard of some of these or used them already; Angular and React are currently the most popular. The strongest argument for the use of frameworks is looking at the problems that exist in ‘vanilla’ web development: convoluted code, lack of modularity and a great deal of time devoted to building basic functionality. Frameworks solve this by offering a layer of abstraction between the code written by a developer and that which is rendered by the browser, providing simplified ways of achieving common requirements. Essentially, you…

You’ll notice that JavaScript frameworks are generally designed for a Node.js server environment. Node is understandably popular with front-end developers for the ability to code JavaScript on the server side. You don’t strictly have to use Node, however. Both Angular and React will play just fine with other popular server environments such as Java, PHP or Rails. You may find documentation relatively thin on the ground, however. There’s also arguably not a lot of reason to do this, unless you have a pre-existing backend to integrate with. Most web applications will be well-served by something like the MEAN stack (mean.io), which integrates MongoDB, Express.js, Angular and Node.js to provide a full-stack development framework. However, even if you aren’t using Node for your web server, you’ll likely still need it for…

The challenges in web development that frameworks have emerged to solve aren’t going away. Web apps continue to grow in complexity, especially with the proliferation of progressive web apps. Meanwhile, HTML and JavaScript continue to evolve but retain many of the same fundamental limitations that have existed for decades. In some places, there’s an undertone of frustration emerging within the web community. Some argue that things have become too divergent, and that many frameworks introduce complexity unnecessary for the majority of users. It’s likely that we’ll start to see more done without frameworks, which may start to reverse this. Modularity and templating, which are some of the leading benefits of frameworks, are now part of the HTML specification. When the web components specification is implemented across all browsers, developers will…

“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…

01. Poppers popperscoolers.com/fr Lots of design craziness here. Plenty to keep the viewer amused and engaged. 02. Qantas Dreamliner dreamliner.qantas.com/explore Discover what the inside of a Dreamliner looks like in this interactive 3D experience. 03. I Buongiorno ibuongiorno.com/en A vertical and horizontal scrolling experience guides the user to tell its tale. 04. Truffle Art truff.co Smart, smooth animations coupled with imaginative transitions and design. Graphics Halftone Posters bit.ly/2p3Pg9q We love a halftone graphic. Check out this collection of posters from the talented hand of Jake Arnold. Colour picker thinking of you… bit.ly/2pd1E1U Typesetter Goldana bit.ly/2qKUQcQ Inspired by Art Deco, Goldana is very versatile with a host of options to make it three dimensional. WordPress Seese bit.ly/2qp9slH eCommerce theme with many talents, contemporary layouts and colour schemes, plus some very useful…

“Our biggest challenge now is that audiences are so desensitised to UI – if the smallest detail isn’t believable, they are pulled out of the story” Designing UI for the real world is no easy challenge. You need to consider easy-to-use navigation, functionality, readability and more. But when it comes to designing UX for sci-fi and fantasy, we are swamped with a realm of possibilities. The differences between fictional and real-world UX are huge. When we have a scene that needs to be filled with fantasy UI, we can just fill it. The images don’t have coding behind them. Unlike real-world UX, it doesn’t require any practical purpose, it just needs to look good. Our biggest challenge now is that audiences are so desensitised to UI – if the smallest…

1. HTML document template Start the project by defining the HTML document template. This is made from markup for defining the HTML document container, which is responsible for containing the head and body sections. The head section contains descriptions of the document such as the title, as well as links to external resources such as the CSS file. The page body is where the visible content is placed in step 2. 2. Visible content The visible content is made from two articles – one for storing the play button, and the other for storing the content that the play button links to. The play triangle is made from the HTML symbol code &#9658, which allows for better scalability and faster loading than using an image. The button link references the…

Anyone who has tried to create some kind of scroll locking, snapping or manipulating will know how tricky it can be. Until recently JavaScript was the only option but always seemed produce a mixture of success and choppy or questionable performance from device to device. Using this new property, carousels or sliders and other scroll manipulation techniques can be easily created and controlled using CSS. Due to varying implementations of the specification multiple properties are required to experiment with this new CSS. The main new properties required to experiment with this new feature are: The scroll-snap-type property currently accepts three values; none (the default value), mandatory and proximity. The mandatory value will force the scroll inside the snap container to the nearest snap point, proximity will snap but in a…

The animation we’ll be creating will consist of four keyframes, increasing and decreasing the scale and changing the colour of the SVG. We can also use JavaScript to retrieve the values of Custom Properties set in the CSS. Although this animation could be created in CSS we’ll be using JavaScript to familiarise ourselves with the Web Animations API. 01. HTML AND CSS SETUP The HTML and CSS is really simple. It’s just a button containing an SVG and some CSS to apply some basic styling including some Custom Properties. 02. GET OUR CUSTOM PROPERTIES IN JS By setting the colours we’re going use in the animation as Custom Properties, we can then pull them out in the JavaScript and use them in our animation. To do this we need to…

Social media is a huge part of our internet identity, so most websites have links to your sites of choice in a header, footer or sidebar. Engaging your audience and encouraging them to click on these links, let alone drawing attention to them in the first place, can be a tricky business. In this tutorial, we’ll cover how to make icons that stand out, using just the tools that WordPress provides for us. You don’t even need to know any coding, just be a copy-paste master! We’re opting for moderately sized buttons that will look great on mobile and desktop, with subtle hover states, coloured backgrounds, gradients, and even support for IE 9+ (with a graceful IE8 fallback). By using WordPress’s powerful menu, a plugin and customisation tools, we can…

Released in March 2017, Angular 4 introduces a relatively small set of changes compared to Angular 2. This will come as particularly good news for AngularJS developers who had difficulty with Angular 2’s extensive and fundamental changes. If you’re already developing in Angular 2, the modifications you’ll need to make range from ‘none’ to ‘very minor’. Some of the more notable changes introduced in version 4 include: • Movement of animations to their own package in @angular/platform-browser/animations • Replacement of the template tag with ng-template, since template is now an HTML5 tag for web components • Introduces if/else syntax in templates, which will be very useful for conditional templates • Numerous minor improvements, such as a titlecase pipe and email validator – plus, of course, bug fixes On top of…

REACT-BOOTSTRAP bit.ly/1kPFlFr Yes, there’s a Bootstrap for React too! This provides an opportunity to clean up the Bootstrap code and take advantage of JSX syntax. React-Bootstrap will reach a version 1.0.0 release soon. REACTCSS reactcss.com So with JSX you can inline your HTML in the JavaScript. What if you want to do the same with your CSS? We’re sure this won’t be for everybody, but take a look and see if it’s something you like the look of. SEMANTIC UI react.semantic-ui.com/  introduction Semantic UI is also available for React. Once again, it’s under development, but much of the functionality is already available for you to experiment with. So why not start now? REACT NATIVE facebook.github.io/  react-native Okay, it isn’t quite a library, but React Native is a mobile development framework…

“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 What we offer • Managed hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud hosting – Linux, Windows, Hybrid and Private Cloud Solutions with support and scalability features. 5 tips from the pros 1. Reliability, trust, support Reliability is a major factor when it comes to choosing a hosting partner. Netcetera…

Handmade  bit.ly/2pYtEbm A big image slider takes centre stage with offers and products. Sitting neatly underneath is a new-product carousel. Gon CakeShop  gonthemes.com/cakeshop Visual impact is king here, from the full-width hero image through to the gallery, featured products and latest blog. Sash althemist.com/sash Big full-width hero image and associated buttons get straight to the point and give the viewer an easy-to-make decision. MaxStore maxstore.kutethemes.net A contemporary layout is brought up a level by smart positioning of call-to-action boxouts and simple designs. More bit.ly/2pnkjIq A grid-based layout that wastes no time is getting the user to click on a product. Includes neat and engaging transitions.…

1. HTML document template The first step is to initiate the project’s HTML document. This contains the markup to define the general document structure that holds the visible content inside the body, along with the descriptive metadata and resource links inside the head section. The HTML content will be placed inside the body section in steps 2 and 3. 2. Body content: navigation The first step for building the example content is the creation of the navigation links. These will be used to trigger the presentation of different content sections. In this case, the navigation links reference elements with ID ‘p1’ and ‘p2’ that will be defined in step 3. The ability to use the # symbol to link on page ID elements will enable us to create interactivity with…

CSS, just like every programming language, is always evolving as the web adapts and changes. CSS is maturing as it comes out of its awkward teenage years and into its twenties, with full spec implementation blunders out of the way and a bunch of exciting new features on the horizon. CSS Grid has already started to gain traction. It has been the centre of attention lately, so some of the other new features have been left feeling a little neglected. One of these is CSS Variables or Custom Properties. Many of us have been using variables in CSS for a few years through the use of preprocessors like Sass and LESS, but now we can use them in native CSS, allowing these variables to be updated on the fly with…

Element containers have been a hot topic for a few years now. The idea is that we could query any individual element instead of the viewport. Using a similar syntax to media queries, EQCSS uses an ‘@element’ query in the same way you would use a media query. There’s also other syntax being considered that is more in line with current CSS: Tommy Hodgins (@innovati on Twitter and the author of EQCSS) is a huge advocate of this feature and has put forward one specification (srt.lt/nE1X) for CSS Element Queries as well as The Responsive Images Community Group (srt.lt/k0Jc8G) who also have a specification written up. DEFINE A GRID LAYOUT WITH EQCSS Once we have included the EQCSS script we can use Element Queries the same way we use media…

In this short tutorial we’ll be creating a simple page with input controls. The CSS will contain a number of CSS Custom Properties, which we can update with input from the user using JavaScript. We’ll be using the calc() function to set the font-sizes and spacing, allowing everything to be updated by changing a single Custom Property. 01. HTML SETUP We’ll start by building a simple page with a headline, paragraph and some basic form elements to control our Custom Properties with input from the user, using the ‘onchange’ property on the form elements to fire our JavaScript function. 02. OUR FIRST CUSTOM PROPERTY In our CSS we’ll create a :root selector and create our first Custom Property. Using the double dash (‘--’) prefix we can then add any name…

Critical CSS is a way of reducing the number of render blocking elements in order to render the page as quickly as possible. Render blocking is caused when the browser has to wait until all of the CSS files in the <head> of the document have downloaded before rendering the page. This is so that the browser can accurately calculate the layout. So large CSS files can significantly slow down the page. Critical CSS is a way of optimising the critical rendering path or, to put it another way, prioritising the display of elements. This is achieved by inlining the styles for elements that will be seen first (the above-the-fold content) into a <style> tag in the <head> of the document. The remaining CSS is then loaded asynchronously into the…

Augmented reality has been around for a while now and it isn’t anything new, however with the support of WebRTC (Real-Time Communication), access to the phone’s camera can now be realised on Android devices and on desktop. At present, iOS can’t support this as it hasn’t been implemented in the WebKit browser that powers Safari, but it is in development and you can check the status of it here bit.ly/2qadVFS. If you do have an iOS device though you don’t have to miss out, as you can still use the webcam on your desktop computer. An important note to get this working on the mobile Chrome browser is that the content must be served by a secure socket layer over https rather than standard http. Desktop currently works with regular…

Navigation links These are the page navigation links that alter the page background when the user hovers the mouse pointer over them. Page background The background image is set to cover the full area of the page. It is sized to cover the full area using background sizing. Less essentials Less essential features are placed in a location that doesn’t obstruct the main content, but are still easily noticeable and accessible. Background positioning Central positioning used for the background makes sure that the middle area of the image is always in view to avoid obvious clipping. Logo and others Like the less essential features, other navigation and the logo are placed in a way that doesn’t obstruct the main page content. It’s annoying for users to click on a link…

SVELTE svelte.technology Svelte is focused on being super lightweight, enabling faster loading and faster running apps. Could this be the beginning of a shift from heavyweight frameworks towards performance-optimised approaches? AURELIA aurelia.io Developed by an ex-Angular team member, one of Aurelia’s primary focuses is modularity. There are evident similarities with Angular, but the syntax is simpler and closer to standard JavaScript. CYCLE.JS cycle.js.org Cycle has been around for a couple of years, offering a functional programming framework. There’s growing interest in functional web development these days, so we could see a rise in popularity this year. PREACT preactjs.com Preact positions itself as a small, fast alternative to React. And weighing only 3kB, it’s hard to dispute this. With growing concern about large framework footprints, could it gain ground this year?…

With web frameworks in active development releasing increasingly frequent updates, it’s important for any developer or team to be aware of the latest features and deprecations. This is the first major version release since the adoption of semantic versioning by the Angular team. So don’t worry, you didn’t miss 3.0! There were two major updates to be released and these were both rolled up to version 4.0. The Angular team are calling it an ‘invisible makeover’, because most of the changes are in the background rather than with core coding functionality. An important change is the move to Ahead-of-Time compilation as standard, which has the potential to drastically improve performance when used correctly. TypeScript 2.1+ is also now supported, which gives us access to all the new features of ES2015.…