Table of contents for No. 264 in Web Designer

“Everyday websites and apps should not only be continuing mobile-centric design, but focusing on mobile-centric UX, too” 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 Are you ready for UX today? Ever been stuck in an endless circle trying to find an exit from a page? Ever purchased a product and sat there wondering is that it? The user experience can be frustrating, very frustrating. UX is ever evolving – remember how you used to search before voice search was introduced – and as designers and developers we need to keep up with the latest innovations and techniques In our lead feature on page 42, UX researcher Rebecca Hugo takes a closer…

Need an instant hit of Web Designer? Check out our digital specials. The Web Apps Handbook Volume 2 and The Developer’s Guide to JS reveal 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. We cherry-pick a collection of the best animation and 3D-related techniques to add interest to any project. Plus, check out Advanced Angular, 20 Quickfire HTML & CSS Techniques and Amazing Websites and How to Build them Vol 04. 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.…

An Event Apart bit.ly/2spflAN An Event Apart Chicago is three days of intense focus on digital design, UX and more. Speakers include biggest in the business. React Rally www.reactrally.com A two-day single-track conference for developers who like to use Facebook’s React.js and React Native. Summer Camp bit.ly/2sEGA69 UX, PHP and JS hands-on web development and web design workshops offer practical experience and knowledge. TypeCon www.typecon.com Love type and typography? If you do then check out this conference for everything that is type related. Design Week bit.ly/1oiNLiJ An exclusive program to learn best practices and methods, design strategies and much, much more from the experts.…

1. The HTML document Start the project by initiating the HTML document. This consists of the HTML container, which holds the head and body sections. The head sections is responsible for storing the non visible ‘descriptive’ content and links to external resources such as the CSS file. Visible content is placed inside the body section – as demonstrated in steps 2 and 3. 2. Navigation content The first page element is the content navigation, which consists of a nav container that holds a series of links. Each link references a page article container through its ID attribute. The use of the nav container for navigation links has benefits for both SEO and CSS styling without the need to add complexity to the HTML. 3. Main container Main is used as…

CSS Custom Properties, commonly known as CSS variables, have been steadily making their way into browsers for some time now. With the release of Edge 15 back in March, they are now supported by all major modern browsers. This means that for projects which aren’t burdened by having to support legacy browsers such as Internet Explorer, CSS variables can be considered – for all intents and purposes – safe to use. Many developers already use variables with preprocessors such as SASS or LESS as a means of reducing code repetition. Native CSS variables work in largely the same way, but don’t require any additional build step, cascade like a regular CSS property, and most importantly, are available at runtime. These benefits give native CSS variables an edge over their preprocessor…

“When you are ready to purchase hosting, check that you have enough resources” Featured host: tidyhosts www.tidyhosts.com / 05603 674610 About us Tidyhosts has become a leading cloud hosting provider throughout the world. It boasts a feature-rich selection of services including domain registration, shared web hosting, WordPress hosting, hosted exchange email, cloud virtual servers and media streaming. Its passion and drive for success has gained it a highly reliable and trusted reputation from its customers, making it the number one for hosting services. Founded in 2004 by three developers who wanted to build hosting infrastructure for developers – years on, the company has expanded to offer much more. What we offer • Domain names – Simple domain registration with a large choice of TLDs • Shared web hosting –…

VIDEO MASKING WITH SVG Learn how to add video to text titles with SVG and Clip Path INTERACTIVE VISUALISATION Unleash the power of three.js to create a dynamic environment TOP SEO TIPS TO BOOST RANKINGS A collection of essential advice on how to improve your page position YOUR JAVASCRIPT ISSUES SOLVED Discover the must-know answers to today’s big JavaScript problems Visit the WEB DESIGNER online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials ALL IN YOUR NEXT WEB DESIGNER Issue 265 on sale Thursday 17th August 2017…

01. Marpi: Demos demo.marpi.pl A must-see collection of web 3D animations to enjoy and interact with 02. Oddboy oddboy.nz/home An interactive 3D text logo set against an infinite scrolling background 03. Thomson & Scott www.thomsonandscott.com Bubbles and more bubbles inside the text title instantly portray the brand message 04. Ammunition Group ammunitiongroup.com A simple scrolling site with a great use of colour and photography Graphics Apps Icon Collection bit.ly/2spQ0ST A gorgeous and colourful collection of app icons from the talented hand of Zivile Zickute. Check out the collection. Colour picker Empress bit.ly/2s5bYve Typesetter Idler Pro bit.ly/2spPm7Q Make a statement with an upgraded version of the layered type family Idler. Use Detail (shown) to add instant impact to text. WordPress Ecologist ecologist.mikado-themes.com Big fullscreen hero images, bold typography, clean layouts and…

“CSS Grid opens our eyes to the possibilities of truly two-dimensional layouts with dramatically simpler and more semantic markup” 2017 is the year of the grid. When Firefox, Safari, and Chrome all turned on the new CSS Grid layout spec within a few short months of each other in early spring, it was like Willy Wonka’s chocolate factory opened up for the web world. Whereas traditionally web layouts think in “1 dimension”, with tight control horizontally and far less control vertically, CSS Grid opens our eyes to the possibilities of truly two-dimensional layouts with dramatically simpler and more semantic markup. CSS Grid is the future, but sadly for production websites it is still the future. Despite the coordinated leaps forward among Firefox, Safari, and Chrome, a combination of Microsoft’s Edge…

1. HTML document definition The project is initiated with the construction of the HTML document template. This consists of the HTML document container used to store the body and head sections. While the head section stores descriptions of the document and links to external JavaScript and CSS resources, the body is used to store the visible content created in steps 2 and 3. 2. Navigation content The first part of the content is the navigation. Navigation items are links that reference the ID of a content section to call into view. All of these links are contained within a ‘nav’ container – specifically used in HTML5 for navigation. The use of the ‘nav’ container has advantages for referencing via CSS without adding complexity to the HTML. There are also advantages…

What’s important to understand is that all of this might actually sound rather obvious. “Well of course you’d test with real users,” you cry. So you can scoff all you like that this is teaching your grandmother to suck eggs, but if it was then we wouldn’t be struggling to find the ‘Add to Basket’ button or being stuck in a never-ending loop with a chatbot that just wants to help. The fact is that while we all think that we’re doing these things, or at least say that we are, things aren’t working out quite the way as planned and user experience is still not the experience we want for our users. And with the introduction of new technologies, expanding markets, and easier access to not only use the…

SASS is powerful tool which brings many features from other programming languages into CSS — such as functions, variables and loops — as well as bringing its own intuitive features such as mixins, nesting and partials to name a few. Today we’ll be creating social icons using SASS loops, mixins and functions. We’ll also be utilising the powerful nesting available in SASS. We’ll be creating a list in SASS to generate our social icons, which will consist of — at first — the classname, font reference and colour — and later the tooltip. And we’ll be using mixins to create reusable Media Queries and creating a function to turn a pixel value into an em value. To do this we’ll also be creating a variable for our base font-size. There…

Current item index The navigation index number of the currently viewed item is clearly shown to the user as part of the visible content display. Scrollable navigation The navigation panel can be scrolled to reveal more items, hence allowing unlimited items to be placed within the navigation area. Menu control icon This icon changes between the hamburger menu and close ‘x’ symbols to indicate whether clicking/tapping will open or close the menu. Item index numbers Navigation items are shown with their associated index number. Useful to allow users to describe a link by its index number. Navigation is an important element for the user experience of digital content. Effective navigation design allows users to quickly find the content they seek, while minimising the risk of them abandoning your website in…

“Europe’s #1 developer boot camp, running highly selective classes of our offline course every six weeks, and a remote course every 12 weeks .” Featured: Makers Academy www.makersacademy.com Twitter : @makersacademy Facebook: MakersAcademy 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…

Presiden bit.ly/2sHSiwV A multitalented contemporary theme built to make people purchase. Choose from ten different layouts. Voltage bit.ly/2ukvDsk Get your very own electronics and gadgets superstore with this professional-looking theme. Plenty of options. Mr Kofii bit.ly/2tci0gw A coffee-themed template that sells coffee-based products. If you want to sell anything coffee related, start here. Claue bit.ly/2sBbNvZ A modern and clean store with a host of homepage layouts. Includes store locator layouts and other useful pages. Organie bit.ly/2sBz7JW A Shopify Sections-ready theme with a focus on organic produce. Offers a selection of homepage layouts.…

1. VALIDATELY  validately.com Remote testing, for mobile, too. 2. OPTIMAL WORKSHOP SUITE  www.optimalworkshop.com Usability research tools for all needs. 3. UXPIN  www.uxpin.com Wireframe, collaborate and listen. 4. LOOP11  www.loop11.com Online remote testing. 5. SILVERBACK  silverbackapp.com The Mac Daddy of usability testing. 6. OPTIMIZELY  www.optimizely.com Experiment with A/B and gain control. 7. CRAZY EGG  www.crazyegg.com Go hot with heat maps. 8. UX RECORDER  www.uxrecorder.com Say oh yes, iOS, with this mobile testing platform. 9. INSPECTLET  www.inspectlet.com Voyeurism at its best with live recorded data. 10. A PEN AND PENCIL Go old school and get sketching.…

The web is not really known for its organic shapes. Divs and page structural elements are rectangular by their nature, so making designs feel more organic always relies on the content that you put inside those building blocks. This tutorial is going to take one of those rectangular building blocks, the canvas element, and programmatically create growing, organic lines from text. This would make an excellent website header that would be slightly different every time it loads and also is perfect for any organic themed site. In fact, simply changing the colour of the lines to green and you would instantly achieve the effect of growing vines. The project will make use of the JavaScript library P5.js, which is a popular library for manipulating the HTML5 canvas. The library is…