web-dev-qa-db-ja.com

ウェブサイトの可読性vsパフォーマンスvs経験

小さな画面のメインメニューにキャンバス外のデザインパターンを使用するページを実行しています。プログレッシブ拡張を使用して、ブラウザがサポートしている場合、絶対位置ではなくCSS変換を使用してメニューを表示/非表示にします。

特にSafariでは、CSS変換によってテキストが不鮮明になることに気づきました。特にそれが修正されていないようですが、私が使いたくない回避策のみです。特に、トリック後もテキストが少しぼやけているためです。

だから今私は決める必要があります:

  1. CSS変換を破棄し、常に絶対位置を使用します。これは、スライドイン/スライドアウトアニメーションフェーズのパフォーマンスに大きな影響を与えますが、テキストは常にシャープにレンダリングされます。

  2. CSS変換を捨てるandトランジション–シャープなテキストとそれほど目立ったパフォーマンスの低下はありませんが、メニューはアニメーションなしで表示/非表示になるだけです->エクスペリエンスに悪い

  3. すべてをそのままにして、一部のユーザーにぼやけたテキストを提示します。

私の直感は、オプション2を使用する必要があることを教えてくれますが、オプション1は、すべてのデバイスでパフォーマンスの低下が目立つわけではないので、妥協の可能性があります。

私はおそらくそのような決定に出​​くわす最初のものではないので、この問題に対する最善の(多分「標準」でさえある)解決策が何であるかを知るのは素晴らしいことです。

2
Sven

ぼやけたテキストオプションは絶対に避けてください。

パフォーマンスがどれほど「悪い」かは本当にわかりませんが、両方ハードウェアとソフトウェア(モバイルブラウザーのグラフィックレンダリング)の両方が急速に向上していることを理解しています。携帯電話とタブレットは、ハードウェア市場で(デスクトップとは対照的に)お金がかかる場所なので、そこがパフォーマンスの競争です。私のポイントは、あなたのオプション#1のパフォーマンスの問題は、時間が経つにつれパフォーマンスの問題よりも少なくなるということです。

いずれにせよ、私はオプション#1で行くと思いますが、将来代替案を簡単にプラグインできるようにコード化します。 iOS Safariはこの点で修正され、広く展開される可能性があります。

(そして私はあなたがさまざまなデバイスでのフォントレンダリングに苦痛を感じています、それを正しくするのは確かに苦痛です。)

1
obelia