Innholdsfortegnelse for The Web Design Book Vol 6 i The Web Design Book

THE TOP TOOLS, ESSENTIAL TECHNIQUES AND THE BEST ADVICE FOR STYLING PERFECTION CSSLinting is just like any other type of linting, in that it is “a tool that flags suspicious usage in software written in any computer language” (from the Wikipedia page on programmatic linting). Front-end developers are likely aware of JSONLint and JSLint. Well now there’s CSSLint, which analyses CSS and helps developers write CSS that conforms to a set of performance and syntax of best practices. ‘Helps’ is understating it really, CSSLint throws errors and if used as part of a build server – say, TeamCity for example – it will cause builds to fail. This is both a good and a bad thing. It means the rules are enforced with harsh penalties, but bad rules will create…

CSS Hat csshat.com Including any plugin that “writes code for the developer” is always going to be controversial, but CSS Hat does an okay job. When it comes to trying to scratch something together in minutes or unpicking several font styles at once – it can be a handy pallette to have, especially for those who don’t have a mental CSS encyclopedia. render.ly render.ly If something needs exporting, render.ly is the right tool for the job. The basic premise is that each top-level group in a PSD is a ‘screen’. and child groups with names beginning with “&” get exported as separate states of that screen. Render.ly also generates webfonts for icons in vector format. No more manual image exporting from PSDs. InVision invisionapp.com InVision takes designs and provides an…

The amount of space available for websites can often be limited, especially where the website is being used on a small screen. With the different information components in your design competing for screen space, it is important to make sure that you give each element the most appropriate placement in the design of the page or the screen. A more recent addition to the CSS specification is the use of 3D elements. We are all familiar with the default 2D presentation of webpage elements, in which we can position them on the page by using their horizontal and vertical coordinates; the 3D presentation features takes this one step further by allowing elements to be presented with depth perspective, which can then be used for rotation and making the elements appear…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer Weget Enterprise Site weget.nl/en Weget is a digital and design studio based in the city of Groningen, Netherlands, offering a range of services. Whether you require essential web products for big or small business startups, eCommerce, web applications or hosting and domains – you’ll find it here. Recognised for notable design work across numerous CSS award nominations, this unique portfolio experience details Weget’s work in all languages. Content is arranged in a lengthy structure more akin to a header slider component than a traditional web page. These seven screen-width panels are defined by HTML5 <video> backgrounds, looping relevant clips (WEBM) of around 25 seconds long. Sparse snippets of text provide hints towards further information and a section of featured works. Most distinctive though is the…

Software is an unique product in that it can be multiplied with minimal cost. Once the development has been footed, adding new installations tends to be an issue of purchasing extra hardware. Google has used this very approach to produce a variety of APIs, providing web designers access to building blocks used for the realisation of its own services. Some of them are, fortunately for us, made available for free: Google willingly foots the bill in order to tie developers closer to its own ecosystem. In addition to the eventual introduction of monetisation (well-established APIs tend to stop being free when enough people use them), Google furthermore profits from the ability to get its APIs stress-tested by third parties without needing to pay them for their work. Another, possibly more…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designers J. Walter Thompson (JWT) Amsterdam, Superhero Cheesecake Site projectschoolkrant.nl This rich educational site produced by JWT Amsterdam and commissioned by De Persgroep Publishing’s daily Algemeen Dagblad, a major national Dutch newspaper, acts as a curriculum tool for teachers and pupils alike. Built around five colourful lesson sections spanning news gathering, interview, photography, writing and design skills, the content culminates in compiling a school newspaper. Video tutorials from virtual tutors and a collection of animated characters combine beautifully to form an engaging experience for eager young eyes and minds. A three-pillar approach marries colourful environments, playful learning assets and game-like features throughout. Completing tests unlocks badges as rewards to mark progress so visitors can return, log in and continue at leisure. The keenest kids can even…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Part 1 Build an augmented menu that hooks into a mobile’s device orientation controls to create a bespoke browsing experience with three.js Creating compelling web experiences for mobile devices has come a long way, there are a whole raft of phone functions that designers can plug in to and access without the need for packaging up the mobile site as an app. In this tutorial what is being achieved with the native mobile web would have been pretty hard to conceive as an app going back just a few years, but now this is running purely as a mobile optimised website. The site itself will be in 3D and rendered by three.js but instead of this being rendered with the WebGL renderer, the scene will be…

Ever wanted to develop a native application but have been put off by learning a new language and ecosystem? Enter the Ionic framework which allows you to apply your JavaScript knowledge to build hybrid apps. Ionic offer other services to build APIs, a WYSIWYG editor, push notification handling, analytics, and much more. We’ll be concentrating on just building with the core framework. Ionic is fast but still not as performant as building natively; this makes it very well suited for prototyping or delivering an MVP. Ionic was released in 2013 by a company called Drifty. Since then it has seen increasing adoption due to its ease-of-use and modern toolchain. It also looks gorgeous out-the-box and isn’t opinionated about the editor you use like some similar mobile frameworks. Ionic is powered…

CSS sprites can really help cut down on the number of HTTP requests made on each page load. When done effectively, sprites can have a big impact on performance, especially on mobile, where the number of simultaneous connections is limited or perhaps the data connection is just plain slow. Unfortunately, they’re also quite costly to create and maintain when done manually – especially if icons need to change sizes late in the build. This is where css-sprite (an npm package) comes in: give it a bunch of images and it returns a stylesheet (in your preprocessor of choice) and a single image. What is particularly good about css-sprite is that it is capable of laying the sprites out in multiple ways. Vertical and horizontal are options, but the best is…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 HTML5 Canvas has been a fantastic addition to the web’s feature set for 2D experiences, allowing for easy adoption among developers with straight forward APIs, documentation, and generally quick development times. HTML5 canvas has made the web the go-to platform, should someone want to learn what’s involved in creating a 2D experience quickly and with minimal fuss. Despite 3D experiences with native web technologies being a reality for the same amount of time as 2D ones, there hasn’t been as much progress. Even drawing something as simple as a triangle in WebGL means learning about things called shaders and understanding what a buffer is. This complexity really whittled down the number of people making engaging experiences for the platform. Until libraries like three.js came about, a…

DOWNLOAD TUTORIAL FILES http://www.filesilo.co.uk/bks-894 Ever since responsive web design became a thing designers and developers have wanted better tools to manage imagery across many different clients and viewports. With the advent of the srcset attribute and picture elements, this is now achievable in modern browsers and responsive images are even starting to become possible on mobile devices, with Android 4.4.4 offering good native support. For aging browsers, Scott Jehl’s picturefill JavaScript polyfill can be used to plaster over the cracks – although network performance will still be an issue. The pinnacle of this new feature set from HTML5 is the picture element, enabling creative teams finite control of how images are presented to their web browser – creative teams are finally able to give art direction on a per-client basis.…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Hover effects – they never go out of fashion. No matter how much web design progresses away from the desktop and further into the touchscreen world, where hover effects become moot, designers still love to come up with new and entertaining rewards for placing the cursor on a relevant area of the page. Not only does it deliver the doorway to the next step in the user experience, but it also make it more entertaining to knock on that door in the first place. Take sports channel ESPN’s website: a veritable feast of background video, parallax animations, responsive layouts and, of course, impressive hover effects. In this Web Workshop, we’re going to create our own version of the pop-out menu items that appear about halfway down…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Traditionally, developers solved the problem of hosting by adding a link to content hosted at an external website. Few coders know that each and every GitHub repository comes with a dedicated area for files which are served via a normal web server. In fact, GitHub supports three different repository types. A Project site acts as a deployment vector for the above-mentioned cide examples. User and/or organisation sites differ from project sites in that they are instead intended to represent a firm or an individual’s web presence. From a technical point of view, taking GitHub’s offering is interesting as long as websites remain static. GitHub does not provide databases or other “active” content – if you plan to host a forum or a WordPress-managed blog, this is…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 EXPERT INSIGHT The rise of the preloader Many websites now feature preloaders, all this does is present a holding screen until all the content is loaded. When using large images, it is essential to wait until they have loaded before presenting them to the user, otherwise they would think that the site isn’t working properly with content missing. The creators of the new By Association Only website state that the “hardest website to build is your own site”. This is a statement that would certainly ring true with many web designers. Client work always takes priority so it can be difficult finding the time to create your own website, but at the same time you are always going to be judged by your own site, so…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Part 2 Part two of our tutorial takes an augmented menu that uses the mobile’s device orientation controls and adds interaction to create a fully working site experience In part one of this tutorial in issue 242, a unique mobile augmented website menu was created. The site was created with the help of the three.js library and was rendered using the CSS3 renderer rather than the WebGL renderer to give maximum compatibility with devices. The 3D was an integrated part of the design as the user had to rotate their phone around them to display the interface, augmenting the site around them. This placed the user in the centre of the interface. The movement of the phone was created using the ‘Device Orientation Controls’ that come…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 GitHub have created an open source project called Electron (formerly Atom-Shell) that combines Chromium, on which Google’s Chrome is built, and Node.js, a JavaScript environment designed for building applications. The result enables the building of cross-platform desktop applications using HTML, CSS and JavaScript. Companies such as Microsoft, Facebook, Slack and more have started to make use of Electron. Electron applications normally start out with a single JavaScript file which is executed initially. The code within it has control over the main process, can create and control new application windows and listen for important events. Each window that is created can be set to render your UI through the use of HTML, CSS and JavaScript. The JavaScript executed within a window can also access special Electron APIs…

Our expert Tam Hanna works with Symbian software products and a variety of coding languages. This issue he reveals the best plugins for powering up jQuery TWEAK PHOTOS Plugin: Image Editor bit.ly/1hIv6c1 Category: Photo editing Users love to edit uploaded pictures on the web. Image Editor provides a svelte little GUI wrapper around the Camanjs filter library: it saves you from the hassle of coding a set of sliders, buttons and symbols which come together to make up a little editor. Getting started with the Image Editor plugin requires the embedding of four libraries and a picture box – our test harness starts out like this: Keep in mind that the download is not complete and that’s because each of the libraries also expects its resources to be in place…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer brightly Site teambrightly.com The latest in a long line of noteworthy agency websites so far this year, this stellar effort from Michigan-based studio brightly is a shining example. Operating out of Grand Rapids, the website exhibits a rather apt, tangible sense of “team” that floods out from this cascading WordPress-powered template. Opening on an animated PNG of an unfurling Swiss Army knife, suitably reconfigured for digital deployment, the message is multidisciplinary. These “Crafters of Clarity”, who are known for delivering projects across a broad industry spectrum, have a creative story to tell. Built around a long central ‘page’ that behaves more like a vertical slider, sections branch offto screen right producing a waterfall-like feel to the navigation. Horizontal threads detailing team biographies, working process and…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 Designer PHOENIX Site creationsnamale.com If there’s one UI trend that has come to characterise the desktop web over the past couple years, it is scrolling effects. Content animated and given a sense of depth on scroll, often provides an illusion of long pages when in fact only browser height is occupied. This new design for jewellery brand Créations Namale pulls a similar jQuery-driven trick that leaves you confused and scratching your head. The main page feeds a succession of fashion photography through a bordered area, almost like a viewing pane for focusing the eye. Gorgeously shot imagery then performs 50/50 splits to cleverly reassemble and invite full-width zooms on click. It’s purposefully puzzling but achieved with such elegance from Montreal studio PHOENIX, thanks to a painstakingly…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 J Query is everywhere: very few web designers can make do without it. For quite some time, developers have proceeded to create expansion modules intended to add extra logic to the product. While the logic contained in these so-called plugins can reign from benign to supercomplex, the actual steps involved in coding and uploading tend to be similar regardless of product complexity. Yes, you are reading right: interfacing a charting plugin to jQuery is just as easy as creating a little demo toolkit. Due to JavaScript’s unique habits, hacking together a plugin is a sure-fire way to creating hordes of angry users: jQuery’s developers established a series of ‘best practices’ which need to be respected if a plugin is to feel right. But fret not: we…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 JavaScript’s liberal syntax declaration lets developers do all kinds of weird and wonderful things. Programmers used to restrictive class-based systems will need to aquaint themselves to the new working environment. Google engineer Addy Osmani collected design patterns which helps this process – when, and only when, applied correctly. Duck typing is even worse though: it permits the creation of bugs which occur only when the code path in question is executed. Murphy’s law then ensures that this will happen on the computer of an important client. TypeScript solves these problems by creating a statically typed dialect of JavaScript which is verified via a more stringent execution environment. Transgressions are punished mercilessly, defective code never makes it to the browser. Microsoft does its magic via a process…

Unit testing started to become fashionable more than ten years ago. Its core idea is simple: since testing is a repetitive manual activity, it could also be handled by computers. Frameworks permitted the creation of small routines called unit tests, which were run automatically on request. Results could then be compared against predefined good and bad constants – the concept caught on like wildfire. Unit tests are but one of the many automatic testing tools. As computational resources and research into artificial intelligence proceeded, static analysis became possible. It is based on a set of commonly encountered mistakes. Incoming product code is then compared against these known errors. Since then, even more advanced systems saw the light of day. User interface tests manipulate the GUI stack of the platform, thereby…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/bks-894 To some, CFML (ColdFusion Markup Language) may not mean anything. To others it may be perceived as an out-of-date language no longer used. In fact CFML is 20-years-old this year and it was born the same year as PHP and JavaScript. If you haven’t yet experienced building a CMFL application yet, then now is your chance to do so. Lucee, a completely open source CFML engine, was released in January 2015. As a fork from an existing CFML engine Lucee did not have to start from scratch and had a fantastic core engine to build upon. In this tutorial we will download and install an Express edition (self-contained) version of Lucee 5, which includes all of the latest additions to the code syntax and language. We…

FileSil To access FileSilo, please visit filesilo.co.uk/bks-894 01 Follow the on-screen instructions to create an account with our secure FileSilo system, log in and unlock the bookazine by answering a simple question about it. You can now access the content for free at any time. 02 Once you have logged in, you are free to explore the wealth of content available on FileSilo, from great video tutorials and online guides to superb downloadable resources. And the more bookazines you purchase, the more your instantly accessible collection of digital content will grow. 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…