Web Designerの No. 259 の目次

Snapchat started life with teenagers using it as a bit of fun, sending each other funny images/videos that automatically deleted themselves after ten seconds. In the early days, Snapchat got a bit of bad press when people were sending sensitive material to each other via the platform, but since then marketers have jumped on board and started to use it wisely. Snapchat has over 100 million users, many of whom fall into the 18-34 age range, so if that is your demographic, it’s a great place to be seen by them. Firstly, the platform should be used as part of your wider plan to distribute your content. The Snapchat stories last for up to 24 hours, so it’s easy to string together multiple ten-second snaps that tell a story and…

Although hugely successful over its four-year run, Hall & Woodhouse was ready to move on from its annual printed Pub Trail campaign. It returned to us to develop a new concept in line with its objective to increase pub footfall. We combined the practical functionality of a pub directory with a game-inspired loyalty scheme to create a single app for smartphone users. By checking into multiple pubs, the user can progress around a fictional map and gamble their rewards to win even better prizes. As part of a campaign including printed materials and a responsive website, the app encouraged Hall & Woodhouse customers to explore the world beyond their local pub and appreciate the variety of locations on offer. “Salad have been fantastic to work with on this project. They…

01. Before we start Let’s start by giving some thought to what we’re trying to achieve. We’re looking for a component which stands alone, is available for use through a single import statement, and is usable as a custom tag. We want to cleanly encapsulate its functionality, so it should be loaded into the shadow DOM. We should follow the usual good development practices, so we’ll use templates to keep markup and styles separate from scripting. The syntax of our component will be as follows: 02. The component template The first thing we’ll create is a simple HTML template for the component’s appearance. In slideshow.html, we add: The img src attribute is empty for now as we’ll populate it by script. Also note the id attribute of the template,…

Responding title This title changes in response to how the user interacts with the content menu. Presentation response The hiding and revealing of content in response to user interactions can be defined through JavaScript or the use of the CSS target selector. Menu interactions An interactive menu allows additional content to be shown upon user selection. This allows the page to appear uncluttered. Animated content The animation effect is applied to this content area. The illustration is introduced through ‘a puff of smoke’ effect. The use of animation to introduce content is an opportunity for you to enhance the usability experience for your website. Whether it’s part of a call to action, or just to influence the user’s perception, this use of animation is a tool to guide the user’s…

5 KEY FEATURES OF FLEXBOX The flex-direction property The flex-direction property allows you to change the direction of the axis by rotating the flex-container by 90 degrees. Simple vertical and horizontal centring This is something we’ve dreamed about for years: the ability to vertically centre elements with one line of code. Just one. Finally! align-items: center; Flexbox sizing Flexbox is supported by an algorithm, allowing the browser to calculate the space occupied by the flex-items as well as the space left over. Flex-basis Flex-basis is one of the properties you can apply to the flex-items which will allow you to base each item on a given width, using flex-grow and flex-shrink; you can also choose what happens with the leftover space, if there is any. Order Flexbox has a trick…

While comment times might not be a significant problem for C++ programmers, the developers of web applications suffer twice: they must be transferred to every client. Secondarily, comments which are intended to help you and your team understand the code are clearly visible to everybody. Fortunately, obfuscators solve these problems. Their basic modus operandi is simple: code is input, and is modified to create the most compact version which remains functionally compatible. Keep in mind that a large amount of minifiers exist: they differ in approach, capabilities and workflow integration. One simple product is the stock minifier, which can be downloaded via npm (http://bit.ly/2lK45eY). After the initial installation, your workstation's command line supports the minify command. A small example is shown in the image above. This shows the program being…

Web server speed is a function of two factors: first of all the hardware available, and secondly the configuration of the server software used. The amount of control afforded over these parameters depends on the agreement between web host and client – in some shared hosting setups, no control is possible over the server hardware and software. In this case, web designers are advised to look at their side of the equation: many CMSs like WordPress come with one or more caching plug-ins which accelerate page accesses and thereby reduce CPU load. Should a web property find itself hosted on a dedicated or semi-dedicated server, checking resource allocations is the next order of business. Virtual machine-based plans often suffer from significant overprovisioning: while profitable for the infrastructure owner, an overprovisioned…

BUILD PERFECT LAYOUTS Get down and dirty with the intricacies of Flexbox CREATE DYNAMIC 3D HEADERS Employ the power of the PixiJS library to add imagination 10 BEST NODE.JS FRAMEWORKS Discover the best frameworks and libraries to enhance your projects DESIGN UI WITH SKETCH Learn how to use Sketch to create engaging interface elements Visit the WEB DESIGNER online shop at for back issues, books and merchandise ALL IN YOUR NEXT WEB DESIGNER Issue 260 on sale Thursday 30th March 2017…

“ New features enable us to define our own fully functional HTML and encapsulate the supporting code for simple delivery onto a page ” Simon Jones Simon is a software engineering director in financial services, leading a team of full-stack developers. He comes from a background in computer science and UX design. This issue he delves into the world of HTML future and shows how to use Web Components for better builds. Steven Roberts Steven is a front-end developer working at Better Brand Agency. He studied Creative Digital Media at Teesside University where he fell in love with CSS. This issue he shows how to use Flexbox and Grid to get perfect layouts. Tam Hanna Tam’s development career has seen him wrestle with a variety of stacks and languages.…

“ Learning the basics of code can enhance so many things when designing a new website ” Web design and web development. Two entirely different professions often lumped together by those who believe, or maybe hope, they are the same thing. Designers and developers have different priorities, but their common goal is the same – to create a fantastic, engaging, fully functional website or application delivering excellent user experience. Nowadays, however, we are seeing an increasing number of ‘designer developer’ hybrids. It’s becoming more common for designers to dabble in the development process in a bid to understand how it works. And the fact is that web designers who choose to ignore at least the fundamentals of web development could potentially be worse off for it. Learning the basics of…

1. Page document The first step is to initiate the page document, which consists of the HTML document container, along with the head and body sections. The head sections contains descriptive information such as the title, along with resource links – i.e. the CSS stylesheet. The body section will be used to store the visible content created in the next step. 2. Document content The document consists of a video for the background, along with text content – placed inside the main tag. As different browsers support different video formats, the video is a container for sources that the browser can decide to choose from. The foreground content is kept separate inside the main container, allowing us to keep control from CSS. 3. Initiate CSS stylesheet With the HTML content…

Personnel DENIS LOMOV Creative Director SERGI MATVEEV Designer ANTON USTINOV Front-end Developer BOGDAN LOTAREV Back-end Developer IRINA BORZUNOVA 3D Modeller LENA KUDAEVA Photographer project Auto Repair Materials (ARM) web ARM-AUTO.DE agency Red Collar web redcollar. digital follow @redcollars project duration 3 no. of people involved 6 total man hours 220 For any modern business operating in today’s market, no matter what they sell, marketing their services or products online is essential. Savvy customers increasingly look to the internet as their first port of call when it comes to shopping around, surveying purchasing options and researching brands before they buy. Now, it’s fair to say that companies know this and invest often eye-watering marketing budgets into establishing a digital presence that encompasses websites, social media outreach, targeted advertising campaigns and more.…

At their heart, Web Components are a way of creating modular, custom components for use in web applications, in a manner that blends seamlessly with ‘vanilla’ HTML. Imagine importing a library of pre-made UI components onto your page, then using their features like any other HTML tag. This would enable us to quickly build complex functionality from a large set of prefabricated HTML elements. In C we can use #include, then invoke third-party functions as if they were our own. In Java, we can import libraries and use their pre-built classes and methods. But traditionally the web has not had such a modular approach, relying on workarounds and frameworks to enable component-based development. Yet as web applications become more complicated and prolific, the need for such a model grows. Libraries…

One of best features of CSS is that it reduces the use of images in web design and enables web designers to create more abstract, geometric layouts, beyond simple rectangles and squares. Not only does this give us more control of our page layouts, but also it helps to improve performance due to there not being so many HTTP requests. Magazines and newspapers have always enjoyed elegant ways for arranging content layout, such as wrapping text around, or inside, non-rectangular shapes. Rectangles inside other rectangles – this is what our webpages have always been made of. The new CSS Shapes specification is changing that, and its goal is to provide web designers with a new way to alter how the content flows inside and around arbitrarily complex shapes – something…

THE MINMAX() FUNCTION The minmax() function is something we wish we’d had since the inception of responsive design. It allows us to apply a minimum and maximum width or height to either a column or a row. It works by setting two values inside the function: the first is the minimum value, followed by a comma and then the maximum value. You can also use the keywords min-content and max-content. GRID AUTO-FLOW Grid auto-flow properties will allow items to wrap onto the next row in the grid if the space is not available on the current row, leaving a gap in the grid to preserve the flow of the DOM. The new grid-auto-flow allows the grid to remove elements from their position in normal flow to position them onto the…

Web development – particularly front-end – has shifted dramatically in the past few years. While previously sites were largely static and server driven, frameworks like React came along and gave us the single-page app. The server dealt with API calls and not much else. With universal JavaScript, we can write one set of components that can run either on the server or the client. This helps improve performance as well as productivity from a developer’s point of view. Next.js is a framework that helps create React applications in a universal style. It comes with Webpack and Babel already set up, so it is easy to start a project and get going. The framework is deliberately small, which gives developers the opportunity to expand it further for the need of each…

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 • 115 minutes of expert Polymer.js videos from Pluralsight (www.pluralsight.com) • 200 Futuristic light leaks for Photoshop from SparkleStock (www.sparklestock.com) • 38 Vintage noise textures from Slogan Wanted in to www.filesilo.co.uk/ Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print…

“If you are looking at getting another notch on tool belt learning React is a good choice ” There’s no shortage of libraries, frameworks and languages to learn. It can be difficult for web designers and developers to choose their progression path. There are so many, it is simply impossible to learn them all. Your head would explode and you would never master any. What’s the better choice? Learning a host of languages or mastering a few. We think mastering a few is the way forward. But even mastering a few doesn’t mean that designers and developers can simply stop learning. Languages, libraries and frameworks are constantly being updated, meaning that users need to keep up. If you don’t keep up with the latest update, you will eventually get left…

GridTab gopalraju.github.io/gridtab With a clue in the name, GridTab is a lightweight jQuery plug-in that creates grid-based responsive tabs. Being responsive means that the setup works on all screens. GridTab supports two layout modes: grid and tab. By default, it uses the grid layout. Click a tab in the grid and it opens, like an accordion, to reveal additional information. Vanilla-tilt.js micku7zu.github.io/vanilla-tilt.js A smooth 3D tilt JavaScript library forked from the jQuery version, Tilt.js. It is smooth, lightweight and offers neat title effects. Service Mocker service-mocker.js.org Tagged as ‘the next generation frontend API mocking framework’, Service Mocker is based on the service workers API for in-browser processing. KUTE.js thednp.github.io/kute.js/index.html KUTE.js is a JavaScript animation engine that is hot on performance, memory efficient and has a bunch of tools for custom…

1. Page Document Initiate the project with the creation of the HTML document structure. This consists of the head for storing descriptions and links to external resources, while the body section contains the visible page content. In this example, we also have the main container within the body – which is where the content elements for steps 2 and 3 will be placed. 2. Navigation Content The navigation is made from a nav container, which contains a series of anchor links. These links reference elements on the page through the use of the hash character in the href attribute. This is important to make sure that the browser doesn’t try to load an external page when clicked. 3. Article Content An article container is used to store the article content…

One of the overriding factors associated with the early design work in this project was just how strong Red Collar’s sense of direction was. It seems that initial market research acted as a powerful springboard for inspiring a vision for a website experience that didn’t follow the crowd. “The idea came from the brainstorming,” insists Creative Director Denis Lomov. “First of all, we made a competitor analysis before a target audience and then task analysis. We went through dozens of sites looking for good solutions and interesting decisions. Unfortunately, most of the existing car paint manufacturer sites were too similar to each other. All of them had small photos, bad typography and dull colours, which seemed to us to be too boring and not interesting at all. It was very…

who Salad Creative what Branding, Design, Digital, Packaging, Marketing, Strategy, Development, Social Media, Brand Development, Brand Communications where 19 The Quay, Enefco House, Poole, Dorset, BH15 1HJ web saladcreative.com key clients Clipper Round the World Yacht Race AECC Greene King Silver & Green Tea India Founded in 2001 by Ravensbourne fashion design graduate Arabella Lewis-Smith and entrepreneur and founder of popular sports brand Animal, Ian Elliot. The idea to launch Salad was one of a handful of very different life choices that intrigued the pair. Originally the shortlist included setting up a creative agency by the coast, progressing creative careers in their own fields in the city or moving abroad. Early in their respective careers, Arabella and Ian struggled to find businesses in Dorset that offered the same level…

Importing HTML is probably the simplest of the Web Components specifications to understand, but has some nuances that can be difficult to get to grips with. Importing CSS or JavaScript from their own external files has always been straightforward with <script> and <link> tags, but there is no direct equivalent to load HTML itself. Until recently, we were limited either by the constraints of <iframe> or the need to use JavaScript. The syntax for an HTML import is extremely straightforward: This will load the content of my-component.html, along with all its dependencies, and execute any JavaScript. It will not immediately render HTML in the imported file, but instead makes its DOM accessible to manipulate from the main page’s JavaScript. There is a little trickery required to access the new DOM:…

Web Components aren’t new. In fact, they were first introduced back in 2011, generating a great deal of excitement. However, like any new specification, it has taken time for browsers to implement the new technologies. Things have come a long way over the last six years, with updates and refinements to the specifications, and polyfills gradually being replaced by native browser support. Google has led the way, with Chrome consistently providing the most complete Web Components support. The real question, however, is whether Web Components are ready for prime time. Given their slow adoption, many have asked whether we should still be pursuing these specifications. The answer is yes, but we aren’t quite there yet. Templates are generally well-implemented; custom elements and shadow DOM are in progress; however, imports lag…

Extra movements The movement of the characters’ heads on the screen updates as the user moves the slider over to the right. Circular transition When the user has dragged the slider a circular transition moves out from the centre of the screen while the new content is loaded into the screen. Alternative navigation As an alternative to dragging and sliding the arrow, there are a number of small spots that will also serve as a navigation clue with a simple click. The main menu The menu is hidden off screen and when the user clicks the burger icon, each of the links bounces onto the screen one at a time. Drag and slide The navigation works by dragging the arrow over to the right until it hits the smaller circle.…

BBC NEWS Flexbox The BBC uses Flexbox throughout its news and other sites to achieve the grid of stories. The BBC needs to provide support to as many users as possible, so it employs fallbacks allowing the site to still appear functional in older browsers. It has open-sourced its code, which can be downloaded from GitHub (github.com/bbc/gel-grid) and used freely in your projects. THE EXPERIMENTAL LAYOUT LAB OF JEN SIMMONS Grid labs.jensimmons.com utilises a really interesting and amazing use of Grid. The layout adapts and changes depending on the size of the viewport. Transforming the grid by rotating it -45 degrees gives the page a really interesting art direction. This is only the beginning of what’s to come once designers and developers become familiar with this new layout module. THE…

TEST WITH GOOGLE If improving PageRank is high on the list of reasons for speed optimisations, why not collect some advice straight from the Big G? Sadly, that usability of the tool could be a lot better: after entering the URL, you are provided with a summary report giving numerical scores in a total of three different categories. More information can only be accessed by clicking the orange button which points downwards: you then get three screens providing bullet-point overviews of issues found in your website. More technical information can be obtained by providing an email address, which is then graced with an email containing further recommendations on the optimisation of the website in question. STAY UP TO DATE Even though everyone of us gets enough mail, supply a valid…