Web Layout Pitfalls and Solutions

Transcript

1. JÖRG NEUMANN | ACLUE ROBIN MÜLLER | ACLUE WEB LAYOUT PITFALLS & SOLUTIONS
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 : :
3. SLIDES https://tinyurl.com/48xhcmmr
5. WEB DESIGN PATTERNS PRINCIPLES § Predictability § Consistency § Responsiveness PATTERNS § Anatomy Patterns § Composition Patterns
6. WEB DESIGN PATTERNS SINGLE COLUMN LAYOUT MAGAZINE LAYOUT
7. WEB DESIGN PATTERNS CARD-BASED LAYOUT HERO LAYOUT
8. BEISPIEL: MASTER-DETAIL LAYOUT
10. DEMO Master Detail Layout https://github.com/aclue-de/WebLayoutTalk_master-detail-app
11. Header Master View Detail View
12. TECHNISCHE UMSETZUNG
13. DEMO Flex und Grid https://github.com/aclue-de/WebLayoutTalk_master-detail-app
14. POSITIONIERUNG STATIC § Default Zustand § Folgt dem normalen Flow der Seite position: static;
15. POSITIONIERUNG RELATIVE § relativ zur eigentlichen Position im Flow § kann über top, left, bottom und right positioniert werden top: 24px; left: 32px; position: relative;
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;
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;
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;
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;
20. DEMO Positionierung https://github.com/aclue-de/WebLayoutTalk_master-detail-app
21. RESPONSIVENESS § RESIZE § REFLOW § REPOSITION § REDESIGN
22. RESPONSIVENESS MEDIA QUERIES § Media Type (optional) § Media Features (height, width, orientation, …) § Verknüpfung durch logische Operatoren (not, and und only)
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)
24. DEMO Responsiveness https://github.com/aclue-de/WebLayoutTalk_master-detail-app
25. INTERSECTION OBSERVER SZENARIO § Es soll etwas passieren, wenn ein Element im Sichtbereich erscheint Observed Element
26. INTERSECTION OBSERVER API FUNKTIONSWEISE § Callback der ausgelöst wird, wenn ein Element im Viewport erscheint
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 }); };
28. DEMO Intersection Observer API https://codepen.io/joergneumann/pen/LYgeozm
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
30. DEMO CSS Layout API https://github.com/JoergNeumann/houdini/tree/main/LayoutDemo
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
32. Q&A