Innholdsfortegnelse for No. 268 i Web Designer

“The <g> element in SVG can be used much like a div in HTML; we need to wrap each of our bubbles (which are already in a group) in a group tag” 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 Recreate animations with CSS CSS and animation have grown to become good friends on the web. Need to add a little dynamism to a project? Then give CSS a call. There is no denying that animation can take a project or design to a new level. But, you need to think very carefully about how it’s used. In our latest lead feature (starting on page 42) we have scoured the web looking…

01. K’gari www.sbs.com.au/kgari A simple canvas interspersed with neat typography and animation 02. GUS-TRANS gus-trans.com This a perfect example of taking a less traditional subject and making it interesting 03. Beymen Cosmos cosmos.beymen.com Watch worlds go around and admire the zooming animations and more 04. Inculerate inculerate.com Clever user interaction using real-life graphics to enhance the story Graphics Nic Cester – Psycho bit.ly/2A1vYmR Simple but beautifully crafted illustrations from the hand of T Wei. Colour picker Comments are back bit.ly/2iPgbU6 Typesetter Heading Pro bit.ly/2zUoJMo A geometric condensed typeface with high legibility. Created to optimise space on the printed page and on the screen. WordPress Band bit.ly/2lAM43y In a band? Need a stylish site quickly? Check out the variations of this well-designed theme.…

“The new Gutenberg editor aims to bring everything together in a more modern and easy-to-use layout system” The thing about open source development is that it’s much like natural evolution: it evolves and changes in the environment. Change is never easy, but change is necessary and while the current WordPress Editor is simple, relatively easy and painless – it’s also basic and a bit boring. It’s become established… or in other words, it’s become really old. Little has changed in a decade. We’ve got used to its idiosyncrasies and we’re now blind to its shortcomings. Anyone who has edited content on Squarespace or Medium will have found that the user experience is so much more smooth and intuitive. Thankfully, the WordPress Community has caught onto this and while it’s taken…

“LONDON’S SWEAR IS A FORWARD-THINKING MAKER OF “SNEAKERS” OR TRAINERS ON THESE SHORES” One of the biggest revolutions that the modern internet age has bestowed upon us all is the enthusiasm for ‘on demand’ services. The two-way, quick and convenient connectivity that the web provides for eCommerce is fundamental for delivering a much more personal approach. Entranced by the rapid-fire nature of purchasing digital wares including music, films, apps and certainly television, customers increasingly strive for that experience elsewhere. Our featured website project this month exemplifies this by making customisation central to ‘on demand’ selling, not of digital, but designer footwear. As a brand, London’s SWEAR is a forward-thinking maker of ‘sneakers’ or trainers on these shores, boasting two decades within the business. It’s new online shop front, built by…

After a lot of brainstorming and days where we would spend hours writing down catchy and not so catchy names, we eventually came back to the name we first wrote down, which was 51North Founded in 2008, Marcel Bold, Kamiel Meijers and Daan Kusters all studied Communication and Multimedia Design at Zuyd University of Applied Sciences in Maastricht. During those years’ it became clear that they all wanted to start their own company. Without any experience of working for a web agency Kamiel and Marcel teamed up and started a web agency called Webspun. Daan also started his own company, DPM Webdesign, which was more development orientated. After a few years of making Flash and HTML websites for small companies, they decided to merge into one studio, bundling their skills…

Typography has always played a major part in any designer’s arsenal of tools as they select the right typeface that will enhance the message and present the right context for what is being communicated. Over the past eight years, the web designer has had the ability to bring in custom typefaces to their design and have similar typographical control to those enjoyed by print designers. Taking a look at many of the sites that are featured as award winning or receiving ‘site of the day’ titles and you will soon notice that their use of typography becomes central to the design, allowing them to rise above their competition. This can range from animated letter forms, reactive movement to the user interactions, to bold use of type forms taking centre stage.…

GOOGLE MAPS Google Maps offers an immensely popular set of APIs which bring mapping capabilities, street view, navigation and more to millions of sites. Google offers a multitude of APIs by platform and function. The simplest are basic page embeds to display a map on a page, but there are also numerous JSON web services which enable you to, for example, receive a set of directions for navigation between locations. FACEBOOK Facebook offers something called the “Graph API” which enables website and apps to get data from and write data to Facebook. Working with the Graph API involves the representation of Facebook’s content as a set of nodes (and associated data fields) and edges in a graph structure. They also offer a Graph API Explorer which let authenticated users test…

“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…

LawKing bit.ly/2z32CXo This theme is aimed at lawyers, but the layout is smooth and well designed and makes it ideal for any type of company. Venda vendastudio.info/venda Smart, sassy and clean theme that focuses on the personal. Big images, contemporary fonts and great hierachy. Apress apressthemes.com Not sure what you want? This theme offers endless customisation options, giving what you want when you want it. Rigid bit.ly/2z4HqjI Into fashion and got something to sell? This eCommerce theme has multiple landing pages, all with class and on trend. Paragon Lite bit.ly/2gZTJH4 This theme is for creatives/ designers looking to get a portfolio together quick. Neat and straight to the point.…

As a website becomes more complex, issues around site performance soon arise. While a lot of attention goes towards the initial page load, less emphasis is put on how it performs while in use. Users expect pages to work smoothly all the time. While browsers optimise what they can, it is not always possible to know what the developer’s intentions are soon enough to see any benefit. Great rendering performance is a delicate balancing act between HTML, CSS and JavaScript. They all play a part in how well a page performs at different stages. Too much work in any of these areas can grind everything to a halt. If we can take as much pressure from the main thread as possible, that will give it more time to respond to…

“Web development is a rapidly-changing environment, and there’s a continuous effort by standards bodies and browser makers to introduce new APIs to the web which make building sites and apps easier, or bridge the gap between the browser and native software. Following the latest progress and adopting new APIs when well-enough supported can make your own life easier, and ensure a modern experience for your users.”SIMON JONES Software engineering director WHAT MAKES SOMETHING AN API? WHAT IS THE CRITERIA TO BE AN API When you’re writing code in any language, you’ll almost certainly be using a range of APIs without knowing. In its simplest form, an API (Application Programming Interface) is a clearly defined specification for communication between two software components. APIs can take various forms, but will typically include…

GEOLOCATION API Let’s start with one that is well supported. You might have seen pages request permission to use your location already. The Geolocation API, accessed through the navigator.geolocation object, enables a site or app to determine the location of a user based on a combination of information such as GPS, wifi and mobile signal. It’s supported in all major browsers, although only usable with a connection over https. PUSH API We’ve touched briefly on the Push API already. Not to be confused with mobile push notifications, it enables web apps to receive messages pushed from a server, even if the application is not in focus or even if the application is not loaded. To do this, it depends very much on a service worker to be running in the…

“The Mozilla Developer Network (MDN) provides one of the most comprehensive sources of reference on web technology available” MOZILLA DEVELOPER NETWORK  https://developer.mozilla.org/en-US/ The Mozilla Developer Network (MDN) provides one of the most comprehensive sources of reference on web technology available. In addition to documentation of all the latest APIs, it also includes tutorials and code samples illustrating their usage. This is almost always a good starting point when learning something new. W3C  https://www.w3.org/standards/webdesign/script The W3C specifications aren’t always easy going, and probably aren’t for everyday usage. However, if you’re interested in some of the detail on the specifications, want to follow what might come in future but hasn’t yet been implemented in browsers, or are just curious about how the specs come about, it can be worth a browse. HTML5.ORG…

dotJS www.dotjs.io Tagged as The largest JavaScript conference in Europe. Come and see Brendan Eich speak. Decompress bit.ly/2znThdp Decompress is a community day for designers and developers. It is run by people that run CSSConf and JSConf. Front www.frontutah.com Inspiration and training for UX designers and product managers. In January there‘s a two-day product bootcamp. Agent Conf www.agent.sh Experts and industry leaders come together to showcase their work in ReactJS, React Native and more. Agile content conf bit.ly/2huQ8xP Two days: one for a conference, one for workshops. It’s all about finding content solutions.…

As is so often the case, a digital project doesn’t really stop dead on completion. Matter of Form continue to work post-launch with client SWEAR on materials and promotional wares. Duties here have included the formulation of creative ads, banners, the production of artwork for any upcoming media campaigns and indeed any site revisions. “We have also developed a strong strategic partnership which involves us revisiting aspects of the site for improvements,” begins Senior Account Manager Simone Strahle. “Add to this the conducting of user-testing and analytics etc, means we will work to continuously improve the flow of the customisation journey to iron out any friction points that may be experienced by the audience.” Such devotion to refining a delivered experience isn’t a rare phenomenon for the MOF team, far…

Demoing the app The app is demoed through the browser by placing an image of a phone on the screen, to give it the correct context for its use. Video demonstration The app has been screen recorded so that the video can demonstrate the augmented reality painting in location. App interface The way that the app works through the interface is shown clearly on the video of the screen. Mimicking the app The background of the web page has a HTML canvas element that allows the user to draw as they move their mouse. Standing out In order to show off the phone, it is placed on a bright background that also reflects the bright painting of the app. EXPERT ADVICE Creative background As the app is a painting app…

CANVAS & SVG  http://bit.ly/2h4za9q http://bit.ly/2wxqWfK Canvas and SVG are one of the most obvious examples of widely-used browser APIs. Both canvas and SVG expose a straightforward set of entry points and JavaScript functions to fulfil their respective objectives. These days we can add the more recent WebGL to the mix for 3D graphics, which we’ll look at later on. XMLHTTPREQUEST  https://xhr.spec.whatwg.org XMLHTTPRequest has for some time been the JavaScript API used to send asynchronous requests to a server. This can allow you to, for example, retrieve data from the server and update a page without having to reload the full page. Its name is an anachronism since it works with JSON as well as XML. It’s likely to be superseded by the more recent Fetch API over time. WEB SOCKETS…

WHAT DOES IT DO? GOOGLE CHROME HAS HAD A CONSOLE TAB KICKING AROUND FOR AGES. HERE’S A CLOSER LOOK Consoles can be used for different things: traditionally, web developers used them to output textual information which can be used for debugging or logging. Google’s approach to web consoledom centres on improving the existing features – due to the fact that console tabs have been around for ages, the concepts behind them can not be so bad. In fact, Google even went so far as to provide its mobile operating system with one of the most advanced logging features. If you ever used LogCat and have to go back to a lesser implementation, the pain stings. Due to this, Google focuses the work of its team on features that improve the…

“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 –…