Monthly Archives: Octombrie 2013

Responsive Web Design


Responsive Web Design

Responsive Web Design (Photo credit: adactio)

In unul dintre ultimele proiecte am dat peste Responsive Web Design… si am ramas putin 😐 .

Dar dupa o cautare pe Google am gasit ce inseamna Responsive Web Design.

2. Responsive design. Asa cum spuneam mai inainte, termenul de responsive design se refera la adaptarea continutului pentru orice tip de device, indiferent de rezolutia ecranului. Principalele avantaje ale acestei tehnologii sunt:

– Fluidizarea continutului si a nivelului de date indiferent de dimensiunile ecranului device-ului folosit.
– Imaginile sunt de o calitate ridicata, flexibile, astfel ca urmarirea stirilor sau parcurgerea unor galerii foto se poate face in conditii optime, la rezolutii ridicate.
– Dat fiind faptul ca este un upgrade al Mobile Firts, principalele capacitati ale acestei tehnologii au fost imbunatatite, adaugandu-se alte facilitati care sa optimizeze continutul nu doar pentru telefoanele mobile ci si pentru tablete, indiferent de natura si dimensiunea display-ului.

http://blogatu.ro/2013/02/responsive-web-design.html

Eu aveam de modificat o tema premium astfel incat sa ramana responsive, sa fie designul mai ok si sa primeasca cateva modificari usoare cum ar fi schimbarea culorii fundalului, a fontului si alte lucruri.

Peste ce m-am lovit mai tare a fost sa fac o imagine dintr-un articol Responsive si mi-a luat cateva minute pana am gasit pe tatal Google ceva interesant, desi nu foarte practic. Nu era prea practic pentru ca trebuia la fiecare imagine inserata sa mai adaugi niste taguri in articol si asta putea fi chiar enervant. Totusi pentru moment solutia e ok si o recomand si voua.

Ca sa faci o imagine responsive trebuie sa facem un shortcode:

  1. adaugi la sfarsitul fisierului functions.php din dosarul temei tale activate urmatorul cod:

     function responsive_images($atts, $content = null) {
    return ‘<div>’ . $content .'</div>’;
    }
    add_shortcode(‘responsive’, ‘responsive_images’);

  2. adaugi la sfarsitul fisierului style.css din dosarul temei tale activate urmatorul cod:

    @media only screen and (max-width:767px) {
    .image-resized img{
    width:100%;
    height:auto;
    }
    }

  3. in articol adaugati shortcodeul [responsive] ca in exemplul de mai jos:
[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

Ca sa testati siteul vostru pe mai multe rezolutii folositi aplicatia online al lui Matt Kersley : http://mattkersley.com/responsive/.

Multumesc lui Lorin de la key27 pentru acest proiect care mi-a largit viziunea.

Multumiri celor care au creat si promovat articolul initial:

Sugestii Seo si Design pentru litrainternational.com


Sugestii Seo si Design pentru litrainternational.com

Cum am scris intr-un post anterior, lucrez pentru un italian caruia ii fac seo si design la siteuri. Neintelegandu-ne prea bine pe skype pentru ca are o conexiune la internet mai slaba, i-am facut sugestii seo si de design la alt site decat la cel care vroia, adica la litrainternational.com. Ei bine, remarcile pentru acest site le voi scrie in acest articol.

Dupa ce am testat siteul cu diverse aplicatii online de verificare a sintaxei CSS, HTML, dar si in legatura cu linkurile stricate sau duplicate am primit mai multe rapoarte destul de ingrijoratoare:

Cu stupoare am constatat ca cel putin jumatate din pagini nici macar nu existau, cum ar fi :  http://www.litrainternational.com/commercialcoverings/ , sau cele de la galerie.

O alta problema este lipsa faviconului care defineste un brand, dar si duplicitatea meniurilor, astfel ca meniul principal se regasea si sub bannerul din dreapta cu estimate, doar ca lipsea pagina About Us.

Faptul ca toate paginile aveau aceleasi titluri, dar si cuvinte cheie ( keywords) si descrierii era o alta problema. Cand o persoana cauta ceva particulat pe google, nu va reusii sa gaseasca pentru ca toate paginile siteului au acelasi titlu si toate sunt afisate la fel, deci persoana nu va ajunge pe pagina corecta.

Lipsa unui blog cu continut constant, cat si a mediilor sociale: Facebook si Twitter sunt un alt factor care nu ajuta la promovarea siteului si prin urmare, a produselor si a brandului Litra.

Numele imaginilor sunt in italiana, desi ar fi trebui sa fie in limba siteului lucru care ar ajuta persoanele care cauta imagini cu produsele Litra pe google si nu le gasesc pentru ca ele nu exista in limba persoanei respective. Atributele alt pentru imagini si title pentru linkuri lipsesc sau nu sunt unice, un alt fapt care ajuta la cautarea pe Google.

Un alt sfat care l-am dat este utilizarea intensa a Google Analytics, Google Webmaster Tools, Bing Webmaster Tools si Yahoo Webmaster Tools, cat si folosirea sitemap.xml, robots.txt si introducerea in directoare de linkuri .

Pentru tablete si smartphoneuri, e o alta poveste. Practic siteul, desi are un design responsive, nu este compatibil cu browserele de pe tablete si smartphoneuri. Pe langa probleme de sintaxa, mai sunt si altele care se pot rezolva usor.

Ca si solutii am oferit WordPress cu cateva pluginuri si o tema aleasa, solutie care ar rezolva si SEO datorita facilitatilor pluginurilor si a Wordpresului insusi, dar si un template ca si design general pe toate siteurile indiferent de limba lor, aceasta fiind singurul lucru care sa le deosebeasca si eventual numarul de telefon pentru contact. Templateul sugerat pentru toate siteurile este cel de la siteul principal al carui review i-am facut in acest articol.

litrainternational

%d blogeri au apreciat asta: