モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート1]

基本的に、WordPressテーマをまとめるのはかなり簡単な作業です。 WordPressは非常に使いやすい環境を提供し、その過程でどのPHP関数をどの目的に使用するかを明確にします.


しかしながら。シンプルですが, 簡単ではありません, 特にテーマをモバイル向けに最適化したい場合.

高速で読み込み、予測可能な方法で動作し、(最も重要なことは)ユーザーフレンドリーで、さまざまなデバイスを使用しているユーザーがアクセスできる高品質の製品で終了したい場合は、克服する必要があるさまざまな固有の問題があります。および画面サイズ.

この2部構成のガイドでは、10段階の手順でプロセスを説明し、最初にモバイル向けのパフォーマンス指向のWordPressテーマを作成するときに注意すべき最も重要なことをリストします。.

パート2については、こちらをご覧ください:モバイルを最初に組み立てる方法、パフォーマンス指向のWordPressテーマ[パート2]

1.コンテンツが最初に来る

モバイルには、デザインの詳細を紹介したり、見栄えの良い要素をそれだけのために使用したりする余地はあまりありません.

最近のデバイスは最大1136×640ピクセル(iPhone 5s)のグラフィックを表示できますが、画面の幅はまだ4インチしかないことを忘れないでください。これは、作業するための多くの不動産ではありません.

やる価値のあること:

  • コンテンツの表示に不可欠ではない余分なデザイン要素をすべて取り除く,
  • メインコンテンツブロックがデザインキャンバスのできるだけ高い位置にあることを確認してください(モバイルデバイスの画面サイズが異なるため、場所を予測できません) "折る" 正確に来る),
  • タイポグラフィとコンテンツを読みやすくすることに焦点を当てます(フォントサイズを大きくしますが、1行のテキストを短くしすぎて判読できないように注意してください),
  • 良いコントラストを導入–テキストと背景の比較(これは、特に日当たりの良い場所に立っているときに誰かがページを読み込もうとする場合、モバイルデバイスにとって重要です).

2.画像​​を最適化する

画像の最適化は、他のシナリオよりもモバイルにとってさらに重要です。問題は、誰かがモバイル経由でサイトにアクセスしようとすると、おそらく低速の3G接続を使用しているということです。したがって、この事実に関係なく、テーマが画像を比較的迅速にロードできるようにする必要があります。.

あなたができる具体的なこと:

  • 遅延ロード機能の統合を検討してください。それ自体、遅延読み込みは優れています(訪問者がスクロールしたときにのみ画像を読み込みます)。しかし、問題は、エンドユーザーが最終的なサイトに遅延読み込みプラグインをインストールしてしまう可能性があることです。これは、すでにテーマに統合されているものに干渉する可能性があります。ただし、リスクを取りたい場合は、jQueryとそのようなソリューションを通じて機能を可能にすることが最善です。 遅延読み込みプラグイン. WordPressプラグインはこのライブラリも使用する傾向があるため、2つの異なるスクリプトが同じ結果を達成しようとしているときに問題が発生する可能性を最小限に抑えます。また、テーマの設定で遅延ロードを非アクティブ化できるようにします.
  • 画像のサイズと品質を最適化します。通常、画像は平均的なサイトの帯域幅消費の大部分を占めるため、テーマ作成者は、画像ができるだけ最適化されていることを確認する必要があります。これを実現するには、2つのことを行うことができます。(1)画像のサイズが必要以上に大きくないことを確認します(#3を参照)–ここに1ピクセル追加すると、すぐに加算されます(2)最適化のようなツールを介してすべての画像 Optimole または TinyPNG テーマを公開する前.
  • 可能な限りアイコンフォントを使用します。アイコンをデザインに組み込むという昔ながらの方法は、Photoshopでアイコンを作成し、すべてをPNGまたはGIFに変換してロールアウトすることでした。しかし最近では、最適化されたソリューションではありません。などのツールを使って 素晴らしいフォント, 何百もの美しくデザインされたフォントでデザインを豊かにすると同時に、パフォーマンスを適切に保つことができます.

3.デザインをRetina対応にする(高DPI画面用に最適化)

最近、ほとんどすべての新しいデバイスに高DPIディスプレイが搭載されています。これらの画面では、問題のものが高DPI表示用に最適化されている場合にのみ、すべてが非常に鮮明に見えます。そうしないと、ユーザーに多くのピクセレーションが表示され、全体的な魅力が失われます。.

高DPI最適化には、2つの主要なショートカットがあります。

  • 上記の画像フォントを使用します。画像フォントは自動的に拡大縮小され、すべてのデバイスで見栄えがします.
  • 他のすべての画像の代替バージョンを2倍のサイズで作成し、コンテンツの表示に高DPIデバイスが使用されているときはいつでもCSSと交換します. こちらがガイドです これをどうやってできるか.

最後に、テーマのファビコンにも注意を払う必要があります(ユーザーがファビコンを変更できるようにすることもできますが、それは別のことです)。.

昔は、16×16のPNG画像が1つだけ必要でしたが、それをICOに変換すると、すべて準備が整いました。今はもっと複雑です。たとえば、新しいAppleデバイスはより大きなアイコンを検索してからブックマークとして使用しようとします.

iOSで検出されると予想されるファビコンサイズには、76×76、120×120、152×152があります。これが Apple.comの完全なリスト.

これらのアイコンを手動で作成するか、次のようなツールを使用できます。 リアルファビコンジェネレーター. 他のすべてのバージョンを生成するためのベースとして使用される1つのスターターイメージが必要です。さらに、テーマにアイコンを埋め込むための正しいHTMLコードも取得します.

4.タップを最適化する

世の中のほとんどのモバイルデバイスはタッチインターフェースをサポートしているか、完全にタッチスクリーンベースであることを覚えておく必要があります。つまり、ユーザーが簡単にアクセスできるように、すべてのタップ可能な要素を十分に大きくする必要があります。.

たとえば、テキストリンクは正確にタップするためにユーザー側に集中する必要があるため、あまりタッチ最適化されていません。テーマのインターフェースのボタンに合わせるのが良いデザインの選択です。それ自体が比較的大きく、タッチ領域も大きいボタン.

もう1つ覚えておかなければならないのは、ユーザーはほとんどのタップを親指で行うため、メインを配置することをお勧めします "アクションの呼び出し" 簡単にアクセスできる親指ゾーンのボタン。たとえば、これは iPhoneでの再生方法.

5.テーマをレスポンシブにすることが重要ではない

このガイドの最初の部分は、モバイル向けのテーマを設計するときによくある間違いで終わります。間違いは、レスポンシブデザインを究極のエンドゲームとして扱うことです.

確かに、テーマをレスポンシブにすることは、特に非標準のデバイスや画面サイズを扱う場合には大きな利点ですが、魔法のようなソリューションとはかけ離れています。デザインがレスポンシブであるからといって、モバイルでうまく機能するとは限りません。たとえば、画像の最適化の問題や、ボタンを正確にタップするのが難しいという問題は解決されません。.

だから、はい。テーマをレスポンシブにするためにできることは何でもしますが、同時に、モバイルフレンドリーなデザインを最大化するためにこのガイドで説明する他の要素にも注意してください.

残りのリストを取得するために、2番目のパートを調整することをお勧めします(UXデザイン、ナビゲーション、JSを使用してロード時間を最適化し、あまり知られていないWordPress関数のいくつかを利用して、もっと)。その間、, モバイル向けに設計する際の最大の課題は何ですか?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map