Your SlideShare is downloading. ×
Thinking Outside the Box that Keeps Moving
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Thinking Outside the Box that Keeps Moving

457
views

Published on

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

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
457
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. rekoorbekul beW evisnopseR a rof skcirT dna spiT gnivoM speeK tahT xoB eht edistuO gniknihT
  • 2. aivirT evisnopseR
  • 3. snoitadnuoF dnuoR
  • 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. a pcjAv oi npdc b LbABD oi npdc c fgqye oi npdc omeD
  • 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. a xp b xp c xp d xp eb dluohs tegrat hcuot a ezis muminim eht si tahw elppA ot gnidroccA
  • 8. gnicaps emos htiw mm tsael ta rof yrT yldneirf regnif sngised ruoy peeK
  • 9. ezis tegrat hcuot no deef eht moc ayam eziS tegraT hcuoT nO psa yrtne ff moc wekul seziS tegraT hcuoT gnidaeR rehtruF
  • 10. stnenopmoc dliuB piT
  • 11. <ywde>/ywde> m-igt<m-igt gnimoc era stnenopmoC beW
  • 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. meht ot kcits dna senilediug etaerC piT
  • 14. flesruoy morf flesruoy evaS
  • 15. tpircsavaj bnbria moc buhtig sptth senilediuG SSC rekoorbekul moc buhtig senilediuG SSC yrdraziwssc moc buhtig gnidaeR rehtruF
  • 16. noitpadA dnuoR
  • 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. gro atanaz smE moc partstoobteg slexiP omeD
  • 19. cte sulytS ssaS pleh ot srossecorperp esU mhtyhr lacitrev no stnemerusaem esaB stnemerusaem lla tsomla rof sme esU noitatnemelpmI
  • 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. PW fWh yl tib ptth pmihcliaM dirG mhtyhR gnidaeR rehtruF
  • 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. 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. oediv rof soitar cisnirtni gnitaerc elcitra moc trapatsila oediV rof soitaR cisnirtnI gnitaerC gnidaeR rehtruF
  • 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. 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. ytisonimuL revoH retnioP gnimoc era seireuq aidem weN osla tuB
  • 28. aidem ssc htiw gnithgil latnemnorivne ot gnidnopser tsop ku oc mnadroj gnidaeR rehtruF
  • 29. stniopkaerb htiw cificeps eB piT
  • 30. evitceffe ylhgih fo stibah seireuq aidem tsop golb moc bewtsorfdarb seireuQ aideM evitceffE ylhgiH fo stibaH gnidaeR rehtruF
  • 31. ecnamrofreP dnuoR
  • 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. kcilctsaf sbaltf moc buhtig sj kcilctsaf
  • 34. esuomdnahcuot elibom ne moc skcor emiT tsriF ehT roF niagA rehtegoT lmth esuoM dnA hcuoT gnidaeR rehtruF
  • 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. Brtls oi npdc omeD
  • 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. elacS etatoR etalsnarT mrofsnarT yticapO
  • 39. omeD CSS animation of top/left vs transform in slow­mo. 0:00 / 1:03
  • 40. snoitamina ecnamrofrep hgih deeps slairotut ne moc skcor lmth snoitaminA ecnamrofreP hgiH gnidaeR rehtruF
  • 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. wolfkrow dne tnorf gnitamotua inamsoydda moc kcedrekaeps wolfkroW dne tnorF gnitamotuA gnidaeR rehtruF
  • 43. slooT repoleveD ruoy wonk ot teG piT
  • 44. sloot repoleved emorhc moc elgoog srepoleved slooTveD emorhC gnidaeR rehtruF
  • 45. segamI dnuoR
  • 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. 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. snoitulos egami rehtO piT
  • 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. ti crser g e secivres diaP euqinhcet semit yzaL ehT snoitulos egami eroM
  • 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. 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. 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. lmth ne gvs selpmaxe ur nnyl skcirt gat egami dna GVS gnidaeR rehtruF
  • 55. tuoyaL dnuoR
  • 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. sledom xob eht lla ecalpeR * , *bfr, :eoe *atr{ :fe bxszn:bre-o; o-iig odrbx }
  • 58. wtf xob redrob gnizis xob moc hsiriluap gnidaeR rehtruF
  • 59. sdirg kcolb enilnI piT
  • 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. 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. eno hcae rof noitulos evisnopser a dna selbat tog ev I
  • 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. 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. selbat lmth snrettap evisnopser si siht oi buhtig tsorfdarb evisnopseR si sihT gnidaeR rehtruF
  • 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. yllaniF
  • 68. slesuorac esu uoy dluohs nehW
  • 69. reveN
  • 70. rekoorbekul snoitseuq rof nrut ruoy s ti woN sknahT

×