タグ

Web制作とResponsiveに関するshoji1977のブックマーク (5)

  • Googleがレスポンシブデザインを推奨する7つの理由

    Googleが、ウェブサイトがモバイルフレンドリーかどうかを、4月21日からモバイル検索でのランキング指標に使用する、と発表しました。 検索結果をもっとモバイル フレンドリーに | Google ウェブマスター向け公式ブログ ウェブサイトがモバイルフレンドリーかどうかをモバイル検索結果で表示する変更はすでに行なわれていましたが、ランキングに影響するとあってにわかに騒がしくなってきたようです。 Googleは以前から、ウェブサイトをモバイルフレンドリーにする方法としてレスポンシブウェブデザイン(RWD)を推奨しています。Googleが公開しているモバイルSEOガイドでも、「Google では、デザインパターンとしてレスポンシブデザインを推奨しています」と明記されています。この記事では、GoogleがなぜRWDを推奨するのかを改めてまとめてみたいと思います。 さて、この発表後すぐにWebmas

    Googleがレスポンシブデザインを推奨する7つの理由
  • なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点

    画像表示のマルチデバイス対応をHTMLCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです: とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な

    なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点
  • レスポンシブデザインの進化はWebの常識を変えるか? | ゆっくりと…

    ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか?」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について

  • 5分で分かるレスポンシブWebデザイン

    レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応/変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。

    5分で分かるレスポンシブWebデザイン
  • レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす

    +1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1

    レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
  • 1