Twitterのエラー画面(5) エラー画面は横幅で表示が変わるレスポンシブウェブデザインだった


  • 公開:
  • 更新:
  • 編集:
概要 ▶ Twitterのエラー画面。画面の作りがレスポンシブウェブデザインになっていて、横幅を変えると表示方法が変わっていて、今時のウェブデザインだなと感心しました。エラー画面もしっかり作り込んでいていいですね。
2013年9月3日の17時30分頃にWeb版のTwitterのTLがエラーで開かなくなる現象がありました。



Yahoo!のリアルタイム検索でも、17時30分頃に突出してTwitterでエラーが出ていることを見ることができます。
20130904-Twitter-エラー画面-04
画像出典:「twitter エラー」の検索結果 - Yahoo!検索(リアルタイム)


Twitterのウェブ版のホームTLだけっぽくて、リプライの画面などは大丈夫だったみたいですが…。


ということで、Twitterのエラー画面をポストするだけというオチのない記事の第5弾です。


上記の続編です。


ということで早速スクリーンショットを。

「技術的な問題が発生しています。ユーザー名を再度ご確認ください。」の下に各国語へのリンクなどがあり、画像があります。
20130904-Twitter-エラー画面-01


と、ふと、画面の横幅を縮めていったらどうなるのか気になりました。

すると、下にあった大きな画像が小さくなって「技術的な問題が発生しています。」の上に画像が来ています。

表示デバイス・ブラウザーの画面幅によって、コンテンツの表示方法を変える手法「レスポンシブウェブデザイン」(レスポンシブWebデザイン)になっていました。
20130904-Twitter-エラー画面-02

縦の長さを縮めていっても同じ現象が見られました。
縦の長さで反応するのは考えていなかったのでちょっとびっくり。


レスポンシブウェブデザインではCSSのメディアクエリーという「@media screen and (max-width: 768px)」といった画面の横幅(ここではwidth)で判定して、CSSの割り当てを変更することが多いのですが、縦の長さを指定している方ってどのくらいいらっしゃるんだろう?
というか、どんな要件なんだ?? 思い当たる方がいたら教えて頂けると幸いです。


あと、横幅をスマートフォン並みに小さくしたらどうなるのかを見てみましたが、特に変わりませんでした。
20130904-Twitter-エラー画面-03


以上です。相変わらずオチは無いです。


ということで、エラー画面もきちんとレスポンシブウェブデザインになっていて感心しましたわ。


それでは。
カテゴリー:

このページをぜひシェアしてください

こんな記事も読まれています

リアクションやコメントをどうぞ