あまり知られていない、レスポンシブWebデザイン で使える！Google開発者のパフォーマンス改善の超裏ワザ（Part 1）
レスポンシブWebデザインの弱点の1つにパフォーマンスがあります。allWebクリエイター塾のウェブサイトもレスポンシブWebデザインで作成されています。ページ下部に配置しているナビゲーションに「スクロールパフォーマンス」という問題がありました。 「スクロールパフォーマンス」とはスクロールした際の「垂直方向の画面の動きのスムーズさ」を意味します。スクロールパフォーマンスが悪いとユーザーはスクロールした際に画面がひっかかったような印象うけ、ユーザー・エクスペリエンスを損ないます。 今回、リサーチをして検証した結果「スクロールパフォーマンス」が改善できたのでご紹介します。 allWebクリエイター塾のナビゲーションの問題 allWebクリエイター塾のWebサイトは、ナビゲーションを画面の最下部に配置しています。これは、タブレットでユーザーがナビゲーションボタンを押しやすいという理由からです 赤
RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも
レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。 メディア・クエリの確認 インスペクターを開くと、以下のように閲覧しているページに設定されているメディアク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
