Adaptyvus svetainės dizainas yra patogi sistema, skirta rodyti tą pačią svetainę skirtingų tipų įrenginiuose internete. Paprastais žodžiais tariant, tai yra galimybė peržiūrėti vieną tinklalapį nešiojamajame kompiuteryje, išmaniajame telefone ir kitose programėlėse.
Reagavimas žiniatinklyje tapo būtinybe nuo tada, kai žmonės gavo įvairių formatų įtaisus su internetu. Įmonės, internetinės parduotuvės ir net tik informacinės svetainės stengiasi įtikti savo auditorijai, visokeriopai prie to prisitaikydamos. Reaktyvus dizainas išsprendžia patogumo problemą, todėl tai yra nepakeičiamas darbo elementas.
Reaguojančio interneto dizaino ypatybės
Dizaino patogumą apibūdina keli pagrindiniai kriterijai.
- Dydis. Responsive svetainės dizainas turėtų turėti nedidelių skirtumų rodant puslapį skirtinguose įrenginiuose, todėl žiūrimų vaizdų, teksto ir kitų elementų dydžiai turėtų atitikti pačių įrenginių dydžius. Norėdami tai padaryti, žiniatinklio kūrėjai pritaiko dizainą taip, kad būtų galima peržiūrėti kelias versijas.
- Turinio pritaikymas. Svetainę užpildanti medžiaga (vaizdai, vaizdo įrašaiir kiti daugialypės terpės elementai) taip pat turi atitikti reikiamas ekrano skiriamąsias gebas neprarandant rodymo kokybės.
- Dizaino lankstumas. Įtraukimas į elementų kūrimą, leidžiantis greitai koreguoti svetainės dizainą, kai keičiate žiūrimą tinklalapį. Pavyzdžiui, naudotojas slenka puslapiu aukštyn ir žemyn, naršo po skirtingas dalis arba keičia ekrano padėtį iš vertikalios į horizontalią ir atvirkščiai.
- Supaprastinkite elementus pagal įrenginį, kad būtų lengviau naudoti.
- Slėpti nesvarbius blokus mažesniuose ekranuose.
Pagrindai
Svetainės kūrimas neabejotinai susijęs su programavimo kalbomis, nes be jų tiesiog neapsieisite. Naudodama HTML ir CSS, naršyklė atpažįsta objektų (tekstų, iliustracijų, vaizdo įrašų) sudėtį ir tvarką – taip formuojama svetainė.
CSS atsakingas už spalvas, stilius, dydžius, šriftus, lygiavimą, užpildymą, fono elementus, formas ir kt. HTML yra atsakingas už bendrą svetainės turinį ir struktūrą. Taigi žiniatinklio išteklius sudaro dviejų svarbiausių aprašymo metodų visuma.
Kita vertus, CSS yra nepakeičiamas dizaino įrankis. Turi daug funkcijų, pranašesnių už HTML:
- Pateikia dizaino nuoseklumą keliuose puslapiuose, svetainės išvaizdą ir valdo HTML dokumentų rodymą.
- Suteikia jums galimybę vienu metu kurti dizainą ir turinį.
- Taiko kelis stilius ir galimybęperžiūra skirtinguose įrenginiuose.
- Priima sudėtingus dizaino sprendimus.
- Pasižymi dideliu greičiu.
Norėdami sukurti svetainę, turite žinoti keletą pagrindinių sąvokų.
CSS parinkiklis žymimas stiliaus, apibrėžiančio savybes ir formatavimo parinktis, pavadinimu. Jis nurodo naršyklei, kuriam konkrečiam elementui taikomos savybės.
Turtas yra struktūrinis vienetas. Jis apibrėžia išorinius parametrus (dydį, vietą, spalvą, formą ir kt.) ir išreiškiamas konkrečiu kodu.
Yra apibrėžtų CSS savybių rinkinys, apibūdinantis vieną objektą išvaizda ir vieta.
Šie elementai kartu sudaro tokią schemą:
Selector { property1: value; nuosavybė2; vertė }.
Išdėstymo dydžiai ir skiriamoji geba
Dizaino kūrimas prasideda nuo maketo paruošimo Photoshop ar kitomis grafinėmis programomis. Patogumui į drobę įvedami specialūs modulinio tinklelio ženklai, stebimos specialios įtraukos. Taigi interneto dizaineris parodo maketuotojui būsimos svetainės struktūrizavimo ir teisingo žiniatinklio elementų išdėstymo principus.
Reaktyvi žiniatinklio dizaino skiriamoji geba ir dydžiai, skirti pagrindiniams įrenginių tipams:
- Šis dizainas atitinka principą pradėti darbą turint mobiliojo telefono leidimą. Sukurtas išmaniojo telefono išdėstymas 460 × 960 px.
- Planšetinio kompiuterio išdėstymo dydis yra 768 × 1024.
- Nešiojamojo kompiuterio dydis yra 1280 × 802.
- Kompiuterio dydis yra 1600 × 992.
Mobiliojoje svetainės versijojeturėtų būti kiek įmanoma supaprastintas, išlaikant visas pagrindines funkcijas. Jei maketas ruošiamas internetinei parduotuvei, taikant visus supaprastinimus, jame turėtų būti pagrindinis aprašymas, prekių katalogas, užsakymo parinktis, prekių krepšelis ir t.t. – visi reikalingi elementai visaverčiam veikimui, kaip ir viso formato peržiūra kompiuteryje. Mobiliosios versijos patogumas yra tas, kad čia galite išvengti papildomų puslapių, kad sutaupytumėte laiko įkeliant.
Pritaikomame turinyje, naudodami HTML kodą, galite paslėpti kai kuriuos elementus, kurių iš tikrųjų nereikia. Pavyzdžiui, esant didelei raiškai, svetainėje rodoma prekės kortelė su jos aprašymu, kaina, pristatymo informacija ir galimybe pridėti prie „Krepšelio“. Naudojant mobiliojo telefono skiriamąją gebą, procesas supaprastinamas iki nuotraukos, kainos ir pirkimo mygtuko.
Vidutinės ir minimalios skiriamosios gebos, skirtos interaktyviam dizainui, turėtų būti atsižvelgiama į tai, kad naudotojas galėtų lengvai skaityti ir peržiūrėti.
Išdėstymas
Adaptyvaus dizaino maketo tikslas – sukurti lankstų maketą arba, kaip dar įprasta sakyti: „guminį šabloną“. Apatinė eilutė yra ne vieno skaitmens puslapių dydžiai, o proporcingas šablono suspaudžiamumas, kad būtų lengva peržiūrėti visuose įrenginiuose.
Jis daugiausia sukurtas naudojant CSS. Kūrimo metu nustatomi ekrano matmenų valdymo taškai. Taigi nustatomas likusių objektų plotis. Norėdami tai padaryti, puslapio plotis nustatomas pagal css max-width ypatybę, atsižvelgiant į šiuos kriterijus, kitų elementų dydis parenkamas procentais. Pavyzdžiui, pagrindinio bloko dydispuslapis yra 600 pikselių, o šoninės juostos bloko (svetainės šoninės juostos) plotis yra atitinkamai 400 pikselių, turinio plotis bus 60%, o šoninės juostos plotis – 40%.
Yra kelių tipų interaktyvūs išdėstymai. Kiekvienas parenkamas atskirai, atsižvelgiant į savybes ir konstrukciją.
Peržiūros:
- Išdėstymo tipas, leidžiantis blokus apvynioti sumažinus ekrano skyrą. Kelių stulpelių svetainėse papildomi blokai perkeliami į ekrano apačią.
- Kai kiekvienam leidimui parengiamas atskiras modelis. Šio tipo interaktyvus dizainas užtrunka ilgiau, bet yra skaitomiausias.
- Paprastas dizaino tipas, kuriuo siekiama pritaikyti visų elementų mastelį. Tai nėra lanksti.
- Skydelės tipas patogus naudoti mobiliosiose programose, kai keičiant paties ekrano padėtį atsiranda papildomų funkcijų.
Reaguojančių sluoksnių kūrimas yra tik viena darbo dalis. Prisitaikantys vaizdai yra atskiras atvejis, turintis savo problemų ir jų sprendimo būdus.
Vienas vaizdas turi būti aiškiai rodomas esant skirtingoms ekrano skyroms. Čia yra problema – kaip užtikrinti, kad vaizdas visada išliktų toks pat, nepaisant raiškos pasikeitimo. Šiuo atveju nepakaks įvesti paprasto CSS kodo.
Pavyzdys: img {max-width: 250px;} – čia turėtumėte taikyti metodą, kai ribojamas konteinerio, kuriame yra vaizdas, dydis, o ne pats vaizdas. Tai atrodys maždaug taip: div img {max-width: 250px;}. Šis metodas išsprendžia problemąmažų vaizdų išdėstymas, bet netinka didelėms iliustracijoms.
Todėl daugelis kūrėjų nori naudoti javascript kalbas, kurios leidžia pritaikyti bet kokį vaizdą neperkraunant serverio. „Javascript“siūlo daugybę alternatyvių scenarijų.
Interaktyvaus išdėstymo privalumai ir trūkumai
Teigiami dalykai:
- Išsaugokite visų elementų vietą. Tai patogu, kai vartotojas yra pripratęs prie visos svetainės versijos.
- Išsaugoti domenus ir adresus.
- Visas kitų leidimų formatų tinkinimas.
Neigiami:
- Prarandamas funkcinis lankstumas
- Bet kokia informatyvi perkrova yra kupina ilgo žiniatinklio š altinio paleidimo, todėl daugelis vartotojų verčia pereiti prie greitesnių parinkčių.
Svetainės kūrimas
Svetainės struktūra suskirstyta į keletą skyrių ir blokų. Tradiciškai maketą sudaro viršutinė svetainės dalis (antraštė), logotipas, meniu, turinio blokas ir paskutinė svetainės dalis (pavyzdžiui, išsami kontaktinė informacija). Pažiūrėkime, kaip sukurti interaktyvų svetainės dizainą naudojant paprastą šabloną.
Pagalbinės žymos rašymui:
- wrapper – žyma, sujungianti visus šablono elementus;
- header h1 – logotipas;
- header – meniu ir kitų svarbių elementų antraštė;
- turinys - blokuoti;
- colLeft – turinio dydis;
- colDešinėje – šoninė juosta (šoninis stulpelis);
- footer – paskutinė svetainės dalis;
- medijos ekranas – rinkiniainorima skiriamoji geba.
Rašant svetainę šie elementai gali judėti skirtinga tvarka, atsižvelgiant į poreikį. Pavyzdžiui, esant didelei skyrai, meniu gali būti rodomas vertikaliai. Mobiliojoje versijoje išdėstymas gali būti sudarytas taip, kad meniu išsislinktų horizontalioje padėtyje.
- viewport – žyma, leidžianti išsaugoti teksto dydį mažesnėje dizaino versijoje. Jis yra tarp žymų.
- maksimalus plotis – optimizuoti svetainę, kad būtų išvengta tempimo, kai skiriamoji geba viršija 1000 pikselių.
Įgyvendinant išdėstymą, jQuery biblioteka labai padeda, kai reikia pakeisti blokų stilių ir struktūrą.
Kuo skiriasi interaktyvus dizainas ir mobilusis dizainas
Kad viską suprastumėte, apsvarstykite kelis iliustruojančius pavyzdžius, nes šių dviejų sąvokų painiojimas nėra neįprastas dalykas.
Turite suprasti, kad mobilioji versija yra pagrindinės svetainės su padomeniu analogas. Išorinis svetainės pateikimas visiškai pakartoja stilių ir funkcionalumą, o jos struktūra ir turinys gali skirtis nuo pagrindinės versijos, nes versija yra sumažinta iki būtinų elementų.
Reaguojantis dizainas yra optimalus visoms įrenginio skyroms. Jis keičiamas ir atvaizduojamas teisingai, nepaisant žiūrėjimo sąlygų.
Tai du skirtingi svetainės pristatymai, dėl kurių nenuilstamai siautėja ginčai, kuris iš jų yra geresnis. Pažymėtina, kad galutinis sprendimas dar nepriimtas. Kažkas giria šį dizainą, nurodydamas mados tendencijas ir daugybę privalumų. Mobilioji versija taip pat turi keletą privalumų, kurių jautrus dizainas neturi. Todėl pirmiausia turėtumėte suprasti pagrindinius poreikius.
Privalumai
Kuo interaktyvus dizainas geresnis nei mobilusis?
Universalumas. Mūsų laikais, taip pašėlusiai augant rinkai, tiesiog būtina informaciją pateikti kitaip, tenkinant vartotojų norus. Interaktyvus dizainas išsprendžia šią problemą.
Veiksminga reklama paieškos sistemose. Ko negalima priskirti prie pagrindinių prisitaikančio įrenginio privalumų. Paieškos sistemos nori teikti naudotojams interaktyvias svetaines.
Naudojamumas. Reaktyvus dizainas paprastai kuriamas naudojant geriausius dizaino sprendimus, o tai yra puiki dovana naudotojų vizualiniam suvokimui.
Lengvumas ir paprastumas tiek įgyvendinant projektą, tiek jį naudojant.
Geri konversijų rodikliai. Kadangi naudojant prisitaikantį dizainą yra daugiau rodymo galimybių, pati konversija padidėja.
Ekonomika. Tai palyginti pigiau nei sukurti ir reklamuoti atskirą versiją mobiliesiems.
Mobiliosios versijos privalumai ir trūkumai
Norint sukurti interaktyvų dizainą mobiliesiems, reikia universalumo ir nuoseklumo. Visų pirma, rekomenduojama detaliai surašyti techninę užduotį, kuri, žinoma, padės išvengti nereikalingo darbo ir sutaupys laiko, taip pat atsižvelgs į serverio, kuriame bus talpinama svetainė, ypatybes..
Yra tam tikrų privalumų ir trūkumų, susijusių su mobiliesiems pritaikymu dizainu.
Privalumai:
- Jei turite paruoštą svetainę, nereikia kurti mobiliosios versijos dizaino nuo nulio. Galima atlikti tik keletą pakeitimų, atlaisvinant šį išdėstymą nuo nereikalingų funkcijų.
- Dėl visų supaprastinimų, mobilioji versija atsisiunčiant laikoma greitesne.
- Naudotojas visame turinyje mato svarbiausią informaciją.
- Greitas įgyvendinimas. Yra papildinių, su kuriais galite pritaikyti mobiliesiems, net jei nežinote žymų ir kodų.
- Paieškos variklio pasirinkimas yra palankesnis adaptyviosioms versijoms, nes jas analizuoti reikia mažiau laiko.
Trūkumai:
- Ne visos mobiliosios versijos gali atitikti mobiliųjų įrenginių skiriamąją gebą. Žinoma, svetainė bus atidaryta, tačiau ekrano skiriamoji geba ne visada atitinka išdėstymą. Kartais gerai suplanuoto išmaniojo telefono dizainas gali atrodyti kitaip, kai atidaromas kaip planšetinis kompiuteris.
- Mobiliosioms versijoms reikia atskirų mokamų domenų.
- Yra keletas nedidelių problemų skelbiant turinį. Jei vienu metu yra kelios versijos, turinys turėtų būti koreguojamas visiems formatams iš karto. Naujos medžiagos pateikimas pagrindinėje svetainėje ir jos nukopijavimas į mobiliąją versiją gali būti laikomas vagyste. Kad išvengtumėte šios problemos, gali tekti įrodyti išteklių ryšį.
Įgyvendinimo metodai
Pagrindiniai diegimo metodai:
- Sukūrus maketų dizainą ir maketą, jis įkeliamas iki reikiamų matmenų naudojantoperatoriaus svetainė ir pagrindinis kodas. Tai klasikinis metodas, naudojamas kuriant vidutines ir mažas versijas (planšetinius kompiuterius, išmaniuosius telefonus ir kt.).
- BootStrap yra paprastas ir aiškus pritaikymo įrankių rinkinys. Tinka kuriant nukreipimo puslapio ir kitų nelabai sudėtingų žiniatinklio projektų versijas. Tai suteikia gerą galimybę sąsajos funkcijoms pritaikyti daugybę skirtingų stilių.
- Responsive Grid System yra populiarus universalių įrankių rinkinys. Lengva pritaikyti ir nereikalauja gilių žinių. Apima daug įvairių infografikų.
- GUMBY – CSS sistema, pasižyminti lanksčiu reagavimu ir puikiais įrankiais.
- Slapukai – leidžia įdiegti reaguojančius vaizdus. Automatiškai pridedami failai, kurių prašo naršyklė.
- ExpressionEngine yra dar vienas būdas sukurti reaguojančius vaizdus. Nustato, ar įrenginys yra mobilus ir gali pakeisti vaizdus į reikiamą skiriamąją gebą.
- ProtoFluid – užtikrina greitą prototipų kūrimą. Tinka visų tipų įrenginiams.
