Share
Odată la un moment dat în designul web, tot ceea ce a trebuit să faceți pentru a face site-urile dvs. încrucisate a fost setat să fie de 960 pixeli lățime și să remedieze problemele care au apărut în IE6. Ah, vechile zile ...
Astăzi, internetul este alcătuit din atât de multe părți în mișcare, este aproape sigur că cel puțin unii dintre utilizatorii finali au experiențe mai puține decât perfecte, din cauza unor probleme pe care probabil că nu le-ați avut nici o idee.
Tocmai am deschis ușile pe un nou curs intitulat Bombproof Web Design, care vă va ajuta să alungați orice gremlini mascate care ar putea să se ascundă în colțurile internetului, aruncând în aer site-urile dvs. atunci când nu vă uitați.
În acest articol, vom trece prin 7 moduri în care este posibil să nu știți că site-urile dvs. explodează, fiecare dintre care este manipulată cu abilitate în cursul designului Bombproof Web Design.
Dacă puteți trece prin toate cele șapte dintre aceste puncte și spun că site-urile dvs. sunt solide în toate contează, voi fi foarte impresionat și veți obține o mare stea de aur mare!
Primul mod în care este posibil să nu știți că site-urile dvs. explodează este:
Este posibil să nu realizați acest lucru, dar fonturile dvs. web pot să arate de fapt deosebit de diferite de la un sistem de operare la altul, chiar și în același browser. De exemplu, următoarele trei capturi de ecran sunt toate exact aceleași site-uri, cu exact aceleași setări și coduri de fonturi.
Primul este luat în Chrome pe un Mac:
Bine, totul pare să fie bine acolo. Să revedem din nou același site din Chrome, de data asta prin Ubuntu:
Hmm, este un aspect destul de neplăcut în rubricile de acolo. Puteți abia să remarcați litera "s", iar literele "A" și "e" sunt aproape închise. Ce zici de Chrome pe Windows??
Gah, uită-te la acele artefacte! Fiecare curbă a literei are o etichetă mică care se înclină în jurul ei și, în general, este pixelată și urâtă.
Există mai multe moduri diferite prin care puteți fi prins cu fonturi inconsistente redate sau chiar absente, cu excepția cazului în care aveți un plan de evaluare și implementare a alegerilor tipografice.
Chiar și cele mai grave redări de fonturi pe Web vor face în continuare site-urile dvs. să arate excelent în comparație cu browserele care nu oferă deloc fonturi web, cum ar fi Opera Mini. Și fonturile web nu sunt singurele lucru pe care Opera Mini nu le oferă. Acesta este același site pe care îl vedeți mai sus, de data aceasta în Opera Mini:
După cum puteți vedea, aproape toate au eșuat, fără culori de bază și text. Opera Mini este un browser mobil proiectat să gestioneze site-urile într-o manieră foarte ușoară, permițându-le să fie utilizate pe dispozitive de spec. Inferioare și pentru cei care încearcă să conserve lățimea de bandă sau resursele sistemului. Din păcate, o parte a modului în care o face nu este aceea de a susține o gamă largă de proprietăți CSS, în special CSS3.
Opera Mini are o bază de utilizatori mică, dar semnificativă. Pentru a le pune în perspectivă, statisticile pe care le-am analizat au arătat că Opera Mini utilizează aproximativ o treime din totalul utilizatorilor IE și mai mare decât pentru browserele Android și Opera Desktop. Este destul de probabil cel mai dificil browser de a lupta astăzi, dar într-un fel sau altul veți dori să aveți un fel de plan pentru asta.
În Firefox, când te duci Preferințe> Conținut veți vedea acest lucru:
În Chrome, când te duci Setări> Afișați setările avansate> Conținut web veți vedea acest lucru:
Ambele panouri de setări sunt concepute astfel încât să permită utilizatorilor să ajusteze dimensiunea fontului browser-ului lor pentru a se potrivi cu nevoile acestora. Persoanele cu deficiențe de vedere vor utiliza în mod obișnuit aceste setări pentru a le ajuta să citească mai ușor. Ele sunt, de asemenea, la îndemână pentru persoanele care folosesc televizorul lor de cameră pentru navigare, ceea ce devine din ce în ce mai popular.
Este o practică foarte obișnuită de a stabili o dimensiune a fontului de bază pentru un site de genul 14px sau 16px impotriva html și corp elemente. Cu toate acestea, acest lucru împiedică intrarea în vigoare a preferințelor privind dimensiunea fontului utilizatorului. Dacă un utilizator este afectat vizual, imposibilitatea de a mări textul face viața mult mai dificilă sau dacă dimensiunea fontului a fost modificată pentru a se potrivi cu o anumită dimensiune a afișajului, poate face textul foarte greu de citit.
În plus, dacă un utilizator are o dimensiune a fontului care nu este implicită, este important să aveți posibilitatea de a mări împreună întreaga structură a acestuia. Nu doriți să ajungeți la un aspect care nu se termină, deoarece se potrivește doar unei mărimi de text.
De exemplu, aici este din nou același demo site, dar construit fără capacitatea de a scala și dimensiunea fontului de bază setată la 22px:
Cu toate acestea, cu scalarea încorporată în cod, același site cu o dimensiune a fontului stabilită de utilizatorul de 22px arată astfel:
Este posibil să nu puteți vedea ce se întâmplă în captura de ecran de mai sus, deoarece imaginea a fost redusă pentru a se încadra în această coloană. La prima vedere ar putea să arate exact ca prima captură de ecran din articol, dar asta doar pentru că a scalat proporțional cu setările pentru dimensiunea fontului utilizatorului.
Pentru a vă oferi o idee mai bună, iată o secțiune a site-ului la dimensiunea reală:
Construirea site-urilor dvs. în acest fel înseamnă că dați utilizatorului aceeași experiență de vizionare indiferent de preferințele pe care le-au setat în browser.
Aproape toți designerii de web au făcut deja tranziția de la layouts doar pentru desktop, inclusiv la suport pentru rezoluții obișnuite pentru tablete și telefoane, dar aceasta este doar o parte a imaginii.
Lista de rezoluții posibile astăzi este mai lungă decât brațul dvs. și apoi trebuie să factorizăm și la densitatea pixelilor, la porțiunea de afișare a portului de vizualizare și la dimensiunea fizică reală a afișajului.
În momentul de față, site-urile dvs. ar putea fi vizitate de utilizatori pe afișaje atât minuscule, cât și gigantice și este aproape imposibil să se prezică ce combinație de rezoluție, densitate pixelă, dimensiune a ferestrei de vedere și mărimea fizică a vizitatorilor dvs. vor avea. Un telefon inteligent de 5 "ar putea avea exact aceeași rezoluție ca un televizor de 65", însă navigarea pe un site pe fiecare dispozitiv este foarte diferită de punctul de vedere al utilizatorului.
Acestea fiind spuse, nu este deloc dificil să creați planuri care să fie complet flexibile pentru toate afișajele. Cu setul corect de principii care stau la baza codului de aspect, toate site-urile dvs. vor fi la fel de acasă pe orice afișaj, de la televizoarele de la un capăt al spectrului:
Propriul televizor de 40 de grade care arată site-ul nostru de demo-uri la o dimensiune care este total confortabilă pentru citirea de pe canapea.Pentru ceasurile mici inteligente de la celălalt capăt al spectrului, cum ar fi prin intermediul aplicației WebBrowser pentru Sony SmartWatch 2:
Site-ul afișat la dimensiunea reală a afișării pentru aplicația WebBrowser de pe Sony Smartwatch 2Este ușor de presupus că toți utilizatorii vor avea JavaScript funcțional pe care îl putem baza absolut. JavaScript tind să joace un rol în aproape fiecare site și, în unele cazuri, conduce în întregime conținut prin intermediul unor elemente cum ar fi componentele web și redarea pe partea clientului.
Dar ce se întâmplă dacă JavaScript nu este la fel de prezent ca și noi?
Există de fapt o mulțime de motive pentru care un vizitator ar putea să nu vadă un site dependent de JavaScript așa cum ați intenționat să apară.
Concluzia este că, chiar dacă procentul de utilizatori care nu au JavaScript complet funcțional este mic, este încă prezent și devine din ce în ce mai important, cu cât sunt mai reușite și mai bine traficate site-urile dvs..
Dacă nu aveți un plan, în loc de site-ul tău altfel minunat, rapid, pe care l-ai făcut pe site-ul tău, vizitatorii tăi ar putea vedea doar o grămadă de cod HTML nerepartizat:
Sau în loc de componentele dvs. web uimitoare, vizitatorii dvs. ar putea vedea o structură colapsată:
Pentru o lungă perioadă de timp, interacțiunea cu site-urile a fost aproape în întregime dependentă de un mouse, însă nu mai puteți presupune că un utilizator are mouse sau că este capabil să folosească un mouse confortabil. Oamenii sunt foarte des nu la un birou atunci când vizitează site-urile dvs., vizionând în schimb printr-un dispozitiv bazat pe atingere sau pe canapea.
Aceasta înseamnă că, dacă site-ul dvs. necesită interacțiuni cu mouse-ul pentru a obține în jur, ați putea găsi că unii dintre vizitatorii dvs. nu pot accesa niciodată anumite părți ale site-ului dvs..
În mod ideal, site-urile ar trebui să fie navigabile nu numai fără mouse, ci și cu tastatură specială. Dacă site-ul dvs. poate fi navigat printr-o tastatură, este foarte probabil că acesta poate fi navigat prin alte dispozitive de intrare, cum ar fi telecomenzi TV sau console.
În plus, persoanele cu deficiențe de mobilitate, cum ar fi persoanele care suferă de artrită sau accident vascular cerebral, de exemplu, ar putea prefera să navigheze prin intermediul unui dispozitiv auxiliar, cum ar fi o tastatură de tastatură mare.
Tabele de asistență. Imagine de la adresa https://www.flickr.com/photos/oregondot/6235420475Și vorbind despre site-urile dvs. care lucrează cu dispozitive de asistență ...
Nu mă înțelegeți greșit, știu că probabil că deja faceți ceea ce trebuie și încorporați rolurile WAI-ARIA în site-urile dvs. și încercați să le faceți cât mai accesibile posibil.
Dar ceea ce am găsit în experiența mea este că ați putea crede că ați făcut site-urile accesibile, până când încercați acces în același mod în care trebuie să aibă o persoană cu dizabilități.
În momentele în care am încercat să navighez pe web prin cititor de ecran și tastatură pentru prima dată, m-am simțit destul de rău în legătură cu unele dintre site-urile pe care le-am construit în trecut, site-uri pe care credeam sincer că le-am creat în conformitate cu orientările privind accesibilitatea.
Una dintre problemele principale pe care le-am întâlnit în încercarea mea de a citi ecranul meu în jurul valorii de internet a fost lipsa de roluri optime WAI-ARIA optimizate, care ajută utilizatorii să sară la principalele "repere" în site-uri.
Ceea ce am descoperit a fost că multe site-uri cu semnificație bună au încorporat reperele WAI-ARIA, dar într-un mod care din păcate nu a dat nici o informație utilizatorului care să-i ajute să-și găsească drumul în jurul site-ului:
Cinci zone de navigare, dar nici o zonă de conținut principal pentru utilizatorii de cititoare de ecran pentru a sări la.Unele site-uri bine cunoscute nu au folosit niciun cod de accesibilitate:
Includerea rolurilor WAI-ARIA în codul dvs. este de fapt foarte ușoară și adaugă doar câteva minute la un proiect, este doar o chestiune de a ști cum să le adăugați în mod corect.
Ați fi surprins cât de ușor este de a avea o bază solidă de accesibilitate cu câteva tehnici simple, cum ar fi optimizarea structurii titlurilor, controlul contrastului color și câteva dintre punctele despre care am vorbit mai sus, cum ar fi permiterea scalării dimensiunii fontului și susținerea diferitelor dispozitive de intrare.
Dacă ați bifat fiecare articol de pe lista de mai sus și v-ați spus: "Deja o căutați", atunci sunteți bineveniți! După cum am spus, primești o stea mare de aur pentru că ești epică.
Cu toate acestea, dacă te-ai aflat spunând "Oh, nu mi-am dat seama că" sau "Nu sunt sigur dacă sunt acoperit de acel", atunci este foarte posibil ca site-urile dvs. să explodeze acolo pe internet în timp ce vorbim - explodează "Nu mă refer în felul cel bun!
Dacă au existat mai multe dintre aceste puncte pe care nu le cunoșteați, nu vă faceți griji. Este de fapt mult mai ușor să-ți "distrugi" site-urile decât crezi. Este doar o chestiune de a fi pe deplin conștienți de informațiile necesare și de a lansa câteva soluții simple.
Acesta este noul curs al nostru "Bombproof Web Design", care vă va pregăti să faceți. Prin cincisprezece lecții ușor de urmat, vă voi îndruma personal prin ceea ce trebuie să urmăriți și pașii de urmat până la "Bombproof" toate site-urile dvs. de aici de pe aici.
Primele două videoclipuri sunt complet gratuite, deci mergeți mai departe și luați un vârf de sneak la "Bombproof Web Design" acum:
Vizionați 2 videoclipuri gratuite de la Design Web Bombproof
ne vedem acolo!
Accentsconagua