2013年11月9日（土）、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.11「実践！ スマートフォン対応サイト制作」のフォローアップとして、口田 聖子（WebbingStudio／実行委員）による「CSS Nite in SAPPORO公式サイトのスマートフォン対応事例」の資料を公開します。
スライド／音声
動画
※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます
フォローアップメッセージ
セッション2「CSS Nite in SAPPORO公式サイトのスマートフォン対応事例」を担当しました、実行委員のWebbingStudio口田です。Vol.11へのご参加ありがとうございました。
Android環境の配慮が薄かったことと、免許ネタがスベったことが反省点でございます……。
時間の関係で割愛した内容を捕足します。
1. SNS対応
スマートフォンではソーシャルプラグインは重要ではないとお話ししましたが、これはあくまで、負荷やリクエスト増大が懸念される外部パーツに関してであり、OGPなどの内部的なSNS対応は徹底して行っています。
トップページでは情報を収集することが多いため軽量化を優先している反面、シェアされることが多い新着情報には、目立つ場所に「いいね！」ボタンなどを配しています。
2. Sass
Sassについての説明を割愛したため、わかりにくくなってしまったかもしれません。
Sassは、CSSを管理しやすく、早く書けるようになる拡張言語で、特に複雑さを増しているRWDのコーディングには必須と言えます。
ドットインストールで、初期設定から動画で説明が観られます。
http://dotinstall.com/lessons/basic_sass
また、札幌市内で月末に開かれている勉強会「SaCSS」でも、Sassはよく取り上げられますので、ぜひご参加ください。
http://sacss.net/
3. 制作フロー
実は、最初の立ち上げ（2013年7月）の時点で、私はレスポンシブWebデザイン（RWD）のサイト制作の経験がほとんどありませんでした。
このため、RWDの設定は、札幌版実行委員でもあります、セッション1を担当した益子さんにお願いしました。
それを引き継ぎ、セッションでお話しした、メインビジュアルのRWD、コーディングの見直し、高速化……と、スキルの向上に応じて手を入れていきました。
こういうことを実務で行うのは難しいですが、ある程度期間が長い案件であれば、仮納品までに基礎をしっかり作り、検収中に高速化・最適化を行う、というフローもあると思います。
CSS Nite in SAPPOROの事例が、これからRWDにがっぷり取り組みたいという方の参考になれば幸いです。