PHP min. 5.6.8MySQL min. 5.1Apache min. 2.0
PHP-Fusion 9 Jádro
v9.0
Český překlad
Pravidelně aktualizovaný

Technologie

Jaký design webu vlastně vyrobit?

Webdesigneři to dnes nemají lehké. A ani nebudou mít v budoucnu. Do popředí se tlačí tablety a mobily, a tak naše weby, které vytvoříme, si musí s ními tykat. Mobily se totiž pomalu a jistě stávají hlavním přístupovým zařízením pro všechny weby. A ty kódére se snaž! Musíme tedy vzat v potaz, že mobily mají malý displej, slabý procesor. range'>Proto bychom měli začít vyrábět nový web nejprve pro málo vybavené mobily. Počítá s tím naštěstí už modul Responsive i Mobile First. Pro ty nejjednodušší weby/bloky si vystačíme s návrhem Zeldmanova Mobile Only.


Webdesigneři to dnes nemají lehké. A ani nebudou mít v budoucnu. Do popředí se tlačí tablety a mobily, a tak naše weby, které vytvoříme, si musí s ními tykat. Mobily se totiž pomalu a jistě stávají hlavním přístupovým zařízením pro všechny weby. A ty kódére se snaž! Musíme tedy vzat v potaz, že mobily mají malý displej, slabý procesor. range'>Proto bychom měli začít vyrábět nový web nejprve pro málo vybavené mobily. Počítá s tím naštěstí už modul Responsive i Mobile First. Pro ty nejjednodušší weby/bloky si vystačíme s návrhem Zeldmanova Mobile Only.

O vývoji nových webů píše podrobněji Martin Michálek v článku: Zdrojak.cz/Zeldmanův mobile only. My se ale budeme držet vývoje pro složitější obsahy webů, které musíme vyvíjet pro desktopy a další podobná zařízení. Otázka proto zní, jak velký by měl takový web být. Lze najít kompromis?

Velikost zobrazení - rozlišení

Nová verze PHP-Fusion 9.0xx, jejíž redesign je před spuštěním také na našem serveru pc-politika.cz, se proto drží zásady - mít naprogramovaný obsah pro mobily, tablety a desktopy. Zásadním problémem je proto velikost zobrazení webové stránky. Rozhodující je zde šířka rozložení webu. Analýzy říkají, že nejčastějším rozložením obsahu webové stránky je v roce 2015 rozlišení 1366 × 768 pixelů. Proto v prvním kroku vývoje je nutné omezit vícesloupcový layout webu. Jak jsem už zmínil pomocí responsivního designu lze vyrobit web, aby se optimálně zobrazoval na všech aktuálně dostupných zobrazovacích zařízení.

Já jdu na problém podle kopyta, že při kvalitní čitelnosti textu o velikosti 13 px, při tvorbě webu nedovoluji, aby řádky byly delší než 80 znaků. Při přepočtu to představuje zhruba 600 pixelů. Připočtu-li k tomu pouze dva sloupce, rozhodně si vystačím s celkovými 1.300 px stránky webu.

Ukázka responsivního kódu pro centrální sloupec (AU_CENTER)

// row 1 - go for max width
	if (defined('AU_CENTER') && AU_CENTER) echo "
\n
/div<\n>/div>";

V ukázce je vidět rozvržení stránky (centrálního sloupce) s použitím responsivní mřížky. K tomu pak stačí v CSS stylech použít procenta pro maximální šířku webové stránky. Prakticky jde o úpravu jedné hodnoty CSS, např. takto:

.hlavni_ram {
  max-width: 1300px;
}

Resumé

Protože bitmapovou grafiku nelze jednoduše zvětšit nebo zmenšit bez ztráty kvality, je proto nutné dbát na správnou velikost již od začátku práce. První pravidlo pro rozlišení zní: Pracovat vždy v zobrazení 1:1 (100% velikosti). Jedině tak můžeme zjistit, jak bude web (jeho obsah, včetně obrázků) skutečně vypadat. Webovou stránku lze tvořit jako plovoucí (velikost stránky se přizpůsobuje velikosti obrazovky), nebo jako stránku s pevnou šířkou, tzn. šířkou zadanou přesnou hodnotou v pixelech. Využívám první způsob. Podle tohoto doporučení se webová stránka automaticky přizpůsobí velikosti displeje vašeho monitoru (dostupnému místu). Nejvýhodnější je proto používat rozlišení 1 366 × 768.
Kvido 28.09.2015 00:02 286 0 komentářů

0 komentářů

Zanechat komentář

Přihlaste se, abyste mohli zveřejnit komentář.
  • Žádné komentáře byly zveřejněny.
Nejnovější témata fóra
  Vlákno Zobrazení Odpovědi Poslední příspěvek
Orázky - kategórie a ostatn...
v Administrace obsahu
4 0 Balin50
18-08-2018 14:02
Novinky
v Bugy a chyby
341 23 Balin50
17-08-2018 15:23
Upgrade 17.3.2018 - AdminLTE
v PHP-Fusion 9.0.3
27 2 Kvido
17-08-2018 13:54
Administracia
v Administrace uživatelů
66 3 RobiNN
17-08-2018 11:43
bugy v 9.0 - 27.4. 2017 (up...
v PHP-Fusion 9.0
413 26 RobiNN
17-08-2018 11:37
tabulka pre mobilnu verziu
v Pomoc
62 2 jany
14-08-2018 14:40
odstranenie panelov [Vyřeše...
v PHP-Fusion 9.0.3
375 16 jany
14-08-2018 13:51