Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Was nicht passt wird responsive gemacht - confe...
Search
Christoph Reinartz
October 10, 2014
Technology
0
69
Was nicht passt wird responsive gemacht - conference edition
the slides from my responsive presentation at code.talks 2014 in hamburg
Christoph Reinartz
October 10, 2014
Tweet
Share
More Decks by Christoph Reinartz
See All by Christoph Reinartz
Lessons learned from running a Design System or How to escape a filter bubble
creinartz
1
370
From Engineering to Product - A True Story
creinartz
0
470
Design Systems Engineering - Scaling User Interfaces @trivago
creinartz
1
680
Design Systems Engineering - Scaling User Interfaces @trivago
creinartz
1
330
Rebuilding an aircraft on the fly
creinartz
2
930
Rebuilding an aircraft on the fly
creinartz
0
230
Rebuilding an aircraft on the fly
creinartz
1
220
Large Scale CSS Refactoring
creinartz
3
850
Large Scale CSS Refactoring
creinartz
0
940
Other Decks in Technology
See All in Technology
incident_commander_demaecan__1_.pdf
demaecan
0
120
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
160
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
Git in Team
kawaguti
PRO
3
370
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
570
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
100
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
240
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
300
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
It's Worth the Effort
3n
187
28k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Designing for Performance
lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Thoughts on Productivity
jonyablonski
70
4.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Code Review Best Practice
trishagee
72
19k
Writing Fast Ruby
sferik
629
62k
Transcript
Christoph Reinartz CONFERENCE EDITION
@pistenprinz
Die Ausgangslage (c) Senator Film Verleih
https://www.flickr.com/photos/glenscott/509720363
https://www.flickr.com/photos/lukew/10430507184/
Abweichung von Ideal Parametern
None
Mobiler traffic
Mobiler „clickout“ share
Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell
auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
Die mobile Site...
Die mobile Site...
None
Bullshit
Bullshit Bullshit Bullshit Bullshit Bullshit
Bullshit Bullshit Bullshit Bullshit Bullshit Kein Bullshit
https://www.flickr.com/photos/janitors/10081142374
https://www.flickr.com/photos/scaar/8473324580
https://www.flickr.com/photos/shebalso/12341492965
Der responsive Ansatz Eine Webseite, die sich automatisch dem Device
(Screen-Größe) anpasst
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/
None
Beispiel: trivago • Sprungstufen-basiertes Layout • adaptives Layout • innerhalb
der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich
Desktop, iMac, Laptop
Landscape Tablet, Netbook
IPad, Tablets
Filterleiste einblendbar
Smartphone
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
Ich würde sagen dat passt! (c) Senator Film Verleih
None
None
None
None
Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE
CPU EFFIZIENTE EINGABE
960 https://www.flickr.com/photos/tomwachtel/14015354802
2007 https://www.flickr.com/photos/dahlstroms/6750733205
http://maddesigns.de/responsive-workflow/#11
Android Fragmentation http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
None
https://www.flickr.com/photos/adactio/5818096043
None
Zutaten nach dem Rezept von Ethan Marcotte ! •
Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
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
None
Sieh das mal relativ! ! ! target / context =
result Erstellung relativer Maße: Fonts / Grids
Flexible Grids / Maße 960px 200px target / context =
result (200 / 960) * 100 = 20,83%
Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed,
object, video { max-width: 100%; }
Flexible / fluid media
Flexible / fluid media
Flexible / fluid media
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" />
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)" />
Media Queries Mehrere Eigenschaften in einer Query ! @media screen
and (max-device-width: 480px) and (resolution: 192dpi) { .column { float: none; } }
Viewport https://www.flickr.com/photos/mendhak/2252824493
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
Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/
Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/
59 https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006 Prototype
Prototype A Prototype is worth a thousand meetings
Aus der Praxis (c) Senator Film Verleih
A/B Testing https://www.flickr.com/photos/esparta/4482887906
Der User schlägt zurück
Der User schlägt zurück Nicht mit uns !
Der User schlägt zurück https://www.flickr.com/photos/95284782@N06/8880500036
Jawohl, dat passt! (c) Senator Film Verleih
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/
None
None
None
So doch nicht !!
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/
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/
Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/
Verbesserungen https://www.flickr.com/photos/91173606@N00/3448611327
Gleiche URL, aber andere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869
Mobile First Ansatz wählen https://www.flickr.com/photos/pixel_boogie/3451813645
Content First https://www.flickr.com/photos/klara/4236116910
Performance messen / verbessern https://www.flickr.com/photos/aussiegall/286709039
Auf echten Devices testen https://www.flickr.com/photos/hysysk/4042285394
Conditional loading https://www.flickr.com/photos/webethere/8708630443
Responsive Images
Responsible RWD
http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD
Ich habe fertig! !
Danke! Prosit! (c) Senator Film Verleih
Vielen Dank an Senator Film Verleih