Tabla de contenidos para June 2020 en net

Heard of Bing, Yahoo, Ask, AOL, DuckDuckGo, Baidu and Yandex? You probably have, but none of them hold a candle to the world number one search engine, Google, when it comes to market share. According to Statcounter (https://netm. ag/2Jrqac0), Google has just over 92 per cent of the market share with Bing coming a very distant second with less than three per cent. As for the rest they don’t even hit two per cent market share. So it would seem to make perfect sense to focus on Google when considering SEO. And this is exactly what our lead feature on page 48 does in this edition of net. SEO consultant Carl Hendy has been in the business for over 15 years and he gives some invaluable insight on the questions…

From our timeline Which books should web designers read? Not strictly ‘web design’ but User Friendly by @ cliffkuang & @fabtweet should be on the list. It explores applied user experiences, tells myriad fantastic stories, and gives practical advice to explore the concepts it presents. It’s so well written to boot! @tomjepsoncrtv Don’t Make Me Think by Steve Krug may be usability focused but is essential reading for anybody who works in web design and development. If a client questions a web design decision, I can usually point them to a chapter in this book. @TheArtOfAwe Thinking, Fast and Slow by Daniel Kahneman – an absolute classic and invaluable for designers. The Design of Everyday Things by Don Norman – another design/psychology staple, and one that changed how I think…

The studio is based at Romney Marsh Kent (aka the Fifth Continent), famous for its panoramic landscape/coastline views and wildlife. The studio location provides a connection with the countryside and blends into its surroundings thanks to the cladding of Siberian Larch. The unique building uses oversized windows to create panoramic views in every direction. This creates an immersive and inspiring experience to work from. The windows achieve bags of natural light and prevent eye strain, while the surroundings offer many glorious sights, from wildlife walking past, to being mesmerised by weather extremes. A perfect work/life balance is achieved by positioning the studio within private/gated grounds but yet far enough away from the residence to ensure a professional working environment is maintained. [1] The Herman Miller desk provides a great work…

It’s possible to create 3D content for the web entirely in CSS but this is always going to be constrained to flat planes. While there is nothing inherently wrong with this, as designers we often want so much more. Using the three.js library affords us the opportunity to have lighting, shading, reflection maps and genuine 3D shapes to give a sense of depth to an otherwise flat screen. To push the design even further, there is also access to shaders to apply some filters to the image and give the design a final polish. In this tutorial, a 3D interactive animation will play in the background while the foreground will contain the regular 2D interface as normal HTML elements purely for accessibility, as we could also easily make parts of…

This tutorial is for designers and developers – whether you create graphics or are given them to build sites, it pays to know how to optimise them and add animation where applicable. You don’t need to know anything about the main graphics programs such as Illustrator or Sketch, though we will cover how these programs export SVG. This tutorial does assume you have a basic knowledge of HTML/CSS. SVG code is very similar and so even if you have never looked at the insides of an SVG, you should be able to follow along. After completing this tutorial you will know more about how SVGs work, the best ways to optimise them and how to add movement to them. This tutorial is a great starting point to extend your knowledge…

SVGOMG https://jakearchibald.github.io/svgomg This tool, built by Jake Archibald, is a real must-have for your optimising arsenal for SVGs. It can remove unneeded tags and minimise code without affecting the visual appearance of the SVG. You can upload your source image or just paste in the markup if you are using your SVGs inline. Accessibility and SVGs https://simplyaccessible.com/article/7-solutions-svgs SVGs have a DOM similar to HTML and can be embedded in your pages in a variety of ways. As such there is quite a lot to take into account regarding accessibility. SVG Path Builder https://codepen.io/anthonydugois/pen/mewdyZ This path builder pen by Anthony Dugois is great fun to use and more importantly, is an excellent way to see how SVG paths are constructed. You can drag your points around and play with altering the…

5G is a data revolution about to change every aspect of modern life, connecting everyone in real-time with unparalleled flows of data. For web developers, 5G UI is set to revolutionise the web GUI equilibrium… as soon as it has the national coverage we see with 4G. The web has been stuck in a 2D world with the same top nav, hero and boxes of content, but what if there was another way? What if the client didn’t have to rely on the users’ hardware to deliver the experience, and instead we hoisted it up to the cloud? WHY IS 5G ANY DIFFERENT? 5G has two benefits over 4G. The first is latency small enough for everything to feel responsive, with early tests from Verizon hitting the 30ms mark (10x…

TYPEKIT, TWEENMAX / GSAP, JQUERY ILLUMINATING RADIOACTIVITY https://illuminating-radioactivity.com There’s no doubt that the notion of radioactivity strikes fear into most people’s hearts. But how much do we really know about what radioactivity is and why it’s bad? This engaging website is dedicated to answering such questions with rich references to science, politics and popular culture. Single-page and seemingly infinitely scrollable in structure, Illuminating Radioactivity starts with a charming interactive header that figuratively clears things up. Random, multicoloured PNG flakes bearing popular phrases are vanished on rollover or tap, revealing the title and dispelling the myths. This inventiveness and dynamism continues therein, using GreenSock-soaked animation thoughtfully to manipulate colour, images and typography. Delivering a large quantity of text, the font work is a significant triumph with distinctive sets like Opposit, Lexend…

In the tutorial a 3D model is loaded, comprised of several individual elements including materials. It’s really straightforward to get access to any of these individual elements in the code. The first step is to name the elements in the 3D package that you choose. All 3D modelling applications should enable you to rename individual objects. Then export the model in a format that can be loaded into three.js. In our tutorial the COLLADA model format has been chosen just because it’s easy to read afterwards as it’s in XML format. Once the model has been loaded, it’s a simple case of finding that model. Three.js comes with a command ‘getObjectByName(‘name’, true)’. If you have added the model to your scene, prefix this with ‘scene’ and join with a period.…

If you look at any moving object in real life, you’ll notice it doesn’t move at a constant speed. A ball will accelerate as it falls to the floor, slowing as it compresses and then speeding up as it rises into the air again. We can use easing functions in our animations to add realism. We tend to use ease, ease-in, and ease-out but you can make custom cubic-bezier eases, too. When you use ease-out, you will be starting fast and ending slow. Generally this works well when something is moving in. Ease-in acts in the opposite way, starting slow and finishing fast, which is good for objects moving away. You can use cubic-beziers in easing too. You may have heard of the Bézier tool (Pen tool) in Illustrator. This…

Frameworks such as React, Angular or Vue have become the new normal for front-end development. By breaking parts of a website into components, we can more easily control how a website looks and operates, while at the same time making great experiences for the end user. This approach is not without its flaws, though. Speed is a big issue, with large JavaScript bundles slowing down their delivery. Techniques such as code splitting and server rendering go part way towards solving the issue, but this can be tricky to set up and it can end up having a worse impact if it’s not maintained. Svelte is a framework with a difference. It analyses the code at compile time and creates a set of modules in vanilla JavaScript, which avoids the need…

I’ve just finished developing a site for a client who has been a pain in the ass since day one. The client worked in the publishing industry and was trying to set up an independent copyediting service. Apparently he was very well known, and claimed to have designed the logo for the publishing house that he had worked for previously. Even though I had a bad feeling about him, he paid upfront without even batting an eye, so I went ahead. I have since learned I don’t charge enough. Once I get a client, I have a very organised system for content submissions, including a client portal with detailed instructions for how to submit everything that is needed – copy, images, content, etc. I set up links and reminder emails…

Historically, the tech industry has borne the hallmarks of an all boys’ club. Although the tide is changing elsewhere in the workforce, as recently as December 2019, research has found that the ratio of men to women in IT has been largely static, with the percentage of female IT professionals hovering at around 16 per cent for ten years. Even with more tangible barriers to diversity in the workplace broken down, such as access to higher education, the number of women working in the sector remains woefully low. According to recent research by Studio Graphene, 62 per cent of women in tech think that the image of the technology industry being maledominated is a deterrent for women to enter the sector. And for those women who have chosen a career…

Could you briefly introduce yourself to anyone who doesn’t know you? I’m a Yorkshire-born, Los Angeles-based designer and developer with 15+ years experience creating digital experiences for everyone from NASA to Harvey Nichols. I recently returned to freelance life after several years leading design at Adobe and WeWork in New York City, and I recently published a book about design systems called Laying the Foundations (designsystemfoundations.com). What gave you the idea of writing a book about design systems and who’s it aimed at? During my time at Adobe and WeWork, I learned a lot about leadership and the dynamics of working with multiple teams and individuals. Unfortunately, it’s not as simple as just doing your best work. You have to learn to build a team, sell, earn trust and support,…

lusion.co It’s become somewhat of a cliche to complain that ‘all websites look the same these days’ and ‘all the creativity has gone out of web design’. Visit the website of Lusion (lusion.co) to see how this certainly isn’t the case. Founded in 2017, the Bristol-based, development-focused studio is on a mission to build “epic real-time interactive experiences to blow people’s minds”. And a quick scroll through the ‘Work’ section of the site makes clear that it’s very much succeeding, from an immersive spatial audio experience for Opera North to an cinematic exploration in global storytelling for filmmaker Julius Onah. We caught up with founder Edan Kwan, to discover how he works to bring such spectacular digital experiences to life. Could you briefly introduce yourself to anyone who doesn’t know…

One of the big commercial and critical hits of 2019, Knives Out takes the classic Agatha Christie-style whodunnit and gives it a modern twist. Directed by Rian Johnson and boasting an all-star cast led by Daniel Craig, it’s one of the most original and inventive movies of modern times, and so demanded a website that could pull off a similar trick (https://knivesout.movie). Based in Portland, Oregon, Oblio is a digital studio specialising in the use of digital technologies as design tools. Its award-winning team of inventors, artists, designers and developers has worked on countless projects, including over 50 major motion picture campaigns, so was the perfect fit for Lionsgate. Here, Oblio’s art director Cody Staudenmier and senior developer Scott Agrimson explain how they brought their client’s vision to life. How…

It could easily be argued that plugins were what made WordPress big. Without them, it’s just a blog platform that supports pages. Yet the majority of the problems and bad press cast towards the CMS are caused by the plugin ecosystem. While the possibilities are endless when almost anyone with an internet connection can find out how to write plugins, it does open the door for poorly written code and mistakes that can prove critical in terms of security. To help steer through the ever-growing maze of what’s available, we’ve handpicked 20 of the best plugins. Some are well known while some are up-and-coming but all of them are recommended against three factors: minimal bloat, maximum function and minimal footprint – meaning no intrusive dashboard adverts or messages. From caching…

Not everyone is a skilled 3D modeller or has the time to learn how to become one. If you need 3D content for your WebGL scene, then you can probably find something for free online. First off you need to make sure that you can load the format of model into WebGL, thankfully the three.js library has a number of extensions for loading almost any kind of model that you can think of. Check out the threejs.org site for examples of how to do this. There are some great models for free on the CG Trader site (www.cgtrader.com). The site does contain paid models, but when making a search, just be sure to click the ‘free’ option. There will be premium and ‘on sale’ content interspersed with your search results,…

Sapper has the added ability of being able to generate a static site without any extra development effort. This means it can be hosted anywhere that hosts static files, such as GitHub Pages, Netlify or Amazon S3. It can be cheaper and faster if the site’s content rarely changes because it can be cached on servers around the world. Running “sapper export” will build the site. Once complete, it then hosts it on its own server and starts to crawl the site, clicking on any links it finds. Every page it visits it will save and create its own HTML file. Of course, not every site is a candidate for static rendering. If it requires authentication, or has lots of content that frequently changes, a server-backed approach is the one…