it-swarm-eu.dev

Navrhování pro mobilní webové prohlížeče

Jaký je nejlepší přístup k navrhování webových stránek, které budou běžet ve většině moderních mobilních webových prohlížečů?

Je cílení prohlížečů založených na WebKitu dostačující?

8
rick schott

Ne, cílení na WebKit nestačí. První věc, kterou musíte udělat, je zvážit, že existují dva segmenty mobilního trhu: dotykový a nikoli dotykový. To má vliv na to, jak navrhujete uživatelské prostředí pro mobilní zařízení. Naštěstí dotykové se budou výrazně vyvíjet směrem k WebKit (Android, iPhone a WebOS). Ostatní budou primárně IE Mobile (IE Mobile 6 na Windows Mobile 6.5 a nový založený na IE7/IE8 na Windows Phone 7) a Opera = (Mobilní a Mini). V tomto seznam mobilních prohlížečů na Wikipedii získáte další informace o renderovacích strojích a možnostech.

U platforem založených na dotyku vám knihovna jako Sencha Touch pomůže vytvořit srovnatelné zážitky na všech zařízeních, ale bude obtížné vytvořit stejné zážitky na všech zařízeních. Ve skutečnosti vám doporučuji nezkoušet . Rozdíl mezi dotykovými a bezdotykovými mobilními platformami je tak velký, že je téměř jako rozdíl UX ve snaze přizpůsobit uživatelské rozhraní založené na stolním počítači na obrazovce velikosti mobilních telefonů - což funguje dobře na dotykových platformách, protože používají paradigma „zoomu“ iPhone - ale budete se usilovně snažit získat z tohoto přístupu něco užitečného pro starší nebo nedotčené platformy.

Zvažte však článek LukeW a následné rozhovory o nejprve pro mobilní) , což nemusí být nutně odpovědí na vaši otázku, ale lze jej považovat za dobrý princip: začněte s návrhem tím, že určíte, co zákazníci chtějí dělat na vašem webu a rychle a snadno je zpřístupněte. Tolik je trvale dobrý design napříč platformami vše, takže v tomto smyslu ho můžete použít jako vzor, ​​který řídí váš mobilní design.

12
Rahul

Včera jsem provedl experimenty s iPhone 3. Zde jsou mé zkušenosti:

  • Nepředpokládejte, že šířka je 320 pixelů, proto použijte rozvržení šířky tekutiny.

  • Použijte správný doctype. Používám XHTML Mobile 1.2. Ale nejsem si jistý, jestli je to ten pravý.

  • Udělejte tlačítka obrovskými.

  • Žádné vznášení, takže pomocí ikon označte, co různé prvky ui dělají.

4
neoneye

Termín mobilní telefon roste mimo oblast telefonů a začíná zahrnovat zařízení, jako jsou tablety, které vyžadují dotykové obrazovky o velikosti pět až devět palců. Mobilní design by navíc měl odpovídat horizontální i vertikální orientaci. Kromě toho, co neoneye řekl, několik dalších doporučení/návrhů.

  • Pomocí okrajů nebo výplní zajistěte, aby se žádný text nenacházel přímo na okraji obrazovky.
  • Kromě použití rozvržení šířky tekutiny (šířky se mohou pohybovat od 320 do 1024 px), ujistěte se, že prvky návrhu, které používáte, dobře zalamujete. Například tlačítka vypadají lépe zabalená než horizontální seznam.
  • Text musí být o něco větší, ale stále čitelný. Podle mého názoru je zde dobrý typografický styl přinejmenším stejně důležitý. Prvky typografického stylu aplikované na web je dobrým odkazem.
3
waymost

Pokud vaše publikum může být kvalifikováno o něco více, možná budete schopni učinit nějaké vzdělané předpoklady, že většina zákazníků používá primární zařízení nebo vykreslovací prohlížeč. Nejprve oslovte základní potřeby svého primárního publika. Pokus o distribuci vaší aplikace napříč všemi platformami rovnoměrně na začátku může být úkol příliš skličující.

Zde jsou některé užitečné články, na které jsem narazil:

Mobilní reference http://www.quirksmode.org/mobile/

2
hungrysquirrel