24/04 2012

10 caracteristici importante ale website-urilor business de calitateScris de admin

Asadar, afacerea dumneavoastra are deja sau are nevoie de un site pentru a-si promova brandul. Designul web poate fi un proces coplesitor, dar specialistii in acest domeniu stiu cel mai bine ce este absolut necesar in dezvoltarea unui site si peste ce lucruri pot lipsi (cum ar fi animatii Flash).

Primul lucru pe care trebuie sa-l faceti este gasirea unui URL de impact. Asigurati-va ca are sens si ca este in concordanta cu afacerea dumneavoastra, nu este dificil de scris si este disponibil pe platformele sociale. Incercati sa va folositi de resurse precum Panabee sau Name Vine pentru a genera URL-ul si pentru a vedea daca este disponibil.

Odata ce v-ati stabilit domeniul, este timpul sa construiti site-ul si sa luati decizii importante. Iata 10 necesitati pentru site-ul dumneavoastra care va vor ajuta sa le furnizati vizitatorilor o experienta pozitiva pe site, sa imbunatatiti amprenta digitala a companiei dumneavoastra si sa cresteti gradul de atasament fata de brandul companiei.

1. O structura logica

Desigur, un site web trebuie sa fie satisfacator in mod estetic, dar este mai important sa fie folositor si sa isi atinga scopul. Inainte de a alege un server sau de a tasta un tag HTML, ar trebui sa va imaginati traseul de functionare al site-ului. Este important atat pentru experienta utilizatorilor, cat si pentru SEO, de vreme ce Google ia in considerare continutul si structura site-urilor pentru a le afisa in paginile de rezultate. Asadar, faceti o harta si imaginati-va un design pentru site (wireframe) si aratati-l catorva prieteni pentru a va da seama daca este coerent si intuitiv.

2. Informatiile cruciale despre afacere

Cea mai des intalnita eroare este ca oamenii vor sa creeze site-urile pe care si le doresc, nu pe cele de care au nevoie. Imaginati-va site-ul unui restaurant care are o multime de informatii despre istoricul localului, dar din care lipsesc lucruri elementare precum meniul, informatiile de contact sau adresa exacta.

Mentineti textele la un nivel cat mai scurt, daca este vorba de declaratii de principii, pentru ca vizitatorii, lipsiti de atentie, ar putea sari peste aceste pagini fara sa le citeasca. Iata un pont pentru a va defini misiunea in texte cat mai scurte: comparati-va afacerea cu valori universale sau business-uri de notorietate din alte domenii.

Indiferent de afacerea pe care o aveti, ar trebui sa prezentati pe site cateva informatii esentiale despre aceasta si despre domeniul de activitate. Asa cum site-urile restaurantelor au nevoie de un meniu si de specificatiile adresei, fiecare industrie are elementele sale definitorii. Daca aveti un magazin online, este necesar sa adaugati fotografii cu produsele comercializate. Daca lucrati intr-o industrie care implica foarte mult servicii pentru clienti, adaugati o sectiune de testimoniale. Creati-va site-ul in asa fel incat sa ofere acele informatii pe care le-ar cauta potentialii clienti.

3. Informatii de contact

Cele mai importante detalii ale unui site business sunt informatiile de contact, motiv pentru care, in general, acestea au dedicata o sectiune separata si unica in site. Numarul de telefon, email-ul si adresa sediului companiei trebuie sa fie accesibile si usor vizibile, pentru ca nimic nu este mai frustrant pentru un utilizator decat sa-i fie dificil sa interactioneze cu business-ul pe care il vizeaza.

Cand adaugati adresa de email sau numarul de telefon pe site, nu uploadati aceste informatii sub forma de imagini – numarul adresei ar trebui sa poata fi copiate cu usurinta din site pentru a facilita interactiunea. Majoritatea telefoanelor mobile noi au posibilitatea de a face click pentru a suna direct dintr-o pagina web, asa ca este dezirabil sa faceti acest proces cat mai simplu pentru utilizatori.

Nu vreti sa va sune telefonul prea des? Folositi doar adresa de email, dar nu uitati ca este important sa raspundeti in timp util. Si da, este important ca adresa de email sa fie configurata pe domeniul site-ului. Utilizarea adreselor Gmail sau – mai rau – AOL nu este profesionala si nu este privita cu ochi buni nici de catre clienti. Puteti, insa, daca doriti, sa pastrati interfata Gmail si sa va configurati mail-ul in acelasi mod, folosindu-va de Google Apps.

4. Navigabilitate

Asa cum o harta este nefolositoare daca nu are o legenda, un site este nefolositor daca nu poate fi navigat cu usurinta. Asigurati-va ca folositi denumiri logice si usor de inteles pentru paginile site-ului dumneavoastra – contact, despre, FAQ etc.

Cand dezvoltati strategia de navigare, ar trebui sa luati in considerare butoanele de tip call to action. Ce vreti sa faca utilizatorii pe site-ul dumneavoastra? Sa plaseze o comanda? Sa devina membrii? Sa se aboneze? Definiti-va bine scopurile si evidentiati-le.

Puneti-va in locul vizitatorilor site-ului si faceti tot posibilul sa subliniati acele lucruri pe care vreti sa le faca utilizatorii.

5. Siguranta datelor

Daca aveti un site de ecommerce, trebuie sa depuneti putin efort sa va securizati baza de date cu un certificat SSL. Acesta va cripta mesajele dintre dumneavoastra si clientii dumneavoastra (numarul cardului de credit, datele personale etc), oferindu-le acestora siguranta de a face tranzactii.

6. Integrare cu Social Media

Exista o multime de platforme sociale (Twitter, Facebook, Tumblr, YouTube, Pinterest, Google+, LinkedIn, Instagram, Foursquare) pe care ar fi bine sa va promovati prezenta, pentru ca social media este o parte esentiala a marketingului unei afaceri.

Integrarea acestor platforme pe site va va ajuta si la SEO, va imbunatati amprenta afacerii dumneavoastra in mediul social web si le va permite fanilor sa va urmareasca activitatea. Prezenta pe aceste platforme trebuie sustinuta prin continut actualizat frecvent.

7. O versiune mobila a site-ului

Telefoanele inteligente si tabletele cresc traficul web, iar acesta va continua sa creasca pe masura ce aceste device-uri se vor ieftini, asa ca ar fi bine sa dezvoltati si o versiune pentru telefoane mobile a site-ului.

Daca in urma cu cativa ani, crearea unui design pentru un site insemna realizarea acestuia pentru computere, acum inseamna sa-i dezvolti un design pentru orice gadget care se poate conecta la internet (laptopuri, tablete, telefoane mobile – toate avand dimensiunile ecranului diferite). Cum poti face acest lucru? Design scalabil.

Site-urile cu design scalabil pentru toate tipurile de device-uri va permite folosirea dimensiunilor fluide, care se adapteaza la orice ecran. Layout-urile sunt ajustabile si imaginile se scaleaza pentru o mai buna experienta, indiferent de device-ul folosit.

8. FAQ

Oamenii au o multime de intrebari. Pe masura ce primiti feedback prin email, adunati toate acele nelamuriri care-i ingrijoreaza pe clientii dumneavoastra si realizati o lista in care sa oferiti raspunsuri clare si concise. In general, intrebarile se invart in jurul materialelor sau ingredientelor folosite (din motive alergenice), informatii despre livrare, despre istoricul companiei, despre procedurile de retragere sau anulare a comenzii etc.

9. Hosting de calitate

Nu va jucati cu serverul de hosting. Aveti nevoie de un provider bun, si trebuie sa investiti si pentru asistenta tehnica 24/7. Daca site-ul dumneavoastra nu beneficiaza de o gazduire buna, afacerea poate fi afectata in numeroase feluri. Un site care se misca incet poate deveni enervant pentru utilizatori; dar mai presus de dorintele acestora, o gazduire precara va poate afecta page rank-ul in motoarele de cautare, de vreme ce majoritatea algoritmilor acestora detecteaza viteza de incarcare.

10. Iata si cateva lucruri de care nu aveti nevoie pe site:

Nu subestimati puterea simplitatii, si luati-va gandul de la a adauga urmatoarele lucruri pe site-ul dumneavoastra:

  • Muzica
  • Flash
  • Orice videoclip sau audioclip care are autoplay
  • Informatii externe si media – nu vor face altceva decat sa incetineasca viteza de incarcare a site-ului

Voi ce considerati ca este important pentru un site?

19/04 2012

Esti webdesigner? Alatura-te echipei noastre!Scris de admin

Cu fiecare pas inainte pe care il facem, cu atat avem mai multa nevoie de oameni capabili, seriosi si talentati. Daca esti o astfel de persoana si ai experienta in webdesign, aplica la acest job, si nu lasa sa-ti scape printre degete sansa de a colabora cu o echipa puternica si constiincioasa!

Iata ce presupune fisa postului de webdesigner:

-       realizarea de machete grafice pentru materialele tiparite/ web

-       crearea de elemente de identitate vizuala

-       dezvoltarea bazei de cunostinte de specialitate a departamentului

-       realizarea de pliante, afise, bannere, roll-up-uri, carti de vizita, logo-uri, mape de prezentare si alte materiale pentru print

-       elaborarea layout-urilor pentru pagini web

-       inserarea HTML si CSS pentru paginile web

Ce trebuie sa stii sa faci:

-       Adobe Photoshop

-       Adobe Illustrator

-       Corel Draw

-       Cunostinte HTML si CSS

-       Limba engleza, nivel mediu (scris, citit)

Asteptam CV-urile insotite de portofoliu la hr@ligasoftware.ro

29/03 2012

Angajam iOS DeveloperScris de admin

Liga Web este in cautare de noi colegi. Daca esti iOS Developer si poti contribui la crearea si implementarea aplicatiilor web pentru dispozitive mobile alaturi de noi, nu ezita sa ne trimiti un cv la hr@ligasoftware.ro.

Suntem o companie dinamica, si le oferim angajatilor nostri sansa de a se dezvolta si perfectiona in sanul firmei. Candidatul ideal pentru acest job trebuie sa demareze proiecte bine definite si sa ne atraga atentia cu experientele sale anterioare (portofoliu).

 

Responsabilitati:

-Sa participe la intregul proces de dezvoltare al aplicatiilor iOS

-Sa se ocupe de mentenanta aplicatiilor iOS

-Sa respecte cele mai bune practici ale industriei si standardele de dezvoltare a aplicatiilor mobile

-Sa-si actualizeze constant informatiile in ceea ce priveste programarea iOS

-Sa colaboreze cu departamentul de management si sa comunice cu echipa in legatura cu stadiile in care se afla proiectele si cu deadline-urile stabilite etc. si sa respecte aceste intelegeri

 

Calificare si aptitudini:

-Cunostinte de SVN, XML, JSON

-Capacitatea de a lucra cu XHTML, HTML5, Javascript si jQuery Mobile

-Experienta in iOS SDK, Objective C si/ sau Cocoa Touch

-Experienta in dezvoltarea aplicatiilor mobile

-Intelegerea fundamentelor dezvoltarii orientate obiect si a arhitecturii MVC

-Experienta in construirea cu succes a aplicatiilor iOS complexe

-Atitudini analitice exceptionale, creativitate si atentie la detalii

-Abilitati organizationale si de rezolvare a problemelor

-Capacitatea de a lucra intr-o echipa si de a se automotiva

 

Consideri ca te califici pentru acest post? Asteptam CV-ul tau si portofoliul anterior la hr@ligasoftware.ro!

19/03 2012

Prea mult SEO poate afecta o afacere ecommerce?Scris de admin

In ciuda proeminentei retelelor de social media, traficul provenit din motoarele de cautare ramane crucial pentru comerciantii online. Dar concentrarea prea intensa asupra optimizarii motoarelor de cautare in detrimentul acordarii atentiei asupra cumparatorilor poate dauna afacerilor online.

Cea mai mare problema in ceea ce priveste optimizarea si uzabilitatea este ca poti face schimbari care sunt vizibile pentru utilizatori, si schimbari care trec neobservate. Si provocarea vine atunci cand schimbarile sunt vizibile. Exemple de schimbari care trec neobservate pot fi optimizarea vitezei de incarcare a paginii site-ului, modificarea tagurilor de titlu sau al meta descrierilor – desi chiar si acestea sunt observabile in rezultatele cautarilor.

Dar cand userii acceseaza o pagina, nu sunt atenti la titlul paginii sau la descrierile meta din codul sursa. Asa ca, atunci cand vine vorba despre probleme de uzabilitate, ne referim la schimbarile vizibile de continut din pagina. Navigabilitatea este una dintre cele mai mari probleme care pot afecta atat SEO, cat si uzabilitatea (cum ar fi navigarea mai rapida sau sortarea produselor in functie de utilitate); cand faci schimbari SEO in aceste sensuri, le poti crea probleme utilizatorilor.

Asadar, oricat de tentant ar fi sa faci schimbari in ceea ce priveste navigatia (si care ar putea fi folositoare si pentru SEO), ai toate sansele sa afectezi abilitatea utilizatorilor de a traversa site-ul. Pentru ca daca este vorba de SEO, e esential ca modificarile sa fie receptate corect de catre motoarele de cautare, care sa fie in stare sa ghideze utilizatorii la paginile pe care acestia doresc sa le acceseze. Deseori, oamenii isi optimizeaza paginile folosindu-se de cuvinte cheie, ca unealta; de cele mai multe ori, acestea nu au efectul scontat; navigatia si breadcrumb-urile nu ajuta nici ele foarte mult; ba din contra, fac continutul textual sa para prost scris si saracacios in informatii.

Este important sa va asigurati ca site-ul, continutul, layout-ul, instructiunile de navigare si cuvintele cheie au legatura si folosirea lor impreuna are sens; pentru ca statisticile Google in ceea ce priveste cuvintele cheie nu trimit neaparat clientii catre produsele dumneavoastra; este important ca optimizarea sa se faca tinand cont de cutumele utilizatorilor. In ceea ce priveste optimizarea, cantitatea nu numai ca nu ajuta foarte mult, dar poate chiar sa dauneze unui site; este preferabil un site curat, cu afisari relevante in functie de cautari.

Motoarele de cautare vor sa le ofere utilizatorilor o experienta placuta; sa presupunem ca ati creat un site grozav pentru utilizatori si aveti rezultate extraordinar de bune, insa Google nu va rasplateste in aceeasi masura ca pe competitorii dumneavoastra; in acest caz, Google este cel care nu-si face treaba, nu dumneavoastra. Asta nu inseamna ca nu se va revansa la un moment dat, cand greseala va fi sesizata; se vor asigura ca veti avea un rank mai bun decat al competitorilor dumneavoastra, pentru ca acesta este scopul.

Acum sa facem o comparatie intre traficul din motoarele de cautare si traficul din social media; exista diferente majore, desigur; pentru ca social media, dupa cum are si denumirea, este un mediu destinat socializarii; nimeni nu vrea sa intre pe o retea de socializare pentru a compara produse si preturi; asadar, scopul este interactiunea, comunicarea. Cel mai bun SEO este acela realizat in functie de continut; iar un continut bun trebuie promovat – aici intervine rolul social media.

19/03 2012

Cele 10 porunci pentru o interactiune sociala online eficaceScris de admin

Iata un plan in zece etape care sa va ajute sa interactionati eficient cu publicul din mediul online. Aceste sfaturi practice vor contribui la transformarea dumneavoastra intr-un bun membru al comunitatilor de social networking din care faceti parte.

1. Arageti clientii in mod natural, nu-i fortati sa va observe

Una dintre primele lectii pe care le veti invata foarte repede in momentul implicarii in fenomenul social media este ca formele traditionale de marketing nu au aceeasi eficienta in online. Asadar, nu incercati sa scoateti la inaintare produsele si serviciile pe care le oferiti; uneltele noi impun conceperea si respectarea unor reguli noi.

De exemplu, nu le trimiteti noilor fani de pe Twitter mesaje de genul “Va multumim ca ne urmariti activitatea. Vizitati gratuit site-ul nostru web… (mesaje promotionale)”.

2. Castigati-va dreptul de a va face auziti

Implicarea in social media inseamna conversatie si participare. Nivelul dumneavoastra in calitate de participant este judecat in functie de valorile pe care le furnizati comunitatii, ca intreg. Slavirea celorlalti participanti va va aduce foarte putina atentie; in schimb, impartasirea libera a ideilor va va ajuta sa deveniti un membru respectat.

3. Continutul este cel mai important

Nimic nu poate concura cu un continut bine scris si plin de informatii folositoare, indiferent de formele pe care le ia: postari pe blog, mini-postari pe Twitter, actualizari de status, videoclipuri, imagini, tutoriale etc. Beneficiile unui astfel de continut sunt urmatoarele:

  • imbunatatirea plasarii in motoarele de cautare – Google adora continutul updatat frecvent;
  • conducere puternica – un continut de calitate va confera alura unui expert in deplina masura sa ofere sfaturi;
  • implicarea mai eficienta a clientilor – continutul construit in functie de nevoile publicului ii va face sa revina;
  • transformarea in active share-uibile – dorinta de a distribui continutul a generat aparitia unor layere de social media prin intermediul carora fanii sa poata share-ui informatia (cum ar fi Facebook like, Tweet this etc)

4. Autenticitatea si transparenta sunt pietrele de temelie ale social networking-ului

Chiar daca pare un cliseu, exact acestea sunt fundamentele paradigmei de marketing realizat prin intermediul new media. Fiti reali (umani). Fiti deschisi. Fiti sinceri. Recunoasteti-va greselile, atunci cand este cazul.

5. Nu trebuie sa fiti prezent pe toate retelele de socializare

Este imposibil sa mentineti o prezenta activa pe toate retelele de socializare, si nu este nevoie sa faceti acest lucru. Este important sa fiti prezenti acolo unde sunt prezente publicurile dumneavoastra.

6. Daruiti, si veti fi rasplatiti

Adoptati o atitudine de disponibilitate pentru ajutorare, in activitatile dumneavoastra sociale; aceasta va va asigura construirea unui nume credibil in cercurile de social media unde sunteti prezent.

“Pierdeti controlul marketing-ului”; dati idei si informatii in mod gratuit, fara a cere vreo recompensa. Aceasta disponibilitate de a sugera secretele dumneavoastra de marketing va va aduce beneficii pe termen lung.

7. Este vorba doar despre un canal

Regulile de marketing inca se aplica, intr-un fel sau altul. Social media este inca un canal construit pentru a va oferi spatiu pentru mesajele pe care vreti sa le transmiteti publicului. Nu ar trebui privit ca un substitut pentru celelalte mijloace de promovare, ci ca o completare.

8. Social media este o stare de spirit

Trebuie sa incorporati principiile de social media in gandirea dumneavoastra. Nu este suficient sa va schimbati uneltele (tacticile), ci este necesar sa va modificati si gandirea (strategiile). Nu are nici un efect sa invatati cum sa faceti ceva si, in acelasi timp, sa nu intelegeti de ce faceti acel lucru.

9. Fiti dumneavoastra insiva

Recomandam folosirea unei fotografii personale ca avatar, si a numelui real. Asta nu inseamna ca nu ar trebui sa aveti o identitate legata de brand-ul dumneavoastra. Argumentul este simplu: oamenii prefera sa interactioneze cu alti oameni, nu cu imaginea unui brand.

A fi dumneavoastra insiva inseamna, de asemenea, sa nu pretindeti ca sunteti altceva decat ceea ce sunteti. Amintiti-va cel de-al patrulea sfat, si tineti cont de autenticitate si transparenta.

10. Experimentati

Chiar daca are la baza un set de reguli nescrise, social media nu dispune si de coduri practice sau filosofice. Este inca loc pentru experimente; de fapt, aceasta este singura modalitate prin care fenomenul va lua amploare.

31/01 2012

Angajam Programator PHPScris de admin

Responsabilitati

  • realizarea site-urilor web folosind limbajul de programare PHP, pe baza design-urilor si a cerintelor clientilor
  • mentenanta si updatarea site-urilor existente
  • dezvoltarea codului necesar implementarii site-urilor
  • incarcarea site-urilor pe serverele clientilor
  • testarea site-urilor si repararea eventualelor erori
  • determinarea functionalitatilor necesare site-urilor, pe baza cerintelor clientilor

Competente necesare

  • cunostinte de programare web
  • cunostinte de standarde si de protocoale web
  • cunostinte de baze de date relationale si limbaj SQL
  • cunostinte de Java Script (jQuery, Yui)
  • cunostinte solide de CSS 3

*Reprezinta un avantaj cunoasterea tehnologiilor AJAX si XML

Candidatul ideal

  • creativitate
  • capacitate de sinteza si analiza
  • adaptabilitate la tehnologiile noi
  • atentie la detalii
  • capacitatea de a comunica productiv cu ceilalti membri ai echipei
Trimiteti CV-ul la hr@ligasoftware.ro
30/01 2012

Angajam Web DesignerScris de admin

Cautam un web designer creativ si talentat, cu experienta in domeniu de minim un an.

Activitati principale:

-       realizarea de machete grafice pentru materialele tiparite/ web

-       crearea de elemente de identitate vizuala

-       dezvoltarea bazei de cunostinte de specialitate a departamentului

-       realizarea de pliante, afise, bannere, roll-up-uri, carti de vizita, logo-uri, mape de prezentare si alte materiale pentru print

-       elaborarea layout-urilor pentru pagini web

-       inserarea HTML si CSS pentru paginile web

Cunostinte necesare:

-       Adobe Photoshop

-       Adobe Illustrator

-       Corel Draw

-       Cunostinte HTML si CSS

-       Limba engleza, nivel mediu (scris, citit)

Trimiteti CV-ul (si portofoliul) la hr@ligasoftware.ro

11/01 2012

Liga’s New Year’s ResolutionsScris de admin

Iata un lucru pe care il avem cu totii: agenda pentru 2012. Am reusit sa trecem peste inca un sfarsit al lumii (mai avem unul si in acest an, desigur!) si sa ne indeplinim cu succes un procent respectabil din ceea ce ne-am propus. Vorbesc despre noi, echipa Liga Web, care a avut un an plin, frumos si deloc facil; pentru ca multumirea clientilor necesita eforturi din partea intregului colectiv. Dar, tragand linie, ne dam seama ca 2011 a fost fructuos din punct de vedere al colaborarilor si al oportunitatilor. Am mai crescut un pic, am mai invatat cate ceva, ne perfectionam continuu si ne ramane timp sa si sarbatorim succesele.

Inainte sa facem planurile pentru 2012, cred c-ar trebui sa facem o mica retrospectiva a anului precedent; pentru a ne trece-n revista realizarile, pentru a ne da seama unde e loc de mai bine, pentru a ne stabili standardele noului an si, nu in ultimul rand, pentru a ne incuraja sa continuam cu si mai mult spor. Asadar, in anul care tocmai a trecut, Liga Web Design a realizat peste 51 de proiecte online diverse (vedeti portofoliul), de la simple site-uri de prezentare, la magazine complexe. Le-am oferit clientilor nostri cele mai bune servicii de design, dezvoltare web si optimizare (SEO). Si suntem convinsi ca eforturile ne-au fost apreciate, si ca profesionalismul de care am dat dovada ne va propulsa intr-un 2012 mai incarcat si mai promitator.

Asa ca, tot noi, echipa Liga Web, ne dorim ca pana la urmatorul sfarsit al lumii sa fim si mai harnici, sa facem fericiti mai multi clienti si colaboratori si sa crestem in continuare. A propos de crestere, cautam doritori care sa ni se alature (mai multe detalii, aici si aici).

Voi ce va doriti in acest an?

 

29/11 2011

Liga Web a lansat site-ul Liberty CenterScris de admin

Liga Web Design a lansat noul site al mall-ului Liberty Center. Noul site, creat de Liga Web prezinta o serie de imbunatatiri majore fata de versiunea anterioara, si anume:

  • Tur virtual
  • Harti interactive
  • Prezentare magazine, Restaurante si Servicii
  • Evenimente si promotii
  • Blog si elemente social media, incentive “call to action” si modul de newsletter.
  • Concurs interactiv de abonare la newsletter

Si nu in ultimul rand, site-ul este optimizat pentru SEO (versiunea anterioara fiind Flash, nu oferea aceasta posibilitate).

…noul design este “fresh” si neconventional, daca vreti sa-l vedeti, mergeti pe site-ul Liberty Center.

29/11 2011

10 lucruri pe care ar trebui sa le stii despre CSSScris de admin

Sa trecem direct la subiect, timpul nu asteapta pe nimeni.

1.Organizare

La fel ca in orice altceva, merita sa fii organizat(a). In loc sa arunci cu id-uri si clase aiurea cum iti vin in minte incearca sa folosesti o structura coerenta. Ea te va ajuta sa fii constient(a) de modelul „in cascada” a foii de stil si sa profiti de „style inheritance” sau stilul de mostenire a acesteia.

Declara elementele cele mai generice la inceput, urmate de cele mai putin generice. Acest lucru permite foii de stil sa mosteneasca atributele corect si pe viitor va fi mult mai usor si rapid de modificat un anumit stil.

Foloseste o structura care ti se potriveste tinand cont de modificari viitoare ce pot aparea si de alti programatori ce vor lucra cu foaia de stil:

  • Resetari globale si suprascrieri
  • Legaturi si font-uri
  • Layout-ul principal
  • Layout-uri secundare
  • Elemente de formular
  • Diverse

 2.Intotdeauna incepe cu o resetare globala

Fiecare browser are implicit, un stil considerabil diferit pentru majoritatea elementelor HTML, adica un stil pe care il aplica elementelor HTML automat (vorbim de valori diferite pentru atribute de tipul: padding, margin, border, font-family, text-decoration, font-weight, outline, etc). Este total aiurea stiu, dar solutia este urmatoarea – incepi stylesheet-ul cu o resetare globala pentru toate elementele HTML, ca in exemplul de mai jos:

html, body, a, div, table, tr, td, th, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead

  {

margin:0;

padding:0;

border:0;

text-decoration:none;

vertical-align:baseline;

font-weight:normal;

-webkit-font-smoothing: antialiased;

line-height:normal; outline:0 none

}

body:{ line-height:1}

E doar un exemplu, nu este complet si nu include elemente de HTML5, dar este un inceput. Daca descoperi un element nou ce are nevoie de reset doar il adaugi in lista.

 3.Foloseste nume utile

Unul dintre avantajele principale in CSS este abilitatea de a separa stilurile de continut. Poti sa faci redesign complet la un site doar modificand CSS-ul, fara sa te atingi de HTML. Asa ca nu iti bate joc de CSS folosind nume sau denumiri care te limiteaza. Foloseste conventii de nume mai versatile si pastreaza o consistenta. Nu folosi stiluri specifice. O clasa in genul .link-blue este foarte probabil sa iti incurce foaia de stil pe viitor cand clientul va cere sa schimbi acele link-uri pe culoarea oranj.

Numeste elementele in baza a ceea ce sunt, nu dupa cum arata. De exemplu, .comment-blue este mai putin versatil decat .comment-beta, si .post-bigfont limiteaza mai mult decat .post-title. De asemenea foloseste cratime „-” in loc de underscore „_”, browser-ele mai vechi nu se inteleg prea bine cu underscore in CSS sau nu le suporta deloc. Pentru o compatibilitate mai buna fa-ti un obicei din a folosi cratime in loc de underscore. Foloseste #col-alpha in loc de #col_alpha. Punctul si virgula dintre atributele unei declaratii sunt necesare pentru a separa atributele, insa sunt optionale cand ai doar un singur atribut, Ex: .font-jmecker {font-size:20px}. Din experienta mea si a altor programatori CSS pot sa spun ca punctul si virgula este optional si pentru ultimul atribut din mai multe ale unei declaratii, insa nu am testat acest lucru pe toate versiunile de browser-e disponibile pe toate platformele existente, pot sa confirm doar pe cele mai populare browser-e incepand de acum 4-5 ani pana in prezent (Firefox, Opera, Internet Explorer, Chrome si Safari).

 4.Nu te repeta

Re-foloseste declaratii sau atribute de fiecare data cand ai posibilitatea, grupand elementele in loc sa declari stilurile din nou pentru fiecare. De exemplu, daca h1 si h2 au aceeasi culoare sau marime de font grupeaza-le folosind virgula pentru a le separa.

exemplul urmator:

h1, h2 {

margin: 4px

font-size:16px;

color:red;

}

mult mai eficient decat:

h1 {

margin: 4px

font-size:16px;

color:red;

}

h2 {

margin: 4px

font-size:16px;

color:red;

}

Gandeste-te mereu la posibilitatea de a grupa elementele si de a folosi prescurtari pentru declaratii.

poti face asta:

h1 {

margin-top:5px;

margin-right:0px;

margin-bottom:10em;

margin-left:0px;

}

cu doar:

h1 {margin:5px 0 10em 0}

sau:

h1 {

margin-top:20px;

margin-right:0px;

margin-bottom:20px;

margin-left:0px;

}

cu doar:

h1 {margin:20px 0}

Cand o valoare este 0 pentru orice atribut nu mai este nevoie sa specifici unitatea de masura. Este foarte important sa intelegi ordinea in care aceste prescurtari se interpreteaza in CSS. Sus, Dreapta, Jos, Stanga – Un sens ceasornic care incepe cu ora 12. De asemenea daca atributele Sus si Jos sau Stanga si Dreapta sunt la fel nu e nevoie sa folosesti decat 2, ca in exemplul 2 de mai sus.

Alt exemplu:

poti face asta:

#header {

background-image: url(img/header.jpg);

background-repeat: no-repeat;

background position: top center

}

cu doar:

#header { background:url (img/header.jpg) no-repeat top center}

 5.Esti pe calea cea buna?

Putini programatori se folosesc cu adevarat de puterea ce le-a fost incredintata de catre CSS cand vine vorba de modul de referire la elementele HTML. Modul prin care declari un stil pentru un anumit element poate fi realizat fara a specifica o clasa sau un id pe acel element. Daca ai un div cu id-ul #menu si vrei sa schimbi atributele tuturor legaturilor din acel div (sa zicem ca vreau sa setez o margine de 10 pixeli la stanga pe fiecare legatura) poti folosi urmatoarea declaratie:

#menu a {margin-left:10px}

Chiar daca legatura se afla intr-un ul (unordered list) sau orice alt element, declaratia facuta se refera la absolut toate legaturile din acel div. Aceasta metoda ne scuteste de ceva cod HTML si CSS, dar nu poate fi folosita atunci cand ai nevoie de stiluri diferite pentru anumite elemente de acelasi tip.

 6.Scrie pentru Gecko, apoi ajusteaza pentru Webkit, IE si Presto

Nu sunt persoane, sunt layout engines (ceea ce folosesc browser-ele ca sa afiseze paginile).

Scuteste-te de multa bataie de cap, scrie CSS-ul mai intai pentru browser-ele care folosesc Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Daca CSS-ul tau functioneaza corect pentru Gecko este mult mai probabil sa nu aibe probleme pentru Webkit (Safari, Chrome), Internet Explorer si Presto (Opera).

 7.Nu folosi hacks

Un programator CSS bun stie ca nu are nevoie de hacks decat in cazuri foarte rare. In majoritatea cazurilor este suficient sa creezi o foaie de stil separata pentru browser-ul care iti face probleme, nu este nevoie de JavaScript sau alte tehnologii pentru a repara 99% din incompatibilitati.

Motorul Triton (Internet Explorer) are o functie interesanta care iti permite sa folosesti HTML special pentru o anumita versiune de IE, astfel poti incarca o foaie de stil facuta pentru aceste browsere.

Este nevoie doar de unul sau mai multe din urmatoarele comment-uri conditionale in <header></header>

 

<!–[if IE]>

Target all versions of IE

<![endif]–>

 

<!–[if lte IE 7]>

Target all versions of IE that are less than or equal to “7″

<![endif]–>

 

<!–[if IE 6]>

Target IE 6

<![endif]–>

Iata si un exemplu mai practic:

<!–[if IE 6]>

<p>You are using Internet Explorer 6.</p>

<![endif]–>

<!–[if !IE]><!–>

<p>You are not using Internet Explorer.</p>

<!–<![endif]–>

 8.Validare

Foloseste validatorul CSS gratuit al W3C. Daca te-ai blocat si layout-ul tau nu face ce vrei sa faca, validatorul CSS te va ajuta sa descoperi erorile. De cele mai multe ori ai uitat sa pui un punct si virgula undeva sau ai un conflict de id-uri.

 9.Ceva special si curat

Separa CSS-ul special pentru un anumit browser in alta foaie de stil si include-o in functie de nevoie prin JavaScript, cod pe parte de server sau comentarii conditionale. Foloseste aceasta metoda pentru a evita hack-uri de CSS murdare in foile de stil principale. Acest lucru iti va mentine baza CSS-ului tau curata si usor de administrat.

10.Testing, testing…

Testeaza-ti codul in browser-ele necesare, este foarte posibil sa existe diferente intre interpretarile browser-elor, astfel anumite elemente nu vor fi afisate la fel. Aici cauzele sunt diverse, din nefericire nu pot decat sa te sfatuiesc sa apelezi la prietenul nostru Google.


Daca descoperi ca lipseste ceva din lista contribuie si tu, lasa un comentariu.