Interfețe adaptive. Modalități de implementare a adaptabilității interfeței Ce este designul web responsive
Utilizatorii de internet navighează pe site-uri web pe diferite dispozitive cu diferite dimensiuni de ecran. 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 se adaptează cu ușurință la diferite tipuri de 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 Grafică vectorială scalabilă - 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 vizualizarePentru a împiedica browserele mobile pentru sistemele de operare Android și iOS să redimensioneze automat paginile site-ului, este utilizată o etichetă specială cu atributul name="viewport". Această etichetă vă permite să setați o valoare specifică pentru parametrii de lățime și scară 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 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 ecranele mai mici, 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 cu o singură pagină și articole cu mult 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 layout-uri statice pentru diferite tipuri de dispozitive (dispozitive mobile, tablete, computere desktop), bazate pe puncte de control (rupere). 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 o schemă de culori consecventă pe tot site-ul, reutilizand aceleași elemente pentru diferite situații, 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. Acceptat de Chrome, Safari, Firefox, IE 7 și versiuni ulterioare, versiuni mobile ale browserelor.
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 nu trebuie să desenați un nou design pentru fiecare rezoluție, ci să schimbaț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 crearea de 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 conectați-vă la imaginea 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).
iPhone și iPod Touch au o caracteristică: un design creat pentru ecrane mari se va micșora pur și simplu într-un browser cu rezoluție joasă, 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, barele laterale din stânga și din dreapta se potrivesc bine în 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ărilor 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 stilului se poate face 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 un fișier de stil alternativ 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 -.
Interfață de utilizator adaptivăÎn lucrarea prezentată, a fost îmbunătățită interfața web adaptivă, a cărei parte principală a fost dezvoltată în lucrarea de curs „Interfață adaptivă pentru lucrul cu tabele de decizie”, autor - Derbeneva E.E.
În comparație cu versiunea anterioară, au apărut pagini care afișează istoricul lucrului cu sistemul și răspunsurile anumitor clienți, precum și o pagină cu informații despre bazele cu care se poate lucra în acest sistem. De asemenea, a fost implementat lucrul cu răspunsuri extinse ale clienților.
Schimbul de date cu interfața cu utilizatorul se realizează folosind tehnologia Ajax, folosind formatul JSON. Pe partea clientului, se creează o conexiune la DBMS și se generează interogări SQL.
Pentru a lucra cu tabele de decizie, utilizatorul apelează procedurile și funcțiile de care are nevoie, aflate în pachetul PKG_GET_ANSWER. La apelare, utilizatorul indică, în general, numele sistemului, zona și subzona, numărul tabelului cu care lucrează utilizatorul, precum și id-ul clientului. Rezultatul este transmis în tabele temporare, din care datele pot fi preluate folosind interogarea SQL corespunzătoare.
Pagina principală a interfeței (Figurile 18-20) este un meniu prin care utilizatorul se poate conecta la sistem și poate selecta zona și subzona corespunzătoare de cunoștințe. Utilizatorii noi au posibilitatea de a se înregistra. Dacă dorește, utilizatorul poate descărca materiale de instruire atât pe tabelele de decizie, cât și pe operarea interfeței.
Figura 18 - pagina interfață principală
Figura 19 - Pagina interfață principală
Figura 10 - pagina principală
Când se autentifică (Figura 20), utilizatorul selectează zona de cunoștințe adecvată dintr-o listă construită dinamic cu toate zonele disponibile.
Figura 20 - autentificare
Așa arată formularul de înregistrare (Figura 21). Sunt necesare doar trei câmpuri: nume, autentificare și parolă.
Figura 21 - înregistrarea utilizatorului
Dacă autentificarea are succes, utilizatorul este dus la a doua pagină (Figura 22). Conține o listă construită dinamic a clienților săi. Pentru a asigura dinamica, parametrii necesari (nume sistem, zonă, subzonă, ID utilizator) sunt transferați în pagina din bara de adrese.
Figura 22 - baza de clienți
Dacă este necesar, utilizatorul poate adăuga și elimina clienți (Figura 23). Aceste manipulări sunt efectuate cu tabelul Data_Clients.
Figura 23 - înregistrarea clientului
Făcând clic pe inscripția Bazele din colțul din stânga sus, se deschide o pagină cu bazele acestui sistem (Figura 24). Utilizatorul are doar drepturi de vizualizare și nu poate modifica datele.
Figura 24 - pagină cu baze
Pe pagina de date client, coloanele ANS și HIS conțin link-uri către pagini care afișează date despre toate răspunsurile unui anumit client și, respectiv, istoricul lucrului său cu sistemul (Figurile 25-26).
Figura 25 - pagina cu răspunsurile clientului
Figura 26 - pagina cu istoricul clientului
Utilizatorul are posibilitatea de a șterge unele rânduri, dar nu are dreptul de a adăuga manual date noi sau de a le modifica pe cele existente.
Coloana CURRENT_PROGRESS conține numărul următorului tabel de decizie. Și când faceți clic pe link, mergeți la pagina de umplere (Figurile 27-28). Parametrii sunt: numele sistemului, zona, subzona de cunoștințe, numărul tabelului și identificatorul clientului.
Figura 27 - sondaj clienți (opțiune cu intrare limitată)
Figura 28 - sondaj clienți (opțiune cu intrare limitată)
În prima filă, la încărcare, este creat un formular pentru a completa tabelul de decizie curent. Când faceți clic pe butonul Trimite, rândurile generate din selecția utilizatorului sunt inserate în tabelul DATE. A doua filă conține un tabel cu date despre completările anterioare ale tabelelor pentru acest client; aceste informații se află în tabelul DATE.
Figura 29 - Afișarea tabelului de decizie
A treia filă conține un tabel de luare a deciziilor pentru formularul curent care trebuie completat (Figura 29). Partea de sus a tabelului este condiții și combinații de condiții, partea inferioară este acțiuni și combinații de acțiuni. Datele sunt interogate dintr-un tabel temporar creat de procedura PRC_TRANS().
La finalizarea lucrării, se deschide o pagină cu rezultatele: pasul, numele tabelului, acțiunile, câmpurile de valoare ale tabelelor de decizie trecute încărcate din istoricul clientului (Figura 30).
Caseta afișează activitățile cu cea mai mare valoare de producție.
Figura 30 - pagina de rezultate
În acest moment, aproximativ 11-12% din 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 receptivă este o abordare populară pentru a crea o experiență bună pentru dispozitivele 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, reproiectările scapă adesea de multitudinea de alți factori care trebuie luați în considerare atunci când se creează un design de succes pentru o varietate de 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ţă.
Există ceva ciudat în scrierea codului pentru a sprijini mai bine dispozitivele 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:)
