[翻訳] モバイル ファースト 反応型 ウェブ デザイン mobile-first responsive web design

原文はhttp://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/載せる.

[力走] モバイル ファーストは そのまま モバイル ファーストと 使う.

モバイル-ファースト 反応型 ウェブ デザインと言う(のは)?

モバイル-ファースト 反応型 ウェブデザインは 哲学科 戦略の 結合だ. そして 窮極的には どうな 器機でも 最高の ウェブ 経験を 割 数 あるように 夏期 ための のだ. デジタル 風景は ますます もっと 複雑になって ある. 私たちは ありったけ デジタル デバイス 間で 経験を デザインすると する. おもしろくて 見える. そうなの ないが?

モバイル ファースト

モバイル ファースト増えたLuke Wroblewski街 初め 作った 哲学だ. 使用者 経験を 創造する 時 モバイルである 場合を 最優先で 焦点を 合わせて デザインを しようという ことだ. こんなに 始まった ことだ.

1. もっと 多い 人々これ ウェブサイトに 到逹するように 欠点. (世界 人口の 77%街 携帯電話を 持って ある. 2011年に 発売開始された 携帯電話の 85%に ブラウザーが ある.[インターネット 探索 機能が ある. - 訳者])
2. デザイナーが 核心 内容と 機能に 焦点を 合わせるように 強制する. (画面 サイズが 20%路 減って 捨てた 時 どうに 割 のか?)
3. デザイナーたちが 新しい 技術を 活用して, 革新を すること あるように 欠点. (位置基盤 サービス, タッチ イベント 等々)

反応型 ウェブ デザイン

反応型 ウェブ デザイン銀Ethan Marcotteこれ 作り出した 用語だ. 多様な 画面 解像度に ウェブサイトの レイアウトを 適応させる のを 明確に 表現すること ための 用語だ. 反応型 ウェブデザインは こういう 式で 作る.

1. 流動性ある グリッド : 器機の 画面 サイズに よって 細くなった 広くなった する.
2. 柔軟な イメージと メディア : どうな 解像度でも 内容を 邪魔するの ない.
3. メディア クイーリー : 海上道別で 切って デザインを 割 数 あるように 考案された.[0‾320pxまでは こんなに 見えるように して, 321px‾640pxまでは こんなに 見えるように して など.]

漸進的 改善

窮極的に モバイル-ファースト 反応型 ウェブデザインは 基本的に漸進的 改善(Progressive Enhancement)という ウェブの 戦略と デザインに 基盤した のだ. 漸進的 改善という 方法を 使えば, 力強い 土台 上に 改善用 ツングウィを 賢く 追加する 式の 方法で, 皆に 接近性を 進める 数 ある. (望むには 最適化された 経験も 提供する 数 ある.)

モバイル-ファースト 反応型 ウェブデザインが 作動する 理由

躍動的な [デ−ゾトル - 訳者] 風景は ますます 複雑になった. とても 多い モバイル 器機(ピッチャー フォン, スマートフォン, タブレット), 特化された 器機(以北 リーダー, テレビ, インターネット 器機 など) そして もっと 伝統的な デジタル 器機(テストトップ, ラップトップ, ネッブック). また, 私は すなわち 何か 這うのが 私たちを 襲うか 分からない. それでは 質問が 明確になる : これ あらゆる 這うのを のために だ デザインを すると なって?

モバイル-ファースト 反応型 ウェブデザインは これに 大韓 立派な 解決策だ. モバイルで 始めて 次第に 改善して 行きながら あらゆる のを 具現する のだ. (はなはだしくは 初心者的な 水準でも 可能だ.) インターネットに 接近 可能な 這いなら どうな 這うとか ウェブサイトに 来て 機能的な 経験を 割 数 あるように なる のだ. それでは, 特徴を 見抜いて, 条件付き スクリプトを ローディングして, メディア クイーリーと 違う テクニックを 適用して 這うのに よった 最適化された 経験を 提供する のだ.

これは, 隣家 おばさんが 4年 私は クリスマスに 受けた 大時代 ウェブ 器機でも サイトが (ある 位は) 作動する のという のを 意味する.

どこに 適用するか

モバイル-ファースト 反応型 ウェブデザインは サイト 基盤を 全面 再修正を 要求する. そして もっと 重要するように, 観点に 大韓 全面 再修正を 要求する. これは 早く なる 蟹 ない.これは 控え目な 計画, 時間, そして 堅固な 実行を 要求する. これは 難しい.こういう 話を 聞けば 気後が 入るのも 分からない. するが 得る 数 ある のは 阿洲 大きい. 新しい 這うのが 登場して 注目を 受ける 度に ウェブサイトを 完全に 鳥で 作る 作業を 繰り返す 代りに, 新しい 這うのに 合わせて 使用者 経験を 最適化する 一万 すれば なる. 時間を 節約して タイヤを 鳥で 作る 徒労を 防止する 数 ある のだ.

モバイル-ファースト 反応型 ウェブデザインを する 方法

これほど なれば, 夢想のように 聞こえるかも 分からない. これ 原則たちが 本当に ウェブ標準で 広範囲な 規則(application)載せて, 最高の 方法という のを 信じても 良い. これは 私たちが 今日 すぐ モバイル-ファースト 反応型 ウェブデザインを 始めても なるという ガール 意味する. それでは どこで 始めれば なるか?

コンテンツを 構造化する やけどして 出発しよう

コンテンツ.アダシピ, これで lorem ipsumおこるが プレースホルダー イメージを 変えて 入れる. そうに 割 時, コンテンツは 重要になる. これは 本当に 重要だ. これが 意味する ところは, 力強くて, 多様な 所に 使う 数 あり, 目的が 確かな コンテンツが 仮装(家長) 重要だという のだ. どうな インターフェースも ない, サイトの コンテンツを 思って 紫.誰かが 彼 コンテンツに 神経を 使うと したら, なぜ そうなの するかどうかを 自らに 質問して 紫. もし, ここに 自信ありげに 答える 数 なければ, どうな デザインだか, どうな ゾックヨングバングボブイドンガンに あなたを 手伝ってくれる 数 ない. (If you can’t confidently answer that question, I’m afraid no design, no matter how adaptive, can help you.)

コンテンツを まず 構造化真書コンテンツの 焦点と 階層を 作る. これは 私たちの メッセージを 構造化する の, 話を 伝達する 方法に 関する のだ.コンテンツが どうな 環境で ゾンダルドエドンガンに, 意味ありげに 伝達する 数 あるように する のだ.これは コンテンツを どこにでも 送る 数 あるように 準備する のだ. (It’s about constructing your message and telling your story in a way that’s meaningful to your users and is cohesive in whatever context they may be in.It’s preparing your content to go anywhere.)

討論を 督励する 次元で 言ったら: ネイティブ アプリケーション vs ウェブ[ネイティブ アプリケーションは エブや プログラム, すなわち ウェブが ない プログラムを 思えば なる. - 訳者], モバイル サイト vs “一つの ウェブ”[一つの ウェブを 作って 這うのに よって 模様だけ 違うように 見えて 与える 戦略, 反応型 ウェブサイトも こういう 戦略で 使う 方法 中 一つだ - 訳者], その他 等々で 皆が 同意する ところは 力強い コンテンツ 戦略が ますます もっと 重要になって あるという 点だ. 結局 仮装(家長) 重要な のは, 這うことは 出てから 消えて, 技術的 トレンド やっぱり 興亡盛衰を 繰り返えすが, コンテンツと ビジネス 目標と, 使用者の 目的は 人を のという 点だ. ナイキは 増える 人々が 履き物を 買うように しようと 努力する. (はなはだしくは 私たちが ホログラムと 相互作用するように なる 未来にも 同じな ことだ.) したがって, コンテンツを 見せてくれる 最高の 方法が 何やらを 置いて 二 陣営が 論争を する 間, 目的が 明らかで 多様な 所に 使う 数 ある コンテンツが 追い求める に如く 価値が ある ユイルハン のという 点は 最小限 私たちが 同意する 数 ある 点だ.

モバイルで 始めること

モバイル 環境に 合わせて 製作した 後 デスクトップに 当たるように 漸進的に 進めて 出る のと デスクトップ 環境に 合わせて 製作した 後 モバイル 環境に 当たるように 漸進的に 減らして 出る のを 比べて 見よう. 電子の 場合 インターネット 連結 速度と 画面 サイズが 大きくなっても メッセージ, コンテンツ そして 機能が 損傷されるの なくて そのまま 残る. するが 漸進的に 減らして 出たら, モバイル 環境まで 行った 焚く 核心 メッセージと 機能が 損傷を 口を 危険が 大きくなる.

参照: モバイル ウェブを 完全に デザインする のは 大変だ だから 思っては 少し 単純化した. それは 本当 大変だ. 有能な 人々さえ モバイル ウェブの 問題 だから 引き続き 苦労する のだ. そのため 結論は “これ 大変だ”増えた のだ. しかし, モバイルは 拡張中で, 彼 結果 モバイル 経験も 引き続き よくなって ある. 絶望するの ないで!

環境に 最適化すること

今 モバイル サイトが 用意されたし, 反応型の 基盤が 用意された. 今 サイトの レイアウトと 機能, そして (どうすれば はなはだしくは) 内容を [デスクトップ 方を 向かって - 訳者] 漸進的に 進める 焚く. これを 陶瓦 竝び 数 ある テクニックと ツールは おびただしく 多い. (例を 入れば responsive images,Sencha.io Srcなどで イメージを 動的に 入れ替る 数 ある.) しかし 再び 言わば, これが 本当に 団地 漸進的 向上だ だから, 最高の 方法は 専門家を よる のだ. (but again because this is really just progressive enhancement at it’s finest I’ll defer to the experts.)

Aaron Gustafsonこれ 使ったAdaptive Web Design銀 漸進的 向上に 大海 本当 最高の 方法, 例示, テクニックを 知らせて 与える. Filament Group義Designing with Progressive Enhancement銀 漸進的 向上の 美しい 世界へ 私たちを 深み ひいて 行く. これ 本で 討論される 主題たちは ウェブの 未来に 関する のだ. すなわち, ユーザーの 環境が 未来の 波という 点に 焦点を 合わせた のだ.

支援 vs 最適化(support vs. optimize)

支援科 最適化義 差を 感知する のは 重要だ. ウェブに 接続する 数 ある 地球上に 存在する あらゆる 這うのに 最適化する のは 不可能だ. そのため 結局 私たちは どうな 器機と ブラウザーに 合わせて 最適化 するか 戦略(ビジネスと 読む)を 決めると する. サイト 分析 ツールを 通じて 訪問者を もうちょっと 寝る 理解する 数 ある. するが サイト 分析 ツールには 誤差が ある. (サイト 分析 ツールは ジャバスクリプト 依存的だ. また 分析 ツールが だ ローディングされる 時まで 待つの ない 人々を 追跡する

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。