26aug

Mobilizujte! Vytvorte verziu vašej webstránky pre iPhony, Androidy a iné príšerky

V dnešných časoch mnoho ľudí pristupuje na webstránky zo svojho mobilného zariadenia. iPhony, iPady, Androidy, Blackberries sú zatiaľ populárnejšie vo vyspelejšom zahraničí, ale my ich ostatne ako vo všetkom čoskoro dobehneme. Aj pre webdizajnérov sa môže stať ohromným plus, keď rozšíri ponúkané grafické a programátorské služby o mobilný trh

S Drupalom je to jednoduchá práca - stačí nám stiahnuť dva nové moduly, ktoré sa o všetkom za zavretými dvierkami spoľahlivo postarajú. Jediné, čo bude potrebné dlhšie konfigurovať, je nová téma. Môže byť kópiou (a pre zachovanie dizajnovej konzistencie by aj mala byť) aktuálnej desktopovej témy, ktorú však výrazne okresáme.

Keď všetky tieto zariadenia s vlastnými browsermi vedia pokojne načítať aj klasickú webstránku, prečo sa trápiť s vytváraním jej mobilnej verzie?

Odpoveď je v mnohých ohľadoch ekonomická:

  • Nechceme nútiť používateľov sťahovať cez spoplatnený dátový prenos priveľa dát
  • Na malom priestore musí byť to najdôležitejšie, po čo si užívateľ prišiel - informácie
  • Všetky dúhové flashky, interaktívne jQuery slidery a super pop-up akcočky budú na mobilnej obrazovke zavadzať, prípadne vôbec nefungovať

Pre prípravu mobilnej verzie webstránky potrebujeme:

  1. Nainštalovať moduly Domain Access a Mobile Tools
  2. V Control Paneli pre našu doménu nakonfigurovať DNS záznamy
  3. Skopírovať aktuálnu tému, ktorú naša webstránka používa a nakonfigurovať ju
  4. Vytvoriť cez administráciu Drupalu nový doménový záznam
  5. Otestovať na mobilnom zariadení presmerovanie a vzhľad témy

 

Moduly

Domain Access a Mobile Tools moduly nahráme do sites/all/modules. Do súboru settings.php na našom serveri pripíšeme na koniec tieto riadky:

/** 
* Add the domain module setup routine. 
*/
include './sites/all/modules/domain/settings.inc';

V administrácii v zozname modulov zaškrtneme Domain Access, Domain Theme a Mobile Tools. 

 

DNS záznamy

Teraz je čas pohrať sa s DNS záznamami pre náš hosting. Otvorte si webstránku Control Panelu alebo Setup alebo už akokoľvek sa nazýva prostredie, kde si kazíte nastavenia hostingu a domény. Uistite sa, že mnohonásobné DNS entries môžu ukazovať na jednu IP adresu, na adresu, kde máte nainštalovaný Drupal. Hľadajte približne takýto záznam:

*.mojweb.sk IN A 12.345.678.90 (IP vašej Drupal inštalácie)

To sa nazýva DNS Wildcard. 

ALEBO nastavte VirtualHosts v súbore httpd.conf:

m.mojweb.sk => 12.345.678.90 (IP vašej Drupal inštalácie)

Taktiež sa uistite, že v nastavení pre Apache máte generovanie subdomén VYPNUTÉ.

 

Čas na tému

Skopítujte do adresára sites/all/themes kópiu vašej aktuálnej témy. Nazabudnite zmeniť meno napr. na moja_tema_mobil a tiež premenujte .info súbor v adresári tejto témy.

Prejdite si súbory page.tpl.php, node.tpl.php a css štýly a povyhadzujte zbytočnosti, ktoré v mobilnej verzii podľa vášho zdravého úsudku nie sú životu nevyhnutné. Držte si odstup od veľkých obrázkov a pozadí, bannerov, sliderov, reklám a iných záludností. Zväčšite texty a zmenšite šírku celého layoutu. Jednoducho minimalizujte.

 

Nastavte Domain Access

Keď to budete mať ako-tak hotové a myslíte si, že je čas pozrieť si výsledok na novom iPhone, zájdite do Administrácie na nakonfigurovanie novej subdomény. Industriálny štandard má za to, že subdoména m.mojweb.sk bude najvyhovujúcejšia (a je to aj default pre modul Mobile Tools, ktorý sa stará o rozpoznanie mobilných návštevníkov a nasmeruje ich do tejto subdomény). Vytvorte na admin/build/domain/create nový DNS záznam.  Ako názov webu môžete zadať napr. "Moja webstránka Mobil".

Drupal vás pravdepodobne požiada o obnovenie prístupu k obsahu, tak tak učiňte a vráťte sa ku konfigurácii novej subdomény. Tu kliknite na "theme" a vyberte novú mobilnú tému, ktorú ste pred chvíľou nahrali na server.

 

Testovanie

Vyskúšajte to! Budete vidieť, do akej miery je ešte nutné sa pohrať s novou témou, ale určite vás bude tešiť, že ste opäť o krok vpred pred konkurenciou a že vaši mobilní návštevníci budú mať príjemný, nefrustrujúci zážitok.

Otestujte aj môj blog na svojom mobilnom miláškovi: www.webdizajnblog.sk

Komentáre

Poslať nový komentár

Obsah tohto poľa je súkromný a nebude verejne zobrazený.