advertisement

Ishihara wcan summer_lt20130703

100 %
0 %
advertisement
Information about Ishihara wcan summer_lt20130703

Published on July 6, 2013

Author: takashiishihara94

Source: slideshare.net

advertisement

RealAdaptive WebDesign Grow Group 石原 隆志 本当のアダプティブウェブデザイン WCAN 2013 SUMMER | LT 2013.07/06

RealAdaptive WebDesign About                                            Grow Group 仕事 Frontend・webdesign 熊本県 出身 since1990 大歓迎です SNS Responsive&Adaptive webdesign ※ 一緒に働く仲間をGrow Groupでは募集しています。学生さん大歓迎です! 自己紹介

RealAdaptive WebDesign Responsive&Adaptive webdesignRealAdaptivewebdesign Agenda                                     今日紹介すること 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。 2 . アダプティブwebデザインの現在 3 . まとめ

RealAdaptive WebDesign ある時こんな記事を発見 http://engineer.typemag.jp/article/andyclarkeRealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptivewebdesign RealAdaptive WebDesign http://engineer.typemag.jp/article/andyclarke 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptivewebdesign RealAdaptive WebDesign http://engineer.typemag.jp/article/andyclarke 「今のレスポンシブwebデザインは誤解されている」 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptive WebDesign http://www.colly.com/Responsive&Adaptive webdesign http://www.colly.com/RealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

Adaptive WebDesign - 今のレスポンシブWebデザインは誤解されている AndyClarke RealAdaptivewebdesign http://www.gavinelliott.co.uk/2011/08/responsive- and-adaptive-design-defined/ 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptive WebDesign .container { ! width: 90%; ! max-width: 1200px; ! margin: 0 auto; } Responsive Web Design レスポンシブ web デザイン RealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptive WebDesign .container { ! width: 90%; ! max-width: 1200px; ! margin: 0 auto; } Responsive Web Design レスポンシブ web デザイン RealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。 mediaQuery + Fluid grid + Flexible media = Responsive Web Design すべてのデバイス幅に対応

RealAdaptive WebDesign .container { width: 700px; } @media only screen and (max-width:767px)and(min-width:480px) { .container { width: 420px; } } @media only screen and (max-width: 767px) { .container { width: 300px; } } Adaptive Web Design アダプティブ web デザイン RealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。

RealAdaptive WebDesign .container { width: 700px; } @media only screen and (max-width:767px)and(min-width:480px) { .container { width: 420px; } } @media only screen and (max-width: 767px) { .container { width: 300px; } } Adaptive Web Design アダプティブ web デザイン RealAdaptivewebdesign 1. アダプティブwebデザインと   レスポンシブwebデザインの違い。 mediaQuery + Fluid grid + Flexible media = Adaptive Web Design 限られたデバイス幅に対応

僕が知っている 今までのアダプティブwebデザイン RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign + http://tab.example.jp + http://sp.example.jp + http://example.jp これまでの認識 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

Adaptive WebDesign それぞれのデバイスに適応したサイトを用意し、 ユーザーエージェントで振り分ける RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

Adaptive WebDesign それぞれのデバイスに適応したサイトを用意し、 ユーザーエージェントで振り分ける RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン ?どっちもアダプティブwebデザイン なんですけど........

RealAdaptive WebDesign 4 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign 4アダプティブwebデザインと呼ばれるものがあるらしい。 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

1 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign MediaQuery + 固定幅 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

2 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign + http://tab.example.jp + http://sp.example.jp + http://example.jp これまでの認識 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign + http://tab.example.jp + http://sp.example.jp + http://example.jp これまでの認識 RealAdaptivewebdesign デバイスごとに 適応化したサイトを用意 2. 現在のアダプティブwebデザイン

3 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign Adaptivewebdesign Responsive web design Progressive Enhancement アダプティブwebデザイン レスポンシブwebデザイン プログレッシブエンハンスメント Device APIs RessResponsive web design + Server Side Components Platform Optimization プラットフォーム オプティマイゼーション デバイスAPI RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign Adaptivewebdesign Responsive web design Progressive Enhancement アダプティブwebデザイン レスポンシブwebデザイン プログレッシブエンハンスメント Device APIs RessResponsive web design + Server Side Components Platform Optimization プラットフォーム オプティマイゼーション デバイスAPI デバイス適応技術の すべてを含めた 広義のアダプティブwebデザイン RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

4 RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign http://www.slideshare.net/xgmedia/designing-with- sensors-creating-an-adaptive-system?ref=http ://dx.24-7.co.jp/adaptive-design-with-sesors/ 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign RealAdaptivewebdesign ユーザーの環境に適応させる アダプティブwebデザイン 2. 現在のアダプティブwebデザイン

RealAdaptive WebDesign まとめ RealAdaptivewebdesign 3 . まとめ

RealAdaptive WebDesign RealAdaptivewebdesign 3 . まとめ なぜ、こんなに アダプティブwebデザインという 言葉が乱立しているのか。

RealAdaptive WebDesign レスポンシブwebデザインにも 問題があり、 少しでもデバイス・環境・案件規模に 適応したweb制作を行う 手法があるということ。 RealAdaptivewebdesign 3 . まとめ

RealAdaptive WebDesign レスポンシブ以外の手法も知り、 サイトの目的・規模に 「適応」した制作を。 RealAdaptivewebdesign 3 . まとめ

RealAdaptive WebDesign ご清聴ありがとうございました。 RealAdaptivewebdesign 3 . まとめ

Add a comment

Comments

大壳り出 | 06/06/15
ブログWebサイトこのの話題に 私の父に感謝のおかげで、このサイト 素晴らしい 実際にはです。 [url=http://www.burduracicek.com]大壳り出し品質保証[/url]
大人気 オ | 08/06/15
私は ハプニング場所を取る何私が持っているこれに新しい、私はこのつまずい発見それ正に 負荷を私を|それが助け助けました。 &| 寄与貢献を与えるに私は願って私は期待しています アシストヘルプ 他 ユーザーそのような|私を助けを支援。 グッド仕事。 [url=http://itartraining.pro]大人気 オススメ[/url]
当通販で | 10/06/15
あなたのテーマ/デザイン|本当に楽しん愛する | 私は私は サイトをWebサイトのブログ。あなたがこれまでの任意に実行することができませんWebブラウザ 問題?私のブログ一握りの 観客は Explorerで正常に| 作業動作するが、素晴らしいですねなく、私の不満がオペラで。 提案 問題を修正するのに役立つために何かを持っていますか? [url=http://bipartyhouse.com]当通販で最低価格[/url]
大特価 | 11/06/15
役立つ| |便利な|価値| 有益である Webサイト、私が持っている良いそれは です ノウハウ|知識|私の経験をサポートするために|の賛成で|のために設計されています。感謝管理 [url=http://www.dwtsealant.com]大特価[/url]
信用第一 | 11/06/15
どんなに場合、事したがって、いくつかのいずれかが彼の不可欠を検索し、彼/彼女が願い詳細にその利用できるようにするために、そうそのことは、こちらに維持されています。 [url=http://mba.swu.ac.th]信用第一[/url]
Williamei | 13/06/16
replica mens louis vuitton wallet http://bestquitsmokingway.com - bestquitsmokingway!.. louis vuitton taiga briefcase http://bestquitsmokingway.com/lv-zippy-coin-purse-aid-10985.html http://bestquitsmokingway.com/how-much-is-a-goyard-wallet-aid-17040.html http://bestquitsmokingway.com/hermes-archives-aid-3078.html http://bestquitsmokingway.com/hermes-brazil-scarf-aid-2307.html http://bestquitsmokingway.com/hermes-birkin-bag-colors-2012-aid-3771.html http://bestquitsmokingway.com/hermes-calendar-aid-3272.html http://bestquitsmokingway.com/patek-philippe-fake-aid-14623.html http://bestquitsmokingway.com/fake-ferrari-watch-aid-18382.html http://bestquitsmokingway.com/lv-replica-luggage-aid-34067.html http://bestquitsmokingway.com/tiffany-rose-gold-ring-aid-11190.html http://bestquitsmokingway.com/prada-saffiano-lux-tote-replica-aid-14607.html http://bestquitsmokingway.com/antigona-givenchy-aid-7279.html http://bestquitsmokingway.com/speedy-bag-louis-vuitton-price-aid-30402.html http://bestquitsmokingway.com/rolex-fakes-for-sale-aid-31023.html http://bestquitsmokingway.com/cartier-mens-wallet-for-sale-aid-27086.html hermes rocket