Resurse web editia octombrie 2015 !

Cateva resurse super smechere pentru web-developeri si consultanti seo!

Pentru inceput:

1. taburi cu ajutorul jQuery EasyTabs Plugin pe care il gasiti aici http://os.alfajango.com/easytabs/#tabs1-css
2. super toolbar-uri foarte personalizate : http://paulkinzett.github.io/toolbar/

Iar spre final:

1. Audit Seo gratuit cu ajutorul baietilor si fetelor de la silkweb: http://www.silkweb.ro/servicii-seo.html unde va introduceti datele si primiti pe mail in cateva minute audit-ul!
2. Seo Keyword Tool de la Seo Monitor : http://seomonitor.com/seo-keyword-tool/ cu ajutorul caruia puteti afla dupa anumite cuvinte cheie pe ce loc sunteti in cautarile de pe Google si nu numai.

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:

• http://www.wprecipes.com/how-to-easily-make-wordpress-images-responsive
• http://rockablethemes.com/wordpress-responsive-images/

Related articles

• The Future of Web Design (larybear.wordpress.com)

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:

• Processed 65 web pages, found 755 broken links
• Default Page Check: FAILEDYou have not standardized your default pages meaning the following versions of your url return a 200/OK Header, which may cause duplicate content issues. The following extensions work:http://www.litrainternational.com/default.asphttp://www.litrainternational.com/index.php

  http://www.litrainternational.com/

• W3C CSS Validator results for http://www.litrainternational.com (CSS level 3)Sorry! We found the following errors (24)
• Errors found while checking this document as XHTML 1.0 Transitional!Result: 28 Errors, 2 warning(s)

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.

Resurse(10)

Cateva siteuri utile azi:

Un site unde poti testa online scripturi javascript impreuna cu html si css – http://jsfiddle.net/

Un site cu care verifici rapid page rankul altor siteuri – http://www.checkpagerank.net

Cum poti sa vezi versiunile vechi ale siteului tau sau chiar sa aflii cand a fost infintat un site si cum arata in diverse perioade – http://archive.org/web/web.php

Cum sa elimini spatiile implicite dintr-o lista

Uneori cand vrem sa facem un meniu, folosim liste si le dam proprietatea de a sta una langa alta si nu una sub alta cu:

 

float:left;

 

Ei bine, in acest caz, implicit apar spatii intre liste si s-ar putea sa nu doriti aceste spatii.

 

Le puteti scoate folosind urmatorul cod css:

 

li { margin: -4px; }

 

De asmenea, trebuie sa stergeti spatiile existente intre li, ma refer la urmatorul caz(zonele subliniate):

 

 

<li> Primul item           </li> <li>Al doilea item</li>

A perfect desktop image for CSS developers (Photo credit: Wikipedia)