T44u 2015, web development best practice
Download as PPTX, PDF2 likes477 views
The document outlines best practices for front-end development within the TerminalFour platform, focusing on design systems, typography, CSS pre-processors, performance, and image optimization. It emphasizes the importance of a cohesive design architecture and highlights techniques for enhancing website performance and visual consistency. Key concepts discussed include atomic design, the role of typography, and modern image handling strategies.
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
- 5. Before I start… TERMINALFOUR – Front End Development Best Practices
- 6. TERMINALFOUR – Front End Development Best Practices Design Systems
- 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.
- 11. • Atomic Design Hundreds of ways to do this TERMINALFOUR – Front End Development Best Practices
- 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
- 17. TERMINALFOUR – Front End Development Best Practices Typography and WebFonts
- 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
- 21. TERMINALFOUR – Front End Development Best Practices Using CSS pre-processors
- 22. • CSS lacked features • CSS extentions like LESS and SASS What’s a pre-processor TERMINALFOUR – Front End Development Best Practices
- 23. TERMINALFOUR – Front End Development Best Practices SASS
- 24. TERMINALFOUR – Front End Development Best Practices CSS
- 25. TERMINALFOUR – Front End Development Best Practices Performance
- 26. Average Page Sizes TERMINALFOUR Confidential – t44u 2015
- 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
- 30. TERMINALFOUR – Front End Development Best Practices Images and the modern web
- 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
- 36. TERMINALFOUR – Front End Development Best Practices Questions?
Editor's Notes
- #2: 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.
- #3: 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?
- #4: 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.
- #6: 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!
- #7: Start your project with a design system in mind. So what do I mean when I say “Design Systems”?
- #8: That’s a mouthful! … ... Mark Otto from GitHub describes it as:
- #9: Previously at Twitter, creator of Bootstrap
- #11: 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.
- #12: 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.
- #13: Metaphor breaks down…
- #16: 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.
- #17: 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.
- #19: Choosing a good typeface is something I recommend. Some things to consider when building in TERMINALFOUR
- #20: 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.
- #21: Protocol relative URL Issues with REM units
- #23: CSS is showing it’s age. Missing features like variables and loops.
- #24: Run through how this works
- #25: 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.
- #27: 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.
- #28: 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
- #29: FileOptimizer – Windows ImageOptim on Mac
- #30: Also, minify your HTML if you really want but it may be more hassle than it’s worth.
- #32: 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?
- #33: 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…
- #34: 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.
- #36: 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,