大手新聞社の Boston Globe も Responsive Web Design を採用

モバイルへの対応方法の一つとして「レスポンシブ・ウェブ・デザイン」が日本でも流行りつつあります。本家の海外では９月１２日にボストン（米国）の大手新聞社「Boston Globe」がウェブサイトを完全にレスポンシブ・ウェブデザインでリリースしました。

「Boston Globe」のウェブサイトをチェックすると、気づいた点が幾つかありました。

コンテンツの変化

「Boston Globe」のウェブサイトはスクリーンサイズに合わせてコンテンツが変化します。サイトの左上部のコンテンツですが、スマートフォン用のスクリーンサイズでは、「天気」と「交通」のみが表示されます。しかし、大きいスクリーンサイズでは、左上部に「車」と「求人」と「不動産」が加えて表示されます。スマートフォンでは、「天気」や「交通」というユーザーがもっとも利用するコンテンツのみ表示しています。ユーザーの環境（コンテキスト）を考えてコンテンツを可変させているのですね。

技術的なことでもこのナビゲーション周りには、display:tableが利用されていたりと、非常におもしろいウェブサイトです。

スマートフォン版

デスクトップ版

コラムの順番

３コラムのレイアウトを実現する場合、float:leftを順番に指定すると、左から順番に１番目のコラム、２番目のコラム、３番目のコラムと横並びになります。それをスマートフォン用でスクリーンサイズを小さくする場合は、floatをfloat:noneで解除します。面白いのは、その並び順です。スマートフォン用にした場合は、一番上にくるコンテンツは真ん中のコンテンツになっています。非常に不思議な並び順序ですね。

デスクトップ版の並び方

スマートフォン版の並び方

２番目のコラムが一番上に表示される

ブラウザ対応

実はこのプロジェクトは IE6, 7, 8 をサポートしています。しかしIE6,7,8はmedia Queryに未実装の為に、「Respond.js」 を利用してサポートしています。ちなみに、「Respond.js」は、modernizr2.0 の中で作成できます。

まとめ

世界中で「Responsive Web Design」が「Boston Globe」のような大きなプロジェクトで利用されたことは話題になっています。これを機に「レスポンシブ・ウェブ・デザイン」が、これから普及していくでしょう。また「Boston Globe」の例からは実務で制作する上でのノウハウが沢山つめこまれているでしょう。