既存サイトのレスポンシブ化について
既存のPC表示デザインはそのままに、レスポンシブを追記する
様々なサイトのレスポンシブ化を今やっています。
勿論、Googleモバイルフレンドリーへの対応の為です。
既存のサイトのPC表示のデザインはそのままに、CSSにブレイクポイントを追記、スマホ表示で調整して、レスポンシブ用のレイアウトを追加している感じです。
Htmlのマークアップが最初から綺麗に書けていれば、基本的には追記だけで済みますから、既存のサイトをレスポンシブ対応にする事自体は、さほど難しくありません。
ただ、マークアップが上手に出来ていないサイトでは、事前の手直しに、かなりの手間が、掛かります。
例えば、下記のような要因があります。
レイアウトに使用するブロックタグの定義がきちんと出来ていない
例 えば、一番外側のDivには「wrapper」、ヘッダには「header」、コンテンツ部分は「content」、メインカラムには「main」、フッターには「footer」ですよね？
これ、常識だと思っていたのですが、色々なサイトを手直ししていると、これが 全く異なっていたり、ひどい場合、定義ができておらず、ページ毎に独自のクラスを使ってしまっている事があります。
これは、事前に統一し、CSSを調整する必要があります。
不要なセレクタが多すぎる
ページ毎にセレクタを増やしてしまい、CSS上は同じ定義なのに、微妙にクラスが異なるセレクタがいくつも存在していたり。
無駄なコードは通信の浪費になり、サイトの表示速度の低下の原因になりますので、全部綺麗にまとめて、不要なものは取っ払ってしまう必要があります。
もし、ページごとに同じクラス名を使用して、少しだけデザインを変えたい場合、むやみにセレクタを増やさず、きちんとbodyタグやcontentタグに、セレクタを追加して、スマートに分岐させましょう。
レイアウトにテーブルを使いまくり
これは、言語道断ですね。
テーブルは、必要な部分に、必要最小限で使えば、使ってはいけない、というものではありません。
しかし、未だにレイアウトの為に使用していたり、全体のサイズをピクセルの固定値で指定したり、スペースを空ける為に、不要なtdを入れまくる、これは本当に良くないですね。
基 本テーブルのwidthは100%に。不要なtdは使わずCSSで調整。そうしておけば、レスポンシブ化した際に、trやtdをブロック化して横一列に表 示させたり、cssでtable-layoutをfixedにすれば、綺麗に均等にスマホの画面でも、テーブルが表示されます。
そもそも正しいマークアップやコーディングが出来ていない
テキストと画像は普段から、ちゃんとpタグ（ブロックタグ）で囲みましょう！
ヘッダ付近には、ちゃんとリンク付きで、h1を入れましょう！
見出しタグを順序良く、正しく設定しましょう。
メニューにはliタグを使用し、CSSスプライトでボタンを作りましょう！
基本レイアウト（構造）にはid、入れ子になる子要素にはクラスです！
brでスペースや段落調整するのは、直ぐに止めましょう！
サイドバーの内容は、ソースの最後に、CSSでmainの左右にfloatさせましょう！
フッターにはちゃんとリンク入れましょう！キーワードも大切です！
コンテンツ内の文章中（テキスト）に不要な改行コード（brではない）は入れない！一行で書く！
インデントは規則性を持たせて、綺麗にしましょう。
画像には、キーワードを意識した文章をaltに入れましょう。
大切なのは何事も、結局「基本」です！
誰が見ても解りやすく、綺麗なマークアップは、間違いなく情報も整理されているはずです。
また、Googleのクローラーからみても、情報の収集がしやすくなるはずです。
統一性がなく、不要なコメントだらけ、インデントがバラバラの汚いソースでは、表示速度のパフォーマンスが落ちますし、何より、自分が編集する際に一番、困りますよね？
一部参考ですが、下記のサイトで綺麗に調整したので、ソースを見てください。
ブライズガーデンさんは、デザインも僕が手掛けています。
レスポンシブといっても、幅の狭いブラウザで表示した場合のデザインを記述するだけの事ですから、難しく考えず、基本を押さえて、コーディングしていきましょう。
