Web Layout Pitfalls and Solutions

Transcript

1. JÖRG NEUMANN | ACLUE
   ROBIN MÜLLER | ACLUE
   WEB LAYOUT
   PITFALLS &
   SOLUTIONS
   

   View Slide

2. THEMEN
   § Frontend Technologies
   § Mobile Development
   § Machine Learning
   § Consulting, Coaching, Training
   KONTAKT
   § Mail: Joerg.Neumann@Aclue.de
   § Twitter: @JoergNeumann
   THEMEN
   § Machine Learning
   § Frontend Technologies
   § Java Fullstack
   § Consulting, Training
   KONTAKT
   § Mail: Robin.Mueller@Aclue.de
   JORG NEUMANN ROBIN MULLER
   :
   :
   

   View Slide

3. SLIDES
   https://tinyurl.com/48xhcmmr
   

   View Slide

4. View Slide

5. WEB DESIGN PATTERNS
   PRINCIPLES
   § Predictability
   § Consistency
   § Responsiveness
   PATTERNS
   § Anatomy Patterns
   § Composition Patterns
   

   View Slide

6. WEB DESIGN PATTERNS
   SINGLE COLUMN LAYOUT MAGAZINE LAYOUT
   

   View Slide

7. WEB DESIGN PATTERNS
   CARD-BASED LAYOUT HERO LAYOUT
   

   View Slide

8. BEISPIEL: MASTER-DETAIL LAYOUT
   

   View Slide

9. View Slide

10. DEMO
    Master Detail Layout
    https://github.com/aclue-de/WebLayoutTalk_master-detail-app
    

    View Slide

11. Header
    Master View Detail View
    

    View Slide

12. TECHNISCHE UMSETZUNG
    

    View Slide

13. DEMO
    Flex und Grid
    https://github.com/aclue-de/WebLayoutTalk_master-detail-app
    

    View Slide

14. POSITIONIERUNG
    STATIC
    § Default Zustand
    § Folgt dem normalen Flow der Seite
    position:
    static;
    

    View Slide

15. POSITIONIERUNG
    RELATIVE
    § relativ zur eigentlichen Position im Flow
    § kann über top, left, bottom und right
    positioniert werden
    top: 24px;
    left: 32px;
    position:
    relative;
    

    View Slide

16. 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;
    

    View Slide

17. 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;
    

    View Slide

18. 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;
    

    View Slide

19. 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;
    

    View Slide

20. DEMO
    Positionierung
    https://github.com/aclue-de/WebLayoutTalk_master-detail-app
    

    View Slide

21. RESPONSIVENESS
    § RESIZE
    § REFLOW
    § REPOSITION
    § REDESIGN
    

    View Slide

22. RESPONSIVENESS
    MEDIA QUERIES
    § Media Type (optional)
    § Media Features (height, width,
    orientation, …)
    § Verknüpfung durch logische Operatoren
    (not, and und only)
    

    View Slide

23. 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)
    

    View Slide

24. DEMO
    Responsiveness
    https://github.com/aclue-de/WebLayoutTalk_master-detail-app
    

    View Slide

25. INTERSECTION OBSERVER
    SZENARIO
    § Es soll etwas passieren, wenn ein
    Element im Sichtbereich erscheint
    Observed
    Element
    

    View Slide

26. INTERSECTION OBSERVER API
    FUNKTIONSWEISE
    § Callback der ausgelöst wird, wenn ein
    Element im Viewport erscheint
    

    View Slide

27. 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
    });
    };
    

    View Slide

28. DEMO
    Intersection
    Observer API
    https://codepen.io/joergneumann/pen/LYgeozm
    

    View Slide

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

    View Slide

30. DEMO
    CSS Layout API
    https://github.com/JoergNeumann/houdini/tree/main/LayoutDemo
    

    View Slide

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

    View Slide

32. Q&A
    

    View Slide