OS Co., Ltd.
Notes

Paggawa muli ng aming website (7): sa iPad, "baitang" naman ang problema

Software
Pag-aayos ng trabaho sa computer o telepono
Larawan bilang halimbawa lamang (photoAC)

Noong nakaraan, inayos namin ang smartphone. Ngayon naman ay ang iPad.

Maganda sa desktop. Naayos na ang smartphone. Paano naman ang nasa pagitan? Pagbukas namin, walang sira — pero wala kang alam kung saan titingin.

Nagpapalit kami sa “baitang”

Una, ginawa naming numero ang nangyayari. Sa pitong lapad, sinukat namin isa-isa ang heading, teksto, espasyo at icon.

Ito ang lumabas:

                     iPhone  iPad(P) iPad(L)  PC
teksto                13px    13px    16px    16px
heading ng seksyon    22px    26px    34px    34px
espasyo ng seksyon    52px    60px    88px    88px

Nagbabago ang laki nang “pabaitang.” Pareho ang iPhone at iPad portrait; pareho ang iPad landscape at PC. Ang anumang lapad sa pagitan ay itinutulak sa isa sa dalawa.

Bukod pa riyan, siyam na magkakaibang lapad ang may pagpapalit: 560, 600, 700, 768, 860, 900, 1024, 1200… Nagpapalit ang titik sa isa, ang espasyo sa iba. Sa gitnang laki tulad ng iPad, malaki ang titik pero makitid ang espasyo — hindi nagtutugma ang kombinasyon.

Iyon ang “parang may mali.”

Baguhin nang tuloy-tuloy

Ang lunas ay itigil ang baitang at gumamit ng iisang pormula na sumusunod sa lapad ng screen. May clamp() ang CSS na nagpapahintulot na isulat sa iisang linya ang “pinakamaliit, halagang nakatali sa lapad, pinakamalaki.”

--fs-h2: clamp(24px, 1rem + 1.7vw, 38px);

Sa gayon, mula 375px na iPhone SE hanggang 1600px na desktop, ilang pixel lang ang pagkakaiba ng bawat laki sa katabi nito.

                     iPhone  iPad(P) iPad(L)  PC
heading ng seksyon    22px    28px    31px    38px
espasyo ng seksyon    60px    73px    81px    96px

Sinukat muli, wala nang baitang ang parehong talahanayan.

Dalawang hanay ang iPad

Hindi sapat ang pagpapantay ng numero. Sa 768–1100px, mali mismo ang pagkakaayos.

Kung isang hanay tulad ng smartphone, masyadong mahaba ang iPad — bumababa ang ilustrasyon ng hero palabas ng unang screen, heading lang ang natitira. Kung tatlo o apat na hanay tulad ng desktop, masyadong makitid ang bawat card, siksik ang teksto.

Para sa bandang iyon lang, ginawa naming dalawang hanay ang default.

  • Hero: magkatabi ang heading at ilustrasyon
  • Apat na card ng “problema”: 4 na pahalang → 2×2
  • “Ang aming paraan”: heading sa itaas, mga item sa dalawang hanay
  • Footer: 4 na hanay → 2

Ang 2×2 ng mga card ng problema ay ginawa rin namin sa desktop. Sa apat na pahalang, 257px lang ang bawat card, at ang maikling linyang tulad ng “Walang balita kung ano ang nangyayari sa site” ay nabibiyak sa tatlo o apat na linya. Sa dalawa, kasya sa isa. Mas mahalaga ang kasya sa isang linya kaysa sa apat na magkakatabi.

Walang kaibahan

May isa pang lumitaw nang pagtabihin ang mga numero. Maliit ang pagkakaiba ng heading at teksto.

56px ang pangunahing headline, 18.5px ang lead paragraph, 14.5px ang maliliit na English label (PROBLEMS at iba pa). Lahat “katamtaman”. Walang bida.

Nagpasya kaming palakihin ang agwat.

Dati Ngayon
Pangunahing headline 56px 68px
Lead paragraph 18.5px 16px
Label na tulad ng PROBLEMS 14.5px 12px
Tag at caption 14.5px 12px

Malaki ang bida. Sinadyang maliit ang mga pantulong. Ang kayang maging maliit ay dapat maliit. Sa madaling salita: sa pagsisikap na gawing “sapat ang laki para hindi maging problema” ang lahat, naging pare-pareho ang laki ng lahat.

Nabibiyak ang Hapon sa gitna ng salita

Ang huli. Ito ang pinakamatrabaho.

Nakasulat na ang mga heading nang may nakatakdang hati ng linya: “退去した部屋を、／次に貸せる状態まで” (ang inalisang kuwarto, / hanggang maipaupa muli). Pero hahatiin ng browser kahit saan nito gusto, kahit sa gitna niyon. Sa iPad landscape naging “次に貸せる／状態まで”. Sa desktop, ang pitong-titik na heading na “私たちのやり方” (Ang aming paraan) ay nahati bilang “私たちの／やり方”. Pitong titik sa dalawang linya — mahirap tingnan.

Pareho ang sanhi ng nakaraan: ang word-break: auto-phrase, na naghahati ng Hapon sa hangganan ng parirala, ay hindi suportado ng Safari. Safari ang iPhone at iPad, kaya sa mga Apple device ay wala itong ginagawa.

Sa Ingles may puwang sa pagitan ng mga salita, kaya doon puwedeng maghati ang browser. Walang puwang ang Hapon. Para sa browser, isang string ito na puwedeng hatiin kahit saan.

Gawing buo ang bawat parirala

Hindi kayang pigilan ng CSS lang, kaya binago namin ang pagkakasulat ng heading.

Ang bawat parirala ng heading ay binalot ng markang nagsasabing “huwag hatiin sa loob nito.” “退去した部屋を、” ay isang bloke; “次に貸せる状態まで” ay isa pa. Sa pagitan lang ng mga bloke puwedeng maghati.

Kapag may lugar, nahahati ang heading kung saan pinili ng sumulat. Sa screen na masyadong makitid para sa isang bloke, tinatanggal ang marka at karaniwang naghahati ang teksto. Walang lumalampas.

Para sa maiikling pangungusap — ang apat na card ng problema, ang mga item ng “Ang aming paraan” — ibang panuntunan ang ginamit namin: word-break: keep-all, na naghahati lang sa bantas. Wala na ang “報告が／来ない” at “連絡が来／ない”; “現場がどうなっているか、／報告が来ない” na ang lumalabas.

Ang hindi namin naayos

Hindi namin ginalaw ang mga pamagat ng article card. Ang mahabang malayang teksto tulad ng “Kung bakit pinili ng isang maliit na kompanya ang Supabase — ang maganda, at ang iniingatan” ay walang perpektong paraan ng paghahati sa bawat lapad.

Ilapat ang keep-all at may salitang masyadong mahaba para kumasya, kaya biglang mahahati bilang “理／由” — mas malala pa. Para sa mahabang malayang teksto, karaniwang paghahati ang tamang sagot. Iningatan namin ang panuntunang hindi puwedeng magsimula ang linya sa “、”, at ipinaubaya na sa browser ang iba.

Huwag subukang kontrolin ang lahat. Isa rin ito sa aral ngayon.

Ang sinuri namin

Noong nakaraan, sinabi naming “tingnan ang bawat lapad” ang isasama sa gawain bago maglunsad. Ngayon, idinagdag namin ang pagsuri sa hati ng linya.

Para sa mga heading at teksto ng card, kinukuha namin kung saan eksaktong nahahati ang bawat linya, at inilalatag sa limang lapad.

Mga problema (iPhone)
  現場がどうなっているか、／報告が来ない
  工事が始まってから、／追加費用の話が出てくる
  予定が押しているのに、連絡が来ない
  入居者が外国籍で、／説明がうまく伝わらない

Kapag ganito ang pagkakalatag, agad na nakikita ang hating tulad ng “来／ない”. Mas tiyak kaysa mata lang ang aasahan.

Ang natutunan namin

Noong nakaraan, “ang gumawa nito ay sarili niyang desktop lang ang tinitingnan.” Ito ang karugtong.

Kapag naayos na ang smartphone, tingnan ang nasa pagitan. Hindi nangangahulugang tama ang gitna kapag tama ang dalawang dulo. Ang siyam na baitang ay mga bagay na idinagdag namin nang paisa-isa habang hiwalay na inaayos ang smartphone at desktop.

At magpasya ng laki ayon sa proporsyon, hindi sa baitang. Kapag baitang, laging may butas sa hangganan.

May mga bagay pa ring hindi namin napapansin. Titingnan namin sa totoong iPad, at aayusin din.

Isinulat niOS Co., Ltd. (site at development)Ang artikulong ito ay binalangkas ng AI at sinuri ng aming staff bago ilathala.

Balik sa listahan