Ce este designul web responsive. Modalități de implementare a adaptabilității interfeței. Toate eforturile sunt pe creativitate, nu pe căutarea unui buton
Pe acest moment Aproximativ 11-12% dintre cele 100.000 de site-uri cele mai vizitate sunt responsive și nu există nicio îndoială că acest număr va crește în următorii câțiva ani.
Pe măsură ce mai multe organizații își suflecă mânecile pentru a îmbrățișa realitățile web cu mai multe dispozitive, merită să luăm în considerare câteva strategii folosite pentru a atinge nirvana:
Modernizare adaptivăReproiectarea responsive este procesul de preluare a unui site web existent doar pentru desktop și, în esență, „remodelarea lui responsive”.
Dan Cederholm
Pentru majoritatea organizațiilor, crearea la scară largă a unui nou design de la zero nici măcar nu este luată în considerare. Acesta este motivul pentru care modernizarea adaptivă este o abordare populară pentru a crea o interfață bună pentru dispozitive mobile.
Avantaje- Relativ rapid.
Există destul de multe moduri de a face o modernizare receptivă, această strategie ar putea fi adăugarea unui fișier small-screens.css pe site. În ciuda acestui exemplu destul de grosolan, modernizarea adaptivă este o opțiune atractivă pentru un număr mare de organizații, deoarece nu necesită reconstruirea totul de la zero. - Familiar.
Nu derutează utilizatorii. Oamenii au petrecut ani de zile obișnuindu-se cu interfața și, modernizând cea existentă, organizațiile mențin o abordare familiară, îmbunătățind în același timp viața oamenilor cu dispozitive mobile. - Mai rapid din punct de vedere organizatoric.
Din punct de vedere politic, modernizarea interfeței este mai sigură decât a începe de la zero. Vor exista mai puține dezbateri despre ce nuanță de verde să aleagă, ce fotografii de stoc banale să folosească, iar conducerea nu va trebui să-și răsucească brațele. Acest lucru permite echipelor să lanseze site-uri receptive mai rapid.
- Afectează doar o mică parte.
Din nou, există multe opțiuni pentru a face o remodelare, dar scopul majorității dintre ele este să „o facă drăguță”. Concentrându-se pe reproiectarea aspectului, modernizarea pierde adesea numărul mare de alți factori care trebuie luați în considerare la crearea proiect de succes pentru diverse dispozitive. - 10 litri de apă într-un borcan de trei litri.
Deoarece site-urile desktop sunt concepute numai pentru computere desktop (și adesea durează mult timp), ele pot conține multă dezordine. Și din moment ce modernizarea constă în principal în retopirea aspectului, majoritatea problemelor legate de conținut nu sunt pe deplin luate în considerare. - Performanţă.
E ceva ciudat în a scrie cod pentru sprijin mai bun dispozitive mici. Eliminarea lucrurilor inutile poate merge prea departe, dar fără a te concentra pe productivitate, nu va crește de la sine. - Cel mai prost suport.
Interogările media, concepute inițial pentru computere desktop, sunt slab acceptate pe majoritatea dispozitivelor mobile. - Remedieri temporare.
Îmi vine să mor când aud oameni care îmi cer să „fac responsive” ceva, de parcă ar fi doar o casetă de selectare în planul proiectului (ceea ce uneori este de fapt). Acest tip de gândire limitată ratează oportunitățile reale pe care le oferă designul responsive.
Versiunea mobilă vă oferă posibilitatea de a planta o sămânță care va crește din site-ul dvs. moștenit.
De-a lungul timpului, un site învechit poate fi eliminat, iar site-ul va evolua de la a fi mai întâi pe mobil, receptiv și ținând cont de tendințele viitoare.
- Risc mai mic.
Majoritatea organizațiilor încă văd traficul de pe dispozitivele mobile ca o minoritate. Prin urmare, lansarea unui site web responsive mobil permite acestor organizații să testeze apele fără a fi nevoite să sară în subiect cu capul întâi. - O oportunitate de a învăța să fii flexibil.
Designerii pot învăța să gândească mai flexibil. Dezvoltatorii vor învăța nenumăratele trucuri ale dispozitivelor Android. Managerii își pot da seama cum să se îndepărteze de perfecțiunea pixelilor. Un site mobil receptiv poate fi un sandbox grozav pentru învățare. - Infrastructură.
Echipele pot învăța cum să rezolve problemele de management al conținutului, cum ar fi crearea de imagini, odată pentru totdeauna - Îndepărtați excesul.
Această abordare oferă o oportunitate excelentă pentru echipe de a se întreba „avem cu adevărat nevoie de asta”, concentrându-se totodată pe performanță. De ce? Pentru că obiectivul lor principal este îmbunătățirea experienței utilizatorului site-ului lor pe dispozitivele mobile. - Viitorul sunt site-urile web care au în primul rând mobil.
Deși inițial lipsit de conținut sau funcționalitate, cu suficient timp și efort, aceste site-uri mobile își pot înlocui în cele din urmă strămoșii de pagină completă.
- Este încă un site mobil.
Indiferent dacă este responsive sau nu, această abordare păstrează în continuare un număr mare de dezavantaje ale site-urilor mobile: probleme cu redirecționarea URL-urilor, managementul conținutului, conținut consistent, consistență, optimizare SEO și altele. - Remedieri temporare.
Multe site-uri mobile sunt create ca un band-aid - pentru a opri sângerarea. Astfel de site-uri sunt create cu scopul de a descărca traficul în creștere provenit de pe dispozitivele mobile. Aceste soluții pot satisface în continuare nevoile existente, dar având în vedere tendințele viitoare, este puțin probabil să vă salveze pe termen lung. - Probabilitatea de a se ofili pe viță de vie.
Unele organizații pot începe astfel de proiecte, ajung la jumătate și apoi abandonează totul până la trecerea bugetului pentru anul următor. - Design pentru ecrane mici.
Deoarece accentul inițial este pe ecranele mici, portarea ulterioară a interfeței pe ecrane mai mari fără a pierde calitatea poate fi o provocare.
Defecte - 50 de nuanțe de imperfecțiune.
Această abordare poate eșua deoarece utilizatorii vor trebui să se confrunte cu o interfață Frankenstein care este atât veche, cât și nouă. - Posibilitatea de ofilire pe viță de vie.
Aceste tipuri de proiecte au nevoie de obiective finale clare sau pot ajunge blocate în purgatoriu pentru totdeauna. - Coexistența tehnică.
Ce se întâmplă când un modul, folosind cele mai noi tehnologii și tehnici, se ciocnește frontal cu un modul învechit? Există multe provocări arhitecturale la această abordare.
Aceasta este traducerea unui articol intitulat „Responsive Strategy” de Brad Frost. Tradus de UXDepot cu aprobarea autorului.
PS de la traducători: Sper că v-a plăcut articolul. Vom fi bucuroși dacă semnalați orice erori în traducere, astfel încât să le putem corecta prompt. Scrie-ne la [email protected], Vă rog:)
„Hermitage” nu este doar o interfață modernă pentru managementul site-ului web - este un concept care combină soluții de interfață și un „pachet” de recomandări pentru dezvoltatorii web. „Hermitage” este un set de reguli, după care vei crea un proiect web rapid, sigur, convenabil și ușor de gestionat.JavaScript este dezactivat în browserul dvs
„De mulți ani lucrăm la interfața produsului, încercând să o facem simplă și convenabilă pentru utilizatori în munca zilnică de gestionare a site-ului. De asemenea, luăm în considerare interesele dezvoltatorilor web, care se confruntă cu sarcina dificilă de a crea rapid site-uri web funcționale cu cele mai multe diverse modele.
Și oricât de mult sperăm, fiecare client își va dori designul și structura site-ului propriu, individual. Și, desigur, toată lumea își dorește ca site-ul să se deschidă rapid și să poată face față traficului mare. Rezolvând aceste probleme pas cu pas, am dezvoltat un concept care combină tehnologii și soluții de interfață și l-am numit „1C-Bitrix: Hermitage”
„Sihăstria” este: Reproiectarea „capotei” - Re:HermitageInterfața părții administrative a produsului este elegantă și expresivă, dar, cel mai important, este de înțeles la prima vedere și nu necesită pregătire. Lucrul cu „panoul de administrare” este plăcut și ușor. Designul este adaptat pentru a funcționa cu interfețele touchscreen ale dispozitivelor mobile - smartphone-uri și tablete.
Proiectarea sectiei administrative
Conceptul de design a fost dezvoltat de AIC. Interfața inteligentă este plăcută din punct de vedere estetic și evocă emoții plăcute imediat la prima vedere la „panoul de administrare”. Chiar și cu o familiarizare rapidă cu „panoul de administrare”, puteți identifica rapid comenzile principale, puteți înțelege funcționarea acestora și puteți reduce semnificativ timpul de antrenament.
Control
Conceptul de interfață de gestionare a site-ului web Gestionarea informațiilor este o muncă zilnică și facem totul pentru a face această muncă plăcută! În fiecare versiune noua produs, sunt luate măsuri pentru dezvoltarea Panoului de control. Acest lucru ia în considerare experiența utilizării acestui panou atât de către dezvoltatorii, cât și de către clienții 1C-Bitrix. Ca rezultat, Panoul de control este îmbunătățit - dobândește nu numai un aspect nou, ci și capabilități noi.Panoul conține două marcaje, între care puteți comuta și gestiona cu ușurință conținutul exact acolo unde aveți nevoie. Desigur, Panoul de control și ambele moduri ale sale sunt disponibile numai pentru utilizatorii înregistrați și apar imediat ce vă conectați la site.
Panoul de control al site-ului. Interfață „Hermitage”
Managementul site-ului este împărțit în două moduri principale:
Modul de lucru „Deasupra site-ului”
„Schit” în ceea ce privește managementul include următoarele funcții:
Funcționalitatea panoului de control în cadrul conceptului 1C-Bitrix: Hermitage Vă rugăm să rețineți că funcționalitatea panoului de control depinde de drepturile care vi se acordă ca utilizator al site-ului. Dar puteți merge la secțiunea Administrare de oriunde pe site și în orice mod al Panoului de control. Modul de editare Făcând clic pe butonul Mod de editare, treceți la modul de editare. Și ceea ce trebuie remarcat în mod deosebit este că puteți configura includerea acestui mod atât cu cât și fără reîncărcare a paginii. Gestionați toate elementele și componentele pe pagini publice! La urma urmei, modul de editare include nu numai posibilitatea de a schimba pagina curentă sau elementele blocurilor de informații, cum ar fi știrile sau produsele din catalog. În modul de editare, puteți la fel de ușor - chiar „deasupra site-ului” - să gestionați componentele incluse în șablonul site-ului și în zona de lucru principală a unei anumite pagini.
Adăugați, editați și ștergeți datele componente direct din partea Publică a site-ului. Pentru aceste acțiuni nu este absolut necesar să mergeți la secțiunea Administrativ. Puteți edita sau șterge oricare dintre elementele din listă folosind butoanele care apar atunci când treceți mouse-ul peste aceste elemente.
Puteți „retroduce” ultima acțiune
Nu trebuie să vă fie teamă să faceți ceva greșit pe pagină, deoarece aveți întotdeauna opțiunea de a anula ultima acțiune. Această implementare a funcționalității Coș de cumpărături pe site-ul dvs. acoperă toate operațiunile privind conținutul acestuia. După adăugarea, schimbarea paginii dacă este necesar, pur și simplu anulați ultima acțiune. Modul minimizat Modul de operare minimizat va fi convenabil pentru cei care știu deja să lucreze cu sistemul. Pur și simplu minimizați Panoul de control pentru a elibera spațiu pe ecran. În același timp, chiar și un Panel minimizat păstrează funcțiile de management!
Puteți lucra cu Meniu, puteți actualiza produsul, puteți activa sau dezactiva modul de editare, puteți reseta memoria cache sau puteți accesa modul Administrare. Pe scurt, panoul pliat continuă să fie funcțional! Apropo, puteți restrânge și extinde din nou panoul cu dublu clic obișnuit.
Administrare Secțiunea administrativă a produsului este concepută pentru gestionarea completă a întregului proiect Internet. Desktop-ul din partea administrativă este personalizabil individual, echipat cu gadget-uri și echipat cu un sistem de căutare în meniu. Puteți crea câte „Desktop-uri” doriți în produs.
Dezvoltatorii își pot crea propriile gadgeturi și apoi le pot adăuga pe desktop. De exemplu, puteți folosi gadgeturi pentru a afișa liste de comenzi recente, știri ale companiei, colecții de documente etc. „Căutare live” funcționează direct din „Desktop” din meniul administrativ. Căutare vă duce instantaneu la elementul de meniu dorit. Și nu contează câte secțiuni și subramuri conține meniul. Transliterare
Nu trebuie să vă faceți griji cu privire la ce nume de fișier să atribuiți oricărei pagini! Și nu aveți nevoie de programe de traducere pentru a-i traduce numele în Limba engleză. Doar creați o pagină și setați-i titlul - veți obține automat numele fișierului.
Expertul de creare a paginii translitera și traduce automat titlul paginii și îl sugerează ca nume de fișier document pentru o mai bună optimizare a motorului de căutare. Acces la pagină O pagină nouă de pe site nu ar trebui să fie afișată imediat lumii. Mai întâi trebuie să îl verificați și să îl discutați cu colegii, apoi să îl aprobați de la conducere. Nu îl publicați - când îl creați, bifați doar caseta - „Restricționați accesul la pagină”. Specificați grupurile de utilizatori cărora doriți să le afișați - trebuie doar să selectați aceste grupuri.
Cui vrei să-i arăți pagina?
Abilitatea de a seta restricții de acces la o pagină imediat după crearea acesteia va facilita semnificativ munca managerilor de conținut atunci când lucrează cu conținut care necesită muncă îndelungată prin acord, editare.
Interfață
Gestionează-ți site-ul web ușor și profesional! Interfața produsului Hermitage se adaptează la munca ta zilnică cu site-ul, îți amintește preferințele și îți permite să aloci mai puțin timp sarcinilor tehnice. Interfața pare să „plutească” deasupra site-ului, permițându-vă să vedeți ceea ce faceți și arătând imediat rezultatele.„Plasați cursorul deasupra site-ului, efectuați acțiuni cu ușurință, nu pierdeți contextul muncii dvs. și obțineți imediat rezultate vizibile. Interfața îți va aminti preferințele - setări de listă, filtre, formulare de introducere... Și data viitoare vei petrece mai puțin timp acestei acțiuni.
Utilizați butonul familiar „Meniu” pentru a accesa toate funcțiile site-ului dvs. cu un singur clic. Totul este clar pentru începători și convenabil pentru profesioniști. Nu te obișnuiești cu site-ul, dar site-ul se obișnuiește cu tine, se adaptează la obiceiurile și sarcinile tale”
CEO, „1C-Bitrix”, Serghei Ryzhikov
Toată energia ta este în creativitate, nu în căutarea unui buton! Gestionarea zilnică a informațiilor devine mai obișnuită și cheltuiți energie pentru sarcini creative, mai degrabă decât pentru publicarea tehnică a paginilor, secțiunilor și meniurilor.„Din versiune în versiune, din ce în ce mai mult funcţionalitate, Toate mai multă acțiuneîn interfață. Am depus mult de lucru pentru a reproiecta interfața produsului, în special panoul de control al utilizatorului.
Noua interfață adaptivă simplifică căutarea acțiunii dorite, grupează acțiunile pe roluri ale utilizatorului și le evidențiază pe cele mai frecvente pentru a nu aglomera panou de lucruși să îi fie mai ușor de înțeles utilizatorului.”
Vadim Dumbravanu, manager de proiect la Bitrix
O interfață adaptivă este:- Editare contextuală – gestionați conținutul direct pe site. Dacă trebuie să corectați pagina, faceți clic pe „Editați” chiar acolo. Dacă trebuie să adăugați o secțiune, faceți clic pe „Creați”. Nu pierde contextul muncii tale. Interfață nouă un fel de „plutește” deasupra site-ului, permițându-vă să vedeți ceea ce faceți și arătând imediat rezultatele.
- Adaptare individuală la utilizator - interfața produsului reține cele mai recente acțiuni, setări de filtrare și modalități convenabile de a prezenta informații. Interfața se adaptează la munca de zi cu zi și vă permite să petreceți din ce în ce mai puțin timp pe ea în fiecare zi.
- Butonul „Meniu” - familiar și acces rapid un clic către toate funcțiile site-ului dvs. Este foarte confortabil! În plus, când accesați „” folosind butonul „Meniu”, pagina din care a fost făcută tranziția este reținută - acest lucru nu este mai puțin plăcut!
- Adaptare la rol - pentru efectuarea cu încredere a muncii zilnice. Dezvoltatorii au acces la toate instrumentele pentru dezvoltarea și personalizarea unui site web. Editorii site-ului lucrează numai cu conținut, fără teama de a se sparge munca tehnica proiect. Fiecare își îndeplinește clar sarcina.
- Expertii pentru crearea de conținut vă vor ajuta să alegeți numele fișierelor și ale secțiunilor, să completeze meniul site-ului și să vă ajute să completați proprietățile. Acțiunile zilnice complexe devin simple. Pur și simplu nu putem scrie conținutul pentru tine; maestrul se va ocupa de restul pentru tine.
- reduceți costul formării de noi utilizatori - nu este necesară instruire, aveți nevoie doar de timp pentru ca site-ul să se obișnuiască cu dvs. Perioada de obișnuire cu interfața este de doar 1 oră!
- transforma sarcinile de rutină într-un proces creativ, cheltuiește energie pe sarcini creative, mai degrabă decât pe publicarea tehnică a paginilor, secțiunilor și meniurilor;
- reduceți timpul petrecut cu gestionarea site-ului web, făcând gestionarea zilnică a proiectelor obișnuită;
- eliminați temerile noilor utilizatori de a „rupe proiectul” și evitați majoritatea greșelilor atunci când gestionați conținutul.
Lucrările la interfața administrativă a produsului continuă. Utilizatorii 1C-Bitrix: Site Management pot descărca toate actualizările interfeței folosind tehnologia SiteUpdate. Veți afla mereu despre noi oportunități pe site, precum și în buletinele noastre informative.
Editor vizual încorporat Editorul vizual HTML este deja încorporat în produs și nu trebuie să îl instalați. Cu acest editor vă puteți schimba paginile de pe site în timp real - chiar prin browser. Editorul vă permite nu numai să editați și să formatați text obișnuit, ci și să lucrați cu componente vizuale.
Editorul vizual este deja încorporat în site-ul dvs. web!
Editorul vizual include o interfață ușoară, frumoasă și ergonomică. Scripturile prietenoase ale editorului vă permit să lucrați convenabil și rapid cu conținut, de exemplu, inserați linkuri și imagini.
Deci, atunci când inserați o imagine într-o pagină, puteți selecta imediat locația și dimensiunea acesteia. Puteți vedea imediat cum arată în text.
WYSIWYG (pronunțat „wee-zee-wig”, din engleza What You See Is What You Get - „what you see is what you get”) este o metodă de editare în care materialul corectat în timpul procesului de editare arată exact la fel ca si rezultatul final.
Editare în timp real Editorul include toate instrumentele de care are nevoie un manager de conținutPlasați componente pe pagină trăgându-le pur și simplu cu mouse-ul dintr-un panou special și configurați imediat parametrii acestora, care stabilesc aspectul informațiilor care se modifică dinamic pe site-ul dvs.
Editor vizual: editarea parametrilor componentelor
Un mecanism de căutare convenabil vă ajută să găsiți în cel mai scurt timp componenta necesara pentru plasare pe pagină. Când copiați text de pe Web și din alte surse, de exemplu, Word, codul este „curățat” de etichetele redundante. Mai mult, acest cod lipit devine cod HTML5 valid și corect. În același timp, rezultatul muncii editorului este întotdeauna același - indiferent de browserul pe care îl utilizați!
Pe baza rezultatelor procesării dorințelor utilizatorilor, editorul este îmbunătățit constant. Este convenabil să efectuați multe operații în el și să lucrați la crearea paginilor și la formatarea textelor!
Evidențierea codului și numerotarea liniilorEste foarte convenabil să editați pagini precum PHP, deoarece editorul încorporat în sistem evidențiază codul și numerotează liniile. Și paginile în sine sunt salvate „în stil Ajax” „în fața ochilor noștri” - fără a reîncărca pagina și fără a pierde focalizarea!
Schema de editor întunecată
- lumina de fundal Sintaxa HTML+ PHP + Javascript + SQL;
- iluminarea de fundal este comutabilă și o puteți opri fără a reîncărca pagina;
- 2 teme de culoare - deschis și întunecat;
- Trecere rapidă la o linie după numărul ei;
- Tab/Shift+Tab pentru a insera și a anula file.
Gestionarea informațiilor este o muncă de zi cu zi, facem totul pentru a face această muncă plăcută!
Modul „Split” Vertical și orizontalAcum, editorul dvs. are 2 moduri cu drepturi depline „divizat” - vertical și orizontal. Este foarte convenabil să lucrezi în modul combinat.
Puteți vedea codul paginii și afișarea acestuia în același timp. Puteți face modificări în orice parte a ferestrei - editați vizual pagina sau editați codul acesteia.
Split - împărțirea unei ferestre în două părți - editare vizuală și editare de cod.
Căutare/înlocuire convenabilă Găsiți o componentă într-o secundă!Editorul are o funcție de căutare/înlocuire convenabilă încorporată - visul oricărui manager de conținut. Acum puteți, de exemplu, să găsiți instantaneu componenta necesară și să o „trageți” pe pagină. Nu trebuie să vă amintiți unde se află în structura componentelor. Acest lucru este deosebit de valoros atunci când există un număr mare de componente utilizate.
Editorul vizual încorporat în produs este compatibil cu toate browserele populare. Editorul funcționează la fel de corect în toate browserele populare și folosește aceleași funcții pentru a funcționa. Puteți edita paginile de pe site în orice browser - rezultatul va fi același.
Cod de „curățare” la introducerea codului de curățare!Editorul gestionează inserarea textului din diverse surse cu curățarea automată a conținutului. Când copiați text, de exemplu, din Word, codul este convertit în HTML5. Toate etichetele inutile - nesemnificative - sunt eliminate din cod.
Dezvoltatorii web vor aprecia implementarea funcționalității panoului de componente și a panoului de fragmente (într-un singur slide). De asemenea, au capacitatea de a se personaliza la nivel JS și un model de eveniment extins.
HTML5 valid și corect Cu validare - totul este ok!HTML5 nu doar vine, este deja aici. Cu al tău încorporat în sistem editor vizual nu trebuie să vă faceți griji cu privire la validitatea și corectitudinea codului paginii de pe site-ul dvs. Editorul generează exact tipul de cod care este perceput corect de browserele moderne.
Nu este nevoie să scrieți manual codul corect
Acest editor este încorporat în site-ul dvs. web, iar managerul dvs. de conținut nu trebuie să se gândească la ce elemente structurale sunt folosite pentru a marca textele.
De ce aveți nevoie de HTML5 valid
Avantajele trecerii la HTML5 valid sunt de netăgăduit; ele au fost mult timp discutate de dezvoltatorii web (de exemplu,
Toate acestea mulțumesc tehnologie nouă cache gestionat (Dependențe Cache), care servește tocmai pentru lucru confortabil editor de conținut și actualizare automata datele imediat după ce au fost modificate. Această tehnologie vă permite să afișați modificările pe site fără a aștepta ca cache-ul să fie actualizat, ceea ce este realizat de sistem la perioade de timp specificate. De aceea, aceasta este una dintre cele mai importante componente tehnologice ale experienței convenabile pentru utilizator cu site-ul.
- Pentru a accelera site-ul și a scala proiectul, vă recomandăm să susțineți tehnologia Autocaching și să utilizați tehnologia Managed Caching.
- Auto+Gestionat
Pentru dezvoltatori
„Hermitage” pentru dezvoltatorii web Conceptul „Hermitage” include un întreg set de recomandări tehnologice pentru dezvoltatorii web. Aceasta este o listă impresionantă care conține recomandări pentru a vă crea aplicațiile „corect”. Acesta este un concept Hermitage pentru dezvoltatori, care arată exact cum să dezvolte aplicații pentru platforma Bitrix. Dezvoltați astfel încât aceste aplicații să ofere confort și ușurință de lucru în interfața Hermitage. Cele mai multe dintre aceste recomandări sunt bine cunoscute dezvoltatorilor experimentați.Recomandări pentru dezvoltatorii web:
- Proiecta. Efectuat în conformitate cu. Mai ales în acele momente care se referă la crearea propriului șablon de design și aplicarea acestuia. Am încercat să dezvoltăm interfețe de control în așa fel încât să nu limităm dezvoltatorii web în opțiunile de layout și design.
- Se recomandă utilizarea componentelor standard de meniu cu cache în șablonul site-ului. ()
- Se recomandă crearea unui site web folosind . Fie utilizați componente standard, fie, în scopul proiectului, creați componente personalizate pentru nevoile sale specifice.
- Recomandăm la configurare aspect. Acest lucru le va asigura siguranța la actualizarea produsului. Puteți copia șablonul direct din interfața publică în modul de editare. O componentă poate avea un număr nelimitat de șabloane.
- Vă recomandăm ca dacă modificați componenta 1C-Bitrix sau vă creați propria componentă, să o creați.
- Când dezvoltați componente, puteți lua în considerare .
- Utilizarea este recomandată în cazul creării de funcționalități complexe sau vizualizări cu mai multe pagini, atunci când conectarea unor componente individuale va fi dificilă pentru utilizatori.
- Pentru a accelera site-ul și a scala proiectul, vă recomandăm să susțineți tehnologia Autocaching și să utilizați tehnologia Managed Caching.
- La configurarea componentelor, este recomandabil să setați parametrii componente la Auto+Managed cu un timp lung de stocare în cache (1-12 luni dacă lucrați în întregime folosind tehnologia Cache Dependencies).
- Este de dorit ca în modul Autocaching componenta să nu execute interogări către baza de date sau să execute doar acele interogări pentru care stocarea în cache este irațională.
- Acolo unde este posibil, suportul pentru optimizarea motoarelor de căutare este de dorit.
- Vă recomandăm asistență pentru gestionarea elementelor din listă prin API-ul produsului. Acest lucru va permite utilizatorilor să editeze și să șteargă elemente direct de pe paginile site-ului.
- Este recomandat să proiectați dezvoltări mari în propriile module cu un API și includerea propriilor componente în ele. Cu plasarea lor ulterioară în MarketPlace și capacitatea de a se actualiza folosind tehnologia SiteUpdate. ()
- Se recomandă utilizarea API-ului platformei pentru a lucra cu obiecte de sistem. Interogări directe extrem de nedorite către baza de date. Acest lucru poate face ca actualizările de produs să fie incompatibile cu implementarea partenerului.
- Menținerea integrității nucleului produsului și utilizarea recomandărilor noastre atunci când implementăm proiectul pentru a asigura capacitatea de a actualiza produsul folosind tehnologia de actualizare SiteUpdate. Utilizați sistemul de evenimente interne pentru a schimba logica produsului sau pentru a solicita apariția unor evenimente noi. (
Utilizatorii de internet navighează pe site-uri web diferite dispozitive cu ecrane de diferite dimensiuni. Dimensiunile ecranului se schimbă constant, așa că este important ca site-ul să se adapteze la oricare dintre ele. Există două abordări principale pentru a crea site-uri web care sunt ușor de adaptat tipuri diferite dispozitive:
Responsive Design (RWD) - design responsive - proiectarea unui site cu anumite valori de proprietate, de exemplu, o grilă de layout flexibilă, care permite unui layout să funcționeze pe diferite dispozitive;
Adaptive Design (AWD) - design adaptiv, sau afișare dinamică - proiectarea unui site cu condiții care se modifică în funcție de dispozitiv, pe baza mai multor aspecte cu lățime fixă.
1. Tehnici de design receptivFilosofia din spatele designului web responsive este de a face site-ul ușor de vizualizat pe orice dispozitiv, indiferent de dimensiunea ecranului. Expresia design responsive a fost inventată de Ethan Marcotte în 2011. Caracteristica principală a designului web responsive este că, datorită rețelei fluide, aspectul răspunde automat la modificările dimensiunii ecranului, umflându-se sau contractându-se ca un balon.
Responsive Web Design combină trei tehnici - aspect flexibil bazat pe grilă, imagini flexibile și interogări media.
Flexibilitatea aspectului se bazează pe utilizarea unităților de măsură relative în loc de valori fixe de pixeli, permițând ajustarea lățimii pentru a se potrivi spațiului disponibil.
Flexibilitatea conținutului textului este obținută prin calcularea dimensiunilor fonturilor în raport cu dimensiunea implicită a fontului de 16 px, de exemplu pentru o dimensiune fixă a font-size: 42px, dimensiunea relativă este 42px / 16px = 2.625em.
Problema imaginilor flexibile este rezolvată folosind regula img (lățime: 100%; lățime max: 100%;) pentru toate imaginile de pe site. Această regulă asigură că imaginile nu sunt niciodată mai largi decât containerele lor și nu depășesc niciodată dimensiunile lor reale pe ecrane mai mari.
Interogările media modifică stilurile în funcție de caracteristicile dispozitivului asociate cu afișarea conținutului, inclusiv tipul ecranului, lățimea, înălțimea, orientarea și rezoluția. Interogările media creează un design receptiv care aplică stiluri adecvate fiecărei dimensiuni de ecran.
Orez. 1. Responsive Design Tehnici suplimentare de Responsive Design Scalabil Grafică vectorială- utilizați imagini svg care se scalează la orice dimensiune fără a pierde calitatea și arată bine pe ecranele Retina.
Interfețe de card - Folosiți așa-numitele interfețe de card - forme dreptunghiulare cu colțuri rotunjite care reprezintă containere pentru conținut. Astfel de blocuri sunt unități de interfață autonome și sunt ușor de mutat în jurul aspectului.
Orez. 2. Pinterest, aspect bazat pe carduri Păstrarea doar a elementelor esențiale este o tehnică bună, mai ales pentru design responsive. Creați interfețe minimaliste receptive și prietenoase, care devin din ce în ce mai populare în zilele noastre.
Orez. 3. Aspect hotelier, minimalism în web design Prioritizează și ascunde conținutul corect - folosește comenzi ascunse, în special pentru dispozitivele cu ecrane mici. Ferestrele pop-up, filele, meniurile off-canvas și alte tehnici similare vor ajuta la reducerea numărului de elemente de pe pagină. Eliberând spațiu de elemente inutile, veți face interfața convenabilă și ușor de utilizat.
Creați un spațiu mare pe care se poate face clic pentru butoanele dvs. - cu cât zona pe care se poate face clic este mai mare a unui buton, cu atât este mai ușor pentru utilizator să interacționeze cu acesta.
Adăugați interactivitate la interfețele dvs. - ca răspuns la o acțiune a utilizatorului, creați o acțiune de răspuns - o animație care va funcționa atunci când treceți cu mouse-ul peste un element pe dispozitivele desktop și când atingeți un element pe dispozitivele mobile.
2. Personalizarea ferestrei de vizualizare folosind metaeticheta de vizualizareLa browsere mobile Pentru sisteme de operare Android și iOS nu redimensionează automat paginile site-ului; este utilizată o etichetă specială cu atributul name="viewport". Această etichetă vă permite să setați o anumită valoare pentru parametrii de lățimeși scara inițială:
— initial-scale=1 înseamnă că dimensiunea paginii din browser va fi egală cu 100% din dimensiunea ferestrei de vizualizare. Adică, raportul dintre pixelul fizic și pixelul css va fi 1:1;
— width=device-width înseamnă că lățimea paginii va fi egală cu 100% din lățimea ferestrei oricărui browser. Adică, lățimea paginii site-ului corespunde cu lățimea dispozitivului, deci nu trebuie să fie scalată.
ÎN în acest exemplu conținutul din fereastra browserului va fi de 2 ori mai mare în comparație cu dimensiunea fizică.
Eticheta poate fi folosită și pentru a controla cât de mult pot crește sau micșora utilizatorii lățimea paginii:
Acest cod vă va permite să măriți lățimea paginii la o valoare egală cu de 3 ori lățimea ecranului dispozitivului și să o reduceți la jumătate din lățimea ecranului dispozitivului.
Puteți refuza utilizatorilor posibilitatea de a scala folosind atributul scalabil de utilizator:
3. Șabloane universale
Majoritatea layout-urilor utilizate pentru a crea un design web receptiv se încadrează într-una dintre cele cinci categorii de modele definite de Luke Wroblewski:
Preponderent fluid (cel mai cauciuc),
Column Drop (Coloane una sub alta),
Schimbător de aspect (aspect în mișcare),
Tiny Tweaks (Mini modificări),
Off Canvas.
În unele cazuri, o pagină poate utiliza o combinație de șabloane, cum ar fi Column Drop și Off Canvas.
Un aspect popular constând în principal din plasă de cauciuc. Pe ecranele mari sau cu lățime medie, dimensiunea acesteia rămâne de obicei neschimbată; pe ecranele mari, doar marginile sunt ajustate. Pe mici ecrane grila de cauciuc face ca aspectul să fie recalculat pentru conținutul principal, iar coloanele sunt plasate una sub alta. Avantajul șablonului este că necesită un singur punct de control între ecranele mici și ecranele mari. 
Coloanele sunt plasate una câte una vertical dacă lățimea ferestrei nu poate afișa tot conținutul. Drept urmare, coloanele vor fi poziționate vertical unul sub celălalt. Alegerea punctelor de întrerupere pentru acest șablon de aspect depinde de conținut și este determinată pentru fiecare opțiune de proiectare separat. 
Cel mai receptiv șablon, deoarece oferă mai multe puncte de control pentru ecrane de diferite lățimi. Principala diferență cu acest aspect este că, în loc să recalculăm arborele de randare și să plasați coloane una sub alta, conținutul este mutat. Datorită diferențelor semnificative dintre punctele de întrerupere majore, menținerea acestui aspect este mai dificilă și poate fi necesar să modificați nu numai aspectul general al conținutului, ci și elementele acestuia. 
Șablonul aduce mici modificări aspectului, cum ar fi ajustarea dimensiunii fontului, redimensionarea imaginilor sau mutarea conținutului. Funcționează bine pe aspecte cu o singură coloană, cum ar fi site-uri și articole cu o singură pagină o cantitate mare text. 
Conținutul care este utilizat rar, cum ar fi elementele de navigare sau meniurile aplicațiilor, este plasat în afara ecranului și afișat numai atunci când dimensiunea ecranului o permite. Pe ecranele mai mici, conținutul se deschide cu un singur clic. 
Spre deosebire de designul responsive, Adaptive Web Design se concentrează pe dimensiunile dispozitivelor. Utilizează mai multe aspecte statice pentru diferite tipuri de dispozitive (dispozitive mobile, tablete, computere desktop), pe baza punctelor de control (de cotitură). Adică, layout-urile se încarcă la anumite dimensiuni ale ferestrei browserului dispozitivului, iar tranzițiile între layout-uri au loc mai degrabă decât fără probleme.
De obicei, aspectele receptive au șase opțiuni de aspect, în funcție de lățimea ecranului:
320
480
760
960
1200
1600.
Aspectele receptive se concentrează pe funcționalitate, ceea ce înseamnă că designul ia în considerare caracteristicile dispozitivului, cum ar fi comenzile tactile pentru dispozitive mobile sau spații mari pentru monitoarele desktop.
Tehnici de bază de proiectare receptivăMenține coerența – orice site web trebuie să creeze încredere cu utilizatorul, astfel încât să se simtă confortabil navigând și interacționând cu el. Designul consecvent înseamnă că atunci când trece pe o altă pagină de pe un site, utilizatorul nu simte că se află pe alt site. Acordați atenție micilor detalii, construiți o ierarhie vizuală și evidențiați elementele importante cu caractere aldine. Utilizați serialul schema de culori pe tot site-ul, reutilizați aceleași elemente pentru situații diferite, cum ar fi același design de notificare pop-up.
Utilizați o grilă - o structură cu 12 coloane este de preferat pentru a controla lățimea coloanei și spațiul dintre coloane.
5. Care este diferența dintre designul web responsiv și adaptiv
Orez. 4. Design receptiv și adaptiv pe diferite dispozitive Pentru a crea machete receptive, utilizați interogări media și dimensiunile relative ale elementelor grilei specificate cu % . În designul responsive, scripturile de pe server determină mai întâi tipul de dispozitiv pe care utilizatorul încearcă să acceseze site-ul (desktop, telefon sau tabletă), apoi încarcă exact versiunea paginii care este cea mai optimizată pentru acesta. Elementele de grilă primesc dimensiuni fixe în pixeli.
Prin urmare, principala diferență dintre aceste tehnici este designul responsive - un aspect pentru toate dispozitivele, design adaptiv - un aspect pentru fiecare tip de dispozitiv.
6. Servicii și instrumente utileEmulator Android pentru Windows, Linux și Mac OS X. Simulatorul iOS este disponibil numai pentru utilizatorii Mac OS X și face parte din pachetul Xcode (poate fi descărcat gratuit din Mac App Store).
Un script PHP care rulează pe orice site web detectează dimensiunea ecranului și ajustează dimensiunea imaginii pentru a se potrivi, rezultând o dimensiune mică a imaginii pe ecranele mici.
Tabelele de corespondență între dimensiunile fizice ale dispozitivelor și valorile CSS pentru înălțime și lățime, precum și valoarea raportului de pixeli pentru dispozitivele mobile.
O colecție de site-uri web care utilizează interogări media și design web receptiv.
Cadru CSS bazat pe un aspect cu 12 coloane, maxim 960 px. Suporta Chrome, Safari, Firefox, IE 7 și versiuni ulterioare, versiuni mobile browsere.
Un set de instrumente pentru dezvoltarea aplicațiilor web. MĂRINA limbă, aspect adaptiv pe 12 coloane, suport pentru dispozitive mobile, tablete și monitoare, multe componente, butoane, meniuri derulante, stil personalizat de câmpuri de introducere, liste, titluri, etichete, pictograme, alerte, file, bare de progres, sfaturi cu instrumente , „acordeon”, „carusel” și așa mai departe, diverse plugin-uri Javascript, suport pentru schele, inclusiv aplicarea stilului Bootstrap la HTML deja creat.
Aspectul adaptiv modifică designul paginii în funcție de comportamentul utilizatorului, platformă, dimensiunea ecranului și orientarea dispozitivului și este o parte integrantă a dezvoltării web moderne. Vă permite să economisiți semnificativ și să nu trebuie să desenați design nou pentru fiecare rezoluție, dar modificați dimensiunea și locația elementelor individuale.
Acest articol va analiza principalele elemente ale site-ului și modul de adaptare a acestora.
Reglarea rezoluției ecranuluiÎn principiu, puteți împărți dispozitivele în diferite categorii și puteți proiecta pentru fiecare dintre ele separat, dar acest lucru va dura prea mult timp și cine știe ce standarde vor fi în cinci ani? În plus, conform statisticilor, avem o gamă întreagă de rezoluții diferite:
Devine evident că nu vom putea continua să proiectăm pentru fiecare dispozitiv separat. Dar ce să faci atunci?
Soluție parțială: faceți totul flexibilDesigur, aceasta nu este o metodă perfectă, dar elimină majoritatea problemelor.
Ethan Marcotte a creat un șablon simplu care demonstrează utilizarea aspectului receptiv:
La prima vedere poate părea că totul este ușor, dar nu este. Aruncă o privire la logo:
Dacă reduceți întreaga imagine, inscripțiile vor deveni ilizibile. Prin urmare, pentru a salva sigla, imaginea este împărțită în două părți: prima parte (ilustrare) este folosită ca fundal, a doua (logo) își schimbă dimensiunea proporțional.
Elementul h1 conține o imagine ca fundal, iar imaginea este aliniată la fundalul containerului (antet).
Imagini flexibileLucrul cu imagini este una dintre cele mai importante probleme atunci când lucrați cu design responsive. Există multe moduri de a redimensiona imaginile, iar cele mai multe dintre ele sunt destul de simplu de implementat. O soluție este utilizarea lățimii maxime în CSS:
Imagine (lățimea maximă: 100%;)
Lățimea maximă a unei imagini este de 100% din lățimea ecranului sau a ferestrei browserului, deci cu cât lățimea este mai mică, cu atât imaginea este mai mică. Rețineți că lățimea maximă nu este acceptată în IE, așa că utilizați lățime: 100% .
Metoda prezentată este o opțiune bună pentru creare imagini adaptive, dar schimbând doar dimensiunea, vom lăsa greutatea imaginii la fel, ceea ce va crește timpul de încărcare pe dispozitivele mobile.
O altă modalitate: imagini receptiveTehnica, introdusă de Filament Group, nu numai că redimensionează imaginile, ci și comprimă rezoluția imaginilor pe ecrane mici pentru a accelera încărcarea.
Această tehnică necesită mai multe fișiere disponibile pe Github. Mai întâi luăm fișierul JavaScript ( rwd-images.js), dosar .htaccessȘi rwd.gif(fișier imagine). Apoi folosim ceva HTML pentru a asocia rezoluții mari și mici: mai întâi o imagine mică cu un prefix .r(pentru a arăta că imaginea ar trebui să răspundă), apoi un link către imagine mare folosind data-fullsrc:
Pentru orice ecran mai lat de 480 px, va fi încărcată o imagine cu rezoluție mai mare ( largeRes.jpg), iar pe ecranele mici se va încărca ( smallRes.jpg).
Pe iPhone și iPod Touch există o particularitate: un design creat pentru ecrane mari se va micșora pur și simplu într-un browser cu o rezoluție mică, fără defilare sau aspect mobil suplimentar. Cu toate acestea, imaginile și textul nu vor fi vizibile:
Pentru a rezolva această problemă, utilizați metaeticheta:
Dacă scara inițială este egală cu unu, lățimea imaginilor devine egală cu lățimea ecranului.
Structură personalizabilă de aspect al paginiiPentru modificări semnificative ale dimensiunii paginii, poate fi necesar să modificați aranjamentul general al elementelor. Acest lucru se poate face convenabil printr-un fișier de stiluri separat sau, mai eficient, printr-o interogare media CSS. Nu ar trebui să existe probleme, deoarece majoritatea stilurilor vor rămâne aceleași și doar câteva se vor schimba.
De exemplu, aveți un fișier de stil principal care specifică #wrapper , #content , #sidebar , #nav împreună cu culorile, fundalul și fonturile. Dacă stilurile principale vă fac aspectul prea îngust, scurt, lat sau înalt, puteți identifica acest lucru și include stiluri noi.
style.css (principal):
/* Stiluri de bază care vor fi moștenite de foaia de stil copil */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemente structurale */ #wrapper( lățime: 80%; margine: 0 auto; fundal: #fff; padding: 20px; ) #conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) # sidebar-left( lățime: 20%; float: stânga; margin-right: 3%; ) #sidebar-right( lățime: 20%; float: stânga; )
mobile.css (copil):
#wrapper( lățime: 90%; ) #conținut( lățime: 100%; ) #sidebar-left( lățime: 100%; clar: ambele; /* Stiluri suplimentare pentru noul design */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( lățime: 100%; clar: ambele; /* Stil suplimentar pentru noul nostru aspect */ border-top: 1px solid #ccc; margin-top: 20px; )
Pe un ecran lat la stânga și la dreapta panouri laterale se potriveste bine in lateral. Pe ecranele mai înguste, aceste blocuri sunt situate unul sub celălalt pentru o mai mare comoditate.
Interogări media CSS3Să vedem cum puteți utiliza interogări media CSS3 pentru a crea modele receptive. min-width specifică lățimea minimă a ferestrei sau a ecranului browserului la care vor fi aplicate anumite stiluri. Dacă orice valoare este sub min-width , stilurile vor fi ignorate. max-width face opusul.
Ecran @media și (lățime minimă: 600 px) ( .hereIsMyClass ( lățime: 30%; float: dreapta; ) )
Interogarea media va funcționa numai atunci când lățimea minimă este mai mare sau egală cu 600 px.
Ecran @media și (lățime maximă: 600 px) ( .aClassforSmallScreens (clar: ambele; dimensiunea fontului: 1.3em; ) )
În acest caz, clasa ( aClassforSmallscreens) va funcționa atunci când lățimea ecranului este mai mică sau egală cu 600 px.
În timp ce lățimea minimă și lățimea maximă se pot aplica atât lățimii ecranului, cât și lățimii ferestrei browserului, este posibil să fie nevoie să lucrăm doar cu lățimea dispozitivului. De exemplu, pentru a ignora browserele deschise într-o fereastră mică. Puteți utiliza min-device-width și max-device-width pentru aceasta:
@media ecran și (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen și (min-device-width: 768px) ( .minimumiPadWidth ( clar: ambele; margin-bottom) : 2px solid #ccc; ))
În special pentru iPad, interogările media au proprietatea orientare, ale căror valori pot fi fie peisaj(orizontală), sau portret(vertical):
@ecran media și (orientare: peisaj) ( .iPadLandscape ( lățime: 30%; float: dreapta; ) ) @ecran media și (orientare: portret) ( .iPadPortrait ( clar: ambele; ) )
De asemenea, puteți combina valorile interogării media:
Ecran @media și (lățime minimă: 800 px) și (lățime maximă: 1200 px) ( .classForaMediumScreen ( fundal: #cc0000; lățime: 30%; float: dreapta; ) )
Acest cod va fi executat numai pentru ecrane sau ferestre ale browserului cu lățime cuprinsă între 800 și 1200 px.
Puteți încărca o anumită foaie cu stiluri pentru diferite valori de interogare media, astfel:
JavaScript
Dacă browserul dvs. nu acceptă interogări media CSS3, atunci înlocuirea stilurilor se poate face cu folosind jQuery:
$(document).ready(function())( $(window).bind(„resize”, resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Dacă lățimea este mai mică de 600 px , foaia de stil mobilă este utilizată if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Dacă lățimea este mai mare de 600 px, se folosește foaia de stil pentru desktop $("link").attr((href: "style.css")); ) ) ));
Afișare opțională a conținutuluiAbilitatea de a micșora și rearanja elementele pentru a se potrivi pe ecrane mici este excelentă. Dar aceasta nu este cea mai bună opțiune. Dispozitivele mobile prezintă de obicei un set mai larg de modificări: navigare simplificată, conținut mai concentrat, liste sau rânduri în loc de coloane.
Din fericire, CSS ne oferă posibilitatea de a arăta și a ascunde conținut cu o ușurință incredibilă.
Display: niciunul;
afișare: niciunul nu este utilizat pentru obiectele care trebuie ascunse.
Iată marcajul nostru:
Conținut principal O bară laterală din stânga O bară laterală din dreapta
style.css (principal):
#conținut( lățime: 54%; float: stânga; margine-dreapta: 3%; ) #sidebar-left( lățime: 20%; float: stânga; margine-dreapta: 3%; ) #sidebar-right( lățime: 20 %; float: stânga; ) .sidebar-nav( display: none; )
mobile.css (simplificat):
#conținut( lățime: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
Dacă dimensiunea ecranului este redusă, puteți, de exemplu, să utilizați un script sau fișier alternativ cu stiluri pentru a mări spațiul alb sau pentru a înlocui navigarea pentru o mai mare comoditate. Astfel, având capacitatea de a ascunde și afișa elemente, de a schimba dimensiunea imaginilor, elementelor și multe altele, puteți adapta designul oricărui dispozitiv și ecran.
Cum folosește Yandex datele și învățarea automată pentru a personaliza serviciile -.