プロ向け@レシポンシブサイトはデザイナーがコーディングわからないといけない

「スマートフォン対応=レシポンシブサイト」と勘違いしている業者もいるくらい、レシポンシブが理解されていません。まずは、レシポンシブサイトについて簡単に説明します。

【レシポンシブサイトの簡単説明】

レシポンシブサイトは、
・1つのHTMLに対して、PC用・スマートフォン用のスタイルシートを分けて利用すること
・PC、スマートフォンそれぞれでレイアウトが崩れないこと
・原則1つのデザインでPC、スマートフォンのそれぞれに対応できること
です。

なんか、たまに明らかにPCとスマートフォンのデザインが激しく異なるサイトでレシポンシブ宣言しているの見かけますが、間違いです。
では、本題に入ります。

【デザイナーがコーディングわからないと難しい点】

それはとても簡単なお話なのですが、PCとスマートフォンでは解像度が異なります。この解像度で最も重要なのが、実は画像です。
画像の処理をどうするかがポイントになります。
1400×600の画像をPCで利用は可能ですが、スマートフォンであれば、750横幅にしないといけませんよね?
ここで選択肢が出ます。
1.PC用に1400×600、スマートフォン用に750横幅の画像も用意し、別々にするか?
2.スマートフォンの時は、この画像を750横幅で縮小表示するか?

1.の場合、
 メリット・・・スマートフォン表示の際にページ読み込みのオーバーヘッドをなくせるため、表示速度が期待できる
 デメリット・・・2つ用意するため、imgタグは利用できない
2.の場合、
 メリット・・・imgタグもbackground-imageも利用できる
 デメリット・・・ページのコンテンツによるが、ページ読み込みのオーバーヘッド発生。表示速度が遅くなるか

imgタグも background-imageタグでも、どちらでもいいじゃん?

この画像を、background-imageとして コーディングするか 、imgタグでコーディングするか?
imgタグでコーディングすると、スタイルシートでimgタグのsrcは変更できません。
background-imageでコーディングすれば、スタイルシートで縦横調整も画像ソースも変更できます。
imgタグのsrcをJqueryでは、変更は可能です。ですが、それはレシポンシブサイトではなくなります。

レシポンシブにこだわらなくていいじゃん?

いえ、ダメですw。
というか、そうすると意味がなくなるわけです。
レシポンシブサイトの最大のメリット、それは、
メンテナンスが楽になる!の”1つのHTML、PC用・スマートフォン用スタイルシートで、表示を実現する”が、なくなり、メンテナンス対象が、増えてしまうからです。
これなら、最初から別々に作ったほうがメンテナンスが楽です

このような、場当たり的な制作は、必ず後でひずみを生みます。激しくお勧めしません。

【つまり、デザイナーがコーディングをある程度予測しないといけない】

そういうことになります。カンプ制作時点で、おおよそを予測しないと大幅変更になってしまいます。
気を付ける点は、次です。
・スタイルシートで変更できるHTMLタグの属性を理解しておくこと
・JSに頼らない
・画像サイズが一番影響を受ける。スマートフォンの方が解像度高い場合もある。
・スマートフォンのレンダリングにも気を配ろう。デカイ画像や動画は厳しい場合が多い。
という具合でしょうか。