In this session our web developer team lead, takes us through some best practice approaches to web development to ensure your websites are optimised for performance. He'll outline some quick wins to improve your websites today and also talk about some of the biggest offences in web development.
View the video presentation in full here: https://youtu.be/32J-5Y5yDS8
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
T44u 2015, web development best practice
1. Defining Digital Engagement
for Higher Education
Front End Development Best Practices
What you should keep in mind when
developing for TERMINALFOUR
Dave Larkan – Web Developer
2. Defining Digital Engagement
for Higher Education
Front End Development Best Practices
What you should keep in mind when
developing for TERMINALFOUR
Dave Larkan – Front End Developer
3. Defining Digital Engagement
for Higher Education
Front End Development Best Practices
What you should keep in mind when
developing for TERMINALFOUR
Dave Larkan – Really Front – Front End Developer
4. • 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
7. 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
and
effective product experience.
– Nathan Curtis
eightshapes Design
8. TERMINALFOUR – Front End Development Best Practices
A design system is everything
that makes up your product
– Mark Otto
GitHub
9. • Typography
• Layout and Grid System
• Colors
• Icons
• Components
• Coding Conventions
• Voice and tone
• Style Guide
Everything?
TERMINALFOUR – Front End Development Best Practices
10. 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.
12. TERMINALFOUR – Front End Development Best Practices
What is atomic design?
• Atoms
• Molecules
• Organisms
13. • The smallest level building blocks.
• Can’t be broken down without losing their meaning.
Atoms
TERMINALFOUR – Front End Development Best Practices
14. • 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
15. • Groups of molecules (and possibly atoms) joined together to
form a distinct section of an interface.
Organisms
TERMINALFOUR – Front End Development Best Practices
16. • Molecules and Organisms are your Content types.
• Fewer Page Layouts
• More Content Types
TERMINALFOUR was built for this
TERMINALFOUR – Front End Development Best Practices
18. • 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
19. • Webfont service
• Can be called asynchronously
• FOUT or FOIT
Typekit
TERMINALFOUR – Front End Development Best Practices
20. • 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
27. Why does that matter?
TERMINALFOUR – Front End Development Best Practices
• 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
28. How can I make this better?
TERMINALFOUR – Front End Development Best Practices
• 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
29. How can TERMINALFOUR help?
TERMINALFOUR – Front End Development Best Practices
• Image broker
• Auto variants
31. How do images even work these days?
TERMINALFOUR – Front End Development Best Practices
• Srcset vs <picture>
• What’s the difference?
32. Srcset
TERMINALFOUR – Front End Development Best Practices
• 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
33. Picture
TERMINALFOUR – Front End Development Best Practices
• 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
34. What can TERMINALFOUR do to help?
TERMINALFOUR – Front End Development Best Practices
• 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.
35. Summary
TERMINALFOUR – Front End Development Best Practices
• Design Systems
• Typography and Webfonts
• Using CSS pre-processors
• Performance
• Images and the modern web
Web developer. What does that mean?
That title’s about as much use as “Webmaster”.
In PS all the developers are “Web developers”.
Incredible team, huge and varied skill sets. No Jacks of all trade. Specialists with awareness and interest in the rest of the stack.
Front End Developer. Great. But what does that mean?
HTML, CSS? Sure.
What about Javascript Frameworks? Python?
Does being a Front End Developer mean you can design?
I’m interested in HTML,
in CSS,
in content,
in performance in browser,
in creating great experiences for the end user.
I need to define what I mean by Front End Development so you have an idea of what I’ll be talking about when I offer best practice advice.
Outlining best practices for the very front end. The design and development and integration into TERMINALFOUR.
I’m not suggesting anything I say here today is the one and only correct way to do things. If you disagree with any of the points I raise today that’s wonderful. Let’s chat about it!
Start your project with a design system in mind.
So what do I mean when I say “Design Systems”?
That’s a mouthful!
…
...
Mark Otto from GitHub describes it as:
Previously at Twitter, creator of Bootstrap
Organisation – working in a messy code base is the stuff of nightmares. Having this defined makes the messiness far less likely. Over time, new developers will be joining the project to fix bugs and add features. Proper guidelines and conventions allow people to do things correctly
Overview – having a design system in place allows you to see at a glance the “bigger picture” without needing to see an entire website
Effectively creating something like Bootstrap specifically for your project.
There are hundreds of ways to implement a design system. None of them are more correct than any other. Today I’m going to talk about one model in particular that I believe fits in particularly well with the TERMINALFOUR CMS.
Metaphor breaks down…
Can consist of similar or disparate molecule types. For example, above we have a logo, navigation and search form.
An events block organism could contain many of the same event molecules.
You’re no longer designing pages. You’re designing the building blocks for those pages. You no longer need many Page layouts. You just need to be able to drop your Organisms together to create new templates.
If you start your process with this approach it will make working in TERMINALFOUR a much neater and cleaner experience.
That’s it for design systems.
Choosing a good typeface is something I recommend. Some things to consider when building in TERMINALFOUR
Flash of unstyled text
Flash of invisible text
In the real world this is something to consider, if you use preview and your terminalfour server has no internet access this is a bigger issue.
Protocol relative URL
Issues with REM units
CSS is showing it’s age.
Missing features like variables and loops.
Run through how this works
CSS Pre-processors are incredible tools.
TERMINALFOUR doesn’t support them as of yet. That means you have to write your SASS or LESS well.
Think of the SASS inception rule. 4 layers deep MAX – try keep it to 3. NEVER extend.
The compiled CSS may be impossible to work with in TERMINALFOUR.
Ryanair’s new website – slowness is due to badly formatted SASS.
Their DOM is so large and their CSS rules so complex that modern browsers can’t keep up. That’s caused by bad SASS.
Their CSS file is 2.88MB uncompressed. The original DOOM game is under 2.88MB.
We crossed an impressive milestone this year. Average webpages have crossed the 2MB mark.
Almost twice what it was 3 years ago.
Mainly Images.
This is a problem.
Rural areas often have very large areas with bad or no connection
Never assume users will have a good connection
Gap between EDGE speed and 4G is large. Incredibly large.
Difference between 1MB and 2MB on 4G isn’t noticable. On EDGE it’s rage enducing.
People are likely to bounce off your site if pages take too long to load
FileOptimizer – Windows
ImageOptim on Mac
Also, minify your HTML if you really want but it may be more hassle than it’s worth.
HTML5 introduced both the srcset and the picture element. They both allow for responsive images on websites but how do they differ and how do I know when to use which?
Srcset is used when you’re happy to let the browser make the choice about which image it wants to download
If there is a case where the browser making the wrong choice would result in bad layout you should be using…
Picture is safe to use now because it must contain an img tag for fallback. This is used for art direction.
Example, a slider needs to use different aspect ratio on mobile sized screens, now that’s possible.
Design systems, why they’re good. How they can help you create a project that works well in the long term.
Typography and Webfonts, why typography is important and why you need to invest time in type. Some considerations for webfonts in Terminalfour
Using CSS pre-processors, the good and the bad
Performance – just scratched the surface. Hugely important topic in its own right. Come speak to myself or Gillian about this.
Images, unravelling the confusion with the new image tags and how and when to use the,