「現在のサイトをスマホ対応にもして欲しい」との依頼
ここは Google大明神の推奨する方法でやるしかないでしょう。
（https://developers.google.com/webmasters/smartphone-sites/details）
という事で、いわゆるレスポンシブwebです。
（あまりに古いサイトは、サイトをリニューアルした方が良い場合もあります）
その流れで、サイトのPC用レイアウトとスマホ用のレイアウトの切り替えボタンが必要になり作成しました。
「ボタンを押せばレイアウトが切り替わる」という例はいくらでも検索で見つかりますが、では、選択したレイアウトを利用してページを推移した時に選択したレイアウトは維持されるのか？と言えば細工をしないと無理です。
いろんな実装方法があると思いますが、今回は、jQueryでクッキーを操作して作成して、参照する先のCSSファイルを保持したままページの推移をしています。
こんな感じ。
ポイントは、
- jQuery cookie の使い方
- CSSのリンク先を記述（分岐するように）
- 読み込むcssの中身（htmlとcssの知識）
でしょうか。
切替ボタン作成に関しての作業は、
- jQuery を読み込ませる
- クリックしたときのイベントを書く。CSSのリンク先を記述も
- 読み込むcssの中身を作ってゆく
こんな感じでしょうか。私の場合は、先にスマホ用表示のレイアウトを、お客さんのサイトを見ながらＣＳＳを書いて、ボタン作成作業で、それらをドバっとスマホ用のCSSに載せました。
残る実装作業は、
このボタンをPC用サイトでも表示するのか・しないのかなど、運用・使用上の問題をお客さんと話し合って実装（たぶんメディアクエリー使用）という流れになります。
最後に、ＰＣ用のレイアウトで、スマホ用の切り替えボタンを表示しているサイトが少ないように思うので、こんな意見を載せておきます
（私個人的には、PC用のサイトでもレイアウト切替のボタンは表示させておく方が良いのではと思っています）
http://www.elezea.com/2012/09/responsive-design-expectations/ このページのより
ここでは
「スマホで通販サイトを見て、購入前にはパソコン用のレイアウトに切り替える」「それは、スマホ用のサイトは、PC用のサイトに比べ情報量が少ないと思っているから、」というように書かれています。
どうでしょう。実は私もそんな風に思っています。本当に同じ情報なのか確かめたくなります。
ということで、スマホで見た時にレイアウト切替ボタンは必須である事は間違いありません。
上の英語の記事は、「スマホサイトにPC用にレイアウト切替ボタンはつけておく方が良いよね」という事になっています。
ＰＣでサイトで見た時はどうでしょう。パソコンで見てスマホ用のレイアウトに切り替える人はいないかもしれませんが、
「あーレイアウトが切り替わるだけね」と確認してもらうためにも、表示させておいた方がよくありませんか・・・・
「混乱させないためにPC用レイアウトには切替ボタンは非表示」という考え方もありますが、私は余計なパターナリズムかなと今のところは思っています。
後日追記：
上記のように、PCサイトにも切替ボタンつけた方が良いかも、と書きましたが、実装していて気づきました。
PCサイト上でのクロスブラウザーでの検証と対策、スマホ用ブラウザーはバリバリにＣＳＳ３．０とＨＴＭＬ５で対応なので、ＰＣ用の旧ブラウザーでの検証の実作業が発生するので、費用が「さらに倍」となりかねなかったです。作業時間と効果を考えれば、ＰＣ用サイトではレイアウト切替ボタンはイラネーという線が濃厚になるのも仕方がないことかもしれませんね。
