responsive web designosk1/vefforritun/2014/pdf/08.css.pdfhöfundur „responsive web design“...

CSSRESPONSIVE WEB DESIGNFYRIRLESTUR 8, 12. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, OSK1@HI.IS

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