Responsive Web Design
123
Pulpmedia intern 18. Juni 2013 PULP ACADEMY RESPONSIVE WEB DESIGN
-
Upload
paul-lanzerstorfer -
Category
Documents
-
view
847 -
download
4
description
Was ist Responsive Web Design? Welche Probleme werden damit gelöst? Wie geht man an ein Responsive Web Design Projekt heran? Input für Konzeption, Technik und Design.
Transcript of Responsive Web Design
Pulpmedia intern18. Juni 2013PULP ACADEMY
RESPONSIVE WEB DESIGN
WTF IST RWD?
RWD = RESPONSIVE WEB DESIGN
ACHTUNG: NICHT RESPONSIVE WEBSITE!
DER GRAFISCHE AUFBAU EINER „RESPONSIVEN“ WEBSEITE ERFOLGT ANHAND DER ANFORDERUNGEN DES JEWEILIGEN GERÄTES, MIT DEM DIE SEITE BETRACHTET WIRD.
Quelle: wikipedia
HOCH- & QUERFORMAT!
HOCH- & QUERFORMAT!
FINGER FRIENDLY
FINGER FRIENDLY
GIBT’S BIS RIESENGROSS!
320PX
2560PX
768PX1280PX
HI-RESHI-RESHI-RES
LÖSUNGSANSÄTZE
ANSATZ 1: DER KLEINSTE GEMEINSAME
NENNER
ANGEPASST AUF KLEINSTE AUFLÖSUNG
HALLO!
ICH BIN EIN BAUM!
ANSATZ 2: DER DESIGNER
ANSATZ
NO OFFENSE!
DESIGN AUF IMAC 27”
ICH BIN EIGENTLICH EIN SCHÖNER, GROSSER BAUM!
ANSATZ 3: JEDEM DAS SEINE
IMACMACBOOK
IPADIPHONE
GALAXY NOTE?KINDLE FIRE?DELL NOTEBOOK?SAMSUNG SMART TV?
EIGENTLICH BIN ICH JA EIN BAUM, KEIN WALD!
ANSATZ 4: EINES, DAS SICH
ANPASST
100%70%
40%25%
HALT!
ICH BIN KEIN BAUM
ICH BIN AUCH KEIN BILD VON EINEM BAUM
ICH BIN EIN PLATZHALTER
FÜR EIN LAYOUT
ICH BIN EIN LAYOUT
EIN LAYOUT, DAS SICH ANPASST
(NOCH) STANDARD
4 LösungsansätzeFRÜHER COMMON SENSEDER KLEINSTE GEMEINSAME NENNER
DESIGNER ANSATZ
ANPASSUNG RESPONSIVE WEB DESIGN
JEDEM DAS SEINE Z.B. M.FACEBOOK.COM
COOL
FUTUREPROOF
FUTUREFRIENDLY
WIE GEHENWIR’S AN?
KONZEPT
CONTENT INVENTORY
CONTENT?1. WELCHER
NEWSNAVIGATION
LOGO
EYECATCHER
SOCIAL MEDIABLOGPOST
SITEMAP
HIGHLIGHT BOXEN
SUBMENÜ
SUBSUBMENÜ
SUCHE
LOGIN
LATEST TWEETS
FACEBOOK SOCIAL BOX
SOCIAL SHARE
ADRESSE
TESTIMONIALS
FORMULAR
PRIORISIERUNG2. CONTENT
GRAFIK KLEIN
ÜBERSCHRIFTDatum
Lorem ipsum dolor s i t amet , consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mehr lesen ...
10 Kommentare Kategorie
GRAFIK GROSS
ÜBERSCHRIFTDatum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi velit, gravida at sem et, interdum cursus nibh. Mauris sagittis ullamcorper gravida. In hac habitasse platea dictumst. Mehr lesen ...
SOCIAL SHARE10 Kommentare Kategorie
GRAFIK KLEIN
ÜBERSCHRIFTDatum
Kategorie
DESKTOP TABLET
PHONE
BIG SCREEN
DESKTOP
TABLET PHONE
DESKTOP
PHONE
PASSWORT
LOGIN
BENUTZERNAME
DESKTOP PHONE
SUCHENSUCHE:
PHONE
DESKTOP
HEADER
MENU
SOCIAL MEDIA
BLOGPOST
FOOTER
BLOGPOST
BLOGPOST
DESKTOP TABLET PHONE WIDE PHONE
HEADER
NAVIGATION
BLOGPOST
SOCIAL MEDIA
FOOTER
Großer EycatcherMittlerer
EyecatcherNur Logo Nur Logo
Volles Menü Volles Menü Icon Icon
Großes Bild, Überschrift, Teaser
Großes Bild, Überschrift, Teaser
Kleines Bild, Überschrift, Teaser
Kleines Bild, Überschrift
Facebook Box, Latest Tweets
Facebook Likes, Twitter Icon
Icons Icons
Adresse, Sitemap Adresse, Sitemap Adresse Adresse
NEW STUFF
LOGO NAVIGATION S SOCIAL L
NEXT BIG THING WHAT’S HOT
SUCHE LOGIN
KEIN WHAT’S HOT KEIN NEXT BIG THING
KEIN SOCIAL
NAVIGATION-ICONZUSÄTZLICHE MENÜEINTRÄGE HINTER “MEHR”
NUR ÜBERSCHRIFTEN
DESKTOP TABLET PHONE WIDE PHONE
DESKTOP TABLET PHONE WIDE PHONE
LOGO
NAVIGATION
SUCHE
SOCIAL
LOGIN
NEW STUFF
NEXT BIG THING
WHAT’S HOT
✔ ✔ ✔ ✔
✔ “Mehr...” Icon Icon
✔ ✔ ✔ ✔
✔ ✔ ✘ ✘
✔ ✔ ✔ ✔
✔ ✔ ✔ Nur Überschriften
✔ ✔ ✘ ✘
✔ ✘ ✘ ✘
PROJEKTPROZESS
CONTENT STRATEGYSKETCH
WIREFRAME DESIGN
PROTOTYPE
TEST
RWD PROTOTYPE
Quelle: Pon Kattera, http://www.slideshare.net/pkattera
A PROTOTYPENOTHING BEATS
IN THE CLIENTS HAND
Quelle: Pon Kattera, http://www.slideshare.net/pkattera
TECHNIK
CSS = CASCADING STYLE SHEET
CSS
FARBEN
SCHRIFTEN
AUSRICHTUNG
...
HTMLCSS
1024PXBIG SCREEN NORMAL PHONE WIDE 480PXTABLET1280PX 768PX PHONE 320PX
DEFINITION IM CSS ÜBER @MEDIA
/* Less Framework 4 http://lessframework.com by Joni Korpi License: http://opensource.org/licenses/mit-license.php */
/* Resets ------ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0;}
article, aside, canvas, figure, figure img, figcaption, hgroup,footer, header, nav, section, audio, video { display: block;}
a img {border: 0;}
/* Typography presets ------------------ */
.gigantic { font-size: 110px; line-height: 120px; letter-spacing: -2px;}
.huge, h1 { font-size: 68px; line-height: 72px; letter-spacing: -1px;}
.large, h2 { font-size: 42px; line-height: 48px;}
.bigger, h3 { font-size: 26px; line-height: 36px;}
.big, h4 { font-size: 22px; line-height: 30px;}
body { font: 16px/24px Georgia, serif;}
.small, small { font-size: 13px; line-height: 18px;}
/* Selection colours (easy to forget) */
::selection {background: rgb(255,255,158);}::-moz-selection {background: rgb(255,255,158);}img::selection {background: transparent;}img::-moz-selection {background: transparent;}body {-webkit-tap-highlight-color: rgb(255,255,158);}
/* Default Layout: 992px. */
body { width: 896px; padding: 72px 48px 84px; background: rgb(232,232,232); color: rgb(60,60,60); -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; }}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) { body { width: 252px; padding: 48px 34px 60px; } }
NICHT IN PIXEL!FARBEN
@mediaGlobale DefinitionenPOSITIONIERUNG
SCHRIFTGRÖSSEN
GRAFIKEN UNTERSCHIEDLICHE GRÖSSEN
SCHRIFTARTEN
EIN-/AUSBLENDEN... ACHTUNG BEI BILDERN!
PHONE-AUFLÖSUNG
»MAX-WIDTH: 100%«TECH-TIPP 1
FÜR IMAGES AUF
VERHINDERT NICHT»DISPLAY: NONE«
DEN BILDDOWNLOAD!
TECH-TIPP 2
WEB SPEED TEST
Quelle: http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
WATERFALL CHART
FINDE BOTTLENECKS
TESTE ANDERE AUFLÖSUNGEN
RÜCKSICHT AUF MOBILE CONNECTIONS
VS
WAS IST MIT HI-RES DEVICES (RETINA DISPLAY)?
EIGENES CSS
EIGENE DESIGN-GRAFIKEN
DON’T DESIGN JUST FOR HI-RES!
4FACHE AUFLÖSUNG!ACHTUNG: HI-RES HAT
72 DPI
HI-RESLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque dui id mi blandit congue. Nulla nec tellus est. Nullam ornare rutrum metus, et sodales magna consectetur quis. Pellentesque sit amet rutrum ligula, et molestie lectus. Nam malesuada magna sed felis tempus vehicula. Mauris sed volutpat magna, ac accumsan augue. Pellentesque ut laoreet lorem. Nam lacinia ipsum mauris, vitae ultrices justo molestie sit amet. Praesent vulputate magna sapien, sed tincidunt elit pellentesque id. Aenean sit amet sagittis tortor. Pellentesque mattis id ante eget volutpat. Mauris elit dolor, malesuada sit amet ornare et, varius a mi. Fusce pretium ipsum id eros pellentesque rutrum vitae id elit. Integer nibh tortor, porta ac rhoncus ut, pharetra vel est. Duis congue leo non sapien molestie tristique. Morbi ornare, tortor in consequat ornare, sem mauris tincidunt neque, sed ullamcorper risus erat in turpis.
NICHT FINGER FRIENDLY
NICHT MEHR LESERLICH
EMPFOHELENE ICON-GRÖSSE: 44X44 PXQuelle: iPhone Human Interface Guidelines
HI-RES: 88X88 PX
WIRKLICH NÖTIG?IST HI-RES
VIELLEICHT IN ZUKUNFT AUSSCHLIESSLICH
GENUG TECH-TALKWAS IST MIT DESIGN?
ANSATZ 1:LIQUID DESIGN
NÜTZT IMMER VOLLE BREITE AUS
SINNVOLL BEI “TILES”
NICHT SINNVOLL BEI TEXT
ANSATZ 2:FIXES LAYOUT JE
NACH AUFLÖSUNG
ELEMENTE HABEN FIXE BREITE
CONTENT FIXE BREITE MIT ZENTRIERTER AUSRICHTUNG
MAXIMALE BREITE: 1660 PX AB 1250 PX: 840 PX AB 950 PX: 556 PX AB 590 PX: 320 PX
JE NACH AUFLÖSUNG SPRINGT LAYOUT UM
DEMO
ANSATZ 3:COLUMN GRID
12 SPALTEN
1/21/2
1/43/4
1/32/3
1/4 1/41/2
1/4 1/67/12
EMPFEHLUNG:960 PX-GRID
60 PX JE SPALTE20 PX SPACE
1280 PX?
SPALTE: 80PX
RESPONSIVECOLUMN LAYOUT
960 PX GRUNDLAYOUT FÜR DESIGNER
TECHNISCHE UMSETZUNGIN PROZENT
BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
BIG SCREEN & NORMAL TABLET PHONE WIDE PHONE
MAXIMALE BREITE: 1240 PX
ZENTRIERTE AUSRICHTUNG
1/3 1/3 1/3
1/1
5/12 1/4 1/3
<
1/6 1/6 1/6
1/6 2/3 1/6
1/2 1/2
1/2
1/2 1/2
1/1
1/1
1/1
1/1
TAKE AWAYS
CONTENT INVENTORY
MIT PRIORISIERUNG
RWD PROTOTYPING
WEB SPEED TESTPINGDOM.COM
BIG SCREEN: 1280 PXNORMAL: 1024 PX
TABLET: 768 PXPHONE WIDE: 480 PX
PHONE: 320 PX
FINGER-FRIENDLYICONS: 44X44 PX
LIQUID LAYOUTFÜR TILES
12 COLUMN LAYOUTSPALTE 60 PXSPACE 20 PX
FRAGEN?
@pulpmedia facebook.com/pulpmedia pulpmedia.at
