政権はずっと前に会社のスタートアップアカウントを提供しており、その見返りに、自宅で使用するあらゆる種類の興味深いことについて話すことを約束しました。
今日は、着陸（着陸ページ）の作り方についてお話します。
私たちは、ほとんどの開発者がまだ使用していないものを使用しますが、私たちにとっては生活が楽になり、他の人にとっては楽になります。
本質は何ですか
潜在顧客に何を説明し、ターゲットアクション（購読、購入）を実行させたいと思うように、ターゲットオーディエンスを引き付けるために着陸が行われます。
観客は通常セグメント化されているという事実により、訪問者の異なるグループに対していくつかの着陸オプションがありますが、通常はいくつかのインフォグラフィックとテキストが異なります。
着陸はほぼ毎日（1日に数回）変化します。また、いくつかのバリエーションのサポートが頭痛にならないように、ページの作成とカスタマイズに十分な柔軟性を提供するアプローチが必要です。
その後、サンプルと実験は、私たちにとって非常にうまく機能するいくつかの安定したルールと、共有することを決めたもののように見えました。
サーバーはコンテンツのみを提供します
つまり、サーバーから返されるHTMLは、コンテンツの表示方法とはほとんど関係ありません。
これは、ページのコンテンツが可能な限り意味的に正しく、必要最小限のタグで形成されることを意味します。
たとえば、次のように：
<article is="cs-indiegogo-benefits" id="benefits"> <h1>Our benefits</h1> <picture> <source srcset="/components/modules/Indiegogo/includes/img/benefits-1-mobile.jpg" media="(max-width: 1100px)"> <img src="/components/modules/Indiegogo/includes/img/benefits-1.jpg" alt="Benefits"> </picture> <picture> <source srcset="/components/modules/Indiegogo/includes/img/benefits-2-mobile.jpg" media="(max-width: 1100px)"> <img src="/components/modules/Indiegogo/includes/img/benefits-2.jpg" alt="Benefits"> </picture> <picture> <source srcset="/components/modules/Indiegogo/includes/img/benefits-3-mobile.jpg" media="(max-width: 1100px)"> <img src="/components/modules/Indiegogo/includes/img/benefits-3.jpg" alt="Benefits"> </picture> <dl> <dt>Appliance Detection</dt> <dd>Ecoisme detects all devices in your home and shows you statistics of their usage</dd> <dt>Personalized Tips</dt> <dd>Get clear and specific tips, based on usage of your home appliances</dd> <dt>Integration with smart devices</dt> <dd>Having smart devices like NEST or WeMo, make them smarter with Ecoisme</dd> </dl> </article>
Webコンポーネントは、デザインに従ってコンテンツを表示します
私たちのコンテンツは外観とほとんど共通していないため、Webコンポーネントはグラフィカルなプレゼンテーションのすべての作業を引き受け、ページ上でデザイナーの心に浮かぶことは何でもできます。
便宜上、システム
<header>
、
<article>
などを継承するPolymer要素が使用されます。
上記のコードのWebコンポーネントは、2つの部分で構成されています。
<polymer-element name="cs-indiegogo-benefits" extends="article" noscript> <template> <link rel="stylesheet" href="style.css"> <div> <content></content> </div> </template> </polymer-element>
いくつかのスタイル（実際、モバイルバージョンを考慮することはそれほど少なくありません）、最終的には美しいブロックになります。
この場合、すべてが単純であり、すべてのコンテンツがそのまま内部に入りますが、コンテンツは部分に分割され、要素ごとに挿入されます。
<polymer-element name="cs-indiegogo-header" extends="header"> <template> <link rel="stylesheet" href="style.css"> <div horizontal layout center wrap> <a href="/"> <content select="picture"></content> </a> <div flex></div> <img id="menu" src="/components/modules/Indiegogo/includes/html/cs-indiegogo-header/menu.png" on-tap="{{menu_toggle}}"> <content select="ul"></content> <button id="subscribe" target="#main">Subscribe</button> </div> </template> <script src="script.js"></script> </polymer-element>
適応性
たとえば、エコイズムでは、訪問者の45％がモバイルデバイスから来ており、圧倒的多数はタブレットではなくスマートフォンです。
コンテンツは別個であり、外観は別個であるため、コンテンツはアダプティブでなければなりません。
<picture>
のポリフィルを接続し、アダプティブイメージを使用します。
<picture> <source srcset="/components/modules/Indiegogo/includes/img/benefits-1-mobile.jpg" media="(max-width: 1100px)"> <img src="/components/modules/Indiegogo/includes/img/benefits-1.jpg" alt="Benefits"> </picture>
実際、これらはすべてコンテンツの変更です。
残りの変更はWebコンポーネント内で発生します-要素の順序と配置が変更され、ページレイアウトが完全に再構築されます。
ユーザビリティサポート
Webコンポーネント自体は通常小さく、ページの独立した自己完結型の部分であるため、それらを維持するのが簡単です。複雑なクラスの命名システム（ここではBEMに挨拶します）、ネストレベル、少なくとも1つのコンポーネントが他のコンポーネントのスタイルに干渉しないようにする必要はありません。
同様のページとその一部
Webコンポーネントは非常に独立しているため、再利用できます。
たとえば、サブスクリプションフォームの一度作成されたコンポーネントは、あるページと別のページで何度も使用されます。
一部のコンポーネントは似ていますが、まったく同じではありません-ここでは、属性を使用してWebコンポーネントを設定するか、コンポーネントを継承して一部のスタイル/機能を再定義できます。
このサイトの機能部分では、グラフに次の機能を使用します。
これらのグラフは非常によく似ており、色が異なるという点で外観が基本的に異なります。また、ボンネットの下では、デバイスIDが属性として送信され、消費量を表示する必要があります。対応するデータが読み込まれます。
グラフはまた、ボンネットの下で多くの興味深いものを使用していますが、別の時間については、今着陸について話している。
困難とニュアンスの発生
Webコンポーネントと
<picture>
は、すべてのブラウザですぐにサポートされていないため、ポリファイルを使用する必要があります。
使用の開始時（約1年前）には、いくつかの不快なバグがあり、そのうちのいくつかは修正する必要があり、パッチは開発者に送られていました。
幸いなことに、現時点では、干渉したすべてのバグは長い間修正されており、これ以上の不便はありません。
また、完全に使用するには、Shadow DOMがどのように機能するかを完全に理解する必要があります。ほとんどすべてが含まれているからです。
そしてまだ-jQueryはシャドウツリーについての考えを持たないため（一部の重要な修正はGitバージョンのjQueryで既に利用可能です）、それを使用できますが、VanillaJSの割合がはるかに大きくなる場所と方法を理解する必要があります:)
おわりに
その結果、新しい着陸の作成には、1人で約1営業日かかります。これは非常に良いことです。 また、差異が小さい場合は、1〜2営業時間以内に同様の着陸を作成できます。
私たちのウェブサイトでライブを見ることができます。インスペクターとデバッガーでページを選ぶことをheしないでください。