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:

About Mihai

Mare " afacerist " cu simt anteprenorial, dar fara prea multi bani in buzunar . In orice moment accept propuneri banoase si afaceri nemiloase.

Posted on 06/10/2013, in Customization, Idei, Profesia mea, recomandare and tagged , , , , , , , , , , , , , , . Bookmark the permalink. Lasă un comentariu.

Lasa un comentariu

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s

%d blogeri au apreciat asta: