Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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 : :

Slide 3

Slide 3 text

SLIDES https://tinyurl.com/48xhcmmr

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WEB DESIGN PATTERNS SINGLE COLUMN LAYOUT MAGAZINE LAYOUT

Slide 7

Slide 7 text

WEB DESIGN PATTERNS CARD-BASED LAYOUT HERO LAYOUT

Slide 8

Slide 8 text

BEISPIEL: MASTER-DETAIL LAYOUT

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Header Master View Detail View

Slide 12

Slide 12 text

TECHNISCHE UMSETZUNG

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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;

Slide 17

Slide 17 text

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;

Slide 18

Slide 18 text

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;

Slide 19

Slide 19 text

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;

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

RESPONSIVENESS § RESIZE § REFLOW § REPOSITION § REDESIGN

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Q&A