Innholdsfortegnelse for No. 249 i Web Designer

“ A defining characteristic of Canvas is that it’s closely coupled with JS, that is to say that we interact with it through its JavaScript APIs ” 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 Canvas the HTML5 creator Canvas, it has been with us a long time, since 2004 in fact. But, its creative power has taken a little longer to evolve. Joining forces with JavaScript has given the tag the opportunity to stretch its leg and start showing off. In our lead feature on page 38 we take a look at what is happening with HTML5 Canvas now, how it integrates with JavaScript and how three.js is one of its…

Getting the community involved in building the next version of the web is crucial to its success. There are millions of talented people who have great ideas and skills to match. Plus, there is the kudos of being able to say that you were part of the process. The Web Platform Incubator Community Group (WICG) describes itself as a “lightweight venue for proposing and discussing new web platform features”. Its charter (wicg.github.io/admin/charter.html) sets out goals, the scope of its work, what current proposals it is working on and info on how it makes decisions. To find out more head to w3.org/community/wicg and see how you can get involved.…

“Progressive enhancement starts with the website content, aiming for all users to have equal access to all site content, no matter how basic’’ Last year Google (support.google.com/adsense/answer/6196932?hl=en) updated its algorithm to increase the rank of mobile-friendly websites for mobile web searches. With 50 per cent of web traffic coming from mobile devices, being mobile friendly is clearly vital to success, especially for lesser-known brands. To keep pace with the growing number of devices and browsers that a website will likely be viewed on, web developers can use responsive web design (RWD). Once it became clear that web designers would need to create one website that would work for multiple platforms, graceful degradation emerged. Designers who use this approach create a website that offers a high level of user experience in…

1.Create the body We will create our HTML document in this step, with links to the external stylesheet and JavaScript code in the head section. The body section contains the website content, defined in Step 2. 2.Define content The page consists of a data-tiles container, which stores individual tile groups. Each tile group contains a <span> that wraps the individual tile elements, which are also <span> elements with set background images. Additional content can be placed inside the most inner elements. 3. Set group and tile containers The group container will be displayed as a block element with a height of 380 pixels. All of its inner elements will have a transition lasting one second. First-level children, the tile containers, will display as inline-block elements so they are placed next…

So with the project all finished, arguably the most significant part of the process is actually passing the site over to the client. In the case of Mirum and Aston Martin Lagonda, the frontend was delivered as a complete static site package. Although built specifically to integrate into an existing CMS, the DB11 microsite was fully functional and could be hosted independently if so desired. “AML’s CMS handled all the different languages and market localisations required, so we only had to worry about delivering the site in one language, in this case, UK English. We then had two major rounds of QA/testing, first with the static site and again once Aston Martin’s team had integrated the templates into the CMS, giving us a broad view of any potential problems with…

WHAT’S HAPPENING WITH HTML5 CANVAS? Since its creation by Apple in 2004, the HTML5 Canvas element has increasingly become woven into the fabric of the web. Simply put, Canvas provides us with an environment in which to create art and graphics with JavaScript. Some of the things we can do with Canvas include building games, plotting interactive charts and manipulating video, but the areas that we are going to be focusing on are drawing in 2D, manipulating images and rendering 3D graphics. Unlike SVG, Canvas is resolution-dependent, which means that it renders its contents with pixels not vectors and outputs raster images instead of code. Because of this, Canvas can be more efficient, such as when rendering many objects at once and animating with the requestAnimationFrame method. At a basic…

1. More markup To manipulate images, we need extra elements in our markup. Open up index.html for editing and add the following code after our lone <canvas> element: 2. The ‘base’ Canvas In order to adjust contrast and brightness more than once, we need a place to reference the original image from. This is the purpose of our second, hidden Canvas – to store an unmodified version of our image that we can draw to our original Canvas for modification. In our main.js file, we need to create a reference for this new Canvas. Later on we will need to modify drawPhoto() to also draw to base Canvas – the code for this is on FileSilo. 3. Constant adjustment Range inputs only emit an event when the user has released…

Despite being around since 1999, the SVG format has really only taken off since the focus in web design shifted to the new possibilities that HTML5 offered. At this point it became something that all major browsers started to consider supporting; Internet Explorer didn’t get support until version 11 in March 2011, while Konqueror was the first to support in 2004. The big advantages that SVG can bring to designers is that they are perfect for icons and logos as they are nearly always drawn in vector illustration package. Keeping them in vector format means not only a small file size, but that file can be scaled up or down without any impact on the file size. This is a perfect solution for responsive graphics but also for different devices…

Slack slack.com Alexander Engzell Creative director, Bonne Marque bonnemarque.se Since its beta, Slack has been the platform on which the Bonne Marque team members – across five countries and four continents – communicate. The archive and search functions enable one to rediscover messages or redownload an image sent or received any time ago. Creating channels for specific projects or team members, inline previews of most formats and integration with other services, such as Google Apps or Dropbox, contribute to the ultimate communication and file-sharing platform – makes this a perfect app for our team of makers whose lives depend upon effective communication. Slack’s great branding, and having been there from the outset, reinforces my devotion. Slack @SlackHQ Get the latest updates on what’s happening with the app. Sketch sketchapp.com Tom…

“Premier provider of datacentre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK Featured host: Netcetera www.netcetera.co.uk 0800 808 5450 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 datacentre 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…

EVERYTHING YOU NEED TO KNOW ABOUT ACCESSING YOUR NEW DIGITAL REPOSITORY To get access to FileSilo, please visit www.filesilo.co.uk/webdesigner 01 Follow the instructions on-screen to create an account with our secure FileSilo system, or log in and unlock the issue by answering a simple question about the magazine. You can access the content for free with your issue. 02 If you’re a print subscriber, you can easily unlock all the content by entering your unique Subscriber ID. You can find this on all correspondence from Imagine Publishing, including the clear plastic envelopes your magazine gets delivered to your door in every month. 03 You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you…

Web Designer’s latest digital addition to our burgeoning collection is 20 Quickfire HTML & CSS Techniques. Discover how to animate SVG, create a 360-degree viewer, code slide-up titles, implement smart social icons and much, much more. Don’t forget 10 Amazing Websites Vol 3, CSS 3D Effects and jQuery Genius Guide. Get to grips with the core API, find out how jQuery works with ES6 and learn advanced jQuery methods. Plus, check out Advanced Angular and The Web Apps Handbook. 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 Scotland uxscotland.net/2016 A three-day, hands-on, practical UX and design conference that lets you connect and learn from peers and industry leaders. Smashing Conference smashingconf.com A conference about failures and successes in the frontend and in UX. ReactEurope react-europe.org Speakers, workshops, lightning talks and a hackathon are all on the cards at this conference that gives talks to inspire. Dinosaur JS dinosaurjs.org The site for Dinosaur JS makes you want to find out more. A host of speakers will be making an appearance. NYC Awwwards bit.ly/1Oh8uiv From the people behind the inspiration site comes a host of industry experts unveiling their secrets (there’s a party too!).…

1. Create HTML document The main webpage is constructed within a HTML document containing a head and body section. The head section is used to load external resources – in this case, a stylesheet and JavaScript file. The body section contains the website content, which will be defined in Step 2. 2. Scroll content The data-scrollsnap attribute is used to label the container for the scrolling items. Inside this container are the item collections – in this case, we will make use of <a> link tags that have a set background image. This gives us the advantage of being able to easily set a responsive image that can then link to other pages or trigger reactions to being clicked. 3. Style the container Now that the HTML page document is…

PROJECT Aston Martin DB11 WEB db11.astonmartin.com AGENCY Mirum WEB mirumagency.com If you were to ask James Bond what he’s drinking, Ian Fleming’s iconic spy is likely to give his trademark scowl while ordering a vodka martini. If you need then to ask him what he’s driving then again there’s only one answer – an Aston Martin. Just not after quaffing said alcoholic beverage, obviously. Either way, as car manufacturers go Aston Martin is synonymous with Her Majesty’s finest. Founded in London over a century ago, this luxurious sports car legend is still engineered and produced on England’s shores out of headquarters in Gaydon, Warwickshire. Its legacy spans countless models including the famous DB series bearing the initials of former managing director David Brown, and of course the DB5 featured in…

1. Work with more markup To modify image filters that we want for our modified image, we need a third Canvas. We also need a small UI to enable us to select the filter we want to use and a range input to modify the intensity (opacity) of the filter. Just after the #controls <div>, simply add: 2. JavaScript references We need some variables in our JavaScript to keep a track of the filter we’ve selected, as well as a reference to the Canvas we’re going to draw the filter on (with a set intensity). Just after applyEffects(), create the following: 3. Select a filter If you view index.html, you’ll see we have four different filters available to us. We want to be able to toggle each filter by clicking…

Accordions have long been a staple component of the web designer’s toolkit, useful for hiding away long-form content that can be revealed at the touch of a button while also presenting the user with a comprehensive UI. Evolving the accordion for the contemporary web is really about improving the signalling the UI gives the user. CSS transitions can be used to rotate elements, which can bring the concept of ‘direction’ into play. Before an accordion may have had + and – icons, whereas now it can have an arrow > that rotates depending on the state of the accordion item. Transitions can also be used to make content appear and disappear in a less jarring way. Leveraging CSS transitions over JavaScript allows for multiple animations to occur at once with…

Webpack webpack.github.io Writing code in module form and packaging it with Webpack makes maintaining a complex project simple. We don’t have to worry about our browser making lots of HTTP requests to get our JavaScript, or the order it arrives in, so code arrives faster and will fail less often. Babel babeljs.io Support for ES6 is greater than ever, but there isn’t always support for all of the things that we’ve come to use in our code. Babel takes our ES6 code and turns it into lovely, widely supported ES5, so we can write the latest code and run it everywhere, Git git-scm.com A good versioning system is often overlooked, but Git is a tool used by millions of developers every day. With Git, we can be certain that, not…

In issue 248 we talked about how using the command line over the traditional WordPress wp-admin backend can be beneficial to a website administrator. It can speed up the development process and make common tasks such as managing your themes and plugins a breeze. This issue we will cover some more advanced commands, which includes importing and exporting data – very useful if you wish to amalgamate data from multiple websites into one larger website. The export and import commands can be used within a terminal window and speeds up the processing of the website data, which avoids any annoying time-out errors that can occur when exporting your data using the WordPress back-end interface. Using the terminal for these types of tasks is also useful if you want instant feedback…

It’s hard to believe but the first version of HTML5 appeared way back in 2008. Alright, we know this was only the first draft but the web’s favourite markup language was about to change for the good. The secret to success of a new specification is browser support. The more features a browser supports the more opportunity there is to use them. It was Firefox 3 that got the ball rolling with Chrome, Safari and even IE eventually joining the party. The HTML5 specification was finally released as a stable W3C recommendation in 2014. So, what was next for HTML, surely HTML6? No, the next iteration was to be 5.1, which is the spec currently being worked on. This is due for Recommendation, or to be completed, later this year.…

01. Chekotin Jewellery chekotin.com Smart, sharp photography neatly integrated with a relaxed colour palette. 02. reputationsquad bit.ly/1QXizf4 An interactive animated node background keeps the user’s interest. 03. The VHS Retrominder retrominder.tv This browser-based game re-creates the Eighties in this digital homage. 04. Cavalier cavalierchallenge.com Get on a horse and start galloping. It’s addictive and harder than you think. Graphics Robot Food behance.net/RobotFood A talented agency that produces great branding as shown by its Naughty & Nice craft beer. Colour picker Pinks bit.ly/1WY1HvF Typesetter Ciao Bella fonts.com/font/oddsorts/ciao-bella An elegant hand-crafted style font with neat ornamental styles. Sans Beam bit.ly/1TLnGmS A modern headline and body font with 15 different weights for all occasions. Thematic Blueberry bit.ly/1T1xdHV A minimalist and clean theme with a focus on content but also offering a great balance…

“They want you in-house so they can pay you less’’ I get this question as often as I get the question “How do I get more work?” When we’re new to the game, it’s hard to get work. Once we get it, it’s hard to feel confident about what to charge. How much we charge is linked to how we charge and to what clients are accustomed to paying at the moment. There are several common fee structures in design: billing by project, by hour, by retainer and finally by salary. If you are an experienced web designer working solo or leading a firm, it’s best to bill based on project fees. You should know what it will take you to do the project and what it will cost. Clients…

1.Create the HTML Webpages need to be defined as an HTML document with a head and body section. This step creates this, with links to the external stylesheet and JavaScript code in the head section. The body section contains the website content, which will be defined in Step 2. 2. Define content The page content consists of the navigation and the content within the page sections. We use the <article> tag to contain the different sections, each of which have their own background image defined through the style attribute. Other than unique background settings, we keep all styling external to the page. 3. Initiate styling We now start to edit the styles.css file, where the styling rules are placed. The first set of styles added to this file will define…

Listening to, and now reading about, Mirum’s experience on the project could leave you thinking everything was plain sailing – or rather smooth driving. Working so closely with AML and the partnering agencies was fundamental for timely delivery, but were there any trying moments? “The most challenging code-based part of the project was probably stitching together the Web Audio API and D3.js to build the audio-visual elements for the Sound page,” the team admits. “Building an interactive audio player like that was fun, but it came with some rather interesting technical challenges, particularly some interesting bugs in OS X Safari. We had to code around some standard methods to allow Safari to keep up with the demands of the audio player. It’s sometimes the simple concepts that present the most…

A brand synonymous with the winter, Barbour also has a huge range of products for the summer months. Our challenge was to increase engagement with the Barbour brand during the sunny season through social channels – positioning Barbour as a lifestyle brand at the heart of summer. Instead of a typical UGC or outreach campaign, we thought we’d do something a little different. So we invented a new Barbour product: the Rather Handy Picnic Rug. Designed for the British summer, understandably it works perfectly as a picnic rug, but it also works as a waterpoof poncho, towel, wine cooler, umbrella, changing room and a whole lot more. A special edition, the only way you could get your hands on one was by winning it online. All people had to do…

Depending on who you talk to CSS is the best thing ever, a pain to work with or broken. Since its initial release in December 1996 the web has moved on a lot. In August 2015, Australian developer Glen Maddern introduced the world to a new way of thinking about CSS: CSS Modules (CSSM). These combat some of the perceived problems with CSS that other languages solved. In CSS everything is global by default, but this is not so with CSSM. With CSSM if you declare a class called.button it’s locally scoped to that file. Therefore you never have to worry about naming conflicts. Another key tenet is composition. To share classes between files you explicitly state what you want to borrow and where from. This eliminates dead code, as…

caniuse.com This site is invaluable at seeing the current lay of the land surrounding CSS features and beyond. You can quickly get an idea for how well supported a certain feature is and filter by mobile browsers and usage by country. It even alerts you of edge cases (for example, IE and calc). caniuse MDN developer.mozilla.org If you wish to deep dive into any CSS property then Mozilla Developer Network has you covered. Even everyday properties, like background, have an extraordinary amount of detail to show the spec definition. There are also examples to show how it can be used. Sakugawa github.com/paazmaya/sakugawa Sakugawa is a CSS splitter, filter and organiser for IE9 and below. If you work on very large stylesheets, which exceed 4,095 selectors, IE will ignore selectors past…

Virtual reality is hard – especially if you have little experience and knowledge of creating 3D scenes. Tracking head movements, for example, is key to a great VR experience, if the scene moves too slowly in response to our head moving, the effect is unrealistic at best and can cause a great deal of nausea at the worst. That’s not something we want our users to be experiencing with something we’ve made! Fortunately, as the technology begins to enter the mainstream, tools begin to appear that allow people to create things with that technology. Mozilla’s A-Frame is a framework that does just that. Using HTML markup we can describe entire scenes and interactions that can be viewed with a VR headset using only a modern web browser! In this tutorial,…