{"id":318,"date":"2015-01-29T12:59:41","date_gmt":"2015-01-29T11:59:41","guid":{"rendered":"http:\/\/piotrgabriel.pl\/wiki\/?p=160"},"modified":"2021-06-29T07:01:22","modified_gmt":"2021-06-29T05:01:22","slug":"zrob-tanio-responsywna-strone-www","status":"publish","type":"post","link":"https:\/\/piotrgabriel.pl\/wiki\/zrob-tanio-responsywna-strone-www\/","title":{"rendered":"Zr\u00f3b sobie tanio responsywn\u0105 stron\u0119 WWW"},"content":{"rendered":"<p><strong>Zadajesz sobie pytanie, czy b\u0119dziesz w stanie szybko i tanio (albo za darmo) przebudowa\u0107 layout swojej strony WWW tak, by by\u0142a ona responsywna? Je\u015bli znasz HTML i CSS i masz taniego grafika lub sam potrafisz wykona\u0107 szablon w Photoshopie to dzieli Ci\u0119 kilka krok\u00f3w od posiadania responsywnej strony internetowej.<\/strong><\/p>\n<p><!--more--><\/p>\n<p>Od jakiego\u015b czasu zajmuj\u0119 si\u0119 optymalizacj\u0105 konwersji na stronach sprzeda\u017cowych. Chodzi mi tutaj g\u0142\u00f3wnie o jednostronicowe landingi (landing page) sprzeda\u017cowe. Optymalizacja takich stron polega na podniesieniu wsp\u00f3\u0142czynnika ilo\u015bci wej\u015b\u0107 do klik\u00f3w w \u017c\u0105dan\u0105 akcj\u0119, czyli <strong>CTR<\/strong> &#8211; <em>click through rate<\/em>. Chodzi wi\u0119c o odpowiednie przygotowaniu strony, tre\u015bci na niej zamieszczanych, grafiki i co najwa\u017cniejsze miejsca, kt\u00f3re b\u0119dzie nam przek\u0142ada\u0142o si\u0119 bezpo\u015brednio na zarobek czyli <strong>CTA<\/strong> (<em>click through area<\/em>).<\/p>\n<p><strong>Nie lekcewa\u017c ruchu z urz\u0105dze\u0144 mobilnych!<br \/>\n<\/strong><\/p>\n<p>Responsywne strony internetowe s\u0105 lepiej rankowane w Google i jest to rzecz na chwil\u0119 obecn\u0105 oczywista. Jest jeszcze jeden, bardzo wa\u017cny pow\u00f3d, dla kt\u00f3rego dzi\u015b po prostu wypada mie\u0107 stron\u0119 dostosowan\u0105 do urz\u0105dze\u0144 mobilnych. Tworz\u0105c stron\u0119 internetow\u0105 dla urz\u0105dze\u0144 mobilnych, zar\u00f3wno tych z systemem Android, Windows Mobile czy iOS czy te\u017c dziel\u0105c je zwyczajnie na tablety i smartfony, po prostu udost\u0119pniamy internautom \u0142atw\u0105 w przekazie i nawigacji witryn\u0119. Nie trzeba po\u015bwi\u0119ca\u0107 ju\u017c czasu na grzebanie palcem po ekranie w poszukiwaniu czego\u015b.<\/p>\n<p>W moim przypadku, ruch z urz\u0105dze\u0144 mobilnych to oko\u0142o 33% wszystkich sesji. Nie trzeba by\u0107 odkrywczym by doj\u015b\u0107 do wniosku, \u017ce jeden na trzech, czy trzydziestu trzech na stu (tak \u0142adniej brzmi \ud83d\ude42 ) odwiedzaj\u0105cych mo\u017ce mie\u0107 problem z nawigowaniem po moich stronach, co <strong>bezpo\u015brednio prze\u0142o\u017cy si\u0119 na spadek sprzeda\u017cy<\/strong>.<\/p>\n<p><a href=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/ruch-z-tabletow-i-komorek.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-161\" src=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/ruch-z-tabletow-i-komorek.png\" alt=\"ruch-z-tabletow-i-komorek\" width=\"528\" height=\"190\" title=\"\"><\/a><\/p>\n<p>Teraz jak ju\u017c opowiedzia\u0142em o tym dlaczego warto optymalizowa\u0107 strony pod urz\u0105dzenia mobilne, przejd\u017amy do om\u00f3wienia trzech w pe\u0142ni darmowych narz\u0119dzi, w kt\u00f3rych w \u0142atwy spos\u00f3b mo\u017cna wykona\u0107 szkielet (lub te\u017c ca\u0142\u0105) strony WWW.<\/p>\n<p><strong>Trzy Darmowe &#8211; bootstrap&#8217;owe narz\u0119dzia wspieraj\u0105ce responsive web design:<\/strong><\/p>\n<p>1. <strong>P<\/strong><strong>ingendo<\/strong> (<a href=\"http:\/\/pingendo.com\/\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/pingendo.com\/<\/a>)- kt\u00f3rego znalaz\u0142em stosunkowo niedawno, chcia\u0142bym poleci\u0107 dla wszystkich tych, kt\u00f3rzy chwal\u0105 aplikacje desktopowe. Podstawowe cechy pingendo to:<\/p>\n<ul>\n<li>mo\u017cliwo\u015b\u0107 przetestowania projektu na r\u00f3\u017cnych rozdzielczo\u015bciach (smartfon, tablet, laptop, ekran kompura stacjonarnego);<\/li>\n<li>podgl\u0105d kodu HTML do szybkiej edycji, kt\u00f3ry nanosi zmiany na podgl\u0105d w czasie rzeczywistym;<\/li>\n<li>Typography, umo\u017cliwiaj\u0105ca szybkie zastosowanie wybranego uk\u0142adu tekstu;<\/li>\n<li>Media, z kt\u00f3rej szybko mo\u017cemy przenie\u015b\u0107 do naszego projektu takie elementy jak Google maps, miniaturk\u0119 obrazka czy film z Youtube;<\/li>\n<li>Navigation, do planowania wszelkiego rodzaju menu, bredcrumb&#8217;s i paginacjami;<\/li>\n<li>Components, pozwalaj\u0105cy na dodanie do projektu p\u00f3l formularza, element\u00f3w walidacyjnych czy pask\u00f3w post\u0119pu lub tabel;<\/li>\n<li>Buttons, w kt\u00f3rym szybko wybierzemy przyciski do naszego projektu;<\/li>\n<li>Forms &#8211; jak sama nazwa wskazuje, umo\u017cliwi nam zaprojektowanie p\u00f3l formularza;<\/li>\n<li>Layouts, dzi\u0119ki kt\u00f3remu mo\u017cna projektowa\u0107 poszczeg\u00f3lne sekcje naszego bootstrapowego projektu strony WWW;<\/li>\n<li>jako ostatnie trzeba zaznaczy\u0107, \u017ce wszystkie wy\u017cej wymienione elementy dzia\u0142aj\u0105 na zasadzie WYSIWYG;<\/li>\n<\/ul>\n<p><a href=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/pingeon.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-162 size-medium\" src=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/pingeon-300x214.png\" alt=\"pingeon\" width=\"300\" height=\"214\" title=\"\"><\/a><br \/>\n2. <strong>LayoutIt!<\/strong> (<a href=\"http:\/\/www.layoutit.com\" target=\"_blank\" rel=\"noopener nofollow\">http:\/\/www.layoutit.com<\/a>) &#8211; b\u0119d\u0105cy pierwsz\u0105 moj\u0105 propozycj\u0105 dla tych co wol\u0105 mimo wszystko aplikacje webowe, do kt\u00f3rych b\u0119d\u0105 mieli dost\u0119p z ka\u017cdego miejsca z dost\u0119pem do internetu. Aplikacja oparta g\u0142\u00f3wnie na systemie grid, w kt\u00f3rym w pierwszej kolejno\u015bci projektujemy poszczeg\u00f3lne kolumny i w nich zagnie\u017cd\u017camy kolejne. Wszystko rzecz jasna r\u00f3wnie\u017c jak w przypadku Pingendo dzia\u0142a na zasadzie podnie\u015b, przeci\u0105gnij i upu\u015b\u0107 (WYSIWYG).<\/p>\n<p><a href=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/layoutit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-166 size-medium\" src=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/layoutit-241x300.png\" alt=\"layoutit\" width=\"241\" height=\"300\" title=\"\"><\/a>3. <strong>Bootply<\/strong> (<a href=\"http:\/\/www.bootply.com\" target=\"_blank\" rel=\"noopener nofollow\">http:\/\/www.bootply.com<\/a>) &#8211; darmowy, webowy cho\u0107 zamieszczony tutaj g\u0142\u00f3wnie ze wzgl\u0119du na funkcje ni\u017c na moje osobiste upodobania. Bootply nie jest ju\u017c tak szybki w projektowaniu jak wy\u017cej opisani poprzednicy. Tutaj wi\u0119kszy nacisk k\u0142adziony jest na kod, przez co osoby bez elementarnej znajomo\u015bci HTML czy CSS b\u0119d\u0105 mia\u0142y spory problem z jego edycj\u0105. Osobi\u015bcie nic nie przyku\u0142o w nim mojej uwagi na tyle bym poza testem chcia\u0142 go u\u017cywa\u0107 w swojej pracy.<\/p>\n<p><a href=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/bootply.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-167\" src=\"http:\/\/piotrgabriel.pl\/wiki\/wp-content\/uploads\/2015\/01\/bootply-300x213.png\" alt=\"bootply\" width=\"300\" height=\"213\" title=\"\"><\/a>Ko\u0144cz\u0105c, jeszcze raz zach\u0119cam do przebudowy swoich stron na Responsive Web Design. Otw\u00f3rzcie si\u0119 na ruch z urz\u0105dze\u0144 mobilnych a z pewno\u015bci\u0105 docenicie go w konwersji i monetyzacji swoich dzia\u0142a\u0144.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zadajesz sobie pytanie, czy b\u0119dziesz w stanie szybko i tanio (albo za darmo) przebudowa\u0107 layout swojej strony WWW tak, by by\u0142a ona responsywna? Je\u015bli znasz HTML i CSS i masz taniego grafika lub sam potrafisz wykona\u0107 szablon w Photoshopie to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":173,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[218],"tags":[],"class_list":["post-318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archiwum"],"_links":{"self":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":0,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media\/173"}],"wp:attachment":[{"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/piotrgabriel.pl\/wiki\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}