Seit dem Artikel von Ethan Marcotte hat Responsive Webdesign richtig Fahrt aufgenommen. Responsive Webdesign ist ein zentrales Buzzword, wenn es um Webentwicklung, E-Commerce, UX, SEO und Marketing geht. Seit 2010 hat sich viel verändert. Browser und Techniken haben sich weiterentwickelt. Das Nutzerverhalten hat sich stark verändert, heute sind Nutzer immer und überall online. Aber was ist mit uns, wo bleiben unsere Innovationsstärke und der Mut für neues? Wir, die Websites verkaufen, konzipieren, designen und entwickeln. Entrepreneurship und Innovation erfordern Mut und einen Schritt weiterzugehen als alle anderen - where no man has gone before. Der Vortrag zeigt, dass jetzt der Zeitpunkt ist, innovative HTML- und CSS-Techniken einzusetzen. Der Vortrag richtet sich in erster Linie an Frontend Entwickler und User Experience Designer/Consultants die mehr als Grundkenntnisse in HTML, CSS und JavaScript mitbringen.
75. @webinterface
Edge 39 44 8 30
Browsersupport Desktop
11 38 43 7.1 29
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
76. Supported teilweise Supported nicht Supported
@webinterface
8.4* 8 40 10 30 42 38 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
8* 4.4.4 7 12.1 10
Can i use, Stand: 01.08.2015
91. @webinterface
Edge 39 44 8 30
Browsersupport Desktop
11 38 43 7.1 29
vmax wird nicht supported
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
92. @webinterface
8.4 8 40 10 30 42 39 11
iOS Mini
Opera
Mobile
Chrome
Andriod
Firefox
Andriod
Browsersupport Mobile
vmax wird nicht supported
8 4.4.4 7 12.1 10
Can i use, Stand: 01.08.2015
Supported teilweise Supported nicht Supported
99. Für jeden Breakpoint angepasste
und optimierte Bildgrößen.
@webinterface
Fluid Experience
100. <picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Das geht mit dem picture Element.
101. <picture>
<source media="(min-width: 1024px)" srcset="large.jpg 1x, large@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="medium.jpg 1x, medium@2x.jpg 2x">
<source srcset="small.jpg 1x, small@2x.jpg 2x">
<img src="fallback.jpg">
</picture>
@webinterface
Fallback
Für veraltete Browser oder wenn
das Picture Element noch nicht
Supportet wird.
113. @webinterface
… lesen Sie bei Marc Aurel nach.
Bei jedem einzelnen Ding die
Frage, was ist es in sich selbst?
http://images-cdn.moviepilot.com
114. „Responsive design
is not about mobile.
Its not about tablets.
Its not about desktops.
Its about The Web.“
@webinterface
Jeremy Keith
115. „It is the nature of the web to be flexible, and
it should be our role as designers and
developers to embrace this flexibility, and
produce pages which, by being flexible, are
accessible to all. The journey begins by letting
go of control, and becoming flexible.“
@webinterface
John Allsopp, A dao of webdesign
116. "The limits of my language are the
limits of my world."
Ludwig Wittgenstein
@webinterface