Arhive blog

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

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

Resurse(8)


SEO(2)

Robots.txt – un site care explica cum poate ajuta robots.txt si cum sa setam acest fisier pentru bunul nostru plac.

Serp Tracker Position – adica un site care arata cautarile locale( adica pe tara) al unui cuvant cheie(keyword) specific pentru un site anume.

Keyword Position – asemenea recomandarii de mai sus, dar ceva mai rapid si mai complet. Acest tool cauta si pentru yahoo si bing cautarile, nu doar pentru google.

Search Engine Optimisation. Search Engine Opti...

Search Engine Optimisation. Search Engine Optimization (Photo credit: Hobo!)

Resurse(6)


Image representing Pixlr as depicted in CrunchBase

Image via CrunchBase

XML SITEMAP TOOL

XML SITEMAP – un tool online bazat pe java care genereaza sitemapul siteului tau, sitemap pe care il poti configura in mai multe moduri.

.htaccess

Un mic ghid despre fisierul .htaccess – 5 capitole ale unui ghid despre .htaccess.

Cum sa iti setezi pagina de eroare 404 – un tutorial simplu despre cum sa iti setezi pagina de eroare 404.

Editoare profesionist online de imagini

LunaPic – un super profesionist editor online de imagini.

Pixlr – un alt editor profesionist online de imagini.

Google Rank Checker

Google Rank Checker – un tool online care verifica a cata cautare este siteul tau tinand cont de un anumit cuvant cheie ( keywords) si de o tara.

%d blogeri au apreciat asta: