Ar turite " reaguojančią svetainę "? Tai svetainė su maketu, kuris keičia pagal lankytojo įrenginį ir ekrano dydį. Atsakomasis web dizainas yra geriausia pramonės praktika. Rekomenduojama "Google" ir randama milijonai svetainių visame internete. Tačiau yra didelis skirtumas tarp tinklalapio, kuris tiesiog "tinka" skirtingiems ekrano dydžiams ir tinkamai reaguoja į svetainę.
Aš reguliariai žiūrėjau, kaip įmonės redaguoja savo svetainę ir išleidžia spaudos pranešimus, išreiškiančius savo naujojo mobilaus dizaino dorybę. Kai lankiau šias svetaines, tai, ką dažnai randu, yra išdėstymas, kuris iš tiesų masto ir keičiasi, kad tilptų į skirtingus ekranus, bet tai yra ta, kad jie imasi reagavimo. To nepakanka. Tikrai reaguoja svetainė yra ne tik skalė, kad tilptų mažesnio ar didesnio ekrano. Šiuose tinklalapiuose taip pat rasite šiuos svarbius bruožus.
1. Optimizuotas našumas
Niekas nepatinka laukti, kol bus įkelta svetainė, o kai kas nors naudoja mobilųjį įrenginį, kurio ryšys gali būti mažesnis nei idealus, dar svarbiau yra tai, kad svetainė greitai įkelta.
Taigi, kaip optimizuoti svetainės našumą? Jei pradedate nuo naujos svetainės kaip pertvarkymo dalį, tuomet turėtumėte sukurti tašką, pagal kurį būtų sukurtas našumo biudžetas kaip šio projekto dalis. Jei dirbate su esama svetaine ir pradedate nuo nulio, pirmasis žingsnis yra išbandyti svetainės našumą ir pamatyti, kur šiandien esate.
Kai pamatysite, kur yra jūsų svetainė našumo, galite pradėti atlikti būtinus patobulinimus, kad padidintumėte atsisiuntimo greitį. Puiki vieta pradėti, tikriausiai, su jūsų svetainės vaizdais. Per dideli vaizdai yra # 1 kaltininkas, kai kalbama apie lėtas įkėlimo svetaines, todėl optimizuojant vaizdus žiniatinklio pristatymui gali tikrai padėti jūsų svetainė iš našumo požiūriu.
Tikrovė yra tai, kad patobulinta svetainės našumas ir greitas atsisiuntimo greitis yra nauda, kurią visi lankytojai įvertins. Galų gale niekas niekada nesiskundė, kad svetainė yra "pernelyg greitai", bet jei svetainė užima pernelyg ilgai, ji visiškai atitraukia žmones nuo to, ar jis "prisitaiko" ekrane, ar ne.
2. Intelektualiojo turinio hierarchija
Kai svetainė rodoma dideliame ekrane, galite nustatyti turinį įvairiais būdais, nes yra didelis ekrano nekilnojamasis turtas. Galite vienu metu tinkamai pritaikyti svarbius pranešimus ir vaizdus, naujienų atnaujinimus, įvykių informaciją ir svetainės navigaciją. Tai leidžia lankytojui lengvai ir greitai nuskaityti viso puslapio turinį ir nuspręsti, kas jiems yra svarbu.
Šis scenarijus gana dramatiškai keičiasi, kai jūs naudojate tą svetainės dizainą ir paverčiate jį mažo ekrano įrenginiais, pvz., Mobiliuoju telefonu. Staiga dirbate su ekrano nekilnojamuoju turtu, kurį anksčiau turėjote. Tai reiškia, kad jūs turite nuspręsti, kas pirmiausia pasirodys svetainėje, kas bus po jo ir tt Vietoj to, kas matoma iš karto, tikėtina, kad bus tik vienas ar du dalykai (iš kurių viena yra tikimybė naviguoti). Tai reiškia, kad reikia priimti hierarchijos sprendimus. Deja, tai, kas dažnai nustato, kas eina pirmiausia ekrane, o paskui antroji, ir tt yra tai, kaip pats puslapis yra koduojamas. Lengviausias būdas kurti jautrią svetainę parodyti viską, kas pirmą kartą rodoma pirmame ekrane, o paskui antrojo kodo elemento ir pan. Deja, tai, kas gali būti svarbiausia viename įrenginyje, gali būti ne toks svarbus kitam. Tikrai atsiliepianti svetainė supranta, kad turinio hierarchija priklauso nuo skirtingų situacijų ir turėtų būti protinga apie tai, kur ji rodomi.
CSS išdėstymo metodų patobulinimai, įskaitant CSS tinklelio išdėstymą, "Flexbox" ir dar daugiau, leidžia žiniatinklio dizaineriams ir kūrėjams daugiau galimybių, kai reikia sąmoningai išdėstyti turinį, o ne susiaurinti tikslų HTML kodo turinio sričių tvarką. Naujų išdėstymo metodų naudojimas taps dar svarbesnis, nes įrenginio kraštovaizdis ir mūsų svetainės naudotojų poreikiai ir toliau vystosi.
3. Patirtis, į kurią atsižvelgiama į prietaiso privalumus ir silpnybes
Priklausomai nuo įrenginių temos - kiekvienas įrenginys, kurį gali naudoti jūsų svetainėje, turi tiek stiprybes, tiek silpnybes, kurios yra būdingos šiai platformai. Puiki jautri svetainė supranta skirtingų įrenginių galimybes ir apribojimus ir juos naudoja kurdami tinkintą patirtį, kuri geriausiai tinka bet kokiam įrenginiui, kurį lankytojas gali naudoti tuo metu.
Pvz., Mobilusis telefonas turi keletą funkcijų, kurių negalėtumėte rasti tradiciniame staliniame kompiuteryje. GPS - tai mobiliojo centro funkcijos pavyzdys (taip, taip pat galite gauti bendrą informaciją apie vietovę staliniuose kompiuteriuose, tačiau prietaiso GPS yra daug tikslesnis). Jūsų svetainė gali naudoti GPS informaciją, kad protingai išsiųstų asmeniui labai išsamią ir konkrečią žingsnis po žingsnio esančią informaciją apie maršrutą arba specialius pasiūlymus, pagrįstus būtent tuo metu, kai jie yra.
Kitas šio principo pavyzdys praktikoje būtų svetainė, kuri supranta, kokio tipo ekraną naudojate, ir siunčia vaizdus, kurie labiausiai tinka šiam ekranui. Jei turite ekraną su aukštu pikselių tankiu, galite nuspręsti į šį ekraną siųsti aukštesnės kokybės vaizdus. Tačiau tie patys vaizdai būtų beprasmiška mažiau ekrano turiniui, o papildoma kokybė būtų prarasta, o papildomas failo dydis būtų atsisiųstas be jokios realios priežasties.
Tikrai puikios, jautrios svetainės apsvarsto visą naudotojo patirtį ir dirba, kad pritaikytų šią patirtį, pagrįstą ne tik ekrano tipo ar dydžio, bet ir kitais svarbiais aparatinės įrangos aspektais.
4. Turinys su kontekstu
Iš pradžių jautrus web dizainas gavo savo vardą, nes svetainės išdėstymo idėja atitinka skirtingus ekrano dydžius, tačiau galite atsakyti į daug daugiau nei tik ekrano dydį. Remdamiesi ankstesniu prietaiso stipriųjų ir silpnųjų vietų naudojimo pavyzdžiu, galite naudoti tuos ir kitus duomenis, pavyzdžiui, datą ir laiką, kad galėtumėte tinkamai pritaikyti svetainės patirtį.
Įsivaizduokite didelės parodos renginio svetainę. Nors jautri svetainė pakeis svetainės puslapių išdėstymą, kad galėtumėte mastuoti skirtingais ekranais, taip pat galite naudoti datą, norėdami nustatyti, koks turinys yra svarbiausias rodyti. Jei tai yra laikotarpis iki įvykio, tikriausiai norėsite akivaizdžiai parodyti registracijos informaciją. Jei tuo metu įvykis iš tikrųjų vyksta, registracija gali būti ne svarbiausias turinys. Vietoj to, jūs galite nuspręsti, kad įvykių tvarkaraštis yra labiau kritiškas, nes jis yra labiau aktualus šio vartotojo tiesioginiams poreikiams.
Atsižvelgdami į veiksmus, atlikdami tolesnius veiksmus, galite prisijungti prie įrenginio GPS, kad nustatytumėte, kur jie iš tikrųjų yra prekybos mugėje. Galėtumėte suteikti jiems interaktyvaus turinio pagal jų buvimo vietą, rodydami juos netoliese esančiose kabinose ar seansuose, kuriuose norite pradėti.
5. Prieinamumas
Galutinis pavyzdys, kuriuo mes apžvelgsime, kaip svetainė gali iš tikrųjų reaguoti į lankytojo poreikius, yra galvoti apie interneto prieinamumą . Tinklalapius turėtų galėti naudoti kuo daugiau žmonių, įskaitant tuos, kurie turi negalią. Jūsų svetainė turėtų būti naudojama tam, kam reikia ekrano skaitytuvo ar kitos pagalbinės programinės įrangos, kad galėtumėte pasiekti turinį. Tokiu būdu jūsų svetainė reaguoja į jų poreikius, nes užtikrinote, kad patirtis, nors ir neįgaliems lankytojams, vis tiek yra tinkama.
Atsakydama į kuo daugiau duomenų taškų, o ne tik ekrano dydį, svetainė gali būti daug daugiau nei tik "mobili". Tai gali tapti tikrai reaguoja į kiekvieną šios frazės prasmę.