Responsive Web Design

Portfolio – co to takiego – to każdy wie, oferta, realizacje, i inne określenia na pokaz wykonanych prac. Jak to się ma do RWD ? do responsywności ? lub adaptacyjnego zachowania strony www ?

Często jest to bardzo kłopotliwa sprawa chcemy przedstawić swoje osiągnięcia tak aby dobrze wyglądały zarówno na full HD jak i na mniejszych rozdzielczościach monitora.

Najprostszym i jednocześnie dość ciekawym jest ujęcie tego w postaci listy – kafelków – jak na przykład w strony www Szamotuły. Mamy przedstawione wykonane portale internetowe, strony www i inne rozwiązania internetowe szyte na miarę. Każdy klient – jego realizacja została przedstawiona pokrótce na liście a zagłębiając się w szczegóły uzyskujemy więcej informacji.

Ułatwia to zastosowanie rożnych grafik – mniejsze – lżejsza na stronie głównej i większych – prezentujących szczegóły na podstronach z pełna informację o wykorzystanych technologiach. Jest to także przyjazne dla użytkownika. Łatwiejsze poruszanie się po wielu projektach, wczytywanie się tylko w wybrane, te które na stronie głównej nas zaintrygowały.

Te i inne zabiegi pozwalają także łatwiej zoptymalizować stronę pod kątem RWD. Kafelki bardzo dobrze mogą dostosowywać się, są idealnym rozwiązaniem dedykowanym każdemu chcącym przedstawić produkty, realizacje, aktualności, wybrane wydarzenia. Możemy ułożyć w jednym wierszu 4, 3 … każdą dowolną ilość kafelków a zmniejszając rozdzielczość zmniejszać ilość w wierszu aż do jednego na najniższej – na przykład dla 320px. Jak to wykonać szybko i dobrze ?

Tutaj z pomocą przychodzą nam gotowe rozwiązania – oferujące gridy, np: Bootstrap. Zachęcam do zapoznania się z przykładami i możliwościami jakie daje gotowy system ułatwiający tworzenie plików CSS z obsługą RWD.

Dostosowanie wyglądu pod różne rozdzielczości jest często spotykane na strona internetowych, jednak najważniejsza kwestia, rozmiar strony, jej waga, ile użytkownik musi pobrać danych na urządzeniach mobilnych nie korzystających z wifii jest bardzo istotna.
W internecie można znaleźć wiele skryptów korzystających z javascriptu, które podmieniają zdjęcia w zależności od wykrytego rozmiaru urządzenia. Tworząc strony musimy pamiętać że każdy element jest ważny, nie tylko jej wygląd, dostosowanie pod wiele urządzeń, ale także prędkość wczytywania się strony.
Przykład rozwiązania dla HTML-a 5


< picture>
< source srcset="runner-a.jpg" media="(min-width: 950px)">
< source srcset="runner-b.jpg" media="(min-width: 450px)">
< img src="runner-c.jpg" alt="">
< /picture>


One Page – co to ?

Nowy trend, krótkotrwały pomysł, a może idealne rozwiązanie dla stron internetowych jeżeli użytkownik nie posiada treści, nie ma pomysłu na prowadzenie bloga, aby nie prowadzić wymyślonych aktualności ?

Jedna strona z przedstawieniem całej swojej oferty, opisem działalności i podstawowymi danymi kontaktowymi ?

Co o tym myślicie, przykład dla ułatwienia z okolicy Szamotuł. Czy takie strony także mogą być responsywne ?

Oczywiście że tak, jak nie responsywne to przynajmniej powinny należeć do grupy stron adaptacyjnych. czym różni się strona internetowa responsywna od adaptacyjnej ? To już w następnym artykule.