Responsive arba prisitaikančio dizaino problematika

Išpopuliarėjus HTML5 standartui, atsirado galimybės kurti „intelektualesnius“ tinklalapius, gebančius prisitaikyti prie skaitytojo ekrano dydžio. Priešingai nei mobilios svetainės versijos, šie dizainai, dar vadinami prisitaikančiais (angl. responsive), nereikalauja papildomo nukreipimo į kitą domeno adresą, kad galėtume pamatyti informaciją. Priešingai, informacijos prisitaikymo virsmas vyksta akimirksniu net pakeitus mobilaus įrenginio padėtį iš vertikalios į horizontalią. Nors tai patogu, kadangi skaitytojas nėra blaškomas iš vieno adreso į kitą,  atsiranda tam tikrų problemų, kurios iš dalies riboja autoriaus kūrybiškumą.

Šiame straipsnyje norime pasidalinti keletu savo patirčių apie prisitaikančio dizaino problemas.

1. Kūrybinės ribos

Daug prisitaikančio dizaino svetainių atrodo labai panašiai struktūriškai. Interneto svetainės tampa ne tik panašios vizualiai pagrindiniais elementais, bet ir jų išdėstymu bei struktūra. Taip greičiausiai nutiko dėl to, kad tinklalapio prisitaikymo dėlei visą ekraną reikia tiksliai padalinti į lygias dalis, o po to šioms dalims numatyti mažėjimo, pozicijos pasikeitimo  funkcijas, tam tikras dalis iš viso pašalinti. Pasiskirstymais tampa įprastas: centre logotipas, žemiau keli „click to action“ mygtukai, dar žemiau – stulpeliai su informacija. Kartais dizainą papuošia spalvingas kontrastingas fono piešinys. O kas toliau, ar visos svetainės greitai atrodys panašiai vien dėl šio poreikio ?

2. Ilga techninių darbų trukmė

Testuojant ir derinant prisitaikantį dizainą,  daugumą testavimo proceso laiko praleidžiama tikrinant, kaip dizainas korektiškai atvaizduojamas pagal skirtingus naršyklės lango pločio parametrus. Tai darydami keliame duomenis į debesį ar į serverį, tikriname, radę klaidų vėl keliame, vėl tikriname. Patikrinę per vieną populiarų išmanųjį telefoną ir per kelias jame įdiegtas naršykles, tikriname per kitą, po to tikriname per populiariausias planšetes ir t.t. Tikimės, ši proceso dalis bus išspręsta, nes šie metai Mashable pavadinti prisitaikančio dizaino metai.

3. CSS/Javascript freimworkai ir derinimo problemos

Ekrano dydžių aptikimas yra nesudėtingas uždavinys naršyklei, todėl internete nesunkiai galima atrasti duomenis, kokiems ekrano dydžių diapazonams turėtų būti pritaikomos svetainės. Kad pagreitinti šį darbą ir kad suderinti kuo daugiau naršyklių, yra sukurti CSS/Javascript freimworkai. Jie turi įdiegtų skriptų, skirtų vienodai atvaizduoti svetainę daugumoje interneto naršyklių. Nors mes daugiau dirbame su Bootstrap, populiarūs YAML, Grid System, Less + Framework, Skeleton ir kiti frameworkai. Tačiau, kad ir koks patogus įrankis yra freimworkas, reikia labai tiksliai atlikti dizaino darbus, kad turėtume galimybę po to pikselio tikslumu nustatyti kiekvieno bloko funkcijas. Problemos prasideda, kai reikia nuo įprasto mąstymo pikseliais pradėti mąstyti procentinėmis išraiškomis. Šiomis išraiškomis mąstyti reikia pradėti jau kuriant dizainą Photoshop ar Corel programose. Darbų pradžioje visada tekdavo šią pamoką prisiminti.

Prisitaikančio dizaino galimybė savaime nėra jokia blogybė, jis kardinaliai pakeitė supratimą apie interneto svetainių atvaizdavimą mobiliuose įrenginiuose. Nors paminėjome pagrindines problemas, su kuriomis susiduriame, mielai pristatysime keletą dizaino pavyzdžių, kurie kaip bebūtų išsiskiria internete ir prisitaiko prie mobilių įrenginių. Pvz.,  čia.

responsive-web-design

 

Nuotrauka:  www.artistechnewmedia.com

7 komentarai

  1. Mindaugas

    Juk nebūtina kiekvieno pakeitimo kelti į serverį, o galima dirbti lokaliai ir savo tinkle tinklapi pasiekti iš bet kokio įrenginio prijunkto prie to pačio maršrutizatoriaus

    Atsakyti
  2. admin Įrašo autorius(-ė)

    Galima, jei svetainė paleista lokaliame serveryje. Bet kol kas tenkinamės paprastesniu tinklo sprendimu, kai debug aplinka kuriama lokaliame kompiuteryje.

    Atsakyti
  3. Mindaugas

    Ta ir turiu omenija, kad su bet kokiu įrenginiu prijungtu prie to pačio meršrutizatoriaus galima pasiekti lokalaus kompiuterio debug aplinka 😉
    Ir nebutina siusti failus, kad butu galima pažiurėti pakitimus tarkim su Ipad

    Atsakyti
  4. frogsign

    yra daug paruoštų įrankių wordpresui pavyziui, tereikia gabalus sudėti į puslapio kodą. Tai sutaupo daug laiko. Testuoti galima ir paprasčiausiai su firefox įskiepiu, kad ir web developer tool bar.

    Atsakyti
  5. admin Įrašo autorius(-ė)

    Na, kai kuri su tam tikru freimworku ne kartą teko patekti į situaciją, kai įskiepiai tampa bejėgiais prie tam tikrų parametrų, pvz., tarp 768 ir 800 px pločio. Internetiniai testeriai ir developer įrankiai rodo vieną, o tuo tarpu įrenginys – kitą. Tuomet imi į rankas planšetę ir testuoji 🙂 Beje, dėkui už patarimus, reiks išbandyti ir Mindaugo rekomenduotą būdą, gal tikrai sutaupysime laiko ?

    Atsakyti
  6. Mindaugas

    Kaip teko susidurti rimtų projektų niekas aplamai nedaro be Git`o, viskas daroma lokaliam kompe o tik viskam veikiant įdealiai sunčiam į serverį

    Atsakyti
  7. admin Įrašo autorius(-ė)

    Git, Svn ar pan. – ne tik parodo projekto mąstą, bet ir užtikrina paties projekto saugumą, išlikimą. Mes turime įdiegę SVN kodo saugyklą, kurioje saugome savo projektus tam atveju „jeigu kas nutiks“. O ir jei dirbama su daug kodo eilučių ir jas nuolat reikia keisti, be šių įrankių neišsisuksi.

    Atsakyti

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *