Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。
第49回はPart II: Learning Front-End Devから、39項のLearn Multi-Device Developmentを紹介します。
マルチデバイス開発について学ぶの説明です。
マルチデバイス開発について学ぶ
Image source: http://bradfrost.com/blog/post/this-is-the-web/
WebサイトやWebアプリケーションは、大型のコンピュータ、ノートパソコン、タブレット、携帯電話、いくつかの新しいデバイス(時計、サーモスタット、冷蔵庫など)で動作することができます。どのデバイスをサポートするのか、それらのデバイスをサポートする為にどう開発していくのかについては、マルチデバイス開発戦略と呼ばれています。
以下に、最も一般的なマルチデバイス開発戦略を挙げます。
- すべてのデバイスに対応する、レスポンシブ(RWD)Webサイト/アプリを構築する。
- すべてのデバイスに対応する、アダプティブ/プログレッシブエンハンスメントのWebサイト/アプリを構築する。
- 個々のデバイスまたはデバイスのグループごとに、Webサイト、Webアプリ、ネイティブアプリ、またはハイブリッドネイティブアプリを構築する。
- すでに構築したものに対し、戦略1、2、3の一部を適用して改修する。
一般的な学習リソース
- Mobile Web Development [視聴]
(モバイルWeb開発) - Responsive Images [視聴]
(レスポンシブな画像) - Responsive Web Design Fundamentals [視聴]
(レスポンシブなWebデザインの基礎) - レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える [読み物][日本語]
- POINT4 プログレッシブエンハンスメントとは？ [読み物][日本語]
- アダプティブWebデザインとは？ [読み物][日本語]
- レスポンシブ？ アダプティブ？ デザイナーにとってのベストな選択肢とは [読み物][日本語]
- レスポンシブからアダプティブへ 〜 必要な情報を、必要なときに、必要としている人へ [読み物][日本語]
- 知っておきたい！新旧ブラウザの見え方を最適化する「プログレッシブ・エンハンスメント」 [読み物][日本語]
- クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント (½) [読み物][日本語]
- プログレッシブ エンハンスメントとは？Googleの推奨するサイト構築法 [読み物][日本語]
Adaptive Web Design(アダプティブWebデザイン)
Designing with Progressive Enhancement(プログレッシブエンハンスメントなデザイン)
レスポンシブ ニュースレター、ニュース、ポッドキャスト
- Responsive Web Design Podcast
(レスポンシブなWebデザインのポッドキャスト) - Responsive Web Design Newsletter
(レスポンシブなWebデザインのニュースレター)
0 件のコメント:
コメントを投稿