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




Dave Larkan – Front End Developer




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


Before I start…


Design Systems


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


A design system is everything that makes up your product

– Mark OttoGitHub


• Typography

• Layout and Grid System

• Colors

• Icons

• Components

• Coding Conventions

• Voice and tone

• Style Guide

Everything?


• 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.


• Atomic Design

Hundreds of ways to do this


What is atomic design?

• Atoms

•Molecules

• Organisms


• The smallest level building blocks.

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

Atoms


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

• Groups of elements that function together as a unit

Molecules


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

Organisms


•Molecules and Organisms are your Content types.

• Fewer Page Layouts

•More Content Types

TERMINALFOUR was built for this


Typography and WebFonts


• 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


•Webfont service

• Can be called asynchronously

• FOUT or FOIT

Typekit


• 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


Using CSS pre-processors


• CSS lacked features

• CSS extentions like LESS and SASS

What’s a pre-processor


SASS


CSS


Performance

TERMINALFOUR Confidential – t44u 2015

Average Page Sizes


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


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


How can TERMINALFOUR help?

• Image broker

• Auto variants


Images and the modern web


How do images even work these days?

• Srcset vs <picture>

•What’s the difference?


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


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


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.


Summary

• Design Systems

• Typography and Webfonts

• Using CSS pre-processors

• Performance

• Images and the modern web


Questions?

t44u 2015, web development best practice

Technology