• Witaj Witaj!
  • Masz pytania? Masz pytania?
  • Skontaktuj się Skontaktuj się z nami w celu
    omówienia specyfikacji projektu
Blog
  • 29
    Dec

    Responsive Web Design cz.1.

    Napisano przez: admin December 29, 2016 12:23
    Responsive Web Design cz.1.

    W dzisiejszych czasach wiele się o tym mówi, wiele również słyszy i pisze. Dobrze ale co tak naprawdę oznacza to pojęcie? Czy jest to ważny element w projektowaniu stron www czy może nie warto zaprzątać sobie nim głowy i odpuścić ten temat. W dzisiejszym wpisie poruszymy to zagadnienie aby każdy z czytelników miał jasność i nie miał wątpliwości w kwestii RWD.

    Responsive Web Design (pl: Responsywne Strony Internetowe) lub w języku programistów popularny skrót RWD to nic innego jak technika projektowania stron www w ten sposób aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia na którym jest wyświetlane. Mówiąc prościej jest to tworzenie stron w sposób przyjazny dla użytkowników wszystkich urządzeń takich jak komputery, tablety czy smartfony.

    Rosnąca popularność urządzeń mobilnych jak i sam rozwój technologii z nią związanych wymusiła na projektantach witryn internetowych dostarczenie w pełni funkcjonalnych, czytelnych i atrakcyjnych wizualnie stron dla wszystkich rodzajów urządzeń.

    RWD wykorzystuje zazwyczaj CSS3 Media Queries do budowania layoutu strony www który dostosowuje się do środowiska wyświetlania. Oznacza to, że możemy dostosować układ, nawigację, wygląd jak i widoczność elementów w zależności od parametrów urządzenia. Rezultatem takiego rozwiązanie jest dostosowanie witryny w sposób wygodny do czytania i nawigowania.

    Rozwój technologii CSS

    W technologii gdzie tworzenie alternatywnych stylów CSS ograniczało się przeważnie do stworzenia stylów głównych. CSS Media Types w technologii CSS2 umożliwia zdefiniowanie, który plik stylów CSS ma zostać zastosowany dla przeglądarki, wersji do druku czy na urządzeniach do czytania brajlem. W nowszej technologii a zatem w CSS3 rozbudowano ten mechanizm co dało dużo większe możliwości.

    CSS3 Media Queries pozwala nam na tworzenie alternatywnych stylów CSS w zależności od wymiarów lub orientacji ekranu na którym jest wyświetlana strona internetowa. Mając to na uwadze warto pamiętać o tym, że alternatywne style CSS powinny być konstruowane w sposób elastyczny, zapewniający płynne dostosowanie się wyglądu strony do ekranu na którym jest prezentowana. W przypadku stylów dedykowanych dla danych rozdzielczości powinny one zawierać jedynie deklaracje odpowiedzialne za zmiany części parametrów strony. Mowa tu o stylach, które domyślnie zostały określone w bazowych plikach CSS.
    Wyznaczenie granicznych rozdzielczości to wymóg zmieniającego się wyglądu, które powodują zmianę layoutu witryny przez zastosowanie zdefiniowanych dla nich właściwości CSS. Projektując style CSS warto także wziąć pod uwagę możliwość zmiany orientacji urządzenia (pozioma/pionowa) oraz różne rozdzielczości niekiedy dosyć wysokie. Nie zapominajmy również o breaking points, które w minimalnym zakresie powinny uwzględniać rozdzielczości właściwe dla urządzeń typu smartfon, tablet czy komputer.

    W kolejnym wpisie poświęconym RWD podejmiemy temat wpływu witryn responsywnych na SEO, ich ocenę przez Google jak i wady oraz zalety tej techniki projektowania.

    Zapraszamy do lektury!

    Serdecznie zachęcamy do kontaktu w sprawie Państwa strony poprzez formularz formularz kontaktowy, telefonicznie: +48 660 043 353 lub poprzez adres e-mail: biuro@wiseweb.pl.