• Articles
• admin

pe măsură ce lansăm proiecte mai noi, este ușor să uitați de actualizarea blogurilor și site-urilor web mai vechi. În acest articol vreau să prezint 30 idei solide puteți pune în aplicare rapid pentru a face site-ul dvs. doar că mult mai ușor de utilizat. Nu toate se bazează exclusiv pe designul front-end. Voi discuta, De asemenea, tehnici populare de codificare HTML5 care pot ajuta analizatorii web și păianjenii să vă clasifice datele în mod corespunzător.

nu fiecare site web va trebui să fie actualizat și nu cu fiecare tehnică disponibilă în acest post. Aceste idei sunt aici pentru a-i face pe dezvoltatori să se gândească în ceea ce privește designul și cum să facă site-urile web să pară mai frumoase. Acum este mai ușor ca niciodată să construiți machete de site-uri web responsive scalabile, care să arate bine pe orice ecran digital, așa că haideți să trecem la crearea site-urilor noastre.

1. Testarea UX

sunt vinovat că nu rulez întotdeauna teste pe lansările site-ului meu web, dar ori de câte ori este posibil aceasta este una dintre activitățile mele preferate. Puteți afla atât de multe despre interacțiunile tipice ale utilizatorilor studiind modul în care se joacă cu site-ul dvs. web. Studiile privind experiența utilizatorilor pot fi efectuate exclusiv prin instrumente precum Google Analytics sau folosind alte resurse ale 3rd party.

beneficiile potențiale pe care le puteți găsi sunt enorme. Testarea experienței utilizatorului este utilă pentru dezvoltatorii web pentru a afla ce zone ale site-ului lor web sunt enervante, rupte sau ar putea fi îmbunătățite. Luați în considerare utilizarea nu numai a instrumentelor digitale, ci și a prietenilor și colegilor. Ascultarea unor feedback-uri umane reale pe site-ul dvs. web poate oferi rezultate pe care nu le-ați putut obține printr-un ecran de computer.

2. Spațiu alb

ne putem gândi la spațiul alb ca la cantitatea de spațiu dintre elementele din pagina dvs. Unii utilizatori nu vor deranja un aspect înghesuit dacă sunt deja obișnuiți cu acest lucru. Dar ia în considerare publicul țintă și ia în considerare câți dintre ei nu sunt la fel de alfabetizați pe computer ca generația tânără.

puteți determina zonele care necesită spațiu suplimentar prin teste split A/B și reținerea feedback-ului utilizatorului. Sau doar aripa și vezi ce poți veni cu!

3. Fonturile web

fonturile web dinamice permit proiectanților să construiască pagini web fără a se limita la familiile tipice de fonturi. Această tendință a devenit din ce în ce mai populară acum, când majoritatea utilizatorilor de Internet medii au o conexiune decentă DSL/T1/fibră optică. Includerea referințelor la foile de stil ale fonturilor 3rd party nu va mai produce întârzieri majore în vitezele dl.

destul de probabil cel mai bun furnizor de fonturi este prin Google Webfonts. Puteți accesa aplicația chiar dacă nu aveți un Cont Google, deși există avantaje pentru înregistrare. Procesul complet de configurare durează doar 3 pași și puteți avea fonturi Google personalizate care rulează pe site-ul dvs. în câteva minute.

4. CSS3 umbre

când vorbesc despre utilizarea umbre pentru a îmbunătăți aspectul sunt de fapt referire două proprietăți distincte. Vreodată popular box-shadow este foarte cool pentru divs și cutii în aspectul. Adăugarea acestui efect pe container, înveliș, sau cutii de pagini interioare va oferi un efect de slăbire 3-D pentru pagina dvs. web.

dar merită, de asemenea, să luați în considerare proprietatea CSS3 text-shadow pentru tipografie care sare de pe pagină. Apple este una dintre primele companii care implementează puternic umbre de text în jurul aspectului lor. Puteți construi un efect descurajant prin adăugarea de umbre de text care sunt opuse culorii fonturilor dvs. (umbre albe pentru text întunecat, umbre negre pentru text deschis).

5. Texturi & repetarea modelelor

există o mulțime de site-uri web care pot obține doar folosind scheme de culori standard. Dar pentru a avea site-ul dvs. într-adevăr să iasă în evidență din mulțime, puteți lua în considerare adăugarea de texturi și repetarea plăcilor în fundal. Una dintre cele mai tari webapps gratuite este Noise Texture Generator, care poate rula pe orice browser.

doar alege culoarea BG și cantitatea de zgomot pe care doriți să utilizați, atunci această aplicație va crea o imagine de fundal gresie dinamic. Dacă sunteți în căutarea pentru modele și dale, atunci mi-ar recomanda modele subtile. Ei au o mare colectie de texturi utilizabile pe care le puteți descărca gratuit.

6. CSS3 gradient Backgrounds

în timp ce discutăm fundaluri, ar trebui să aduc gradienții CSS3 din ce în ce mai populari. Acestea oferă dezvoltatorilor web un beneficiu enorm, menținându-i în afara Adobe Photoshop pentru fundaluri web. Și aceste degradeuri pot lucra pe mai mult decât corpul, aplicate pe barele de navigare și subsoluri și alte zone importante din aspectul dvs.

7. Boostrap

Bootstrap Twitter este destul de probabil cel mai mare cadru UI frontend pentru dezvoltatorii web. Aceasta include butoane, intrări de formular, linkuri, coloane și tone de alte obiecte de pagină pre-formatate. Cea mai obișnuită utilizare pentru Bootstrap este în paginile de destinație pentru aplicații noi.

dar dezvoltatorii open source folosesc și Bootstrap atunci când construiesc pagini demo pentru bibliotecile, pluginurile sau mini scripturile pe care le publică.

simt că Bootstrap a crescut într-o măsură atât de masivă încât poate fi aplicată în orice site web în aceste zile. Cu toate acestea, dezvoltatorii care găsesc cel mai mare beneficiu folosesc Bootstrap ca înlocuitor rapid pentru lansarea propriilor modele UI. Luați în considerare această bibliotecă frontend data viitoare când lansați o pagină web cu un singur scop concret: pagina de destinație, demo-ul produsului, site-ul aplicației mobile etc.

legate de:

• Noțiuni de bază cu Twitter Bootstrap
• Bootstrap 201: Modal fereastra Plugin

8. HTML5 Kickstart

majoritatea dezvoltatorilor web nu au auzit încă despre HTML5 kickstart creat de 99Lime. Aceasta este o altă bibliotecă UI frontend care se concentrează mai mult pe estetica de design frumos decât machete comune HTML5. Dar există mostre de cod pentru generarea atât în pică. Puteți alege dintre seturi de elemente predeterminate, cum ar fi butoanele de gradient și meniurile derulante. Nu aș spune că acest lucru are aceeași popularitate ca Bootstrap, dar apoi din nou ce face?

dacă aveți timp și răbdare aș recomanda doar da această bibliotecă un test rapid. Construi un aspect mic sandbox și a vedea dacă vă bucura de sentimentul implicit de pe fiecare element UI. Kickstart nu este cu siguranță pentru fiecare proiect, dar poate fi un economizor de timp major atunci când este prins într-o legătură.

9. jQuery UI

Animațiile și glisoarele și elementele de decolorare sunt de obicei difuzate de pe biblioteca jQuery. Aceasta este cea mai comună bibliotecă JavaScript open source pentru dezvoltatorii frontend, dar are și o bibliotecă însoțitoare jQuery UI. Dezvoltatorii trec cu vederea acest lucru, crezând că nu poate oferi foarte mult în schimbul KB suplimentar.

dar includerea bibliotecii UI înseamnă că puteți actualiza apelul easing pentru orice animații dinamice ale paginii. Acest lucru înseamnă că puteți personaliza tipul de animație jQuery pentru orice meniuri derulante, elemente decolorare, slideshow-uri defilare, și orice altceva dinamic.

site-ul jQueryUI are o pagină demo relaxarea unde puteți testa mai multe variante și a vedea dacă vă place orice tipuri de animație specifice.

legate de:

• cum să stil jQuery UI acordeon
• controler de volum cu jQuery UI Slider
• personalizarea și tematica jQuery UI Datepicker
• Drag and Drop cu jQuery UI Sortable

10. Extravagante bg fotografii

există nenumărate site-uri în zilele noastre, care au utilizat efectul de imagine de fundal pe tot ecranul. Dacă puteți găsi o mostră de fotografie de înaltă rezoluție care ar arăta bine ca imagine de fundal, atunci această tehnică poate merita adăugată în aspectul dvs. Fundalurile mari fac o treabă excelentă de a atrage atenția utilizatorului dvs., implicând în același timp genul site-ului dvs. web.

dacă sunteți în căutarea pentru o soluție rapidă a verifica afară jQuery Backstretch plugin. Acest lucru necesită doar o singură linie de cod pentru noile fundaluri pentru a scala corect și receptiv folosind orice rezoluție. Dar pentru dezvoltatorii care sunt împotriva metodelor JavaScript recomand tehnica de imagine CSS3 fullpage postat pe CSS-trucuri.

11. Pictograme de meniu

pentru a atrage mai multă atenție din partea vizitatorilor, poate fi util să includeți o pictogramă mică setată în pagina dvs. web. Linkurile de meniu Standard sunt adesea suficiente pentru a funcționa corect și pentru a ajuta utilizatorii să navigheze între pagini.

cu toate acestea eu sunt de multe ori impresionat pentru a vedea icoane personalizate concepute pentru fiecare link de meniu. Puteți găsi tone de seturi de pictograme gratuite care ar arăta perfect în zona dvs. de navigare de top, bara laterală sau subsol.

12. Schema de culori actualizată

nu mă refer de fapt la schimbarea designului general al schemei de culori, ci mai degrabă la adăugarea de culori noi în ea. După rularea același aspect de luni de zile după luni este frumos pentru a actualiza zone mai mici și de captură repeta vizitatori prin surprindere.

unele elemente de interes pot include legături de ancorare, anteturi, fundaluri și bare de instrumente. Luați în considerare utilizarea instrumentelor online, cum ar fi Color Scheme Designer, pentru a vă îmbunătăți traiectoria.

13. Suport Browser îmbunătățită

este dificil de a construi un site web care este pe deplin susținută de toate browserele majore moștenire. Deși foarte puțini oameni rulează Internet Explorer 6, acesta apare încă în câteva dintre rapoartele mele Google Analytics. Dezvoltatorii care caută idei pot lua în considerare efectuarea unui mic proces de teste de browser.

cele mai importante browsere de masă includ cea mai recentă versiune de IE9, Mozilla Firefox, Opera, Chrome, Safari, și, eventual, Camino/SeaMonkey. Dar Internet Explorer 6-8 Sunt, de asemenea, încă utilizate pe scară largă în rândul întreprinderilor și laboratoare de calculatoare mai vechi. Puteți rula teste de redare rapidă utilizând software-ul IETester. În mod similar, IE8 are un mod de instrumente pentru dezvoltatori în care puteți trece la motoare de redare mai vechi pentru depanare.

14. Tipografie montate

s-ar putea găsi că vechile machete sunt încă utilizarea stiluri de text eficient, dar acest lucru nu este întotdeauna cazul. Simt că tipografia mare se va potrivi mult mai ușor în machete. Ca să nu mai vorbim că este mai ușor de citit și va ocupa mai mult spațiu pe rezoluții mai mari ale ecranului.

ideea de „tipografie montate” este styling text, astfel încât se potrivește perfect în site-ul dumneavoastră. Puteți parcurge câteva pagini și puteți actualiza aceste stiluri în 10-15 minute.

15. Social Media Sharing

până acum sunt sigur că majoritatea dezvoltatorilor sunt familiarizați cu ecusoanele de partajare utilizate în site-urile populare de rețele sociale. Facebook, Twitter, Reddit, Pinterest, Dzone și multe alte rețele externe oferă coduri pe care le puteți încorpora pe site-ul dvs. web. Apoi, vizitatorii pot partaja link-ul dvs. pe aceste rețele fără a fi nevoie să părăsiți site-ul dvs. web.

pe unele bloguri sau reviste web veți observa că aceste ecusoane vă vor urmări derulând în jos pagina. Aceasta este o tehnică excelentă, deoarece le puteți avea adesea situându-se chiar în afara zonei corpului, unde nu blochează niciun conținut important. De asemenea, vă recomand să răsfoiți postarea noastră pe barele de instrumente de social media, care pot avea un efect similar.

16. Discuție utilizator

dacă executați un CMS ca WordPress sau Drupal, atunci aveți posibilitatea de a include formulare de comentarii în mod implicit. Cu toate acestea, atunci când creați pagini web statice, va trebui să configurați propriul sistem de baze de date pentru a imita această funcționalitate. Dar, odată cu creșterea tehnologiei open source, dezvoltatorii pot implementa acum soluții mai bune, cum ar fi Disqus.

folosind această metodă nu sunt în mod constant de-a face cu curățarea spam și junk din zona de discuții. Utilizatorii care nu au deja un cont Disqus se pot conecta rapid folosind profiluri populare de rețele sociale sau se pot înscrie chiar de pe pagina dvs. Chiar și utilizatorii WordPress care sunt bolnavi de Akismet pot comuta folosind pluginul Disqus Comment System.

17. Lărgiți zona de subsol

cele mai multe aspecte site-ul mai mici vor fi foarte conservatoare cu secțiunea subsol de jos. Aceasta poate include câteva informații de bază privind drepturile de autor și câteva linkuri ale paginii principale. Dar tendințele moderne de design web susțin ideea de subsoluri mari cu o mulțime de linkuri meta.

acestea sunt frecvent observate în startup-uri și site-uri de companii mari, cu o mulțime de informații suplimentare. Cu siguranță nu încercați să forțați acest lucru într-un aspect în care nu aparține, totuși merită o anumită contemplare dacă deschiderea unei zone mai mari de subsol vă poate îmbunătăți experiența site-ului web.

18. Responsify imagini

fluid dinamic și imagini pagina web receptiv au devenit o tendință în sine. Acum este aproape ridicol să aveți în continuare imaginile setate la lățimi fixe, ieșind din ambalajul containerului pe măsură ce ferestrele sunt redimensionate. Cea mai comună tehnică este de a aplica width: 100% folosind CSS pe toate elementele img.

dar puteți lua în considerare și alte metode open source care se pot dovedi utile într-o legătură. ResponsiveImg este un astfel de plugin jQuery cu o dimensiune foarte mică a fișierului. Doar includeți acest lucru în pagina dvs. și rulați codul cu o singură linie care vizează toate imaginile de pe pagină. Acesta este un plus excelent pentru machete mobile, care sunt încă folosind conținut bazat pe desktop.

19. Accesibilitate meniu

nu aș spune acest lucru este ceva ce ar trebui să fie în mod constant încercarea de a actualiza în machete dvs., dar este ceva care dezvoltatorii și designerii nu obține dreptul de prima dată în jurul valorii de. Simt că merită să vă uitați înapoi la sistemele dvs. de navigație și să faceți brainstorming dacă există modalități mai bune de a implementa linkuri de submeniu.

barele laterale și zonele de conținut vor ține adesea meniuri de acordeon, deoarece există suficient spațiu vertical. Dar gândiți-vă la barele de navigare orizontale cu meniuri derulante sau submeniuri glisante. Atâta timp cât linkurile dvs. de meniu sunt rapide și ușor de accesat, nu ar trebui să existe probleme în rândul bazei dvs. de utilizatori.

20. Microformatele semantice / microdatele

Microformatele și specificațiile microdate mai noi sunt utilizate pentru a extinde metadatele în interiorul codului HTML. Aceste atribute oferă informații suplimentare despre conținutul dvs. și despre modul în care acesta se raportează la alt conținut de pe pagină. Și, în cele din urmă, aceste rezultate ajută Google să determine rangul site-ului dvs. web pentru cuvinte cheie individuale și în cadrul altor motoare, cum ar fi Căutarea de imagini și videoclipuri.

versiunea documentată mai ales susținută de microdate se numește Schema.org. site-ul lor web oferă toate informațiile de care aveți nevoie pentru a vă întoarce și a edita conținutul HTML cu marcarea schemei semantice. Această sintaxă a schemei este susținută și susținută de toate motoarele de căutare majore și va evolua probabil în viitorul proiectării metadatelor semantice.

21. Rearanjarea legăturilor Nav

pentru unele site-uri web, rularea pe navigarea cu conținut fix poate să nu fie o problemă reală. Dar am găsit în unele site-uri de afaceri mai mari sau portofolii că anumite link-uri de navigare sunt dat prea mult prioritate. Și în mod similar, există unele elemente care pot fi rareori găsite! Ia timp pentru a naviga pe site-ul dvs. și să se comporte ca și cum ai fi orice alt vizitator.

luați în considerare ce link-uri vă interesează cel mai mult și, eventual, orice link-uri pe care doriți să le vedeți adăugate. Acestea pot include un scurt istoric al site-ului dvs. web, informații despre echipă, detalii de contact, probleme de confidențialitate, Comunicate de presă etc. De asemenea, poate ajuta la colectarea feedback-ului utilizatorilor și a vedea dacă există corelații între dorințele lor și cererea de pagini noi sau actualizate.

22. Back To Top Link

dacă site-ul dvs. publică pagini foarte lungi de conținut, atunci acesta este un element obligatoriu în aspectul dvs. Derularea înapoi la link-uri de Top pot fi găsite aproape peste tot în aceste zile. Utilizatorii nu cred că pentru a lovi tasta Acasă și poate fi enervant defilare tot drumul înapoi în sus. Cea mai bună locație pentru acest link este plutind alături de container, sau așezat chiar în subsol așa cum am implementat pe Hongkiat.

23. Particularizarea Cod / pre Tag-uri

atunci când prima crearea unui site web stylesheet mulți dezvoltatori vor trece cu vederea elementele tipice de pagină. Anteturile și paragrafele sunt foarte frecvente, dar ce zici de etichetele pre sau etichetele de cod inline? Acestea sunt folosite pentru a încapsula sintaxa codului sursă preformatat, așa cum ați vedea într-un fișier text/NFO. Unele site-uri nu au nevoie de aceste elemente, dar este încă considerată o bună practică pentru a le stil doar în cazul în care.

24. Adăugarea imaginii Lățime / Înălțime atribute

acum, această sarcină ar putea dura cu ușurință un timp, în funcție de cât de multe imagini ar trebui să treacă prin. Dar dacă găsiți imagini pe site-ul dvs. web fără o lățime/înălțime definită, ar putea merita să le actualizați.

de obicei, imaginile care nu au aceste atribute vor fi afișate ca un pătrat de 1 hectar 1 px înainte de încărcare completă. Acest lucru va face ca paginile dvs. web și bara de derulare să sară pe măsură ce sunt încărcate imagini noi. Din nou, acest lucru nu va fi util pentru toată lumea, dar merită remarcat ca un fixator rapid în unele cazuri. Și există încă tehnici CSS pentru imagini receptive folosind atribute fixe.

25. Notificări JavaScript

orice dezvoltator care a lucrat în JavaScript știe despre casetele de dialog tipice. Puteți configura o casetă de alertă care oferă utilizatorului un buton OK, afișând doar informații. Dar există, de asemenea, alerte de confirmare cu butoane Da/Nu, împreună cu caseta de prompt care solicită introducerea utilizatorului.

toate acestea pot fi personalizate folosind alertify.js. Aceasta este o bibliotecă open source foarte mică pentru proiectarea propriilor cutii de alertă frontend. Este foarte rapid de instalat și ușor de Personalizat dacă aveți nevoie pentru a se potrivi propriile stiluri CSS.

26. Interogări media Responsive

acest lucru nu poate părea ca un pic rapid de cod pentru a adăuga, cu toate acestea într-adevăr nu ia mult timp la toate. Interogări Responsive pot fi adăugate în foaia de stil existente sau adăugate într-un nou receptiv.document css. Oricum, puteți seta rapid stiluri recurente pentru a gestiona diferite dimensiuni de afișare de la monitoare, tablete și smartphone-uri.

interogări Responsive nu trebuie întotdeauna să răspundă pe deplin aspectul. Uneori, acestea pot ascunde doar biți de conținut, cum ar fi bara laterală alungită sau subsolul mai mare. Ai putea afișa apoi un mini subsol receptiv complet, care este inițial ascuns în aspectul desktop. Puteți afla mai multe despre interogările media în colecția noastră de tutoriale web receptive.

27. Link-uri afiliate

vor exista întotdeauna site-uri similare online care construiesc conținut legat de domeniul dvs. Foarte rar se creează idei noi; majoritatea sunt ramuri și parodii din conținutul existent. Dar, în loc să transformăm Internetul într-o competiție, de ce să nu creăm o atmosferă prietenoasă? Dacă aveți spațiu suplimentar în aspectul dvs., trimiteți câteva e-mailuri către site-urile web conexe din nișa dvs. (căutați Google) solicitând să vă afiliați.

puteți face schimb de link-uri și de a ajuta aduce reciproc trafic. Acest lucru deschide ușile pentru noi utilizatori pentru a găsi site-ul dvs. mult mai repede, și pentru a vedea că sunt incluse în comunitatea de alte site-uri, precum și. În plus, obținerea de backlink-uri de pe site-uri web cu autoritate în Google poate ajuta doar credibilitatea domeniului dvs.

28. Fonturi bazate pe pictograme

recent am citit un articol despre 24ways care discuta despre fonturile pictogramelor și atributele datelor. Acest lucru m-a făcut să mă gândesc la viitorul designului web și la modul în care HTML/CSS a afectat dramatic codarea frontend. Fonturile bazate pe pictograme sunt perfecte din mai multe motive, inclusiv meniuri de navigare, liste ordonate/neordonate și chiar conținut de bază al paginii.

multe dintre aceste fonturi pot fi adăugate rapid în site-ul dvs. folosind @font-face. Aceasta înseamnă că nu trebuie să vă bazați pe un serviciu 3rd party, cum ar fi Typekit, pentru găzduirea fonturilor. Aceasta înseamnă, de asemenea, un stil de design mai semantic, mai degrabă decât folosind doar icoane PNG.

29. Image Box Shadows

dacă doriți să păstrați vizitatorii pe pagina dvs. mai mult, atunci trebuie să oferiți conținut de calitate reală. Acest lucru poate fi deja cazul pentru site-ul dvs. web, cu toate acestea, dacă stilurile dvs. sunt blande, atunci oamenii vor căuta în altă parte. Atmosfera și estetica sunt uriașe în designul web bun.

vă recomand să construiți o clasă de imagini rapide care să înfășoare un chenar în jurul imaginilor paginii. Aceasta poate include o umbră cutie mică, împreună cu frontierele și umplutură, de asemenea. Orice pentru a vă ajuta imaginile să sară de pe ecran și să iasă în evidență în paragrafele textului.

30. Foi de stil alternative

luați în considerare toate diferitele stiluri media pe care trebuie să le includeți atunci când construiți un singur aspect al site-ului web. Acest lucru ar trebui să arate bine pe monitoarele desktop, laptopurile, tabletele și, eventual, chiar smartphone-urile. Și nu uitați proiecția și presa scrisă, care nu este întotdeauna acceptată.

dacă aveți un public numeros care folosește aceste tipuri obscure de media, vă recomand să vă modelați propriile foi de stil alternative. Acestea pot fi etichetate în funcție de tipul de suport, cum ar fi imprimarea.css, sau adăugate în foile de stil existente. Dacă există suficientă cerere, atunci vizitatorii dvs. vor fi veșnic recunoscători. Și sincer nu ia o mulțime de timp pentru a edita aspectul site-ul implicit pentru Imprimante comune.

Gânduri finale

designerii creativi și, în special, dezvoltatorii web frontend vor găsi, sperăm, câteva tehnici utile în această listă. Cele mai multe dintre aceste idei nu ar trebui să ia mai mult de 1-2 ore pentru a pune în aplicare, în timp ce multe pot fi fi realizate în cât mai puțin de 15-30 de minute.

reevaluarea machetelor site-ului dvs. web și actualizarea cu noi tendințe din când în când este adesea o idee bună, mai ales cu versiuni mai noi de proprietăți CSS3 care permit umbre, animații și colțuri rotunjite ale browserului nativ. Aceasta este o colecție excelentă de idei care merită o privire dacă aveți nevoie de unele actualizări rapide.

în plus, dacă aveți întrebări sau idei despre articol nu ezitați să împărtășiți cu noi în zona de discuții post.