Was nicht passt wird responsive gemacht - Extended Edition
2 gefällt mir4,278 aufrufe
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 Christoph Reinartz
- 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“; }
- 6. Auf jedes Device Dein Design passen muss! May the force be with you Alles klar!? Auf all den Geräten soll dat laufen?
- 7. Abweichung von Ideal Parametern
- 12. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
- 15. Bullshit
- 16. Bullshit Bullshit Bullshit Bullshit Bullshit
- 17. Der responsive Ansatz Eine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst
- 18. Beispiel: The Boston Globe • 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
- 23. IPad, Tablets
- 25. Smartphone
- 26. Eine Definition Responsive web design isn’t your site working on phones and tablets. It’s about your site working everywhere. https://twitter.com/ScottKellum
- 27. Ja guck ma hier! Dat passt selbst auf der Möhre da!
- 31. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE
- 40. Zutaten nach dem Rezept von Ethan Marcotte ! • Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
- 41. Sieh das mal relativ! ! ! 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 / fluid media Fluid Images: max-width img, embed, object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries http://clagnut.com/sandbox/imagetest/
- 46. Media Types CSS 2.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 Mehrere Eigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 163dpi) { .column { float: none; } }
- 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. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- project/
- 52. Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- project/
- 54. Prototype A Prototype is worth a thousand meetings
- 55. Aus der Praxis
- 57. Der User schlägt zurück
- 58. Der User schlägt zurück https://www.flickr.com/photos/95284782@N06/8880500036
- 59. The Truth… Your visitors don’t give a shit if your site is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
- 64. Mobile Strategie You May 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 nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign- schrott-ist/
- 68. Gleiche URL, aber andere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869
- 69. Mobile First Ansatz wählen https://www.flickr.com/photos/pixel_boogie/3451813645
- 71. Performance messen / verbessern https://www.flickr.com/photos/aussiegall/286709039
- 72. Auf echten Devices testen https://www.flickr.com/photos/hysysk/4042285394
- 75. Responsible RWD
- 76. Responsible RWD Der User 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. Danke! Prosit!
- 79. Vielen Dank an Senator Film Verleih