Hochgeladen vonChristoph Reinartz
Was nicht passt wird responsive gemacht - Conference Edition
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 ChristophReinartz
- 2.
- 3. Die Ausgangslage (c)Senator Film Verleih
- 4.
- 5.
- 6. Abweichung von IdealParametern
- 8.
- 9.
- 10. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
- 11.
- 12.
- 14.
- 15. Bullshit Bullshit Bullshit Bullshit Bullshit
- 16. Bullshit Bullshit Bullshit Bullshit Bullshit Kein Bullshit
- 17.
- 18.
- 19.
- 20. Der responsive Ansatz Eine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst
- 21. 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/
- 23. Beispiel: trivago •Sprungstufen-basiertes Layout • adaptives Layout • innerhalb der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Eine Definition Responsiveweb 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 MODERNERBROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE
- 36.
- 37.
- 38.
- 39.
- 41.
- 43. Zutaten nach demRezept 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 malrelativ! ! ! 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 / fluidmedia Fluid Images: max-width img, embed, object, video { max-width: 100%; } http://clagnut.com/sandbox/imagetest/
- 49. Flexible / fluidmedia
- 50. Flexible / fluidmedia
- 51. Flexible / fluidmedia
- 52. 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" />
- 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 MehrereEigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 192dpi) { .column { float: none; } }
- 55.
- 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.
- 58.
- 59.
- 60. Prototype A Prototypeis worth a thousand meetings
- 61. Aus der Praxis (c) Senator Film Verleih
- 62.
- 63. Der User schlägtzurück
- 64. Der User schlägtzurückNicht mit uns !
- 65. Der User schlägtzurück https://www.flickr.com/photos/95284782@N06/8880500036
- 66. Jawohl, dat passt! (c) Senator Film Verleih
- 67. The Truth… Yourvisitors don’t give a shit if your site is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
- 71.
- 72. 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/
- 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 nichtschrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign- schrott-ist/
- 75.
- 76. Gleiche URL, aberandere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869
- 77. Mobile First Ansatzwählen https://www.flickr.com/photos/pixel_boogie/3451813645
- 78.
- 79. Performance messen /verbessern https://www.flickr.com/photos/aussiegall/286709039
- 80. Auf echten Devicestesten https://www.flickr.com/photos/hysysk/4042285394
- 81.
- 82.
- 83.
- 84. Responsible RWD http://bradfrostweb.com/ blog/post/beyond-squishy-the- principles-of-adaptive-design/
- 85.
- 86. Danke! Prosit! (c)Senator Film Verleih
- 87. Vielen Dank anSenator Film Verleih