Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Layout Pitfalls and Solutions

Web Layout Pitfalls and Solutions

Avatar for Jörg Neumann

Jörg Neumann

May 10, 2023
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. THEMEN § Frontend Technologies § Mobile Development § Machine Learning

    § Consulting, Coaching, Training KONTAKT § Mail: [email protected] § Twitter: @JoergNeumann THEMEN § Machine Learning § Frontend Technologies § Java Fullstack § Consulting, Training KONTAKT § Mail: [email protected] JORG NEUMANN ROBIN MULLER : :
  2. WEB DESIGN PATTERNS PRINCIPLES § Predictability § Consistency § Responsiveness

    PATTERNS § Anatomy Patterns § Composition Patterns
  3. POSITIONIERUNG RELATIVE § relativ zur eigentlichen Position im Flow §

    kann über top, left, bottom und right positioniert werden top: 24px; left: 32px; position: relative;
  4. POSITIONIERUNG FIXED § unabhängig vom eigentlichen Flow § relativ zum

    Viewport positioniert (scrollt nicht mit) § kann über top, left, bottom und right positioniert werden top: 120px; left: 60px; position: fixed;
  5. POSITIONIERUNG ABSOLUTE § unabhängig vom eigentlichen Flow § relativ zum

    nächsten positionierten Vorfahren im DOM oder zum Body (wenn nicht vorhanden) § kann über top, left, bottom und right positioniert werden top: 32px; left: 48px; position: relative; position: absolute;
  6. POSITIONIERUNG STICKY § unabhängig vom eigentlichen Flow § relativ zur

    Scroll-Position § Wechselt von relative zu fixed, wenn der angegebene Offset erreicht wurde § Offset kann über top, left, bottom und right definiert werden top: 24px; position: sticky; position: sticky;
  7. POSITIONIERUNG Z-INDEX § Positionierte Elemente können auch übereinander liegen §

    z-index gibt die Reihenfolge überlappender Elemente an § z.B. für Overlays z-index: 0; (default) z-index: 1; z-index: 2;
  8. RESPONSIVENESS MEDIA QUERIES § Media Type (optional) § Media Features

    (height, width, orientation, …) § Verknüpfung durch logische Operatoren (not, and und only)
  9. RESPONSIVENESS CONTAINER QUERIES § Seit 2023 für alle gängigen Browser

    verfügbar § Queries auf einzelnen Elementen § Container Type (size, inline-size, normal) § Container Name (optional)
  10. INTERSECTION OBSERVER SZENARIO § Es soll etwas passieren, wenn ein

    Element im Sichtbereich erscheint Observed Element
  11. INTERSECTION OBSERVER API let options = { root: window.document, rootMargin:

    "0px", threshold: 0.5, }; let observer = new IntersectionObserver(callback, options); document.querySelectorAll("*").forEach(element => { observer.observe(element); }); let callback = (entries, observer) => { entries.forEach((entry) => { // Each entry describes an intersection change // for one observed target element: // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time }); };
  12. CSS LAYOUT API HINTERGRUND § Mit eigener Logik in den

    Layout-Prozess eingreifen § Logik wird in Form von Worklets implementiert und registriert W3C STATUS § Status: First Public Working Draft Ausprobieren in Chrome • chrome://flags/ • Feature: "Experimental Web Platform features" einschalten
  13. FAZIT LAYOUT IST VIELSCHICHTIG § Layout-Strategie am Anfang definieren §

    Layout Patterns helfen! § Responsiveness immer im Hinterkopf behalten § Know your tools! § Special Use Cases -> APIs § Houdini bringt Flexibilität
  14. Q&A