Your SlideShare is downloading. ×
0
小川 裕之
レスポンシブWebデザインの基礎
13年10月8日火曜日
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める。
制作会社でデザイン、コーディング、ディレクション、
コンサル等...
レスポンシブWebデザインとは
13年10月8日火曜日
13年10月8日火曜日
Photo by Jeremy Keith
スマートデバイスの増加
13年10月8日火曜日
1日の平均インターネット接続時間
博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より
72,8分
50.6分
13年10月8日火曜日
マルチデバイス対応の手法
•レスポンシブWebデザイン
•デバイス専用サイト
•プログラム変換
13年10月8日火曜日
RWDの特徴
•URLがひとつ
•ワンソース
•更新が比較的簡単
•新しいデバイスにも対応しやすい
13年10月8日火曜日
ワンソースで各デバイスの画面サイズに
対応したレイアウトを実現
HTML
CSSCSS CSS
幅768px
以下
幅480px
以下
幅769px
以上
13年10月8日火曜日
URLがひとつ
13年10月8日火曜日
ワンソース
13年10月8日火曜日
HTML
CSSCSS CSS
更新の手間が少ない
更新
! !
!
13年10月8日火曜日
新しいデバイスにも対応しやすい
? ?
?
?
?
13年10月8日火曜日
それぞれのメリット・デメリット
手法 メリット デメリット
レスポンシブWebデザイン
更新がラク
URLがひとつ
無数のデバイスに適応できる
構成の制限
設計が難しい
テストの工数が増える
デバイス専用サイト
デバイスの特性にあった最適化がで...
レスポンシブWebデザインの実装
13年10月8日火曜日
A LIST APART
13年10月8日火曜日
RWDを実現する要素
•Fluid Grid
•Fluid Image
•Media Queries
13年10月8日火曜日
Fluid Grid
13年10月8日火曜日
規則性をもったライン(Grid)にそって
コンテンツを配置
Grid Design
13年10月8日火曜日
グリッドの幅を相対値で指定
Fluid Grid
%
13年10月8日火曜日
求める要素の幅 親要素の幅 100%
相対値の求め方
620px 300px
960px
60px 20px
13年10月8日火曜日
=64.58333%
300÷960×100
960px
相対値の求め方
620÷960×100
=31.25%
求める要素の幅 親要素の幅 100%
13年10月8日火曜日
Fluid Grid Systemが便利
pxからいちいち計算するのは手間
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
13年10月8日火曜日
960px
60px 20px
1カラム=60px÷960px×100%=6.25%
2カラム=(60px×2+20)÷960px×100%=14.58333%
3カラム= (60px×3+20×2) ÷960px×100%=22.91667%...
8カラム 4カラム
100%
=31.25%=64.58333%
13年10月8日火曜日
px %
幅を相対値にする
13年10月8日火曜日
Fluid Image
13年10月8日火曜日
画像が親要素より
はみ出してしまう
画像を可変にする
13年10月8日火曜日
<img src="photo.jpg" alt="photo">
img{
max-width: 100%;
height: auto;
}
HTML
CSS
画像を可変にする
親要素内に
収まる
13年10月8日火曜日
Media Queries
13年10月8日火曜日
メディアタイプと特性に関する条件を調べ
その結果に応じて処理を行う
13年10月8日火曜日
@media screen and (min-width: 640px){
body{
background-color: red;
}
}
メディアがスクリーンで表示領域幅が
640px以上の場合背景色を赤にする
メディアタイプ メディア特性...
メディア特性 情報 max-/min-
width 表示領域の幅 ○
height 表示領域の高さ ○
device-width デバイスの横方向の解像度 ○
device-height デバイスの縦方向の解像度 ○
orientation 表...
@import url ("pc.css") screen and (min-
width:600px);
<link rel="stylesheet" href="pc.css"
media="screen and (min-width:60...
body{
backgorund-color:red;
}
モバイルファースト
1025px768px
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
モバイルファースト
1025px768px
...
幅1025px
以上に適用
body{
backgorund-color:red;
}
@media screen and (min-width:768px){
body{
backgorund-color:blue;
}
}
@media s...
body{
backgorund-color:red;
}
767px1024px
デスクトップファースト
全サイズ
に適用
13年10月8日火曜日
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
767px1024px
デスクトップファー...
body{
backgorund-color:red;
}
@media screen and (max-width:1024px){
body{
backgorund-color:blue;
}
}
@media screen and (ma...
モバイルファーストのメリット
•スタイルが少なくなる
#main{
float:left;
width:80%;
}
@media screen and (max-width:
639px){
#main{
float: none;
width...
デスクトップファーストのメリット
•Media Queriesに非対応のブラウザ対応が簡単
デスクトップファーストモバイルファースト
13年10月8日火曜日
ブレイクポイント
13年10月8日火曜日
@media screen and (min-width: 480px){
/*style*/
}
@media screen and (min-width: 940px){
/*style*/
}
940px480px
ブレイクポイント
13...
Sorce:Design Spice
サイトによって様々
13年10月8日火曜日
ブレイクポイントを決めるヒント
•主要となるデバイスの幅から
•コンテンツの最適なレイアウトから
13年10月8日火曜日
デバイスの幅から
主要となるデバイス、シェアの多いデバイスなど
を元に決める
13年10月8日火曜日
コンテンツから
動かしてみて調整が必要な部分に適時ブレイク
ポイントを追加する
13年10月8日火曜日
@media screen and (min-width: 768px){
body{
background-color: red;
}
}
幅をemで指定
768px=48em1em=16px
13年10月8日火曜日
メディアがスクリーンで表示領域幅が
48文字以上の場合、背景色を赤にする
幅をemで指定
768px=48em1em=16px
@media screen and (min-width: 48em){
body{
background-colo...
Viewport
13年10月8日火曜日
Viewportに指定されたサイズで
ページを描画する
980pxのウインドウサイズで
アクセスしたときと同じ表示
13年10月8日火曜日
<meta name="viewport" content="width=device-width,
initial-scale=1">
そのデバイスの幅で
サイトが表示される
13年10月8日火曜日
RWDでよくある問題点
13年10月8日火曜日
RWDでよくある問題点
•古いブラウザ対応の考え方
•どのようなワークフローで進めるのか
•カンプをどのようにつくるか
13年10月8日火曜日
古いブラウザ対応の考え方
Photo by rosefirerising
13年10月8日火曜日
最近のブラウザ
古いブラウザ
装飾は劣るが最低限の機能は提供
グレイスフルデグラデーション
基準
グレイスフル
デグラデーション
13年10月8日火曜日
どのようなワークフローで進めるのか
Photo by the pale side of insomnia
13年10月8日火曜日
•特定のデバイス対応
•コンテンツの幅は固定
•どの表示領域幅でもレイアウトは変わらない
ワークフローを見直す
今までの
サイト
•マルチデバイス対応
•コンテンツの幅は可変
•表示領域幅でレイアウトが変わる
RWD
13年10月8日火曜日
作ってみないとわからない
13年10月8日火曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
ワークフロー例
13年10月8日火曜日
情報
設計
画面
設計
プロト
タイプ
デザイン
実装
調整 テスト
テスト
早めにプロトタイプを作成して
テストをしながら完成へと近づける
13年10月8日火曜日
カンプをどのようにつくるか
13年10月8日火曜日
=
従来のサイト制作におけるカンプ
13年10月8日火曜日
=    
   
RWDにおけるカンプ
13年10月8日火曜日
体制や案件に応じて作り方を変える
•各ブレイクポイントで作成
•PCサイズのみ作成する
•主要な部分のみ作りこんで
他はざっくりと
•Designing in the browserで
13年10月8日火曜日
その都度都度で体制を柔軟に
変えられることが大事
13年10月8日火曜日
さらに最適化を
13年10月8日火曜日
Responsive Web Design
Performance
Responsive Web Design
Usability
Content Strategy User Interface
Readability
SEO
Accessib...
Responsive Web Design
Usability
Performance
Content Strategy User Interface
Readability
SEO
Accessibility
Information Arch...
Good performance is good design
Brad Frost
13年10月8日火曜日
表示に時間が
かかる
光回線3G回線
13年10月8日火曜日
画像の最適化
•CSSを使う
•画像を圧縮する
•Webフォント
•画像を差し替える
13年10月8日火曜日
CSSを使う
#btn{
padding: 0.5em;
display: inline-block;
font-size: 40px;
color: #333;
font-weight: bold;
letter-spacing: 0.1em...
画像を圧縮する
JPEGmini
13年10月8日火曜日
画像を圧縮する
•JPEGmini
•ImageOptim
•PunyPNG
13年10月8日火曜日
画像を圧縮する
915kb
1200px×800px
350kb
38%!!
13年10月8日火曜日
Webフォントを使う
Google Fonts
13年10月8日火曜日
Webフォントを使う
•Google Fonts
•Adobe Edge Web Fonts
•FONT PLUS
•Type Square
13年10月8日火曜日
Webアイコンフォントを使う
Ico Moon
13年10月8日火曜日
Webアイコンフォントを使う
Font Awesome
•Font Awesome
•IcoMoon
•Fontello
13年10月8日火曜日
<script src="matchmedia.js"></script>
<script src="picturefill.js"></script>
<span data-picture data-alt="pic">
<span data...
画像を差し替える
Font Awesome
•Picturefill
•Responsive Images
•Adaptive Images
13年10月8日火曜日
Responsive Images Chart
13年10月8日火曜日
RWDとこれからのWeb
13年10月8日火曜日
Android Fragmentation Visualized
多様化するデバイス
13年10月8日火曜日
Future of Screen Technology
Productivity Future Vision
13年10月8日火曜日
それぞれのデバイス専用にサイトを作るのは
現実的ではなくなってくる
少ない労力でより多くのデバイスに
対応できるのが理想
13年10月8日火曜日
Best practice?
Photo by Jeremy Keith
13年10月8日火曜日
RWDは発展途上
•Media Queries Level4
•Responsive Images
•flexbox ,Regions,Column,...
•vw,vh
13年10月8日火曜日
Photo by Barb Dybwad
考え方も変える
13年10月8日火曜日
完全を求めない
Photo by Peter Miller
13年10月8日火曜日
“The control which designers know in the print medium, and often desire
in the web medium, is simply a function of the lim...
   
   
13年10月8日火曜日
   
   
13年10月8日火曜日
What is king?
Photo by Kyle Johnston
13年10月8日火曜日
未来を想像し、変化に順応する
Photo by dalioPhoto
13年10月8日火曜日
まとめ
13年10月8日火曜日
本日のまとめ
•RWDはワンソースでマルチデバイスに対応する手法
•RWDを実装する要素
(Fluid Grid,Fluid Image,Media Queries)
•グレイスフルデグラデーションで進められるとよい
•早めにテストを行いリスク...
Upcoming SlideShare
Loading in...5
×

レスポンシブWebデザインの基礎

93,730

Published on

レスポンシブWebデザインの概要から実装の基本まで。

Published in: Technology

Transcript of "レスポンシブWebデザインの基礎"

  1. 1. 小川 裕之 レスポンシブWebデザインの基礎 13年10月8日火曜日
  2. 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin  hiro.ogw 13年10月8日火曜日
  3. 3. レスポンシブWebデザインとは 13年10月8日火曜日
  4. 4. 13年10月8日火曜日
  5. 5. Photo by Jeremy Keith スマートデバイスの増加 13年10月8日火曜日
  6. 6. 1日の平均インターネット接続時間 博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より 72,8分 50.6分 13年10月8日火曜日
  7. 7. マルチデバイス対応の手法 •レスポンシブWebデザイン •デバイス専用サイト •プログラム変換 13年10月8日火曜日
  8. 8. RWDの特徴 •URLがひとつ •ワンソース •更新が比較的簡単 •新しいデバイスにも対応しやすい 13年10月8日火曜日
  9. 9. ワンソースで各デバイスの画面サイズに 対応したレイアウトを実現 HTML CSSCSS CSS 幅768px 以下 幅480px 以下 幅769px 以上 13年10月8日火曜日
  10. 10. URLがひとつ 13年10月8日火曜日
  11. 11. ワンソース 13年10月8日火曜日
  12. 12. HTML CSSCSS CSS 更新の手間が少ない 更新 ! ! ! 13年10月8日火曜日
  13. 13. 新しいデバイスにも対応しやすい ? ? ? ? ? 13年10月8日火曜日
  14. 14. それぞれのメリット・デメリット 手法 メリット デメリット レスポンシブWebデザイン 更新がラク URLがひとつ 無数のデバイスに適応できる 構成の制限 設計が難しい テストの工数が増える デバイス専用サイト デバイスの特性にあった最適化ができる デザインの自由度が高い 開発コストがかかる 更新の手間がかかる 新しいデバイスを判定する必要がある プログラム変換 更新が比較的ラク URLが共通 デザインの自由度が高い 開発コストがかかる 新しいデバイスを判定する必要がある 13年10月8日火曜日
  15. 15. レスポンシブWebデザインの実装 13年10月8日火曜日
  16. 16. A LIST APART 13年10月8日火曜日
  17. 17. RWDを実現する要素 •Fluid Grid •Fluid Image •Media Queries 13年10月8日火曜日
  18. 18. Fluid Grid 13年10月8日火曜日
  19. 19. 規則性をもったライン(Grid)にそって コンテンツを配置 Grid Design 13年10月8日火曜日
  20. 20. グリッドの幅を相対値で指定 Fluid Grid % 13年10月8日火曜日
  21. 21. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px 300px 960px 60px 20px 13年10月8日火曜日
  22. 22. =64.58333% 300÷960×100 960px 相対値の求め方 620÷960×100 =31.25% 求める要素の幅 親要素の幅 100% 13年10月8日火曜日
  23. 23. Fluid Grid Systemが便利 pxからいちいち計算するのは手間 13年10月8日火曜日
  24. 24. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 13年10月8日火曜日
  25. 25. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 13年10月8日火曜日
  26. 26. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 3カラム= (60px×3+20×2) ÷960px×100%=22.91667% 4カラム= (60px×4+20×3) ÷960px×100%=31.25% 5カラム= (60px×5+20×4) ÷960px×100%=39.5833% 13年10月8日火曜日
  27. 27. 8カラム 4カラム 100% =31.25%=64.58333% 13年10月8日火曜日
  28. 28. px % 幅を相対値にする 13年10月8日火曜日
  29. 29. Fluid Image 13年10月8日火曜日
  30. 30. 画像が親要素より はみ出してしまう 画像を可変にする 13年10月8日火曜日
  31. 31. <img src="photo.jpg" alt="photo"> img{ max-width: 100%; height: auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年10月8日火曜日
  32. 32. Media Queries 13年10月8日火曜日
  33. 33. メディアタイプと特性に関する条件を調べ その結果に応じて処理を行う 13年10月8日火曜日
  34. 34. @media screen and (min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする メディアタイプ メディア特性 13年10月8日火曜日
  35. 35. メディア特性 情報 max-/min- width 表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○ 13年10月8日火曜日
  36. 36. @import url ("pc.css") screen and (min- width:600px); <link rel="stylesheet" href="pc.css" media="screen and (min-width:600px)"> @media screen and (min-width:600px){ /*style*/ } CSS CSS HTML 13年10月8日火曜日
  37. 37. body{ backgorund-color:red; } モバイルファースト 1025px768px 全サイズ に適用 13年10月8日火曜日
  38. 38. body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
  39. 39. 幅1025px 以上に適用 body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } @media screen and (min-width:1025px){ body{ background-color:yellow; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
  40. 40. body{ backgorund-color:red; } 767px1024px デスクトップファースト 全サイズ に適用 13年10月8日火曜日
  41. 41. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } 767px1024px デスクトップファースト 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
  42. 42. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } @media screen and (max-width:767px){ body{ background-color:yellow; } } 767px1024px デスクトップファースト 幅767px 以下に適用 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
  43. 43. モバイルファーストのメリット •スタイルが少なくなる #main{ float:left; width:80%; } @media screen and (max-width: 639px){ #main{ float: none; width: auto; } } デスクトップファースト @media screen and (min-width: 640px){ #main{ float: left; width: 80%; } } モバイルファースト 13年10月8日火曜日
  44. 44. デスクトップファーストのメリット •Media Queriesに非対応のブラウザ対応が簡単 デスクトップファーストモバイルファースト 13年10月8日火曜日
  45. 45. ブレイクポイント 13年10月8日火曜日
  46. 46. @media screen and (min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年10月8日火曜日
  47. 47. Sorce:Design Spice サイトによって様々 13年10月8日火曜日
  48. 48. ブレイクポイントを決めるヒント •主要となるデバイスの幅から •コンテンツの最適なレイアウトから 13年10月8日火曜日
  49. 49. デバイスの幅から 主要となるデバイス、シェアの多いデバイスなど を元に決める 13年10月8日火曜日
  50. 50. コンテンツから 動かしてみて調整が必要な部分に適時ブレイク ポイントを追加する 13年10月8日火曜日
  51. 51. @media screen and (min-width: 768px){ body{ background-color: red; } } 幅をemで指定 768px=48em1em=16px 13年10月8日火曜日
  52. 52. メディアがスクリーンで表示領域幅が 48文字以上の場合、背景色を赤にする 幅をemで指定 768px=48em1em=16px @media screen and (min-width: 48em){ body{ background-color: red; } } 13年10月8日火曜日
  53. 53. Viewport 13年10月8日火曜日
  54. 54. Viewportに指定されたサイズで ページを描画する 980pxのウインドウサイズで アクセスしたときと同じ表示 13年10月8日火曜日
  55. 55. <meta name="viewport" content="width=device-width, initial-scale=1"> そのデバイスの幅で サイトが表示される 13年10月8日火曜日
  56. 56. RWDでよくある問題点 13年10月8日火曜日
  57. 57. RWDでよくある問題点 •古いブラウザ対応の考え方 •どのようなワークフローで進めるのか •カンプをどのようにつくるか 13年10月8日火曜日
  58. 58. 古いブラウザ対応の考え方 Photo by rosefirerising 13年10月8日火曜日
  59. 59. 最近のブラウザ 古いブラウザ 装飾は劣るが最低限の機能は提供 グレイスフルデグラデーション 基準 グレイスフル デグラデーション 13年10月8日火曜日
  60. 60. どのようなワークフローで進めるのか Photo by the pale side of insomnia 13年10月8日火曜日
  61. 61. •特定のデバイス対応 •コンテンツの幅は固定 •どの表示領域幅でもレイアウトは変わらない ワークフローを見直す 今までの サイト •マルチデバイス対応 •コンテンツの幅は可変 •表示領域幅でレイアウトが変わる RWD 13年10月8日火曜日
  62. 62. 作ってみないとわからない 13年10月8日火曜日
  63. 63. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト ワークフロー例 13年10月8日火曜日
  64. 64. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト 早めにプロトタイプを作成して テストをしながら完成へと近づける 13年10月8日火曜日
  65. 65. カンプをどのようにつくるか 13年10月8日火曜日
  66. 66. = 従来のサイト制作におけるカンプ 13年10月8日火曜日
  67. 67. =         RWDにおけるカンプ 13年10月8日火曜日
  68. 68. 体制や案件に応じて作り方を変える •各ブレイクポイントで作成 •PCサイズのみ作成する •主要な部分のみ作りこんで 他はざっくりと •Designing in the browserで 13年10月8日火曜日
  69. 69. その都度都度で体制を柔軟に 変えられることが大事 13年10月8日火曜日
  70. 70. さらに最適化を 13年10月8日火曜日
  71. 71. Responsive Web Design Performance Responsive Web Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
  72. 72. Responsive Web Design Usability Performance Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
  73. 73. Good performance is good design Brad Frost 13年10月8日火曜日
  74. 74. 表示に時間が かかる 光回線3G回線 13年10月8日火曜日
  75. 75. 画像の最適化 •CSSを使う •画像を圧縮する •Webフォント •画像を差し替える 13年10月8日火曜日
  76. 76. CSSを使う #btn{ padding: 0.5em; display: inline-block; font-size: 40px; color: #333; font-weight: bold; letter-spacing: 0.1em; background: #83a603; background: -webkit-linear-gradient(top, #83a603, #769300); background: -moz-linear-gradient(top, #83a603, #769300); background: -o-linear-gradient(top, #83a603, #769300); background: linear-gradient(to bottom, #83a603, #769300); border-radius: 10px; box-shadow: 0px 5px 2px #274000,0px 0px 3px #96b618 inset; text-shadow: -1px -1px 0px rgba(255,255,255,0.2); border: 4px solid #558b00; } 13年10月8日火曜日
  77. 77. 画像を圧縮する JPEGmini 13年10月8日火曜日
  78. 78. 画像を圧縮する •JPEGmini •ImageOptim •PunyPNG 13年10月8日火曜日
  79. 79. 画像を圧縮する 915kb 1200px×800px 350kb 38%!! 13年10月8日火曜日
  80. 80. Webフォントを使う Google Fonts 13年10月8日火曜日
  81. 81. Webフォントを使う •Google Fonts •Adobe Edge Web Fonts •FONT PLUS •Type Square 13年10月8日火曜日
  82. 82. Webアイコンフォントを使う Ico Moon 13年10月8日火曜日
  83. 83. Webアイコンフォントを使う Font Awesome •Font Awesome •IcoMoon •Fontello 13年10月8日火曜日
  84. 84. <script src="matchmedia.js"></script> <script src="picturefill.js"></script> <span data-picture data-alt="pic"> <span data-src="img/smallImage.jpg"></span> <span data-src="img/largeImage.jpg" media="(min-width: 600px)"></span> <noscript><img src="img/smallImage.jpg" alt="pic"></noscript> </span> 600px smallImage.jpg largeImage.jpg 画像を差し替える 13年10月8日火曜日
  85. 85. 画像を差し替える Font Awesome •Picturefill •Responsive Images •Adaptive Images 13年10月8日火曜日
  86. 86. Responsive Images Chart 13年10月8日火曜日
  87. 87. RWDとこれからのWeb 13年10月8日火曜日
  88. 88. Android Fragmentation Visualized 多様化するデバイス 13年10月8日火曜日
  89. 89. Future of Screen Technology Productivity Future Vision 13年10月8日火曜日
  90. 90. それぞれのデバイス専用にサイトを作るのは 現実的ではなくなってくる 少ない労力でより多くのデバイスに 対応できるのが理想 13年10月8日火曜日
  91. 91. Best practice? Photo by Jeremy Keith 13年10月8日火曜日
  92. 92. RWDは発展途上 •Media Queries Level4 •Responsive Images •flexbox ,Regions,Column,... •vw,vh 13年10月8日火曜日
  93. 93. Photo by Barb Dybwad 考え方も変える 13年10月8日火曜日
  94. 94. 完全を求めない Photo by Peter Miller 13年10月8日火曜日
  95. 95. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'” John Allsopp, “A Dao of Web Design” 13年10月8日火曜日
  96. 96.         13年10月8日火曜日
  97. 97.         13年10月8日火曜日
  98. 98. What is king? Photo by Kyle Johnston 13年10月8日火曜日
  99. 99. 未来を想像し、変化に順応する Photo by dalioPhoto 13年10月8日火曜日
  100. 100. まとめ 13年10月8日火曜日
  101. 101. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 (Fluid Grid,Fluid Image,Media Queries) •グレイスフルデグラデーションで進められるとよい •早めにテストを行いリスクを減らし効率的に進める •カンプをつくるつくらないは案件に応じて •パフォーマンスを上げるため画像を最適化する •変化は必ず訪れるので少しずつ順応していく 13年10月8日火曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×