Fórum - Téma


Responsivní web design


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




udm  
2016-05-24 05:33:28

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

2016-05-24 13:13:02

Zatím co jsem zkoušel, myslím že to fachá výborně. ;)

2016-05-26 08:21:39

Xpéčka: V IEx mi to nefunguje uspokojivě ani na solidstation, ani na notebooku. chrome v pohodě.

Na tabletu Android taky nic moc.

na W8 ještě nevím

udm  
2016-05-26 09:24:46

stans: testuju na PC na Windows 7 v Chrome, Firefoxu, Exploreru a Opere a vsude to funguje bez problemu. Stejne tak Android 4 i 5 v prohlizecich Internet (Samsung), Chrome, Firefox a Opera a vsude tez bez problemu (Samsung Galaxy S4 a S3). Zkousel jsem tez v prodejnach Samsung a Apple store snad na vsem krome hodinek a tez OK.

Muzes s nahrat screenshoty s popisem ktery je z ktereho prohlizece a co tam vidis za problem?

2016-05-26 10:35:16

Teď zkouším z androidu, za mně dostačující.

Btw v IE nefunguje pořádně nic. :)

2016-05-26 11:18:58

udm: v práci IEx a Crome na XPčkách

udm  
2016-05-26 16:16:26

stans: jakou verzi Exploreru máš? Já mám na Windows 7 Explorer 11 a tam mi to funguje. Budu si muset půjčit notebook od někoho, kdo má stejnou verzi MSIE jako Ty, a na tom to odladit. Jinak stejně rozpadlé to má jeden člověk na tabletu Samsung.

2016-05-26 19:35:01

udm: to zase až zítra ráno. Teď tablet prestigio a Andy 4.2.2 není špatné, ale šířka je ořízlá zprava, na některých místech se to dá posunout až doprava, ale jen někde.

2016-05-26 22:56:13

Na notebooku XP a IEx8

totéž rozhození

udm  
2016-05-26 22:57:55

stans: tomu "šířka je ořízlá zprava" ani "na některých místech se to dá posunout až doprava" nerozumím. Můžeš mi zas nahrát screenshoty?

Že to bude někde ještě zlobit (hlavně na starších prohlížečích a zařízeních), tak s tím počítám a ještě pár týdnů práce s tím bude, než se všechny chyby vychytaj.

Za ten rozpadlý design může Internet Explorer 8. To je už jisté. Ale jak upravit web, aby s tímhle šmejdským starým prohlížečem fungoval, tak to bude oříšek.

Jinak našel jsem velmi šikovnej web, kde se dá otestovat vzhled stránky pro různé verze MS Internet Exploreru https://netrenderer.com/index.php A když jsem tam zadal zobrazení hlavní stránky http://cs.jaguar-club.net/ v prohlížeči MSIE verze 8, tak to vypadá úplně stejně, jako ten screenshot, co jsi sem nahrál.

Jinak Internet Explorer 8 je už 7 let starej - byl vydanej na začátku roku 2009 a dnes už ho používá jen 5% lidí. A doufejme, že brzo už to nebude nikdo. Jinak info na Wiki https://en.wikipedia.org/wiki/Internet_Explorer_8

Tak už vím čím to je. Explorer 8 nezná CSS funkci calc() .. viz článek http://jecas.cz/calc

Bohužel nenapadá mě jak to elegantně upravit tak, aby to na tomto starém prohlížeči fungovalo. Takže holt Internet Explorer 8 a starší verze tímto prohlašuji z hlediska použitelnosti webu za nepodporované.

Ještě jsem našel tabulku zobrazující podporu CSS calc() v prohlížečích: http://caniuse.com/#feat=calc

Z té tabulky je vidět, že takto rozpadný vzhled webu bude na nepodporovaných prohlížečích:

  • Internet Explorer 8 a starší
  • Android Browser 4.3 a starší

Např. mobilní telefon Samsung Galaxy S3 bohužel má ještě Android 4.3 a tam se to též zobrazuje rozpadnuté. Naštěstí na výšku se CSS calc() nepoužívá, takže se to zobrazuje správně, ale jakmile člověk poklopí mobil na šířku, tak se to rozpadne. Naštěstí člověk si může nainstalovat prohlížeč Google Chrome a všechno mu bude krásně fungovat i na tomto starším zařízení.

2016-05-27 07:09:01

Neřeš to. Jsou to zajisté staré shity pro nové sw záležitosti a musíme s tím provozováním brzo umřít. Můj tablet je Andr 4.2.2.jak píšu. Proč se tvrdošíjně držím na starších mašinách XPéček je mj., protože mě sere ten nový "uživatelsky" friendly win8, co mi dali na loňském (!) notebooku a odmítám tam dát win10, který mi "zadarmo" nutěj a cpou do hlavy bez možnosti to odmítnout - naposledy se sám zainstaloval a až potom nabídnul návrat k w8 a sdělil "některé aplikace vám nepojedou"

udm  
2016-05-27 10:54:07

stans: nejjednodušší a nejlepší řešení je přejít na prohlížeč Google Chrome. Je ze všech prohlížečů bezkonkurenčně nejrychlejší, příjemně se ovládá a věřím, že je i nejbezpečnější. Ale je to samozřejmě zase nezvyk - člověk je zvyklej na nějaké menu a horké klávesy z jiného prohlížeče a chvíli to trvá, než si zvykne.

Tak jsem zkoušel ještě nějak udělat zpětnou kompatibilitu a zdá se, že kromě hlavní stránky, která je ještě trošku rozpadlá, tak už se to jinak zobrazuje celkem dobře (samozřejmě úplně optimální to na těch starých prohlížečích nebude). Schválně zkus. Snad se mi i tu hlavní stránku ještě povede nějak opravit. Zatím co jsem zkoušel tak nic nefungovalo, ale ještě s tím něco zkusím.

Jinak s těmi Windows XP Tě úplně chápu. Já si před 2 roky kupoval nové PC a měl jsem tam předinstalované Windows 8 a právo na downgrade na Windows 7. Okamžitě tam šly sedmičky. Win8 ani Win10 je mě nesmí. A tím, jak Microsoft zdarma donekonečna vnucuje Win10 bez jakékoliv možnost to odmítnout, tak tím spíš na Win10 nepřejdu.

2016-05-27 11:15:39

udm: Chrome v práci na xp používám, ale (svoji poštu mám na OutlookWebbApp) nechce mi to přidávat do pošty přílohy ani obrázky, oproti tomu IEx8 bez problémů ano - proto pro práci mám otevřenu poštu pomocí IEx8.

udm  
2016-05-27 11:24:33

stans: zkoušel jsi to v tom Exploreru 8 teďka po tom, co jsem to upravil?

2016-05-27 11:43:01

udm: Ano - trochu se to srovnalo, vršek stránky je plný, ale jinak to nechává nudli dolů bez ohledu na nastavení šířky stránky na obrazovce. S tím xp a IEx8 se netrap, je to neúměrné námaze.

udm  
2016-05-27 11:55:53

stans: ale jen hlavní stránka, ne? Všechny ostatní stránky by měly fungovat už celkem normálně, ne? Aspoň podle toho, jak jsem to testoval přes ten emulátor https://netrenderer.com/index.php

Viz screenshty (hlavní strana, fórum).

2016-05-27 12:19:21

udm: ano.

udm  
2016-05-27 12:31:45

stans: na hlavní stránce je u starších prohlížečů taky problém s CSS display: flex. Viz tabulka kompatibility http://caniuse.com/#search=flex Ale to asi nebude ten problém, proč je ten vzhled rozpadlý. Na to, čím to je nemůžu pořád nějak přijít, je to fakt oříšek.


Odpovědět