Innholdsfortegnelse for No. 252 i Web Designer

“WebVR has the potential to offer as much, if not more, to a far greater number of people than even the most popular VR systems ” 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” Fast forward HTML5 video HTML5, it’s still the main attraction in the world of web design. It has a host of facets that make the browser a more friendly and welcome place. This issue it’s the turn of the HTML5 <video> tag. Google and many others are putting the final nail into the Flash coffin, so now is a good a time as any to start using the standards-friendly option. Even if you are already using it, our…

Web Designer’s latest digital addition to its burgeoning collection is The Developer’s Guide to JS. Check out how to get started with ES6, use Babel to compile code to work everywhere and get started with npm. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3D 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 03. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free Web Designer app and find them waiting for you as an in-app purchase.…

Reason to reasons.to A three-day conference based in Brighton, UK, hosting a selection of international speakers from design and code. Confab confabevents.com Confab Intensive runs from 19-21 September 2016 offering three days of hands-on content strategy workshops. AngularConnect angularconnect.com Get down to this two-day, multitrack conference, which features the world’s leading Angular experts. Symfony LIve london2016.live.symfony.com This two-day conference is perfect for Symfony/Drupal/ PHP devs. Share best practices and hear new developments. UX Cambridge uxcambridge.net/2016 Connect and learn from peers and leaders in the industry. Take away skills you can immediately use in your work.…

“Openness is central to MDN in that anyone can create an account to edit the content” Technology has always been an essential resource; one that has allowed for people to achieve great things, build new ways of exploring the world and in many ways act as an equaliser. This last point is the most important, as the moment that technology becomes accessible only to a few people, it loses one of its most fundamental benefits and charm. Everyone deserves access to high-quality learning resources that are and always will be free. The difficulty with sticking to this principle comes from a number of sources. Some resources are kept locked in closed ecosystems, which limits access for those without the means to purchase them. Others show irrelevant or out-of-date information due…

“I recently found inspiration for a portfolio design from a German bondage poster, and I said ‘All right, replace those sex toys with black rectangles and we’ve got ourselves a website.’ From everyday objects to going back centuries and looking at Japanese tattoo art or graffiti, I am always open to inspiration, trying to make sense of it and applying it to web design or branding or whatever we’re doing at the time.”…

WEBM Initially developed by On2, this codec ended up in Google’s hands when On2 was taken over. Google has since sponsored its continued development, while making the specification available royalty free. As time went by, the standard managed to achieve widespread recognition: it is, in fact, considered the quasi-recommended format for video tags by some. Of course, Google’s dominance over the development did not go well in Cupertino: as of this writing, iOS does not support WebM. Mac OS X also needs a third-party plugin, which is unlikely to be deployed widely. Offers significantly better video quality when compared to Theora. Google guarantees freedom from patent-risk via deal with MPEG LA. MP4 is said to offer slightly better video quality. Standardisers MPEG LA could always change its mind. OGG THEORA…

Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users. One of the easiest ways of adding animation to your website is by using CSS3. It’s fast, reliable and easy to learn, as well as a lot of fun. With CSS3 transitions you have the potential to alter the appearance and behaviour of an element whenever a state change occurs, such as when it is hovered over, focused on, active or targeted. One of the many things we can create using CSS3 is a drop-down menu as this is the easiest way to provide a hierarchal…

As part of the push by browsers to encourage developers to migrate their services and apps to secure, encrypted platforms by only enabling sensitive APIs on secure origins, the question of whether or not WebVR should be subject to this rule has arisen. Though not strictly a ‘sensitive’ API, WebVR is certainly a powerful and desirable API to have. If WebVR were to become a HTTP-only API, it’s unlikely that the technology underlying WebVR would be made to follow suit. If a developer has access to the WebGL API, then they will have to create a WebVR experience on an insecure domain, and this just takes up more work. The possibility then arises that developers may not want to cater to the HTTP-only API and instead split off and develop…

three.js threejs.org Three.js is one of the most feature-complete WebGL libraries out there. Almost everything we see in the current WebGL scene is powered by this library, resulting in great examples and resources for getting started with WebGL. MDN | WebGL developer.mozilla.org/en-US/Learn/WebGL MDN is fantastic for learning anything about everything – and that includes WebGL. With a number of starting points – including ‘getting started with the web’, MDN is full of information to kick-start your explorations into WebGL. WebGL Fundamentals webglfundamentals.org If you like to learn by working through and building demos, then this website is for you. What it lacks in fancy graphics, it more than makes up for in plentiful, accessible demos and teachings about the basic principles of WebGL. TWGL  twgljs.org If you’re after something more…

As technology advances, browser-based gaming has increased in sophistication. Technologies such as Canvas and WebGL with libraries such as Babylon.js and three. js allow developers to create cross-device gaming to rival native experiences. All this would be in vein if the application itself were difficult to control. Squeezing multiple players around a keyboard is cumbersome at best. By using controllers players can interact using devices designed for gaming. The Gamepad API opens these up to the browser. This API has been in browsers since 2012, but the W3C specification is still evolving today. While the key inputs have been cemented for a while now, other features such as vibration and gyroscope access are still being debated for inclusion. Browser support is at around 63 per cent (caniuse.com/#feat=gamepad), but all major…

Essential assets and templates Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP 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 • 81 Minutes of beginner JavaScript videos from Web Mentor (www.webmentor.org) • 20 Retro Photoshop actions from SparkleStock (www.sparklestock.com) • 3 responsive HTML/CSS templates • Futuristic Inflecto font The home of great downloads – exclusive to your favourite magazines from Imagine Publishing Secure and safe online access, from anywhere Free access for every reader, print and digital Download only the files you want, when you want All your gifts, from all your issues, in…

GET STARTED WITH NODE.JS How to install, implement and expand the JavaScript runtime ADD ANIMATION TO WEB FORMS Introduce dynamic elements to engage and inform users GET REACT APP SKILLS QUICKER Learn how to use/improve React Native with the assistance of Ignite BUILD 3D LOGOS WITH THREE.JS Unleash the talents of the popular JavaScript library and get creative Visit the WEB DESIGNER online shop at imagineshop.co.uk for back issues, books and merchandise ALL IN YOUR NEXT WEB DESIGNER Issue 253 on sale Thursday 15th September 2016…

01. Too Pop toopop.tv Simple animation techniques add ambience and intrigue to video elements. 02. Endless Possibilities gettyendless.com Getty creates a clever interactive experience to showcase their product. 03. Jean-Philippe Nuel jeanphilippenuel.com Big background images coupled with smart sliding panels add impact to pages. 04. Glide Kicks glidekicks.com Dedicated to light-up shoes the site combines photo, video and eCommerce. Graphics The Shining   Beautiful illustrations from Mike Mahle evokes the sinister overtones of the film. Colour picker Nitrobuild plus bit.ly/2attaoQ Typesetter TT Octas myfonts.com/fonts/type-type/tt-octas A narrowly proportioned font with a vintage character and personality to it. The narrowness of the font makes it an ideal choice for creating large headlines and titles in relatively small spaces. WordPress AmyNews demo.amytheme.com A premium responsive WordPress theme with a number of personalities (sport,…

“Being transparent and upfront, will go a long way to keeping things running smooth between you and your client” With working knowledge of HTML5, CSS3 and JavaScript, you should have enough skills to start working as a web developer/ designer. It takes surprisingly little time given the huge demand. But, if you can do a little server-side coding with say PHP, Python or JavaScript, you will find that your prospects for work will grow exponentially! My focus in this article is to help people get their freelancing career up and running. That said, for both freelancing and employment, it is important that you have a strong portfolio site that you can use to demonstrate your web design and development skills. So, how to get your first clients? Word of mouth…

Year 2008 No. of employees 0 Just Alex – Engzell Design rebrands to Bonne Marque, thanks to Allard Marx. Year 2011 No. of employees 0 Clients in Australia, USA and South America, eg Entrepreneur.com, Ritz-Carlton and BLINK. Year 2012 No. of employees 2 Employs a graphic designer in our Swedish office and Ray Mendez, our art director in LA. Year 2014 No. of employees 4 This significant year saw our team double, scoring two huge brands: HAP and FitWhey. Year 2015 No. of employees 5 Born Makers rebrand ignites full creative freedom. Bonne Marque opens a Bulgarian office. Year 2016 No. of employees 8 Becoming Conde Nast’s creative agency marks an important moment and change in direction.…

EXPERT COMMENT “Proprietary plugins are a hindrance to the deployment of multimedia: more than one campaign was rejected by clients whose management were without a crucial plugin. The emergence of standards-based video and audio playback is a godsend” THE WONDER OF HTML5 AND OPEN STANDARDS In the past, implementing a video solution usually required the embedding of one or more proprietary plugins. Even though Flash eventually became the top choice, the product nevertheless was not installed on every client’s computer. The HTML5 standard solves this via the declaration of the video tag. It provides a standardised way to embed video files, which the browser must then play back with one or more video codecs embedded or provided from the host operating system. Even though Flash had its fair share of…

Delivering high-performance animation to every screen is now a mandate in contemporary web practice; it needs to be fast and it needs to look sharp. SVG animations enable developers to deliver on that demand, with one added bonus: the production of animated SVG assets is a much closer relationship between designer and developer than before. With SVG animation, the asset the designer is producing is the same one that will get prepped and used in the animation itself. This lends designers much more control over the final product, and also allows artwork amends to be made without necessarily incurring further development costs. Despite SVGs being around for a while, they’ve only seemingly been in vogue recently and SVG animation is relatively new. A lot of SVG animation is possible with…

EXPERT COMMENT “Without doubt, WebVR is exciting. It gives the creative more opportunities when searching for a solution, opening up avenues we could only dream of before. Imagine entering a BMW and exploring the car’s interior in WebVR. Groundbreaking. However, new technology is often overused because of its ‘cool factor’ and our industry must exercise restraint. The right solution might be modest in comparison to WebGL, and I strongly urge creatives to select the best solution instead of the most fashionable one” 1. Get the resources There is a great deal of tech and techniques used in this tutorial, and there are a number of resources too! Before we start coding, grab all of the project assets from FileSilo. This will include the assets used in creating our WebVR screen;…

EXPERT COMMENT “I remember when the web was years behind gaming consoles and PC gaming, now WebVR is coming just as consoles are getting VR too, which is really exciting. There’ll be some interesting uses beyond gaming too, web-based training systems are a real possibility and don’t forget VR holiday snaps!” LIVYATANIM film.livyatanim.com LIVYATANIM is a VR music video. Produced entirely in black and white, the scenes transition from land, to sea, to air and pulsate in time with the music in each instance. As time progresses, the scenes become subject to glitch art-like phenomenon which greatly adds to the artistic quality of the video. Built with three.js and Web Audio – the experience is available on desktop and mobile as well as VR, so everybody can experience the movie…

“If your server is overseas you maybe missing out on ” search engine rankings  Featured host: Cyber Host Pro www.cyberhostpro.com / 0845 5279 345 About us Cyber Host Pro are committed to providing the best cloud server hosting in the UK, they are obsessed with automation and have been since their doors opened 15 years ago! They’ve grown year on year and love their solid growing customer base who trust them to keep their business’s cloud online! If you’re looking for a hosting provider who will provide you with the quality you need to help your business grow then contact them to see how they can help your business! They’ve got a vast range of hosting solutions including reseller hosting and server products for all business sizes. What we…

The web is a wonderful thing. It never stands still, but the moment one web skill is learnt and in the bag then another one comes along jostling for position at the top of the web development food chain. Being a web designer/developer is a continual learning process but what skills do you need to be learning to stay on top of your game? Which web technologies are ready to become the next big thing? Which skills will be needed to build and create the future of the web? The one constant is that the web will change. So keeping your skills sharp is as relevant today as it will be tomorrow. So what are the skills that are in demand in 2016? The recent Skills Up 2016 survey from…

DK PDF Generator bit.ly/2aMQr6h This plugin allows content creators to compile an eBook from WordPress posts. Envira Gallery enviragallery.com A photo gallery plugin, Envira builds responsive, customisable albums with support for Instagram and Pinterest. MyMail mymail.newsletter-plugin.com This polished solution features a live editor plus a gallery of stylish templates for managing email newsletter campaigns. Ultimate Popup bit.ly/2aPyD7v Access 14 attractively prestyled pop-up templates, which all come with customisable text, imagery and colours. Builder SiteOrigin Page siteorigin.com/page-builder/ This responsive page builder generates grid-based content optimised for every screen.…

UNDERSTAND ALTERNATE CONTENT SEMANTICS By default, a video tag’s content is always replaced with the video’s content. If the browser is not able to play it back for some reason or another, the internal content is displayed in lieu of the moving pictures. This provides us with a whole host of options to work around media player problems. DOWNLOAD AWAY One neat trick aimed at technical users allows them to download the movie file to their machine. The video can then be played back with the workstation’s media player, rather than in the browser. USE GIFS If playing back the video is an absolute must, an animated GIF could be a good space and quality alternative. Developers working on an Ubuntu box can start creating GIFs by transforming an MP4…

User experience design is one of the largest growing fields of design at the moment and the whole process is way bigger than any piece of software. It starts with understanding the audience, defining the users and what their goals are. There can be many different users with a plethora of goals that they are trying to achieve. The UX designer uses a variety of different methods to discover as much about the subject area of the site. This enables them to make decisions that inform the UI design which initially are known as low-fidelity wireframes. Once the refining of these interfaces and the design starts to take shape, XD comes into its own. It allows designs to be produced very quickly but more importantly, the testing of these interfaces…

Though not yet a full specification, WebVR is well on its way to becoming one and, surprisingly (given the complexity of VR), enjoys a great deal of support across a variety of modern browsers. Unlike most other specifications, currently WebVR is not beholden to being supported in every situation where a browser is capable of running WebVR content. In order to display WebVR content, the device running the WebVR app must be considered ‘WebVR’ capable. It’s early days, but this is generally taken to mean, your device must have a certain form factor, ie a mobile device. Modern desktop browsers are entirely capable of running WebVR content, but actually experiencing it through one of these devices is nigh on impossible. Strapping a Macbook to one’s head can hardly be called…

Chatbots have risen in popularity thanks to services like Slack which allow easy integration into them. Many organisations are now benefitting from the production increases they bring and are opening up the field of conversational user interfaces, interfaces which purely rely on dialogue. These bots are quite complicated to start. You will need to know some natural language processing, programming and working with APIs; all in all the niche of developers that fill all those requirements is pretty small. This is where (as with every case like this) frameworks come in to help us out. SuperScript (superscriptjs.com) is a framework for building chatbots that harness many advanced features while keeping it simple enough to get started without a PhD. Not only that but it has example clients using Slack, Telnet,…