{"id":235,"date":"2013-07-26T14:50:41","date_gmt":"2013-07-26T12:50:41","guid":{"rendered":"https:\/\/lsbeta.szmigiel.design\/?p=235"},"modified":"2018-05-09T17:22:25","modified_gmt":"2018-05-09T15:22:25","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/retro.szmigiel.design\/pl\/blog\/responsive-web-design\/","title":{"rendered":"Responsive Web Design"},"content":{"rendered":"
\n

Internet w kieszeni<\/h2>\n

Od d\u0142u\u017cszego czasu mo\u017cemy obserwowa\u0107 trend zwi\u0105zany z upowszechnianiem si\u0119 dost\u0119pu do Internetu na urz\u0105dzeniach mobilnych, kt\u00f3re ponadto z dnia na dzie\u0144 staj\u0105 si\u0119 coraz bardziej wydajne i og\u00f3lnodost\u0119pne. W zwi\u0105zku z tym, nie musimy ju\u017c zasiada\u0107 przed ekranem komputera aby dotrze\u0107 do interesuj\u0105cych nas informacji. Wystarczy, \u017ce si\u0119gniemy do kieszeni po naszego smartfona, aby b\u0119d\u0105c na zakupach por\u00f3wna\u0107 ceny, sprawdzi\u0107 rozk\u0142ad jazdy autobus\u00f3w, albo po prostu zabi\u0107 nud\u0119 przegl\u0105daj\u0105c \u015bmieszne obrazki z kotami w roli g\u0142\u00f3wnej.<\/p>\n

Niestety, nie zawsze jest to zadanie \u0142atwe. Jeszcze do niedawna strony internetowe projektowane by\u0142y z my\u015bl\u0105 o nieustannie powi\u0119kszaj\u0105cych si\u0119 ekranach mog\u0105cych z du\u017c\u0105 \u0142atwo\u015bci\u0105 wy\u015bwietli\u0107 jednocze\u015bnie spor\u0105 ilo\u015b\u0107 tekstu, obraz\u00f3w, link\u00f3w oraz innych tre\u015bci dynamicznych. Nawigacje tworzono z my\u015bl\u0105 o precyzyjnych metodach zaznaczania z wykorzystaniem myszy oraz kursora. I cho\u0107 takie rozwi\u0105zanie od lat sprawdza\u0142o si\u0119 w Internecie prezentowanym na monitorach, okazuje si\u0119 zupe\u0142nie niewygodne, gdy zostanie przedstawione u\u017cytkownikowi na urz\u0105dzeniu o przek\u0105tnej ekranu nie przekraczaj\u0105cej kilku cali.<\/p>\n

Na ratunek<\/h2>\n

Z pomoc\u0105 przychodzi Responsive Web Design. Termin t\u0142umaczony (nieco niefortunnie<\/span>\n) na j\u0119zyk polski jako projektowanie responsywne. RWD<\/span>\n jest zar\u00f3wno technik\u0105, jak i filozofi\u0105 projektowania stron oraz aplikacji internetowych tak, aby nie duplikuj\u0105c tre\u015bci, wy\u015bwietli\u0107 wygodnie i czytelnie ich zawarto\u015b\u0107 niezale\u017cnie od urz\u0105dzenia, jego wielko\u015bci oraz rozdzielczo\u015bci zainstalowanego ekranu. Dzieje si\u0119 tak za spraw\u0105 specjalnych deklaracji zapisanych w kodzie CSS<\/span>\n, kt\u00f3re umo\u017cliwiaj\u0105 przegl\u0105darce internetowej formatowanie tre\u015bci w odniesieniu do szeroko\u015bci ekranu liczonej w pikselach.\n<\/p><\/div>\n

\"\"<\/p>\n

Ilustracja przedstawia \u201ezapadanie si\u0119\u201d uk\u0142ad\u00f3w wielokolumnowych w jedn\u0105 ca\u0142o\u015b\u0107 na przyk\u0142adzie r\u00f3\u017cnych urz\u0105dze\u0144. Za spraw\u0105 deklaracji CSS, mo\u017cemy dowolnie zarz\u0105dza\u0107 warstw\u0105 prezentacyjn\u0105 dokumentu bez konieczno\u015bci modyfikowania tre\u015bci. Istnieje zatem tylko jedna wersja strony \u2013 zmianie ulega tylko spos\u00f3b jej formatowania.<\/em><\/p>\n

\nDzi\u0119ki temu, projektuj\u0105c stron\u0119 posiadamy mo\u017cliwo\u015b\u0107 opisania r\u00f3\u017cnych scenariuszy wy\u015bwietlania zawarto\u015bci. W praktyce oznacza to mi\u0119dzy innymi zmniejszenie szeroko\u015bci strony wraz z ilo\u015bci\u0105 kolumn w ramach kt\u00f3rych osadzona jest tre\u015b\u0107. Otrzymujemy r\u00f3wnie\u017c wygodne w obs\u0142udze menu oraz obrazy nie przekraczaj\u0105ce szeroko\u015bci ekranu. Po wykonaniu takiego przekszta\u0142cenia nie musimy nieustannie przybli\u017ca\u0107 i oddala\u0107 tre\u015bci na naszym smartfonie aby dotrze\u0107 do interesuj\u0105cych nas materia\u0142\u00f3w, pozostaje nam jedynie du\u017co prostsze i szybsze przewijanie w pionie \u2013 czynno\u015b\u0107 do kt\u00f3rej Internet przyzwyczai\u0142 nas ju\u017c dawno temu.\n<\/div>\n

\"\"
\nTrzy przyk\u0142adowe scenariusze prezentacji tre\u015bci z zaznaczonymi kolumnami.<\/em><\/p>\n

\n

Odpowiedzialne projektowanie<\/h2>\n

Opisywana przeze mnie technika jest r\u00f3wnie\u017c ciekawa w kontek\u015bcie spo\u0142eczno-kulturowym. Coraz wi\u0119ksz\u0105 ilo\u015b\u0107 designer\u00f3w oraz developer\u00f3w cechuje postawa, za spraw\u0105 kt\u00f3rej deklaruj\u0105 powszechn\u0105 dost\u0119pno\u015b\u0107 ich projekt\u00f3w. Responsive Web Design jest zatem nie tylko reaguj\u0105cym<\/em> projektowaniem, ale tak\u017ce odpowiedzialnym<\/em>. Nic nie frustruje bowiem tak bardzo, jak produkt, kt\u00f3ry nie spe\u0142nia podstawowych za\u0142o\u017ce\u0144 \u2013 nie dociera do swoich odbiorc\u00f3w. Odnosz\u0119 wra\u017cenie, \u017ce odpowiedzialno\u015b\u0107 ma tutaj szczeg\u00f3lne znaczenie ze wzgl\u0119du na fakt, i\u017c generuje solidne podstawy do zbudowania funkcjonalnej witryny internetowej. W szumie informacyjnym i mnogo\u015bci kana\u0142\u00f3w multimedialnych \u0142atwo jest si\u0119 zagubi\u0107. Nie powinno zatem dziwi\u0107, \u017ce u\u017cytkownicy ch\u0119tniej wybieraj\u0105 tre\u015bci \u0142atwiejsze w odbiorze. Stawiaj\u0105c na projekt, kt\u00f3rego fundamenty zbudowane s\u0105 na dost\u0119pno\u015bci, zyskuj\u0105 wszyscy. Projektanci odczuwaj\u0105 satysfakcj\u0119 z doskonale wykonanej pracy, zleceniodawcy otrzymuj\u0105 serwis podatny na du\u017c\u0105 liczb\u0119 odwiedzin, a klienci szybko odnajduj\u0105 interesuj\u0105ce ich tre\u015bci.<\/p>\n

Czy responsywne strony internetowe du\u017co kosztuj\u0105?<\/h2>\n

Niezupe\u0142nie. Wdro\u017cenie systemu opartego o RWD uzale\u017cnione jest g\u0142\u00f3wnie od poziomu skomplikowania projektu oraz cech, jakie musi posiada\u0107. Stworzenie osobnych deklaracji styli dla tablet\u00f3w oraz smartfon\u00f3w mo\u017ce by\u0107 zatem zadaniem zar\u00f3wno szybkim i relatywnie prostym, jak i wymagaj\u0105cym wielu godzin dodatkowej pracy i test\u00f3w. Opracowanie regu\u0142 pozwalaj\u0105cych na funkcjonalne przedstawienie tre\u015bci na ekranach o r\u00f3\u017cnej wielko\u015bci oraz zag\u0119szczeniu pikseli nierzadko oznacza wykonanie osobnych projekt\u00f3w graficznych. Zasadniczo jednak, RWD znacz\u0105co podnosi koszty jedynie przy projektowaniu witryn o rzadko spotykanej lub mocno rozbudowanej funkcjonalno\u015bci. W przypadku stosunkowo niewielkich stron firmowych lub produktowych mo\u017cna znacz\u0105co zmniejszy\u0107 koszty opieraj\u0105c si\u0119 na popularnych technologiach udost\u0119pnianych na otwartych licencjach, tj. CMS Joomla!<\/a> czy Framework Twitter Bootstrap<\/a>.<\/p>\n

Podsumowanie<\/h2>\n

Responsive Design zapewnia doskona\u0142\u0105 dost\u0119pno\u015b\u0107 naszej strony za spraw\u0105 dynamicznego formatowania tre\u015bci uwzgl\u0119dniaj\u0105cego wielko\u015b\u0107 i rozdzielczo\u015b\u0107 ekranu. Projektowanie responsywne jest zatem doskona\u0142ym narz\u0119dziem likwiduj\u0105cym bariery technologiczne, kt\u00f3re jeszcze do niedawna zniech\u0119ca\u0142y do przegl\u0105dania Internetu na niewielkich wy\u015bwietlaczach smartfon\u00f3w lub tablet\u00f3w. Rosn\u0105ca popularno\u015b\u0107 tych urz\u0105dze\u0144 sprawia, \u017ce warto zastanowi\u0107 si\u0119 nad witryn\u0105, kt\u00f3ra powstanie w zgodzie z za\u0142o\u017ceniami technologii oraz filozofii projektowania responsywnego. Jest to bowiem inwestycja nie tylko w nowoczesn\u0105 technologi\u0119, ale tak\u017ce w pozytywny wizerunek naszej organizacji, kt\u00f3ra za spraw\u0105 elastycznego projektowania udowadnia, \u017ce szanuje swoich partner\u00f3w prezentuj\u0105c im tre\u015bci dopasowane do ich preferencji.<\/p>\n

Zapytaj o wycen\u0119 nowoczesnej, responsywnej strony internetowej<\/h2>\n

Moim klientom oferuj\u0119 rozwi\u0105zania oparte o systemy zarz\u0105dzania tre\u015bci\u0105 oraz szablony zbudowane w zgodzie z technik\u0105 Responsive Web Design. W zale\u017cno\u015bci od zak\u0142adanego bud\u017cetu oraz funkcjonalno\u015bci serwisu, jestem w stanie zaprojektowa\u0107 witryn\u0119 zupe\u0142nie od podstaw, lub rozbudowa\u0107 i dopasowa\u0107 komercyjny produkt tak, aby spe\u0142nia\u0142 za\u0142o\u017cenia przedstawione przez klienta.<\/p>\n<\/i><\/span>Dowiedz si\u0119 wi\u0119cej<\/span><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Dowiedz si\u0119, czym jest i dlaczego warto wykorzysta\u0107 technik\u0119 projektowania responsywnego na Twojej stronie internetowej.<\/p>\n","protected":false},"author":3,"featured_media":355,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[112],"tags":[26,47,95],"class_list":["post-235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strony-internetowe","tag-projektowanie","tag-projektowanie-graficzne","tag-strony-internetowe"],"_links":{"self":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":0,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media\/355"}],"wp:attachment":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}