Fórum - Téma


Responsivní web design


Fórum Klubové záležitosti Responsivní web design



1  2

udm  
2016-05-24 05:27:39

Předělal jsem web na responsivní web design. Co ten pojem znamená? Že web se umí automaticky přizpůsobovat šířce obrazovky. Na PC by mělo vše vypadat téměř beze změn, ale když se podíváte na web z mobilu či tabletu, uvidíte, že se struktura stránek přeskládá tak, aby nemusel člověk zoomovat (přibližovat) aby si mohl něco přečíst či na něco kliknout. Na mobilu i tabletu můžete vyzkoušet překlopit na šířku a pak zas na výšku - uvidíte, jak se web přeskládá, aby vhodně využil šířku displaye.

Jak ten responsivní design funguje si lze nejlépe vyzkoušet přímo na PC - zmenšujte pomalu okno prohlížeče na nejmenší co jde a pak pomalu opět zvětšujte na maximální šířku. Pecka, co?

Pracoval jsem na tom více než měsíc a samozřejmě jsem se to snažil důkladně otestovat, než jsem to dneska finálně hodil z testovacího do ostrého prostředí. Ač na PC web vypadá téměř stejně, uvnitř téměř nezůstal kámen na kameni. Takže je velice pravděpodobné, že objevíte různé chyby a nedokonalosti. Pokud ano, pošlete mi vzkaz interkou .. nebo napište sem do tématu.

Uvítám jakoukoliv zpětnou vazbu (pozitivní i negativní).

Jinak více informací o tom, co to je responsivní web design viz Wikipedia https://cs.wikipedia.org/...sponzivn%C3%AD_web_design

NO_HITS  
Laďa
2016-05-24 11:33:49

Zmenši to písmo obyč textu, je to prostě velký a při pár slovech je ten text dost rozházenej . Hlavní stránka ok, menu se zobrazí, ještě by tam ty 3 čárky mohly být pro opětovný skrytí menu. Jinak moc nejsem zastánce represivniho designu, mně to přijde takový,, ztísněný,, a zvětšený... Alespoň na QHD displeji, uvital bych přepínač na původní zobrazení, to ale předpokládám není možný . Ještě kouknu na tabletu

Jo zkus ty tlačítka hodit všechny pod text ať jsou po hromadě, aby ten text nebyl ohraničenej nahoře z obou stran

udm  
2016-05-25 03:49:35

no_hits: písmo vypadá velký jen když člověk kouká na screenshot z mobilu na PC / notebooku. Písmo je tak akorát velké, aby šlo pohodlně číst. Vždyť se podívej - je jen o kousek větší než "74%" text nahoře ve status baru. A to je text na displayi dost malý.

Hodit všechny tlačítka pod text zní jako rozumný nápad, to vyzkouším. Ale asi by to tak mělo být jen když šířka obrazovky se bude blížit mobilu? A na PC to nechat vpravo jak to je?

Opětovné skrytí hlavního menu po dalším kliknutí funguje, to už tak bylo, vyzkoušej.

Přepínač na původní design jsem zkoušel udělat. Ale ukázalo se, že tak jednoduché jak jsem si myslel to není a že by se musely přepsat veškeré CSS styly. Strašně pracný a otázka kolik lidí by to využilo. Neříkám, že to nakonec neudělám, ale při tom, kolik to bude stát času nedokážu odhadnout, kdy se k tomu dostanu. Bohužel holt nestačí jen vypustit ze stránky META "viewport" dle toho, jak je nastavená cookie (responsivní design / původní).

NO_HITS  
Laďa
2016-05-25 12:30:48

Ty tlačítka jsem myslel samozřejmě na menší obrazovce než je PC biz ten muj screen. změna designu by teoreticky mohla být v nastavení profilu kde by si uzivatel vybral z nabidky která by odkazovala na dva CSS soubory, novej responsivní a druhej původní.

To písmo máš klasický 14px tuším když jsme se o tom tenkrát bavili. Já bych uvítal 12px u těch menších layoutů než je PC.

A text na hlavní stránce se zespodu ořezává viz screen

udm  
2016-05-25 16:24:36

no_hits: OK, ty tlačítka vyzkouším.

V nastavení profilu určitě ne. Neb i neregistrovaný / nepřihlášený návštěvník by měl mít možnost si zvolit zda chce to či ono zobrazení. Podle mě jediné rozumné řešení pak je přes cookie. A dole na každé stránce tlačítko pro přepnutí.

Dva CSS soubory by sice mohlo být řešení a bylo by to celkem jednoduché, ale bohužel taky cesta do pekel. Udržovat 2 stejné CSS povede jen k mnoha chybám - aneb duplicitám se člověk musí vyhejbat jak čert kříži. Takže jen jeden CSS, ale musely by se tam všechny styly větvit - zda to má bejt responsivní či ne. Na jednom webu jsem zkoumal jak to maj udělané a bylo vidět, že s tím je pekelně práce navíc. Hlavně to všechno otestovat a to i v budoucnu s každou další úpravou, to na tom asi bude nejhorší.

Otázka ale opravdu zůstává - zda to má vůbec smysl dělat. Odpověď ukáže asi jen čas - za pár týdnů zda si lidi zvyknou z mobilu že se to zobrazuje optimalizované pro mobil.

Text na hlavní stránce se ořezává, JJ, vím o tom. Je to drobnost, až se k tomu dostanu, opravím to.

2016-05-25 16:58:26

objavil som jednu chybu: po nastaveni filtru v 'Nase auta' sa zobrazuje len 10 poloziek aj ked by sa ich malo zobrazit viac, pripadne preklik na dalsiu stranku

udm  
2016-05-25 17:01:52

codex32: pošli odkaz

2016-05-25 17:05:25

Jo ten odkaz "nase auta" blbnul co si pamatuju uz kdysi davno..

Jinak nove zobrazeni alespon za me opravdu bohuzel nic moc. Na tabletu iPadu mam vse zbytecne desne velky a lepsi bylo si to normalne jednoduse a rychle zvetsit, nez kdyz je to v jedne velikosti a neudelam nic s tim, max. jeste jen zvetsim. Na telefonu (iP5) taky bohuzel zadny slagr a v podstate stejny problem jako na tabletu. Vse moc velky a diky tomu ne uplne prehledny. Ale chapu ze nejaky posun byt musi..

udm  
2016-05-25 17:11:00

lukyisek: hoď sem screenshoty.

Neříkej, že se třeba článek http://www.nissanclub.cz/...cnosti-pokracuje-127nečte teďka na mobilu i tabletu lépe?

NO_HITS  
Laďa
2016-05-25 18:35:08

udm: zkus na Nějaké stránce otestovat o 2px menší písmo

2016-05-25 18:47:51

Vse velky, neprehledny, bez moznosti zmenseni. Puvodni stav za me tedy lepsi, tohle se akorat rozhodi a vypada to jak web pred x lety..

PS: Kdyz jsem dal ale upravit prispevek, skocilo to do normalu, ktery je podstatne lepsi. Vidim celou stranku a muzu si priblizit co potrebuji, od toho mam snad dotykac. A ne mit to uz hned velky bez moznosti zmenseni a tim padem neprehledny..

PS2: Tak pri pridani obrazku, posledni screen, podstatne lepsi rozliseni Tak by to melo byt.

Jeste dodam ze tohle je na iPhone 5, tablet je zhruba obdobny jen ve vetsim.. Takhle pro me ale nevyuzitelny, omezujici, obří s tezkou orientaci. Pokud si zvetsim obrazky, najednou se nevyznam vubec. Optimalizace na displej proste neji dobra volba, pokud clovek potreboval, zvetsil si to jak bylo libo a jinak vse na jedne strance.

2016-05-25 19:16:38

udm: http://www.nissanclub.cz/nase-vozidla

udm  
2016-05-26 00:11:24

codex32: dík, opraveno, té chyby jsem si vůbec nevšiml a nikdo mě na ní neupozornil.

2016-05-26 20:48:25

já tedy nevím ale za mě krok o hodně zpět... na PC to vypadá strašně text rozházený, videa přes celou plochu textové části... nic proti ale fuj, hnus velebnosti

viď přiložený obrázek náhodné témy.

udm  
2016-05-27 00:54:25

thommy: Tobě vadí "videa přes celou plochu textové části"? To budeš asi jedinej. Takhle větší je to lepší, můžeš na video koukat aniž bys musel pokaždé přepnout na celou obrazovku, protože v téhle velikosti už je dobře koukatelné.

Jak jsi udělal ten screenshot, že je dlouhej přes 3000px a že tam je celej web vidět?

Text není rozházený, ale text tzv. obtéká. Což je hlavní princip responsivního web designu. Vše musí obtékat, zejména text a to všude, kde je to možné. Jen díky tomu se může na různých velikostech (šířce) obrazovky obsah webu přeskládat tak, aby efektivně vyplnil obrazovku. Naopak čemu se člověk prostě musí vyhnout jsou tabulky. A to je právě to, jak to vypadalo dříve - ve fóru při zobrazení příspevků byly 3 sloupečky:

  • nick + foto
  • text příspěvku
  • tlačítka

Pokud někdo bude mít nápad, jak by to šlo nějak vzhledově vylepšit, tak si samozřejmě rád nechám poradit. Ideálně kdyby to někdo uměl vyjádřit v HTML + CSS.

2016-05-27 16:30:41

Za me jsou videa v pohode, jsou opravdu vetsi, je to lepe videt a není potřeba to nijak zvetsovat, prepinat na YT apod. Ale zobrazeni napr. na Apple zarizenich (iPhone, iPad) není uplne idealni. Na tom iPadu to ještě celkem jde, ale na iPhone 5 hure pouzitelne, opravdu vse zbytecne vetsi a bez moznosti zmenseni, pak vznika to ze se na displej nezobrazi moc věci a je to neprehledne. Proto za me lepsi když je vse mensi a clovek vice vidi a detaily si v pohode priblizi jak potřebuje.

2016-05-27 21:31:43

udm: Já mám na mobilu uriznuty spodky vět v hlavní nabídce u posledních diskusi v seznamu chromu i opeře lenovo p70

2016-05-27 22:10:46

udm: je to doplněk do Mozilly: http://pearlcrescent.com/products/pagesaver/

většinu stránek to uloží celou, ale někde jenom viditelnou část jako při použití Prt Sc. A taky zvolený výřezy atak, šikovná věc

2016-05-27 22:41:32

sponge: ja to mam na mobilu taky rozsekane

NO_HITS  
Laďa
2016-05-28 07:13:46

Pri otočení na bok se zobrazí napevno menu a vlevo je pak níž nevyužitej prostor www.nissanclub.cz/forum-tema/videa-52955?select=308548#message308548


Odpovědět

1  2