T44u 2015, web development best practice

Defining Digital Engagement for Higher Education

Front End Development Best PracticesWhat you should keep in mind when

developing for TERMINALFOUR

Dave Larkan – Web Developer

Defining Digital Engagement for Higher Education

Front End Development Best PracticesWhat you should keep in mind when

developing for TERMINALFOUR

Dave Larkan – Front End Developer

Defining Digital Engagement for Higher Education

Front End Development Best PracticesWhat you should keep in mind when

developing for TERMINALFOUR

Dave Larkan – Really Front – Front End Developer

• Design Systems

• Typography and Webfonts

• Using CSS pre-processors

• Performance

• Images and the modern web

• Questions, comments and abuse

What are we talking about today?

TERMINALFOUR – Front End Development Best Practices

TERMINALFOUR – Front End Development Best Practices

Before I start…

TERMINALFOUR – Front End Development Best Practices

Design Systems

TERMINALFOUR – Front End Development Best Practices

A design system is a definition of the architecture, content, visual, and supporting assets

and templates to produce and/or sustain a consistent andeffective product experience.

– Nathan Curtiseightshapes Design

TERMINALFOUR – Front End Development Best Practices

A design system is everything that makes up your product

– Mark OttoGitHub

TERMINALFOUR – Front End Development Best Practices

• Typography

• Layout and Grid System

• Colors

• Icons

• Components

• Coding Conventions

• Voice and tone

• Style Guide

Everything?

TERMINALFOUR – Front End Development Best Practices

• Basically, a design system is a model by which you catalogue and define your design into its building blocks

• Organisation & Maintainability

• Ability to give an Overview

• Designing for modules, not pages.

TERMINALFOUR – Front End Development Best Practices

• Atomic Design

Hundreds of ways to do this

TERMINALFOUR – Front End Development Best Practices

What is atomic design?

• Atoms

•Molecules

• Organisms

TERMINALFOUR – Front End Development Best Practices

• The smallest level building blocks.

• Can’t be broken down without losing their meaning.

Atoms

TERMINALFOUR – Front End Development Best Practices

• Groups of atoms bonded together which take on new properties as a result.

• Groups of elements that function together as a unit

Molecules

TERMINALFOUR – Front End Development Best Practices

• Groups of molecules (and possibly atoms) joined together to form a distinct section of an interface.

Organisms

TERMINALFOUR – Front End Development Best Practices

•Molecules and Organisms are your Content types.

• Fewer Page Layouts

•More Content Types

TERMINALFOUR was built for this

TERMINALFOUR – Front End Development Best Practices

Typography and WebFonts

TERMINALFOUR – Front End Development Best Practices

• Your content is the most important part of your site.

•What font you use defines how you’re expressing that content.

• If the words you put on the site are your voice, typography is the tone of that voice.

It’s all about good type

TERMINALFOUR – Front End Development Best Practices

•Webfont service

• Can be called asynchronously

• FOUT or FOIT

Typekit

TERMINALFOUR – Front End Development Best Practices

• Preview

• HTTPS (use href=“//fonts.googleapis…” and not href=“http://font.googleapis…”)

• Don’t support all font features

• If you’re using REM units and using a polyfill for IE8 support, Google Fonts will break.

Google Fonts

TERMINALFOUR – Front End Development Best Practices

Using CSS pre-processors

TERMINALFOUR – Front End Development Best Practices

• CSS lacked features

• CSS extentions like LESS and SASS

What’s a pre-processor

TERMINALFOUR – Front End Development Best Practices

SASS

TERMINALFOUR – Front End Development Best Practices

CSS

TERMINALFOUR – Front End Development Best Practices

Performance

TERMINALFOUR Confidential – t44u 2015

Average Page Sizes

TERMINALFOUR – Front End Development Best Practices

Why does that matter?

•More people are connecting over mobile devices now more than ever before

• Stable, fast and reliable connections are not a gaurentee• Even big cities have black spots

• Rural areas

• Trains and underground systems

• Google favours performance optimised sites in search results

TERMINALFOUR – Front End Development Best Practices

How can I make this better?

• Performance Budget

•Make fewer requests

•Make sure your images are optimised

•Minify all the files you can

• Enable GZIP on the server

• Test for slow connections

TERMINALFOUR – Front End Development Best Practices

How can TERMINALFOUR help?

• Image broker

• Auto variants

TERMINALFOUR – Front End Development Best Practices

Images and the modern web

TERMINALFOUR – Front End Development Best Practices

How do images even work these days?

• Srcset vs <picture>

•What’s the difference?

TERMINALFOUR – Front End Development Best Practices

Srcset

• Attribute on the <img> tag

• Allows the browser to decide what image to use.<img src="small.jpg" srcset="large.jpg 1024w, small.jpg 320w" sizes="100vw" alt="An example image" />

• Images always the same aspect ratios

TERMINALFOUR – Front End Development Best Practices

Picture

• A whole new element

• User decides what image to use<picture> <source media="(min-width: 650px)" srcset="large.png"> <source media="(min-width: 465px)" srcset="medium.png"> <img src="small.png" alt="Happy owls”></picture>

• Images needn‘t be the same aspect ratios

TERMINALFOUR – Front End Development Best Practices

What can TERMINALFOUR do to help?

• Automatically create images with srcset for image optimisation reasons.

• Use autovariants and programmable layouts to make better images.

•When it comes to the picture element you HAVE to let users choose two or more images.

TERMINALFOUR – Front End Development Best Practices

Summary

• Design Systems

• Typography and Webfonts

• Using CSS pre-processors

• Performance

• Images and the modern web

TERMINALFOUR – Front End Development Best Practices

Questions?