Gagnvirk hönnun

Viðbragðslegar myndir: Leysa móttækileg myndvandamál

Móttækileg hönnun er ekki bara breyting á skipulagi eða notkun fjölmiðlafyrirspurna hér og þar, það er hugarástand og aðgerð sem hefur skýrar merkingar.

Móttækileg hönnun er að segja að við gefum okkur meira um efni en við höfum áður. Reyndar skiptir okkur svo miklu máli að við munum jafnvel bjartsýni efni til að lesa og skoða á tæki sem ekki hafa verið hleypt af stokkunum ennþá.

Í grundvallaratriðum erum við að reyna að kynna upplýsingar eins skýrt og hægt er og vera eins skilvirk og mögulegt er allt á sama tíma. Hér er algeng misskilningur; farsíma fyrst þýðir að hanna eins og allt vefsvæði þitt snýst um farsíma. Það er ekki alveg rétt. Mobile fyrst þýðir einfaldlega að hanna fyrir einfaldasta reynslu fyrst, sem leiðir okkur oft til að skera út kostnað sem við erum að upplifa eða upplifa í framtíðinni.

Í heimi hönnun; fljótur ákvarðanir; svörun; og skapandi efni sem við þurfum að vera vakandi fyrst og fremst. Og vera vakandi kemur niður að vita hvenær við höfum vandamál í móttækilegum hönnun okkar og hvernig við gætum lagað það. Í dag erum við að gera það bara.

Móttækileg myndir hafa verið erfitt efni í mörg ár núna, þar sem það hefur yfirleitt verið meira en einn "hakk-um" leið til að gera myndin móttækileg. Við skulum fara í gegnum þetta efni frá grunni og byrja með því hvernig við notuðum það.

Fortíðin

The Boston Globe website er klassískt dæmi um fljótandi hönnun.

Áður en við förum lengra þurfum við að fara yfir hvernig vefsíðan hegðar sér svo við getum talað um hvernig það virkar. A fljótur samdráttur: HTML er hlaðinn í röð, þá er auðvitað beðið um auðlindir strax eins og þau koma upp, handritin eru þá keyrð strax og síðan eru allar smákökur sendar með HTTP beiðnum.

Ferlið beiðni / dregið / sækja / etc. hefur lagt smá takmörkun á hvernig skapandi við getum fengið með þessum aðferðum. Þó, það hefur vissulega ekki hætt fólki í fortíðinni. Hér eru nokkrar leiðir sem þeir hafa fengið í kringum þetta.

Skipta um "src" eiginleiki

Við getum notað javascript til að umrita "src" eiginleiki, þannig að það dragi og kemur í stað myndar miðað við stærð vafrans, sem virðist virka bara fínt. Þetta hefur verið það sem mikið af fólki hefur notað áður. Vandamálið með þessu er að það notar tvöfalda HTTP beiðni. Fyrst draga það upprunalegu myndina, og þá kemur það í staðinn með javascript'd myndinni. Þú ert í raun að gera meira en þú myndir hafa gert ef þú gerðir ekkert við, allt þó að það sé í vinnunni.

Eru einhverjar lausnir fyrir þetta? Það eru örugglega!

Það er aðferð sem mikið af fólki notar þar sem við setjum 1px gif mynd á síðuna í stað raunverulegs myndar svo að í stað þess að ná tveimur myndum til tveggja verðs, færðu í raun tveir fyrir verð á einum - en það er ekki er ekki tilvalið heldur. Í þessu tilviki ertu ennþá að búa til tvær HTTP beiðnir.

Þetta þýðir líka að þú treystir javascript fyrir allar myndir. Það er erfiður, vegna þess að farsímafyrirtæki geta rofið með javascript, allir aðrir hlutir geta brotið javascript og óvart fjöldi vefsíðna notenda gera það óvirkt með vísvitandi hætti.

Noscript

Önnur aðferð sem hefur náð nokkrum vinsældum er að nota "noscript" merkið fyrir farsíma myndir og nota síðan javascript til að skipta um það fyrir mynd í hærri upplausn. Þetta virtist taka samfélagið með stormi á meðan aftur vegna getu til að skipta úr farsíma upp í hár-rez útgáfur, og það féll í raun með víðtæka rangtúlkun farsíma fyrstu sem ég nefndi hér að ofan. Þetta virkar ekki í IE. Fyrir Internet Explorer lausn verður þú að skrifa eftirfarandi:

En vandamálið við það er að nú virkar það ekki í vinsælum vafra Firefox. Svo það sem við verðum að gera er:

Eins og þú sérð er þetta ekki mjög einfalt og það er vissulega ekki mjög sterkt. Það er í raun ekki leið til að gera það hreint eða einfaldlega yfirleitt. Reyndar hafa margir af fólki sem vinnur í móttækilegum myndum reynt að leysa þessi vandamál í mörg ár núna og hafa í raun ekki náð of langt með það.

Venjulega hvað þeir hafa gert er notað einhvers konar javascript til að vinna í gegnum vandamálið og samþykktu tvöfalda http beiðni sem nauðsynlegt illt.

Server hlið lausn?

Dæmigerð miðlarahlið lausn fyrir þetta er að nota javascript til að skipta um "src" með HTML5 "-data-highsrc" og geyma vafrann í smákökum. Þó sendir það þá sömu margar HTTP beiðnir og áður.

Ástæðan sem fólk líkaði við þessa aðferð var sú að þeir töldu að það væri öruggari þar sem þeir voru að geyma vafrann í smákökum og þeir töldu að það væri minna álag fyrir villu. Í raun er það ekki rétt. Hér eru nokkrar ástæður fyrir því að þessi aðferð er ekki eins mikill og aðrar aðferðir sem skráðar eru hér að framan. Það gerir aðeins kleift að ná stórum og litlum myndum, það snýst ekki um breytingar á tækjabúnaði og brýtur það illa vegna þess að nú eru vafrar fyrirfram að sækja myndir. Einnig er stór fallhlé að stundum eru smákökur ekki settir nógu hratt til að fá myndir sem eru ætlaðar fyrir farsíma.

Vegna þessa, þ.e. bilun á hentugum valkostum á þjóninum og viðskiptavinarhliðinni, þurfum við nýja lausn.

Og þetta er rétt þar sem aðlögunarhæfar myndir aðferð skref í.

Aðlögunarhæfar myndirnar

Aðlögunarhæfar myndir eru sönn lausn á öllu þessu samhengi. Það er bókstaflega eins auðvelt og draga og sleppa á þjóninum þínum og þú ert allt búinn. Þessi aðlögunaraðferð notar eina htaccess skrá, eina PHP skrá og eina línu javascript, og það er það .

Þú dregur einfaldlega htaccess og php skrá inn í rótarklúbbinn þinn og bætir javascript við höfuð vísitölu skráarinnar og þú ert búinn að ljúka. Ekkert annað að jafnvel hafa áhyggjur af. Nú, það býður upp á tonn af customization, en við munum komast inn í það nálægt lokinni.

Fyrir nú skulum við hoppa beint inn í byrjun aðlögunaraðferðarinnar.

Markmiðin

Fyrst skulum við skilgreina markmið verkefnisins. Höfundur aðlagandi mynda, Matthew Wilcox , hefur bent á þetta sem markmið hans fyrir þessa lausn:

  • Verður að vera auðvelt að setja upp og nota.
  • Verður að vera eins lítið viðhald og mögulegt er.
  • Verður að vinna með fyrirliggjandi efni, engin merki um breytingar eða sérsniðin CMS sem þarf.
  • Verður að leyfa mörgum útgáfum.
  • Verður að vinna með hönnunarstöðvum og ekki tækjatölvum.
  • Verði auðvelt að skipta út þegar betri lausn kemur.

Og þessi markmið fyrir þetta verkefni byggjast allir á þeirri forsendu að

Merki á vefsvæðinu þínu eru nú þegar að nota hæstu upplausnarmyndina, sem að mínu mati er skynsamleg forsenda. Venjulega munum við fá bestu myndirnar á síðuna okkar þegar ég veit mjög fáir vefhönnuðir sem setja bestu myndirnar sínar á útgáfur símans og verstu þeirra á vefnum. Það er líka nokkuð sjálfskýring.

Hvernig það virkar

Við erum bara að fara að kafa inn í kóðann, en áður en við skulum tala um hvernig það virkar á hærra stigi. Einfaldlega sett, finnur javascript stærsta skjástærðina sem er tiltæk á tækinu og geymir það í kex. The .htaccess skrá þá bendir ákveðnar beiðnir til aðlögunarhæfimynda-images.php, og þá byggist á þeim reglum að PHP-skráin gerir nokkrar vinnslu. Inni þessi vinnsla er þar sem hið raunverulega galdur gerist, og að öllu leyti myndi ég mæla með því að allir lesa þetta kíkja á PHP skrá. Það er fallegasta skrifað PHP sem ég hef séð í mörg ár . Það er ákveðið að verða að sjá.

Nú skulum fara á brot niður sérstöðu um hvernig þessar skrár vinna og samspil við hvert annað. Hér munum við ræða allt sem þú færð þegar þú hleður niður pakka frá aðlögunarhæfnis myndasíðunni.

Javascript númerið

Javascript númerið sem þú þarft að afrita er þetta:

Og það verður að fara áður en einhver annar javascript er í höfuðhlutanum þínum . Einnig er athyglisvert að ef þú vilt nýta sjónhimnaskjáinn á einhverju nýlegri Apple vörur þá getur þú notað eftirfarandi javascript línu:

Eins og þú sérð er þessi síðasta lína mjög svipuð og eini munurinn er sá að það mun senda myndir í hærri upplausn til slíkra tækja sem leyfa því. Vertu meðvituð um að það muni þýða hægari niðurhal fyrir Retina notendur en betri myndir auðvitað.

Athugaðu að þetta þarf samt að vera fyrsta javascript í höfuðhlutanum þínum.

The. Htaccess skrá

A. Htaccess skrá er einfaldlega glorified skrá stjórnun gagnsemi og ef þú ert nú þegar með vefsíðu sem þú ert að íhuga að nota aðlagandi myndir á þá hefur þú meira en líklega nú þegar .htaccess skrá, svo það sem við þurfum að gera er að bæta við einhverju innihaldi . Einfaldlega opnaðu það (það er alltaf að finna í rótarskránni á vefsvæðinu þínu), og bæta þessu við: 

Options +FollowSymlinksRewriteEngine On# Adaptive-Images ----------------------------------------# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:# RewriteCond %{REQUEST_URI} !some-directory# RewriteCond %{REQUEST_URI} !another-directoryRewriteCond %{REQUEST_URI} !assets# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images ----------------------------------------

Nú er áhugaverður hluti af þessu að þú þarft í raun ekki að gera neinar breytingar á öllum.

Venjulega munu síður vilja að allar myndirnar þeirra séu móttækilegir og leika vel með öllum formlegum þáttum svo vegna þess að þú þarft virkilega ekki að útiloka neitt. Ef þú vilt eða þarft, þá er möguleiki þarna en muna að þú viljir vera móttækileg og framsækin. The .htaccess skrá hér er hið fullkomna fyrir þetta verkefni og þjónar sem lykill í þessu öllu ferli svo án þess að þú getur raunverulega ekki notað þessa aðferð. Þess vegna verður þú að ganga úr skugga um að þú gleymir ekki þessu, eða bætir því við ef þú ert ekki með einn.

The PHP skrá

Allt sem þú þarft að gera með þessari er að draga og sleppa því í rótarklúbbinn þinn og það mun sjá um allt annað. Það er lítill sérhannaðar hluti eins og þú getur séð hér: 

/* CONFIG ------------------------------ */$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Eins og það segir um afganginn af handritinu, ef þú veist ekki hvað þú ert að gera þá af hverju ekki bara láta það vera einn? Ef þér líður eins og tinkering, skulum við bara varpa ljósi hér.

$ upplausnir eru skjárbreiddin sem við munum vinna með. Í vanrækslunni mun það geyma endurmynda mynd fyrir stóra skjái, venjulegan skjá, töflur, síma og smáskífur.

$ cache_path ef þér líkar ekki við afrita myndirnar sem eru skrifaðar í möppuna, geturðu sett það einhvers staðar annars staðar. Réttlátur setja slóðina í möppuna hér og vertu viss um að þú býrð til hana á þjóninum.

$ skerpa mun framkvæma lúmskur skerpu á endurskeldum myndum. Venjulega er þetta fínt, en þú gætir viljað slökkva á því ef netþjónninn þinn er mjög upptekinn.

$ watch_cache ef þjónninn þinn fær mjög upptekinn getur það hjálpað til við að gera þetta til Falskt. Það þýðir þó að þú verður að hreinsa út skyndiminni handvirkt ef þú breytir auðlind.

Nú þegar þú veist allt um customization þú gætir verið forvitinn, bara hvað gerir PHP skrána nákvæmlega? Jæja, við skulum fara í gegnum það skref fyrir skref:

  • Það læsir kexinn og passar niðurstöðuna í brotalínur sem passa við CSS brotin
  • Það skoðar eigin skyndiminni til að sjá hvort útgáfa af umbeðnu skránni sé til staðar á þeim brotstaðarstærð.
  • Ef það gerist þá samanstendur það dagsetningarnar á því og uppruna til að tryggja að skyndimyndin sé ekki gamall.
  • Ef það er ekki til í myndavél; þá skapar það aðeins rescaled mynd ef frummyndin er stærri en brotstærðarstærðin. Þá caches það til framtíðar notkun.

Ai-cookie.php skráin

Þú færð líka þessa 'ai-cookie.php'-skrá í möppunni þegar þú hleður niður aðlögunarverkefnispakka, en það er í raun hægt að eyða því sem það hefur að gera með annarri aðferð til að finna skjástærð notenda. Höfundur aðlögunarhæfra mynda mælir með því að þú eyðir þessu og fer með staðlaða aðferðina.

Og það snýst um það fyrir innihald þessarar pakkningar. Nú skaltu ganga úr skugga um að þú horfir á allar skrárnar sem þú ert að pabba inn á síðuna þína og tvöfalt athuga hvort þú notar bestu venjur með fjölmiðlafyrirspurnir. Einnig vertu viss um að spyrja spurninga ef þú hefur einhverjar spurningar um þetta efni eða fjölmiðlafyrirspurnir almennt þar sem ég elska að tala um þessi tegund af hlutur. Lítum nú á það sem við höfum hér.

Í samantekt:

Það er vissulega heillandi kerfi, og það sem ég ætla að vera í notkun fyrir komandi ár. Í fyrsta lagi, hvað nákvæmlega get ég sérsniðið með þessu kerfi í heild?

Með þessu kerfi er hægt að:

  • Stilltu brotamörk til að passa við CSS.
  • Tilgreindu hvar þú vilt skyndiminni.
  • Stilltu gæði mynda JPGs.
  • Stilltu hversu lengi vafrar ættu að skynda myndinni fyrir.
  • Skerpt mynda myndbrot.
  • Varamaður javascript til að greina háan DPI tæki.

Í framtíðinni myndi ég líka elska það að uppgötva bandbreidd á kerfinu, í staðinn fyrir stærð tækis eða vafrabreidd. Vegna þess að það er raunveruleg lykill að ákveða hvaða mynd að senda hvar, en frá og með nú er engin möguleg leið til að gera það.

Heimsókn adaptive-images.com til að hlaða niður skrám sem ég hef vísað til í þessari grein.

móttækilegur hönnun aðlögunarhæfar myndir boston heim farsíma fyrstu myndirnar sjónhimnu sýna myndir