Responsive Layout – první web

Jakub Weber

(4 hodnocení)

7. 8. 2012 23:15:58

Ahoj,

rozhodl jsem se, že v časech volná si konečně udělám nový web, jelikož ten starý je hodně starý a neaktualizovaný.

Chtěl bych poradit ohledně responsive layoutu, jelikož jsem se rozhodl, že to pro svůj web poprvé použuji.

Na web se nekoukejte, nic tam není, jde mi jen čistě o css a jeho media queries.

Zkoušel jsem to na svém iPhonu 4S a iPad 3, ale nejsem si jistý jak to bude vypadat na iphone 2G/3G/3GS jelikož mají menší rozlišení.

Url: http://jakubweber.cz/data/web/

7. 8. 2012 23:15:58

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793982

Filip Masura

(12 hodnocení)

7. 8. 2012 23:36:16

Poviem ti to takto: Budeš rád keď tam budeľ mať 5 UIP z PC nie tak z iPhonov :) Je to len portfolio :) Ak chceš, tak sa ti na to môžem pozrieť z bráchovho 3gska :)

7. 8. 2012 23:36:16

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793981

Jakub Weber

(4 hodnocení)

7. 8. 2012 23:44:09

o to mi ani tak nejde, jde mi spíše o to, že je to možnost kde se to naučit. To že tam budu mít málo přístupu, a ještě k tomu z PC např. je jedno. Takhle to vypadá na iPhone 4S, předpokládám, že to bude vypadat stejně i na iPhone 4. A doufám že i na 2G/3G/3GS :) iPhone http://sdrv.ms/P4o7dj a takle na iPadu http://sdrv.ms/MrNnEI

7. 8. 2012 23:44:09

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793980

Robert

(8 hodnocení)

8. 8. 2012 00:09:50

Nejjednodušší je nainstalovat si do Firefoxu addon Web Developer a přednastavit si rozlišení jednotlivých zařízení (záložka Resize). A můžeš vesele testovat na PC.

Samozřejmě ke složitějším věcem (např. javascriptu) už ty zařízení potřebovat budeš.

8. 8. 2012 00:09:50

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793979

Jan Kaiser

(3 hodnocení)

8. 8. 2012 00:31:57

ted na to koukam na nokii c7 a musim scrollovat asi o 100% do strany ;)

8. 8. 2012 00:31:57

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793978

Jakub Weber

(4 hodnocení)

8. 8. 2012 07:01:40

Nokia c7 má jen 360px na šířku, tedy 640 × 360 px. Nicméně do Nokie C7 portrait by se to vlézt mělo. Taková menší pomůcka - http://www.responsinator.com/?url=jakubweber.cz/data/web či http://screenqueri.es/ . Záleží zda je to čistých 360px viewportu. Podle css by se tam mělo vlézt i na displayi s 320px na šířku, menší už ne.

8. 8. 2012 07:01:40

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793977

Pseudonymni ucet c. 9312

(9 hodnocení)

8. 8. 2012 07:52:50

Jen tak pro zajímavost zkus http://www.responsinator.com

EDIT: Tak mě holomek předběhnul, jsem v tom textu ani nezaregistroval odkaz na toto ;)

8. 8. 2012 07:52:50

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793976

Jakub Weber

(4 hodnocení)

8. 8. 2012 07:53:56

Viz #6 :) ale Díky

8. 8. 2012 07:53:56

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793975

Václav Bedřich

(34 hodnocení)

8. 8. 2012 09:12:46

No škoda, že sis ještě nepohrál i s textem a dalšími elementy, tohle jsou jen boxy co se hází pod sebe.

8. 8. 2012 09:12:46

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793974

Jakub Weber

(4 hodnocení)

8. 8. 2012 09:21:35

Jo to můžu udělat kdykoliv později, např. pokud je to logo nahoře nad čtverci, tak může být zarovnané vlevo a text vpravo a ne pod sebou jako je při vetším rozlišení.

8. 8. 2012 09:21:35

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793973

Václav Bedřich

(34 hodnocení)

8. 8. 2012 09:30:35

Pri inspiraci co vše můžeš zkusit :-) http://vasterad.com/themes/?theme=sensation

8. 8. 2012 09:30:35

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793972

Jakub Weber

(4 hodnocení)

8. 8. 2012 09:35:32

Já chápu co myslíš Vašku. Spíše by mě zajímalo jaké nastavení media queries používáte, podle jakého pravidla? kolik "dimenzí"? Jaké je nejlepší nastavení aby to pokrylo co nejvíce možných rozlišení apod. :) Apod.

ten můj web zamýšlím hodně minimalisticky, takže tam nebude moc co upravovat jako u toho tvého odkazu, horší to bude se složitějším webem :)

EDIT: přidal jsem dnes ještě "killer" featuru a to že na iPhonu se schová adresní řádek po načtení. Zvětší se tím místo pro zobrazení, bez nutnosti rolovat. + další úpravy.

8. 8. 2012 09:35:32

https://webtrh.cz/diskuse/responsive-layout-prvni-web#reply793971

sakurka2