Responsive Web Design – Infografika

RWD
Niedawno pisaliśmy obszernie o projektowaniu Responsive Web Design (RWD) w kontekście optymalizacji SEO serwisu internetowego. Postanowiliśmy zaprezentować zebrane informacje w postaci przejrzystej infografiki. Zachęcamy do dzielenia się nią w serwisach społecznościowych i na swoich stronach internetowych przez wklejenie kodu.

 

Responsive Web Design - Infografika

Umieść infografikę na swojej stronie

Możesz umieścić infografikę o Responsive Web Design na swoim blogu lub stronie internetowej. W tym celu skopiuj poniższy kod i wklej na swojej stronie.

Szerokość 630px:

Szerokość 960px:

Podziel się infografiką

Skomentuj artykuł:

Komentarze

  1. Fajny art!
    Fajny również pomysł na link bait;-)
    W 2012 sprzedaż mobilnych urządzeń przekorczyła liczbę PC więc to jest już nie trend ale MUST DO.
    My też nad tym pracujemy…
    Tak jak było napisane – minusem jest brak dostosowania do intencji użytkownika mobile ale..mamy all in one!

  2. Witam,
    świetna infografika. Fajnie to poukładaliście.
    Poprawcie literówkę (jedną zauważyłem – „kontrla”) – w końcu namawiacie, aby zamieszczać grafikę u siebie na stronie. Więc warto dopracować w detalach.
    Jako zaletę szablony responsywnego podajecie jednolitość architektury informacji. Czy aby na pewno można tak stwierdzić? Przecież po przeskalowaniu na rozdzielczość poniżej 800px szerokości najczęściej znika menu, znika sidebar / kolumny boczne. Szablon ulega przeobrażeniu, zatem najczęściej architektura informacji i nawigacja także się zmienia.
    Pozdrawiam,
    Paweł

  3. Przemek Sztal pisze:

    @Paweł od tabletów: Dzięki za zwrócenie uwagi na błąd – poprawiony.

    W RWD ideą jest raczej zachowanie architektury informacji przy dostosowaniu samego sposoby prezentacji. Ukrywanie elementów jest dopuszczalne, ale zwykle nie powinny one „znikać”, tylko dostosowywać się do urządzenia. Struktura podstron serwisu powinna zostać niezmieniona.

  4. Kami pisze:

    Generalnie potwierdzam. Infonografika jest bardzo ciekawa i systematyzuje ten dział wiedzy.

  5. […] źródło: http://blog.performancemedia.pl/seo/responsive-web-design-infografika […]

  6. hauer mateusz pisze:

    dobre, pomocne i wymienione wady – to nie wady, w stosunku do całej znakomitości zalet tematu. sam pracuję na tym aby przesiąść sie na rwd. :)

  7. Dawid pisze:

    Ciekawie i przejrzyście zrobiony infographic.
    Co do wad to zdecydowanie zgadzam się z użytkownikiem hauer mateusz – ilość zalet tego rozwiązania spycha wady na drugi plan, szczególnie uwzględniając tempo w jakim aktualnie rozwijają się urządzenia mobilne. Na podobny temat pisaliśmy niedawno na naszym firmowym blogu. Pozwolę sobie zamieścić link do artykułu: http://www.redcloudsoft.com/blog/mobilnosc-aplikacji/
    Pozdrawiam!

  8. maly pisze:

    wg mnie RWD szybko przeminie, bo rozdzielności w urządzeniach mobilnych zrobią swoje. faktem jest, że technika pod względem kodu jest wygodna.

  9. jedrysik.com pisze:

    Wyższa rozdzielczość nic nie zmienia, chodzi o fizyczną wielkość urządzenia/ekranu
    Ten kierunek pociąga za sobą inne opracowanie skalowania, nie prezentacji (jak w przypadku retiny).
    Idealnie gdyby urządzenia zgłaszały przekątną ekranu, to zdecydowanie ułatwi pracę.

  10. macem pisze:

    utrzymanie jednego kodu i to powinno przemówić do każdego

  11. Michał pisze:

    Bardzo dobra infografika, wszystko co trzeba wiedzieć startując z resposive web designem. Warto zainteresować się tym tematem, szczególnie patrząc wokół siebie i widząc, że , ciągle rośnie dostępność mobilnych urządzeń i zainteresowanie mobilnym dostępem do >wszystkich< zasobów sieci w ten sam sposób jak na PC. Ciekawe tylko co w wypadku ujednolicenia rozdzielczości … jeszcze niedawno nawet nie marzyliśmy o telefonach z ekranami o rozdzielczości 1920×1080, a łącząc taką rozdzielczość z wysoką przepustowością dostępu do sieci oraz wygodnym interfejsem dotykowym, responsive web design wydaje się być zbędny.

  12. księgowa pisze:

    Responsive Web Design to bardzo dobre rozwiązanie, zalety są jasne. Jak się za to zabrać? Czy wystarczy uwzględnić @media only screen and (max-width: ..? Chyba nie, proszę o wskazówki.
    Oczywiście trzeba dostosować projekt strony.

  13. […] Infografika Responsive Web Design – Performance Media […]

  14. Vinci pisze:

    Bardzo rzeczowe ujęcie sprawy. Wydaje mi się, że wsparcie RDW jest zwykle nie do uniknięcia, pomimo tego, że generuje dodatkowe koszty związane z testowaniem na wielu urządzeniach. Bo typowy klient po to zamawia projekt by z nim trafić do jak najszerszego grona odbiorców.

Loading Disqus Comments ...
Loading Facebook Comments ...