it-swarm-eu.dev

Jeden web pro více řešení klienta

Stále si myslím, že ačkoli vytvoření jediného webu pro více rozlišení klientů nebo velikosti obrazovky může být těžká práce, je to mnohem lépe udržovatelné než vytvoření samostatného webu pro každé zařízení nebo rozlišení.

Jaký design nebo aplikace pro úpravy webových stránek, pokud existují, mohu použít k vytvoření konkrétní CSS nebo dokonce k označení cílových zařízení dané velikosti?

6
Bernhard Hofmann

Dreamweaver CS5 má podporu mediálních dotazů HTML 5, které vám umožňují používat specifické rozlišení CSS a náhledu na obrazovce. To je jediný, kdo přijde na mysl, ale nikdy jsem neměl rád Dreamweaver a nedoporučoval bych to.

2
fluxd

Jednotný web pro více klientů je určitě spravovatelnější.

První věc, kterou musíte udělat, je mít více souborů CSS, které prohlížeč vyzvedne podle atributu media :

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Můžete upravit rozvržení prvků, jejich velikost a dokonce i některé z nich skrýt pro menší zařízení.

Pokud musí být velké části rozvržení odizolovány na malých zařízeních, je lepší je odstranit na serveru a ušetřit tak určitou šířku pásma.

Rozlišení obrazovky a velikost okna lze zjistit na klientovi v Javascriptu (to je nejspolehlivější, test screen.width/screen.height a document.body.clientWidth/document.body.clientHeight), zatímco na serveru se musíte většinou spolehnout na HTTP_USER_AGENT záhlaví (vyzkoušejte zde spolu s dalšími záhlavími).

Další důležitou technikou je opustit používání HTML tabulek pro rozvržení stránky ve prospěch plovoucí bloky , které se lépe přizpůsobí různým rozlišením obrazovky nebo změně velikosti okna.

Dbejte také na skutečnou velikost obrazovky, protože malá zařízení mají tendenci mít mnohem vyšší rozlišení (DPI, Dots Per Inch), díky čemuž jsou věci nečitelné.

Aby bylo dosaženo co nejlepších výsledků, je třeba obě techniky kombinovat (na straně klienta i serveru). Příklad Responsive Web Design je působivý, ale k dosažení tohoto cíle musíte opravdu zvládnout techniky a stále existují omezení.

Domnívám se, že tato otázka, i když je položena kvůli novým připojeným mobilním zařízením, by měla být považována za počítač, protože uživatel může změnit velikost okna prohlížeče.

5
Mart

Toto je must-see prezentace, která pokrývá nedostatek způsobu, jakým mnozí používají mediální dotazy: Přehodnocení mobilního web .

Stručně řečeno, mobilní telefony, které nepodporují dotazy na média (a jich je spousta), mohou skončit stylem určeným pro prohlížeče stolních počítačů. Zde doporučený přístup, který používám já, začíná u základních stylů pro všechny a poté postupně přidává styly pro prohlížeče, které podporují mediální dotazy.

Viz moje odpověď na související otázku na Stack Overflow .

3
David Oliver

Pro to nebude fungovat pouze CSS, protože pro mobilní uživatelské rozhraní a pro PC/Mac můžete mít velmi odlišné rozvržení. Jen malý nápad spočívá v rozvržení na straně serveru. Například musíte vykreslit určitou část stránky (datová mřížka, postranní lišta, navigační lišta atd.). Například používáte ASP.NET jako procesor na straně serveru. Poté v rozložení stránky píšete:

Pro navigační lištu:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Pro datovou mřížku:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Pak v Codebehindu:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

a tak dále.

Pak musíte psát různé vykreslovače pro různá rozlišení (mobilní/atd ...). * Pro velké rozlišení vykreslíte záhlaví záhlaví, vyhledávače, filtry, třídiče, posouvatelný obsah, pluginy JQuery atd. * Pro malé rozlišení vykreslíte pouze jednoduchý html.

Doufám, že hlavní myšlenka je jasná.

0
Genius

Nepotřebujete více „webových stránek“ pro různé klienty (nemyslím si, že by to někdo udělal), ale měli byste mít více portálů pro různé segmenty návštěvníků, např .: desktop/notebook, netbook/ipad/chytré telefony a další mobilní, pohybliví.

Zatímco CSS umožňuje určit různé stylové listy pro různé typy zařízení, v praxi je to problematické. Mnoho chytrých telefonů nebere mobilní šablonu stylů nebo používá mobilní šablonu stylů a šablonu stylů obrazovky.

Za druhé, vaše různé segmenty publika budou hledat různé informace. Například mobilní uživatel pravděpodobně nebude mít zájem číst dlouhé články nebo prohlížet obrázky nebo video ve vysokém rozlišení. Samostatný portál s cíleným uživatelským zážitkem by tedy byl optimální, a proto většina populárních služeb nabízí samostatné portály pro mobilní uživatele.

Zatřetí, udržovatelnost je o organizaci a jednoduchosti více než o množství. Jistě, mohli byste mít jednu velkou šablonu stylů, která by pomocí spousty kaskádových a prohlížečových hacků obtěžovala vaše hlavní stránky všem klientům. To však bude pravděpodobně obtížnější udržovat než udržovat 2-3 jednodušší šablony stylů, z nichž každá je přizpůsobena konkrétní třídě klientů.

A konečně, pokud je vaše aplikace správně modularizována pomocí izolace domény a navržena s oddělením zájmů, mělo by být docela snadné nastavit nové vlastní portály přizpůsobené pro různé třídy zařízení. Pokud používáte vzor MVC, pak stačí přidat nové pohledy a nadále používat stejné modely a řadiče. Pokud vyvíjíte aplikaci AJAX), můžete většinu zobrazení dokonce znovu použít vytvořením webových služeb.

0
Lèse majesté

Závisí to na vašem obsahu, ale můžete svůj obsah modularizovat.

Každý prvek obsahu by mohl být zobrazen v úzkém modulu, který by mohl být zobrazen ve třech sloupcích na široké obrazovce, pro nižší rozlišení byste mohli použít méně sloupců.

Dobrým příkladem je: http://colly.com/ Existují tři úpravy rozvržení, když zmenšujete šířku stránky. Pokud použijete toto vodítko pro svůj vlastní web, můžete navrhnout rozvržení jednotlivých modulů a stránek se 3 variantami, které vyhoví každé z těchto šířek.

Chcete-li to implementovat, můžete mít v kontejneru, který upravuje velikost, moduly s pevnou velikostí (možná jako li). Velikost kontejnerů můžete upravit pomocí jquery pro detekci šířky obrazovky (a změny šířky) a poté přidat/odebrat třídu. Mohli byste vytvořit variace prvků v kontejneru, např .: ul.product_list li a ul.product_list_wide li

0
Leah

Jak již uvedli ostatní, používal bych mediální dotazy CSS3 k cílení na více rozlišení. V závislosti na vašem webu/aplikaci to nemusí být možné. To předpokládá, že budete používat stejný obsah pro všechny zážitky, pouze jej zobrazovat jinak na základě velikosti obrazovky (to není vždy optimální pro mobilní zážitek).

Některé zdroje pro použití této techniky by byly:

Článek se seznamem o responzivním designu webových stránek: http://www.alistapart.com/articles/responsive-web-design/

Přehodnocení prezentace mobilního webu: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript pro povolení mediálních dotazů CSS3 pro prohlížeče, které jej nativně nepodporují: http://code.google.com/p/css3-mediaqueries-js/

Výběr mediálních dotazů pro různá zařízení a velikosti: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Některé další příklady: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- webové stránky /

Bohužel, neexistuje WYSIWYG, který by dělal takové věci - potřebujete znalosti a dovednosti, abyste je mohli implementovat ručně.

I když bych proti nim doporučil, existují služby jako Mobify, pokud se zajímáte pouze o zobrazení z počítače/mobilu. http://mobify.me/

0
RussellUresti