Innholdsfortegnelse for No. 256 i Web Designer

“ Clarifying the intentions and purpose of your business to Google is paramount in achieving good-quality traffic” 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” Who doesn’t want to be number one? Long gone are the days when you could stuff a host of keywords into your code and hit top spot. Search engines are far more sophisticated nowadays and it takes a combination of factors to rank on that hallowed front page. Our latest lead feature (page 40) reveals the seven key steps that need to be followed to ensure that your site will be seen. Yes, keywords still do have a role, but content, social media and site optimisation are…

Check out the latest digital additions to Web Designer’s burgeoning collection. Amazing Websites and How to Build Them Vol 04 brings together another collection of great-looking sites and picks out quick techniques to learn. The Web Apps Handbook Volume 2 and The Developer’s Guide to JS select the best tools and methods to build apps with web technologies and show how to get started with ES6 and NPM. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick the best animation and 3D-related techniques to add interest to any project. Head to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.…

Rider   crunchpress.com/demo/rider A single-page theme with a fullscreen video background broken down into topical sections with big bold images. Inherent   bit.ly/2fB3Nk5 Contemporary and clean, this theme is neatly laid out and is perfect for any type of blog that needs a touch of style. Ice Cream   bit.ly/2gG2Ls7 Big fullscreen image sliders. The focus is on food, but the presentation uses animation with a twist to instantly engage. Wonderwall   bit.ly/2gG2IMX A lifestyle theme with nine variations on the homepage design. Choose from simple blog to fullscreen images. Luxury Apartment   bit.ly/2gFWsoj Clean and smart with big apartment shots plus location info, maps, FAQ and more.…

Font Flame fontflame.com Touted as ‘Tinder for fonts’, this tool matches up font pairings and allows the user to say whether they love or hate them. Type Nugget www.typenugget.com This online typesetting tool gives users fine control over a robust base, helping produce great web type. Font Stand fontstand.com A Mac OS X app that allows users to try fonts for free or rent them by the month – for desktop and web use. 100 Days of Fonts 100daysoffonts.com Looking for inspiration? This site provides 100 Google font combinations, making it far easier to find your favourite. FontReach www.fontreach.com How many sites use Arial? How many use Gotham? Find out how popular (or unique) your font selection is.…

1. Page document Initiate the page document with standard HTML page definition. This is made from the head and body sections. The head section contains descriptive information and the link to the CSS file to use, while the body section will be used to contain the visible content elements. Content will be added in the next step. 2. Main content Our visible content will consist of the circle container with each of the circle elements. The circle elements are made of span tags – an inner span node and an outer span node. With CSS only allowing you to place an animation per DOM node, the use of an inner and outer node for the circle allows for two animation effects to be applied to the circles. 3. Initiate CSS…

What started as a simple hack day project became a major marketing piece. The concept is simple; players are invited to read statements Donald Trump has actually said throughout his presidential campaign – but with crucial words missing. They must then fill in the blanks by choosing from six possible answers, only one of which is true. To prove they were right or wrong, players are then treated to a relevant soundbite, often taken from a political rally or TV appearance. It’s a great example of stunning illustration and interaction design combined with intelligent use of content and presentation. We built Topple Trump to show off our capabilities and generate a buzz online that would ultimately boost our search rankings. Since its launch it’s won a number of website awards…

1 KEYWORD RESEARCH the terminology that inspires audienceS to convert Keywords have long played a central role in SEO and driving traffic to websites. The mechanics of keywords was once fairly straightforward; today it’s much more complicated and you need to rely on a thorough keyword strategy. Google’s algorithm has become much more complex: it now evaluates the intention behind your query, then searches for a ‘best fit’ candidate in its network of indexed sites. Clarifying the intentions and purpose of your business to Google is paramount in achieving good-quality traffic. A keyword strategy in this modern era has changed dramatically from what we once knew, but is still a vital part of a strategic campaign. Simply stuffing every keyword you can think of into your website doesn’t work. You…

Web forms can often be overlooked when it comes to designing and developing our webpages. If we think about the user experience and how this affects user interaction, then making more fun and interesting forms is certainly something we can all start thinking about. Of course the first thing we do is make sure our forms work and we then make sure they are styled, however more often than not that is where it ends. If it works and it’s styled accordingly, then we’re happy. But where’s the fun in that, right?! What if we added some animation to our forms and really enhance the UX, as well as the UI. Well in this tutorial, we will do just that. We’re going to use CSS3 animations coupled with a…

PHONES The impact of smartphones on the way we build websites has been seismic. Research conducted by GlobalWebIndex advises they now account for over 45 per cent of online activity amongst 16-24 year olds, which is huge. The incentive is clearly there to make sure your website is mobile friendly. With a limit on how large a smartphone’s screen can be before it becomes a phablet, manufacturers are continuously looking at advances in screen resolution and display types to elevate their products. Be retina-ready or else. PHABLETS These phone/tablet hybrids offer large screens, typically between 5-7 inches measured diagonally, and cellular capability that is extremely appealing to those who rely on one device for all their communication and browsing needs. According to a report released earlier this year by the…

Mobile users often require quick access to the internet under processing and network speed constraints, so fast performance of your web page is key. The problem is how to display crisp images across all platforms without the excessive download requirements high-resolution images bring with them. HTML5’s <picture> specification allows you to change source based on selected breakpoints, giving you greater control over how and when your page’s images are displayed. To work, the picture element needs at least one <source> and an <img> tag included in the code. Each <source> contains a ‘srcset’ attribute that specifies the image URL to be used by the browser if that source’s media attribute is true; if it isn’t that source is ignored. The <img> is then fed the URL of whichever source has…

ZURB FOUNDATION   bit.ly/JfervX Foundation is an advanced front-end framework packed full of resources to help produce responsive websites. Semantic and flexible, it is also built with Sass for supercharged website styling. BOOTSTRAP   getbootstrap.com Bootstrap is one of the most popular responsive frameworks out there to date. Built for scalability and highly customisable, whatever your skill level it will make sophisticated web development a doddle. SKELETON   getskeleton.com Skeleton is an extremely lightweight framework used by developers looking for a minimal footprint. It is often used for smaller projects or when the functionality of a larger framework will not be needed at all. MATERIALIZE   materializecss.com Materialize is a simplified CSS framework designed with the user experience in mind. You get plenty of useful components and intuitive features that…

CSS RESET Before you code a single line of CSS it is always a good idea to add some form of CSS reset/normalise. The purpose of a reset stylesheet is to minimise CSS related browser inconsistencies, this could anything from differences in default line-heights, paddings etc. The quicker we bring all browsers into line with each other the easier it will be to style pages and debug any issues we may have further down the line. There are a number of free CSS resets available online so if you don’t have one get searching. If you are using a CSS framework check to see if a reset has already been included, many frameworks already have this sorted for you. USE PREFIXES Some of the newer, more experimental CSS properties require…

Along time ago (well, the 80s), a bunch of industry experts came together and hashed out the details that would bring a new technical standard into the world. The goal of this new standard was to create a protocol that would allow a multitude of digital devices to talk to each other in a common language and, as a side effect, unleash a whole new era in the creative industries. That protocol was the musical instrument digital interface, or MIDI for short. MIDI is designed to be used by instruments to tell the computers they’re connected to about the keys being pressed, how hard they’re being pressed, and how the pitch of the notes those keys represent are affected. Since its inception, MIDI has been embedded in more or less…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” 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 their customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need. What we offer • Managed hosting…

“ Content and keywords go hand in hand; they help both search engines and users to understand the purpose of your pages ” Paul Betteridge Paul has been working in the industry for the past 15 years and is currently the head of digital marketing at leading digital agency Thinking Juice. This issue he walks you through the key steps to a successful SEO strategy and reveals the best tools to achieve your goal. Page 40 Adam Morland Adam is an agency founder-turned-digital director who’s been in digital for over a decade. He ensures only the very best work leaves Salad’s studio. This issue he reveals the best responsive techniques to build with. Page 64 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks and languages.…

01. Adison Partners   www.adisonpartners.com Combines contemporary colours with vertical animations for page transitions. 02. ADMAN DNA   en-dna.h-mp-recruit.jp Polygons with a purpose. Watch them build into a face. 03.#MeetAnImmigrant   meetanimmigrant.com Colour engages the user and draws them into the stories that are being told. 04 Stranufif 2016   strandfuif.be/2016/ Simple typography gets taken over by a mesmerising smoke effect. Graphics Low Poly Greetings bit.ly/2gesCDI Mylan Le puts together a collection of polygon characters, each with its own greeting Colour picker Demon Colors bit.ly/2fNmtju Typesetter Volte bit.ly/2fNxS2u Volte Rounded is a geometric sans serif typeface with rounded stroke endings. These aren’t softened-up corners, but rather full-on sausage-style terminals WordPress Dope dope.themelovin.com A cool and contemporary theme that uses a minimalist approach with modern fonts and big animated images…

“Over 10 million people in the UK live with a disability, and they want to purchase holidays just like everyone else” The first and biggest part of solving any problem is admitting that there is a problem. A couple of years ago, a visually impaired man was asked to book a flight on the Expedia.com website in front of a boardroom filled with senior Expedia executives. This man, Toby Willis – a software engineer and Expedia’s usability test specialist – failed completely to process his booking online. It was the wake-up call Expedia needed. According to a recent report on user experience from digital agency Sigma (bit.ly/2fKShqW), many of the world’s top travel brands failed to provide an accessible and inclusive experience for people with disabilities. In fact, six out…

“The camera you choose depends on the kind of video work you want to do and what your budget is. If I were just starting out, I would just use my smartphone” It’s said that a picture is worth a thousand words and given that you have 30 or 60 frames (images) per second of video, the numbers suggest video is a must. But what types of video are there? Screencast and live video are the two choices. A screencast is just a video that captures whatever is happening on your computer screen. There are dedicated apps/software that make this easy, including QuickTime on Mac, Camtasia (Mac or PC), and Screenflow. I’ve used several, but I tend to use Camtasia since I use both Mac and Windows. Having a screencasting…

1. Page document Define the page with the standard HTML document template. This consists of the HTML container, which itself contains a head and body section. The head section is used to contain descriptive information and links to external resources, such as the CSS stylesheet and JavaScript code. The body will be used to contain the visible content. 2. Navigation content The navigation is made from a nav element that contains a series of links. Each link references an element on the page via a unique ID. This link reference is identified in the href attribute of each of the links. These links will be styled to appear as tabs later on. 3. Content articles The content that the navigation tabs link to is stored inside article containers that have…

“Our recent launch for the UEFA Euro 2016 tournament in France is a good example of what Parallax is about. We worked on the anthem with David Guetta and UEFA. The idea was to get a million people to record a chant that would go on the official music track. The deadline was tight, the goal was unrealistically ambitious and the tech was so hard that many other agencies said it wasn’t possible – but we delivered and hit the target of a million uploads.”…

Main site navigation The main site navigation is always on screen, so that wherever the user is within the site there is simple consistency for moving around. Side navigation For this particular section of the site there is an additional side navigation so that the user can select exactly which juice drinks to navigate and look at. Typing effect The main title of each drink types onto the screen using JavaScript to add each letter one at a time. Touch carousel The whole page is a touch carousel. The cursor displays as a hand on the desktop, and the user can drag between juice drinks to reveal the information. Sliding text As the user navigates to new drinks the text at the bottom slides up and fades in, giving the…

Front-end developers have long sought to eliminate the undesirable experience that is a fresh page load. Whether the reasons are for performance, experience or just style – the ‘white flash’ that occurs as a new page is downloaded is a long-lived hallmark of the web that’s incongruous when compared with rich media experiences on other platforms. Unfortunately, it’s rarely an option to build an entire single-page application for a simple CRUD website, though AJAX pagination is permissible and so the clunky ‘white flash’ lives on for the majority. However, it is possible to design and implement delightful and performant, full-screen page transitions for evergreen browsers today. It also isn’t as difficult as it may appear at first glance. This tutorial walks through designing the motion, the necessary asset production…

BACKGROUND CSS media queries were introduced as part of the CSS3 specification and allow us to set certain conditions for when our CSS rules should take effect. The types of conditions we can specify with CSS media queries include, but are not limited to, screen size, device-orientation, aspect ratio and also pixel density. This is an extremely powerful feature, giving us the ability to tailor the presentation of our content to whatever device it is being viewed from, and even how it appears when printed, without having to make changes to the content of our page. Thankfully media queries are well supported by all modern browsers so there’s no excuse for not taking advantage of them. TARGET FIXED UNITS If we know the dimensions of the device we want to…

Web pages were traditionally built using a static layout – that is, having a fixed width of ‘x amount of pixels’. To increase the flexibility of this layout, media queries can be added to re-style the page at various breakpoints, creating a ‘snap’ from one state to the next. This is called an adaptive layout, but it is still not ideal. To be truly responsive a design needs to be able to transition in a linear fashion as the viewport size increases and decreases. In order to do this, the measurements of our layouts must be switched from fixed units to relative ones. As soon as we define the size of elements proportionally to the viewport we enable scaling of those elements in relation to the viewport size.…

Being a REST-based application programming interface, the Graph API can – in theory – be used via the traditional set of AJAX commands found in libraries such as jQuery. Before diving in deeper, however, let us take a look at the data model behind it. All in the network Facebook's Graph API sees each user's digital life as an implementation of the universally-reviled graph data structure. Individual data elements – photos, videos and posts – are considered the nodes of the graph. The connections between nodes are called edges – in the case of the social graph, they constitute relationships such as the connection between comment nodes and the photo or post which they discuss. Finally, fields provide additional information on individual elements – imagine them to be popups containing…

Last Christmas over half of online transactions involved using a tablet or smartphone, according to IMRG. This trend is only going to increase year on year, so the need to optimise for mobile is ever present. The problem is the experience of purchasing on mobile can become long-winded. Entering card details, addresses and shipping information can lead to lots of tapping and scrolling. While site-based accounts and existing browser-based solutions like autofill can alleviate some of these issues there is the need for a more comprehensive and purpose-built solution. The Payment Request API aims to make the checkout process much easier. By storing all this data in the browser, customers can go through the payment step with a single tap. The site will then receive this information back in a…

“Europe’s #1 Developer Bootcamp, running highly selective classes of our offline course every 6 weeks, and a remote course every 12 weeks.” About us Makers Academy is a fully immersive, 12-week computer programming boot camp. With their help, you will learn the principles of software craftsmanship and they’ll also help you get your first job. They’re Europe’s number-one developer boot camp, running highly selective classes of the offline course every six weeks, and a remote course every 12 weeks. They take a ‘learn by doing’ approach, through project-based work. Students are encouraged to work in pairs on coding challenges, with weekly tests, culminating in a final project. They help set up job interviews via their network of hiring partners including Thoughtworks and Deloitte Digital. What we offer • On-site: 12…

“A feature we particularly love is the transition between Fruit Liqueurs pages where carefully-layered bottle and botanical images fade in and out during AJAX page changes, while a very tall ‘scrub’ PNG slides one frame at a time between them. The result is the impression of beautiful illustrations being scrubbed in and out during page changes, with carefully timed fades and subtle translations on other page elements completing the effect”…

uefa.com/uefaeuro/news/newsid=2352011.html UEFA needs no introduction, nor does the European football tournament contested every four years by 53 nations, showcasing some of the best talent in world football. Euro 2016 in France was one of the biggest sports tournaments ever with an estimated 150 million spectators for each live game. UEFA wanted to engage fans on a mass level early, so during the build-up they wanted to create an anthem that everyone could be part of. They had signed up David Guetta to record the track and needed to find an agency to build a digital product that allowed people all over the world to record their voice to be added to the track. With this came a number of technological challenges from huge spikes in traffic to different languages and…

Keeping content fresh on a web page is incredibly important. News, magazine sites and blogs are often popular because of their ever-changing content. The designs of these sites often show the change using images; aggregating a new picture and headline to the home page shows that the content is up to date and different to the user since they last arrived on the site. Using the adaptive-backgrounds.js library, designers can now actively take the dominant colour of the image and use that to make the background of the section change and reflect the mood of the image. This is a powerful way to make sections of a site appear dynamic and to really emphasise content changes. In the tutorial, a number of techniques will be explored, from simply changing…

“The myriad of devices, screen sizes and resolutions is ever increasing and with the introduction of touch force sensitive screens we’re faced with even more variables to consider. Responsive web design is not an afterthought. It is at the core of all that we create”Adam Morland Digital director at saladcreative.com “User expectations of websites are higher today than they have ever been. The challenge for designers and their clients is communicating the same message no matter what platform it is being delivered from. Making the most of the unique opportunities different platforms offer will help separate your design from the rest”Tom Lenihan-Clarke Web developer at saladcreative.com Responsive web design is the biggest shift that we have experienced for creating websites. Goalposts were not only moved, they were made to…

BACKGROUND When smartphones were first created, and before websites catered for them, there was only one way for them to fit a web page that was designed to be 1000px wide fully on screen and that was to zoom out. This approach was adopted by all mobile devices as their default setting, albeit with varying levels of scaling from one manufacturer to the next. And whilst this works fine for the traditionally designed websites it’s trying to accommodate, it has dire consequences for responsive design, resulting in a loss of screen real estate and hard to read content. Not so smart. The viewport meta tag was created to help improve the presentation of responsively-designed content across various mobile devices by telling the browser how to control the page’s dimensions and…