Ideální míry II

7.9.2005 13:17 | Přečteno: 1949× | ostatní

V prvním díle jsme si ukázali, jak se to dělat nemá , tak že by na podruhé jako Pája? Aneb Ideální rozměry webu 2.

Řešení číslo 2 reflektující některé oprávněné připomínky z minula je zcela prosté. Rozměr ohraničující oblasti je sice "fixní", ale udán v em. Je tedy závislý na velikosti písma a umožňuje tak roztahování designu podle toho, jaké má uživatel nastavené písmo.

Problém při nízkém rozlišení, kdy se při dané velikosti celý web "nevejde" na stránku pak řeší pro Mozilu (a jiné standarty implementující prohlížeče) parametr max-width: 100%. Ten způsobí, že obsah stránky "nepřeleze" její rozměry. Pro IE je pak pomocí podmíněného komentáře:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css"/>
<![endif]-->

připraven alternativní styl, ve kterém je minimální šířka webu řešena pomocí funkce expression():

    /* min-width pro IE */

#boundingbox {
    width: auto;
    width: expression(
        (document.body.offsetWidth < 820) ? 'auto' : '58em'
    );
}

Toto řešení už sice není tak sexy jako to minulé , ale zato přináší následující vlastnosti:

• Uživatel s velkým rozlišením obrazovky si může bez problémů zmenšit okno prohlížeče, aniž by tam měl nějaký zbytečný bílý pruh.
• Se zvětšením/zmenšením písma se plynule mění i design a zobrazovaná oblast ani při extrémním zvětšení textu "nepřeleze přes obrazovku" (tedy alespoň v Mozille).
• Při malém rozlišení zabírá aktivní plocha maximální možný prostor.

Ukázka, stejně jako minule, na http://straz.unas.cz.

       

Komentáře

[unchallenger]

Screenshot

Otázka je nasnadě: je toto skutečně ideální?

[Martin Tůma]

Domnívám se že ano, protože:

1. můžeš zvětšit písmo a tím se zvětší i velikost aktivní oblasti
2. můžeš zmenšit okno a tím se zbavíš toho pruhu vpravo

A když neuděláš ani jedno, je ten web stejně čitelnej a použitelnej. Rozhodně to IMHO vypadá líp, než s velikostí nastavenou na řekněme 85%

[unchallenger]

Domnívám se, že ne, protože to znamená, že je to prostě jeden z dalších webů, kam když vlezu, musím měnit velikost písma/okna browseru, jen je této nutnosti dosaženo mnohem rafinovanějšími prostředky.

[VícNežNic]

Podle mého je pevná šířka vhodná jenom když chci mít na stránce hodně grafiky

Zmenšení okna řeší problém s pruhem v prohlížeči, ale zase mám pruh mimo prohlížeč, takže si moc nepomůžu A zvětšení písma by zase rozsypalo případnou grafiku, takže nic.

[Martin Tůma]

A jak řešíte problém s délkou řádků, který jsou při vyšších rozlišeních moc dlouhý a velice špatně se pak čte text?

[VícNežNic]

Ani docela velký monitor není většinou tak velký, aby tenhle problém stačil vzniknout.

[unchallenger]

Pokud to není designed-for-MSIE s písmem velkým 5pt...

[Martin Tůma]

No nevim, mě se prostě ty řádky zdají už od 1280x1024 (a to i při použití 100% písma) dlouhý. A to nejsem na délku řádku nijak extrémně vysazenej - v LaTeXu dokonce používám ve svejch dokumentech \usepackage{a4wide}

[Michal Čihař]

1. Proč proboha tohle?

   body {
   ...
       font-size: 90%;
   }
   

   Mám nastavené takové písmo, jaké mi vyhovuje, proč mi nutíte o deset procent menší?
2. Nudle, kde se vejde šest slov na řádek je hrozně málo.
3. Banner tam leze přes logo.

[unchallenger]

Přece aby mohl řešit

problém s délkou řádků, který jsou při vyšších rozlišeních moc dlouhý a velice špatně se pak čte text

;-)

[Martin Tůma]

1. Většině "běžných uživatelů" se 16px písmo, které bývá nastaveno v prohlížečích jako výchozí (a v IE se to ani IHMO změnit nedá) zdá příliš velké. Většina serverů se kterými přijdou do styku (seznam, idnes,...) má písmo menší, které prostě líp vypadá. A protože je to právě tato většina, pro kterou je web dělán, je písmo nastaveno na 90%.
2. U sloupečku s novinkama je to celkem obviklá velikost
3. Občas se to stane, ale je to chyba Firefoxu, se kterou nemůžu nic dělat.

[VícNežNic]

Patřím bohužel mezi ty uživatele, kteří když si řeknou, že chtějí 16 bodů, tak opravdu chtějí těch 16 bodů. Asi je to nějaká úchylka. Malé písmo je otravné a nepříjemné. Naštěstí si mohu nastavit minimální velikost, čeho rád využívám.

[Michal Čihař]

Ad 1 – dokonce i MSIE se dá změnit velikost písma. Většina serverů, se kterými přijdu do styku má písmo takové jaké chci já.

Ad 2 – já mluvil o prostředním…

[Michal Čihař]

Ad 3 – aha, tak pán je chytrák a schovává reklamu pomocí CSS a to že to u flashe neprojde, mu pak rozhodí vršek webu. Co třeba dodržovat podmínky freehostingu?

[Martin Tůma]

Ale no tak, pššst! Ber to třeba tak, že když máš chybně interpretující prohlížeč, tak za trest máš reklamu ))

Nicméně tohle je problém autora (mě), ne webu jako takovýho. A fakt je, že tady se Firefox chová chybně (v CSS specifikaci jsem nenašel jediný důvod, proč by box s Flashem neměl dědit atribut visibility jako kterýkoliv jiný box...)

[Michal Kubeček]

Ad 1.: Promiňte, ale to je naprosto zvrácená úvaha. Zdá-li se jim to písmo příliš velké, ať si tu velikost nenastavují jako default. Nastaví-li si ji jako default, tak ať nedržkují. A v MSIE základní velikost písma samozřejmě změnit jde.

[Martin Tůma]

Já jsem to teda nenašel. Ne že by z toho vyplývalo, že to nelze, ale pro mě z toho vyplývá, že průměrný uživatel to taky nenajde... (pokuď teda nemyslíte velikost textu: Střední, Malé,... - o tom většina uživatelů ani neví, že to opravdu funguje, protože na webech s velikostí písma uvedenou v px to nefunguje...)

[Michal Čihař]

No když uvedeš velikost v px, tak nastavování velikosti nemůže fungovat a webmaster je další kandidát na zastřelení .

[Martin Tůma]

Problém je ale ten, že teď už je to celkem jedno. Co vím, tak většina lidí věří, že to nastavování nemá žádnej efekt. Zkusim to jednou - nefunguje. Zkusim to po druhý - nefunguje. Když přijdu na nějakej web, kde je písmo nastavený na 10px, zkusim to ze zoufalosti po třetí. Ale když mám tu smůlu, a jsem vždy na webu s písmem definovaným v px, tak jediný co z toho pro mě vyplývá je to, že to nefunguje.

Já sám jsem si to taky až do doby, než jsem na webu začal místo px používat em a % (teď doufám, že nemám v profilu kde bydlim... )) taky myslel a jen náhodou jsem na "princip" jak to vlastně je narazil až při pročítání článků o CSS... Ale jak to člověk má tušit, když v Mozille i Opeře zvětšování/zmenšování písma funguje na jakkoliv definované písmo?

[Michal Kubeček]

Měl jsem podezření už po vašem předchozím příspěvku, ale teď mám jistotu. Pletete dohromady dvě zcela odlišné věci:

1. Defaultní velikost písma. To je velikost písma, která se použije, není-li na stránce velikost specifikována. Také se použije jako hodnota, pokud je (základní) velikost písma na stránce definována pomocí procent (nebo em, což je vlastně totéž). Tato základní velikost se dá nastavit ve všech mně známých prohlížečích včetně MSIE. Na zobrazení stránek, které velikost písma specifikují (ať už v px, pt nebo třeba in) ale samozřejmě nemůže mít vliv.

2. Zvětšování písma na už zobrazené stránce, tj. to, co např. ve Firefoxu uděláte pomocí Ctrl-+. To funguje bez ohledu na to, zda a jak je v HTML/CSS velikost písma specifikována. Pouze v MSIE z nějakých důvodů usoudili, že písmo, jehož velikost je na stránce specifikována v jednotkách px, se tato funkce vztahovat nebude.

[Martin Tůma]

Měl jsem také to podezření, že vy o voze a já o koze... ale nastavení výchozí velikosti písma ve smyslu 1) stále, i přes zběsilé procházení všech možných i nemožných menu IE, nemůžu najít... Poradíte?

[Michal Kubeček]

Samozřejmě že to nemůže fungovat. Defaultní velikost písma je defaultní právě proto, aby se použila tam, kde stránka velikost nespecifikuje. Aspoň takhle slovo defaultní chápu já…

[Zdeněk Štěpánek]

Zdravim

diskuzi jsem sice necetl, ale naprosto "genialni" web je tenhle, funguje i na PDAcku

http://www.misajadrna.com/

Zdenek