Responsive Design

Responsive Design
Stefan Antonelli
Dienstag, 19. März 13
Design, das auf die
Umgebung reagiert
Dienstag, 19. März 13
Historie
Dienstag, 19. März 13
Fluid Layout
Dienstag, 19. März 13
Fluid Layout
• Fließendes Design
• Webseite nutzt gesamten Platz
• Sowas von responsive!
• Keine festen größen für Layouts
• Extrem lange Zeilen möglich
Dienstag, 19. März 13
Dienstag, 19. März 13
Static Layout
Dienstag, 19. März 13
Static Layout
• Feste Größen
• Einfach zu layouten
• In allen Auflsöungen gleich
• #win
Dienstag, 19. März 13
Dienstag, 19. März 13
Adaptive Layout
Dienstag, 19. März 13
Adaptive Layout
• Umsetzung für den Desktop
• Layout adaptiert für mobile Geräte
• Unterschiedliche URL
• Browserweichen
• WAP
Dienstag, 19. März 13
iPhone
Dienstag, 19. März 13
Mobile Web
Dienstag, 19. März 13
Zahl der mobilen
Endgeräte steigt
Dienstag, 19. März 13
Adaptive & Fluid
Dienstag, 19. März 13
Responsive Design
Dienstag, 19. März 13
Was ist Responsive
Design?
Dienstag, 19. März 13
Design, das auf die
Umgebung reagiert
Dienstag, 19. März 13
Kurz gesagt
Der vorhandene Platz wird optimal ausgenutzt
Dienstag, 19. März 13
Dienstag, 19. März 13
Responsive Design
• Darstellung entsprechend der Anforderung
einzelner Geräte wie z.B. Mobile
• Neue Anordnung von Elementen
• Anpassung von Einteilung, Naviagtion, Text
• Technik auf Basis HTML5 und CSS3
• Media Queries
Dienstag, 19. März 13
Dienstag, 19. März 13
Dienstag, 19. März 13
Dienstag, 19. März 13
Demo
Dienstag, 19. März 13
Demo
• http://www.londonandpartners.com/
• http://www.smashingmagazine.com/
• http://www.bostonglobe.com/
• Responsive Navigation
• Responsive Table
Dienstag, 19. März 13
Designprozess
Wie komme ich zu einem Responsive Design?
Dienstag, 19. März 13
Analyse
Dienstag, 19. März 13
Analyse
• Wer nutzt Desktop und was sucht er?
• Wer nutzt ein Tablet und warum?
• Wer nutzt ein Telefon und was sucht er?
Dienstag, 19. März 13
Screen Resolutions
Dienstag, 19. März 13
Screen Resolutions
1366x768
1920x1080
1280x1024
30%
23%
15%
8%
0%
Dienstag, 19. März 13
Januar 2013
1024x768
1280x800
Mobile Devices
•
•
•
•
•
•
•
iPhone 5 mit 1136x640
iPhone 4 mit 960x640
iPhone 480×320
iPad Mini 1024x768
iPad 1024x768
iPad Retina: 2048x1536
Samsung Galaxy S3 1280x720
Dienstag, 19. März 13
•
Samsung Galaxy S3 mini:
800x480px
•
•
•
•
•
Nokia Lumia 920 1280x768
Nokia Lumia 800 800x480
HTC Desire 480×800
HTC Desire C 320×480
Kindle Fire 1024x800
Break Points
• 320px (alter Schrott)
• 768px (iPad, diverse Geräte bis 1024)
• 1024px (der Klassiker)
• 1366px (am meisten genutzte Auflösung)
Dienstag, 19. März 13
Umsetzung
Dienstag, 19. März 13
CSS3 Media Queries
• Supported
• IE9
• Firefox 3.5
• Chrome
• Safari 4
• Opera 9.5
Dienstag, 19. März 13
Bis 320px
@media screen and (max-width: 320px) {
.class {
background: #ccc;
}
}
Dienstag, 19. März 13
Von 320px bis 768px
@media screen and (min-width: 320px) and (maxwidth: 768px) {
.class {
background: #333;
}
}
Dienstag, 19. März 13
WTF 320px
@media screen and (min-width: 320px) and (maxwidth: 768px) {
.class {
background: #333;
}
}
@media screen and (max-width: 320px) {
.class {
background: #ccc;
}
}
Dienstag, 19. März 13
Von & bis
@media screen and (min-width: 321px) and (maxwidth: 768px) {
.class {
background: #333;
}
}
@media screen and (max-width: 320px) {
.class {
background: #ccc;
}
}
Dienstag, 19. März 13
Von & bis
<stylesheet title=""
id="ladivva.css"
media="screen" rel="stylesheet" rendering="import"
cacheable="True" compression="safe" cookable="True"
enabled="1" expression=""/>
Dienstag, 19. März 13
iPhone
Der neue IE für Designer
Dienstag, 19. März 13
iPhone
@media only screen and (min-device-width:
560px) and (max-device-width: 1136px) and (webkit-min-device-pixel-ratio: 2) {
Dienstag, 19. März 13
Skeleton
Dienstag, 19. März 13
Screenfly
Dienstag, 19. März 13
Media Queries
http://www.w3.org/TR/css3-mediaqueries/
Dienstag, 19. März 13
Danke!
Fragen & Antworten
Dienstag, 19. März 13
Danke!
• Twitter: @stefanantonelli
• E-Mail: [email protected]
Dienstag, 19. März 13
Links
Dienstag, 19. März 13
•
Browser Stats: http://www.w3schools.com/
browsers/browsers_stats.asp
•
Tables: http://blog.easy-designs.net/archives/
2013/02/02/responsive-tables
•
•
•
Responsive Design: http://aids.gov/
Responsive Designs: http://mediaqueri.es
Viewport: https://developer.mozilla.org/en-US/
docs/Mobile/Viewport_meta_tag