Clever Geek Handbook

通常のサイトの作成を停止します。 適応は怖くない





会社のウェブサイトでオフィスのある地図を何回も見つけることができませんでしたか？ 必要なリンクにたどり着くために、画面を何回クリックしましたか？ テキストを読めないことで、ウェブサイトの所有者を何回呪われましたか？ 開発者がサイトの適応バージョンを提供していた場合、これらの問題はすべて回避できたはずです。



今日は、後から耐え難いほど苦痛にならないように、アダプティブWebサイトの計算方法をお話したいと思います。 情報は主に管理者とその共感者向けです。



アダプティブWebサイトが何であるかわからず、インターネットプロジェクトマネージャーとして働いている場合は、本当にごめんなさい。 あなたは人生に大きく遅れており、すぐにGoogleに出会います。 ウィキペディアからコピーアンドペーストしても時間を無駄にしません。



叙情的な余談
私はこの形式が死んで生まれたと信じているので、私は記事でサイトの別のモバイル版を考慮しませんでした。 デバイスは毎年成長し、画面の比率、1インチあたりのピクセル数などが変化しています。 別のモバイルバージョンでは、これらの地域のすべてのケースに耐えることはできず、サポートに不当に大きな予算を必要としません。



また、多くの場合、モバイルバージョンはサブドメインで実行されますが、これは同じコンテンツでseoに悪影響を及ぼし、そのようなソリューションのさらなる開発は頭痛攻撃のみを引き起こします。





なぜ誰がそれを必要としますか？



忠実な顧客とお金を獲得したいですか？ その後、顧客に緊急に実行し、アダプティブを販売します。 アダプティブは電子商取引に役立ちます。これは、ますます多くの人が携帯電話のtrapに陥り、そこから購入するためです。 単純な企業では、潜在的な顧客、従業員、宅配便業者がサイトで電話番号と住所を見つけるのに問題がないように、適応型（企業サイト）が必要です。 そして、私の最愛のブロガーであるあなたは、モバイル機器のユーザーがどんな状況でも快適に記事を読むことができるように適応する必要があります。



売れ筋が足りない？ 次に、Googleは「モバイルフレンドリー」ではないウェブサイトを下げることを知っています。 そして、Googleがいるところには、他の検索エンジンが追いついてくるでしょう。



そして、ここで私たちはクライアントにいます



最愛のお客様のオフィスの快適なアームチェアに座って、適応ソリューションについて話し合い、ソリューションを待っています。 あなたが稀な幸運な人であれば、クライアントは「あなたはサイトのデザインを長い間更新したいので、すべてのユーザーがそれを使いやすくするのに害はないだろう」と言います。 この場所で、あなたはクライアントにキスをし、見積もりを取るために満足したままにします。



運が悪ければ、動揺しないでください。 クライアントは、「現在のサイトが好きですが、アダプティブはクールで楽しいので、やってみましょう」と言うかもしれません。 心配することは何もありません。主なことは、アダプティブがいくつかのルールに従う必要があるため、サイトが少し変更される可能性があることをクライアントに通知することですが、もちろん、あなたは以前のようにサイトを作るためにすべてを行います。



見積もり



クライアントのKPを構成する基本的な見積もりがあることを考慮します。 明らかに、基本的な見積もりはプロジェクトの複雑さに依存します。



だから...



レスポンシブデザインを使用してサイトを作成する場合とレスポンシブデザインを使用してサイトを作成する場合の見積もりの​​違いは何ですか？



それはすべて、初期見積もりの​​計算方法に依存します。 経験から、プロのフロントエンド開発者はアダプティブにもう少し時間を費やすと言えます。主なことは自分の作品を適切に構築することです。 私の経験をとるなら、基本的な見積もりではそのような変更がありました：







ご覧のとおり、推定値は大きくなっていますが、それほど大きくはありません。 価格上昇が起こった理由をクライアントに説明することは難しくないと思います。



サイトの最初からすべてが明確になっていますが、クライアントがサイトの大きなバージョンを変更したくない場合はどうでしょうか？







このようなプロジェクトの見積もりに戻りましょう。



ほぼすべての技術プロセスを実行する必要があると既に述べましたが、これはサイトをゼロから作成する場合にも当てはまります。 推定は、どの適応方法に進むかによって大きく異なります。 病院の平均では、推定値は次のように変化します。







開発プロセス



アダプティブは、サイト開発プロセスにいくつかの変更を加えます。



最も重要なことは、デザイナー、デザイナー、フロントエンド開発者がプロ​​ジェクトグリッドについて最初から同意していることです。 それ以外の場合は、すべてを苦労してやり直します。 大規模バージョンの設計が既に準備されているサイトの場合、24列を使用することをお勧めします。グリッドの下に現在のサイトを配置する方がはるかに簡単だからです。



設計



上記で述べたように、設計者は適応プロトタイプを作成する必要があります。 これに問題はありませんでした。作業にはAxure RPを使用しています。これにより、複数のレイアウトを実行できます。 また、設計者は、1024の解像度でユーザーに表示するものを決定する必要があります。



問題1024
1024ピクセル幅のモニターを使用しているユーザーがまだいます。 同意して、タブレット用のバージョン（たとえば、水平位置のiPadには1024ピクセルがある）を表示するのはなんとなく論理的ではありません。 理論的には、このようなユーザーにはPCバージョンが表示されるはずです。 しかし、あなたが決める。



私が出会ったプロジェクトの統計によると、1024pxのモニターを使用しているユーザーの割合は無視でき、私たちは単にそれらを無視しました。





設計



すべてのレイアウトをレンダリングするオプションを選択した場合、デザインのプロセスはあまり変化せず、時間がかかります。 しかし、部分的なレンダリングを選択した場合、何も見逃さないように一生懸命働く必要があります。 開始するには、サイト全体で最も頻繁に繰り返されるページ要素のリストを作成し、ウィジェットページと呼びましょう。 画面サイズに応じてボタン、入力フィールド、フォームエラーメッセージ、ヘッダーなどがどのように変化するかを必ず示すようにしてください。 その後、モバイルデバイス用のメニューを描画して、その外観と動作を正確に理解します。 スプライトから削除する必要があるベクトルアイコンやその他の小さなグラフィックスを忘れないでください。 電子商取引プロジェクトがある場合は、この段階の後、設計に戻ってプロトタイプを変更できます。 そのため、ユーザーがサイトをどのように操作するかをよりよく理解できます。



フロントエンド開発



ほとんど変更はありません。 フロントエンドは以前に合意したグリッドを使用し、「モバイルファースト」の原則に基づいています。



タスクでは、エグゼキューターは次のセットを受け取る必要があります。



  1. プロトタイプ（ブロックの動作の方向付けに役立ちます）;
  2. デザイン（サイズ変更時の変更のウィジェットとテキストの説明）;
  3. 考慮すべき機能のチェックリスト。




機能といえば、次のようなものです。



  1. 電話番号をタップすると、ダイヤラーアプリケーションにアクセスする必要があります。
  2. 数字のみを入力できる入力では、数字付きキーボードが開きます。
  3. モバイルユーザーが苦労して2メガバイトの写真をダウンロードすることはありません。
  4. モバイルプラットフォームに実装できない機能がある場合は、ユーザーが理解できるスタブを作成することを忘れないでください。
  5. ページはGoogleテストに適切に合格する必要があります（ https://developers.google.com/speed/pagespeed/insights/?hl=en ）。




プログラミング



アダプティブサイトの存在は、プログラミングプロセスにほとんど影響しません。



プログラマーがより注意する必要があるいくつかのケースがあります。



  1. スマートフォン用の大きなテーブルがリストの形式をとる場合があります。 通常、これは、出力が2つの異なるレイアウトになることを意味します。
  2. サイトメニュー（バーガーメニュー）は、アイテムが配置されているページの下部へのアンカーであることがわかります。 この場合、プログラマは2つのレイアウトが常に接続され、同じように機能することを確認する必要があります。




結論



レスポンシブデザインは簡単で、それほど高価ではありません。 プロジェクトの予算を平均で30％増やすことで、頭を整理しておくことができ、将来はモバイルユーザーで問題が発生することはありません。



私の記事があなたの恐れを克服する助けとなり、レスポンシブデザインを顧客に販売できることを願っています。 私はサイトが誰にとってもどこでも便利であることを望んでいます。



PS



左利きの人々の問題を解決できれば、普遍的な喜びが生まれます。 この問題は主に大げさですが、インターフェースを調整するためにユーザーが左利きであるかどうかを判断するツールがないのは残念です。


More articles:


All Articles