Dzisiaj jest czwartek, 24 sierpnia 2017
JAK wkurzyć grafika (i nie tylko)15 rzeczy, które pomogą Ci stać się bogatymJak nie tracić czytelników bloga
Mój sposób na RWD

Mój sposób na RWD

piątek, 2014-10-103543tutoriale, internet

RWD zadomowiło się w internetach na dobre. W zasadzie jest już (a przynajmniej powinno być) standardem a nie dodatkiem oferowanym przed webkoderów.

Dla niektórych Responsive Web Design wciąż wydaje się być tematem nie do ugryzienia, tymczasem jest to rzecz banalnie prosta a jak się rzecz dobrze przemyśli, to nawet łatwa i szybka do zrealizowania.

Jak ja to robię?

  1. Przygotowuję projekt graficzny w pełnej skali oraz spisuję założenia co i jak zmieniać podczas zmniejszania szerokości. Są to jednak tylko wytyczne i czasami okazuje się, że trzeba to zrobić nieco inaczej. Nie robię innych wersji, bo czasami trzeba by robić wiele projektów (dla każdej rozdzielczości). Ostatecznie ograniczam się do kilku kluczowych, kiedy wzajemne ułożenie elementów zmienia się w sposób znaczny. Jednak jeśli projekt i założenia są dobre, takie zmiany są nieznaczne i wszystko da się opanować na jednym projekcie.
  2. Zawsze podchodziłem do wielu tematów od nietypowej strony. Tu też większość zakłada, żeby zacząć projektowanie od najmniejszej rozdzielczości i stopniowo dodawać i powiększać elementy. Ja robię całkiem na odwrót i przygotowuję szablony HTMLCSS dla Alib CyMeS w pełnej rozdzielczości. Jest to dla mnie strona wyjściowa, którą wypełniam treścią i testuję. Na tym etapie można już ją wrzucić na serwer docelowy, żeby sobie działała.
  3. Dodaję kod, który po naciśnięciu klawisza "1" wyświetli mi bieżącą szerokość strony. Jako, że korzystam już z jQuery cały czas, nie siliłem się na pisanie tego w czystym JavaScript:
    $(document).keyup(function(e){if(e.which==49)alert($(window).width()+20);});
  4. Zmniejszam szerokość okna przeglądarki i jednocześnie pracuję nad CSS dodając kolejne warunki np.
    @media screen and (max-width:820px) {...}
    dla różnych elementów np. nagłówka, stopki i innych, które przy danej szerokości przestają się mieścić. Powtarzam to dla każdego szablonu. Czasami zachodzi konieczność zmiany kodu HTML, ale raczej rzadko.
  5. Jeśli jakieś szerokości są zbliżone, to łączę je w jeden warunek. Nie jest to konieczne, ale pozwala nieco oczyścić i uszczuplić kod CSS.
  6. Jeszcze raz testuję całość (także na tablecie i komórce), żeby wyłapać wszystkie niedoróbki i wyrzucam kod do wyświetlania szerokości, żeby ktoś go przez przypadek nie uruchomił i nie zastanawiał się o co chodzi :)

Generalnie przygotowanie responsywności to jakieś 2-3 godziny pracy, chociaż przy niektórych, dobrze zaprojektowanych serwisach, schodzę poniżej jednej godziny :)

A jakie Ty masz sposoby na robienie stron RWD?

Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na