Thinking Outside the Box that Keeps Moving

795 views

Published on

Original Slides: http://lukebrooker.com/presentations/thinking-outside-the-box-that-keeps-moving

Tips and Tricks for a Responsive Web.

From my Brisbane Web Design Talk November 21st 2013.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
795
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Thinking Outside the Box that Keeps Moving

  1. 1. rekoorbekul beW evisnopseR a rof skcirT dna spiT gnivoM speeK tahT xoB eht edistuO gniknihT
  2. 2. aivirT evisnopseR
  3. 3. snoitadnuoF dnuoR
  4. 4. etis ruoy ekam ot dedeen era sgat atem tahW eht rettam on ezis secived yreve ot tpada noitatneiro <eanm=vepr"cnet"it=eiewdh> mt ae"iwot otn=wdhdvc-it" <eanm=vepr"cnet"it=eiewdh iiilsae1> mt ae"iwot otn=wdhdvc-it, nta-cl=" <eanm=vepr"cnet"it=eiewdh iiilsae1 mxmmsae1> mt ae"iwot otn=wdhdvc-it, nta-cl=, aiu-cl=" @iwot{wdhdvc-it } vepr it:eiewdh ; tuo gnillor si xif elibom EI ni guB a b c d
  5. 5. a pcjAv oi npdc b LbABD oi npdc c fgqye oi npdc omeD
  6. 6. swodniw no yranimilerp lmth enohp ei ni ngised evisnopser moc wotsttam enohP swodniW no lmth tem EI ni ngiseD evisnopseR sevihcra golb gro edomskriuq hcraeser tropweiv atem yranimilerP gnidaer rehtruF
  7. 7. a xp b xp c xp d xp eb dluohs tegrat hcuot a ezis muminim eht si tahw elppA ot gnidroccA
  8. 8. gnicaps emos htiw mm tsael ta rof yrT yldneirf regnif sngised ruoy peeK
  9. 9. ezis tegrat hcuot no deef eht moc ayam eziS tegraT hcuoT nO psa yrtne ff moc wekul seziS tegraT hcuoT gnidaeR rehtruF
  10. 10. stnenopmoc dliuB piT
  11. 11. <ywde>/ywde> m-igt<m-igt gnimoc era stnenopmoC beW
  12. 12. noitulover stnenopmocbew em nosdodbor noituloveR stnenopmoC beW sediug elyts htiw wolfkrow evisnopser ruoy gnivorpmi snoitatneserp moc rekoorbekul sediuG elytS htiw wolfkroW evisnopseR ruoY gnivorpmI gnidaeR rehtruF
  13. 13. meht ot kcits dna senilediug etaerC piT
  14. 14. flesruoy morf flesruoy evaS
  15. 15. tpircsavaj bnbria moc buhtig sptth senilediuG SSC rekoorbekul moc buhtig senilediuG SSC yrdraziwssc moc buhtig gnidaeR rehtruF
  16. 16. noitpadA dnuoR
  17. 17. hv wv d a xp b smer c sme etis bew evisnopser a ssorca esu ot tnemerusaem fo tinu tseb eht si tahW
  18. 18. gro atanaz smE moc partstoobteg slexiP omeD
  19. 19. cte sulytS ssaS pleh ot srossecorperp esU mhtyhr lacitrev no stnemerusaem esaB stnemerusaem lla tsomla rof sme esU noitatnemelpmI
  20. 20. omeD HTML SCSS Result Edit on <1Haig/1 h>edn<h> <i cas"ae" dv ls=pnl> <>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e <>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e <dv /i> @mot"ops" ipr cmas; $aeln-egt 2p; bs-iehih: 4x $aefn-ie 1p; bs-otsz: 6x hm { tl ln-egt ryh() iehih: htm1; fn-ie $aefn-ie otsz: bs-otsz; fn-aiy Hleia sn-ei; otfml: evtc, assrf }
  21. 21. PW fWh yl tib ptth pmihcliaM dirG mhtyhR gnidaeR rehtruF
  22. 22. a sj sdivtif b mxwdh 10 a-it: 0% c mxhih:10 a-egt 0% d kcah gniddap thgieh oreZ sezis neercs tnereffid ssorca tnemele rehto yna ro oediv a fo oitar tcepsa eht peek ew nac od woH
  23. 23. omeD HTML SCSS Result Edit on <i cas"ei-rto1-" dv ls=mda-ai-69> <faewdh"2"hih=35 sc"/w.otb.o/me/G0RmJ"faeodr""alwulcen<irm irm it=40 egt"1" r=/wwyuuecmebdU-Fm5E rmbre=0 loflsre>/fae <dv /i> <i cas"ei-rto43> dv ls=mda-ai--" <m cas"ei-rto_ne"sc"tp/iigrcmJVcxjg at"oeHne"/ ig ls=mda-ai_inr r=ht:/.mu.o/4pk.p" l=Dg utr > <dv /i> @mot"ops" ipr cmas; bd { oy fn-aiy Hleia sn-ei; otfml: evtc, assrf mri:ryh()at; agn htm1 uo mxwdh ryh(0; a-it: htm4) } %ei-rto{ mda-ai psto:rltv; oiin eaie pdigtp ryh() adn-o: htm1; hih:0 egt ; mri:00ryh() agn htm1; oefo:hde; vrlw idn irm, fae ojc, bet vdo ie, eortC oi npdc
  24. 24. oediv rof soitar cisnirtni gnitaerc elcitra moc trapatsila oediV rof soitaR cisnirtnI gnitaerC gnidaeR rehtruF
  25. 25. b noitceted erutaeF c sreldnah tneve tpircsavaj motsuC d noitceted tnega resU rzinredoM g e nooS seireuQ aideM a secived hcuot no elbahcuot tub secived retniop no elbarevoh si taht gnihtemos ekam ew dluoc woH
  26. 26. omeD HTML SCSS JS Result Edit on <>hwtemn o hvr ciko tuh Priti i i ciko tuh<p pSo h eu n oe, lc r oc. ess f t s lc r oc./> <i i=mn_cnanr cas"eu_otie" dv d"eu_otie" ls=mn_cnanr> < he=#eu i=mn_bto"cas"eu_utn>eu/> a rf"mn" d"eu_utn ls=mn_bto"Mn<a loiCa oi npdc
  27. 27. ytisonimuL revoH retnioP gnimoc era seireuq aidem weN osla tuB
  28. 28. aidem ssc htiw gnithgil latnemnorivne ot gnidnopser tsop ku oc mnadroj gnidaeR rehtruF
  29. 29. stniopkaerb htiw cificeps eB piT
  30. 30. evitceffe ylhgih fo stibah seireuq aidem tsop golb moc bewtsorfdarb seireuQ aideM evitceffE ylhgiH fo stibaH gnidaeR rehtruF
  31. 31. ecnamrofreP dnuoR
  32. 32. on elbalacs resu esu ot ton yrt tuB evoba eht fo llA stneve hcuot tpircsavaj evitan esU <eanm=vepr"cnet"sr mt ae"iwot otn=uesaal=o> clben" sj kcilctsaf d c b a tneve hcuot a morf gal sm eht evomer uoy od woH
  33. 33. kcilctsaf sbaltf moc buhtig sj kcilctsaf
  34. 34. esuomdnahcuot elibom ne moc skcor emiT tsriF ehT roF niagA rehtegoT lmth esuoM dnA hcuoT gnidaeR rehtruF
  35. 35. rettub gnillorcs hcuot gnillorcs wolfrevo tikbew d c a xedni z b llorcs wolfrevo SOi no gnillorcs pu deeps ot dedeen si SSC tahW
  36. 36. Brtls oi npdc omeD
  37. 37. spf ta setar emarf peeK e i a noitisoP b yticapO c roloC d mrofsnarT ylpaehc etamina ot desu eb nac s eitreporp SSC tahW
  38. 38. elacS etatoR etalsnarT mrofsnarT yticapO
  39. 39. omeD CSS animation of top/left vs transform in slow­mo. 0:00 / 1:03
  40. 40. snoitamina ecnamrofrep hgih deeps slairotut ne moc skcor lmth snoitaminA ecnamrofreP hgiH gnidaeR rehtruF
  41. 41. i oge ruoy etalfnI j evoba eht fo llA g stnof noci etaerc yllacitamotuA h tcejorp ruoy yolpeD evas no resworb ruoy hserfer dna tcejorp ruoy elipmoceR f b srossecorperP SSC gnilipmoC c segami gnisimitpO d sppa wen dloffacs yllacitamotuA e seicnedneped lanretxe eldnaH cte sulytS ssaS SSC SJ gniyfinim dna gnitanetacnoc gnitniL a evah namoeY dna rewoB tnurG ekil sloot dliub dna noitamotua od segatnavda tahW
  42. 42. wolfkrow dne tnorf gnitamotua inamsoydda moc kcedrekaeps wolfkroW dne tnorF gnitamotuA gnidaeR rehtruF
  43. 43. slooT repoleveD ruoy wonk ot teG piT
  44. 44. sloot repoleved emorhc moc elgoog srepoleved slooTveD emorhC gnidaeR rehtruF
  45. 45. segamI dnuoR
  46. 46. b N crs c tescrs d tuo riah rieht gnillup srepoleveD erutcip a noitulos segami evisnopser a sa rennur tnorf tnerruc eht si tahW
  47. 47. N crs <m ig sc"tp/paeodi/0.p" r=ht:/lchl.t30jg sc1"mnwdh 30x ht:/lchl.t50jg r-=(i-it: 0p) tp/paeodi/0.p" sc2"mnwdh 50x ht:/lchl.t80jg r-=(i-it: 0p) tp/paeodi/0.p" at"lchle Iae> l=Paeodr mg"
  48. 48. snoitulos egami rehtO piT
  49. 49. euqinhceT raC nwolC HTML CSS Result Edit on <i> dv <v xls"tp/www.r/00sg sg mn=ht:/w.3og20/v" veBx" 03521 iwo=0 7 3" ai-ae=teai lbli bigra"rl=ig ralbl"h ra ae s en ed oe"m" tte"h tteatiueo teSGi bigra" il=te il trbt f h V s en ed> <il>lw CrTcnqe/il> tteCon a ehiu<tte <tl> sye peevApcRto"MdMdme"tbne=-" rsresetai=xiYi et aidx"1 sg{ v bcgon-ie 10 10; akrudsz: 0% 0% bcgon-eet n-eet akrudrpa: orpa; } @ei sre ad(a-it:40x { mda cen n mxwdh 0p) sg{ v bcgon-mg:ul"tp/scp.o18pcMdu-7x3-1-2p.p";otie gensld5x akrudiae r(ht:/.dni/6/i-eim3521@x7pijg) uln: re oi p; } } @ei sre ad(i-it:41x, mda cen n mnwdh 0p) sre ad(a-it:40x ad(wbi-i-eiepxlrto 17){ cen n mxwdh 0p) n -ektmndvc-ie-ai: .5 sg{ v tHLdi oi npdc
  50. 50. ti crser g e secivres diaP euqinhcet semit yzaL ehT snoitulos egami eroM
  51. 51. cVh Wh yl tib ngiseD beW evisnopseR nI segamI evitpadA gnivloS euqinhceT raC nwolC troper raey fo dne segami evisnopser moc rotcod troper raey fo dne lmth segami evisnopseR lmth weivrevO gmipser sceps oi buhtig sniktabat xatnyS gmIpseR rof lasoporP gnidaeR rehtruF
  52. 52. fo troS iniM arepO iniM arepO resworB diordnA resworB diordnA resworB diordnA EI EI EI d c b a GVS troppus ton od sresworb tahW
  53. 53. omeD HTML CSS Result Edit on <i> dv <v wdh"6 hih=9" <mg xikhe=ht:/sesznt.hlu.o/atrlg.v"sc"tp/ast-aaar sg it=9" egt"6> iae ln:rf"tp/ast-aaarcodcmmse/oosg r=ht:/sesznt. <dv /i>
  54. 54. lmth ne gvs selpmaxe ur nnyl skcirt gat egami dna GVS gnidaeR rehtruF
  55. 55. tuoyaL dnuoR
  56. 56. a xob xelf b xob redrob gnizis xob c htdiw xam d llec elbat yalpsid htdiw denifed diulf a peek tub nigram dna gniddap dexif a tes ew dluoc woH
  57. 57. sledom xob eht lla ecalpeR * , *bfr, :eoe *atr{ :fe bxszn:bre-o; o-iig odrbx }
  58. 58. wtf xob redrob gnizis xob moc hsiriluap gnidaeR rehtruF
  59. 59. sdirg kcolb enilnI piT
  60. 60. omeD HTML SCSS Result Edit on <lcas"" u ls=g> <icas"_ie w-- p"1(/)/i l ls=g_tm -14 h> 14<l> <icas"_ie w-- p"2(/)/i l ls=g_tm -12 h> 12<l> <icas"_ie w-- p"3(/)/i l ls=g_tm -14 h> 14<l> <icas"_ie w-- p"4(/)/i l ls=g_tm -14 h> 14<l> <icas"_ie w-- p"5(/)/i l ls=g_tm -14 h> 14<l> <icas"_ie w-- p"6(/)/i l ls=g_tm -14 h> 14<l> <icas"_ie w-- p"7(/)/i l ls=g_tm -18 h> 18<l> <icas"_ie w-- p"8(/)/i l ls=g_tm -18 h> 18<l> <u> /l @mot"ops" ipr cmas; $rdpdig ryh() gi-adn: htm1; IgtiG oi npdc
  61. 61. a elbissop sa tuoyal hcum sa roF b atad ralubat roF c smrof dna atad ralubat roF d reveN desu eb selbat dluohs nehW
  62. 62. eno hcae rof noitulos evisnopser a dna selbat tog ev I
  63. 63. wolfrevo latnoziroH ysaE HTML SCSS Result Edit on <i cas"al-oefo" dv ls=tbe-vrlw> <al> tbe <r t> <hTbeHae 1/h t>al edr <t> <hTbeHae 2/h t>al edr <t> <hTbeHae 3/h t>al edr <t> <hTbeHae 4/h t>al edr <t> <hTbeHae 5/h t>al edr <t> <hTbeHae 6/h t>al edr <t> kKbFx oi npdc
  64. 64. snmuloC ytiroirP atad fo stnuoma egral roF Selectively displaying data The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., responsive design). We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an option is checked, the associated data will persist and display at all screen widths until the option is unchecked. You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is persistent. Display Company GOOG Last Trade Change 597.74 14.81 (2.54%) 378.94 5.74 (1.54%) 191.55 3.16 (1.68%) 31.15 1.41 (4.72%) 25.50 0.66 (2.67%) 18.65 0.97 (5.49%) 15.81 0.11 (0.67%) Google Inc. AAPL Apple Inc. AMZN Amazon.com Inc. ORCL Oracle Corporation MSFT Microsoft Corporation CSCO Cisco Systems, Inc. YHOO Yahoo! Inc. snrettap elbat dwr selpmaxe moc puorgtnemalif
  65. 65. selbat lmth snrettap evisnopser si siht oi buhtig tsorfdarb evisnopseR si sihT gnidaeR rehtruF
  66. 66. gnipparw morf txet siht peek uoy od woH HTML SCSS Result Edit on <i cas"lae" dv ls=fotr> <i cas"lae_ie" dv ls=fotr_tm> <m sc"tp/paeodi/5"at" / ig r=ht:/lchl.t10 l=" > <dv /i> <i cas"lae_cnet> dv ls=fotr_otn" <>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e <>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e <>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e <dv /i> <dv /i> @mot"ops" ipr cmas; bd { oy fn-aiy Hleia sn-ei; otfml: evtc, assrf mri:0 agn ; pdig ryh() adn: htm1; ln-egt ryh() iehih: htm1; } ig{ m
  67. 67. yllaniF
  68. 68. slesuorac esu uoy dluohs nehW
  69. 69. reveN
  70. 70. rekoorbekul snoitseuq rof nrut ruoy s ti woN sknahT

×