Responzivní web jak jej navrhnout

MartinM_93:
Nejsem nějaký odborník, ale pro začátek bych si nakreslil skeče, jak by mohlo být rozvržení na různých zařízení (počítač, televize, tablet, mobil). Podle nich potom strukturovat a stylovat kód stránek. Jestli jsou to stránky pro firmu, asi budete potřebovat subdoménu m.vase-firma.cz. Ta je pro smartfony a tablety. Pro desktopové prohlížeče slouží normální doména firmy. Jak to je pro televize, nevím.

Reaguji na CZghosta:
Resposivní design nespočívá v odlišných subdoménách (a zdrojovém kódu) pro každý typ zařízení, ale naopak pouze v přepsání potřebných stylů v závislosti na velikosti zařízení.

MartinM_93:
Tu máš stránku, ktorá hovorí o tom na čo myslieť na začiatku.

Ak ešte trochu pogúgliš, určite nájdeš množstvo podobných zdrojov, ako aj spôsob zapisovania do kódu.

Fisir:
Výhodou mobilní domény je, že můžeš oddělit mobilní verzi stránek od desktopové (bude se vypisovat stejný obsah, ale rozložení bude jiné). Nevýhodou je, že je k tomu potřeba trochu PHP pro výpis obsahu a ošetření na všech zařízeních (počítač, tablet, mobil).
Responsivní design má tu výhodu, že není potřeba PHP ani jiných skriptů pro vykouzlení mobilní podpory, jenže jsou to desítky řádků kódu navíc. Špatně jsem formuloval odpověď, měla znít: pro firemní stránky by bylo lepší zřídit mobilní subdoménu.

Řeší to tak spoustu velkých firem (například O2). Naopak pro osobní projekty je lepší právě responsivní design na jedné doméně (tak to řeším třeba já).

CZghost:
Nesouhlasím s tvou výpovědí. Rozdíl mezi firemními a nefiremními stránkami je v tom, že na firemních jsou uvedené fakturační údaje. S použitými technologiemi to nemá nic společného.

Reaguji na CZghosta:
„jsou to desítky řádků kódu navíc“
A zvláštní šablona pro mobilní zařízení ne? Takto navíc můžeš pouze přepsat to, co se má přeskládat a zbytek nechat.

„například O2“
Připadá ti mobilní portál O2 jako moderní web? (Pokud tedy předpokládám, že tazatel chce jít s dobou.)

Fisir:
„Připadá ti mobilní portál O2 jako moderní web?“
O2 jsem uvedl jako příklad (vím, že tam je mobilní portál, ale nikdy jsem na něm nebyl). Takových webů je více. I Wikipedie má svoji mobilní verzi. (Doporučuju se na ní podívat na mobilu, v počítači to vypadá odporně, roztažená mobilní verze zkrátka nevypadá moc dobře). Mobilní Wikipedie navíc vypadá k světu.

„Takto navíc můžeš pouze přepsat to, co se má přeskládat a zbytek nechat.“
Tohle jsem nepochopil. Co můžu přepsat, přeskládat, nebo co jsi tím vůbec myslel? Šifrování už vyšlo z módy ;-)

Reaguji na CZghosta:
„Co můžu přepsat, přeskládat, nebo co jsi tím vůbec myslel?“
Chceš přebarvit odkaz. Responsivní design: ve verzi pro mobily pouze přidáš padding, aby se dalo lépe klepnout. Oddělená mobilní verze: nadefinuješ barvu a padding, ve verzi pro počítače definuješ tu samou barvu (dvakrát to samé).

„O2 jsem uvedl jako příklad […] Mobilní Wikipedie navíc vypadá k světu.“
Když O2 a Wikipedie, tak my taky?

CZghost:
„Šifrování už vyšlo z módy“
Bez urážky, ale, čo to trepeš? Fisir to napísal správne...To ty by si si mal naštudovať, ako funguje responzívny dizajn.

MartinM_93:
„ale když budu chtít něco změnit budu to muset měnit na dvou místech to se mi nelíbí.“
To je správny postreh, veď o to aj v responzívnom dizajne ide. Nie je tam nutnosť prerábať HTML.

Tento web, relatívne stručne hovorí o používaní a zápise podmienok responzívneho dizajnu do CSS alebo HTML kódu.

MartinM_93:
„ale když budu chtít něco změnit budu to muset měnit na dvou místech to se mi nelíbí.“
Pokud to bude řešené databází, tak stačí změnit obsah na jednom místě a projeví se to na obou.

Pokud ti záleží na běhu serveru a chceš vyzkoušet reálný responsivní design na jedné adrese, potom znáš postup.
Ale bude to chtít prozkoumat více návodů a to ve více jazycích (nejenom ty české).

CZghost:
„Pokud to bude řešené databází, tak stačí změnit obsah na jednom místě a projeví se to na obou.“
Ale musíš na dvou místech pracovat s aplikací, která tou databází disponuje.

MartinM_93:
Všetko smeruje späť k názvu vlákna. Obišli sme rôzne možnosti a vyšlo najavo, že najlepšia cesta vedie priamo cez responzívny dizajn.

Ako ho navrhnúť?
V prvom rade potrebuješ HTML urobiť tak, aby sa pri malom rozlíšení dala skryť navigácia, dynamicky sa meniaca šírka hlavného obsahu sa dá urobiť pomocou min a max-width - aj bez resp. dizajnu - a jednotlivé divy nechať plávať pomocou vlastnosti float.

Ako by mal responzívny web vyzerať?
Ak si nevieš predstaviť ako by mal web vyzerať, existuje spústu návrhov, ale niekedy pomôže stará dobrá ceruzka a papier. Pochybujem, že ti tu niekto vytvorí návrh na mieru, tieto veci skrátka musíš zvládnuť sám. Google obsahuje dostatok príkladov, stačí hľadať.

Konkrétnejšie sa môžeme baviť, až keď uvedieš tvoje predstavy a zveríš sa tu s problémom.

CZghost:
Zrovna na začátku roku jsem četl nějáký webdesignerský článek nazvaný "10 věcí, které by z webdesignu v roce 2014 měli zmizet." A byly tam zrovna uvedeny tzv. m.dot stránky (mobilní subdomény). Nevím, k čemu si zbytečně komplikovat práci děláním dvou verzí webu jenom proto, aby to fungovalo i na mobilu, když dneska se to dá napsat přímo v CSS a přepíšeš jenom to, co potřebuješ.

Na mobilní verzi stránek není nic špatného. Naopak jsem rád, když si sám můžu vybrat, kterou verzi chci používat. Responzivní design, který je víceméně stejný pro desktop i tablety a mobily má své místo, ale rozhodně nebude vhodný pro všechny weby a aplikace. Mobilní i nemobilní verze jde snadno udělat tak, aby se jen vyměnily soubory s hlavičkou/patičkou nebo dokonce jen CSS pomocí PHP. A kdyby nebylo k dispozici, šlo by to zbastlit i v Javascriptu (což není nutně dobré řešení). Už jsem viděl i dost responzivních designů, které se snaží být za každou cenu vhodné pro každé zařízení, a ve výsledku jsou hůře použitelné všude.

Podle toho co MartinM_93 píše usuzuji, že pro něj klasický responzivní design skutečně bude vhodnější. Pak bych mu možná doporučil vzít si nějakou stávající, funkční responzivní design, podívat se, jak je to tam udělané, a podle toho navrhnout svůj design. Takovou nejjednodušší verzi uděláš asi tak, když máš prostě jeden velký kontejner, který má nastavenou automatickou šířku (ale i nějakou maximální; dlouhé řádky se špatně čtou) a nahoře nějaké menu s větším paddingem. V případě potřeby je možné přidat styly specifické třeba pro menší displeje, které zvětší písmo nebo tak něco, ale nemělo by to být potřeba.

Zechy:
Malé projekty, když chtějí mít flexibilnější design, využijou responsivní design. Jedná se o osobní webovou prezentaci, kdy jsou stránky umístěné na nějakém ne zvlášť výkonném serveru. Teď Amunak napsal, že stačí jen vyměnit CSS pomocí PHP nebo dokonce JS a to podle domény. Velmi výkonné servery, které mají větší firmy, mohou klidně provozovat i mobilní subdoménu, ten server to prostě utáhne.

Já mám malý osobní projekt na doméně třetího řádu, na IC.cz, navíc servery moc nešlapou. Tam využiju responsivní design, který je jasnou volbou pro nepříliš výkonný server, kde většinou malé projekty, jako je můj, jsou uložené.

Je dobré odlišit od sebe mobilní a desktopový design stránek adresou, bohužel ne všude se to dá provést.

Reaguji na CZghosta:
:-) Ehm, obávám se, že z výkonnostních důvodů to není. Provozování subdomény není nijak zvlášť náročné (ano, těch pár konfiguračních řádků v DNS a VirtualHost zabere místo), takže je to jedno.

„Je dobré odlišit od sebe mobilní a desktopový design stránek adresou“
Subjektivní názor. Já třeba nemám rád, když si mě stránka (především na mobilu) přehazuje mezi subdoménami.

MartinM_93:
To, že mobilní verze používá jiný vzhled neznamená, že tam chybí půlka věcí. Stačí pořádně hledat a najdeš, co ti chybí. Typickým příkladem je mobilní Gmail, zprvu jsem nevěděl, kde je tlačítko na novou zprávu, pak jsem ho objevil pod ikonou tužky. Mobilní web má za úkol zredukovat design na nejpoužívanější prvky, což v případě Gmailu jsou základní operace s klientem: čtení pošty, odpovědi, přeposílání a nová zpráva. Určitě nebudu na mobilu spravovat složky a štítky, třebaže to tam taky jde. S resposivním CSS to lze do určité míry i simulovat, ale není nad to, když můžu plně kontrolovat, co se zobrazí na počítači a na mobilu. To je zase tvůj názor nejspíš především proto, že na mobilu nejseš příliš často a tudíž si nedokážeš zvyknout na zúžené prostředí.

Fisir:
„Subjektivní názor. Já třeba nemám rád, když si mě stránka (především na mobilu) přehazuje mezi subdoménami.“
To je také tvůj subjektivní názor. Ano, každý má určitý názor. Je to tvůj názor, já ti ho neberu. Názor je ostatně sama od sebe subjektivní záležitost, takže takový slovní obrat je podobný výrazu mokrá voda. Jak už jsem psal výše, stačí si zvyknout. Nebo ti něco chybí i tady na diskusi? To by potom byl problém :-)

Reaguji na CZghosta:
„To je také tvůj subjektivní názor.“
Ale jasně odlišitelný („Já“), na rozdíl od tvrzení „Je dobré odlišit od sebe mobilní a desktopový design stránek adresou“.

„Nebo ti něco chybí i tady na diskusi?“
Nějaké přepínátko pro zrušení automatického přidávání do sledovaných.

CZghost:
„Velmi výkonné servery, které mají větší firmy, mohou klidně provozovat i mobilní subdoménu, ten server to prostě utáhne.“
Mýlíš se. Provoz subdomény je levnější - na malá zařízení se neposílají prvky, které se skryjí (v případě HTML) nebo přebijí (v CSS). U většiny webů jde o zanedbatelnou hodnotu. (Protože většinou se zařízení pronajímají za paušální částku.) Je však o mnoho řádů vyšší než systémová náročnost způsobená provozem subdomény. Proto zmiňovat výkonností náročnost je dost mimo. Než stihneš mrknout, tvůj server provede milion takových „přesměrování“.

„Je dobré odlišit od sebe mobilní a desktopový design stránek adresou“
Kdyby to bylo takto jednoznačné, responsivní design by se nikdy nebyl prosadil. Dávno by byl zmizel v propadlišti dějin.

„S resposivním CSS to lze do určité míry i simulovat, ale není nad to, když můžu plně kontrolovat, co se zobrazí na počítači a na mobilu“
A předpokládáš, že vývojáři tuto metodu používají právě proto, aby nad zobrazováním ztratili kontrolu. To mi smysl nedává.

„Mobilní web má za úkol zredukovat design na nejpoužívanější prvky“
Není to tak romantické, jak by se mohlo zdát. Mobilní verze na subdoméně může dělat i jen velmi prostou věc - zařízení posílá jiný stylopis. U responsivního designu má klient (myšleno prohlížeč uživatele) k dispozici obě verze stylopisů a volí si mezi nimi sám na základě aktuálního rozlišení bez použití dalších technologií.
Z úsporných důvodů můžeš na mobilní doméně pracovat s ořezanou verzí aplikace, avšak to není povinné.
Máš pravdu, že mobilní web tvořený subdoménami se snaží nabídnout design takový, aby se na mobilním zařízení dobře ovládal. Responsivní web ale dělá totéž.

Ušetříte si zbytečné dohady, pojmete-li za svou myšlenku, že každý tu (až na vyznačené úseky) vyjadřuje svůj názor.

Reaguji na CZghosta:
„Je dobré odlišit od sebe mobilní a desktopový design stránek adresou“
Fakt? Proč? Mně to přijde jako ta největší vada mobilních verzí stránek. Pokud mě někdo odkáže na nějaký obsah, chci ho mít dostupný z mobilu stejně jako z desktopu, ne aby si mě to přehazovalo jak horký brambor (občas navíc špatně, vyhledávač mě třeba hodí na nějaký profil linkedin.com, jejich server usoudí, že mám chytrý mobil, přesměruje mě na dotykovou verzi webu, ta usoudí, že můj telefon nechce podporovat, tak mě hodí na desktopovou úvodní stránku linkedin.com…). A naopak, pokud já odkážu někoho na stránku, kterou jsem si načetl v mobilu, tak asi určitě nechci, aby sledoval mobilní verzi z desktopu.

Subdoména m.example.com má jen ten význam, že z ní uživatel může vytušit, že je na mobilní verzi, což je většinou celkem zbytečná informace (a málokdo z běžných uživatelů jí rozumí). Když už má mít mobilní verze jiné HTML, ať má aspoň stejnou adresu. Stejně by v ní krom autodetekce měl být sušenkou jištěný přepínač na nemobilní verzi… takže důležitá je sušenka, ne adresa.