RWD – Responsive Web design. Responsywne strony internetowe.

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

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ą stro­nę do urzą­dze­nia na któ­rym jest wyświe­tlana. Jeśli na poważ­nie myślisz o biz­ne­sie w sie­ci, to powi­nien być obo­wiąz­kowy arty­kuł.

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

    Gdy ktoś oglą­da waszą stro­nę, może to robić na smart­fo­nie, table­cie lub tele­wi­zo­rze. Nieresponsywny design ma jeden roz­miar, jak wydru­ko­wa­ny pla­kat. To ozna­cza, że na urzą­dze­niu z małym ekra­nem zosta­nie albo zmniej­szo­ny 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 pra­wo i w lewo. Niefajnie. Na więk­szym ekra­nie kom­pu­te­ra sta­cjo­nar­ne­go będą widocz­ne olbrzy­mie poła­cie pustej prze­strze­ni, a sama stro­na będzie wyglą­dać na małą i nie­cie­ka­wą.

    Logicznym roz­wią­za­niem jest zaofe­ro­wa­nie róż­nych lay­outów stro­ny na pod­sta­wie roz­mia­rów ekra­nu urzą­dze­nia. Ogólnie rzecz bio­rąc, mobil­ny układ powi­nien być wąski, mieć skon­den­so­wa­ne 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­ro­ki, mieć dużo infor­ma­cji i duże obraz­ki. Styl stro­ny jest taki sam, zmie­nia się jej układ. Niektóre ele­men­ty, te, któ­re nie są naj­waż­niej­sze, mogą być ukry­te lub zmniej­szo­ne. 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 klien­ta.

    Czy wiesz, że…
    50%Niektóre stro­ny już dziś mają poło­wę ruchu ze smart­fo­nów. W świe­cie, gdzie od kon­ku­ren­cji dzie­li nas jed­no 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­ka­ją w kil­ka sekund u nas, po pro­stu pój­dą dalej.

    Tworzenie zajmuje 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 cza­su. Wiele rze­czy trze­ba prze­my­śleć; któ­re ele­men­ty są naj­waż­niej­sze, ile kolumn powi­nien mieć każ­dy lay­out, jaka jest opty­mal­na dłu­gość linij­ki, przy któ­rej tekst będzie czy­tel­ny na danym urzą­dze­niu, jak pora­dzić sobie z obraz­ka­mi i rekla­ma­mi?

    A to napraw­dę dopie­ro począ­tek...

    responsive-web-design

    Gdy skła­da­my ofer­tę w spra­wie nowe­go zle­ce­nia, daje­my kil­ka opcji co do licz­by róż­nych lay­outów dla dane­go 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 stro­nę Microsoftu.

    Mobile First! Najpierw wersja mobilna.
    Sposób projektowania marketingu, który działa.

    Obecnie przy pro­jek­to­wa­niu i ana­li­zie kon­cep­cji wszyst­ko musi zostać wzię­te pod uwa­gę ze wzglę­du na ela­stycz­ność. Ustalamy style/kolory/ilustracje, ale pozy­cja i roz­miar nie muszą już być nie­zmien­ne. To ozna­cza, że zro­zu­mie­nie celów, pozna­nie odbior­ców i hie­rar­chii pro­jek­tu jest teraz waż­niej­sze niż kie­dy­kol­wiek. To dobrze. W sie­ci, w któ­rej sku­pie­nie inter­nau­ty przy­po­mi­na sku­pie­nie musz­ki owo­ców­ki, trze­ba mówić szyb­ko, 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 bez­kon­ku­ren­cyj­ni.

    responsywna-strona-Time

    Bardzo czę­sto wer­sja mobil­na dla apli­ka­cji sie­cio­wej lub stro­ny inter­ne­to­wej pro­jek­to­wa­na i two­rzo­na jest po tym, jak powsta­nie wer­sja na PC. Oto trzy powo­dy, dla któ­rych powin­no się pro­jek­to­wać naj­pierw wer­sję mobil­ną.

    1. Wersje mobilne są coraz bardziej popularne.



      Mimo, że dostęp do sie­ci przez urzą­dze­nia mobil­ne jest moż­li­wy od lat, smart­fo­ny obsłu­gu­ją w tej chwi­li olbrzy­mią część ruchu w apli­ka­cjach mobil­nych czy tre­ściach inter­ne­to­wych. Weźcie pod uwa­gę to, że ope­ra­to­rzy komór­kowi obser­wują w ostat­nich latach wzrost prze­sy­łu danych mobil­nych o tysią­ce pro­cent rocz­nie. A to dopie­ro począ­tek.

      Tworzenie wer­sji mobil­nej w pierw­szej kolej­no­ści udo­stęp­nia pro­dukt dla nie­zwy­kle szyb­ko roz­wi­ja­ją­cej się gru­py użyt­kow­ni­ków, któ­ra według wie­lu uwa­ża­na jest za kolej­ną waż­ną plat­for­mę kom­pu­te­ro­wą.

    2. Mobilność zmusza do skupiania.



      Urządzenia mobil­ne wyma­ga­ją od zespo­łów pro­jek­to­wych sku­pie­nia się na tyl­ko naj­waż­niej­szych danych i funk­cjach. Na ekra­nie o wymia­rach 320 na 480 pik­se­li po pro­stu nie ma miej­sca na zbęd­ne, nie­po­trzeb­ne ele­men­ty. Trzeba nada­wać im prio­ry­te­ty.

      Dlatego kie­dy zespół naj­pierw pro­jek­tu­je wer­sję mobil­ną, efek­tem koń­co­wym jest pro­dukt skon­cen­tro­wa­ny na naj­waż­niej­szych zada­niach, któ­re chcą zre­ali­zo­wać użyt­kow­ni­cy, bez nie­po­trzeb­nych dodat­ków i ogól­ne­go cha­osu w inter­fej­sie, któ­re wystę­pu­ją obec­nie na stro­nach odwie­dza­nych za pośred­nic­twem kom­pu­te­rów sta­cjo­nar­nych. To skła­da się na dobre doświad­cze­nie po stro­nie użyt­kow­ni­ka i jest dobre dla biz­ne­su.

    3. Mobilność zwiększa możliwości.



      Nowe plat­for­my dla apli­ka­cji mobil­nych wpro­wa­dza­ją cie­ka­we moż­li­wo­ści, któ­re zosta­wia­ją prze­glą­dar­ki dla kom­pu­te­rów sta­cjo­nar­nych w tyle. Weźcie pod uwa­gę nie­któ­re funk­cjo­nal­no­ści ofe­ro­wa­ne dewe­lo­pe­rom przez iPhone’y Apple’a czy plat­for­my Google Android: dokład­ne infor­ma­cje na temat loka­li­za­cji dzię­ki sys­te­mo­wi GPS, orien­ta­cja w tere­nie dzię­ki cyfro­we­mu kom­pa­so­wi, wpro­wa­dza­nie danych za pomo­cą jed­ne­go lub kil­ku jed­no­cze­snych gestów dzię­ki opcji mul­ti-touch, pozy­cjo­no­wa­nie urzą­dze­nia za pomo­cą akce­le­ro­me­tru i wie­le innych.

      Tworzenie wer­sji mobil­nej w pierw­szej kolej­no­ści pozwa­la wyko­rzy­stać całą pale­tę 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­sze­go zesta­wu funk­cjo­nal­no­ści.



    Jak stworzyć responsywną stronę internetową?
    Przykłady dla przedsiębiorców i porady dla deweloperów.

    Jednym z czę­stych zarzu­tów prze­ciw­ko respon­syw­ne­mu pro­jek­to­wa­niu stron jest fakt, że two­rzy się duże (pod wzglę­dem roz­mia­ru pli­ku) stro­ny inter­ne­to­we, któ­re spo­wal­nia­ją pod­stro­ny. Jednak może­my spra­wić, że respon­syw­ne stro­ny będą dzia­łać dobrze, musi­my tyl­ko pra­co­wać na tym, by było to moż­li­we. Według web apart, aż 86% respon­syw­nych desi­gnów prze­sy­ła takie same dane do każ­de­go urzą­dze­nia. Bez sen­su. Stwórzcie pod­sta­wo­wy sty­le­she­et dla każ­dej prze­glą­dar­ki i ulep­szo­ny sty­le­she­et dla nowo­cze­snych prze­glą­da­rek i Internet Explorera.

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

    Elastyczne siat­ki to chy­ba naj­bar­dziej eks­cy­tu­ją­ca część pro­jek­to­wa­nia RDW - respon­syw­nych stron www. Wykorzystując podzie­lo­ny kon­tek­sto­wo tar­get usta­wia­my pro­por­cjo­nal­ną siat­kę, któ­ra obej­mu­je wszyst­kie nie­zna­ne ele­men­ty.

    strony-responsywne

    Płynna siat­ka wypeł­nia luki na róż­nych roz­mia­rów ekra­nach i pozwa­la, by tre­ści wypeł­ni­ły prze­strze­nie o dowol­nych roz­mia­rach. Oto magia respon­si­ve 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 ekra­nu. Nie ist­nie­ją domyśl­ne zale­ca­ne bre­ak­po­in­ty. 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­se­le. Dzięki temu będzie­cie mogli wziąć pod uwa­gę zmien­ne pozio­my 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­pad­ku takich ele­men­tów jak fil­mi­ki zapew­nia ich ela­stycz­ność.

    rwd

    Załadujcie naj­pierw naj­waż­niej­sze ele­men­ty pod­stro­ny. Następnie zała­duj­cie pozo­sta­łe ele­men­ty w tle, gdy klu­czo­we tre­ści się już wczy­ta­ją. Funkcjonalności nie­za­leż­ne od Javascript mają więk­szą wydaj­ność. Użytkownicy nie korzy­sta­ją z Javascriptu, gdy stro­na jest w trak­cie pobie­ra­nia.

    rwd-przyklady

    Obrazki sta­no­wią 66% roz­mia­ru pli­ków na stro­nach inter­ne­to­wych. Zarządzanie obra­za­mi 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że­my z pomo­cą SVG wyko­rzy­stać gra­fi­kę wek­to­ro­wą.

    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 dru­ga pod wzglę­dem wiel­ko­ści część pod­stron, któ­ra blo­ku­je ren­de­ro­wa­nie dopó­ki nie zała­du­je 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­fil­le, asset loade­ry i script loade­ry. Yepnope to bar­dzo lek­ki loader, któ­ry umoż­li­wia okre­śle­nie, kie­dy 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ć pokor­ni i cięż­ko pra­co­wać, a rezul­ta­ty poja­wią się same.

    Pierwsze kroki. Jak rozpocząć tworzenie
    responsywnej strony dla mojego binzesu?

    zasoby-rwd

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

    Jeżeli jesteś przed­się­bior­cą i zale­ży Ci na tym, aby cyfro­wy kon­takt z Twoim biz­ne­sem był nie­zwy­kłym doświad­cze­niem dla każ­de­go klien­ta, naj­le­piej skon­tak­tuj się z pro­fe­sjo­nal­nym zespo­łem pro­jek­to­wym.

    Tu nie cho­dzi o kolej­ne “mod­ne” funk­cje, tyl­ko o zwięk­sze­nie współ­czyn­ni­ka kon­wer­sji i lep­szą zamia­nę 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ą ofer­tę. 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
    Prowokowanie działań
    W codzien­nych ścież­kach, potrze­bu­je­my małych przy­po­mnień, któ­re zmo­ty­wu­ją nas do dzia­ła­nia.
    Efektywne, zachę­ca­ją­ce kuk­sań­ce powin­ny zacze­piać ludzi tam, gdzie się znaj­du­ją.

    Na stro­nie może to być wyróż­nio­ny guzik, przy­po­mnie­nie mailem a nawet zwy­kły Tweet. Można tak­że wyko­rzy­stać czyn­ni­ki wywo­łu­ją­ce w try­bie offli­ne. Pomyśl o takich rodza­jach przy­po­mnień, któ­re moż­na usta­wić same­mu (SMS, komu­ni­ka­to­ry) Również wydruk, czy naklej­ka będą słu­żyć dokso­na­le jako przy­po­mnie­nie, by coś zro­bić.

    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ć.

    Ojciec Apple inc. Ikona
    rewolucji w marketingu,
    biznesie i designie.
    Otrzymaj ofertę