本当にレスポンシブなライティング。 パート2 枠組み



注目を集める画像は、invisionappから正直に盗まれています(ちなみに、彼らは神の分布を持っています)



最後の投稿の公開以来、少なくとも1か月半が経過しましたが、その理由がありました。 オタクコーダーの多くの作業とクレイジーな思考。 最初は、ニコールマーリンのトリックを採用して自分に文字をタイプセットするつもりでしたが、ヒップスターの頭は考えました。 フレームワーク全体を追加しみませんか? 私の工芸に対する大きな言葉ですが、それを喜んで呼んでいます。 簡単なものから始めましょう。



デモはこちら





なんで?



なぜ別の自転車が必要なのですか? すべてがシンプルです。 私が知る限り、今日の文字を組版するための最もクールなツールはZurb inkです。 しかし、彼には致命的な欠陥が1つあります。 メディアクエリをサポートしない電子メールクライアントの適応性はサポートしていません。 したがって、私の開発とニコールの開発に基づいてツールを作成することが決定されました。 ちなみに、ニコルはハブに関する彼女の記事の翻訳に喜んで驚き、私が個人的にやったElusive_Dreamに感謝を伝えるように頼みました。



誰のために



このツールは、最新および化石のHTMLおよびCSSの両方に関する十分な知識を持つレイアウト設計者を対象としています。 コードは十分にクリーンで、作業に適しています。 普通のマーケターは、おそらく、私のコードに基づいて正気の手紙を集めることができないでしょう。 Facebookでロシア語のメールハングアウトとコードを共有し、そのアイデアは大歓迎されましたが、すぐにドラッグアンドドロップをフレームワークからエディターにすることを提案しました。 これらの編集者はすべて非常に限られており、その能力が中立であるため、私はこれに断固として反対しています。 現在のフォームでは、無制限の作業範囲を取得できます。最も重要なことは、文字を作成するための非常に高速なプロセスと、非常に便利なコードサポートです。



メールクライアントサポート



-MS Outlook 2003-2007

-MS Outlook 2010-2013

-Outlook.com(Web、iOS、Android、Windows Phone)

-Thunderbird(Windows)

-AOL(iOS)

-Yahoo! (ウェブ、iOS)

-Google Inbox(iOS、Android)

-Gmail(ウェブ、iOS、アンドロイド)

-Mail.ru(ウェブ、iOS)

-Rambler.ru(ウェブ)

-Yandexメール(Web、iOS、Android)

-myMail(iOS、Android)

-残念ながら、Sparrow(OSX、iOS)はApple Storeから削除されました

-航空便(OSX)

-Apple Mail(OSX、iOS)

-メールボックス(OSX、iOS、Android)

-Spark(iOS)



何が必要ですか



以下は私のツイストバージョンです。 あなたの裁量でそれを簡素化することができます。



-任意のテキストエディター。 私の場合、これはケシのAtomです。

-有料のLitmusアカウント。これは、Outlookのすべてのバージョンのテストにのみ使用します。これにより、レターのテストにウィンドウを使用できなくなります。

-iPhone。 私は第6世代のiPodに満足していますが、これには11個のメールクライアントがインストールされていますが、十分です。

-Windows OutlookでレターをテストするためのNokia Lumia。

-Android Mail、Yandex、およびOutlookクライアントをテストするためのNokia X2。 これは、原則として、Androidをテストするのに十分ですが、Android 4.2のクライアントで作業した結果を定期的に確認します。 Lollipopスマートフォンをまだ購入していません。

- プロダクション用のレイアウトを展開する前にスタイルを頭からインラインに転送するためのインライナー

-ライブデバイスでの電子メールの迅速なテストのための無料mailchimpアカウント



で実行



この1か月で、100以上の異なる文字でコードを実行し、結果に全体的に満足しています。 このフレームワークは、コードの可読性と文字でのパフォーマンスを改善するために、リファクタリングの形で複数回実行されています。 このことを開発するというアイデアに興味がある人は、 githubの問題にようこそ。 FacebookでHabrの同じ名前のニックネームで私を見つけることもできます。 そこでは、私のテープには主に手紙の題材が散らばっています。 レターの開発に関する質問は、ここのコメント、フェイスブック、またはメールでご確認ください。ハブのプロファイルに記載されています。



元気?



-リファクタリング、リファクタリング、リファクタリング

-さまざまなファイルから自動的にレターを収集し、CSSを自動的にインライン化するコレクターを追加する

-ドキュメントの作成。 SourceJSを詳しく調べます。

-あらゆる種類のスニペットとテンプレートを追加します。 たとえば、商品のオンラインストアや作品のその他の一般的な要素の表示。



アメニティは何ですか





-メッセージレイアウトの便利なレンダリングのための最小限のPSD Gmailインターフェイステンプレート

-sociconのソーシャルアイコンのセット

-オンライン小売店向けのリマーケティングテキストテンプレート



これはすべてGithub リポジトリにあります



最近の勝利のうち



-網膜ディスプレイをサポートして、友人にOutlookのパフォーマンスを提供しました

-写真を使用せずに、完全にクリック可能なボタン(テキストだけでなく)を作成しました

-携帯電話での複数列要素の適切な動作の実現



PS非常に有益な投稿ではありませんが、非常に興味深い発表です。 チュートリアルで本当に意味のある資料ができたら、すぐにそれを書きます。 ステディタンド。



All Articles