Innholdsfortegnelse for No. 257 i Web Designer

1. Page document Start the project by defining the HTML page template. This contains the head section that includes the page description and link to the CSS stylesheet, as well as body section for containing the visible content. Keeping components that are not page contents inside the head section, such as the CSS, keeps the project clean for future maintainability. It’s good for SEO too! 2. Navigation component The navigation is made from a nav container, which contains a series of links. We use HTML to define what this content is, but not how it appears. As a result, we only write the ‘a’ tags with the text that is to appear inside them. Keeping HTML markup to a minimum like this is good for SEO. 3. Stylesheet initiation The…

who After the flood what Data Visualisation, Product Development, Service Design, Software Development where 140-142 St John St London, Greater London EC1V 4UB web aftertheflood.co Key clients NHS Google UEFA Tesco BBC INDUSTRY INSIGHT Max Gadney, Founder “Pitching in the old sense is just the best bad guess winning. Given the complexity of some of our work, we couldn’t take a guess and throw in some dummy copy. Dummy copy is a sickness. You need to be able to discuss the client’s problem as equals or they’ll treat you like some cretin with a colouring book. On the other hand, if you can discuss their industry they’ll respect you.” INDUSTRY INSIGHT Mike Gallagher, Lead Designer “We look for clever designers who can communicate clearly. They need to work well in…

“WebVR is evolving at a rapid pace with big players such as the W3C, Google, Mozilla, Facebook and Samsung pushing it forward. We’re seeing better hardware integration, better performance, and a new WebVR API speci›ication, which vendors are working hard to implement. There’s a new web framework called A-Frame – and coming soon, ReactVR. ”Jerad Bitner Technical project manager for Lullabot 5 TOOLS & LIBRARIES TO BUILD WEBVR The essential resources you will need to start creating CHROMIUM AND FIREFOX NIGHTLY BROWSERS bit.ly/1Yj98hx mzl.la/2hMrcR6 These browsers are pretty much required for working with WebVR since they are where the latest and greatest WebVR specifications are being implemented right now. You can download these from the links you’ll find on WebVR.info. THREE.JS threejs.org A JavaScript library making it easier to work…

“Google’s culture of innovation and its sizeable cache of data enables the company to perform efficient data mining. This leads to the permanent emergence of new, highly interesting services relevant to both web designers and advertising professionals. ”Dr. Doris Maria Kohrs CEO of abctexte THE NEW GOOGLE DESIGN Apple’s success with the iPhone introduced Google to the importance of a corporate identity. Material Design is the Big G’s take on this concept Even though Material Design has been around for quite some time, Google has not stopped refining its offerings. In particular, these services – currently in the preview program – deserve additional attention. SHARE YOUR WORK Designers often like to work with pen and paper. While very few things can beat the homely feel of a Parker 45 scratching…

“Variables are already available in CSS preprocessors and are very useful. However, the power of CSS variables is that they can be updated using JavaScript, Media Queries, CSS cascading, as well as being able to use calc() on them. This make them hugely more useful than the static pre-processor kind and so far supported by everyone - other than IE/Edge (of course)! ”Keir Moffatt Freelance front-end developer 6 TOOLS YOU NEED FOR 2017 CAN I USE caniuse.com CSS TRICKS css-tricks.com WEB PLATFORM DAILY webplatformdaily.org SASS sass-lang.com POSTCSS postcss.org CUBIC BEZIER cubic-bezier.com CSS4 SELECTORS Seemingly innocuous; selectors wield a huge amount of power. The most exciting of these powers has got to be ‘relational’ or ‘:has’, which allows us to style elements based on what they contain and the state of…

Might Morphin’ The main headline starts its life as a numerical preloader that shapetweens between numbers as it loads, then finally into the main title shown here. Sliding text As the site loads, the main text informing users of who Jenny is slides upwards and fades in. Last update It’s important the users know how fresh the site content is, and Jenny communicates this by giving the date of the last update so users know it isn’t work from five years ago! EXPERT ADVICE Foreground/background Often images used on pages interfere with the text content over the top. Notice how faded the image of Jenny is in the background. This helps the image load much faster because the file size will be smaller and aesthetically it helps clearly define the…

Move to the left The page background image moves to the right when the user’s mouse pointer moves to the left of the screen. Foreground content The main page content is placed in a separate container unaffected by the JavaScript. This gives the illusion of it hovering over the background. Upward movement The background moves up when the user moves the pointer towards the bottom of the screen. Move down The background image moves down when the user’s mouse pointer moves towards the top of the screen. Move to the right The background image will move to the left when the user’s mouse pointer moves to the right of the screen. EXPERT ADVICE Making a useful effect Instead of using this effect primarily to enhance your website design, why not…

“The field of UX is bound to be in›luenced by creative design trends in 2017, as ›lat design did in 2016. But, it’s the advancement of alternative interfaces like VR, voice control and minimalistic design patterns that’ll be the key in›luencers in user experience design as we head into the new year.” Chris Cherrett USER EXPERIENCE DESIGNER 7 TRENDS TO WATCH OUT FOR IN 2017 ALTERNATIVE USER INTERFACES There was once a time when UX design was constrained by the limits of technology. This isn’t the case any more. VR will be huge in 2017, and with it comes a whole new challenge that’s going to change our interpretation of what UI design really is. Today we’re primary concerned with designing for screens, but virtual reality is…

01: WordPress Theme Customiser The built-in Customiser is one of the most powerful tools to personalise WordPress for developers and end users alike Open the Customiser The Customiser can be opened from the admin panel under Appearance> Customise, or via the admin bar Customise link at the top when viewing your site. Any changes you make won’t go live until you save. Customise the options and save Alter the options under each panel to customise your WordPress site and watch as the live preview updates instantly with your changes. Don’t forget to save once you’re done! Alternatively, closing the previewer discards your changes. Select the panel Most themes will have a few constant panels like Site Identity, Static Front Page and Additional CSS, but the rest will depend on your…

Fun fact: the first image ever published on the world wide web was of an all-female parody pop group, ‘Les Horribles Cernettes’. That was way back in 1992. At the dawn of the world wide web, digital photography lived in the long shadow of film-based photography – and why wouldn’t it have? Digital photography was horrendously expensive, had terrible resolution, and despite that could only store a handful of photographs. Sure, digital photography is instant, but so what? Film gets processed in 24 hours! Why would anybody ever choose digital over cheaper, sharper film? Of course, we all know how that’s worked out; in the 25 years since Les Horribles Cernettes made their cyberspace debut, digital photography has become sharp, cheap and really easy to store. The internet and…

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 your too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 95 minutes of expert SVG videos from Pluralsight (www.pluralsight.com) • 10 seamless metal textures from SparkleStock (sparklestock.com) & 80 watercolour brushes • 3 responsive HTML/CSS templates Filesil The home of great downloads – exclusive to your favourite magazines from Future PLC 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…

“Sass is still the number one choice in the survey” HTML, CSS and JavaScript are kings of the web, but the tools and methodologies that a designer/developer uses can be a very different matter. There will always be the popular tools, but there will also be the lesser known. Just because a tool is the most popular, it doesn’t mean that it is the best tool for you. But, it does mean that the tool is tried and tested and serves a purpose for a large number of users. There may be an equivalent that works just as well and fits in with your psyche. An example is the Bootstrap and Foundation frameworks. Both are extremely good, but which one suits you best? We have always been big fans of…

Mo.js mojs.io This little JavaScript library will help you to create silky smooth animation. Improve the user experience with judder-free animations, be ready for retina, and do this quickly and simply with a selection of declarative APIs. Delve into the tutorials and learn to build modularly and say goodbye to large file sizes. Check out the demos and tutorials. Choreographer JS bit.ly/2gZccOZ A simple library for creating complex CSS animations. Head to the GitHub repository to find out how to get started and see some examples in action. HolographicJS bit.ly/2gK667p A C++ Windows Runtime Component for hosting Windows Holographic apps built with JavaScript and WebGL. Can you help out this experimental project? Riot riotjs.com A simple and elegant component-based UI library. They are looking to get rid of unneeded complexity,…

CSS Reference cssreference.io As CSS gets more advanced, there are more properties to remember, or discover. This neat single-page resource provides a visual reference to the more contemporary animation and layout properties. Search for a property and you’ll get a brief description and an illustration or animation to explain how it works. Bookmark this page. Font style matcher meowni.ca/font-style-matcher This tool is looking to help remove or minimise the FOUC (flash of unstyled text) that occurs when using web fonts, by matching the fallback font’s size. date-fns date-fns.org Need help with dates in JavaScript? This is a modern JS date utility library that offers a simple and consistent toolset for manipulating dates. PulltoRefresh.js boxfactura.com/pulltorefresh.js There is a clue in the name of this JavaScript library. It is crafted to power…

1. Page document Start the project with the standard HTML document template. The body section is used to store the visible content elements, while the head section is used to store the descriptive and additional page resources. In this case, the head section is used to contain a set of JavaScript code that controls the zoom effect. 2. Zoomable image components The body section contains the page content, which in this case is two images. A ‘zoom’ class is applied to these images so that JavaScript knows to apply the zooming functionality to them. This allows you to be selective with which images have this functionality by applying the class to just the images you want to have it. 3. Zoom function With the HTML now in place, the next…

“Solutions such as Metail’s MeModel are using algorithm-powered technology to bring the fitting room to browsers and smartphones” Project Metail Web metail.com Agency Propeller Web propeller.co.uk Follow @propellercomms @Metail Project duration 5 months No. of people involved5 Total man hours 250 Personnel Stephanie Niven Digital Brand Strategy Director Simon Shahriveri Head of Front-End Development Callum Williams Senior Front-End Developer Lara Berra Project Manager Darren Barrett Digital Designer When it comes to buying goods online, it’s safe to say the market for fashion is certainly booming. Style-conscious shoppers who once flocked to the high street for new outfits are moving more and more towards a more virtual dose of retail therapy. In the UK alone it is estimated that internet sales of jeans, shirts, tops and skirts will by worth a…

“A slew of technical improvements will enable us to dramatically simplify the writing of responsive elements and improve the level of customisation of components for different screen sizes” Kevin Ball Foundation lead at ZURB With a proliferation of devices and screen sizes, and a steady drumbeat of increasing mobile web traffic, designing ‘mobile first’ has gone from a crazy idea floated by Luke Wroblewski to a standard implemented across all major front-end frameworks. Patterns like flatter navigation structures, avoiding hovers, and stacking content on mobile are becoming standard. In some sense, responsiveness has ‘won’, with mobile-first designs becoming increasingly templated and a heightened focus on mobile performance via things like AMP and Facebook instant pages. This movement towards a set of acknowledged best practices is good for mobile users, but…

“2017 will likely see rapid closure of the remaining gaps between web and native apps. The only viable alternative to native apps until now has been hybrid, which companies love due to reduced development overhead. Users prefer native for the richer, more responsive user experience. Web apps give them both what they want. Maturity of APIs for accessing device hardware such as Bluetooth and NFC is improving. However, given their share of the market, without Apple’s support for service workers in iOS we won’t see native apps losing that much ground next year. Apple are making the right noises and Microsoft are almost there.” Jemmima Knight Scrum team leader at American Express WHAT IS THE FUTURE? With increasing browser adoption and success of progressive web apps (PWAs) launched…

“In line with the prominent trend of the last few years, I believe that 2017 will continue to place projects involving animation and interactive design techniques at the forefront. Due to the way technology has progressed, the term ‘web design’ is no longer a singular skill – the introduction of performant animation and heightened interactivity on the web has opened up a whole world of opportunities. Those that possess skills that bridge the gap between design and development, with an in-depth understanding of interaction design techniques, will be the ones pushing the boundaries in 2017. ”Nathan Riley Design director, Green Chameleon 2017 CALENDAR Discover the big events and conferences happening in 2017. Get yourself there and learn some new skills JANUARY NDC London 2017 ndc-london.com BuzzJS buzzjs.com Front www.frontutah.com FEBRUARY…