Projektowanie stron www w technologii RWD
21 lutego, 2018 | 3 minuty czytania
Projektowanie stron www w technologii RWD – cztery moim zdaniem najciekawsze frameworki i biblioteki responsywne.
Przeglądając statystyki za 2019 rok dotyczących informacji jaki jest udział procentowy użytkowników przeglądających strony internetowe wpadł mi pomysł na napisanie artykułu o najciekawszych frameworkach css, które są wykorzystywane do projektowanie stron internet w tzw. technologii RWD czyli z języka angielskiego „Responsive Web Design”.
No dobrze ale własciwie czym jest Responsive Web Design, a po polsku projektowanie responsywnych stron www?
Zacznijmy więc od samego początku. Technologia powstała w wyniku pojawienia się pierwszych telefonów komórkowych, które miały duży wyszwietlacz i dawały możliwość przeglądania zasobów internetu.
Responsywne projektowanie stron www pozwala na responsywne wykorzystanie informacji o wielkości ekranu, położeniu ekranu oraz platformy. Według źródła na wikipedii:
Responsive web design (RWD) – technika projektowania responsywne strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na dużych ekranach, jak i na smartfonach czy tabletach.
Pierwszy raz została opisana na łamach blogu A List Apart przez Ethan Marcotte 25 Maja 2010 roku.
Ten artykuł całkowicie odmienił podejście do projektowania stron internetowych. Co więcej otworzył drzwi do nowych koncepcji takich jak User Experience Design dla projektowanie stron www. Dzisiaj już wiemy, że jest to kluczowe podejście do pisania aplikacji. Koncepcja „Mobile First” zmusza web designera do projektowania stron responsywnych najpierw na telefony z najmniejszą rozdzielczością ekranu, przechodząc następnie na kolejne większe ekrany.
Statystyki pokazują, że większość ludzi korzystających z internetu używa do tego telefonów komórkowych. W związku z tym każda strona musi być responsywna. Jeszcze kilka lat temu agencje interaktywne i web deweloperzy starali sami pisać style responsywne. Dzisiaj nie ma to żadnego uzasadnienia ponieważ można wykorzystać znakomite frameworki i biblioteki do tego. Chciałbym Wam przedstawić kilka najlepszych z nich.
Moim zdanie najlepszy framework do projektowania stron www w oparciu o podejście „Mobile First”.
Bootstrap został napisany przez zespół deweloperów Twittera. Posiada bardzo dobrze opisaną dokumentację.
Nie sprawdzałem statystyk ale wydaje mi się, że jest to najchętniej używany framework, a raczej lepiej powiedzieć biblioteka frontendowa. Biblioteka różni się od frameworka tym, że możemy dowolny komponent wykorzystać osobno. We frameworku musimy wykorzystać całość. I chyba to jest kolejny element przemawiający za Bootstrapem.
Główny i największy rywal Bootrapa to Foundation. Znakomity dojrzały framework z wieloma opcjami do budowania responsywnych stron www. Bardzo często używany, łatwy w nauce i ze świetną dokumentacją. Daje ogromne możliwości budowania nowoczesnych interfejsów w aplikacjach internetowych. Dzięki Fundation projektowanie stron www jest bardzo szybkie.
Material UI jest rozwiązaniem dla osób programujących strony www w ReactJS. Biblioteka jest napisana w formie komponentów dla Reacta. Jest to świetne rozwiązanie dla projektów, które mają być aplikacją SPA czyli „Single Page Application”. Jest to bardzo nowoczesne podejście do budowania stron internetowych, raczej przeznaczone dla trochę większych projektów np. pod kątem budowania CRM’a.
Skeleton
Skeleton jest bardzo prostym i lekkim frameworkiem zbudowanym przede wszystkim z myślą o urządzeniach mobilnych. Jest na prawdę lekki, kod źródłowy składa się z 400 linijek. Nie wymaga żadnych dodatkowych bibliotek. Wystarczy tylko go podpiąć pod projekt i już można projektować responsywną stronę www.
Wydaje mi się, że są to najciekawsze rozwiązania związane z responsywnymi stronami www. Jest jeszcze wiele innych, których pomineliśmy ale o nich może napiszę następnym razem :).