Als PDF, PPTX herunterladen
Hochgeladen vonChristoph Reinartz
Was nicht passt wird responsive gemacht - Extended Edition
Das Dokument beschreibt die Prinzipien des Responsive Webdesigns, das die Anpassung von Webseiten an verschiedene Bildschirmgrößen und Geräte ermöglicht. Es wird auf die Notwendigkeit von flexiblen Layouts, relativen Maßen, flexiblen Medien und Media Queries eingegangen, um eine eine konsistente Benutzererfahrung zu gewährleisten. Zudem werden Verbesserungen und Best Practices für eine effektive mobile Strategie hervorgehoben.
Was nicht passt wird responsive gemacht - Extended Edition
- 1. EXTENDED VERSION ChristophReinartz
- 2. /* About me*/ .me { name: “Christoph Reinartz“; link: “http://creinartz.de“; twitter: “@pistenprinz“; location: “Mönchengladbach“; } .job--trv { company: “trivago GmbH“; title: “Front-end Developer“; from: “November 2012“; responsibilities: “Coordination UI-Development“, “Front-end/CSS architecture“; }
- 3.
- 4.
- 5.
- 6. Auf jedes DeviceDein Design passen muss! May the force be with you Alles klar!? Auf all den Geräten soll dat laufen?
- 7. Abweichung von IdealParametern
- 9.
- 10.
- 11.
- 12. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
- 13.
- 15.
- 16. Bullshit Bullshit Bullshit Bullshit Bullshit
- 17. Der responsive Ansatz Eine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst
- 18. Beispiel: The BostonGlobe • Full „fluid“ responsive • fluid innerhalb der Breakpoints • funktioniert gut bei textlastigen Seiten http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
- 20. Beispiel: trivago •Sprungstufen-basiertes Layout • innerhalb der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. Eine Definition Responsiveweb design isn’t your site working on phones and tablets. It’s about your site working everywhere. https://twitter.com/ScottKellum
- 27. Ja guck mahier! Dat passt selbst auf der Möhre da!
- 31. Alter Kontext MODERNERBROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE
- 32.
- 33.
- 34.
- 35.
- 38.
- 40. Zutaten nach demRezept von Ethan Marcotte ! • Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
- 41. Sieh das malrelativ! ! ! target / context = result Erstellung relativer Maße: Fonts / Grids
- 42. EMs nutzen •skalierbare Einheit • 1em = aktuelle Fontgröße • 2em = doppelte Fontgröße
- 43. Flexible Grids /Maße #page { max-width: 61.75em; /* 988px / 16px = 61.75em */ } h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ } !
- 45. Flexible / fluidmedia Fluid Images: max-width img, embed, object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries http://clagnut.com/sandbox/imagetest/
- 46. Media Types CSS2.1 Media Types ! <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> ! <link rel="stylesheet" type="text/css" href="print.css" media="print" />
- 47. Media Queries CSS3 Nicht nur Device Typen sondern Devicegerätetypische Eigenschaften abfragen ! <link rel="stylesheet" type="text/css" href="style.css" media="screen and (device-width: 480px)" />
- 48. Media Queries MehrereEigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 163dpi) { .column { float: none; } }
- 49.
- 50. Viewport-Metatag <meta content="width=device-width,initial-scale= 1.0" name="viewport" /> Mit Viewport-Metatag viewport-width = device-width ! Ohne Viewport-Metatag Default-Canvas ~980px http://bkaprt.com/rwd/29
- 51.
- 52.
- 53.
- 54. Prototype A Prototypeis worth a thousand meetings
- 55.
- 56.
- 57. Der User schlägtzurück
- 58. Der User schlägtzurück https://www.flickr.com/photos/95284782@N06/8880500036
- 59. The Truth… Yourvisitors don’t give a shit if your site is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
- 64. Mobile Strategie YouMay Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
- 65. Page Sizes 72%of responsive websites deliver the same number of bytes regardless of screen size, even on slow mobile network connections. http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
- 66. Den Ferrari nichtschrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign- schrott-ist/
- 67.
- 68. Gleiche URL, aberandere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869
- 69. Mobile First Ansatzwählen https://www.flickr.com/photos/pixel_boogie/3451813645
- 70.
- 71. Performance messen /verbessern https://www.flickr.com/photos/aussiegall/286709039
- 72. Auf echten Devicestesten https://www.flickr.com/photos/hysysk/4042285394
- 73.
- 74.
- 75.
- 76. Responsible RWD DerUser http://bradfrostweb.com/ blog/post/beyond-squishy-the- principles-of-adaptive-design/
- 77. Ich habe fertig! ! http://www.levien.com/type/myfonts/inconsolata.html
- 78.
- 79. Vielen Dank anSenator Film Verleih