Content MarketingMarkaðs- og sölumyndböndMarkaðssetning upplýsingatækniFarsíma- og spjaldtölvumarkaðssetning

Hvað er móttækileg hönnun? (Útskýringarmyndband og upplýsingatækni)

Það hefur tekið áratug fyrir móttækileg vefhönnun (RWD) að fara almennt síðan Cameron Adams kynnti fyrst hugmyndina árið 2010. Hugmyndin var sniðug – af hverju getum við ekki hannað síður sem aðlagast útsýnissvæði tækisins sem verið er að skoða á?

Hvað er móttækileg hönnun?

Móttækileg vefhönnun er hönnunarnálgun sem tryggir að vefsíða veitir bestu skoðunarupplifun á hvaða tæki sem er, óháð skjástærð eða upplausn. Það felur í sér að nota sveigjanlegt skipulag, útlit sem byggir á rist og fjölmiðlafyrirspurnir til að búa til síðu sem aðlagast stærð skjásins sem verið er að skoða á. Þetta þýðir að vefsíða hönnuð með móttækilegri vefhönnun mun líta vel út og virka vel á borðtölvu, spjaldtölvu eða snjallsíma.

Með öðrum orðum er hægt að stilla þætti eins og myndir sem og uppsetningu þessara þátta. Hér er myndband sem útskýrir hvað móttækileg hönnun er og hvers vegna fyrirtækið þitt ætti að innleiða hana. Ef þú ert að fá nýja vefsíðuhönnun eða vefforrit þróað er móttækileg vefhönnun nauðsyn, ekki valkostur, í ljósi þess að meira en helmingur allrar vefumferðar kemur frá farsímum sem hafa mismunandi breidd og hæð útsýnisgátta.

Móttækileg hönnun er líka ákjósanleg fyrir vefhönnuði, sem þurfa ekki að byggja upp sjálfstæða upplifun sem er einstök byggð á tækinu eða útsýnisgáttinni. Móttækileg vefhönnun er hægt að ná með því að nota CSS.

Móttækileg hönnun CSS Viewport fyrirspurnir

Hér er dæmi um stílblað sem er að stilla leturstærðina út frá útsýnisglugganum með því að nota miðlunarfyrirspurn:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Vafrar eru sjálfir meðvitaðir um stærð þeirra og þeir hlaða stílblaðinu frá toppi til botns. Með því að spyrjast fyrir um viðeigandi stíla fyrir stærð skjásins geturðu stillt tiltekna stílþætti fyrir hverja lágmarks- og hámarksbreidd tækis. Þetta þýðir ekki að þú þurfir að hanna mismunandi síður fyrir hverja stærð skjásins, þú þarft bara að skipta um nauðsynlega þætti með því að nota fjölmiðlafyrirspurnirnar.

Að starfa með farsíma-fyrsta hugarfari er grunnviðmiðið í dag. Bestu tegundirnar í flokki hugsa ekki bara um hvort síða þeirra sé farsímavænn heldur um fulla reynslu viðskiptavina.

Lucinda Duncalfe, forstjóri Monetate

Hér er upplýsingatækni frá Monetate sýnir hugsanlegan ávinning af því að búa til eina móttækilega hönnun fyrir mörg tæki:

Móttækileg vefhönnun Infographic

Er síðan þín móttækileg?

Ein einföld leið til að sjá hvort vefsíðan þín er móttækileg er að stækka eða minnka vafragluggann til að sjá hvort þættirnir hreyfast miðað við breidd vafrans.

Til að fá meiri nákvæmni skaltu benda á Google Króm vafra á síðuna þína. Veldu Skoða> Hönnuður> Hönnuðartól af matseðlinum. Þetta mun hlaða fullt af verkfærum í spjaldið eða nýjan glugga. Smelltu á litla táknið vinstra megin við valmyndarstikuna fyrir þróunartól sem lítur út eins og farsíma- og spjaldtölvutákn. Þú getur valið nokkur stöðluð tæki og jafnvel breytt hvort þú vilt skoða síðuna lárétt eða lóðrétt.

  • móttækileg spjaldtölva fyrir króm þróunarverkfæri
  • króm þróunarverkfæri móttækileg farsíma lárétt
  • króm þróunarverkfæri móttækileg farsíma
  • móttækilegt skjáborð fyrir króm þróunarverkfæri

Þú getur notað leiðsöguvalkostina efst til að breyta útsýni úr landslagi í andlitsmynd, eða jafnvel velja hvaða fjölda forforritaðra stærða sem eru skoðaðar. Þú gætir þurft að endurhlaða síðuna en það er flottasta tól í heimi til að staðfesta móttækilegar stillingar og tryggja að vefsvæðið þitt líti vel út í öllum tækjum!

Douglas Karr

Douglas Karr er CMO af OpenINSIGHTS og stofnandi Martech Zone. Douglas hefur hjálpað tugum farsælra MarTech sprotafyrirtækja, hefur aðstoðað við áreiðanleikakönnun yfir $5 milljarða í kaupum og fjárfestingum Martech og heldur áfram að aðstoða fyrirtæki við að innleiða og gera sjálfvirkan sölu- og markaðsáætlanir sínar. Douglas er alþjóðlega viðurkenndur stafrænn umbreytingu og MarTech sérfræðingur og ræðumaður. Douglas er einnig útgefinn höfundur Dummie's guide og bók um leiðtogaviðskipti.

tengdar greinar

Til baka efst á hnappinn
Loka

Auglýsingablokk greind

Martech Zone er fær um að útvega þér þetta efni að kostnaðarlausu vegna þess að við afla tekna af síðunni okkar með auglýsingatekjum, tengdatenglum og kostun. Okkur þætti vænt um ef þú myndir fjarlægja auglýsingablokkann þinn þegar þú skoðar síðuna okkar.