Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
CSSRESPONSIVE WEB DESIGNFYRIRLESTUR 8, 12. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
RESPONSIVE WEB DESIGNSKALANLEG VEFHÖNNUN
AFHVERJU
AFHVERJU?
#1 problem we see editing tech books: too much WHAT, too little WHY-it-matters and too many assumptions (& holes) in the HOW.5:15 PM - 20 Nov 2013
Seriouspony @seriouspony
Follow
22 RETWEETS 18 FAVORITES
Ethan Marcotte — @beep
Höfundur „Responsive Web Design“
Jeremy Keith — @adactio
Vefforritari hjá Clearleft, bloggari til margra ára áadactio.com
Luke Wroblewski — @lukew
Höfundur „Mobile first“
Brad Frost — @brad_frost
Vefforritari í Pittsburgh, nánar á bradfrostweb.com
A great visualization of Apple and Google’s smartphone market dominance
Á ÞESSU ÁRI…
Um 500.000 iPhone seldir á dag
http://www.statista.com/statistics/263401/global-apple-iphone-sales-since-3rd-quarter-2007/
YFIR EINNOGHÁLFUR IPHONE PERÍSLENDING.
Á DAG.
Í LOK SEINASTA ÁRS…
Um milljarður 30-daga virkra notanda Android
http://phandroid.com/2014/06/25/android-has-1-billion-active-users-in-the-past-30-days-and-other-interesting-numbers-from-io/
FORRESTER GERIR RÁÐ FYRIR AÐ
VERSLAÐ VERÐI FYRIR YFIR
$100 MILLJARÐA GEGNUM SNJALLSÍMA
Í ÁR
http://recode.net/2014/05/12/mobile-commerce-sales-to-top-100-billion-in-2014-forrester-estimates/
640 x 480
800 x 600
1024 x 768
1680×9451680×10501600×9001600×7681600×12001440×9001400×10501366×7681366×720960×540854×480800×480800×1280720×576
1280×8541280×8001280×7681280×7201280×10241200×8241152×7681024×7681024×6002048×15362048×11522048×10501920x12001920×1440
420×2933840×2400352×416320x480320×240272×4802560×16002560×1440240×320640×480640×360600×800540×960528×436
640x960640x480640×96176×220176×208176×132480×800480×640480×272480×1024720×480720×12801920×1080480×854
http://www.abookapart.com/products/responsive-web-design
#1 SVEIGJANLEGT UMBROT,BYGGT Á GRIND
#2 SVEIGJANLEGAR MYNDIROG MIÐLAR
#3 CSS MEDIA QUERIES
http://www.abookapart.com/products/mobile-first
MOBILE FIRSTeða kannski.. efni/verkefni fyrst
Afhverju sér mobile vefur?
Vefurinn þinn er nú þegar notaður í allskonar tækjum!
MOBILE FIRSTByrjum á upplifun í minni tækjum
Neyðir þig til að taka ákvarðanir
Þegar þú ferð „upp” á við – allt plássið í heiminum!
PROGRESSIVEENHANCEMENT
Byrjum á frábæru efni
Setjum fallegt útlit ofan á
Bætum virkni við einsog stuðningur er til staðar
PROGRESSIVEENHANCEMENT
John Allsopp —
The web’s greatest strength, I believe,is often seen as a limitation, as adefect. It is the nature of the web tobe flexible, and it should be our roleas designers and developers toembrace this flexibility, and producepages which, by being flexible, areaccessible to all.
A Dao of Webdesign
Viðurkennum og fögnum hinu ófyrirsjáanlega
Hugsum og högum okkur með framtíðina í huga
Hjálpum öðrum að gera það sama
http://futurefriend.ly/
RESPONSIVE WEB DESIGNSKALANLEG VEFHÖNNUN
HVERNIG
SKALANLEG VEFHÖNNUNByggir á:
1. Sveigjanlegu umbroti, byggðu á grind
2. Sveigjanlegum myndum og miðlum
3. CSS media queries
SVEIGJANLEG GRINDNotum hlutfallsleg gildi, ekki nákvæm
Ef umgjörð minnkar, þá minnkar allt hlutfallslega innanhennar
Getum fest umgjörðina til að festa allt innihald
Notum yfirleitt max-width á umgjörð til að setjahámarksbreidd
Dæmi
ÚTREIKNINGARMeð því að notatarget ÷ context = resultgetum við breytt úr nákvæmu gildi í hlutfallslegt fyrirbreiddir, margin, padding og letur
T.d. erum með 960px umgjörð og innan hennar 600pxefnissvæði, það er þá:600 ÷ 960 = 0,625 eða 62.5%
SVEIGJANLEGAR MYNDIR OGMIÐLAR
Getum fest við umgjörð þeirra og látið skalast
Getum bæði minnkað/stækkað eða kroppaðar
Hægt að gera fyrir flest allt efni
<picture> nýtt element sem auðveldar notkun ámyndum
Dæmi
http://embedresponsively.com/http://responsiveimages.org/
MEDIA QUERIESÁkveðum „brotpunkta“ í hönnun og breytum flæði
Stillum media query á
max-width – skilgreinum reglur upp að þeirri vídd
min-width – skilgreinum reglur frá þeirri vídd
min-pixel-ratio – útfrá upplausn
orientation – skilgreinum reglur útfrá stöðu skjás
Hægt að and-a saman
Dæmi
<META NAME="VIEWPORT">Getum leiðbeint vafra hvernig síða birtist:
width setur breidd viewports, tala eða device-width—viewport er jafn stórt tæki, ekki upplausn
initial-scale, upphafs zoom á síðu
minimum-scale, hversu lítil síða má verða — hve langtmá zooma út
maximum-scale, hversu stór síða má verða — hve langtmá zooma inn
user-scalable, má notandi zooma? Viljum aldreibanna þetta!
<META NAME="VIEWPORT"><meta name="viewport" content="width=device-width, initial-scale=1"
http://www.quirksmode.org/mobile/metaviewport/
ALLIR SAMAN NÚ!Erum með síðu sem bregst við umhverfi sínu
Einföld hugmynd en getur orðið mjög flókið
Prófanir á mörgum tækjum erfiðar
Dæmi