Responsive design: Różnice pomiędzy wersjami
m (Porządkowanie kategorii) |
m (cleanup bibliografii i rotten links) |
||
| (Nie pokazano 9 wersji utworzonych przez 2 użytkowników) | |||
| Linia 1: | Linia 1: | ||
'''Responsive design''' (responsywne [[projektowanie]] stron) - jest to podejście do projektowania stron, dzięki czemu ich wygląd i układ mógł automatycznie dostosowywać się do różnych urządzeń mobilnych (np. smartfony lub tablety) i rozmiarów ekranów lub okien przeglądarek. Charakterystyczna dla takiej strony jest jej uniwersalność. | '''Responsive design''' (responsywne [[projektowanie]] stron) - jest to podejście do projektowania stron, dzięki czemu ich wygląd i układ mógł automatycznie dostosowywać się do różnych urządzeń mobilnych (np. smartfony lub tablety) i rozmiarów ekranów lub okien przeglądarek. Charakterystyczna dla takiej strony jest jej uniwersalność. | ||
| Linia 21: | Linia 6: | ||
==Potrzeba powstania responsive design== | ==Potrzeba powstania responsive design== | ||
W wyniku rozwijającej się technologii w ostatnich latach na rynku ukazało się mnóstwo nowoczesnych urządzeń mobilnych z dostępem do Internetu. Technicznie żadne urządzenie nie ma problemu z wyświetleniem stron internetowych lecz występują problemy wykorzystania ich funkcjonalności w przypadku urządzeń z małymi ekranami. Pierwotnie strony internetowe były tworzone dla przeglądarek o stałych wymiarach, dla ekranów o sporej rozdzielczości. W przypadku wyświetlenia takiej strony na ekranie o małych wymiarach ekranu wystąpi tzw. efekt miniaturyzacji elementów. Wtedy [[użytkownik]] musi samodzielnie je powiększyć. Aby rozwiązać ten problem powstało responsywne projektowanie stron internetowych<ref> Ochim H., Pańczyk B. (2016), s. 81-86 </ref>. | W wyniku rozwijającej się technologii w ostatnich latach na rynku ukazało się mnóstwo nowoczesnych urządzeń mobilnych z dostępem do Internetu. Technicznie żadne urządzenie nie ma problemu z wyświetleniem stron internetowych lecz występują problemy wykorzystania ich funkcjonalności w przypadku urządzeń z małymi ekranami. Pierwotnie strony internetowe były tworzone dla przeglądarek o stałych wymiarach, dla ekranów o sporej rozdzielczości. W przypadku wyświetlenia takiej strony na ekranie o małych wymiarach ekranu wystąpi tzw. efekt miniaturyzacji elementów. Wtedy [[użytkownik]] musi samodzielnie je powiększyć. Aby rozwiązać ten problem powstało responsywne projektowanie stron internetowych<ref> Ochim H., Pańczyk B. (2016), s. 81-86 </ref>. | ||
==Istota responsive design== | ==Istota responsive design== | ||
Responsywna strona to strona wykorzystująca elastyczne podejście. Generowany jest taki sam kod dla identycznego adresu URL, niezależnie od urządzenia, z którego się korzysta, lecz obraz generowany jest | Responsywna strona to strona wykorzystująca elastyczne podejście. Generowany jest taki sam kod dla identycznego adresu URL, niezależnie od urządzenia, z którego się korzysta, lecz obraz generowany jest “elastycznie" - odpowiednio do rozdzielczości. Charakterystyczne dla tej metody jest związanie z minimalną liczbą tzw. front-endów dla każdego urządzenia mobilnego<ref>Janke P. (2016) , s. 177-187</ref>. | ||
Celem responsive design jest zagwarantowanie użytkownikowi wygodnego odczytu strony, nie zważając na wymiary ekranu urządzenia mobilnego, z którego korzysta czy rodzaju przeglądarki. Gwarancją przeglądania responsywnej strony na każdym monitorze jest swobodne poruszanie się po stronie oraz [[dostępność]] jej funkcjonalności (wraz z udostępnionymi odnośnikami). Zapewnia się również czytelność tekstów i grafik, wraz z ich całkowitą widocznością - są automatycznie dopasowywane do rozmiarów wyświetlacza urządzenia. Przyjmuje się, że podczas procesu projektowania całkowicie praktycznej strony, najpierw powinno się zająć wersją mobilną, a następnie stworzyć desktopową stronę. W ramach tego rozwiązania na początku tworzenia powinno się zaplanować zawartość strony wraz z jej funkcjonalnością<ref>Ochim H., Pańczyk B. (2016), s. 81-86 </ref>. | Celem responsive design jest zagwarantowanie użytkownikowi wygodnego odczytu strony, nie zważając na wymiary ekranu urządzenia mobilnego, z którego korzysta czy rodzaju przeglądarki. Gwarancją przeglądania responsywnej strony na każdym monitorze jest swobodne poruszanie się po stronie oraz [[dostępność]] jej funkcjonalności (wraz z udostępnionymi odnośnikami). Zapewnia się również czytelność tekstów i grafik, wraz z ich całkowitą widocznością - są automatycznie dopasowywane do rozmiarów wyświetlacza urządzenia. Przyjmuje się, że podczas procesu projektowania całkowicie praktycznej strony, najpierw powinno się zająć wersją mobilną, a następnie stworzyć desktopową stronę. W ramach tego rozwiązania na początku tworzenia powinno się zaplanować zawartość strony wraz z jej funkcjonalnością<ref>Ochim H., Pańczyk B. (2016), s. 81-86 </ref>. | ||
<google>n</google> | |||
==Ujmowane aspekty== | ==Ujmowane aspekty== | ||
W swojej publikacji Turek T. ujmuje, iż responsywne projektowanie powinno zwracać uwagę na zawieranie różnych aspektów (wizualizacyjne, ergonomiczne, techniczne czy organizacyjne). Najważniejsze aspekty to<ref>Turek T. (2015), s. 787-796</ref>: | W swojej publikacji Turek T. ujmuje, iż responsywne projektowanie powinno zwracać uwagę na zawieranie różnych aspektów (wizualizacyjne, ergonomiczne, techniczne czy organizacyjne). Najważniejsze aspekty to<ref>Turek T. (2015), s. 787-796</ref>: | ||
*'''sposób wyświetlania''' - treść i menu powinny wyświetlać się zgodnie z zainteresowaniami użytkownika, | * '''sposób wyświetlania''' - treść i menu powinny wyświetlać się zgodnie z zainteresowaniami użytkownika, | ||
*'''wizualny podział strony''' - dopasowanie liczby kolumn do wielkości ekranu urządzenia, na którym użytkownik wyświetla stronę, | * '''wizualny podział strony''' - dopasowanie liczby kolumn do wielkości ekranu urządzenia, na którym użytkownik wyświetla stronę, | ||
*'''dostosowanie do ekranu dotykowego''' - aby użytkownik łatwo poruszał po stronie, za pomocą linków, menu i przycisków powinny one być odpowiednio powiększone, podobnie jak odległości między linijkami (ogranicza to przypadkowe kliknięcie złej opcji i niechciane przekierowanie dalej na stronie), | * '''dostosowanie do ekranu dotykowego''' - aby użytkownik łatwo poruszał po stronie, za pomocą linków, menu i przycisków powinny one być odpowiednio powiększone, podobnie jak odległości między linijkami (ogranicza to przypadkowe kliknięcie złej opcji i niechciane przekierowanie dalej na stronie), | ||
*'''wyświetlanie obrazów i filmów''' - multimedia szybko powinny zmieniać rozmiar, dostosowując się do rozdzielczości ekranu, | * '''wyświetlanie obrazów i filmów''' - multimedia szybko powinny zmieniać rozmiar, dostosowując się do rozdzielczości ekranu, | ||
*'''reguły CSS3''' - zaleca się stosowanie tych reguł, aby skalować moduły i zdjęcia na wyświetlaczu, | * '''reguły CSS3''' - zaleca się stosowanie tych reguł, aby skalować moduły i zdjęcia na wyświetlaczu, | ||
*'''formatowanie tekstu''' - należy dopasować rozmiar czcionki oraz ustalić odpowiednie przerwy między wierszami dla przejrzystości strony i przyjemności czytania użytkownika. | * '''formatowanie tekstu''' - należy dopasować rozmiar czcionki oraz ustalić odpowiednie przerwy między wierszami dla przejrzystości strony i przyjemności czytania użytkownika. | ||
Turek T. opisuje również odpowiednik responsive design, czyli “projektowanie dedykowanych aplikacji | Turek T. opisuje również odpowiednik responsive design, czyli “projektowanie dedykowanych aplikacji mobilnych". Zamiast przeglądarki jest uruchamiana taka aplikacja, zawierająca ograniczony zbiór funkcji. Dodatkowo zostaje przystosowana do użytkowania za pomocą ekranu z dotykowym panelem. Najczęściej wykorzystywane są przez większość systemów e-bankowości oraz umożliwiają prenumerowanie czasopism, jak również realizowanie mobilnych zakupów<ref>Turek T. (2015), s. 787-796</ref>. | ||
==Ocena responsywności stron== | ==Ocena responsywności stron== | ||
Istnieją powszechnie dostępne w sieci narzędzia, służące ocenie responsywności stron internetowych. Odszukać można je wpisując frazę “website responsive | Istnieją powszechnie dostępne w sieci narzędzia, służące ocenie responsywności stron internetowych. Odszukać można je wpisując frazę “website responsive test" w wyszukiwarce. Ich [[działanie]] opiera się o wyświetlanie ramek w rozmiarach, które ukazują wiele rozdzielczości dla zróżnicowanych urządzeń. Analiza natomiast jest subiektywną oceną poprawności, z jaką gotowe ramki są wyświetlane w danej witrynie. Testów można dokonać dla takich systemów operacyjnych, jak na przykład Microsoft Windows, Apple MAC OS czy Google Android. Najczęściej pojawiające się problemy przy ocenie responsywności witryn to<ref>Janke P. (2016) , s. 177-187</ref>: | ||
* [[zbyt]] mała czcionka | * [[zbyt]] mała czcionka | ||
* gęste rozmieszczenie linków | * gęste rozmieszczenie linków | ||
| Linia 55: | Linia 41: | ||
# Warunkowe wczytywanie zawartości | # Warunkowe wczytywanie zawartości | ||
# Lokalizacja zasobów strony na różnych serwerach | # Lokalizacja zasobów strony na różnych serwerach | ||
# Wykorzystanie sieci dostarczania treści (ang. Content Delivery Network - CDN) | # Wykorzystanie sieci dostarczania treści (ang. Content Delivery Network - CDN)" | ||
{{infobox5|list1={{i5link|a=[[JavaScript]]}} — {{i5link|a=[[Java]]}} — {{i5link|a=[[Złośliwe oprogramowanie]]}} — {{i5link|a=[[Webmaster]]}} — {{i5link|a=[[HTML]]}} — {{i5link|a=[[Aktualizacja oprogramowania]]}} — {{i5link|a=[[ASP.NET]]}} — {{i5link|a=[[Deep Web]]}} — {{i5link|a=[[Big data]]}} }} | |||
==Przypisy== | ==Przypisy== | ||
| Linia 62: | Linia 50: | ||
==Bibliografia== | ==Bibliografia== | ||
<noautolinks> | <noautolinks> | ||
* Janke P. (2016) ''[https://yadda.icm.edu.pl/baztech/element/bwmeta1.element.baztech-331db1fc-aaf3-40eb-a07b-578c53c0ec6f/c/ZNOiZ_89_2016_Janke.pdf Analiza responsywności wybranych platform usług elektronicznych administracji publicznej w Polsce]'', | * Janke P. (2016), ''[https://yadda.icm.edu.pl/baztech/element/bwmeta1.element.baztech-331db1fc-aaf3-40eb-a07b-578c53c0ec6f/c/ZNOiZ_89_2016_Janke.pdf Analiza responsywności wybranych platform usług elektronicznych administracji publicznej w Polsce]'', Zeszyty Naukowe. Organizacja i Zarządzanie / Politechnika Śląska, z. 89 | ||
* Ochim H., Pańczyk B. (2016) ''[https://yadda.icm.edu.pl/baztech/element/bwmeta1.element.baztech-b88075af-75e7-4cbc-ba66-d3f7ea90e4f4/c/ochim_panczyk_rwd_jako_IAGPOS_nr_4_2016.pdf RWD jako narzędzie optymalizacji stron internetowych]'', | * Ochim H., Pańczyk B. (2016), ''[https://yadda.icm.edu.pl/baztech/element/bwmeta1.element.baztech-b88075af-75e7-4cbc-ba66-d3f7ea90e4f4/c/ochim_panczyk_rwd_jako_IAGPOS_nr_4_2016.pdf RWD jako narzędzie optymalizacji stron internetowych]'', Informatyka, Automatyka, Pomiary w Gospodarce i Ochronie Środowiska, nr 4 | ||
* Peterson C. (2014) ''Learning Responsive Web Design. A Beginner's Guide'', O'Reilly Media | * Peterson C. (2014), ''Learning Responsive Web Design. A Beginner's Guide'', O'Reilly Media | ||
* Turek T. (2015) ''[ | * Turek T. (2015), ''[http://www.wzieu.pl/zn/852/ZN_852.pdf Analiza wykorzystania techniki Responsive Web Design w projektowaniu serwisów www na przykładzie uczelni wyższych]'', Zeszyty Naukowe Uniwersytetu Szczecińskiego. Ekonomiczne Problemy Usług, nr 117 | ||
</noautolinks> | </noautolinks> | ||
{{a|Angelika Trólka}} | {{a|Angelika Trólka}} | ||
[[Kategoria:Internet]] | |||
[[Kategoria: | |||
{{#metamaster:description|Responsive design automatycznie dostosowuje wygląd i układ do różnych urządzeń mobilnych, zapewniając uniwersalność i przyjazność dla użytkowników.}} | {{#metamaster:description|Responsive design automatycznie dostosowuje wygląd i układ do różnych urządzeń mobilnych, zapewniając uniwersalność i przyjazność dla użytkowników.}} | ||
Aktualna wersja na dzień 12:29, 6 sty 2024
Responsive design (responsywne projektowanie stron) - jest to podejście do projektowania stron, dzięki czemu ich wygląd i układ mógł automatycznie dostosowywać się do różnych urządzeń mobilnych (np. smartfony lub tablety) i rozmiarów ekranów lub okien przeglądarek. Charakterystyczna dla takiej strony jest jej uniwersalność.
TL;DR
Responsive design to podejście projektowania stron internetowych, które automatycznie dostosowuje ich wygląd i układ do różnych urządzeń mobilnych i rozmiarów ekranów. Celem jest zagwarantowanie użytkownikowi wygodnego odczytu i dostępności stron na każdym urządzeniu. W responsywnym projektowaniu należy uwzględnić sposób wyświetlania treści, wizualny podział strony, dostosowanie do ekranu dotykowego, wyświetlanie obrazów i filmów, reguły CSS3 oraz formatowanie tekstu. Istnieją narzędzia do oceny responsywności stron. Poprawa wydajności stron internetowych jest istotna w kontekście responsywnego projektowania.
Potrzeba powstania responsive design
W wyniku rozwijającej się technologii w ostatnich latach na rynku ukazało się mnóstwo nowoczesnych urządzeń mobilnych z dostępem do Internetu. Technicznie żadne urządzenie nie ma problemu z wyświetleniem stron internetowych lecz występują problemy wykorzystania ich funkcjonalności w przypadku urządzeń z małymi ekranami. Pierwotnie strony internetowe były tworzone dla przeglądarek o stałych wymiarach, dla ekranów o sporej rozdzielczości. W przypadku wyświetlenia takiej strony na ekranie o małych wymiarach ekranu wystąpi tzw. efekt miniaturyzacji elementów. Wtedy użytkownik musi samodzielnie je powiększyć. Aby rozwiązać ten problem powstało responsywne projektowanie stron internetowych[1].
Istota responsive design
Responsywna strona to strona wykorzystująca elastyczne podejście. Generowany jest taki sam kod dla identycznego adresu URL, niezależnie od urządzenia, z którego się korzysta, lecz obraz generowany jest “elastycznie" - odpowiednio do rozdzielczości. Charakterystyczne dla tej metody jest związanie z minimalną liczbą tzw. front-endów dla każdego urządzenia mobilnego[2].
Celem responsive design jest zagwarantowanie użytkownikowi wygodnego odczytu strony, nie zważając na wymiary ekranu urządzenia mobilnego, z którego korzysta czy rodzaju przeglądarki. Gwarancją przeglądania responsywnej strony na każdym monitorze jest swobodne poruszanie się po stronie oraz dostępność jej funkcjonalności (wraz z udostępnionymi odnośnikami). Zapewnia się również czytelność tekstów i grafik, wraz z ich całkowitą widocznością - są automatycznie dopasowywane do rozmiarów wyświetlacza urządzenia. Przyjmuje się, że podczas procesu projektowania całkowicie praktycznej strony, najpierw powinno się zająć wersją mobilną, a następnie stworzyć desktopową stronę. W ramach tego rozwiązania na początku tworzenia powinno się zaplanować zawartość strony wraz z jej funkcjonalnością[3].
Ujmowane aspekty
W swojej publikacji Turek T. ujmuje, iż responsywne projektowanie powinno zwracać uwagę na zawieranie różnych aspektów (wizualizacyjne, ergonomiczne, techniczne czy organizacyjne). Najważniejsze aspekty to[4]:
- sposób wyświetlania - treść i menu powinny wyświetlać się zgodnie z zainteresowaniami użytkownika,
- wizualny podział strony - dopasowanie liczby kolumn do wielkości ekranu urządzenia, na którym użytkownik wyświetla stronę,
- dostosowanie do ekranu dotykowego - aby użytkownik łatwo poruszał po stronie, za pomocą linków, menu i przycisków powinny one być odpowiednio powiększone, podobnie jak odległości między linijkami (ogranicza to przypadkowe kliknięcie złej opcji i niechciane przekierowanie dalej na stronie),
- wyświetlanie obrazów i filmów - multimedia szybko powinny zmieniać rozmiar, dostosowując się do rozdzielczości ekranu,
- reguły CSS3 - zaleca się stosowanie tych reguł, aby skalować moduły i zdjęcia na wyświetlaczu,
- formatowanie tekstu - należy dopasować rozmiar czcionki oraz ustalić odpowiednie przerwy między wierszami dla przejrzystości strony i przyjemności czytania użytkownika.
Turek T. opisuje również odpowiednik responsive design, czyli “projektowanie dedykowanych aplikacji mobilnych". Zamiast przeglądarki jest uruchamiana taka aplikacja, zawierająca ograniczony zbiór funkcji. Dodatkowo zostaje przystosowana do użytkowania za pomocą ekranu z dotykowym panelem. Najczęściej wykorzystywane są przez większość systemów e-bankowości oraz umożliwiają prenumerowanie czasopism, jak również realizowanie mobilnych zakupów[5].
Ocena responsywności stron
Istnieją powszechnie dostępne w sieci narzędzia, służące ocenie responsywności stron internetowych. Odszukać można je wpisując frazę “website responsive test" w wyszukiwarce. Ich działanie opiera się o wyświetlanie ramek w rozmiarach, które ukazują wiele rozdzielczości dla zróżnicowanych urządzeń. Analiza natomiast jest subiektywną oceną poprawności, z jaką gotowe ramki są wyświetlane w danej witrynie. Testów można dokonać dla takich systemów operacyjnych, jak na przykład Microsoft Windows, Apple MAC OS czy Google Android. Najczęściej pojawiające się problemy przy ocenie responsywności witryn to[6]:
- zbyt mała czcionka
- gęste rozmieszczenie linków
- niedopasowanie szerokości treści do ekranu
- brak ustawienia okna roboczego urządzenia mobilnego
- użyte wtyczki są niezgodne
Występowanie wyżej wymienionych problemów świadczy o niedostosowaniu stron internetowych do urządzeń, na których są wyświetlane.
Wzrost wydajności witryn
Poprawa wydajności stron internetowych i szybkość ich pobierania jest istotne dla optymalizowania stron zaprojektowanych metodą responsive design. Ochim H. i Pańczyk B. w swojej publikacji wymieniają i omawiają 6 działań dążących do polepszenia mobilności witryn. Są to[7]:
- "Minimalizacja liczby żądań HTTP
- Konsolidacja i minimalizacja zasobów
- Optymalizacja plików graficznych techniką Image Sprites
- Warunkowe wczytywanie zawartości
- Lokalizacja zasobów strony na różnych serwerach
- Wykorzystanie sieci dostarczania treści (ang. Content Delivery Network - CDN)"
| Responsive design — artykuły polecane |
| JavaScript — Java — Złośliwe oprogramowanie — Webmaster — HTML — Aktualizacja oprogramowania — ASP.NET — Deep Web — Big data |
Przypisy
Bibliografia
- Janke P. (2016), Analiza responsywności wybranych platform usług elektronicznych administracji publicznej w Polsce, Zeszyty Naukowe. Organizacja i Zarządzanie / Politechnika Śląska, z. 89
- Ochim H., Pańczyk B. (2016), RWD jako narzędzie optymalizacji stron internetowych, Informatyka, Automatyka, Pomiary w Gospodarce i Ochronie Środowiska, nr 4
- Peterson C. (2014), Learning Responsive Web Design. A Beginner's Guide, O'Reilly Media
- Turek T. (2015), Analiza wykorzystania techniki Responsive Web Design w projektowaniu serwisów www na przykładzie uczelni wyższych, Zeszyty Naukowe Uniwersytetu Szczecińskiego. Ekonomiczne Problemy Usług, nr 117
Autor: Angelika Trólka
