Innholdsfortegnelse for No. 282 i Web Designer

CSS: style and substance If you are reading this then there is a good chance you know what CSS is. We like to call it the king of styling, but Cascading Style Sheets in 2018 have so much more to offer than simple styling. This issue we decided it was time to show off some of the immense talents that CSS has to offer and give an insight into some of the lesser-known but still essential elements that anyone needing to sharpen up their skills really needs to know. So what is on offer? We kick off with eight pages all about CSS animation. This takes you from storyboarding through to implementing a simple project, while passing transitions, keyframes, performance and SVG animation along the way. Want to know the…

01. Trade Aid tradeaidchocolate.co.nz A video background and overlaid graphics combine to reinforce the site’s message 02. Old Spice – Big Lavender biglavendergame.com A classic old-school shooter is a smart way to market Old Spice for a new generation 03. Human Forward https://bit.ly/2A2PgJg Big, bold and impressive animations make sure that the user is constantly engaged 04. MiM event gomim.com/en Subtle background animations combine with subtle movement as the users swipe or scroll Graphics Logotypes vol. 5 https://bit.ly/2DQkCHg A collection of gorgeous hand-drawn logotypes from designer Martin Schmetzer Colour picker Sensei https://bit.ly/2OTKjI5 Typesetter Fixture https://bit.ly/2qZwpuk Based on 19th-century typefaces and posters, Fixture offers four widths ranging from Ultra Compressed to Expanded WordPress Miraculous https://bit.ly/2TuCITS Starting a Spotify style site? This theme offers what you need to create an online music…

If you mused on the virtues of professional web design today, a big attraction must be variety. Because the internet and digital is now so vital and so ubiquitous in marketing, businesses and organisations of all conceivable kinds require quality websites. Take, for instance, a company that creates luxury immersive experiences on superyachts and megayachts – Asaro. This company designs and delivers bespoke, immersive theatrical experiences on an unimaginable scale all around the world. So when a client like that seeks out an online revamp, whoever answers the SOS call is in for a pretty diverse ride. In this instance, the agency it reached out to is well-known within Web Designer pages for adapting to any project environment. Bristol-based Green Chameleon is a creative production studio that specialises in crafting…

“The standout feature for us has to be the custom CGI renders that were created to represent Asaro’s event genres. The striking visuals have proven to be a powerful visual mechanic that has created intrigue among Asaro’s prospective clients. These assets have been a great success, but they were also a lot of fun to create and we were able to try out some new techniques in the process.”…

Prefixing for the most part is probably not needed unless we need to provide support for older browsers – Internet Explorer 10 and below. There are several ways we can prefix code if needed. Auto-prefixer (autoprefixer.github.io) is a really useful tool that can be used as part of a build process or manually at the end of a project. It enables us to configure the browser support you need, then it will automatically prefix our code where needed. We can also check the support for any property using the amazing tool ‘Can I Use’ (caniuse.com). Simply type in the property we want to use and see which browsers are supported.…

SARAH DRASNER @sarah_edo Sarah is the author of the O’Reilly book SVG Animations. RACHEL NABORS @rachelnabors Interactive storyteller, cartoonist and author of Animation at Work. VAL HEAD @vlh Author of Designing Interface Animation and curator for ‘UI Animation Newsletter. LISI LINHAR @lisi_linhart She is passionate about web animation and talks about ‘Practical Web Animation’. CODEPEN @CodePen Tweets great examples of animation that have the code for you to learn from.…

GRID-AUTO-FLOW Enables you to define the flow of grid cell layout using horizontal 'column' or vertical 'row', making the grid act similar to a table. GRID-GAP Apply this to the grid container to set spacing between each grid cell. The default sets no spacing between cells. GRID-COLUMN Sets the specific column to place the grid cell. Use this to target specific cells via class, ID or selector. GRID-ROW Sets row location to place the grid cell. Use this to reference specific cells via class, ID or selector. GRID-AREA Defines the grid area for a cell to cover using co-ordinates in the format startX/startY/endX/ endY or a cell reference name. GRID-TEMPLATE-AREAS A more advanced method for defining the grid layout using grid-area reference names given to the created content cells. GRID-TEMPLATE-ROWS…

W3C SPECIFICATION  w3.org/TR/css-grid-2 The latest details of the CSS grid specification. Includes details about proposed features, such as subgrid that will be implemented by future browser releases. GRID  smashingmagazine.com/2018/07/css-grid-2 Learn about the proposed subgrid feature in more detail, complete with full examples for using the proposed specification. POLYFILL  github.com/FremyCompany/css-grid-polyfill One of several polyfills available to bridge compatibility with older browsers. Make sure to take a look at the full description of its capabilities and limitations. GRID LAYOUT EXAMPLES  gridbyexample.com/examples A selection of pre-made grid layouts that you can use to kickstart your web design or content section layout. Examples include both simple and advanced layout designs.…

SAY HELLO TO CSS ART Making CSS art can be intimidating, but it's easy once you break graphics down into simple parts “As you practise and refine your skills making CSS art, you’ll see an improvement in your day-to-day work (and you might even enjoy it more, too)” If you peruse websites like CodePen, DevArt and Dribbble, it’s very easy to feel overwhelmed by the incredible things that developers and designers make, especially when you’re just starting out. I made my first piece of CSS art after lurking on these sites for years and eventually mustered up the courage to try and do it. Now, a few years and over 100 experiments later, it’s one of my favourite hobbies. Making CSS art is interesting and fun. It teaches you nuances…

“Its plan is to introduce a new series of APIs that will open up the power of CSS to the browser in JavaScript for the first time. This means that CSS features can be coded by the designer or developer and have all the native speed of regular CSS” Houdini is a new W3C task force, and its goal is to take away the problem of poor support of new features on CSS. Its plan is to introduce a new series of APIs that will open up the power of CSS to the browser in JavaScript for the first time. This means that CSS features can be coded by the designer or developer and have all the native speed of regular CSS. All of this might sound a little like…

SVG uses an XML-based language for describing vector images. It’s a markup language, like HTML, except that you have a wide variety of elements for defining the shapes to create these images, along with effects to apply to these shapes as well. You can code SVG right along with your HTML in your favourite code editor. You can code them as separate files and include them, or you can code them inline in your HTML. As a simple example, the following code creates a circle and a rectangle:…

MOZILLA DEVELOPER NETWORK (MDN) developer.mozilla.org/kab/docs/Web/SVG A great resource for learning the ins and outs of SVG, with many examples to help get you up and running. CSS-TRICKS - EVERYTHING YOU NEED TO KNOW ABOUT SVG css-tricks.com/lodge/svg CSS-Tricks hosts a complete SVG video tutorial series here. It covers what SVG is, why use it, how to use it and much more. ENVATOTUTS - HOW TO HAND CODE SVG webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 envatotuts has a nice in-depth tutorial that dives into many great examples of hand-coding SVG, including reusing SVG in your page.…

Featured host: 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.…

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 • New chapters from Killersites expert PHP video courses (shop.killervideostore.com) • 24 Luminous presets and 10 iPad Pro hi-res mockups from Sparklestock worth $36 (www.sparklestock.com) 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…

Although there is definitely value in social media, there is an issue with the amount of noise it generates. On Twitter, the problem is exacerbated by the fact that the timeline is not in sync any longer. It’s just a random presentation of what might be interesting for you, which means you miss a lot. I’ve got 64,000 followers on Twitter, and yet I get all my resources via RSS feeds. I can’t find much on Twitter because it gets lost in the noise. The other problem that social media has caused is that instead of learning from each other, people try to create resources that get the most likes or retweets. We try to shortcut a lot. The priority is to make a cool headline that will get shared.…

“We were driven by the ambition to create a striking visual that not only told a story but conveyed the idea of a mood without giving too much away,” describes Creative Director Tom Anderson when quizzed on the initial design motivation. “It was here that we drew inspiration from theatrical poster design and chose CGI over photography, because we felt it gave us more freedom creatively, as well as ensuring consistency moving forwards.” This inspiration would largely inform the project’s art direction by mixing in a big dollop of water drop photography for good measure. Underlining the nautical themes associated with a luxury superyacht experience, these metaphors applied to the 3D rendering, and WebGL work would also feed into other areas. “The website navigation and layout of the site was…

WHO Code and Theory WHAT interactive products, campaigns, advertising, branded experiences, design, branding, user experience, interface design, graphic design, strategy, engineering, product UI, website design and development, motion graphics, rich media, and social media WHERE 1 World Trade Center, 62nd Floor, New York, NY 10007 WEB www.codeandtheory.com KEY CLIENTS [1] adidas [2] Comcast [3] NBC [4] Nasdaq [5] American Bar Association Dan Gardner, the CEO of Code and Theory, co-founded the agency in 2001 with his childhood friend Brandon Ralph. Dan and Brandon were working in the digital department of Draft, where they quickly realised that the full potential of digital did not exist in CD-ROMs, and so they left to form their own agency. As a recent graduate of the University of Buffalo, Dan had received a BFA in…

“While it may seem limited or a lesser tool when it comes to animation, CSS is actually a really powerful tool and is capable of producing beautifully smooth 60fps animations” Steven Roberts, Head of UX, Asemblr.com @matchboxhero10 codepen.io/matchboxhero BEFORE YOU BEGIN Planning your animations and knowing when to use them can be just as important as the animation itself WHERE TO USE ANIMATIONS Animations can become as important to your brand as your primary colour or logo. ANIMATE INTERACTIONS FOR BETTER UNDERSTANDING Sudden changes to the state of your application or website can be jarring and can easily cause confusion. Animating interactions is a great way to help the user understand the change of state. DELIGHT YOUR USERS WITH MEMORABLE EXPERIENCES Animation can be used to provide delightful experiences.…

Utilising the correct timing and delays will produce much better-looking and easier-to-comprehend animations. When animating any elements, it’s important to choose a duration that is appropriate to its context. For example, an animation that’s applied to a button interaction should be short, usually less than a second. Utilising long animations for common interactions is tedious and annoying to the user and can make your application or website feel sluggish and slow. However, providing an animation duration that is too short can cause confusion and provoke the wrong emotions and feelings for your audience. Once you have chosen a comfortable animation duration, you should use this in every aspect of your website or application. When animating, multiple elements or property delays should be used to enhance comprehension. It’s much easier to…

“CSS grid offers more flexible definitions for content layout. Unlike older alternatives, such as table layouts and floating elements, grid has been designed to benefit SEO, responsive design and accessibility” Leon Brown twitter: @LeonBrown WHY YOU NEED CSS GRID IN YOUR LIFE CSS Grid lets you create advanced layouts while focusing on the user To some, a wireframe may seem like a laborious and unnecessary task that can drag out a project with no real long-term benefit. Jumping straight into a design may seem like a compelling and rewarding alternative, but by doing so you could be forgetting the most important thing of all when creating a design: the user. The ideation and wireframing stage of any design enables you to consider the layout and user experience from the…

FR The fr measurement unit specifies the width or height of a grid cell as a fraction of the remaining space. SPAN Sets the width or height of a cell to cover more than one cell space within the defined grid template. REPEAT Used as shorthand to repeat the same width or height definition across multiple cells within the grid template. MINMAX Allows you to define the minimum and maximum height or width of a grid cell; useful for controlling responsive layouts. PX / CM / MM / EM Fixed unit measurements can be used in combination with fr, which results in fractional spaces being measured from the remaining space.…

DESIGNING FOR DISPLAY CUTOUTS developers.google.com/web/updates/2018/09/nic69 As the advent of phones with ‘cutout’ sections or ‘notches’ on the display rises, we as web designers have to think about what that means for our designs on those pages. Currently web browsers on these devices add an extra margin to accommodate these cutouts. Web designers often like to use the full screen, and now there is a way to do that, with Chrome leading the way. Add this meta tag to the document: Then use the CSS safe environment variables to layout your content: Now you just have to test your design in landscape and portrait on the device. CSS CLIP PATH  codepen.io/bbx/pen/GYLOZd The CSS clip path is one of those properties that has really helped push visual effects. Originally this was CSS…

ADOBE ILLUSTRATOR adobe.com/products/illustrator Illustrator is easy to use and creates beautiful results. However, the resulting SVG can have some quirks that make it necessary to post-process to be perfect. SVG-EDIT svg-edit.github.io/svgedit/releases/latest/editor/svg-editor.html SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. INKSPACE wacom.com/en/products/apps-services/inkspace Ink to vector – keep your creative ideas alive with this editable digital ink. Export your sketches and drawings to a scalable SVG format for further editing and enhancing for web and more. APACHE BATIK xmlgraphics.apache.org/batik Batik toolkit is written in JavaScript and offers almost complete SVG support. Batik includes a viewer (Squiggle), a rasteriser for PNG output, an SVG pretty printer to format SVG files, and a TrueTypeto-SVG-Font converter.…

You can use CSS styles inline, inside SVG elements. Here is an example: “SVG 2.0 is currently in candidate recommendation stage, which means it is not supported by browsers yet, and it may still be some time before it is. It boasts numerous improvements and features” You can also use CSS separately, just like with any other elements on your page. For example, if you set a class attribute on your SVG shape, you can set its colour through regular CSS like this: And the CSS would be: Notice we had inline colouring that we then overrode with our CSS. Pretty cool!…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks” Featured: 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…

Alongside HTML and CSS, JavaScript is the key technology that is driving forward web development. It is always moving forward, with new frameworks, tools and variations seemingly making an appearance almost weekly. While new additions add more power and panache to a designer’s or developer’s arsenal, the hard part is deciding which ones you need to be paying attention to. Who are the big players? Who are the newcomers to watch out for? Who’s going to be the one that pays the big bucks? Choosing the right path is not an easy task, so any help newcomers and established developers can get is always welcome. The State of JavaScript survey is an annual report that provides a wealth of information on what developers are using, what they’re happy with and…

It stands to reason that all agencies like to be loved and place massive emphasis on satisfying their clients. The Green Chameleon crew are no exception of course, and a big part of the excitement of embarking on a project journey such as this is in seeing how the site fulfils the brief postlaunch. “The website has generated positive feedback from Asaro’s industry peers and their clientele,” beams GC Creative Director Tom Anderson. “The brochure was also well received at the Monaco Yacht Show, proving that the overall redesign worked to highlight Asaro’s standing as a luxury brand with a modern approach among a field saturated in the usual hallmarks of opulence.” This was hugely important to the client’s overall campaign objective, with Asaro’s rebranding drive being christened at such…

PREFERS REDUCED MOTION Animations and movement can cause motion sickness in some users. We can use custom properties in order to effectively remove animations for users who have indicated preferring reduced motion. By changing the timing to ‘0’, we stop the animation from running when the user has requested it. While this media query isn’t yet widely supported, it is by iOS. CHANGING OTHER PROPERTIES We can use custom properties to define other parts of our animation, such as the colour or size and use. This is useful if we have a part that’s configurable and we’re using that property as part of an animation.…

Flexbox is another option that can be used to control the flow of content. The main difference is that it was created specifically for one-dimensional content flow, whereas grid is used for two-dimensional purposes. While flexbox gives you the option of controlling the horizontal or vertical layout, CSS Grid controls both horizontal and vertical layout. In effect, you can consider CSS Grid to be the next step up from flexbox. Although the grid feature can be used to define any type of layout, flexbox provides the advantage of keeping your CSS simpler for one-dimensional layout. It’s worthwhile keeping in mind that requirements may change or expand to include a requirement for two-dimensional layout. An example of this would be using a vertical one-dimensional layout for small-screen devices, and using a…

The same ability of grids to re-order content for responsive purposes can also be applied to increase accessibility. Whether it’s changing or extending the stylesheet, or, with the help of JavaScript, users can be given options to choose the order that best suits what they need. In its simplest form, this can be achieved by attaching additional stylesheets to load, possibly as a result of settings stored in a cookie, local storage or on the server. More advanced accessibility control can be executed as a result of interactions with a HTML form that triggers JavaScript to adapt the grid ordering.…

RACHEL ANDREW @rachelandrew Rachel is a CSS working group expert and has been a strong advocate for web standards. She is currently vocal in promoting the use of CSS Grid to design pages. ANA TUDOR @anatudor Ana is an international speaker, covering workshops on cutting-edge CSS features. You’ll also find her demonstrating features of the CSS conical gradient. MARY LOU @crnacura Mary is constantly working with CSS to develop unique user experiences, and these are often pushing the boundaries of what is currently possible. Many of her examples often show up on award-winning sites. JAMIE COULTER @jamiecoulter89 Jamie pushes CSS to its absolute limits by creating adventure games solely in CSS, without any JavaScript – which sounds like an impossibility – and these games are insanely cute! JEN SIMMONS @jensimmons…

“SVG is now widely supported on all major browsers and devices. They are super small, searchable, modifiable via code and scalable. They look great at all sizes and can be used just like images or inline right in your HTML” RICHARD MATTKA Creative Director, Developer, Designer richardmattka.com WHY USE SVG? THERE ARE A HOST OF REASONS TO IMPLEMENT SVG. FIND OUT WHAT THEY ARE When it comes to logos, icons, interface elements and vector-based artwork that you’d like to look crisp, animate or make responsive, there are plenty of reasons to use SVG. 1 PIXEL-PERFECT SCALING Using PNGs or rasterised images means you are restricted to pixels. It also means you are likely to have multiple images for various retina devices or resolutions. SVG is not affected by resolution…

DRAWING LINES To draw a line or curve, you use the path element and ‘define’ the path using the ‘d’ attribute. You can ‘move’ the start of a line using the ‘M’ command for absolute positioning and the lower case ‘m’ for relative positioning. You use the ‘L’ command to draw a line to a new point. Here is a quick example of a line: Here is an example of multiple lines, to show you how easy it is: DRAWING CURVES You can also use the ‘C’ command to draw curves. Use the ‘M’ command to set the start position, and then list the start, the anchor point and the end point like this: You can also string curves together using the ‘S’ command to make even more complex curves…

SVG 2.0 is currently in candidate recommendation stage, which means it is not supported by browsers yet, and it may still be some time before it is. It boasts numerous improvements and features. It also removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web Open Font Format. SVG 2.0 removes several font elements, such as glyphs, and they are replaced by the WOFF font format. Also the xml:space attribute is deprecated in favour of CSS. It reached candidate recommendation stage on 15 September 2016. The latest draft was released on 18 October 2018. You can read more about it and follow its progress here: w3.org/TR/SVG2…