HTML5 & CSS3

Responsive design z użyciem Skeleton’a

Responsive design, czyli w skrócie projektowanie stron, które są przystosowane do najrozmaitszych typów urządzeń (smartphony, tablety, monitory etc.) to ostatnimi czasy bardzo chwytliwy temat w świecie webdeveloperów. Przy cały czas wzrastającym udziale użytkowników internetu używających urządzeń przenośnych powoli standardem staje się projektowanie stron www tak aby tzw. user experience był komfortowy dla wszystkich a nie tylko dla osób używających internetu na monitorach komputerów.

One Web„, czyli sieć dla wszystkich. W różnych kontekstach może oznaczać dostępność stron www dla osób niepełnosprawnych lub chociażby down albo upgrade stron w zależności od rodzaju urządzenia używanego przez użytkownika. Responsive design to już nie senny koszmar wielu webmasterów, ale rzeczywistość (tak, tak koszmar stał się realny :).

Jak więc to robić? Jak zwykle społeczność kreatywnych developerów dostarcza nam rozwiązań, po które wystarczy jedynie sięgnąć. Skeleton to zestaw plików CSS i Javascript, które pozwalają na tworzenie stron internetowych wyglądających dobrze na ekranie praktycznie każdego urządzenia.

Na czym to polega? Skeleton oparty jest na downgradowaniu standardowego grida 960 dopasowując wielkości poszczególnych elementów layoutu do rozmiarów okna przeglądarki. Dzięki temu Skeleton pozwala też na ładny downgrade dla urządzeń mobilnych.

Zaletą Skeletona jest fakt, że jest właściwie gotowy do użytku od razu po ściągnięciu. Układ szesnastu kolumn, odpowiedni schemat jego zmniejszania, zestaw media queries, wszystkie potrzebne pliki a na stronie domowej opis całego konceptu. Czego więcej chcieć? Wystarczy dołączyć style do naszej strony i możemy działać. Poza tym jeśli ktoś chce to w internecie jest sporo tutoriali poświęconych temu zestawowi plików.

Zachęcam do zapoznania się i zastosowania w przyszłych projektach!

Wykorzystaj jego możliwości w praktyce! Pobierz Skeleton’a!

zdjęcie pochodzi z http://www.freedigitalphotos.net/

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź