Kas ir atsaucīgs dizains? (Skaidrotājs video un infografika)

atsaucīgs tīmekļa dizains

Tas ir vajadzīgs desmit gadus atsaucīgs tīmekļa dizains Kopš RWD Kamerons Adamss pirmo reizi iepazīstināja koncepts. Ideja bija ģeniāla - kāpēc mēs nevaram izstrādāt vietnes, kas pielāgotos tās ierīces skata punktam, kurā tā tiek skatīta?

Kas ir atsaucīgs dizains?

Reaģējošais tīmekļa dizains (RWD) ir tīmekļa dizaina pieeja, kuras mērķis ir izveidot vietnes, lai nodrošinātu optimālu skatīšanās pieredzi - ērtu lasīšanu un navigāciju ar minimālu izmēru maiņu, panoramēšanu un ritināšanu - plašā ierīču klāstā (no mobilajiem tālruņiem līdz galddatoriem). monitori). Vietne, kas izveidota ar RWD, izkārtojumu pielāgo skatīšanās videi, izmantojot plūstošus, uz proporcijām balstītus režģus, elastīgus attēlus un CSS3 multivides vaicājumus, kas ir @media kārtulas paplašinājums.

Wikipedia

Citiem vārdiem sakot, var pielāgot tādus elementus kā attēlus, kā arī šo elementu izkārtojumu. Šeit ir video, kurā paskaidrots, kas ir atsaucīgs dizains, kā arī tas, kāpēc jūsu uzņēmumam tas būtu jāievieš. Mēs nesen pārveidojām Highbridge vietni, lai tā būtu atsaucīga un tagad strādā Martech Zone darīt tāpat!

Vietnes atsaucības veidošanas metodika ir nedaudz garlaicīga, jo jums ir nepieciešama hierarhija jūsu stiliem, kas ir sakārtoti, pamatojoties uz skata loga lielumu.

Pārlūkprogrammas paši apzinās savu lielumu, tāpēc ielādē stila lapu no augšas uz leju, vaicājot piemērojamos stilus atbilstoši ekrāna lielumam. Tas nenozīmē, ka katram izmēra ekrānam ir jāveido dažādas stila lapas, jums vienkārši jāpārvieto nepieciešamie elementi.

Darbs ar mobilo sakaru mentalitāti šodien ir pamata standarts. Klases labākie zīmoli domā ne tikai par to, vai viņu vietne ir piemērota mobilajām ierīcēm, bet arī par pilnu klientu pieredzi.

Lucinda Duncalfe, Monetate izpilddirektore

Šeit ir Monetāra infografika, kas ilustrē iespējamos ieguvumus, ja izveidojat vienu adaptīvu dizainu vairākām ierīcēm:

Atsaucīga tīmekļa dizaina infografika

Ja vēlaties redzēt atsaucīgu vietni darbībā, norādiet Google Chrome pārlūku (es uzskatu, ka Firefox ir tāda pati funkcija) Highbridge. Tagad izvēlieties Skats> Izstrādātājs> Izstrādātāja rīki no izvēlnes. Tas pārlūka apakšdaļā ielādēs virkni rīku. Noklikšķiniet uz mazās mobilās ierīces ikonas, kas atrodas izvēlnes joslas Izstrādātāja rīki kreisajā pusē.

reaģējošs-testēšanas-hroms

Varat izmantot augšpusē esošās navigācijas opcijas, lai mainītu skatu no ainavas uz portretu vai pat atlasītu jebkuru iepriekš ieprogrammētu skatu logu skaitu. Jums, iespējams, būs jāpārlādē lapa, taču tas ir stilīgākais rīks pasaulē, lai pārbaudītu savus adaptīvos iestatījumus un nodrošinātu, ka jūsu vietne izskatās lieliski visās ierīcēs!

3 Komentāri

  1. 1
  2. 2

    Liels paldies Duglasam par šo labi izskaidroto rakstu. Man tomēr tam jāpiekrīt lietu saturiskajā pusē. Lielākajai daļai vietņu mēs nepietiekam ar atsaucīgu izkārtojumu. Mums ir nepieciešams atsaucīgs saturs. Bet pamata vietnēs mēs noteikti izmantosim jūsu labi dokumentēto rakstu par to, kā ar to rīkoties!

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.