Właśnie zauważyłam, że dawno nie pisałam tutaj nic o tworzeniu stron, kodowaniu i tym podobnych tematach. Głównie o rowerach. Teraz też powinnam napisać “kilka” słów o rowerach a konkretnie naszym pobycie w Szwajcarii na UECT 2013 w Yverdon les Bains. Ale od powrotu nie mam na to czasu. Ogarnęło mnie znów kodowanie. I stąd ten post.
Definicji słowa “responsive” chyba nie muszę tutaj tłumaczyć. Jest to ta część tworzenia strony www, która w ostatnim czasie stała się dla wszystkim wielkim priorytetem. I nic dziwnego. Urządzenia mobilne z dostępem do internetu to teraz coś zupełnie naturalnego i dostępnego pod względem finansowym właściwie dla każdego.
Dostosowanie struktury kodu HTML5/CSS do wielu rozdzielczości jednocześnie nie jest już wielką męczarnią – istnieje wiele frameworków, które są przy tym niezwykle pomocne. Ja osobiście stosuję Foundation Zurb. Oparty jest o łatwy w użyciu gotowy grid 12-kolumnowy gdzie szerokości zdefiniowane są w procentach. Zawiera wiele gotowych rozwiązań cssowych oraz jsowych (jak tabele, buttony, formularze, nawigacja, popupy i wiele innych).
Ale mimo tych dodatków zawsze muszę poświęcić chwilę na przemyślenie nawigacji i jej zachowanie na mniejszych ekranach. Co prawda Foundation posiada menu responsywne oraz wersję offcanvas (specjalne layouty z opcjami wysuwania menu z różnych krawędzi ekranu), ale nie zawsze dokładnie to rozwiązanie jest odpowiednie. Dlatego zaczęłam się ostatnio rozglądać za innymi narzędziami i troszkę ich znalazłam.
Oto te, które wydają mi się dość mądrze napisane i funkcjonalne.
Responsive and Touch-Friendly
Big Menus, Small Screens: Responsive, Multi-Level Navigation
Google Nexus Website Menu
Responsive Multi-Level Menu
Responsive Retina-Ready Menu
CSS3 animated dropdown menu
Ostatnio korzystałam z tego narzędzia. Bardzo łatwy do stylowania, dobrze zachowuje się na desktopie i na smartphonie. Widoczny jest na górze wpisu.
Vertical Responsive Navigation ($5)
Orion – Responsive Menu ($5)
Życzę miłego testowania tych rozwiązań 🙂
