show menu
+ Menu

RWD – Responsive Web design. Responsywne strony internetowe.

Kompletny proces tworzenia stron dla firm, które wygrywają walkę o klientów.

    • RDW-Responsive-web-design
Co znajdziesz w artykule

    To, w jaki spo­sób prze­glą­damy sieć, ewo­lu­uje – dzięki rosną­cej licz­bie table­tów, smart­fo­nów, lap­to­pów, tele­wi­zo­rów a dziś nawet oku­la­rów. Responsywny webde­sign nie jest kolej­nym tren­dem. To podej­ście do pro­jek­to­wa­nia stron www, które kon­cen­truje się na doświad­cze­niu użyt­kow­nika, dopa­so­wu­jąc naszą stronę do urzą­dze­nia na któ­rym jest wyświe­tlana. Jeśli na poważ­nie myślisz o biz­ne­sie w sieci, to powi­nien być obo­wiąz­kowy artykuł.

    Przyszłość jest dziś. Witamy w erze postpecetowej.

    Gdy ktoś ogląda waszą stronę, może to robić na smart­fo­nie, table­cie lub tele­wi­zo­rze. Nieresponsywny design ma jeden roz­miar, jak wydru­ko­wany pla­kat. To ozna­cza, że na urzą­dze­niu z małym ekra­nem zosta­nie albo zmniej­szony do maleń­kich, nie­czy­tel­nych roz­mia­rów, albo użyt­kow­nik będzie musiał prze­wi­jać go w gorę i w dół, w prawo i w lewo. Niefajnie. Na więk­szym ekra­nie kom­pu­tera sta­cjo­nar­nego będą widoczne olbrzy­mie poła­cie pustej prze­strzeni, a sama strona będzie wyglą­dać na małą i nie­cie­kawą.

    Logicznym roz­wią­za­niem jest zaofe­ro­wa­nie róż­nych lay­outów strony na pod­sta­wie roz­mia­rów ekranu urzą­dze­nia. Ogólnie rzecz bio­rąc, mobilny układ powi­nien być wąski, mieć skon­den­so­wane infor­ma­cje i mniej obraz­ków, a lay­out dla kom­pu­te­rów sta­cjo­nar­nych powi­nien być sze­roki, mieć dużo infor­ma­cji i duże obrazki. Styl strony jest taki sam, zmie­nia się jej układ. Niektóre ele­menty, te, które nie są naj­waż­niej­sze, mogą być ukryte lub zmniej­szone. To tro­chę tak, jak z robie­niem tych samych pod­ko­szul­ków w róż­nych roz­mia­rach: S, M, L, XL… w zależ­no­ści od klienta.

    Czy wiesz, że…
    50%Niektóre strony już dziś mają połowę ruchu ze smart­fo­nów. W świe­cie, gdzie od kon­ku­ren­cji dzieli nas jedno klik­nię­cie, tole­ran­cja użyt­kow­ni­ków wobec kiep­skich stron jest bar­dzo niska. Jeżeli nie mogą zna­leźć tego, co szu­kają w kilka sekund u nas, po pro­stu pójdą dalej.

    Tworzenie zaj­muje wię­cej czasu. Efekty dają wię­cej zysków.

    Jak można się spo­dzie­wać, nie­za­leżne pro­jek­to­wa­nie trzech / czte­rech róż­nych ukła­dów zaj­mie wię­cej czasu. Wiele rze­czy trzeba prze­my­śleć; które ele­menty są naj­waż­niej­sze, ile kolumn powi­nien mieć każdy lay­out, jaka jest opty­malna dłu­gość linijki, przy któ­rej tekst będzie czy­telny na danym urzą­dze­niu, jak pora­dzić sobie z obraz­kami i rekla­mami?

    A to naprawdę dopiero począ­tek...

    responsive-web-design

    Gdy skła­damy ofertę w spra­wie nowego zle­ce­nia, dajemy kilka opcji co do liczby róż­nych lay­outów dla danego desi­gnu. Niezbędnym mini­mum są obec­nie dwa desi­gny; dla tele­fo­nów i stan­dar­do­wych moni­to­rów kom­pu­te­rów sta­cjo­nar­nych. Górny limit może wyno­sić nawet i pięć – spójrz­cie raz jesz­cze na stronę Microsoftu.

    Mobile First! Najpierw wer­sja mobilna.
    Sposób pro­jek­to­wa­nia mar­ke­tingu, który działa.

    Obecnie przy pro­jek­to­wa­niu i ana­li­zie kon­cep­cji wszystko musi zostać wzięte pod uwagę ze względu na ela­stycz­ność. Ustalamy style/kolory/ilustracje, ale pozy­cja i roz­miar nie muszą już być nie­zmienne. To ozna­cza, że zro­zu­mie­nie celów, pozna­nie odbior­ców i hie­rar­chii pro­jektu jest teraz waż­niej­sze niż kie­dy­kol­wiek. To dobrze. W sieci, w któ­rej sku­pie­nie inter­nauty przy­po­mina sku­pie­nie muszki owo­cówki, trzeba mówić szybko, zwięźle i na temat. A co naj­waż­niej­sze mówić to w odpo­wied­nim momen­cie. A Owocni są w tym bezkonkurencyjni.

    responsywna-strona-Time

    Bardzo czę­sto wer­sja mobilna dla apli­ka­cji sie­cio­wej lub strony inter­ne­to­wej pro­jek­to­wana i two­rzona jest po tym, jak powsta­nie wer­sja na PC. Oto trzy powody, dla któ­rych powinno się pro­jek­to­wać naj­pierw wer­sję mobilną.

    1. Wersje mobilne są coraz bar­dziej popularne.



      Mimo, że dostęp do sieci przez urzą­dze­nia mobilne jest moż­liwy od lat, smart­fony obsłu­gują w tej chwili olbrzy­mią część ruchu w apli­ka­cjach mobil­nych czy tre­ściach inter­ne­to­wych. Weźcie pod uwagę to, że ope­ra­to­rzy komór­kowi obser­wóją w ostat­nich latach wzrost prze­syłu danych mobil­nych o tysiące pro­cent rocz­nie. A to dopiero począ­tek.

      Tworzenie wer­sji mobil­nej w pierw­szej kolej­no­ści udo­stęp­nia pro­dukt dla nie­zwy­kle szybko roz­wi­ja­ją­cej się grupy użyt­kow­ni­ków, która według wielu uwa­żana jest za kolejną ważną plat­formę komputerową.

    2. Mobilność zmu­sza do skupiania.



      Urządzenia mobilne wyma­gają od zespo­łów pro­jek­to­wych sku­pie­nia się na tylko naj­waż­niej­szych danych i funk­cjach. Na ekra­nie o wymia­rach 320 na 480 pik­seli po pro­stu nie ma miej­sca na zbędne, nie­po­trzebne ele­menty. Trzeba nada­wać im prio­ry­tety.

      Dlatego kiedy zespół naj­pierw pro­jek­tuje wer­sję mobilną, efek­tem koń­co­wym jest pro­dukt skon­cen­tro­wany na naj­waż­niej­szych zada­niach, które chcą zre­ali­zo­wać użyt­kow­nicy, bez nie­po­trzeb­nych dodat­ków i ogól­nego cha­osu w inter­fej­sie, które wystę­pują obec­nie na stro­nach odwie­dza­nych za pośred­nic­twem kom­pu­te­rów sta­cjo­nar­nych. To składa się na dobre doświad­cze­nie po stro­nie użyt­kow­nika i jest dobre dla biznesu.

    3. Mobilność zwięk­sza możliwości.



      Nowe plat­formy dla apli­ka­cji mobil­nych wpro­wa­dzają cie­kawe moż­li­wo­ści, które zosta­wiają prze­glą­darki dla kom­pu­te­rów sta­cjo­nar­nych w tyle. Weźcie pod uwagę nie­które funk­cjo­nal­no­ści ofe­ro­wane dewe­lo­pe­rom przez iPhone’y Apple’a czy plat­formy Google Android: dokładne infor­ma­cje na temat loka­li­za­cji dzięki sys­te­mowi GPS, orien­ta­cja w tere­nie dzięki cyfro­wemu kom­pa­sowi, wpro­wa­dza­nie danych za pomocą jed­nego lub kilku jed­no­cze­snych gestów dzięki opcji multi-touch, pozy­cjo­no­wa­nie urzą­dze­nia za pomocą akce­le­ro­me­tru i wiele innych.

      Tworzenie wer­sji mobil­nej w pierw­szej kolej­no­ści pozwala wyko­rzy­stać całą paletę tych moż­li­wo­ści do stwo­rze­nia boga­tych, kon­tek­sto­wych apli­ka­cji bez ogra­ni­cza­nia się do coraz star­szego zestawu funkcjonalności.



    Jak stwo­rzyć respon­sywną stronę inter­ne­tową?
    Przykłady dla przed­się­bior­ców i porady dla deweloperów.

    Jednym z czę­stych zarzu­tów prze­ciwko respon­syw­nemu pro­jek­to­wa­niu stron jest fakt, że two­rzy się duże (pod wzglę­dem roz­miaru pliku) strony inter­ne­towe, które spo­wal­niają pod­strony. Jednak możemy spra­wić, że respon­sywne strony będą dzia­łać dobrze, musimy tylko pra­co­wać na tym, by było to moż­liwe. Według web apart, aż 86% respon­syw­nych desi­gnów prze­syła takie same dane do każ­dego urzą­dze­nia. Bez sensu. Stwórzcie pod­sta­wowy sty­le­sheet dla każ­dej prze­glą­darki i ulep­szony sty­le­sheet dla nowo­cze­snych prze­glą­da­rek i Internet Explorera.

    Czy wiesz, że…
    Program Adobe InDesign pozwala na stwo­rze­nie bar­dziej płyn­nych pro­jek­tów niż Photoshop. W związku z tym może to być lep­sze narzę­dzie do two­rze­nia respon­syw­nych stron internetowych.

    Elastyczne siatki to chyba naj­bar­dziej eks­cy­tu­jąca część pro­jek­to­wa­nia RDW - respon­syw­nych stron www. Wykorzystując podzie­lony kon­tek­stowo tar­get usta­wiamy pro­por­cjo­nalną siatkę, która obej­muje wszyst­kie nie­znane elementy.

    strony-responsywne

    Płynna siatka wypeł­nia luki na róż­nych roz­mia­rów ekra­nach i pozwala, by tre­ści wypeł­niły prze­strze­nie o dowol­nych roz­mia­rach. Oto magia respon­sive web design.

    strony-responsywne-przyklady

    Media query daje moż­li­wość dopa­so­wa­nia lay­outu na pod­sta­wie moż­li­wo­ści ekranu. Nie ist­nieją domyślne zale­cane bre­ak­po­inty. Nie wyko­rzy­stuj­cie bre­ak­po­in­tów stwo­rzo­nych na pod­sta­wie naj­bar­dziej popu­lar­nych urzą­dzeń. Ta lista wciąż się zmie­nia i może­cie sami sie­bie zapę­dzić w kozi róg.

    responsywne-strony-internetowe

    Do two­rze­nia bre­ak­po­in­tów wyko­rzy­staj­cie em, a nie pik­sele. Dzięki temu będzie­cie mogli wziąć pod uwagę zmienne poziomy przy­bli­że­nia w prze­glą­dar­kach. Ustawienie mak­sy­mal­nej sze­ro­ko­ści obra­zów i media query na 100% w przy­padku takich ele­men­tów jak fil­miki zapew­nia ich elastyczność.

    rwd

    Załadujcie naj­pierw naj­waż­niej­sze ele­menty pod­strony. Następnie zała­duj­cie pozo­stałe ele­menty w tle, gdy klu­czowe tre­ści się już wczy­tają. Funkcjonalności nie­za­leżne od Javascript mają więk­szą wydaj­ność. Użytkownicy nie korzy­stają z Javascriptu, gdy strona jest w trak­cie pobierania.

    rwd-przyklady

    Obrazki sta­no­wią 66% roz­miaru pli­ków na stro­nach inter­ne­to­wych. Zarządzanie obra­zami dla róż­nych roz­dziel­czo­ści jest coraz trud­niej­sze. Zamiast wyko­rzy­sty­wa­nia obra­zów rastro­wych dla ikon i tła, możemy z pomocą SVG wyko­rzy­stać gra­fikę wektorową.

    responsywna-strona-www

    Chrońcie naj­waż­niej­szą ścieżkę łado­wa­nia klu­czo­wych tre­ści na stro­nie respon­syw­nej. Javascript to druga pod wzglę­dem wiel­ko­ści część pod­stron, która blo­kuje ren­de­ro­wa­nie dopóki nie zała­duje się w cało­ści. Zacznijcie od zała­do­wa­nia jak naj­mniej­szej moż­li­wej ilo­ści Javascriptu. Wykorzystajcie ją do okre­śle­nia, co zała­do­wać w następ­nej kolej­no­ści. Początkowy Javascript: zała­duj­cie testy opcji, naj­waż­niej­sze poly­fille, asset loadery i script loadery. Yepnope to bar­dzo lekki loader, który umoż­li­wia okre­śle­nie, kiedy obsłu­żyć Javascript.

    dobra-strona-responsywna

    Spokojnie to web design, a nie reli­gia. Działamy w jed­nej z naj­faj­niej­szych branży na świe­cie. Musimy być pokorni i ciężko pra­co­wać, a rezul­taty poja­wią się same.

    Pierwsze kroki. Jak roz­po­cząć two­rze­nie
    respon­syw­nej strony dla mojego binzesu?

    zasoby-rwd

    Jeżeli jesteś pro­jek­tan­tem, lub pro­gra­mi­stą udaj się na stronę Github’a, który w jed­nym miej­scu zgro­ma­dził naj­cen­niej­sze zasoby sieci doty­czące respon­syw­nych pro­jek­tów stron inter­ne­to­wych.

    Jeżeli jesteś przed­się­biorcą i zależy Ci na tym, aby cyfrowy kon­takt z Twoim biz­ne­sem był nie­zwy­kłym doświad­cze­niem dla każ­dego klienta, naj­le­piej skon­tak­tuj się z pro­fe­sjo­nal­nym zespo­łem projektowym.

    Tu nie cho­dzi o kolejne “modne” funk­cje, tylko o zwięk­sze­nie współ­czyn­nika kon­wer­sji i lep­szą zamianę odwie­dza­ją­cych w praw­dzi­wych klien­tów. Oczywiście zawsze możesz zapy­tać nas o nie­zo­bo­wią­zu­jącą ofertę. Zadzwoń 660 970 980. Jesteśmy tu by Ci pomóc. Zapraszamy.

    Na górę
    Tworzymy świetne
    strony internetowe uwielbiane przez ludzi i Google
    Wyceń za darmo
    Kolekcjonowanie
    Ludzie lubią zbie­rać inte­re­su­jące rze­czy, które uzu­peł­niają, lub kom­ple­tują jakiś więk­szy zestaw.
    Czy na two­jej stro­nie ist­nieje moż­li­wość zbie­ra­nia cze­goś?

    Kupony, pla­kietki, punkty, lub inne kawałki więk­szej cało­ści – moż­li­wo­ści są nie­ogra­ni­czone. Najlepiej, by przed­mioty te wią­zały się z repu­ta­cją i polep­szały jakość Twojej usługi.

    Mądrego miło posłuchać

    Szanowny ekspercie.
    Podziel się wiedzą i odbierz zapłatę.

    Sprawdź to - kliknij tutaj.

    Lubisz nasze treści i to co robimy?
    Możesz publikować je u siebie, sprawdź
    także jak jeszcze możesz nas wesprzeć.

    Donald Trump
    CEO Trump Organization.
    Prawdziwy Amerykański
    Multimiliarder i showman.
    x
    Będziemy Ci bardzo wdzięczni za
    sugestie lub informację o napotkanym
    błędzie. Każdego dnia wkładamy wiele
    pracy, aby te strony były lepsze.

    Pozwól nam Tobie podziękować:
    no-spam