Embed Size (px)
DESCRIPTION
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
Citation preview
lsquo130519 Web Developer Selection
レスポンシブWebデザインの実践ワークフロー
小川 裕之
13年6月4日火曜日
lsquo130519 Web Developer Selection
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める
制作会社でデザインコーディングディレクション
コンサル等を幅広く経験する2012 年 4 月よりフリーランスとして独立
「レスポンシブWebデザイン入門」執筆
barchin hiroogw
小川 裕之
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフロー
bullレスポンシブWebデザインの ワークフローbullヒアリングbull情報設計bull画面設計bullプロトタイプbullテストbullデザイン
Agenda
13年6月4日火曜日
lsquo130519 Web Developer Selection
実制作AgendabullFluid GridbullFluid ImagebullMedia Queriesbullビューポートbull高速化 bullRESS
13年6月4日火曜日
WORKFLOWワークフロー
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し
Web デザイナーのアルバイトとして複数の制作会社を転々としたり
海外に行ったりしたあと横浜の制作会社に務める
制作会社でデザインコーディングディレクション
コンサル等を幅広く経験する2012 年 4 月よりフリーランスとして独立
「レスポンシブWebデザイン入門」執筆
barchin hiroogw
小川 裕之
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフロー
bullレスポンシブWebデザインの ワークフローbullヒアリングbull情報設計bull画面設計bullプロトタイプbullテストbullデザイン
Agenda
13年6月4日火曜日
lsquo130519 Web Developer Selection
実制作AgendabullFluid GridbullFluid ImagebullMedia Queriesbullビューポートbull高速化 bullRESS
13年6月4日火曜日
WORKFLOWワークフロー
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフロー
bullレスポンシブWebデザインの ワークフローbullヒアリングbull情報設計bull画面設計bullプロトタイプbullテストbullデザイン
Agenda
13年6月4日火曜日
lsquo130519 Web Developer Selection
実制作AgendabullFluid GridbullFluid ImagebullMedia Queriesbullビューポートbull高速化 bullRESS
13年6月4日火曜日
WORKFLOWワークフロー
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
実制作AgendabullFluid GridbullFluid ImagebullMedia Queriesbullビューポートbull高速化 bullRESS
13年6月4日火曜日
WORKFLOWワークフロー
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
WORKFLOWワークフロー
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by INtelFreePress
ワンソースであらゆるデバイスに対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionSource A Response to lsquoResponsive Web Design is Not the Futurersquo 13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
OS
入力デバイス
解像度
Browser 回線
Scree Size
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
想定通りに動かない読み込みが遅いレイアウトが崩れる
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装してみないと分からない
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
従来のワークフロー
情報設計
画面設計
デザインカンプ 実装 テスト
修正修正修正
修正
問題発生
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by professor megan
リスクを想定したワークフローを
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
早い段階でのテスト
プロトタイプ
調整 テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストを繰り返し進める
プロトタイプ
調整 テスト
実装
調整 テスト
プロトタイプ
調整
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 1
実装
調整 テスト
テスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
情報設計
画面設計
プロトタイプ デザイン
ワークフロー例 2
実装調整
テスト
テスト
プロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローはひとつに定まらない
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ワークフローの共通理解
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントの協力
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
HEARINGヒアリング
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンセプト
ターゲットユーザー
メインデバイス(OS ブラウザ)
Photo by Keturah Stickann13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
各種法のメリットデメリット
レスポンシブWebデザイン マルチソース
メリットワンソースで無数のデバイスに対応
URLがひとつ 更新が比較的容易
よりデバイスの特性に最適化したサイトを
制作できる
デメリット複数デバイスを考慮しなければならない
設計が難しい発展途上
制作や更新の手間がかかる
URLが異なる新しいデバイスが出るたび
に対応させる必要がある
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionスマートフォンデータベース
OVER200
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Sourcehibizpartnerscom
Sourcegadgetsndtvcom
Sourceonenigerianboycom
FUTURE
Sourcegpadtv13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインは万能ではないが
どのデバイスにも柔軟に対応できる
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
レスポンシブWebデザインとは
プログレッシブエンハンスメント
グレースフルデグラデーション
ピクセルパーフェクトではない
ワークフローへの協力
伝えること
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
CONTENTS STRATEGY情報設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
最低スペックのデバイスから設計をすることでその他のデバイスにも容易に対応
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionOUR MOBILE PLANET13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
SKETCH WIREFRAME画面設計
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計は絶対ではない
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection Photo by baldiri
Sketch
素早く描ける
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection httpblogchrisiskcomwireframing
正確に情報が伝わる
Wireframe
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ケースに応じてスケッチワイヤーフレームを使い分ける
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
画面設計からプロトタイプへの工程を早く
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
PROTO TYPEプロトタイプ
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストをするための試作モデル
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
フレームワークを使うと作成が早い
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttptwittergithubcombootstrap13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpfoundationzurbcom13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionSemantic GRID SYSTEM13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
TESTテスト
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
不確定要素をなくす何度も繰り返す
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionPhoto by Konch
実機に勝るテストはない
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機テストは時間と費用がかかる
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
テストツールシミュレータを上手に利用
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionresponsivepx13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionVIEWPORT RESIZER13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionAndroid SDK13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionAdobe Edge Inspect13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
実機gtシミュレータgtWebツール
テストの信頼度
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
DESIGNデザイン
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Designing in the browser
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
余分な作業が減る完成イメージの相違がない
Designing in the browserのメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
全てのサイズのデザインカンプを作るのは大変
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
時間と費用の削減=クライアントにもメリット
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプがなくて支障はないのか
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle TilesStyle Guide
カンプの代用
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionSorcewebdesignerdepotcom
MOOD BOARD
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
クライアントのイメージを具現化する
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionStyle Tiles
STYLE TILES
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ロゴ配色テクスチャエレメントフォントメインイメージ形容詞etc
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Style Tiles制作のフロー
デザイン
修正 確認
ヒアリング 解釈
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビジュアルイメージを決定する
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionFoundation 4
STYLE GUIDE
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンドエンジニアとデザイナーが協力して作成
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Mood BoardStyle Tilesでビジュアルを決定Style Guideで共通モジュールの管理
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
実装
Style Guide
Style Tiles
Prototype
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
DEMO
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
自分の価値をどこに置くかが重要
VisualDesign
Cording
VisualDesign
UI
IA
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
デザイナーは情報設計から実装まで関わる
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプを求められたら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプは静止画である必要は修正に対応しやすいのはどちら
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
カンプはピクセルパーフェクトのデザインでは実用性があったがhellip
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
まずはPCのカンプだけhellipざっくりとしたデザインまでhellip
できるとこから少しずつ変えていく
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
環境に合わせてワークフローを柔軟に変える
Photo by joped13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
TECHNIQUE実制作
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid GridFluid ImageMedia Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
幅が可変であるグリッド
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
均一性を保ったまま可変レイアウトを実現
Fluid Grid
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
TravelSpice Home Tour Garelly Acess Contact
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
Photo Garelly More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Travel Spice
HEADINGHEADING
HEADINGHEADINGHEADINGHEADING
HEADINGHEADING HEADINGHEADING
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
HEADINGHEADINGTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
More
Copyright 2012 travel spice
Home Tour Garelly Access Contact
t f
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツの幅
px
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
コンテンツ幅divide親コンテンツ幅times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
620px 300px
960px
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
620divide940times100
645833 3125
960px300divide960times100
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
慣れれば最初からで進めてもいい
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
960px
60px 20px
1カラム=60pxdivide960pxtimes100=625
2カラム=140pxdivide960pxtimes100=145833
3カラム=220pxdivide960pxtimes100=229166
4カラム=300pxdivide960pxtimes100=3125
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
8カラム
645833 3125
960px
４カラム13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
Fluid Image
画面サイズに応じて画像が可変する
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
img max-width100 heightauto
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプと特性に関する条件を調べその結果に応じて処理を行う
Media Queries
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 640px)bodybackground-color red
メディアがスクリーンで表示領域640px以上の場合
背景色を赤にする
メディアタイプ メディア特性
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディアタイプ デバイスの種類
screen 表示領域の幅
print 表示領域の高さ
TV 家庭用テレビ
projection プロジェクタ
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
メディア特性 情報 max-min-
width 表示領域の幅
height 表示領域の高さ
device-width デバイスの横方向の解像度
device-height デバイスの縦方向の解像度
orientation 表示領域の向き
resolution 解像度
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
import url (pccss) screen and (min-width600px)
ltlink rel=stylesheet href=pccss media=screen and (min-width600px)gt
media screen and (min-width600px)style
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
media screen and (min-width 40em)bodybackground-color red
1em=16px 640px=40em
メディアがスクリーンで表示領域40em以上の場合
背景色を赤にする
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
pxで指定 emで指定
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ビューポート
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltmeta name=viewport content=width=device-widthgt
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
プロパティ 内容 デフォルト値
width Viewportの横幅 980px
height Viewportの縦幅 横幅とアスペクト比から
initial-scale 倍率の初期値 表示範囲から計算される値
user-scalable 拡大縮小の可否 yes
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
HIGH PERFORMANCE高速化
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS3CSSスプライトWebフォント()
SVG()
CDN画像圧縮ファイル圧縮
()場合によっては画像より重くなることもある
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwwcss3makercomindexhtml13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSSスプライト
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionGoogle web fonts13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionFont Awesome13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpwwww3orgGraphicsSVG13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionhttpsdevelopersgooglecomspeedlibraries13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selectionjpeg mini13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
CSS以外も使う
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionBREAKPOINTSJS13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer SelectionResponsejs13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
フロントエンド+サーバーサイド
RESSResponsive Web Design + Server Side Components
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ltphp if (wp_is_mobile()) gtmobileltimg src=image_smallpng alt=gtltphp else gtPCltimg src=image_smallpng alt=gtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
function hoge_is_mobile () $ua = array( iPhone iPhone iPod iPod touch Android Android blackberry Blackberry ) $pattern = implode(| $ua)i return preg_match($pattern $_SERVER[HTTP_USER_AGENT])
ltphp if(hoge_is_mobile()) gtltpgtmobileですltpgtltphp endif gt
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
手段に囚われない使える技術は使おう
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
lsquo130519 Web Developer Selection
ご清聴ありがとうございました
13年6月4日火曜日
