Aka je idealna sirka webu? 1100 px?

Můžeš se inspirovat třeba u Bootstrapu

it47:
Ideální je podívat se do statistik a podle toho se rozhodnout, na jakou šířku primárně cílit. Hádám, že většinou to bude něco kolem 1360px.

Bootsrap má default container size 1170px ak sa nemylim

blaaablaaa:
„Hádám, že většinou to bude něco kolem 1360px.“
Sotva, uživatelia macbookov by z takej stranky veľa nemali :)

jefitto44:
Pokud jde o retinu, tak je tam jiné pixel ratio, ne? Takže nechápu, co tím myslíš.

jefitto44:
„uživatelia macbookov by z takej stranky veľa nemali :)“
Mám 13" macBook (ne letošní) a rozlišení necelých 1400px. 13" MacBook 2019 má rozlišení 2560px, což se pro web tváří jako 1280px.

Kdo má větší MacBook, nebude mít stránku peřs fullscreen, navíc tam je nutné počítat s odlišným pixel ratio. Kdo má menší, stránka bude samozřejmě responsivní, čili se přizpůsobí.

Kde je problém?

Zdravím, it47:
Já osobně bych zvolil maximální šířku klidně i 1600px (vzhledem k 4K monitorům). Odstupňoval bych to od nějakých 300px (mobilní) nahoru až do těch 1600 po +- 250px (to je na tobě) na jednotlivé velikosti (anglicky nazývané UX designery jako breakpointy).

Nebo to nech plně responzivní s tím, že bude opravdu omezená jen minimální a maximální šířka. Minimální šířka by dnes měla stačit těch 300px úplně v pohodě.

PS: U nás na projektu používáme spodní limit 320, horní 1200 (cca, přesně si nepamatuji)
PS2: Asi bych se nakonec inspiroval příspěvkem [#2] od T-fona. Přibližně to sedí na PS o řádek výše.

Já to vždy rozseknu na 1024. Tedy pokud je zařízení pod 1024, tak dostane mobilní web. Pokud je nad 1024, tak dostane desktopový web.

- Mobilní web dělám tak, aby nejlépe vypadal 320 - 380px.

- Desktopový web dělám tak, aby nejlépe vypadal 1280 - 1366px.

andynewcastleth:
„Tedy pokud je zařízení pod 1024, tak dostane mobilní web.“
To jako fakt?

Sorry, ale přijde mi nesmysl servírovat totéž zařízení s 320px šířky a zařízení s 1024px.

it47:
Maximální šířka nemusí být omezená, záleží na konkrétním projektu. Problém nebývá se šířkou stránky, problém bývá s texty. Pokud můžeš pro velká rozlišení použít dostatečné velké písmo, tak je to celkem jedno. Případně na velkých rozlišeních můžeš pracovat s grafikou, bloky, atd. přes 100%, ale texty mít užší. Roli u textů nehraje šířka bloku, ale délka řádku, která by měla být nějakých 100-120 znaků max.

Tomášeek:

1024 ještě stále dostane desktopový web.....

Co jsem se díval na statistiky tak z hlavy je to nějak takto:

320 - 400px: 70% lidí
400 - 1023px: 2% lidí
1023 - 2000px: 28% lidí

Kdybych tady vyvíjel Youtube nebo Google, tak by jsem se tím možná zabýval. Ale v mé situaci v noci velmi klidně spím i když vím, že 400px - 1023px dostávají mobilní web.

andynewcastleth:
Jenže se se nebavíme o rozlišení monitoru, ale o rozlišení okna, ve kterém je web otevřeny. Navíc do pásma 400-800px spadá většina tabletu, telefonu na šířku, ...

Ale dělej si co chceš. Snad si za to neberes peníze od nebohych klientů :-) Mimochodem, pokud někdo má rozlišení 1024, tak plocha pro web je menší minimálně o posuvnik (a css šířka je tam tedy pod 1024). Kdo chce kam, ...

Tomášeek:
„Navíc do pásma 400-800px spadá většina tabletu, telefonu na šířku, ...“

No vidíš. Dotyková zařízení. Tedy jim naservíruješ mobilní web... . Co jiného by jsi jim chtěl servírovat?

„pokud někdo má rozlišení 1024, tak plocha pro web je menší minimálně o posuvnik“

bavíme se všeobecně, ne o konkrétním řešení....to je jak se hádat o gramatické chyby v příspěvcích....

andynewcastleth:
Je rozdíl web na výšku a šířku - na výšku dám formulářová pole pod sebe, na šířku některá vedle sebe apod.
Většinou je mobil na výšku do 480px, na šířku pak do 900px.
Dotyková zařízení můžeš taky detekovat přes media queries a hover/pointer - caniuse.com/#feat=css-media-interaction

andynewcastleth:
„No vidíš. Dotyková zařízení. Tedy jim naservíruješ mobilní web... . Co jiného by jsi jim chtěl servírovat?“
Bez komentáře. To je jak házení perel... Dělej, jak myslíš, doufám, že ne za peníze.

Tomášeek:
Myslím, že je jedno, jak to řeší. :) Ty na tom stejně nic nezměníš. Hodně záleží na obsahu stránky a na tom, jak moc je vlastně design pro mobily odlišný od designu pro PC. Jen tak pro info můj mobil když zobrazí web na šířku, tak okno má 892px. Nechal bych mobilní zobrazení na základě user agenta.

TomasJ:
www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome

blaaablaaa:
To čím to chce nahradit se od user agenta zase až tak moc neliší. Navíc mobil by se z toho měl nechat poznat dokonce snadněji.

Keeehi:
Píšou tam, že by snad mohl vytvořit nějaké identifikátory pro mobilní a desktopové zařízení, takže paráda. Jen jsem tím chtěl říct, že bych se podle UA raději neřídil, když existují jiné možnosti.

it47:
Môžeš to celé postaviť ako bežný web pre bežné fullHD rozlíšenie. Postupne cez media zápisy zmenšovať a prispôsobovať pre mobily a postupne obsah rozťahovať a zväčšovať písmo pre monitory s väčším rozlíšením pomocou opačných media deklarácií: @media (min-width: 1920px).