Was nicht passt wird responsive gemacht - Conference Edition
1 gefällt mir2,786 aufrufe
Das Dokument erörtert verschiedene Ansätze des Responsive Webdesigns, darunter den klassischen Ansatz mit separaten Desktop- und mobilen Seiten und den responsiven Ansatz, der eine einzige Website beinhaltet, die sich automatisch an verschiedene Bildschirmgrößen anpasst. Es werden technische Aspekte wie flexible Layouts, Media Queries und die Bedeutung der Benutzererfahrung hervorgerufen, während auch die Grenzen des responsiven Designs thematisiert werden. Zudem wird empfohlen, eine mobile Strategie zu entwickeln, die über ein reines responsives Design hinausgeht, um die Benutzerzufriedenheit zu optimieren.
Was nicht passt wird responsive gemacht - Conference Edition
- 1. CONFERENCE EDITION Christoph Reinartz
- 2. @pistenprinz
- 3. Die Ausgangslage (c) Senator Film Verleih
- 6. Abweichung von Ideal Parametern
- 10. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
- 14. Bullshit
- 15. Bullshit Bullshit Bullshit Bullshit Bullshit
- 16. Bullshit Bullshit Bullshit Bullshit Bullshit Kein Bullshit
- 20. Der responsive Ansatz Eine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst
- 21. 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/
- 23. Beispiel: trivago • Sprungstufen-basiertes Layout • adaptives Layout • innerhalb der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
- 26. IPad, Tablets
- 28. Smartphone
- 29. 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
- 30. Ich würde sagen dat passt! (c) Senator Film Verleih
- 35. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE
- 43. Zutaten nach dem Rezept von Ethan Marcotte ! • Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
- 44. EMs nutzen • skalierbare Einheit • 1em = aktuelle Fontgröße • 2em = doppelte Fontgröße body {font-size: 100%} body {font-size: 150%} font-size: 12px Textbeispiel Textbeispiel font-size: 1em Textbeispiel Textbeispiel
- 46. Sieh das mal relativ! ! ! target / context = result Erstellung relativer Maße: Fonts / Grids
- 47. Flexible Grids / Maße 960px 200px target / context = result (200 / 960) * 100 = 20,83%
- 48. Flexible / fluid media Fluid Images: max-width img, embed, object, video { max-width: 100%; } http://clagnut.com/sandbox/imagetest/
- 49. Flexible / fluid media
- 50. Flexible / fluid media
- 51. Flexible / fluid media
- 52. 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" />
- 53. 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)" />
- 54. Media Queries Mehrere Eigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 192dpi) { .column { float: none; } }
- 56. 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
- 57. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- project/
- 58. Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-responsive- project/
- 60. Prototype A Prototype is worth a thousand meetings
- 61. Aus der Praxis (c) Senator Film Verleih
- 63. Der User schlägt zurück
- 64. Der User schlägt zurückNicht mit uns !
- 65. Der User schlägt zurück https://www.flickr.com/photos/95284782@N06/8880500036
- 66. Jawohl, dat passt! (c) Senator Film Verleih
- 67. 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/
- 71. So doch nicht !!
- 72. 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/
- 73. 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/
- 74. Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign- schrott-ist/
- 76. Gleiche URL, aber andere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869
- 77. Mobile First Ansatz wählen https://www.flickr.com/photos/pixel_boogie/3451813645
- 79. Performance messen / verbessern https://www.flickr.com/photos/aussiegall/286709039
- 80. Auf echten Devices testen https://www.flickr.com/photos/hysysk/4042285394
- 83. Responsible RWD
- 84. Responsible RWD http://bradfrostweb.com/ blog/post/beyond-squishy-the- principles-of-adaptive-design/
- 85. Ich habe fertig! !
- 86. Danke! Prosit! (c) Senator Film Verleih
- 87. Vielen Dank an Senator Film Verleih