spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 6.12.2012
Hodnoť článok:
11 0

3 jednoduché kroky ako spraviť responzibilný dizajn webu

Nie je to tak dávno, čo som na zive.sk čítal o tom, ako pripravovať responzívny design webu. Komentáre pod článkom tiež pobavili hlavne ak si vezmeme do úvahy fakt, že zive.sk fakt nie je moc responzívne, ale budiš. Poďme si povedať, ako sa na to skutočne pozrieť a čo potrebujete vedieť skôr, ako začnete redesignovať.


Je doba, kedy webové stránky musia vyzerať dobre nielen na desktopových počítačoch, ale aj na notebookoch, tabletoch, mobiloch či iných zariadeniach. Kedysi sme tieto veci riešili mobilnými verziami, kedy sme urobili úplne iný design, prípadne sme odstránili všetko, čo bolo moc veľké a zbytočne to zvyšovalo náklady na mobilný prenos.

Dnes tieto veci môžete zabudnúť a vypustiť z hlavy tvorbu wbmp obrázkov, ktoré boli určené pre monochromatické displeje :) Jou, to bola doba, keď sme fungovali na pixelovej grafike.

1. Layout Vášho webu

Ja (a nie som asi sám), keď robím web (či už dizajn, alebo už samotný kód) pripravujem všetko v defaultnej (neresponzívnej) forme a teda na šírku bežných stránok, cca 1280 px, prípadne 1080px. Takže web nie je síce responzibilný, no kým ho nemám ako-tak dokonalý pre bežné zobrazenie, netreba sa predsa hrať s responzibilitou, nie? Avšak, akonáhle dokončím prvú fázu, začína to najväčšie a najdôležitejšie rozhodnutie - čo všetko chcem podporovať?

V prvom rade musím určiť, že web sa bude prispôsobovať, čo obstará niekoľko jednoduchých meta-tagov. Určite nezabudnite do Vašich hlavičiek pridať nasledovné 3 riadky kódu:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="HandheldFriendly" content="true" />

Hneď potom je fajn, ak si osvojíme a pridáme nejaké tie media-queries (W3C), ktoré nám pomôžu pri určovaní rôznych parametrov pre jednotlivé elementy nášho webu. Napríklad keď (asi každý z nás) používame rozloženie v podobe #hlavicka, #obsah a #sidebar.

Keď sa pozriete na CSS nižšie, uvidíte, že práve media-queries budú rozhodovať o tom, ktorý z jednotlivých obsahov bude ako zobrazený a pri akom rozlíšení. Dôležité je, uvedomiť si, že všetko čo robíme dokážeme ovplyvňovať niekoľkými spôsobmi.

Napríklad pre table, ktorý je na šírku môžeme stránku zobrazovať v štýle, že bude zobrazená veľká hlavička pod ktorou je obsah a vedľa je sidebar, no ak je napríklad tablet postavený na výšku, zobrazíme sidebar pod obsahom, čo znamená, že aj obsah aj sidebar budú na 100% šírky.

/* Tablet na sirku */
@media screen and (max-width: 1060px) {
    #hlavicka,#obsah{ width:67%; }
    #sidebar { width:30%; margin-left:3%;}
}

/* Tabled na vysku */
@media screen and (max-width: 768px) {
    #hlavicka { display:none;}
    #obsah{ width:100%; }
    #sidebar{ width:100%; margin:0; border:none; }
}

Celkom sa mi zapáčil nástroj, ktorý uviedli aj na zive.sk a tak ho sem dám - Tester Reponzibility

2. Obsah webu a médiá

Každý web používa množstvo prvkov ako obrázky, videá a iné médiá. Samozrejme, že asi by sme chceli aby pri napríklad mobilných zariadeniach, boli tieto veci trošku viac optimalizované, pretože je predpoklad, že pripojenie ešte stále môže prebiehať pomocou mobilných operátorov a teda sietí, ktoré nie sú úplne "speedy".

Riešenie ponúkol napríklad Nicolas Gallagher, ktorý priniesol technológiu zobrazovania obsahu na základe data-* tagov.

<img src="obrazok.jpg"
     data-src-600px="obrazok-600px.jpg"
     data-src-800px="obrazok-800px.jpg"
     alt="" />

Ako vidíte, pre zobrazovanie alternatívnych obrázkov použil data-* tagy ako je data-src-600px pre prvý typ alternatívneho obrázku a data-src-800px pre druhý typ alternatívneho obrázku. Samozrejme, že bez ďalšieho dôležitého kódu to nepôjde a tak si pozrime CSS(3), ktoré to celé "preberie" k životu:

/* nahradí SRC za obrázok určený v data-src-600px */
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

/* nahradí SRC za obrázok určený v data-src-800px */
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Zaujímavé, že? Ale čo iné moderné vecičky ako napríklad video? O to sa postaral Nick La, ktorý prezmenu pripravil niečo ako "elastické videá". Základom tejto techniky je, že máme celé video (či už iframe, alebo embed) v kontajneri, ktorému pomocou CSS prikážeme, aby jeho podobsah bol vždy prispôsobený 100% výške a šírke.

<div class="video-blok">
	<iframe src="http://player.vimeo.com/video/53487581?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

A samozrejme, nesmiem zabudnúť na to CSSko

.video-blok {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-blok iframe,
.video-blok object,
.video-blok embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Akonáhle začnete vkladať Vaše videá týmto štýlom, vždy budu responzibilné!

3. Typografia

To, že fonty by mali byť v percentuálnom vyjadrení asi písať netreba (dúfam), avšak aj tak na to veľa ľudí nemyslí a preto klasická úvodná vec, ktorá nesmie v CSS chýbať:

html { font-size:100%; }

Čo však možno veľa z Vás nevie je, že pre responzibilné zobrazovanie webov vznikla nová jednotka - rem-y. Ide o tú istú jednotku ako samotné em avšak rem hovorí o tom, že hodnota je relatívna od HTML.

Tým pádom by mohlo nastavenie Vašich fontov (vzhľadom na relatívnosť od HTML) vyzerať napríklad takto:

@media (min-width:1100px) { body {font-size:1.5rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width: 640px) { body {font-size:1rem;} }

Záverom...

Prosím, myslite na to, že rem nie je podporované staršími prehliadačmi a tak treba zvážiť nejakú fallback funkciu, ktorá sa postará o resetnutie, prípadne možno určiť em hodnoty pre fonty, avšak verím, že väčšina zariadení (iphone, windows mobile a android) využívajú skôr tie modernejšie jadrá a tak by to nemalo byť problémom.

Dúfam, že sa Vám tento krátky tutoš páčil viac, ako článoček o galérii ;).

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
11 0

14 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

2 0 František Čaník 10.12.2012 11:19:35
@Filip Zajac a @Martin Michniak časť je preložená, časť doplnenaná vlastnými slovami. Stačí si to odslova doslova preložiť a nájdete rozdiel, takže isto je to aj o tom, že ja ako autor som vložil čo-to svoje. V každom prípade evidujem ako konštrukt.kritiku a pre budúcnosť sa uvedie zdroj, prípadne na námety čoho bol článok napísaný.
0 0 Martin Michniak 10.12.2012 10:44:33
@Filip Zajac mne ani tak nejde o nejake znevazovanie autora, ide mi skor o to, ze ked uz sa clanok len preklada a nie je "z vlastnej hlavy", nech sa spomenie aspon originalny clanok. Ked uz nie kvoli zakladnej slusnosti, tak aspon kvoli tomu, ze aj k originalu existuje diskusia, kde mozu byt rozne dalsie zaujimave veci...

a vdaka za tvoje linky, presne responzivnu typografiu prave riesim a "vsiakam", takze sa perfektne hodia :)
1 0 Filip Zajac 10.12.2012 10:34:38
@Martin Michniak tak to bol zásah. A čo na to autor? Každopádne @František Čaník ďakujem minimálne za preklad.
Ešte pripájam dobré články o tom ako treba premýšľať nad obsahom
http://informationarchitects.net/blog/responsive-typography/
http://informationarchitects.net/blog/responsive-typography-the-basics/
0 0 kaktus 9.12.2012 18:46:30
osobne preferujem skor nejaky z responsive boilerplate-ov, ako toto v clanku ;-)
4 0 Martin Michniak 9.12.2012 16:37:37
uz mi chyba len link na originalny clanok:

http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps
0 0 František Čaník 9.12.2012 00:02:16
@Miloš sorry, ale myslel som, ze ked je nad tym odstavcom blok kodu z CSS-ka, tak to bude dostatocne jasne.
0 0 Miloš 8.12.2012 22:39:04
František: Na prvé prečítanie som to pochopil tak, že tým HTML si myslel webovú stránku a nie tag HTML. Potom som si to vyhľadal na internete a bolo mi to jasné.
0 0 František Čaník 8.12.2012 18:42:30
@Pavel Straka: bootstrap u jasny je o nieco viac extendovany, vyuziva viacero veci, mozem niekedy spravit comparsion. A pouzivanie frameworkov je ako vzdy vecou konkretnych potrieb, pretoze niekedy ti mozu pomoct, inokedy narobit galibu.
0 0 Pavel Straka 8.12.2012 16:13:41
@František Čaník :Díky za pěkný článek. Zajímalo by mě jaký je rozdíl mezi odkazem, který jsi uveřejnil na boostrap
http://jasny.github.com/bootstrap/index.html
a původní verzí boostrapu
http://twitter.github.com/bootstrap/. Také by mě zajímal nazor tebe jako odborníka na používání frameworků
0 0 František Čaník 7.12.2012 23:16:57
Miloš: Keď je niečo relatívne od HTML => v HTML máš 100% {kód nad tým} tak 1.5 rem je {aspoň podľa mňa} 1 a pol násobok hodnoty HTML => 150%. Či?
0 0 Miloš 7.12.2012 15:14:24
František: Tak už rozumiem tomu rem a presne to som potreboval pri písaní môjho článku, zrejme článok upravím a pridám informáciu o rem.
0 0 Miloš 7.12.2012 15:12:49
Čo znamená relatívna od HTML? Na tvojich článkoch mi občas vadí, že určité veci nepopíšeš tak, aby im bolo úplne rozumieť. Samozrejme, že sa to dá vyhľadať, ale niekedy pri čítaní článku sa človeku nechce lietať hore-dole, aby zistil, čo tým autor myslel.

Niečo v podobnom duchu, ale týkajúce sa len veľkosti stránky a textu som nedávno napísal aj ja. Inšpiroval som sa aj tvojím článkom:
http://milsa.info/programovanie/internet/101-automaticka-zmena-css-stylu-podla-rozlisenia
A vôbec sa neurazím, keď aj mne niekto pridá komentár, prípadne hodnotenie.
0 0 František Čaník 7.12.2012 00:26:08
@Miroslav Ištvan podľa toho čo som vrámci bootstrapu videl sa dá riešiť responzibilita pridávaním CSS tried. Skús si kuknúť sekciu o responzibilite - http://jasny.github.com/bootstrap/scaffolding.html#responsive ... V skratke si môžeš vybrať, či sa budeš riadiť na základe media alebo pridávaním CSS pre elementy. Napríklad <div id="header" class="visible-desktop"> ... </div> a pre tablety budeš mať <div id="header-tablet" class="visible-tablet"> ... </div> prípadne ak ti vyhovuje hlavička desktopu aj na tablete, tak môžeš mať <div id="header" class="visible-tablet visible-desktop"> ... </div> čo spôsobí, že header bude viditeľný na tablete aj desktope. V prvom prípade sa ti zobrazí jeden v jednom zariadení a druhý v druhom. Ale to sa v podstate dá pochopiť, ak si pozrieť tú linku.
0 0 Miroslav Ištvan 7.12.2012 00:20:49
Frantisek, vdaka za clanok :) Hned ma zaujal nazov, kedze v tomto case sa prave hram s responsibilitou webu jednej stranky. Pouzil som tam twitter bootstrap front-end framework a zaujimalo by ma, ci Ty alebo ludia, ktori budete citat tento clanok nemate skusenosti s tymto frameworkom a s tym ako tam maju poriesenu responsibilitu oni ... pripadne, ci sa celkovo oplati pouzit, alebo ist vlastnou cestou, vdaka ;)
Zajtra.sk > Programovanie > CSS/HTML > 3 jednoduché kroky ako spraviť responzibilný dizajn webu


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama