Tabla de contenidos para January 2018 en net

CLOSE UP (1) The splash screen to the experience. The brand had to be instantly recognisable here as well as entice the user to play. (2) The intro. It was important to explain the sequence of events that lead up to William’s disappearance, so the team created a vintage-book styled intro. The user can also interact to read more about each suspect. (3) The main interactive scene. Here the user is prompted with riddles, which act as clues to know where to click within the mansion. (4) Clue and promo screen. When the user clicks on the right object, they find a clue card hinting at the culprit along with a special offer allowing for data capture. (5) Experience completed screen. Appears once you have successfully found all the clues…

AUTHOR JAMIE MURPHY Jamie is a full stack developer with over seven years’ industry experience working with global brands. He specialises in Laravel, front-end and eCommerce development. @jjmu15 What is CRO? Conversion Rate Optimisation (CRO) is the process of maximising conversions from existing traffic. For example, if you get 1,000 visitors per day on average, and have a 1% conversion rate, that means 10 of those visitors will convert. CRO is the process of trying to optimise your site, to improve that rate of conversion to 20 users (2%) for every 1,000 visitors on average, for example. CRO also has the added benefit of affecting future traffic conversions from all sources, such as organic visits, paid ads and social media campaigns. If you can increase the average conversion from 1%…

ABOUT THE AUTHOR SIMON JONES w: http://simonjones.tech t: @j_a_nomis job: Software engineering director areas of expertise: JavaScript, front-end frameworks, and emerging technology For many years, there’s been a notable distinction between the functionality available on the web and in ‘native’ apps, whether on mobile or desktop. A native build has always had the upper hand in terms of user experience, offering a host of advantages: swifter load times and navigation responses; closer integration with device functions such as touch sensitivity, vibration and push notifications; but perhaps most importantly, the ability to build software that works both with and without an internet connection. There are problems with native development, however. Your code won’t be cross-platform, so you may have to code independently for iOS and Android, or Windows, Mac and Linux. It’s…

ABOUT THE AUTHOR JEREMY WAGNER t: @malchata job: Web developer/ performance engineer areas of expertise: Frontend development, web performance A few lucky developers and this author had the opportunity to tech edit Addy Osmani’s new image optimisation eBook, Essential Image Optimization, which you can (and absolutely should) read at https://images.guide. In this article, you’ll learn a few tips from Addy’s book that will help make your site’s images leaner and faster. BE SELECTIVE AND PRELOAD CRITICAL IMAGES Take a look at your site and identify a critical image asset. For most, this would be a logo or hero image that you want to have render as soon as possible. This is where the preload resource hint comes in. preload is a way of hinting to the client that an asset…

Google released AMP (Accelerated Mobile Pages) just over two years ago with a promise of making the web faster. Instead of trying to draw a comparison to Apple News or Facebook Instant Articles, as many do, it is perhaps more appropriate to compare it to the HTML/CSS/JS stack. The web platform is made of technologies that are defined by teams of people who are not beholden to one company. The W3C has patent policies and experts, not to mention broad industry participation. Sometimes browser makers introduce a technology that becomes part of a standards document, and sometimes those technologies die a slow death in the outskirts of the land of zombie browsers. Google AMP is different. It is not produced by a standards body. It is a Google product. Google…

Building blocks of artificial intelligence, powered by machine learning and neural networks, are changing the way people with disabilities go about their lives. It changes how they communicate and interact with the world around them. Because we integrate these bricks, we have the power to improve the experience people have, using our sites and applications. As we’re jumping on the AI bandwagon, how can we leverage the technology to ease the development of the next generation of products? And in doing so, how can we ensure no prejudice is caused to those who use the web differently? Visual information not described in text is perhaps the most commonly reported type of issue a blind person can run into on the web. But what if we no longer needed to bother?…

From our timeline What’s the best web design book you’ve read this year? The Little Black Book by @womenwho @_tashhockey Design Systems by Alla Kholmatova. @Dan10GC Sass for Web Designers by @simplebits was crucial in helping get up to speed on Sass when joining a new team this year! Highly recommended!! @pixelflips I’ve read HTML & CSS: Design and Build Websites by Jon Duckett. I’m a beginner and I think its a must have for learning HTML & CSS. @dhbuzon ResilientWebDesign.com by @adactio. When you fully understand the nature of the web, you can make sure your users can get their tasks done. @RealAlanDalton Not read, but buying for my niece Girls Who Code: Learn to Code and Change the World by Reshma Saujani. @weirdgroup Designing Interface Animation: Meaningful Motion…

CLIENTS FROM HELL Client: Hi! I’m blown away by your pixel art. I have a small project I’d like you to help me with. Are you interested? Me: Thanks for reaching out! Can you be more specific about the scope? Client: Well it’s one project. I’m sure you’ll find it very simple! Basically I want a pixel art portrait of me with some speaking animation. Me: Well, hold on. I’ll draft up an estimate and send you a contract that includes timeframe etc. Client: Wow, you think it will take a couple of hours, huh? I didn’t think it would take that long. Me: This is my initial estimate, and I always put in a buffer. I’ll only charge you for time worked, but I find it’s useful to estimate…

WORKSPACE Createful as an agency was born from opportunity. Back in 2010, founder and managing director Kriss Bennett spotted an opportunity to form a new digital creative agency focussed on the burgeoning mobile app industry. Our first project captured another opportunity – a wedding planner iPad app where none previously existed. Our light and airy Bournemouth town centre office was yet another opportunity not to be missed, and in 2014 we jumped at the chance to upscale from our previous office, which was based in a startup incubator on the campus of the local Arts University. Keeping with the theme of opportunity, our comfy sofa (1) provides a central breakout area, decked out with custom cushions (2) picked out by the whole team from their favourite themes. We’re big fans…

We’re used to seeing the word ‘cloud’ stuck in front of basically every technological term out there. And while tech-savvy individuals have a decent grasp of what ‘the cloud’ is, the same can’t be said for all its potential applications. Cloud hosting, for example, is not simply shared hosting with a cloud badge stuck on the front of it. Cloud hosting is in a league of its own when compared to more traditional forms of shared hosting, and offers many unique advantages that qualify its existence. This article will explore these differences. The critical differentiator of cloud hosting is that it draws computing power from a pool of dynamically allocated resources across a large network of physical components, not a fixed set of hardware. Shared hosting, on the other hand,…

After reviewing the homepage of allcarleasing.co.uk and comparing to competitors, this author realised the current landing page looked great but didn’t show many products or give an easy way to begin searching above the fold. The first round of changes focussed on this, introducing key offers directly below the menu, making the large image a background image and adding a quick search below the main navigation, while adding some trust reassurance of a high score from Feefo reviews. The second month focussed on the product detail page and drew focus to the enquiry section through some simple but effective amendments like adding a border around the CTA section and adding an informative piece of text above the lease configurator to explain how to use it. As you can see in…

The concept of installable web apps that offer equivalent functionality and user experience to their native counterparts has been a goal for some time, but in 2015 the term ‘Progressive Web Apps’ was coined to refer to it. Google is a leading champion of this concept and term, and there’s an emerging specification that captures what attributes they should have, which extends beyond just working offline. Essentially, advocates of PWAs express that they should at a minimum: 1 Offer equivalent speed of rendering and user interaction to native apps 2 Integrate with the device through the use of native APIs and functionality, and present as if native rather than being accessed through the browser 3 Work both online and offline, or work with an unreliable network connection Google’s developer site,…

ABOUT THE AUTHOR BRAM STEIN w: https://bramstein.com t: @bram_stein job: Head of webfonts at Adobe Typekit areas of expertise: Webfonts, front-end development, performance, procrastination Selecting a beautiful typeface is useless if it looks ugly on your screen. To avoid hideous, or worse, illegible text, you should always test if the font works well on the devices your visitors are using. You might be surprised; most of your visitors are probably not using the same device you use to design and develop. In fact, the vast majority of people surfing the internet are using Android and Windows machines (Fig 1). The best way to test how a font behaves is to set a sample text in the font and try it out on all devices that you target. Bad rendering is especially…

ABOUT THE AUTHOR DANIEL SCHWARZ w: https://mrdaniels.ch t: @mrdanielschwarz job: Editor of design at SitePoint areas of expertise: Interface design, UX, Sketch With a shorter learning curve than InVision App, and brand new design handoff tools for enterprise teams, there’s no better time to explore how Marvel can be a swift and effortless solution for prototyping web and mobile applications in teams. Marvel helps teams take their designs (made either in Sketch or Marvel itself) from sketched idea to initial concept to tested concept. Its collaborative tools encourage stakeholders not only to have their say, but to be a part of the design workflow. In-between design sprints, bouts of feedback and multiple reiterations, facilitated by commenting and annotating features that help even the largest of teams communicate productively, there’s also an…

INFO ELINA ÅBERG job: Full stack developer at Humblebee w: www.humblebee.se SIDE PROJECT OF THE MONTH Tell us a little about Mangomoji… It’s an emoji based Spotify-connected search where you can find a song based on your emotions. Simply combine a maximum of three emojis and a song will start playing. What’s the inspiration behind Mangomoji? We all love emojis and we see them being used more frequently than ever. Sometimes you might not know exactly what you want to listen to, but you know how you feel! That’s our inspiration – feelings! As well as knowing that one emoji can say more than a thousand words. Who is this aimed at? A person who doesn’t care too much about the artist or specific lyrics. A person who’s more likely to…

BEYOND PIXELS Gaelic Football is a team sport played throughout the island of Ireland and beyond. It is played on a large rectangular field where teams of 15 players compete against each other. The game is a bit of a cross between soccer and Australian rules football, played with a round ball and with two ways to achieve scores: points and goals. The sport is strictly amateur and participants play for clubs based on where they live. There is a real sense of community around the game, with strong family connections within each club. Those who are good enough will go on to represent their county and compete in national competitions. I’ve been involved with the game from a young age and started playing with my local club, Clontarf, from…

INFO job: Engineering manager, Google w: addyosmani.com t: @addyosmani net: What are the main ways Chrome is trying to make developers’ lives easier right now? AO: We want to help developers ship delightful user experiences on desktop and mobile. Sometimes this means bringing new capabilities to the browser that it hasn’t had before. For example, developers like web fonts, but want to avoid the dreaded Flash-ofunstyled- text (FOUT) we often see on the web. In recent versions of Chrome, we’ve given them this via the CSS font-display property. font-display:optional instructs the browser to say “If this Web Font can’t be loaded fast, don’t load it at all. Only show it the next time the page is loaded, if it’s cached”. It can vastly help improve a user’s experience loading up an…

INFO job: Writer, designer and educator t: @fehler w: tinybooks.org Running a business can be a lonely affair, especially if you’re in a team of one. In this month’s article I’ll explore the role that partnerships can play, helping you to deliver added brand value and, as a result, maximise awareness and drive sales. Working with other like-minded businesses has the potential to widen your reach and, even better, deliver a win-win for both parties. The key lies in finding partners that share your brand values. Look closely and you’ll see strategic partnerships in play throughout business. Partnerships are an incredibly effective strategy when it comes to marketing and storytelling. Why? Because the partners add up to more than the sum of the parts. When Apple launched the Apple Watch, for…

georgehastings.com INFO Location: New York, United States Designing since: 2011 Areas of expertise: UX/UI design, front-end design/ development, prototyping Clients: ESPN, Quartz, US State Dept, Google Awards: Webby Awards People’s Voice, Fast Co Innovation by Design New York-based designer and developer, George Hastings, came to our attention recently as the creator of Khroma (khroma.co), a cool online AI tool built to help designers find the perfect colour combinations to use in their work. He’s currently employed as a senior interaction designer by IDEO (www.ideo.com), where he recently worked on a platform enabling New Yorkers to understand the risks of flooding and to be prepared to deal with it in future. We caught up with George to find out more about his work, his career and his life away from the…

Thrive Themes – Headline Optimizer (for bloggers) https://thrivethemes.com/headlineoptimizer One for the bloggers out there. Thrive Themes is a WordPress plugin creation company that provide plugins with a focus on CRO. The simple Headline Optimizer plugin enables you to test multiple blog post headlines to see which content leads to more clicks to your blog post. It’s the ultimate tool to test out linkbait headlines or find the right writing style for your audience. With this plugin there is no need to integrate with a third-party service and is as simple to use as any other WordPress plugin. The fairly comprehensive analytics also enables you to identify time on page, click through rate and more so you can identify not only the titles leading to the most clicks, but the titles…

The web is a constantly evolving landscape, and new technologies like service workers are being introduced all the time. The process by which this happens isn’t straightforward. Usually there will be a standards body such as W3C, which defines a specification for a new technology. However, it is then down to browser makers (primarily Google, Mozilla, Apple and Microsoft) to implement the specification in their respective browsers. Only then will a technology really be ready for production use. This typically happens over a period of time, with Google and Mozilla tending to lead the way. Where features are supported by some browsers but not others, often JavaScript ‘polyfills’ will be published by thirdparty developers to bridge the gap. At the time of publication, service workers are supported in Firefox, Chrome…

If you want to go further than the tips given here, you’re in luck! Here are a few resources that should sate your hunger for image optimisation knowledge: Essential Image Optimization https://images.guide Addy Osmani’s image optimisation eBook is a comprehensive guide on the topic, spanning everything from basic image handling and exporting, image optimisation binaries, and tons of novel ideas and practical advice! Web Performance: Video Optimization http://www.standardista.com/web-performance-video-optimization Impressed by the mileage you got out of converting animated GIFs to videos? Then check out this post from Estelle Weyl with more video optimisation tips. Web Performance in Action https://www.manning.com/wagner If you’re interested in web performance tips beyond image optimisation, check out this author’s book from Manning Publications. Use the code sswagner to get 42% off!…

There’s more to choosing a webfont than aesthetics – rendering, language support, hosting, and licensing are equally crucial to communicating your message. Think of webfonts as progressive enhancement, and learn how to harness CSS and browser features to improve performance. From selection to optimisation, the Webfont Handbook (https://abookapart.com/products/webfont-handbook) shows you how webfonts can make the web a more visually diverse, efficient, and readable environment.…