Autor | Zpráva | ||
---|---|---|---|
it47 Profil |
#1 · Zasláno: 13. 1. 2020, 17:36:28
Ahojte,
planujem redizajnovat starsi web, ktory ma na desktope sirku 900px. Chceli by sme rozsirit web na nejaku idealnu sirku, zatial sa mi najviac pozdava sirka 1100 px. Co si o tom prosim myslite? Aka je v sucasnosti idealna sirka webu? (Web je samozrejme responzivny) Vopred dakujem velmi pekne. it47 |
||
T-fon Profil |
#2 · Zasláno: 14. 1. 2020, 07:31:31
Můžeš se inspirovat třeba u Bootstrapu
|
||
blaaablaaa Profil |
#3 · Zasláno: 14. 1. 2020, 08:17:12
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. |
||
jefitto44 Profil |
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 :) |
||
blaaablaaa Profil |
#5 · Zasláno: 14. 1. 2020, 12:18:52
jefitto44:
Pokud jde o retinu, tak je tam jiné pixel ratio, ne? Takže nechápu, co tím myslíš. |
||
Tomášeek Profil |
#6 · Zasláno: 14. 1. 2020, 12:40:46
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? |
||
TomasJ Profil |
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. |
||
andynewcastleth Profil |
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. |
||
Tomášeek Profil |
#9 · Zasláno: 16. 1. 2020, 09:31:19
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. |
||
andynewcastleth Profil |
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. |
||
Tomášeek Profil |
#11 · Zasláno: 16. 1. 2020, 09:54:44
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, ... |
||
andynewcastleth Profil |
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.... |
||
blaaablaaa Profil |
#13 · Zasláno: 16. 1. 2020, 10:20:39
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 |
||
Tomášeek Profil |
#14 · Zasláno: 16. 1. 2020, 10:51:38
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. |
||
TomasJ Profil |
#15 · Zasláno: 16. 1. 2020, 12:54:19
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. |
||
blaaablaaa Profil |
#16 · Zasláno: 16. 1. 2020, 13:10:22
|
||
Keeehi Profil |
#17 · Zasláno: 16. 1. 2020, 22:16:23
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. |
||
blaaablaaa Profil |
#18 · Zasláno: 17. 1. 2020, 08:06:47
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. |
||
Časová prodleva: 8 dní
|
|||
Tomáš123 Profil |
#19 · Zasláno: 25. 1. 2020, 13:09:57
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) .
|
||
Časová prodleva: 4 roky
|
0