Yasumasa's Portfolio
ＷＥＢ大好きな濱田泰昌のポートフォリオを紹介します。

レスポンシブデザイン

レスポンスデザインはブレイクポイントで作ったほうが良い

スマホのボタンサイズを44px×44pxにガイドラインで推奨
レスポンシブデザインにするなら、固定で作る。

ブラウザに応じてcssを振り分け安くするため、htmlにclass名を付与してくれる
http://modernizr.com/

developers.google.comでアクセス
googleはレスポンシブサイトを作ってほしい。
方法は3つ
学校でやったレスポンシブサイトを一番推奨。

smart 4me
幅640で作る

モバイルサイトのテスト
https://www.google.com/webmasters/tools/mobile-friendly/
http://food.foto.ne.jp/

スマホのサイトはとにかく軽くする。
jQueryを入れたりしない。
対応するOSはIOSとアンドロイドだけ。
あらゆるものを偶数で作る。
アンドロイド太字bold使えない。
画像はあまり使わない。
CSS3で作成する方が良い。

レスポンシブオススメ動画

PCサイトからスマホサイトに変える

chromF12　スマホボタン押すデバイスを選ぶ
FITボタンを外すと原寸大選択しているデバイスと同じ画面になる。
情報量が多い場合はレスポンシブデザインは難しい
ナビゲーションが多いサイトとか

ハーゲンダッツ
クローム
要素の検証。
携帯サイト見える。

<ul>
<li><a href=”#”><div>サービス紹介</div></a></li>
<!–androidはdisplay block 効かないので、このようにdivで囲むことによりdisplay blockと同じ効果になる–>
</ul>

ゼロからはじめるレスポンシブWebデザイン入門すごい参考になる
http://ascii.jp/elem/000/000/700/700611/

144px×144pxの四角形の画像を使う。
pcのフォルダはファビコンもタッチアイコンもいらない。
spのフォルダに必要。

favicon.icoを作るには
ファビコンは16px×16px
photo shopでpngで作ってジェネレーターでicoに変換する
http://ao-system.net/favicon/
ファビコンはpcとspを両方入れる

スマートフォン向けウェブサイトの構築
https://developers.google.com/webmasters/smartphone-sites/?hl=ja

モバイルガイドhttps://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=ja

HTML に追加するアノテーション
pcのindexファイルのheadの一番上にコピペ
<link rel=”alternate” media=”only screen and (max-width: 640px)”
href=”http://m.example.com/page-1″ >
ここの中を書き換える。
こっちはsp/まで

pcのindexファイルのheadの一番上にコピペ
<link rel=”canonical” href=”http://www.example.com/page-1″ >
こっちはsite/まで
ulの中のliに入れる
/site/?mode=pc”><div><PC版を表示</div></li>

2015年1月8日 4:54 PM| カテゴリー：未分類| コメント(0)