Innholdsfortegnelse for No. 248 i Web Designer

“ A new type of query means CSS will be able to query whether the browser supports a feature and apply the styles if they do ” 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” CSS: The new frontier CSS, it never stands still. Like all good web technologies it is constantly evolving. How will CSS be styling in 2017, 2018 or 2019? No one knows but there are those who are pushing the boundaries and experimenting with what already exists, giving us a peek at the near future. In our latest feature (page 38) we take a look at what is possible now, and what is likely to be adopted very…

Mobile is where it’s at and speed is a key feature, just as it is on desktop. Google AMP (Accelerated Mobile Pages) is here to help. It touts itself as ‘instant’, ‘everywhere’ and is looking to help “create mobile [optimised] content once and have it load instantly everywhere”. It’s a noble initiative and a sentiment that should be welcomed. But, how does it work? AMP consists of three different parts: AMP HTML, AMP JS and Google AMP Cache. AMP HTML is HTML but with some differences like the image tag becoming amp-img. The AMP JS library ensures the fast rendering of AMP HTML pages, while Google AMP Cache delivers AMP HTML pages. Read more at bit.ly/1MtXsWG.…

1. Set up HTML We create the main HTML document containing the head and body sections. The head section contains a link to the external stylesheet we start to create in Step 4. The body section is where we place the main website content. 2. Put in navigation links The first section we add to the webpage is the navigation component. We use the semantic <nav> tag to contain regular HTML links. These links don’t link to an external page, but to an element that will be placed on the current page. This is achieved by using the hash character followed by the ID name of the element. 3. Add article content The <main> tag is used as a container to store each content article. The article tag is used…

We’ve all had those moments of pure frustration when the website, app or program doesn’t make it abundantly obvious how to achieve our goal – and the end result can be enormously damaging to the brand that owns it. We can tolerate having to use a bad design once or twice, but after that we’ll go elsewhere. A bad UI is usually the subject of one of two things: a lack of understanding about the user and a lack of time/money spent on development If it’s the former that’s the problem, it’s usually because the project is overseen by someone under pressure to release something quickly (the latter). Like anything in life, there are those that will give their work real thought and effort, and those that don’t. The market…

Coupled with the 4K screen and Snap features, we could easily run two apps side by side. “The one thing that everyone noted was the screen quality: one designer even revisited their own monitor’s colour profile after seeing Dell’s colour replication! Photography also has greater definition and vector images look infinitely crisp. “The Dell Precision 5510 has also been future-proofed with the introduction of the Thunderbolt 3 connector. Transferring even the largest Photoshop files onto our USB-C work servers felt instant. “The machine feels small enough to replace my existing laptop, and it’s also capable enough to see my desktop heading for a new home. Though the Dell 5510 is a high-end business machine, the clean design would also make it a welcome addition to the trendiest startups.” “In a…

“ CSS4 doesn’t actually exist, not as a monolithic specification describing what ‘CSS4’ is. What we do have are modules which describe separate functionality ” Tim Stone Tim is front-end developer at Lush and has over four years experience working with digital agencies. In this issue Tim delves into the more experimental side of CSS. Find out what’s happening with CSS4, what atomic design is and the best, cutting-edge CodePens. Page 38 Tam Hanna Tam’s career has seen him wrestle with a variety of stacks ranging from the commonly used to the archaic. This issue he delves deep into his vast knowledge bank to pick 10 of the best PHP frameworks. Page 72 Tom Wittlin This issue Tom Wittlin and Dan Jones, who form part of the creative team at…

Web Designer’s latest digital addition to our burgeoning collection is the third volume of 10 Amazing Websites and How To Build Them. We cherry-pick a collection of the ten best sites and pick out the core build processes for the best techniques. Don’t forget CSS Style Secrets and jQuery Genius Guide. Get to grips with the core API, find out how jQuery works with ES6 and learn advanced jQuery methods. Plus, check out Advanced Angular, 225 Best Web Tools and Resources and Amazing Websites and How to Build Them Vol 02. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.…

UX London 2016.uxlondon.com A host of experts give invaluable talks on UX and more. Plus, a host of workshops are available. Front frontutah.com Set in Utah, this is a two-day in-depth conference for user experience designers and product managers. NG-CONF ng-conf.org A three-day conference with Angular at its centre. All the big names in Angular will be there, including creator Miško Hevery. Port 80 port80events.co.uk A web design conference that looks to inspire, motivate and excite designers and developers in South Wales. Upfront 2016 upfrontconf.com A front-end conference for anyone who makes for the web in Manchester, UK. Fancy speaking? Get in contact.…

Filterizr yiotis.net/filterizr Filterizr is a jQuery plugin that searches, sorts, shuffles and applies stunning filters over responsive galleries using CSS3. Rater.js auxiliary.github.io/rater A highly customisable rating widget that supports images, UTF-8 glyphs and other HTML elements. Great for star ratings. Popper.js fezvrasta.github.io/popper.js This neat little plugin enables you to add popups and tooltips in many different positions via a single line of code. jQuery formBuilder formbuilder.online If you want a fully featured drag-and-drop form builder, then this plugin is for you. SND github.chrs.cc/snd A jQuery audio player that is easy to implement and has a wide range of options including layouts, buttons and functions.…

1.HTML foundations The first step is to create the main document structure. This contains the head and body sections. The head section is used to load the external stylesheet we start to create in Step 4. The body section is used to contain the website content, which will be defined in Step 2. 2. Set navigation controls The navigation controls are made from regular links contained within a <nav> tag. Each link references a container ID to trigger their content’s presentation. Unlike regular link references, these links will not trigger a new page reload – just the presentation of the referenced container ID. 3. Add main content Each of the pages are stored inside an <article> container, which themselves are stored inside the <main> tag. This enables each page to…

Although a wider team from both parties influenced this venture, only a small creative team at Thinking Juice led this project. This approach ensured the highest attention to detail and consistency was maintained across the site, while enabling the inclusion of new creative ideas where applicable. Thinking Juice always welcomes a fresh pair of eyes to their projects, as this enables for a greater understanding to be achieved and in turn, better creative results. An extensive amount of work went into the design process and Thinking Juice ensured its development team had full understanding of the project before it was handed over to them. This was achieved by full desktop designs being supplied including interactions, hover states, additional slides in hero banners and through responsive design. Working alongside the development…

Typography meets typology in this striking experiment in which the world’s handwriting was harnessed to bring about a global average. In celebration of the most popular pen in history, we worked together with DDB Tribal Düsseldorf to create a typeface that could be considered as universal as Bic’s Cristal ballpoint pen. Our idea was to crowdsource handwriting contributions from around the world and combine them into a single typeface that could be explored through various demographics. The website crowdsourced more than a million contributions in less than a month and is still one of our all-time favourite productions to date. This project offers a good example of what creative digital production entails. DDB Tribal came to us with a great idea but it was still searching for the right execution.…

Styles and markup can be programatically defined to create stunning pieces of art. Ana Tudor is at the forefront of this renaissance. She combines using HTML and CSS preprocessors (Haml and Sass respectively) to create beautiful geometric animations. The key to success with these is a firm understanding of both the tools used and maths. Combining animations with Sass’ maths functions like sqrt, pow, cos and so on creates concise, readable code that would simply be unwieldy and painstaking when using CSS alone. Similarly, using an HTML preprocessor like Haml makes writing repetitive markup a doddle. Here’s one of Ana’s examples from codepen.io/thebabydino/pen/DKaLo: This snippet compiles to just over 1,400 lines of HTML but by using a preprocessor we will see the thinking behind it much clearer than when we…

A CSS feature called Filters enables you to change the appearance of images. As it’s CSS you can animate them and control them with JavaScript. The built-in filters include blur, brightness, contrast, drop-shadow and much more. You can even chain them together or apply an SVG filter like so: ‘url(“filters. svg#filter-id”)’. These are intensive so using many on a page will cause browsers to stutter. Techniques like lazy loading and further browser optimisations should alleviate this. Each filter accepts its own unit, for example the following is wrong: ‘invert(75deg);’ but ‘hue-rotate(75deg)’ is perfectly valid. Percentages and decimals are interchangeable and work for most filters. Although not widespread, the technique is supported in 82 per cent of browsers today except for Opera Mini and Internet Explorer 11 (Edge supports it). SVG…

Processing images is simple and difficult at the same time: while the individual operations tend to be primitive, getting the framework and the parameters right is a science of its own. Well-done shader code has made the difference between an average-looking and an impressive image in multiple cases. So far, images in websites were – by and large – downloaded piecemeal. The users saw what the web designer exported from PhotoShop or GIMP, but doing adjustments at runtime was difficult. Custom solutions based on Canvas elements and JavaScript code tend to be slow. This is caused by the enormous amount of pixels involved; if image editing is not accelerated by a GPU, it brings down even the fastest of processors. CSS filters aim to work around this problem. They provide…

User interfaces are something that we encounter every day. When it comes to tools, there are countless applications and programs that claim to be the most efficient tools to create the best UI. But how can these programs create the best UI every time? There’s more to it than just creating something that looks good, it has to work well and become instinctive to its users. In this section we’ll delve into the popular industry tools used by professionals to ensure that UIs work well. We’ll take a closer look at Sketch, a tool that is seen as the underdog in the design world. The indie design app is really making waves and pushing forward a different way of designing interfaces. With an intelligent way of working faster, an impressive…

WINDOWS 10 The handy Snap feature, Cortana’s upgraded functionality and DirectX 12 support are just some of the key features of the definitive Microsoft Windows experience. MICROSOFT EDGE The browser that is lean, fast, secure, standards-friendly and forward-thinking. Try out the very latest specifications and be ready for the future. INTEL XEON E3-1505M For professional-level design and development work, you’re better off with a professional processor. Mobile Intel Xeons make working with power-hungry libraries easy. NVIDIA QUADRO M1000M Why settle for only one display? Professional GPUs are more than capable of getting you up and running with multiple screens – perfect for any creative. TIME SAVED Increased power and a better optimised operating system in Windows 10 make for a more efficient and, ultimately, far more productive design/development workflow –…

Ever wanted to develop a native app but have been put off by learning a new language and ecosystem? Enter the Ionic framework, which lets you apply JavaScript knowledge to build hybrid apps. Ionic offers other services to build APIs, a WYSIWYG editor, push notification handling, analytics and more. We’ll be concentrating on building with the core framework. Ionic is fast but still not as performant as building natively; this makes it well suited for prototyping or delivering an MVP. Ionic was released in 2013 by a company called Drifty. Since then it has seen increasing adoption due to its ease of use and modern toolchain. It also looks gorgeous out the box and isn’t opinionated about the editor you use like some similar mobile frameworks. Ionic is powered by…

How do you consume your content on the web? Desktop? Tablet? Smartphone? Smartwatch? All of them is probably the answer but mobile, typically smartphones, is the user’s weapon of choice. If you want to read the news on the train, the bus, in the car or even on foot the chances are you won’t have a desktop to hand. There is no doubt that the desktop still has its place in the world of browsing, but as figures show mobile is where its at. According to Ofcom the proportion of adults who personally own/use a mobile phone in the UK is 93 per cent, and 66 per cent of these are smartphone owners. To reinforce the mobile usage message 16 per cent of adults live in a mobile-only home, and…

01. Waza Amp bit.ly/1Q2ORVq Moody black-and-white colour palette and classy product shots. 02. Poignee poigneedemainvirile.com Clever masks reveal key points of scrolling. 03. Game Of Scroll gameofscroll.citroen.fr/FR/fr Background video combined with attention-grabbing transitions. 04. Nation wearenation.co.uk A single colour palette combines with simple but well-thought-out animation. Graphics Jamie Clarke Type jamieclarketype.com A gorgeous collection of illustrative, intricate and decorative typefaces that showcase the beauty of stunning typography. Colour picker Sunny Day bit.ly/1VhPBi2 Typesetter TTMoons myfonts.com/fonts/type-type/tt-moons From thick to thin, this elegant font is ideal for storytelling. Bobo bit.ly/1qvA7Kj A caps-only hipster sans font. Add a touch of the different to designs. Thematic MyBag demo2.transvelo.in/mybag A simple, smart and stylish theme. It’s great for those who are looking to promote their brand and product.…

“It’s important to consider who your audience is” When we started dConstruct back in 2005, we were only the second digital design and technology conference in the UK (the other being @media) and only one of a handful around the globe. Jump ahead to 2016 and there are countless conferences spanning across both the year and the globe. The success of today’s range of design conferences is a notable sign that the industry is thriving, and for those looking to attended to learn, develop and network, there is a lot of choice. So, what’s the key to planning a conference that really draws in visitors and leaves them feeling as though their money and time was truly well spent? I’ve been organising events since the start of my career, stemming…

“A/B testing with Optimizely helped us optimise” Redesigning a website that a company’s livelihood depends on is a daunting task. For us – an independent, ad-supported tech media company pulling about ten million pageviews a month – a steep enough decline in conversion could be catastrophic. This realisation makes you think twice about what you’re changing and why. While some say evolution is better than revolution, years of accumulated design changes can lead to an incoherent patchwork begging for consolidation. When we set out to redesign our news platform late 2014, this was among the top reasons. Other reasons included a new content strategy, our desire to run a custom full-screen ad unit and the general realisation that a company covering cutting-edge technology should look pretty sharp itself. A great…

“The Dieseljet 625 would be my choice. This is a practical and adrenaline-fuelled rocket, perfect for lazy afternoons in the bays and for buzzing around the coast.” GUY STRADLING DIGITAL DIRECTOR “I’d have a Sportjet 460; not only is it an unbelievable watersports craft, it also has seats that convert into a sunbathing pad. Obviously I’d need a built-in ice bucket for a bottle of ice cold Chablis or two!” LAURA SINGLETON ACCOUNT MANAGER “A Turbojet 325 customised by my kids specifically for summer treasure hunts in Poole Harbour sounds pretty perfect.” STEWART AUSTIN HEAD OF DESIGN “Dieseljet 565 Sport – great size without excess. Sleek, carbon black with a matte white trim, it oozes sophistication with a hint of fun, perfect for nautical adventures. You get a Captain’s hat…

Rebecca Veater Technical director at Elixel “The more refined the CSS specification gets the quicker and easier it becomes to complete more complex styling tasks. This is particularly true for form elements. Infamously difficult to control, these are now becoming more and more adaptable as CSS matures with selectors such as :indeterminate, :placeholder-shown and :invalid.” Preprocessors like PostCSS, Sass and Less mean that many people don’t directly write CSS. Requiring styles from within JavaScript and relying on tools to fill in browser support so you don’t have to – it’s a brave new world. CSS4 doesn’t actually exist, not as a monolithic specification describing what ‘CSS4’ is. What we do have are modules which describe separate functionality. This is the same way CSS3 was organised and helped browser vendors to…

Many of the recent changes in CSS haven’t come from the language at all but in the way we interact with CSS and use it. Over the years there have been a few exciting CSS modules (Grid for example) that you want to use immediately but can’t because it doesn’t have good browser support. A new W3C task force has been set up to look into ways to give developers access to the underlying styling and layout processes that browsers use. With this power at our disposal we could say goodbye to cross-browser differences and add new features not yet available in the browser. The working group is in its infancy but current API proposals are for: Parser, Properties and Values, Paint, Layout and a CSS Typed OM. The CSSOM…

ATOMS The smallest building blocks of the site, atoms can’t be broken down without losing its meaning. Atoms include individual input elements, paragraph tags, form labels and so on. Atoms can also include non-tangible elements like animations, colour, font stack and other properties. MOLECULES Made up of two or more atoms, molecules should be “relatively simple groups of UI elements functioning together as a unit”. Molecules give atoms purpose beyond what they can achieve by themselves, like a label next to a form input. Thinking like this encourages you to think and build in small, reuseable chunks. ORGANISMS We move now to organisms, which consist of molecules and atoms to form distinct areas of an interface. These are more complex than molecules; they shape regions like headers and footers. They…

With mobile traffic now accounting for the majority of web viewing, thinking ‘web first’ has become the industry standard. When it comes to mobile viewing, user behaviour is noticeably different to that of desktop browsing. Mobile users don’t hang around for more than a couple of seconds waiting for pages to load. Mobile speed is therefore extremely important for building and maintaining a mobile user base. This is where Google’s Accelerated Mobile Pages comes into play. AMP is a strict and feature limited extension of HTML, focused solely on speed. So how does it do it? Firstly by limiting features that are known to slow down a browser, for example limiting JavaScript, as no custom JavaScript code is allowed in AMP. Another way AMP speeds things up is by replacing…

Put simply, a good user interface is any interface that results in you being able to achieve your goal, without training, question or frustration. It should be more or less invisible. A good user interface shouldn’t stand out as something that appears to be ‘designed’ at all. In that regard it’s something that is remarkably humble. It enables you to do the job that you want to do, without considering for a moment that it should do any more than that. We’ve all suffered the work of badly designed objects or interfaces whether that is an impossibly small button or a counterintuitive finger motion, and this is usually due to a lack of care, or a wanting from its designer to make something more than it should be. The irony…

Windows 10 is a significant step towards your operating system, integrating seamlessly into your busy development schedule. Sporting everything you could ever need to keep yourself organised and working at maximum efficiency, it’s an operating system with your personal needs at heart. By taking advantage of exciting new functions like the Snap feature, which allows you to snap up to four different apps into the four corners of the screen, you’ll discover new ways to streamline your workflow. Approaching deadline? Snap your emails to the corner of the screen and remain client facing, while still keeping an eye on your code. Need to see a webpage preview? Snap your web browser and code away without the need for switching between windows. As designers and developers, we’re always looking for ways…

“Starting on the outside, the case feels solid and well built. Inside the carbon fibre is smooth, warmer to the touch than alloy and, dare I say, more appropriate. The 4K UHD screen is beautifully clear and bright, and best of all – it’s touchable. It’s such a useful enhancement for when you want to make quick adjustments or jump to things with gestures as you’d expect. “Boot time is quick, as is load time for demanding apps including 3ds Max for 3D work. The redesigned battery charger ensures you can take the Dell Precision 5510 out at meetings free of fear. It has all the sockets you could ask for. “Windows 10 is so quick, responsive and able to deal with a lot of different things at once. The…

“Fasthosts keep over 1 million domains running smoothly and ensure over 42 million emails are delivered safely each day” Featured host: fasthosts www.fasthosts.co.uk 0808 1686 777 About us Fasthosts are UK based and operate 24/7 from their dedicated UK data centres. They keep over 1 million domains running smoothly and ensure over 42 million emails are delivered safely each day. All of their services can be self-managed through the award winning Fasthosts Control Panel. Services include Domain Names, Web Hosting, Business-Class Email, Dedicated Servers and Cloud Servers. They also maintain a highly successful reseller channel. Fasthosts is part of the United Internet Group who manages around 42 million customer accounts at five data centres on around 70,000 servers. It is one of the largest hosting companies in the world. What…

To get access to FileSilo, please visit www.filesilo.co.uk/webdesigner 01 Follow the instructions on-screen to create an account with our secure FileSilo system, or log in and unlock the issue by answering a simple question about the magazine. You can access the content for free with your issue. 02 If you’re a print subscriber, you can easily unlock all the content by entering your unique Subscriber ID. You can find this on all correspondence from Imagine Publishing, including the clear plastic envelopes your magazine gets delivered to your door in every month. 03 You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you use a desktop to download content, as you may not be…