Innholdsfortegnelse for No. 255 i Web Designer

“As users of the web, we’re keenly aware what makes a website or mobile app easy to use and understand (or, what makes one difficult)” THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content Don’t forget about the user experience UX – it’s only two letters but covers a myriad of areas that cannot be ignored if you want your site to be a roaring success. It could be argued that UX is just common sense, but there is so much more to user experience. This issue we employ the talents of UX expert Chris Cherrett to guide you through the process of creating a great web experience. He’s tells why its important,…

Web Designer’s latest digital additions to its burgeoning collection include The Web Apps Handbook Volume 2 and The Developer’s Guide to JS. Check out the best tools and methods to build apps with web technologies and learn how to get started with ES6 and NPM. Don’t forget Animate with HTML & CSS and 3D and the Web. Also, check out Advanced Angular, plus 20 Quickfire HTML & CSS Techniques and 10 Amazing Websites and How To Build Them Vol 03. How can you get your hands on a Web Designer digital edition? Head on over to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.…

HTML5 Mega Cheat Sheet bit.ly/2en2OGk Includes references to new, old and existing tags, browser support and a few specifics. CSS3 Animation Cheat Sheet bit.ly/2dPo86R Plug-and-play animations. Add the stylesheet to your site and apply the premade CSS classes. CSS3 Mega Cheat Sheet bit.ly/2exzUFs Covers colours, grids, speech, 3D, generated content, pseudo classes and more. The Ultimate JS CheatSheet bit.ly/2dDbkwL Check out the introductory video and then the 940-line cheat sheet. Type Burrito cheat sheet typeburrito.com For pairing up fonts. Sign up or read the ‘Stop Feeling Dumb About Pairing Fonts’ blog post.…

Whilst obviously putting the user at the forefront of the user experience design process, user-centred design also takes away certain distracting considerations – importantly, what technologies you should use. Whilst we all have our favourite platforms, frameworks and libraries, UCD ensures that designers and developers focus on the needs and wants of users rather than constraining opportunities and limiting their implementation due to a lack of support from a particular technology or technologies. Importantly, the technology used to deliver a great user experience should never be selected before the product itself is designed, whether that’s a website, mobile app or any other software system. If it’s possible to deliver a feature using a preferred tool, then great, but the quality of a product should never be compromised by the tools…

One of the most important things to establish is the different between what people say and what people do, and that the two are not always the same thing. Whilst you might be able to collect more data though a survey in order to validate thoughts and opinions with more people, if what you actually need to find out is how they behave then a survey isn’t necessarily the correct tool for you. In general, most usability studies rely more on behaviour, but that’s not to say that self-reported information can’t be useful to designers.…

Animated GIFs have been popular online for years. They’re a more manageable way to use videos in your websites – size-wise and in terms of uploading – so it’s no surprise they’re used for advertising banners and even just as memes. While an animated GIF is somewhere between a video and a picture, a cinemagraph is somewhere between a picture and an animated GIF. It’s a partially animated picture; the action can all be happening in one particular spot, leaving the rest of the image to be still. It looks arty, it gives focus to the movement in your piece, but in terms of why it’s useful on the web, less space to animate ultimately means a smaller file size. You’ll be pushed to create an animated GIF from…

"If ‘content is king’ and ‘the customer is king’, which one gets the crown? Sadly, picking one will also lose you the other; customers will ignore useless or irrelevant content, and great content without any readers may as well be written in invisible ink. Fortunately, content strategy give you both on a plate LOUIS POLLARD ” LOUIS POLLARD BARE COLLECTIVE 4 QUESTIONS THAT DEFINE CONTENT STRATEGY TODAY Content really is king in a multi-platfrom world 1 WHY DO I NEED A CONTENT STRATEGY? You can think of a content strategy as a frame for your content, which takes into account the needs of your customers, and the needs of your business. Essentially, it guides the way you post and prioritise content, as well as figuring out the best hierarchy for…

You’re going to need to get friendly with your target customer. Figure out how old they are, what they like doing, brands they like, causes they root for – all the kind of info you feel you’d need to know about a good friend. Once you’ve got enough info to fill out a social media profile, give them a name, and get the person who’s most reluctant to draw them to draw them. Keep this little case study at the front of your mind when you do the pains, gains, and jobs exercise, as everything you do during that will be based on this imaginary person.…

• You’ve learned more than ever about your client’s project • Your client’s even learned more than ever about themselves • Together, you’ve used that knowledge to paint a picture of the target customer • You’ve delved deep into the target customer’s mindset, establishing their pains, their gains, and their jobs in life • You’ve flipped these challenges into the bulk of your messaging themes • You’ve boiled these right down into a short mission statement • You’ve boiled that mission statement into a hero message to lead your website • You’ve used all that info to build the foundation of your client’s new website – and they’ve been involved at every step. They’re just about ready to sign off! All in a day’s work? Impossible? Not with content strategy.…

GOOGLE DRIVE API Even though we didn’t include Google Drive on page 74, the service deserves a mention. As every user has a Google account shared between their smartphone and the browser, Google Drive is the ideal location for files. Accessing it is made a bit complex by its file system, which is based on IDs. developers.google.com/drive/ MAILCHIMP MailChimp is a popular service dedicated to eCommerce mailings: think keeping your customers in line. Its API enables you to synchronise the service to your CRM system: you can, for example, target mailing lists to those customers which satisfy specific criteria found in the back-end of your system. apidocs.mailchimp.com/ AMAZON S3 Setting up a file server is not particularly difficult: it’s the hassles involved in scaling which get annoying. Therefore, in scenarios…

“ The difference between a good website and a great website is the attention given to micro-interactions, emotional reactions and perception ” Chris Cherrett Chris is a creative developer and UX designer who blends user-centric design with the hands-on technical skills to implement it. This issue he provides a guide to all that is UX. Discover the best research methods, key prototyping tools and how to build and test wireframes. Page 40 Louis Pollard Louis helps brands to develop stories that connect meaningfully with their audience. He believes that a strong content strategy is a vital asset in creating web experiences that matter. This issue he tells you what you need to know. Page 66 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks and languages.…

Identifying the issues around web accessibility is only part of the solution. You know that your site needs to be redesigned to accommodate all users, but help to find specific problems is always useful. Fortunately, the web provides a host of tools to come to your aid. A good place to start is the Web Accessibility Evaluation Tools List (www.w3.org/WAI/ER/tools/). This has hundreds of tools to help evaluate the state of your site. If you are looking for a simpler solution, there is WAVE (wave.webaim.org). You simply add the desired URL and the tool will then point out any issues via an overlay on the website.…

dotJS dotjs.io Billed as the largest JavaScript conference in Europe, dotJS hosts speakers with unique insights on the biggest topics. Decompress 2016.decompress.com.au A community day for designers and developers run by the CSSConf and JSConf team with speakers and workshops. E-Learning2016 c-mric.com/index.php/el-2016 A conference that looks at web-based learning, interaction and accessibility. See the website for more details. Digital Summit digitalsummitdallas.com If you want to learn about digital strategies, content marketing, email marketing and more, get yourself to Dallas. dotCSS dotcss.io A sister event to dotJS, the one-day conference boasts the best CSS experts talking about technical and design matters.…

“ Being a developer is not about having an encyclopaedic knowledge of all the class methods in a given language” Over the past few years we’ve had over 5,000 applications to Makers Academy, and between myself and my incredible colleague Nikesh, we’ve run around 3,000 interviews. I think it’s fair to say that we’re world-experts in predicting someone’s future potential as a programmer. Most beginners tend to believe that the fastest way to ‘learn to code’ is to memorise syntax. Our (broken!) education system trains us to believe that mastery of a subject involves being able to regurgitate as many facts as possible. I’ve seen hundreds of students who can quote Chris Pine and who’ve memorised solutions to the Bowling Alley kata, but struggle to understand how to solve simple…

Rather than heading straight to the visuals, UX designers must be able to answer the following questions: who is the website for, what informs their decisions and what are their goals? In order to ensure that the best possible designs and solutions are being considered, it’s often not enough to assume you already know the answers to the questions above. By doing so you’re more likely to design the website for yourself than the people who will use it. But seeing it from their perspective can, in a way, be the most challenging part of UX design. As many UX designers will have experienced, the HIPPO (‘Highest Paid Person’s Opinion’) effect means that influence and bias can prevent us from ever really exploring the reality, and it’s the responsibility of…

The reality is that end users will often use more than one channel when engaging with a company, buying their products or using their services. For example, you might manage home utilities like phone or broadband online, but every now and again you either need to telephone your provider or visit a high-street store. The requirement to consider more than one channel within the customer journey – both online and offline – is increasingly commonplace because customers interact with companies in various ways. With this in mind it’s easy to see how experiences traverse channels. When a customer completes a task online it may well influence communication through another channel, and visa-versa. Experiences ‘loop’ continuously across channels in-line with customer expectations and habits. Therefore, it’s important for UX designers to…

To minimise any learning requirements – and maintain the principles of UCD – it’s a great idea to be mindful of usability heuristics, which are general principles for user interface design that promote learnability. They are called heuristics because they are broad rules of thumb rather than strict guidelines. Type ‘usability heuristics’ into Google and you’ll find an explanation of all ten, which includes system status feedback, the ability for users to reverse actions or find quick escapes and ways of reducing mental effort. These heuristics have been around for a long time, but they’re as applicable today as they were 20 years ago.…

Wireframes are a staple of every UX practitioner’s workflow, as they’re a popular way of mapping out user interfaces without jumping straight to tools like Photoshop, where pixel-perfect designs were traditionally created. Wireframes are created for the purpose of arrangement elements like menus, images and buttons to best accomplish a particular task, without being distracted by concerns like colour or visual branding. The purpose of the user-centred design process is to focus on (amongst other things) the user’s goals, and one of the most effective ways to do this is to strip back design-enhancing assets and evaluate the information architecture itself; how the layout of information influences the user’s journey, how web page’s function and behave, and the prioritisation of content. In essence, wireframes focus on how a page functions,…

When it comes to CSS frameworks we web developers aren’t short of options, so for a library to put its stamp on the landscape it’s got to have something special. Tachyons is a toolkit which has been gaining traction, describing itself as “functional CSS for humans”. As you’d expect from a modern CSS framework, it is mobile-first, lightweight, rolls with a grid system and is modular – really modular. However, it stands out from others for a number of reasons. It’s not just a framework but a design system. You can think of the selectors in Tachyons as subatomic classes to build your components from which the classes make virtually any layout possible. The project was created by Adam Morse back in 2014 and has gradually evolved since with…

1 NO SITTING Sitting down = switching off. It sounds like an ordeal, maybe, and actually, your ankles will be killing you by the end, but it makes people more engaged for longer. So, weirdly, a must. 2 NO DEVICES Tuning in = zoning out. As soon as one person’s checking their emails, everyone’s checking their emails. You’ve got to have everyone laser-focused if this is going to work. 3 ONE CONVERSATION Multiple conversations = missed information. In a content strategy workshop, one person speaks at a time. That way, everything’s 100% clear, and everyone’s on board with the stuff that gets written down. 4 GO AS FAST AS THE SLOWEST PERSON Speeding ahead = leaving behind. We only advance at the speed of the slowest person because this process…

Naturally, the more core customer types you’ve got, the more complex your content strategy will end up being. That’s not a problem necessarily. What will you need to do is make sure that you are including everyone. Repeat steps two and three (from content strategy) for as many core customer types as you think you’ve got. From here, you’ll quickly start to identify the common pains, gains and jobs they share – even though they may generally be very different types of people. You’ll also start to discover that old-school demographics like age and location are beginning to become a thing of the past. For example, what does it matter that Joe, 65 from London, and Amanda, 18 from Chicago, are thousands of miles and many decades apart? They both…

An API – short for ‘application programming interface’ – is an communication gateway which allows third-party programs to access the services provided by another company. APIs are interesting for two reasons: first of all, many interesting features can easily be embedded into your application without having to develop them yourself by deploying an API. Secondly, developers offering an interesting service – think about things like face recognition, stock data storage or similar – can increase the range of intellectual property by providing an API. Even though APIs are not limited to web technologies, REST and co are among the most commonly used API interfaces. This guide looks at APIs from the perspective of a consumer – if you want to find out more about interesting services you can add to…

SPOTIFY DID YOU EVER WONDER ABOUT A CATCHY TUNE WHICH YOU SIMPLY CAN NOT STOP WHISTLING? SPOTIFY FINDS MORE OF THE SAME Providing users of multimedia applications with suggestions is sensible for multiple reasons. In the case of media players, it could persuade users to purchase more content. Use of BitTorrent or similar applications could be motivated to download more files, thereby spending more time in the program and generating more ad impressions. The business of suggesting music to users is complex: it requires a large database of recommendations. Fortunately, Spotify provides developers access to parts of its recommendation infrastructure. Getting started with Spotify is not particularly difficult: your application should be authenticated to the server in order to be less affected by rate limits. In the next step, you…

NativeScript is a cross-platform developer framework for creating native mobile applications using common web development technologies such as JavaScript, CSS and XML. Emphasis must be added to the ‘native’ part because even though common web technologies are used, these are not web or hybrid applications. They are true native applications with native performance and native user interfaces. A powerful feature of NativeScript is its ability to allow developers to use the very popular Angular 2 framework (angular.io) when creating their applications. This not only makes Android and iOS applications incredibly easy to develop, but much of the code can be shared to web. We’re going to create a very functional mobile application that makes use of common UI components and consumes data from RESTful web services using NativeScript with Angular…

Web accessibility is here to stay, it makes the web more inclusive, but it still seems like it is being ignored. Or, at the very least it is still a long way down the list of requirements. The Web Content Accessibility guides were put together in 2008 and while still relevant today, the web has changed (a lot) in the preceding years. The guides have been one of the major resources for making web content accessible to users with disabilities. And, to demonstrate how useful they are they have been translated into 20 languages. But, what have been the primary changes that affect accessibility today? According to the W3C blog, “The widespread use of mobile devices with small screens and primarily touch-based user input methodologies has led to challenges making…

01. Bistro L’Atelier bistrolatelier.com Fullscreen background images simply make you want to eat at this bistro 02. Ming Labs minglabs.com/en Animated lines create the company name and add a steam-like effect to the text 03. WorkPocket World workpocket.randstad.co.uk A hectic animated illustrated world. Watch out for the reappearing cyclist 04.SmashTaps smashtaps.com Neat photography, animated screens and to-the-point typography Graphics Cosmic Butterfly bit.ly/2e4G7p2 A glorious riot of colours and butterflies with kaleidoscopic effects results in a mesmering piece of art Colour picker Red teall bit.ly/2dDkEUV Typesetter Kawak myfonts.com/fonts/latinotype/kawak Inspired by Mayan glyphs, the Kawak family offers clean lines and easy reading and instant impact at headline size WordPress Evont evont.janxcode.com Running an event and need a site quick? Then this is the perfect theme to get the job done in a…

“Infographics retain their power to convey big data to the user in a way they find palatable” In the digital age, different forms of conveying information compete with each other for dominance. However, one maintains its power to inform and educate – the infographic. The question is: why are they so powerful? To understand the potency of infographics, it is important to grasp the range of data communication products that fall within this category. There are three different kinds of infographic that are commonly used by designers and marketers to reach their audiences. Firstly, there are static infographics. These involve data being presented to the audience using both text and images on the same graphic. When a designer opts to use a static infographic, they have chosen to benefit from…

1. Page document The first step is to define the page document structure. This is defined with a head section used to load the external stylesheet, along with a body section to contain the main content. The head section can also be used contain non-visible content such as meta description information. We will insert the content in step 2. 2. Main content The page content consists of a navigation, and the main section containing each of the visible content articles. Each of the articles have an ID that the navigation items use for linking to. These articles have a section to their content, along a span tag used for the swipe effect 3. Initiate CSS Create a new file called “styles.css” and start this with rules to define the general…

 There’s no doubting that both good usability and good user experience design are essential to the success of a website – but the two are not the same thing. Where UX concerns all aspects of a user’s experience when interacting with a product or service, it’s also subjective to each user and their own perception. “BY DELVING INTO USER EXPERIENCE DESIGN AND FOCUSING ON USABILITY, WE CAN BETTER UNDERSTAND WHAT USERS DO” On the other hand, usability is about specific tasks and interactions and the ability to easily use a website or system efficiently. In essence, usability is a subset of UX, where the user experience is the result of multiple factors. But just because a website is easy to use does not mean that it’s a great user experience.…

There are always better ways of doing things, even if you’re under the impression that you already understand how customers behave online or you already know the best way of designing a web page. In fact, we all carry a bias and naturally seek confirmation of what we already believe to be true. So convinced by our own understanding we often miss the opportunity to see the truth, which is why testing assumptions with tools like VWO, Optimizely and HotJar is so important to web design, and is a great way of using evidence to inform great designs.…

User experience designers have established a number of useful research methods that positively influence the performance of web designs – and the overall success of a project – cost-effectively (providing those findings are used to influence the overall design). These research methods fall into two of four categories: quantitative (measuring indirectly, i.e. through a survey), qualitative (understanding the underlying reasons, often in person), attitudinal (what someone thinks) and behavioural (what someone does). Once you’ve identified what you need to learn you can then determine the best tools for finding out the answer. For an online shop, maybe you need to observe how customers use the checkout page in order to make it perform better (a quantitative, behavioural study) or what customers who’ve already purchased online thought about delivery times, or…

“DERIVE A HYPOTHESIS ABOUT HOW PEOPLE ARE GOING TO USE YOUR WEB PAGE AND DESIGN A TEST THAT’LL PROVE OR DISPROVE IT”- CHRIS CHERRETT USER EXPERIENCE DESIGNER HTTPS://CHRISCHERRETT.UK So that you can test your wireframes and prototypes, setting up a usability lab is a great opportunity to observe users and their behaviour under controlled conditions. Successful tests can be run in just a few simple steps, and are invaluable in informing the design process with genuine insight into how users perceive and navigate a given system. 1. DEVISE THE TASKS YOU NEED TO TEST Make sure you’ve decided upfront what you’re going to test. Better still, derive a hypothesis about how people are going to use your web page and design a test that’ll prove or disprove that theory. Keep…

As user experience comes ever more to the forefront of design with interactive experiences, giving users as much feedback as possible is incredibly important. Think of the times you have clicked a button on a site and just sat there waiting for something to happen, wishing there was more feedback. As designers and developers rely on Asynchronous calls using XHR (XMLHttpRequest), it is essential that the user is kept informed of every communication. JavaScript desktop notifications is a fairly new addition to the official specification of the Notification API, which allows modern browsers to push notifications to the user’s desktop. Support is available for mobile browsers as well, but Android Chrome requires the site to be hosted with a valid SSL certificate on ‘https’. With this kind of support,…

“Twilio’s servers act as a›kind of proxy between the modern and the legacy›world” TWILIO DESPITE THE RISE OF WHATSAPP ET AL, CLASSIC SMS MESSAGES AND VOICE CALLS ARE STILL GOING STRONG Should you ever find yourself longing for the ability to easily send SMS messages or dispatch voice calls, Twilio’s services have you covered. The best way to describe the company would be as a broker between the digital and the traditional domain: its servers act as a kind of proxy between the modern and the legacy world. IS THIS A CONVENTION? Conference calls involving multiple persons are ideal for team co-ordination. Twilio provides the necessary infrastructure: users can call in and are presented to you via an instance of the caller object. It can then be assigned into the…

It has always been commonplace for e-commerce websites to enforce all communication over HTTPS; HTTP over SSL/TSL. Through an encrypted connection, HTTPS ensures that no ‘man in the middle’ attacks can steal sensitive information such as credit card details and passwords. However, it makes sense that any communication between a website and its user can benefit from the security provided by the SSL/TSL protocol. Over the past few years, big companies have pledged to switch all of their web traffic to HTTPS in an effort to beef up security when browsing online. With Google pushing the benefits of SSL and most social media sites having implemented it as standard, we are now firmly in the security conscious age of the web. As of August 2014, Google announced in a blog…

“With a comprehensive range of high-performance and affordable products, 1&1 offers everything” About us 1&1 Internet is a leading hosting provider that enables customers to assert their web presence and succeed online. With a comprehensive range of high-performance and affordable internet products, 1&1 offers everything from simple domain registration to award-winning website building tools, advanced eCommerce packages, powerful cloud servers and more. Established in 1988, the company now operates across ten different countries with over 7,000 employees worldwide. Small and medium businesses, web developers, IT professionals and all other users can count on 1&1’s cutting-edge technology, top levels of internet security and 24/7 expert support to provide everything required for online success. What we offer • Quick and easy domain registration for a full range of extensions • All-inclusive website…