Web Designerの No. 266 の目次

1. HTML definition The HTML for this example is very minimal. It consists of the usual definition of the HTML document, which contains the head section for referencing external CSS and JavaScript resources to load, along with the body section for visible content. The only content needed in the body is an h1 title. 2. CSS spacing and positioning HTML is now complete, so create a new file called styles.css. The page needs to be able to scroll – guaranteed by setting the minimum document height to 200% of the browser window height. First-level children inside the h1 elements need to display as inline-block elements using relative positioning so that their positioning can be controlled. These elements use ‘margin-top’ to guarantee required spacing for the effect to be visible when…

“Having a good showcase on our website is a big factor to get new clients to trust in us” who 14islands what Responsive Web Design, Interactive Front-Ends, HTML5, Mobile Web Apps, Creative animations, and Mobile first. where Krukmakargatan 22, Stockholm, Sweden web www.14islands.com key clients • North Kingdom • Google • Fjord • UENO • Upperquad 14 islands was started as a creative web development studio in 2011, when Hjörtur Hilmarsson and David Lindkvist were both working as freelance developers in Stockholm. Working as a freelancer, of course, has its advantages, but Hjörtur and David soon realised that they missed having a team of creative people around them, this is where the idea of having their own studio began to take root. David, co-founder and creative developer, takes up the…

Plume is a San Francisco startup on a mission to re-invent the home Wi-Fi. Plume is a self-optimising Wi-Fi system for the home. It provides a simple and fast Wi-Fi in every room of your home by plugging in nice looking pods. We were brought in as a development studio to build their new website. The goal of the website is to show the product in delightful ways and allow people to purchase it. The site is mobile friendly and features many inspiring animations. The Plume project was a team effort. Concept and design was made by the design studio Character in San Francisco. Digital Production was in hands of the experienced studio North Kingdom in Stockholm, Sweden. The designs were professional and got us inspired. A fun challenge to…

CODECS Video playback in the browser relies on the presence of a codec which can read the video format you’re using. To ensure your video works cross-browser, the safest bet is MP4 files using the H.264 codec, although there are other options. The video element is fairly straightforward to use, but the real power comes when you combine it with JavaScript, which gives you a high level of control over the player’s behaviour. In this tutorial, we cover basic setup of a video, selecting files to play back, and generating thumbnails. 1. CREATING A BASIC PAGE Let’s start with an HTML page outline. We’ll need a simple div structure, some CSS for styling and, most critically, a script file. You’ll notice that the video tag is empty right now, so…

Language change The website is available in two languages, and as communication is key when selling something, this is featured prominently within the design. Other buttons Another button sits at the bottom of the page. This also features a transitioning background, but it doesn’t trigger the background video, showing it has a different purpose. Background movement As the user rolls over the text box, the background becomes brighter, scales up and the background is actually a video. The water ripples, the boat bobs up and down and the clouds move. The main menu The main menu is featured in the top-right, and it appears on the page over the guides. These are visible and this is a nice touch to see the grid so prominent. Rollover boxes The main navigation…

To achieve global accessibility, the Twitter team managed to slim their application down to 1MB, and added all the PWA goodness discussed in this article: home screen installation, push notifications, offline access 2048 PUZZLE 2048-opera-pwa.surge.sh A PWA implementation by Gabriele Cirulli of the 2048 puzzle game originally created by Veewo Studio. It only works on mobile/ touchscreen devices, but is an example of a game app being made into a PWA that is fast, efficient, and installable. Warning for the uninitiated: the game is highly addictive. The open source is available on GitHub, so you can take a look at the structure (particularly of the JavaScript, which requires ten files to make the game run). The dirty secret of this app, however, is that the creator never actually…

“Updates to the HTML specification no longer just mean a few new tags. It also encompasses a whole set of APIs which allow a wide range of rich functions” Simon Jones HTML is still one of the key building blocks in web design and development. This issue Simon takes a closer look at the HTML specification and the APIs that are shaping the web. Very soon you’ll be able to implement almost any functionality you’d expect to find in a desktop app, without relying on third-party components. Page 42 Scott Domes Scott is a full-stack developer at MuseFind Technologies, author of upcoming book Progressive Web Apps with React and curates the Progressive Web App Newsletter. This issue he reveals the secrets of PWAs. Page 66 Steven Roberts Steven is the…

Glitch glitch.com Glitch’s tagline is ‘The friendly community where you’ll build the app of your dreams’. So how do that do that? Users never have to start from a blank slate. There are working example apps to remix, a code editor to modify them, instant hosting and deployment. As Glitch says, ‘Anybody can build a web app’ and it’s free. Fiber framer.com/fiber/ A free interactive UI kit comprised of elements that have been designed to work independently or as one seamless flow. Check it out. GPU.JS gpu.rocks This is a JavaScript library for GPGPU in the browser. It automatically compiles JS functions into shader language and runs them on the GPU using the WebGL API. Songbird google.github.io/songbird/ Songbird is a real-time spatial audio encoding JavaScript library for WebAudio applications. Get…

1. HTML document The first step is to define the HTML document that will define the page and store the visible content. The HTML document element contains two sections – the head section is used to store links to external resources, while the body is used to store visible content defined in step 2. 2. HTML content The content for this example consists of three article containers. Each of these articles will contain content elements to display. Elements that are to be animated as they scroll into view will have the ‘data-animation’ attribute applied to them. This attribute can also hold a value to describe which animation should be triggered. 3. CSS animation article Now that the HTML is complete, create a new file called styles.css for the visual presentation…

Google Interland is an adventure-packed game experience on the Web that teaches kids online safety. We loved the purpose and jumped at the opportunity to be the main development partner on the project. Together with North Kingdom we created an immersive world consisting of four individual games – each one focusing on different aspect of online safety. The inhabitants of Interland give life and personality to each part of the Interland story. The blue Internaut is the protagonist of the story and is with us throughout the experience. Each game also has an antagonist, or Blabh as we like to call them in Interland, which the player needs to overcome. The characters all have a number of animations that are triggered based on what happens around them, making them feel…

IS ANYONE STILL USING VANILLA HTML? These days, it seems that new web frameworks arrive on an almost constant basis. You’d be forgiven for asking: if I can develop with Angular, React or Vue, why bother spending time learning the latest additions to vanilla HTML? You’re probably not alone in this thinking, and for many, keeping pace with framework features is much more valuable than following the state of browser implementation of the latest W3C specifications. After all, the frameworks often take care of this for you via polyfills, wrapper libraries or syntactic sugar which makes the latest web development concepts easier to adopt. However, even with a framework you’re going to be using HTML to some degree, and without the latest tricks, your code won’t be as polished as…

VIDEO.JS videojs.com If all you need is something simple yet functional, Video.js provides an HTML5-based video player with fallback to Flash for older devices. This more or less guarantees that your content can be played seamlessly on almost any device. MEDIAELEMENT.JS www.mediaelementjs.com This library unifies HTML’s audio and video capabilities into a single element, which can be used across browsers with a consistent UI. As well as the audio and video formats you’d expect, it supports Facebook, YouTube, SoundCloud and other online sources. POPCORN.JS mozilla.github.io/popcorn-docs/getting-started/ If you’re looking to create a more interactive video experience, this could be for you. The library is designed to allow media elements to be controlled by arbitrary events or user actions on the page. Some have likened it to jQuery for videos. AMALIA.JS ina-foss.github.io/amalia.js/…

RECOGNISE AND SYNTHESISE SPEECH These would once have been complex functions requiring specialised software, but they’re now being built directly into browsers. The Web Speech API has components which support text-to-speech and speech-to-text. The latter of these will either use an online service (Chrome uses the Google Cloud Speech API) or the device’s native speech recognition service. Expect to see this being used widely on mobile devices in the future. DISPLAY A COLOUR PICKER Trivial as it may sound, this is a great example of how HTML5 is simplifying common tasks which would previously have required custom coding of a fairly complex UI component. <input type=“color”> will display a visual colour picker when clicked, using a colour picker native to the device. This could be particularly useful with HTML canvas.…

Content area The effect is contained in a content area covering the full screen. Significant space allows more focus for interactive elements. Navigation triggers Each navigation item has an event listener that triggers changes on the page, including visible text, colours and images. Not interactive Not all parts of the screen are interactive. All interactive elements are placed around the inside area of the house. Replicated text The text appearing in this space is replicated from the navigation item being hovered by the user’s mouse pointer. Changing appearance These windows change their appearance in connection to individual navigation elements being hovered by the user’s mouse pointer. EXPERT ADVICE UX preview feature Navigating to unexpected content is an annoyance, especially where there is a slow internet connection or where data is…

“In principle, WebAssembly is a specification for a binary representation of the asm.js subset of JavaScript” WHAT IS WEBASSEMBLY? At its core, WebAssembly is a virtual instruction set architecture (virtual ISA). As such, it has many use cases and can be embedded in many different environments. To encompass its variety and enable maximum reuse, the WebAssembly specification is split and layered into several documents. WHY WEBASSEMBLY? When JavaScript was first developed, the language was intended to serve as an execution environment for small interactive elements in web sites. More complete program logic was to be included via a variety of plugins such as Adobe‘s recently-discontinued Flash. After the browser wars of the early 2000s, developers started having to dig deeper: simply optimising the runtime environment had reached its limits, with…

“ In 2011 just under 50 per cent of sites were still using Flash ” When it comes to long goodbyes, Flash sits there at the top. The demise of Flash has long been touted by many, but it has hung on in there as HTML5 has slowly taken over. It has hung on in there even though Apple never introduced support for it on mobile. As Steve Jobs said in 2010 in his Thoughts on Flash piece, “The mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short”. It has hung on in there as Google blocked Flash content in Chrome. It was only a matter of time that the plug-in’s happy long life would come to end. And…

1. HTML document The first step is to define the HTML document. This consists of the HTML document container, which stores the head and body sections. The head section is used to reference the external CSS stylesheet to load, while the body section will be used to store the visible content created in steps 2 and 3. 2. HTML navigation The example requires the use of a navigation to call the content sections into view. The nav container will be used to select its child links from CSS in later steps. The href attribute of each link references a corresponding ‘id’ attribute of article containers created in step 3 – take note of how the # symbol defines a link to an on-page ID element. 3. Article containers The content…

VIVA LE VELO https://parall.ax/viva-le-velo  by PARALLAX https://parall.ax @parallax PROJECT STATS PROJECT DURATION 3 months NO OF PEOPLE INVOLVED 5 NAMES & POSITIONS • Louis Saville Head of Design • Liam Bush Head of Marketing • Dario Grandich Director • Mikey Quinn Digital Marketing Executive • Harry Parton Web Developer TOTAL MAN HOURS 290 Design Diary is often a story of a tight creative partnership between client and an agency. The exceptions to that rule tend to be when there is multiples of either, requiring diplomacy over communications and unity of vision. But what about those times when it isn’t a case of pursuing a third-party brief? Are there those occasions when digital teams can just let loose, chasing an idea of their own making? Well, in short, we know that the…

NOT VALIDATING HTML is an error-prone language: once it gets more complex, it’s not super-readable at a glance, and you won’t get a whole lot of error feedback since there’s no compiler and the browser will do its best to render even the most broken page. As a result, it’s incredibly valuable to run your code through the HTML validator to check standards adherence. But why stop there? You can also validate your CSS, check your page for accessibility and performance, and even run it through SEO tools which will suggest optimisations. CLINGING TO PRE-HTML5 SYNTAX You’d have to try really hard to find a reason to continue to support HTML4 standards. HTML5 brought in a whole host of language simplifications – a cleaner doctype statement, removal of the need…

“The most important principle is the concept of progressive enhancement. Progressive enhancement means your application loads the essential content first, as fast as possible. The user gets what they need as soon as it can be delivered” Web applications are more powerful than ever, and rival Android and iOS apps in complexity and capability. Progressive Web Apps are a way to bridge the remaining gap and provide the full functionality of native apps, while still delivering the performance needed to keep the web as a platform for everyone. Scott Domes - Full-stack developer at MuseFind Technologies WHY YOU NEED PWAs  Web applications for everyone The global web is going mobile. At the beginning of 2015, about a third of world wide web traffic came from mobile devices. Halfway through 2017,…

Essential assets and resources 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 • 210 minutes of expert Photoshop videos from Pluralsight (www.pluralsight.com) • 80 Beautiful hi-res frosted backgrounds from Sparklestock (www.sparklestock.com) • 80 Displacement waves 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 Free readers for digital too! Read on your tablet, download on your computer The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online…