Innholdsfortegnelse for No. 246 i Web Designer

“Create an amazing VR experience without writing a line of JavaScript? This is the reality of A-Frame, Mozilla’s VR framework” 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” Wow with your HTML and CSS HTML and CSS, what would we do without them? They are the kings of web design and together they build and beautify everything seen on a screen. Our lead feature (page 38) takes a closer look at the web’s most powerful combo and focuses on how it can be utilised to create great-looking visuals. What’s in the feature’s line-up? It demonstrates how to build clever cinemagraphs, make charts beautiful, employ the power of CSS filters, work with advanced…

Animatron animatron.com Animatron is a powerful animation tool with an online editor that is easy to use. There are a host of good-looking assets to use and plenty of instructions for those who are new to the editor. If you want more power, sign up for one of their Starter or Pro packages. Html5maker html5maker.com The creators of html5maker describe its output as “Outstanding Results with Minimum Effort” – no professional skills needed. A tempting mantra and a collection of excellent templates, along with an intuitive user interface, makes creation quick and simple. Google Web Designer google.com/webdesigner Google’s very own HTML5 animation tool that is ideal for creating dynamic banner ads. It uses a timeline interface, which is intuitive and easy to get to grips with. Plus, it’s free to…

1.Video the star Sites such as sailing-with-greenpeace.com make web video the central focal point to the experience. HTML5, and the ability to embed and play video natively inside the browser, makes this kind of design far more robust. The Greenpeace project utilises the <video> tag for intro background and archive clips, all stretched full width to provide an immersive experience. 2. The <video> tag HTML5 video begins with the tag itself, defining attributes for how the player element appears or behaves. A set of <source> tags wrapped inside then point to each file path and the encoding types: WEBM, MP4 and OGG formats. In this example we will start from a video tag like so: 3. Canvas and overlay wrapper Our video tag from the last step is called ‘theVideo’,…

Project Beer 34 Web 34.ge/en Agency Leavingstone Web leavingstone.com Duration 3 months Total hours Approx 500 Beer. Wherever you are in the world it is almost guaranteed that you will be able to get your hands on a cold, frosty beer straight out of the fridge. It might be a worldwide brand, it might be region specific, it might be the only hand-crafted beer in the village, but you will be able to get yourself a beer. It has a global commonality that is perfectly demonstrated by the story of 34. The first Georgian craft beer brewed by the Natakhtari Brewery, 34 combines three species of malt and four species of hops producing ‘an exquisite taste only to be appreciated by expert taste buds’. Leavingstone has been the digital buddy…

Year 2008 No. of employees 2 Fell Swoop is founded by Matt Dente to create digital products. Year 2010 No. of employees 2 A three-year relationship begins with Clearwire (purchased by Sprint). Year 2011 No. of employees 4 Began working with Zynga, which is a leading developer of social games. Year 2013 No. of employees 8 Redesigned the Epicurous app, with a new interface, for Condé Nast. Year 2014 No. of employees 14 Designed The New Yorker’s first digital paywall and redesigned People’s homepage. Year 2015 No. of employees 32 Began work on Microsoft Windows’ site, and social media and email marketing.…

The web has never really had a true layout system. We hacked together tables, floats, absolute positioning and flexboxes, but we have had to bend our content backwards and cram in all sorts of non-semantic junk in order to end up with something resembling what we want. It’s frustrating that it takes dozens (if not hundreds) of lines of CSS, and an insane amount of classes and IDs in order to do some of the most common and straightforward layouts on the web. CSS Grid is a new standard already shipping in IE and Edge, and available behind flags and prefixes in Firefox, Chrome and WebKit Nightly, that saves us from all of that. It lets you define your page, or sections of the page, as a collection of vertical…

Strike importance Make sure that the strike-through effect is visible on all browsers to avoid embarrassing wording slipping through. Strike colour Unlike the standard strike-through effect offered by HTML and CSS, this line is a different colour to the main text. Strategic wording The wording is written to make full use of the strike-through effect, and to change the context on each read. Legacy content Using the standard <strike> tag will allow the effect to be compatible with all content without needing HTML changes. Semantic meaning The <strike> tag provides context to the text, allowing apps and search engines to understand what is happening. EXPERT ADVICE Text: the bottom line The irony of this text effect is that the intention to show the line through the middle of the text…

Responsive images In WordPress version 4.4, users will no longer be required to use CSS or other techniques to serve appropriate images sizes to different screen sizes. WordPress will automatically crop the correct image size and serve to the user’s browser. This is accomplished with two image attributes: srcset and sizes. Browsers now select the most appropriate size and downloads it. This conserves bandwidth and speeds up loading time. Twenty-Sixteen Theme This brand-new theme is built with mobile-first and responsive in mind, so you can be assured it looks great on any device. It is a modernised approach to an ever-popular layout with its horizontal masterhead, an optional right sidebar and displays author details on the left on blog posts. Twenty Sixteen comes in four different colour schemes. It is…

Have you ever customised a WordPress theme, made modifications and then noticed that a new update has been released for the theme that you had been working on? Then did you later find that when you tried to update your theme, your website broke and lost all the changes? This is where the power of child theme comes into play. No longer will you have to be afraid of updates, overwriting your custom code. A child theme will preserve your changes separately, whilst maintaining the main parent theme updates. A child theme will also help make your theme future-proof. Previously you could easily set up a child theme by making use of the @import query in your stylesheet: You can then apply your custom changes below this. However this method…

1.Get the starter kit Google provides a template for custom elements which can be downloaded at github.com/PolymerElements/seed-element/archive/v1.0.0.zip. Extract the archive to a subfolder of choice – if you generated the button test example shown on the previous page, place it in /home/tamhan/polymerworkspace/bower_components/ imagine-element. Then, rename all files bearing seed-element to imagine-element. 2. Analyse the structure Open imagine-element in order to reveal the module’s contents: they will be loaded into the DOM of the target website if the module is imported. For us, the structure containing the dom-module is the most interesting one – the id attribute determines which name the new tag will bear. So let’s go ahead and change this to imagine-element accordingly. 3. Adjust the template The actual element lives inside the <template> tag. Our – relatively benign…

When Google introduced Material Design for Android, few analysts thought that it would be around for long. As if to spite critics, Google has since extended the product to the web – as time goes by, Material Design shows up on more and more web properties. This packet helps you blend in. A simple example of using paper elements is the following element, which creates a simple checkbox: Of course, more complex elements are also contained. Paper-card is useful for all those keen on re-creating the experience first seen on Google Now. Finally, the packet also contains a group of elements mirroring smaller aspects of the Material Design framework. For example, paper-ripple can be used to re-create the paper animation:…

An ancient German proverb states that it is impossible to create a product which satisfies everyone. Google uses this ancient bit of tribal knowledge by creating space for modules which encapsulate other libraries, thereby making them available to third-party developers in a Web Component-friendly package. As of this writing, Google supports but one library: Christopher Jeffrey’s marked library provides a high-performance parser for Markdown code which is rendered into the DOM tree. Google’s preprovided example is a first-class explanation. It contains a marked element which bears the actual string to be inflated. In addition to that, a child element with the markdown-html attribute is created. When loaded, markdown-element will populate the <div> tag with the extended Markdown automagically. Do note that Markdown is not an industry standard and that there…

Imagine that the ImagineElement should be used with a client. Being based in Germany, he will – obviously – expect a language in a different language to be displayed on the screen. This requires the creation of a parameter: if the German flag is set to true, the Hello text will instead appear in German. First of all, proceed to changing the declaration of the template to look like this: This code exhibits multiple interesting behaviours and these can come across as a bit challenging to any newcomers to data binding. First of all, data-binding instructions must always be inside a <template> tag – moving them directly to the <h1> would break the system. Secondarily, parameters need to be announced in the properties field. In the next step, index.html must…

JavaScript has become the fastest growing and widely supported programming language available, and it feels like every week the ideas and paradigms behind working with the language are challenged. Web browsers are built into almost everything electrical these days, from smart TVs to interactive kettles. JavaScript is the common denominator when it comes to programming languages, being able to run on any of these smart devices. Meteor is a framework that is working hard on unifying the development process across all of these platforms and with its recent onboarding of ReactJS it can provide a true Isomorphic environment. In this article you’ll be introduced to Meteor, MongoDB and React to help you build a single-page Isomorphic web application. Isomorphic JavaScript is one single codebase that can be executed on the…

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 use a desktop to download content, as you may not be…

Web Designer’s latest digital addition to our burgeoning collection is jQuery Genius Guide. Get to grips with the core API, find out how jQuery works with ES6, learn advanced jQuery methods and common mistakes to avoid. Plus, you can discover a collection of plugins for creating some great special effects as well as learn how to build your own. Don’t forget The Art of Responsive Design and The Web Apps Handbook. Get an insight into how to build apps with HTML, CSS and JavaScript along with some of the most the popular libraries including PhoneGap. Plus, check out Web Design Superstars, 225 Best Web Tools and Resources and Amazing Websites and How to Build them Vol 02. How can you get your hands on a Web Designer digital edition? Head…

SXSW 2016 sxsw.com Check over the Interactive schedule from 11-15 March for a cornucopia of speakers who are in the know. DIBI dibiconference.com Taking place in Scotland’s capital, the Design It; Build It conference has an impressive line-up of speakers. EmberConf emberconf.com The flagship conference for the Ember community in Oregon from 28-30 March. Plenty of talks and training to enjoy. UX in the City uxinthecity.net/2016/oxford/ A new community-driven, practical UX conference in the heart of the beautiful city of Oxford. Runs from 31 March. SmashingConf smashingconf.com Brought to you by the good people at Smashing. Get a toolbox of smart frontend/UX ideas, solutions and techniques.…

1.Power the site The site uses a combination of HTML5 and CSS3, alongside jQuery and GSAP’s TweenMax to underpin the on-scroll animations. In addition, a bespoke JavaScript library called animate_scene.js is used to initialise each scene and perform all of the logic for synchronising how the elements move. 2.Styles and structure Locate the project files on FileSilo where index.html is a shorter version of the site consisting of two scenes. Apart from the JS libraries the page requires three external CSS files, including animations.css defining CSS3 animations and styles.css setting common element styles. In the HTML, scenes are placed within a full-page container, preceded by a fakeheight <div> to calculate scene height. 3. Basic scene structure From index.html you can see how scenes are defined as container <div> elements. Each…

1.Animated border frame The Anita site features fixed black or white borders throughout, elegantly framing the page content as you scroll. This element isn’t merely decorative however, forming a home for navigation and indeed the fly-out Follow Us tab for social links. Essentially it achieves this with four <div> elements linked to one main CSS class, then four subclasses. Here we’ll examine this technique for adding a thick frame-like, responsive border that grows on page load. 2.HTML page structure The example HTML structure starts with the four <div> elements forming the black strips for the top, bottom, left and right borders of our frame. Attach the parent ‘border’ CSS class then four subclasses that will not only define specific positioning but also dictate the horizontal and vertical pairs for animation.…

MAKE CHARMING CANVAS EFFECTS COMBINE CSS3 ELEMENT FILTERS WITH CANVAS OR VIDEO HTML5 Canvas captured the imagination of almost every creative in the web industry a few years ago, and since then it has been used to deliver fantastic interactive experiences to the web at large. Relatively new to the scene are CSS3 Filters, which provide developers the means to apply effects such as blurring and colour manipulation to any element. Note that this means any element – including video and Canvas elements. These filters are another feather in the hat of the contemporary web developer and can be combined with other technologies, like Canvas, to create visuals that can be quite difficult for users to discern how they’re produced. VIEWPORT ELEMENT SIZING WITH VH CSS has got some new…

In this tutorial the focus of our design is going to be on creating an interactive particle system that reacts to the user’s mouse, inspired by stricte.io. The Stricte site has a very simple approach, which uses a full-screen background image that scales responsively to fit the page. Then there is an interactive particle system in a HTML5 Canvas tag on top of this. When the particles get close to one another, lovely interconnected lines give the moving particles a network feel that constantly ebbs and flows. In order to achieve the same effect, the P5.js library will be used as this makes creating content for the Canvas element incredibly easy. The core of the code for this will be creating a particle class. If you are not quite sure…

When a system provides human beings with the possibility to consume and to create, most will happily state to the passive side. This is true for most GUI stacks: while QtGui provided an ample array of tools for creating custom widgets, most developers are happy with the ones provided in the framework’s core. In the case of Polymer, a similar situation applies as Google uses the framework internally, thereby creating a large selection of controls suited to both common and uncommon tasks. If a website is to use Google services, deploying Polymer can make sense even if no third-party controls are used – getting required functionality with one tag really saves time. You can visit elements.polymer-project.org/ browse to find out more about the components that are available.…

Developers working on controls can (and should) obtain basic logic from the components that are already found in the framework. Iron is a set of base classes that can provide you with all kinds of commonly used functionality: think about features like AJAX or form management. Iron-ajax is a prime example for what developers are to expect. Embed an iron-ajax element into a website of your choice, and be notified when the requested data arrives. After that, there are various helper methods that can be invoked to instruct the element to go around for another pass:…

Fluid motion is a core tenet of the Material Design language, but implementing meaningful animations by hand is not easy. The neon-animated-pages element is a GUI stack that handles transitions between one or more child pages of a web app by using keyframes and hardware acceleration. Neon-animated-pages elements take one or more children implementing the Polymer. NeonAnimatableBehavior class lets developers specify the animations to be used as elements move into and out of the visible field. The exact behaviour of neon-animated-pages depends strongly on the element in which it is deployed. Google's demo (visit it at bit.ly/1SgzxeG) provides a group of sample implementations describing the scope of the class. Try not to overdo animations as it can suck energy out of slow battery-powered hardware and cause stuttering websites.…

For a good example of going native, let's look at the detection of Bluetooth devices in the vicinity of the device running your web application: Platinum-bluetooth-device exposes a request() method. It must be invoked whenever a new handset or other communication partner is to be acquired – results are returned via a promise object. If a device is found, communication can be established using the normal Web Bluetooth API. Another interesting module assists developers who deploy Google Analytics in order to keep tab of their user's behaviour. If the Google Analytics module itself is set up correctly, add this snippet of code to persist information while your app is offline:…

Learning Web Component Development amzn.to/1O37fMP Even though this book was eclipsed by the fast update pace of the Polymer team, Sandeep Kumar Patel’s work definitely deserves attention. It explains the basics of both Web Components and (a slightly outdated version) of Polymer in great detail. It’s still a must-read though as the content can be adjusted to later versions with relative ease. The Polymer summit polymer-project.org/summit If a picture says more than a thousand words, what does that tell us about the didactic power of movies? Google’s recently held summit covered a wide variety of topics on video related to all things Polymer: enhance your commute with these resulting videos to supercharge your skills. The DevGuide bit.ly/1PmYS1O Developers wanting to learn more about the powers of the Polymer framework are…

Featured host: Netcetera www.netcetera.co.uk 0800 808 5450 “Premier provider of datacentre 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 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.…

The web has been on the long road to redemption for a few years now, but unfortunately it has taken a lot longer than most of us had hoped. As we reported in the last issue Internet Explorer is in its final death throes and a headline that has kept it company over years has been Flash and its imminent demise. Flash will never die, well not until Adobe decide that it’s time for the software to make its graceful exit into retirement. This may be sooner than we think with the recent announcement of Animate CC, the tool to replace Flash Professional. Animate CC will have some new features, like optimised stylesheets for ads and Typekit integration for HTML5 Canvas docs. Find out more about Animate CC at blogs.adobe.com/animate/…

01. UBU urbanbeautyunited.com In-your-face mischievous graphics, and multidirectional image sliders. 02. Active Theory activetheory.net Seemingly simple design with smart effects. 03. Drones: Our Future Skies dronesfutureskies.com Need information on drones? The clever flip screen effect offers double the information. 04. Tolia Ice Cream tolia.ge A minimal loading screen ends with an introduction to smart cinemagraphs. Graphics mc bess bit.ly/1XlzU75 Great typography cannot be ignored. Check out this impressive collection of illustrations from mc bess Colour picker Book Brighton Rock b bit.ly/1SKp7Et Typesetter TT Pines myfonts.com/fonts/type-type/tt-pines A modern sans serif with a subtle quirkiness and broad family of weights. Desire Rough & Ragged bit.ly/1SKp9fI A tall font with a textured edge. Perfect for adding a touch of heritage to a design. Themematic Beautiful beautiful.dtbaker.net Gorgeous watercolours lift this theme to new…

“Another hurdle to a dyslexic audience is typography” Consider this: even though there are more users in the world with disabilities than people using IE8, companies, developers and designers prioritise support for IE8 over accessibility. Web designers are systematically failing to provide a service that’s suitable for those with even basic impairment issues. Many designers avoid accessibility due to constraints, which can affect the way they work. It’s true that making a site truly accessible can make it look less visually appealing and dampen creative endeavour. But avoiding accessibility is truly unacceptable when you take into account that 70 per cent of the UK population wears glasses, one in 30 suffer with sight loss, over two million people in the UK are colour-blind and ten per cent of the UK…

Why use base64? Using base64 images on the site means that only a single CSS file is preloaded, rather than a huge collection of stored files. This significantly reduces server requests and provides a smoother, more streamlined user experience. If you’re not familiar with it, there are several online tools to assist conversion. Encoding made simple An online tool called b64.io (b64.io) can enable you to simply drag and drop the JPG, PNG or SVG image files that you need for converting. You can then copy the CSS background image class, and it references the image as a really long string of unintelligible characters – the encoded version of your image will be prefixed by MIME type. Alternative conversion tool A similarly useful online tool for base64 conversion can be…

Understand the brand needs Start from knowing your client values. To achieve this, research and find inspiration from around the world, like hot trends and competition, before setting the vision and strategy for your target audience. Anita’s Italian passion, innovation and its commitment to a 100 per cent hand-made product, made from natural ingredients, were central to this project. Powerful social brand building As part of a global digital perspective, 507 Creative created a social feed for the client, spanning Facebook, Instagram and Twitter channels. Integrating these heavily into the site would invite Anita’s worldwide customer ambassadors to share positive experiences and boost the brand by simply enjoying the product or service. Mobile wireframing came first Great wireframing is always driven by the right strategy. Wireframing allows the designers to…

Epicurious was one of the first big hits in the iTunes App Store – but after seven years, it was overdue for a refresh. Condé Nast turned to us to help drive engagement by putting a crisp, modern face on the user experience. Using our efficient Clarity Lab workshop, we brought together the Epicurious team to harvest ideas, which became the foundation for more than a dozen user-experience concepts. In just a few days, Epicurious had a diverse menu of options representing distinct strategic and tactical approaches. Epicurious wanted as much parity between the tablet and smartphone experience as possible, while acknowledging the unique contexts and usage scenarios involved. Testing our prototypes with users helped us rightly fit the features of the app to each device. We took the team’s…

The purpose of design is to help convey information, whether it be descriptive or measurable. We often think of design as being about imagery and take the actual content for granted. Despite visual information being the first part of a website likely to be noticed, content is king and it is the textual information that delivers the main purpose for the website’s existence. With this in mind, we as website designers should consider how the role of typography can be used to convey meanings through the appearance of text-based information. Before the emergence of CSS3, the only way to integrate fonts with visual effects would have been to use graphic images. This technique unnecessarily increases page-download size, makes the page less maintainable, difficult for search engines to read and unuseable…

The new release of WordPress 4.4 is nicknamed ‘Clifford’, after the jazz trumpeter Clifford Brown. Each major release of WordPress comes with a new default theme. This new theme Twenty Sixteen offers a fluid grid design, flexible header, optional sidebar, selection of colour schemes and more. Some exciting changes and improvements and some noticeable new features are also in the latest update. WordPress users will be happy to hear images will now be responsive out of the box. You will no longer need to crop images or supply mobile-friendly images. As soon as you upload images in WordPress, it will automatically crop them to size. All images will be included in the srcset attribute, browsers can now select the best size and serve the appropriate image without wasting bandwidth with…

HTML was originally intended for the display and formatting of information: a set of basic tags permitted developers to emphasise important pieces of content. Creating desktop-like controls was not envisioned at the time when the language was first designed. As CSS and co. showed up, webmasters created ever-more complex controls using tables and div tags. While websites based on this technology do work, maintaining them tends to turn out to be a nightmare. Web Components address this problem by providing an API permitting the declaration of custom controls. So, for example, a tabstrip could be written as a my-tabstrip tab containing one or more instances of the my-tab class: Google decided to create a custom library ensuring widespread support in the form of Polymer. In essence, Polymer’s multitier architecture starts…

paper-button bit.ly/1msJVSt This component provides a set of buttons styled according to the rules of Material Design. paper-toast bit.ly/1PD5Qys Ever felt like displaying a pop-up window? Paper-toast provides you with Android toast dialogs. google-chart bit.ly/1PD5S9A Web Component addicts will appreciate the presence of google-chart: it provides a one-step solution to simple data visualisation. gold-cc-input bit.ly/1O34wD4 Credit cards are and remain the core of online payments. This widget provides users with a nicely formatted input dialog for entering credit card numbers. vaadin-grid bit.ly/23XboNW This full-featured data grid permits the creation of any web applications that need to display large amounts of data while remaining relatively responsive.…

Typos are the bane of eCommerce: many shops can suffer under the load of packet returns that are caused by invalid input. If you collect your user's information via the Gold elements, a dedicated set of verification logic ensures that the information entered is syntactically correct. Email addresses can be collected reliably by deploying an instance of gold-email-input: In addition to the automatical validation performed, you can invoke the validate() method to run the validator in response to programmatic changes to user input. Please be aware though that these widgets are no substitute for server-side validation. Dedicated attackers can bypass them with relative ease: perform a second check so that you won't be host and supplier to all kinds of undesirable elements.…

Google provides webmasters with a wide array of hard-to-obtain services. Deploying each of them forces developers to meddle with libraries, stylesheets and a variety of other elements. Using Google Web Components simplifies the integration of services like YouTube, Street View or Calendar. Signing in to Google’s services is a notorious pain for developers. This can be solved with: Other controls automatically pick up the login information stored in the google-signin element. For example, the contents of the calendar of the currently signed-in user can be brought onto the screen with this: Please be aware that using Polymer does not excempt you from the sign-in and authentification rules – if you don't register your application, it will not work.…

paper-radio-button bit.ly/20oV8Rn Use tabs to break down large screens into manageable bits of content. google-streetview-pano bit.ly/1Wevvl1 This control makes embedding StreetView panorama really easy. iron-icon elements.polymer-project.org/elements/iron-icon Images don’t need to be complex. iron-icon is ideally suited to displaying icons with minimal effort. iron-image elements.polymer-project.org/elements/iron-image This display widget contains a load of helpful methods that simplify the process of making images look good. paper-radio-button elements.polymer-project.org/elements/paper-radio-button Radio buttons are a well-established instrument for making users choose.…