După ce a decis astfel un pas serios ca o extensie a site-ului pentru a afișa pe toate dispozitivele, dezvoltatorii se confruntă cu o alegere dificilă: pentru a face site-ul adaptiv sau o versiune mobilă separată.
Scopul acestui articol - pe baza surselor materiale tematice și experiență de dezvoltare personală, pentru a pune capăt acestei probleme.
Versiune mobilă site-ul pda.yandex.ru
Desigur, uneori, există cazuri când versiunea mobilă a prioritate mai mare. De exemplu, atunci când am creat concursul site-ul foto pentru „Beeline“ cu integrarea Instagram, aproape 90% din traficul provine de pe dispozitive mobile. Deci, alegerea soluțiilor se bazează pe problema în sine.
site mobil separat
Crearea unui site mobil separat este o soluție bună, în cazul în care există un mare vysokoposeschaemy site-ul proiectului, precum și o mare dorință de a face o reproiectare globală acolo, dar nevoia de versiunea mobilă devine ridicată. În acest caz, este necesar să se dezvolte un site mobil separat, care rezolvă toate problemă publicul mobil. În viitor, ambele site-uri sunt sprijinite în paralel.
Beneficiile în acest caz sunt următoarele:
- Autonomie. dezvoltatorii pot face modificări separat în spațiul de lucru și versiunea mobilă;
- timpul de pornire rapidă. în cazul unui site mobil este opțională de a utiliza o animație și chips-uri complexe, dezvoltatorii pot optimiza site-ul dvs. pentru utilizatorii mobili;
- Navigare I Easy: Site-ul este conceput ținând cont de problemele de audiență de pe dispozitive mobile.
Designul web
site-ul adaptiv se adaptează literalmente la orice dimensiune pagina prin rearanjarea blocuri de poziție, schimbarea dimensiunile fontului, uneori, înlocuind conținutul sau funcția blocuri.
Dacă vorbim despre site-urile de aspect adaptive, trebuie menționat faptul că, în sursele de specialitate folosesc adesea diferite nume sau tipuri de design. Și este o conduce câteva într-o fundătură, de aceea este necesar să se definească în mod clar termenii. Comună, care le unește - site-ul se adapteaza la orice dimensiune a ecranului, și se realizează numai ce metodă, în funcție de preferințele personale și de calificare a interpretului.
Design adaptiv (adaptive)
Caracterizat prin crearea de versiuni finite pentru fiecare rezoluția ecranului se realizează prin restructurarea blocurilor de conținut.
Design receptivă (receptiv)
Acesta combină caracteristicile „adaptive“ și „cauciuc“ design. El se adaptează la orice rezoluție a ecranului ca aspectul „de cauciuc“, dar, de asemenea, reconstruiește și ordinea blocurilor de conținut. Acest lucru este ilustrat în site-ul liquidapsive.com. Pentru a înțelege esența acestui principiu este posibilă prin selectarea tipului de proiectare (static, din cauciuc, de adaptare și receptiv) în colțul din dreapta sus și redimensionarea ferestrei browserului.
Această metodă, mesajul de programare este utilizat pe partea de server pentru a crea CSS si HTML pentru diferite dispozitive: utilizatorii de dispozitive mobile primesc un set de cod, dar utilizatorii de computere desktop - altele. Astfel, există un cod de optimizare în funcție de dispozitiv, care crește foarte mult viteza de descărcare de conținut.
Există și alte modalități de realizare, am alocat doar de bază. Direct pe proiecte reale, preferăm utilizarea fiecărei metode mai bune prin combinarea optimizarea codului și RESS flexibilitatea designului Resposive.
- greutate mare de pagini: Dezvoltatorii uita de multe ori pentru a face imagini podgruzku la o rezoluție mai mică pentru dispozitive mobile sau dezactivează script-uri podgruzku nedorite care nu sunt afișate, care afectează viteza de încărcare a paginii.
- Conținutul nu este adaptat: uneori, site-ul nu rezolvă problemele de scenarii de utilizare pentru dispozitive mobile, deoarece pe obiectivele desktop sunt oarecum diferite, iar acest lucru trebuie să fie luate în considerare în proiectarea.
Versiunile mobile separate de site-uri sunt adecvate pentru situațiile în care este necesar să o fac acum, dar dezvoltatorii în viitor va trebui să utilizeze resurse pentru a sprijini cele două site-uri, care de multe ori duce la faptul că versiunile sunt semnificativ diferite, și surclasează semnificativ versiunea desktop a mobilității funcționale. Această soluție este potrivit pentru site-urile care se schimbă rar - de exemplu, birouri corporative sau promostranitsy. În alte cazuri, se recomandă utilizarea de web design receptiv, ca Internetul presupune sub un răspuns rapid la evenimente curente și de schimbare funcțională. site eficient - este un instrument flexibil, care se adaptează rapid la orice situație. În caz contrar, este doar un set voluminos de CSS și „dzhipegov“.
Design receptivă este foarte potrivit pentru mass-media on-line, sau servicii Web, în cazul în care există modificări structurale frecvente (adăugarea / editarea noi secțiuni sau blocuri). Dezvoltarea unei versiuni de adaptare a site-ului necesită o versiune serioasă revizuire desktop sau un redesign complet. Posibile dezavantaje ale aspect adaptive apar numai la design-rea. Ceea ce are sens, deoarece o bună punere în aplicare necesită o abordare profesională, competențe relevante și cunoștințe de mai multe nuanțe.
Design-ul ar trebui să ia în considerare diferitele dispozitive, comportamentul utilizatorilor cu acestea, precum și o mulțime de nuanțe, cum ar fi touch-control, dimensiunea, viteza de download, elemente de animație și etc precum și să nu se piardă în abundența de detalii și pentru a păstra continuitatea interfeței, astfel încât să nu speria utilizatorul. Implementarea tehnică necesită cunoștințe de modul de optimizare a codului foarte atent testate și bine nu numai pe diferite browsere și dispozitive, dar (care este doar Android-dispozitive parc). Prin urmare, trebuie să alegeți cu atenție interpreții.
Și, în sfârșit, un exemplu interesant și ilustrativ design adaptiv:
Alex Bilozir Yan MecrazyJunkie Evgeny Kuzmin Renat Abyasov Dmitry Kaigorodov
Prea mult gândit la ce versiune a site-ului este mai bine să facă. Ne-am oprit pentru adaptare. redroid.ru/
Sa dovedit frumos, dar cu frâne mici, pentru că nu toate atât de lin. Flexbox, de exemplu, inhibă în Chromium :( Așteptăm un fix, dar, între timp, sperăm că cititorii vor avea de suferit. Deci, înainte de a face adaptivku, încă mai trebuie să aibă grijă de tehnologia care va fi folosit acolo :)
În general, toate caz, dar vreau să vorbesc în apărarea singur versiunea standului.
Din păcate, este practic singura modalitate de a începe cu publicul mobil pentru întreprinderile mici. O astfel de afacere, prin definiție, nu are pic de bani și încă 10-15% din vânzări pentru ei de multe ori scape. De exemplu, să ia un magazin online regional, prin care se face comanda 10 o zi - pentru a câștiga bani s / n fondator și un asistent. Crezi că au 150+ mii. Ruble pentru site-ul prin modificarea adaptivă?
Al doilea punct. Ok, suntem gata să facă imediat site-ul receptiv (pentru a începe o afacere), dar nu gratuit, deși. Ei bine, știi ce se va discuta în continuare.
Acest lucru este în afară de faptul de dezvoltator poate fi înșelător și proiectat site-ul este mai rău convertit. Am avut o experiență atunci când o simplă aterizare a adus 30% din înregistrările și noua, frumos și tehnologic - 20%. Astfel de experimente de afaceri și nu pot supraviețui.
Acum, să ne uităm la „problema“ de versiuni independente ale site-ului:
Suport pentru două site-uri - totul depinde de tipul de site-ul, dacă vorbim despre un site corporate în 10 pagini, nu există nici o problemă. Dacă despre un magazin online sau un portal de știri mic oraș, atunci avem tot felul de JSON, YML, XLM. Din lectura pe care trebuie să ne străduim pentru a elimina munca manuală cu versiunea mobilă.
Complet site-uri diferite pentru utilizator - structura site-ului mobil poate fi foarte aproape de versiunea mare, și de cele mai multe vizite la aceste site-uri vor fi cele mai multe dintre utilizatori „o singură dată“. Plus necesitatea de a gestiona trafic, astfel încât utilizatorul efectuează acțiunea dorită foarte repede.
URL suplimentară - o problemă tehnică simplă, este suficient pentru a identifica în mod automat corespondența dintre paginile desktop și versiunile mobile. Aceleași Forbes ușor se poate face prin ID-ul în Urla, cât și pentru alte cazuri, puteți compara titlurile paginilor și data de actualizările de conținut.
Viteză de descărcare - (!) Se referă la la determinarea tipului de dispozitiv folosim js, prima sarcină va fi un pic mai mult. Dar, din nou, poti face totul la nivel de anchete înainte de expediere site-ului. Dar acest lucru nu este vorba despre deciziile de buget.
Probleme cu SEO - ai auzit despre robots.txt?
Versiuni diferite pentru diferite dispozitive mobile - aceasta este într-adevăr o provocare interesantă, dar evoluția bugetului în acest caz, va fi factorul determinant. În general, noi nimeni nu deranjează să facă o mică versiune mobilă daptivnuyu.
Deci, băieți, nu îngropa versiuni mobile separate. Sunt sigur că a sosit timpul lor și vom vedea extinderea cotei lor.