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

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.

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?

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.