概要

Media Queries でできると言われていることについて考えれば、モバイルデバイス向けの CSS Media Queries の問題を見つけることは簡単です。

より小さな画面、パワフルでない CPU、そして低速回線なデバイス向けに、デスクトップ向けのウェブデザインを変換するのためにあなたがすべきことは、もっと多くのコードを追加することです。

モバイルへの最適化のために、コードを追加する――ダウンロード量を増加させる――アイディアは、これが良い解決策ではないということへの最初の鍵になります。

核となる前提：モバイルにおいてスピードはより重要である

私は Media Queries に関する技術的な欠陥を指摘するつもりです。欠陥のほとんどは、モバイルにおいてスピードはより重要であるという私の信念に基づくものです。

デスクトップ上でなら、より遅いウェブページを許容すると言っているわけではありません。モバイルはより多くの状況で使用される可能性があるということです。アクセス速度がより重要であったり(急いで仕事探している)、速度が最適化されない環境(回線速度、デバイスの処理能力)といった場面です。

モバイル向けのデザインをするとき、パフォーマンスは重要な考慮事項です。

画像のスケールをブラウザ任せにするのはバッドアイディアである

Ethan Marcotte の記事「Responsive Web Design」は、彼が「Fluid Images」と呼んでいるテクニックに依存しています。

Fluid Images の考え方は、画像を使用する際には最大サイズで提供するというものです。HTML 上で width と height を指定しなくとも、必要に応じて CSS の指定によって相対的なサイズにブラウザがリサイズしてくれます。

このテクニックはモバイル向けとしては、いくつから理由からバッドアイディアといえます。

Media Queries を使って、違う画像を提供することはできない

みなさんが考えるであろうことは分かります。Fluid Images のテクニックではうまくいかない。では、Media Queries を使って、スクリーンサイズごとに違う画像を出してみましょう。

これを達成するには2つの方法があります。1つ目は、CSS で非表示にされた img タグを使うことです。2つ目は、CSS の background-image を使って、背景画像を切り替えることです。それでは、両方のテクニックを見てみましょう。

CSS Media Queries では HTML や JavaScript の最適化はできない

私が初めて Media Queries を導入したのは、Google マップが埋め込まれているデスクトップ向けのページを作っていたウェブ開発者を手伝ったときでしたが、モバイル向けのページではマップが含まれている div は Media Queries によって非表示にされていました。

残念ながら、マップは決して表示されることがないにも関わらず、180キロバイトもの JavaScript ライブラリをブラウザにダウンロードさせてしまっていました。

CSS Media Queries は不必要な HTML を削除することはできませんし、モバイルブラウザを遅くするであろう JavaScript を削除することもできません。

CSS Media Queries は十分にサポートされていない

もし、私が上記に示した課題を全て克服したとしても、CSS Media Queries は多くのモバイルブラウザでサポートされていないということを、あなたは知ることになるでしょう。

Peter-Paul Koch の「compatibility table」によると、モダンスマートフォンでも CSS Media Queries をサポートしていないブラウザがあることが分かります。サポート状況はバラバラで支離滅裂な状態です。

古いブラウザをサポートしようと決める際には、画像はなおいっそう悪いものとなります。

モバイル向けのウェブサイトに Media Queries を使うことを選択した場合、下手な解決方法を選択したつもりではなくとも、大多数のモバイルユーザーを切り捨てることとなります。

モダンスマートフォンを持っているユーザー人口はあなたが思っている通りかもしれませんが、サポートするデバイスの種類を決定しなければなりません。

モバイル事情の軽視

CSS Media Queries の約束とは、既存のデスクトップ向けサイトの HTML にモバイル向けのプレゼンテーションレイヤーを追加することができるというものです。これにより、モバイルユーザーはデスクトップユーザーよりも非常に多様性にとんだニーズを持っている可能性があるという事実が軽視されます。

以下の文は Brian Fling の「book on mobile design」からの引用です。

プロダクトを生み出すとき、小さなスクリーン向けに再利用してはいけません。よいモバイルプロダクトは移植ではなく、創られたものです。

あなたのデスクトップ向けホームページは位置情報検索を使っていますか？ おそらく使っていないでしょう。モバイルサイトはそうすべき？ かなりの確率で。

モバイルユーザーにデスクトップユーザーと同じ HTML と JavaScript を提供する場合、スクリーンサイズに合うようにしたとしても、おそらくは、デバイスの能力とモバイルユーザーの事情に基づくすばらしいユーザーエクスペリエンスを提供する機会を逃していることになります。

モバイル用サイトを分離するのは良いことである

モバイルサイトを分離することが開発において苦痛であることは分かっています。モバイルサイトを設計するのに多くのインフラが用意されていますので、それについては近々書くつもりです。しかし、なぜモバイルサイトを分離する必要があるのかについては、正当な理由があります。

The Big Web Show での Ethan のインタビュー中では、New York Times からの共有リンクが望みどおり動かないことについての議論にしばらく時間が使われました。モバイルサイトからリンクを誰かに送ったときに、相手がデスクトップブラウザでリンク先に行くと、そこはモバイルに最適化されたサイトのままなのです。

このポッドキャストから導き出された結論は、CSS Media Queries はよりよい解決方法であるかもしれない、なぜなら、たった1つの URL がデスクトップとモバイルの両方で動作するからだ、というものでした。

New York Times のデスクトップとモバイルのホームページを YSlow で見た、具体的な数字は以下のようになります。
(訳注：原文には詳細なデータが掲載されています)

デスクトップ
 - HTTP リクエスト：107
 - ダウンロード総数：637.4キロバイト

モバイル
 - HTTP リクエスト：23
 - ダウンロード総数：54.0キロバイト

ご覧のとおり、モバイルサイトはデスクトップサイトに比べて5分の1の HTTP リクエストで済み、583キロバイトも小さなものです。それは90%以上も小さく、モバイルデバイス上ではより大幅に速いものです。

(余談ですが、多くの HTTP リクエストは、ワイヤレスネットワークの遅延のため、デスクトップに比べてモバイルデバイスではより費用がかかります)

New York Times のリンクが正しく動作するべきという意見には賛成ですが、肥大化したデスクトップ用ホームページを取得し、モバイルに(非)友好的な CSS コードを追加することが解決方法とは言えません。

CSS Media Queries の良い使用方法

CSS Media Queries の良い使用方法があります。より多くコントロールでき、デスクトップ向けのサイトが肥大化していないことを確認可能な離散的ウェブアプリケーションを構築しているなら、それは理にかなった方法です。

また、キャンペーンモニターの Ros Hodgekiss は、モバイルに最適化されたレイアウトの HTML メールを提供するための Media Queris の使用方法という記事を書きました。これは理想的な使用方法かもしれません。HTML メールを送信するときには、受信者がどのデバイスを使っていようと、選択の余地なく単一の HTML ドキュメントを使用しなければならないからです。

Responsive Web Design はまだ揺らいでいる

ちょっと待って、Responsive Web Design はまだ揺らいでいるでしょうか？ 私が書いた全文を読んだあとでは信じにくい、そうなんじゃないですか？

私は CSS Media Queries についてではなく、グリッド周りの構築、異なる画面サイズへのデザインの計画、モジュールブロックの構築、それらが画面サイズに応じて配置可能になる方法について話しているのです。

それが Ethan の記事にある本物の宝石です。彼の「Responsive Web Design」から2つの事柄を得ることを私は望んでいます。

• 多くのデスクトップ向けサイトは、複数のスクリーンサイズに最適化する Media Queries と fluid grids のアドバンテージを得るでしょう。Media Queries はデスクトップ向けのウェブデザインにおいて、理にかなったものです。
• Media Queries が実装されていない場合でも、もっと多くのデザイナーや開発者がモジュールとしてのデザインについて考えること。

魅力的な responsive architecture と、今まで見てきたテクニックとの彼の比較は無視できないと気づきました。しかし、モバイル開発に関しては、それら CSS Media Queries が使われたコアメカニズムは役に立つものではありません。
(訳注：ここの部分は上手く訳せませんでした)

確実な方法などない

モバイルサイトの開発は難しいものです。モバイルに最適化された素晴らしいユーザーエクスペリエンスを提供するための簡単でシンプルな解決方法はありません。CSS Media Queries はツールであり、確実な方法ではないのです。

これは特に驚くべきことではありません。今では CMS を当然のように使っていますが、それがデスクトップサイトにとって簡単な方法とは限りません。単に Apache を適切に動作させることがどれだけ難しかったか、私達は忘れています。

最近の大きな技術の波の中で、デスクトップブラウザに品質の保証されたエクスペリエンスを提供するためのインフラが数多くありました。それがモバイルにも来るとき、私達は同様のものを持っています。

それがどんなに困難であっても、モバイルにはそれだけの価値があります。人々の手の中にある情報の力には――彼らが世界中のどこにいようとも――より多くの時間と労力を注ぎ込むだけの価値があるのです。

Copyright

Copyright © 2011 Cloud Four, Inc. All Rights Reserved.