responsive web designosk1/vefforritun/2014/pdf/08.css.pdfhöfundur „responsive web design“...
TRANSCRIPT
![Page 1: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/1.jpg)
CSSRESPONSIVE WEB DESIGNFYRIRLESTUR 8, 12. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
![Page 2: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/2.jpg)
RESPONSIVE WEB DESIGNSKALANLEG VEFHÖNNUN
AFHVERJU
![Page 3: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/3.jpg)
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
![Page 4: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/4.jpg)
![Page 5: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/5.jpg)
Ethan Marcotte — @beep
Höfundur „Responsive Web Design“
![Page 6: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/6.jpg)
Jeremy Keith — @adactio
Vefforritari hjá Clearleft, bloggari til margra ára áadactio.com
![Page 7: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/7.jpg)
Luke Wroblewski — @lukew
Höfundur „Mobile first“
![Page 8: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/8.jpg)
Brad Frost — @brad_frost
Vefforritari í Pittsburgh, nánar á bradfrostweb.com
![Page 9: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/9.jpg)
![Page 10: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/10.jpg)
A great visualization of Apple and Google’s smartphone market dominance
![Page 11: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/11.jpg)
![Page 12: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/12.jpg)
Á ÞESSU ÁRI…
Um 500.000 iPhone seldir á dag
http://www.statista.com/statistics/263401/global-apple-iphone-sales-since-3rd-quarter-2007/
![Page 13: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/13.jpg)
YFIR EINNOGHÁLFUR IPHONE PERÍSLENDING.
Á DAG.
![Page 14: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/14.jpg)
Í 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/
![Page 15: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/15.jpg)
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/
![Page 16: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/16.jpg)
640 x 480
800 x 600
1024 x 768
![Page 17: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/17.jpg)
![Page 18: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/18.jpg)
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
![Page 19: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/19.jpg)
![Page 20: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/20.jpg)
![Page 21: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/21.jpg)
![Page 22: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/22.jpg)
http://www.abookapart.com/products/responsive-web-design
![Page 23: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/23.jpg)
#1 SVEIGJANLEGT UMBROT,BYGGT Á GRIND
![Page 24: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/24.jpg)
#2 SVEIGJANLEGAR MYNDIROG MIÐLAR
![Page 25: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/25.jpg)
#3 CSS MEDIA QUERIES
![Page 27: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/27.jpg)
MOBILE FIRSTeða kannski.. efni/verkefni fyrst
Afhverju sér mobile vefur?
Vefurinn þinn er nú þegar notaður í allskonar tækjum!
![Page 28: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/28.jpg)
![Page 29: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/29.jpg)
![Page 30: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/30.jpg)
![Page 31: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/31.jpg)
![Page 32: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/32.jpg)
MOBILE FIRSTByrjum á upplifun í minni tækjum
Neyðir þig til að taka ákvarðanir
Þegar þú ferð „upp” á við – allt plássið í heiminum!
![Page 33: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/33.jpg)
![Page 34: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/34.jpg)
PROGRESSIVEENHANCEMENT
Byrjum á frábæru efni
Setjum fallegt útlit ofan á
Bætum virkni við einsog stuðningur er til staðar
![Page 35: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/35.jpg)
PROGRESSIVEENHANCEMENT
![Page 36: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/36.jpg)
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
![Page 37: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/37.jpg)
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/
![Page 38: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/38.jpg)
RESPONSIVE WEB DESIGNSKALANLEG VEFHÖNNUN
HVERNIG
![Page 39: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/39.jpg)
SKALANLEG VEFHÖNNUNByggir á:
1. Sveigjanlegu umbroti, byggðu á grind
2. Sveigjanlegum myndum og miðlum
3. CSS media queries
![Page 40: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/40.jpg)
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
![Page 41: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/41.jpg)
Ú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%
![Page 42: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/42.jpg)
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/
![Page 43: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/43.jpg)
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
![Page 44: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/44.jpg)
<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!
![Page 45: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/45.jpg)
<META NAME="VIEWPORT"><meta name="viewport" content="width=device-width, initial-scale=1"
http://www.quirksmode.org/mobile/metaviewport/
![Page 46: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/46.jpg)
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
![Page 47: RESPONSIVE WEB DESIGNosk1/vefforritun/2014/pdf/08.css.pdfHöfundur „Responsive Web Design“ Jeremy Keith — @adactio Vefforritari hjá Clearleft, bloggari til margra ára á adactio.com](https://reader033.vdocuments.us/reader033/viewer/2022050300/5f69cf0dbfc0df5b6c5585e2/html5/thumbnails/47.jpg)