Svoj znovu obľúbený blog som nedávno optimalizoval pre svoj androidný telefón, čisto z úchylky. Pri takto flegmatickom až ignorantskom webe to nebolo nijak ťažké (stačí pár úprav v CSS), ale dúfam, že to tým, ktorí by svoju klaustrofíliu radi pomasírovali, príde vhod.

Emulátor Android OS

Najprv je potrebné rozcvičiť emulátor Android OS: stiahnite a niekam rozbaľte Android SDK. Potom:

  1. Spustite príkazový riadok: Win+R, napíšte cmd a jemne zatlačte na klávesu Enter.
  2. Príkazom cd sa dostaňte do adresára kde ste rozbalili Android SDK a v ňom ešte do adresára tools
  3. Následne zadajte tento kus: android create avd --name my_android --target 2
  4. A čil tento: emulator -avd my_android
  5. Ak sa spustí emulátor Androidu, uchopte ľavou rukou svoju pravú a dobre zatraste.
  6. Ak budete emulátor spúštať znovu, vynechajte krok 3.

Ak ste v Androide prvý krát, spustite aplikáciu Browser rozhodným kliknutím na príslušnú ikonu. Až sa prehliadač spustí, kliknite na Menu → Go, to otvorí dialóg na zadanie URL. Pravdepodobne budete chcieť ladiť svoj web lokálne. S localhost neuspejete, keďže smeruje na telefón samotný. Musíte použiť špeciálnu IP adresu: 10.0.2.2.

Prepínanie CSS

CSS prepnete pomocou atribútu či pravidla media. K dispozícií sú dva deskriptory: jeden pre klasický screen a druhý pre Android a iPhone. Takto, aha:

<!-- Screen -->
<link media="screen and (min-device-width: 481px)" type="text/css" rel="stylesheet" href="screen.css" />

<!-- Mobile -->
<link media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet" href="screen-mobile.css" />

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

<!-- Viewport -->
<meta name="viewport" content="width=320" />

Poznámka: Teda po pravde, nepovažujem rozlišovanie podľa širky displeja za to najšťastnejšie riešenie, ale nepodarilo sa mi nájsť nič lepšie.

Ja som prasácky použil pravidlo @media priamo v CSS tam kde bolo treba (Na Internet Explorer seriem keď môžem):

@media screen and (min-device-width: 481px)
{
        BODY
        {
                /* Šedé pozadie */
                background-color: #eee;
        }
}

@media only screen and (max-device-width: 480px)
{
        BODY
        {
                /* Biele pozadie pre mobily */
                background-color: #fff;
        }
}

Pár bodrých rád

Obrázky som zmenšil jednoduchým max-width:100%. Dostal som dokonca i zlý nápad, že stripy z Ružovej čiernej diery by mohli byť otočené o 90° doprava, keďže sú široké. Zlý bol preto, že ako Android, tak iPhone vedia otočit displej automaticky a z optimalizácie by sa stala oná nasieracia funkcia.

Odkazy na telefónne čísla s protokolom tel: uvádzam pre úplnosť: (+420) 123 456 789. Ale bacha: nielenže budete harvestrovaní ako pri e-mailoch, ale naopak návštevníci môžu byť prestrašení podvodmi s volaniami na platené čísla.

Môj výsledok si možete pozrieť cez váš obľúbený Androidný, abo Apploidný telefón:

Na prečítanie tohto kódu na Androidnom telefóne si nainštalujte trebárs aj Barcode Scanner; na iPhone môžete použiť niečo obdobné.

Vďaka takýmto QR kódom budú vaši pojazdní návštevníci schopní veľmi rýchlo preniesť informáciu z obrazu, alebo papiera do svojho malého ja. Môžete ich generovať cez Google Chart API. Vykutral som bookmarklet, ale ak si to radi robíte sami, toť rýchlokvasný DL kurz:

http://chart.apis.google.com/chart?cht=qr
URL vygeneruje obrázok s QR kódom podľa nasledujúcich dvoch parametrov
chs=200x200
pre nastavenie veľkosti
chl=http//martincohen.info/blog/
pre vloženie textu na zakódovanie; pre lepší vizuálny pôžitok uvádzam adresu bez URL kódovania, správne by ale mala vypadať nejak takto:
http%3A%2F%2Fmartincohen.info%2Fblog%2F

Na záver: pre dokonalú mobilnú verziu nezabudnite i na media="handheld". Myslite na dátovú optimalizáciu s kamarátom gzip či jemu obobným. A mrknite aj na Mobile Web Application Best Practices.