Tabla de contenidos para No. 273 en Web Designer

“If there’s a problem which has frustrated you, or something you’ve thought could be made easier, someone will have come up with a solution for it” Follow the path to search success The ever-changing nature of the Google algorithm is just one reason that you need to keep up-to-date with the latest SEO techniques. So, what else are search engines looking for in 2018? And, what can you do to stay ahead of the game? In our lead feature (p42) you will discover an essential collection of techniques, tips and tools that will reveal the actions you need to take to help futureproof your site without being penalised. Find out how to get to grips with technical SEO, optimise for your audience and search engine crawlers, enhance and improve the…

01. SRETKS sretks.com A neat 3D animation, which features a choice of touch or scroll interaction. 02. Magic People magicpeoplevoodoopeople.com A blinking eye and smart rollover animations engage the user. 03. Alpsko Mleko alpskomleko.si Making milk interesting through the use of animation and storytelling. 04. Those Polarizing Patriots bit.ly/2p8BBuC Love or hate? You get to choose with this interactive infographic. Graphics Mutidimensional Genie bit.ly/2Ghf9HX A great example of illustration and character design by Davide Molino. Colour picker Siesta bit.ly/2FJSztG Typesetter Juicy myfonts.com/fonts/positype/juicy An Art Deco-inspired, high contrast, upright semi-script, layered typeface, which is ideal for branding. WordPress Aoko themes.blahlab.com/aoko/ A four-way fullscreen menu with engaging masked background video.…

“Kids these days aren’t like they used to be. If they have an idea, be ready to listen” Think of what you wanted to be when you grew up. It was probably a job. Lawyer, firefighter, filmmaker, or rock star. Ask that question to a Gen Zer, and you’ll get a different answer. According to Gallup, 77 per cent of students in grades five through 12 say they want to be their own boss. Not surprisingly, the ‘40 under 40’ lists that come out in business magazines now have company. Business Week publishes a ‘25 under 25’ list. Not to be outdone, Fortune has an ‘18 under 18’. And plenty of kids are launching their own businesses, including seventh-grader Mikaila Ulmer. So, what’s driving the Gen Z hustle? A few…

WHO Bonhomme WHAT Art Direction, Front end Development, Creative Direction, Interactive and Motion Design WHERE 10 rue Vicq d’Azir 75010 Paris, France WEB  bonhommeparis.com KEYCLIENTS Sonia Rykiel Festival de Cannes Audi Tag Heuer Dom Perignon Morgane Urbain and Emmanuel Cruellas, co-founded Bonhomme in 2013 with the aim of producing creative projects, accessible to everyone across the digital space. With their extensive experiences in the applied arts, they wanted to see how they could apply their skills to projects that pushed the boundaries of the digital aesthetic. Graduating in applied arts, Morgane began her career as a stylist and quickly became responsible for the collection produced by a Parisian firm. In 2013, she made the decision that to fulfil her creative drive, she would need to take more control of not…

TAKE THE MOBILE TEST http://bit.ly/2rQpFRl Test how easily a visitor can use your page on a mobile device by using Google’s mobile-friendly test. Simply enter your page URL to see how your page scores. TEST YOUR PAGE SPEEDS http://bit.ly/1RBjMsy Enter a webpage URL into Google’s PageSpeed Insights tool for it to carefully analyse the content of your web page. It will then generate suggestions of how to make that page faster. ADD SCHEMA DATA http://bit.ly/1UjXtMX Use this guide to provide explicit clues about the meaning of your website pages to Google. It will help you to include structured data on your pages. KEYWORD RESEARCH http://bit.ly/2gt3tmS Reach the right customers for your website with the right keywords. Get ideas to help build your campaigns with the AdWord’s Keyword Planner. MAINTAIN YOUR…

In this tutorial the game that was started last issue is going to be resumed and completed, allowing for a stunning game that will work across mobile devices, tablets and desktop browsers that have support for WebGL. All the groundwork has been started, including the visual look of the game. The model is loaded and it’s all ready for the game logic to be put in. This is going to consist of making object classes for each of the four coloured track panels that will control their movement and the enemies within those panels, such as spinning saw blades, obstacles and sliding blockades. The 3D models will be linked up with those classes when they are instantiated as game objects. The next part will be to add the logic to…

The home menu logo Clicking this enables users to return to the website homepage. Allows people to return to a familiar place if they get lost. Social media links Links to social media accounts – part of the menu, but making use of space to appear isolated from the main website navigation. The menu container The menu container is designed to cover the full content space so that only the featured menu content is visible to the user. Close menu icon Clicking on this icon will close the menu, returning the user to the main page content that was visible before the menu opened. Fixed positioning The menu container also uses fixed positioning to guarantee that it remains fully visible over all content regardless of scrolling. EXPERT ADVICE Space efficiency…

Being able to ‘simply include’ libraries from repositories such as NPM or the Crate service tends to make developers believe that anything available in the repo is also fair game for actual products. Be aware that this is not the case. Most libraries, whether large or small, are supplied by ‘community vendors’. If the person(s) in charge lose interest, further development of the product is likely to be at peril. This is not theoretical: one good example in the Rust community is the Iron framework, which once was considered the leading standard for web frameworks in the newly-developed language. If you visit the GitHub repository for the Iron framework, you will be greeted with a warning, which categorically states: NOTE: Iron is not actively maintained at the moment, please consider…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Featured host: Netcetera  netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks .” Featured: Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just…

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 • 70 minutes of expert JavaScript video from Pluralsight (www.pluralsight.com) • 13 hi-res greeting card mockups and 10 wooden picture frame mockups from Sparklestock (www.sparklestock.com) 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…

01 Follow the instructions on screen to create an account with our secure FileSilo system. Log in and unlock the issue by answering a simple question about the magazine. 02 You can access FileSilo on any computer, tablet or smartphone using any popular browser. However, we recommend that you use a computer to download content, as you may not be able to download files to other devices. 03 If you have any problems with accessing content on FileSilo, take a look at the FAQs online or email our team at the address below. filesilohelp@futurenet.com…

“ SEO is evolving quickly. With a history of changes, algorithm updates, new technologies and personalisation. You need to adapt to stay ahead” Paul Betteridge Paul has 15 years’ experience leading top digital organisations and brands across the UK. This issue he reveals 25 tips and a host of tools to help you gain a better understanding of what search engines are looking for in 2018. And, how you can ultimately improve your rankings. Page 42 Simon Jones Simon is always looking for ways to make designing and developing for the web easier. In this issue, he looks at some of the latest and lesser-known tools, libraries and frameworks which you might want to try out. Page 66 Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College…

Aqualots aqualots.themerex.net A full-screen image slider takes centre stage, with blue overtones across the site reinforcing the message. Rosebud bit.ly/2Dn6WPz Flowers are a riot of colour and this theme makes great use of imagery to sell the product to the customer. Jharon bit.ly/2p6jR4a Cleaning is not the most glamorous subject, but this theme uses imagery and message to sell its services. PartyMaker bit.ly/2Gobf05 If you are a party planner then this theme provides the ideal online presence. Offers neat options to reveal services. Haustiere bit.ly/2HwMxtR Fullscreen imagery of cute dogs immediately offers impact. Nested design elements bring the site together nicely.…

2013 Bonhomme launches its first project for Volkswagen, an interactive website base on a 3D movie. Employees: 2 2014 Brice Darmon’s website received five awards including Website of the Year on CSSDA. Employees: 3 2015 Bonhomme leads Coca-Cola’s project at the AccordHôtel Arena, a huge interactive wall receiving more than 2,000 visitors per day. Employees: 5 2016 Bonhomme ends its collaboration with Le Festival de Cannes after a year of work to launch five websites and a mobile application. Employees: 6 2017 After four years of hard work, Bonhomme has received over 50 digital awards, making it one of the more awarded studios in Paris. Employees: 8 2018 Bonhomme hopes to be the first Branding Digital Studio to put its fooprints on the moon ;) Employees: 8…

CONVERT MORE OF YOUR EXISTING TRAFFIC https: //www.hotjar.com Utilise heat-mapping tools to review the reading and scanning habits of your users. By understanding how they interact with your pages you can start the conversion rate optimisation process better. LOCAL MAP LISTINGS IN THE SERPs www.google.com/business Attract new customers with your free Google listing. Claim it and then optimise. Without it you won’t appear on the local map listings in the SERPs. REVIEW AND BUILD ON YOUR LINK PROFILE http://bit.ly/2I0Ey9f A powerful website backlink checker that shows all links pointing to your domain and their quality, as well as helping you to discover everything about your competitors’ backlinks. GOOGLE ALERTS https: //www.google.co.uk/alerts Monitor the web for interesting new content and mentions of your business and that of your competitors.…

99U Conference conference.99u.com Three days of insightful talks, stimulating workshops, and unexpected connections to help you stay creative. Awwwards bit.ly/2BGfikX Head to San Francisco for this two-day event, which is aimed at designers, web developers and digital dreamers. ReactEurope react-europe.org Bringing you the best and most passionate people, from the very core team to the coolest people from the community you love. Deconstruct deconstructconf.com Check out this two-day single-track, language- and technology-agnostic software development conference. UX London 2018.uxlondon.com Celebrate the conference’s tenth anniversary with some of the world’s leading design experts and practitioners.…

“From a creative perspective, it’s probably how we use the background sentence to guide the user through the sections of the site, telling them also the different processes the company implements. From an interactive perspective what really stands out is how all the background elements of the site are deformed depending how fast the user scrolls or drags the navigation circle placed on the top right of the user interface.”…

 With the ever-changing nature of the Google algorithm and the need to keep up to date and informed with the latest SEO techniques, the following tips, techniques and tools will help you have a better understanding of what the search engines are looking for in 2018, and how you can ultimately improve your rankings. “SEO is evolving quickly and becoming even more competitive. With a history of changes, algorithm updates, new technologies and personalisation, you need to adapt quickly to stay ahead.” Paul Betteridge Head of Digital Marketing at Hampshire SEO www.hampshireseo.co.uk This essential collection will align your focus on what actions are needed to achieve those gains, effectively future proofing your website without being penalised. Highlights include how to optimise for both your audience and the search engine crawlers;…

Site heading The site heading is in the top left-hand corner and as the mouse moves over this the rollover animation pops out. Main text element The main text on the screen is actually placed in 3D space to always face the camera, so that some objects move behind it and some appear in front. Mouse responsive As the user moves their mouse over the screen, the 3D objects respond to the speed the mouse moves over them and rotate with the force of its speed. Site menu In the top right of the screen is the menu, enabling users to navigate to other areas of the site. Animating cubes As the site loads a number of cubes, pizzas and other objects animate onto the screen from the top and…