Noong nakaraan ay isinulat naming tapos na ang seryeng ito. Agad na dumating ang karugtong.
Pagkatapos ilunsad, binuksan namin ang site sa sarili naming iPhone. Sa totoo lang, hindi maganda ang pagkakagawa. Habang ginagawa namin ito, halos desktop lang ang tinitingnan namin.
Ito ang tala ng pagkukulang na iyon, at ng mga pag-aayos.
Gawing numero ang “parang may mali”
Ang una naming naramdaman ay “pangit ito.” Pero walang naaayos sa salitang iyon lamang. Kaya nagsimula kami sa pagsukat: ano ang mali, at gaano kalala.
Mas tiyak ang lumabas kaysa inaasahan namin.
1. Palaging nakatago ang ilalim na 68px ng bawat pahina
May naka-fix kaming banner na “Makipag-chat” sa ibaba ng screen. 56px ang taas, 12px ang espasyo sa ilalim. Pero hindi namin inilaan ang espasyong iyon sa mismong pahina, kaya sa lahat ng pahina, ang ilalim na 68px ay nasa ilalim ng banner — habambuhay na nakatago.
Ang nakatago ay ang huling linya ng footer. Hindi mapindot mula sa smartphone ang link sa privacy policy namin.
2. Kapag bumaba ka, hindi mo na maabot ang menu
Hindi nakadikit sa screen ang header. Basahin mo ang artikulo hanggang dulo at naanod na pataas ang hamburger button. Mula roon, wala nang natitirang daan papunta sa ibang pahina.
Mas malala, ganito ang nakasulat sa code:
// Hindi sumusunod ang header sa scroll, kaya bumalik muna sa itaas bago buksan
if (!open) window.scrollTo({ top: 0, behavior: 'auto' });Kaya kapag nakabalik ka na sa itaas at binuksan ang menu, nawawala ang pinagbabasahan mo. Kami mismo ang sumulat niyan, at kami rin ang nahirapan.
3. 15px lang ang taas ng mga link sa footer
Ayon sa Apple, dapat 44px pataas ang anumang pinipindot; ayon sa Google, 48px. Isang-katlo lang niyan ang 15px. Napipindot mo naman, pero madalas ang katabi ang matatamaan.
4. Nabibiyak ang heading sa gitna ng salita
May headline na Hapon na nabibiyak sa lugar na hindi naman puputulin ng kahit sinong bumabasa.
Naglagay kami ng word-break: auto-phrase, isang panuntunang nagpapaputol ng Hapon sa tamang hati ng parirala. Hindi ito suportado ng Safari. Sa iPhone, wala talaga itong ginagawa. Sa desktop Chrome ay gumagana — kaya nga hindi namin napansin.
Ang pagkakasunod-sunod ng pag-aayos
Pinakamalaking epekto muna.
Maglaan ng espasyo sa ibaba. Bumalik ang nakatagong 68px, kasama na ang puwang para sa home bar ng iPhone.
Idikit ang header. Gaano ka man kalayo bumasa, naroon ang hamburger. Tinanggal na ang linyang tumatalon pabalik sa itaas. Isara ang menu at nasa dating pinagbabasahan ka pa rin.
Palakihin ang mapipindot. Mula 15px patungong 41px ang mga link sa footer, at mula 13px patungong 14px ang teksto.
Bahagyang paliitin ang mga heading. Sa halip na ipaubaya sa browser ang paghati ng linya, pinaliit namin ang titik sa makikitid na screen para kasya sa isang linya mula sa simula.
Huwag sakupin ang ilalim ng screen
Ginawa naming muli ang bahaging ito.
Hindi na buong-lapad na banner ang chat button. Maliit na bilog na buton ito sa kanang ibaba, mga ikaanim na lang ng dating laki. Bukod pa riyan, nagtatago ito habang bumababa ka. Huminto ka o gumalaw pataas nang kaunti, at babalik ito.
Dati ay buong screen ang bukas ng chat window. Mukha itong hiwalay na app, putol sa site, kaya ginawa naming drawer na umaahon mula sa ibaba. May natitirang bahagi ng pahina sa itaas, kaya halatang nakapatong lang ito sa site. Pindutin ang madilim na bahagi sa likod para isara, o hilahin pababa ang hawakan sa itaas.
Ang filter ng kategorya sa OS Notes ay nagiging dalawang linya dati. Ngayon ay isang hanay na ini-swipe nang pahalang.
Ibang bug, natagpuan sa daan
Habang sinusuri ang mga naayos na screen, napansin naming lumalabas ang ** sa mismong teksto ng mga artikulo.
Panuntunan pala ito ng Markdown. Hindi kinikilala ang pansarang ** kapag bantas ang nauuna rito at letra ang kasunod.
✗ **Mahalaga ito.**At saka... → lumalabas ang ** bilang teksto
○ **Mahalaga ito**. At saka... → nagiging boldSa Ingles halos laging may puwang pagkatapos ng pangungusap, kaya bihira itong mangyari. Bitag ito na nahuhulugan mo lang kapag Hapon ang isinusulat mo.
Mahigit 200 ang nakita namin sa 17 artikulo at tatlong wika. Lahat ay naayos, at nakasulat na ang panuntunan sa aming gabay sa pagsulat.
Ang natutunan namin
Ang gumawa nito ay sarili niyang desktop lang ang tinitingnan.
Iyon na ang buong aral. Sa 1440px na screen, maayos ang lahat. Dahil maayos, naniwala kaming nasuri na namin.
Ganito rin sa site ng trabaho. Mukhang tapos na ang dingding kapag nakatayo ka sa harap nito; umupo ka at kitang-kita ang mga dugtungan. May mga depektong lumalabas lamang kapag binago mo ang pinagtitingnan mo.
Sa pagkakataong ito, sinuri namin ang bawat pahina sa anim na lapad: 320, 375, 390, 430, 560 at 768px. Mula ngayon, kasama na ito sa gawain bago maglunsad.
May mga bagay pa ring hindi namin napapansin. Kapag nakita namin, aayusin din namin.