Tvorba grafiky – tlačítka

[P1x3L61]

hatoo – môže to mať v nejakom div tagu

[mojemeno]

Kedze je zjavne ze pan Remen sa v danej teme dost vyzna, mam jednu ot otazku, vies doporucit nejaky dobry tutorial pre tvorbu responsive design. Nieco som toho pocital, 90% z toho boli omacky, nic pouzitelne, nazorne priklady skoro ziadne… ide mi hlavne o to, aby to zobrazovalo webstranku dobre na pc/smartphone/tablete …
P1x3L61 mna ucili, ze pouzivat

tagy je uz „nemoderne“ a ked sa da, treba sa tomu vyhnut…

[Lukáš Raynor Majer]

footer-reversed tam je naco?

———-

reserve :-)

ten cierny minipanel dole v okne s copyrightom mam napevno na spodku okna a to reserve som dal, aby sa nestalo, že by footer prekryl nejaký ten obsah

na nič normálne som neprišiel :-D

trochu som porobil (na webe zatial nie je link na tuto časť, treba zadať): http://www.raynor.sk/profile.php

[hatto]

P1x3L61: nepochopil som ako to myslis

mojemeno: na css-tricks najdes najlepsie tutorialy na responsive design, a s tymi divmi to je nejaka blbost, bez divov sa neda robit. mozno myslel to aby sa pouzivali semanticke tagy (header, footer, main, article, section, nav…) ked sa da. ale to neznamena ze bez divov sa zaobideme

[Jozef Remen]

Presne ako pise hatto, najlepsie navody na CSS-Tricks.
Co sa tyka responzivneho designu, je to jednoduche – web je tak NAVRHNUTY, to len dizajneri a koderi to kurvia na neresponzivny web. Ved si hodte text do HTML, pridajte par obrazkov a v CSS dajte img elementu property width: 100%

Voila, responzivny web je na svete. Ak sa bavime o niecom zlozitejsom, zakladom su media queries, v ktorych sa definuju ine vlastnosti elementov. Zaciname samozrejme development mobile-first, a cez media queries upravujeme podla potreby pre tablet a desktop, napr.:

img {
width: 100%;
}

//Tablet (48em * 16px = 768px)
@media screen and (min-width: 48em) {
img {
display: inline-block;
width: 31%; /*hodnota z brucha, na presnost to chce preprocesor/kalulacku) */
margin-right: 2%;
}

img:nth-child(3n) {
margin-right: 0;
}
}

Voila, na telefone mame sirku obrazku 100%, na tablete mame 3 obrazky vedla seba.

Ako vidiet, zakladom responzivneho webu je definovanie jednotiek v percentach a em jednotkach.
Robotu a udrzbu v buducnosti brutalne ulahcia CSS preprocesory ako SASS, LESS, potrebne vendor prefixy zaisti autoprefixer.

Co sa tyka nepouzivania

elementov, je to samozrejme blbost. Je normalne a nutne ich pouzivat, ale samozrejme v HTML5 pouzijeme prislusne semanticke elementy, ak existuju. Tudiz

nahradime za

,

za

,

nahradime za

atd.

Lukas: nadbytocneho reserved divu sa zbavis velmi jednoducho, ak mas footer position: fixed. A to tak, ze obsahovemu wrapperu (kde je hlavny obsah, napr.

) navolis padding-bottom vo velkosti toho footera, a margin-bottom navolis negativny, opat vo velkosti footera.
Napr.:
.footer {
position: fixed;
width: 100%;
height: 3em;
}

.content {
padding-bottom: 3em; /*vyska footera*/
margin-bottom: -3em; /*negativna vyska footera */
}

[mojemeno]

hatto aJozef Remen: presne to som mal na mysli, semanticke elementy. Ked som sa ja ucil robit web stranky, ucil som sa to prave pomocou

tagov. To som sa ucil svojpomocne, doma cez tutorialy. A v skole mi bolo povedane, ze sa mam tomu vyhnut. Neviem aka je prax, velmi sa tomu nevenujem, no ten cviciaci bol na urovni, mal za sebou nejake projekty, ale mozno som ho len zle pochopil a myslel to tak, ze „pokial sa da“ treba sa div tagom vyhnut. Pamatam si ako sme to spolu riesili a povedal mi: „nevyzera ta stranka prehladnejsie, ked miesto

tam mas

?“. A padlo tam presne aj nieco o HTML5 a o tom, ze ked to uz je, treba to vyuzivat.

Co sa tyka toho responzivneho webu, ide mi prave o tie zlozitejsie veci. Je mi jasne, to s tymi % a em, ze vsetko sa to prisposobi velkosti prehliadaca. Ale to s media queries rozhodne vyskusam.

[Lukáš Raynor Majer]

čo sú „em jednotky“?

[Lukáš Raynor Majer]

skúsil som navštíviť ten môj web cez dumbphone Samsung S5611. Má zmysel robiť dizajn aj pre takéto telefóny, alebo sa vykašlať, hlavne ze ide dobre na počítačoch, smartfonoch a tabletoch?

Prikladam screnshoty, resp. odfotený displej:

https://www.dropbox.com/s/065asde5ywk5kow/Screenshot%202014-09-09%2023.40.58.tiff?dl=0
https://www.dropbox.com/s/t8hehvd0isuducu/Screenshot%202014-09-09%2023.42.47.tiff?dl=0

[Jozef Remen]

Nie, nema. Co nema aspon ako taky browser tak okaslat. Toto zjavne nepodporuje ani zaklady css.

Em jednotky vychadzaju z velkosti kuzelky pismena M v danom pisme, kedze vzasade byva to najvacsie. Su to relativne jednotky, nie absolutne v tom zmysle, ze ak mas vychodziu velkost pisma 16px, 1em bude sice 16px, ale ak nastavis parent elementu velkost font-size 2em, tak dcersky element pri velkosti trebars height: 1em bude mat vysku 32px

[Lukáš Raynor Majer]

Ten browser bol Opera mini, len sa neviem dopracovať ku verzii.

[hatto]

po spravnosti by mala dobre urobena stranka fungovat vsade. niekde mozno nebudu gradienty alebo zahnute rohy, ale fungovanie stranky by malo byt vsade rovnake – o tom je ten responzivny dizajn.

ale z praktickeho hladiska si poloz otazku kolko ludi bude navstevovat stranku z takeho prehliadaca? ak optimalizacia pre taky prehliadac ma zabrat 2 dni, kvoli 1 uzivatelovi za mesiac, tak sa to zrejme neoplati…

[Lukáš Raynor Majer]

MacBook, iPod touch, iPad – tam ide ta stranka normalne, len na mobile ju tak rozhadze :-D samozrejme, nemozeme porovnavat retinu s 320×240

[Bowden]

@Jozo_Remen > Zase responsive web, rovnako ako SVG nie je vseliek a univerzalne riesenie. Responsive design je modna zalezitost, ktora sa sice aj mne paci, ale niekedy nie je na skodu urobit web, ktory ma definovane absolutne rozmery aj v px a vedla toho samostanu mobilnu verziu a nerobit hipstera za kazdu cenu Najcastejsie to ocenis, ked ta web zivi aj inzerziou, ktora je stale definovana v px a nie v %. Staci si pozriet, ako su robene weby v top100 alebo hoci aj top1000 a nevymyslat picoviny, pretoze je to dnes moda.

Tym ale nechcem povedat, ze si nevazim tvoj nazor, pretoze mi je jasne, ze mas chochmesa o com tocis, ale zkratka mam na niektore veci aj iny nazor.

[Jozef Remen]

Bowden, v zivote by som nerobil veci v px. Nejde o responzivitu, ale skalovatelnost, byt i na desktope.

A uzatvarat web do nejakeho pomyselneho chlieva so sirkou 960px je ehm, no divne.

To nie je o hipsterstve, ale praktickosti. Preco by som sa mal trapit s fixnym webom a riesit rozdielne rozlisenia, ked definovanie v % je prirodzene a ked mam uz nachystany cely toolkit z minulosti pre rozne devicy, takze mi staci len restylovat design, ale responzivitu dostavam zadarmo? So SASS/LESS je hracka mat modularny design, kde su jednotlive prvky podelene do samostatnych suborov a tudiz nie je problem opakovane pouzivat ten isty kod len s potrebnymi upravami.

Ala bootstrap, s vynimkou toho, ze nepouzivam debilne prezentacne classy (preto neznasam css frameworky ako bs) a tudiz reusability je velmi vysoka.

Zase nemysli, ze robim len responzive weby. Ak si to niekto zela, nech sa paci, dostane len fixny web pre desktop s png. Akurat ze prijde o slusnu cast potencionalnych zakaznikov.

A samozrejme, responzive web NEROVNA sa mobile friendly web, ked pouzivate tie same obrazky na retina ipad aj maly mobil so slabou konektivitou. Lenze picture ci srcset tu este nie su, picturefill je neohrabany tak si vyber clovece…

[hatto]

bowden ma ciastocne pravdu, niektore weby nie su vhodne na responsive design ako priklad uvediem portaly, ktore ponukaju velke mnozstvo udajov. v tomto pripade je lepsie urobit zvlast mobilnu verziu (kde budu len dolezite data, a teda optimalizovane pre mobil) a zvlast desktop (kde bude komplet). uz som robil na viacerych takych weboch a ma to svoje opodstatnenie. napr http://www.toulouse.aeroport.fr/en promodeclic.fr inwi.ma – vsetko su to weby robene cez themeswitcher.

netreba vsetko hadzat do jedneho vreca, kazdy web je iny a vzdy si treba premysliet pred zaciatkom ako je najlepsie ho robit.

napr ja nie som fanusikom em, proste mam pocit ze mi to prinasa viac prace a ‚komplikacii‘ ako vyhod, ale uz som robil aj web cisto v em, lebo to bolo na ten dany priklad najvhodnejsie.alebo druhy priklad ako som uz pisal v predchadzajucom prispevku, niekedy je lepsie pouzit png ako svg.

s tym co pises o weboch (vo vseobecnosti na tomto fore, nie len v tejto teme) suhlasim ale nie v 100% pripadoch, vzdy sa najdu vynimky.

[Jozef Remen]

samozrejme, vynimky sa najdu.

Otazne je, ako SPOLAHLIVO riesit separatnu mobilnu verziu? Snad nie detekovanim cez useragent, to je s prepacenim somarina ako hrom. Feature detection, resolution detection? Vyzaduje javascript a teda prepne az po nacitani casti plneho webu. Aha, a uz tahame zbytocne data.

Co sa EM jednotiek tyka, hatto, s Compass v SASS (bacha, nepouzivat na prefixy ani na nic ine, len na toto a par drobnosti) je matematika s EM uplne komfortna, so zachovanim vertical rhythm (netreba na tom ale bazirovat). Compass osobne mam uz linkovany priamo do projektu a pouzivam ciste CSS, ziadne mixiny z compassu na gradienty apod., ale len cisto na vertical rhythm. V tom pripade je to izi pizi japanizi:

@include adjust-font-size-to(24px, 1.5);
margin-bottom: rhythm(.5, 24px);

a matematika v SASS to uz zvladne sama

ale k definovaniu v PX mam OBROVSKE vyhrady, ci uz su to velkosti pisma (nie, nie a este raz NIE) a aj v pripade cisto desktop verzie je lepsie pouzit percenta. Jak nieco date v pixeloch, uz je to natvrdo, kdezto aj pri desktop site % jednotky a em jednotky dokazu pekne skalovat pri zmene velkosti pisma, pri roznych velkostiach monitorov (od pidi netbookov po 27″ iMac). S pixelmi ste v prdeli.

[Bowden]

Jozo > u mna vo firme pouzivame riesenie na detekciu mobilneho, resp. akehokolvek portable zariadenia (IIS + .net), kde ti pred tym ako ta redirectnem na spravnu verziu zistim aj ako mas nabitu bateriu, okrem dalsich 50 parametrov a to este pred tym, aby som som urobil samotny exec nejakej casti contentu. Useragent, javascript na detekciu, to je rok 1999. Teda ziadne tahanie casti plneho webu, ja ta redirectniem na content, ktory ti bude servirovany az na zaklade detekovaneho zariadenia vcetne mnozstva parametrov, ktore mi poskytnes dobrovolne ;)

[Autor]

Príspevky