• Articles
• admin

新しいプロジェクトを立ち上げると、古いブログやウェブサイトを更新することを忘れるのは簡単です。 この記事では、私はあなたがすぐにあなたのウェブサイトだけで、はるかにユーザーフレンドリーにするために実装することができます30の固体のア それらのすべてがフロントエンドの設計のみに基づいているわけではありません。 また、webパーサーやスパイダーがデータを適切に分類するのに役立つ一般的なHTML5コーディング技術についても説明します。

すべてのウェブサイトを更新する必要はなく、この記事で利用可能なすべての技術ではありません。 これらのアイデアは、開発者がデザインの面で考えて取得するためにここにあり、どのようにウェブサイトがきれいに見えるようにします。 これは、任意のデジタル画面上でよく見えるスケーラブルな応答性のウェブサイトのレイアウトを構築するために今まで以上に簡単ですので、私たち

1. UXテスト

私は常に私のウェブサイトの起動時にテストを実行していないの有罪ですが、可能な限りこれは私の好きな活動の一つです。 あなたは、彼らがあなたのウェブサイトで遊ぶ方法を研究することにより、典型的なユーザーの相互作用につ ユーザーエクスペリエンススタディは、Googleアナリティクスなどのツール、または他のサードパーティのリソースを使用してのみ実施することができます。

あなたが見つけることができる潜在的な利点は膨大です。 ユーザーエクスペリエンステストは、web開発者がwebサイトのどの領域が迷惑であるか、壊れているか、または改善される可能性があるかを デジタルツールだけでなく、あなたの友人や同僚の使用を検討してください。 あなたのウェブサイトの実質の人間のフィードバックを聞くことはあなたがコンピュータ画面を通って得ることができなかった結果を提供するかもしれません。

2. Whitespace

空白は、ページ内の要素間のスペースの量と考えることができます。 すでにこれに慣れているユーザーの中には、窮屈なレイアウトを気にしない人もいます。 しかし、あなたの対象者層を考慮し、どのようにそれらの多くは、若い世代のようにコンピュータ識字ではありません検討してください。

分割A/Bテストとユーザーからのフィードバックを保持することにより、余分な間隔を必要とする領域を決定することができます。 またはちょうどそれを翼とあなたが思い付くことができるものを参照してください！

3. Webフォント

動的webフォントを使用すると、設計者は一般的なフォントファミリに制限されることなくwebページを構築できます。 この傾向は、ほとんどの平均的なインターネットユーザーがまともなDSL/T1/光ファイバ接続を使用しているため、ますます人気が高まっています。 サードパーティ製のフォントスタイルシートへの参照を含めると、DL速度に大きな遅れが発生しなくなります。

おそらくフォントの最高のプロバイダはGoogle Webfontsを介してです。 登録には特典がありますが、Googleアカウントをお持ちでなくてもアプリケーションにアクセスできます。 完全なセットアッププロセスはわずか3ステップで、数分以内にあなたのウェブサイト上で実行されているカスタムGoogleのフォントを持つことがで

4. CSS3Shadows

レイアウトを改善するためにshadowsを使用することについて話しているとき、私は実際に2つの異なるプロパティを参照しています。 これまでに人気のあるbox-shadowは、レイアウト内のdivやボックスには本当にクールです。 あなたの容器、ラッパー、または内部のページ箱にこの効果を加えることはあなたのwebページに細くの3-D効果を提供する。

しかし、ページから飛び降りるタイポグラフィのCSS3text-shadowプロパティも検討する価値があります。 Appleは、レイアウトの周りにテキストシャドウを大量に実装した最初の企業の1つです。 フォントの色の反対側にあるテキストの影（暗いテキストの場合は白の影、明るいテキストの場合は黒の影）を追加することで、困難な効果を構築

5. テクスチャ&繰り返しパターン

標準の配色を使用するだけで得ることができるウェブサイトがたくさんあります。 しかしあなたのウェブサイトを群集から実際に際立たせるために質を加え、あなたの背景にタイルを繰り返すことを考慮することができる。 クールな無料のwebappsの一つは、任意のブラウザ上で実行することができますノイズテクスチャジェネレータです。

ちょうどあなたが使用したいノイズのBG色と量を選択し、このアプリは、動的にタイ あなたがパターンやタイルを探しているなら、私は微妙なパターンをお勧めします。 彼らはあなたが自由のためにダウンロードすることができます使用可能なテクスチャの膨大なコレクションを持っています。

6. CSS3グラデーション背景

私たちは背景を議論している間、私は常に人気のCSS3グラデーションを起動する必要があります。 これらは、Webの背景のためのAdobe Photoshopの外にそれらを保つ巨大な利点をweb開発者に提供します。 そしてこれらの勾配はあなたのレイアウトの運行棒およびフッターおよび他の重要な区域に加えられる多くによりちょうどボディで動作できる。

7. Boostrap

Twitterのブートストラップは、おそらくweb開発者のための最大のフロントエンドUIフレームワークです。 これには、ボタン、フォーム入力、リンク、列、およびその他の事前フォーマットされたページオブジェクトのトンが含まれます。 Bootstrapの最も一般的な用途は、新しいアプリケーションのランディングページ内です。

しかし、オープンソースの開発者は、公開するライブラリ、プラグイン、またはミニスクリプトのデモページを構築するときにBootstrapを利用します。

Bootstrapは、最近どのウェブサイトにも適用できるほど大きくなったと感じています。 しかし、最大の利点を見つける開発者は、独自のUIデザインを展開するための迅速な代替としてBootstrapを使用しています。 ランディングページ、製品デモ、モバイルアプリのwebサイトなど、単一の具体的な目的でwebページを起動する次回は、このフロントエンドライブラリを検討

関連:

• Twitter Bootstrap入門
• Bootstrap201:モーダルウィンドウプラグイン

8. HTML5Kickstart

ほとんどのウェブ開発者は、99limeによって作成されたHTML5Kickstartについてはまだ聞いていません。 これは、一般的なHTML5レイアウトよりも素敵なデザインの美学に焦点を当てた別のフロントエンドUIライブラリです。 しかし、スペードで両方を生成するためのコードサンプルがあります。 グラデーションボタンやドロップダウンメニューなど、あらかじめ設定された要素のセットから選択できます。 私はこれがBootstrapと同じ人気を持っているとは言いませんが、もう一度何をしますか？

時間と忍耐があれば、このライブラリに迅速なテスト実行を与えることをお勧めします。 小さなサンドボックスレイアウトを構築し、各UI要素からデフォルトの感覚を楽しむかどうかを確認します。 キックスタートは、すべてのプロジェクトのために確かではありませんが、バインドに巻き込まれたとき、それは主要な時間の節約になることができます。

9. jQuery UI

アニメーションとスライダーとフェージング要素は、通常、jQueryライブラリから実行されています。 これは、フロントエンド開発者のための最も一般的なオープンソースのJavaScriptライブラリですが、それはまた、コンパニオンライブラリjQueryのUIを持っています。 開発者はこれを見落として、余分なKBと引き換えに非常に多くを提供することはできないと考えています。

しかし、UIライブラリを含めることは、任意の動的ページアニメーションのeasing呼び出しを更新できることを意味します。 これは、任意のドロップダウンメニュー、フェードアイテム、スライドショーのスクロール、および他のすべての動的なjQueryのアニメーショ

jQueryUIのウェブサイトには、多くのバリエーションをテストし、特定のアニメーションタイプが好きかどうかを確認できるイージングデモページがあります。

関連:

• jQuery UI Accordionのスタイルを設定する方法
• Jquery UIスライダーでボリュームコントローラ
• カスタマイズとテーマjQuery UI Datepicker
• Jquery UIソート可能でドラッグアンドドロップ

10. 贅沢なBG写真

フルスクリーンの背景画像効果を利用している無数のウェブサイトが今日あります。 背景画像としてよく見える高解像度の写真サンプルを見つけることができれば、この技術はレイアウトに追加する価値があるかもしれません。 大きい背景はまたあなたのウェブサイトのジャンルを意味している間あなたのユーザーの注意を引くことの優秀な仕事をする。

あなたは簡単な解決策を探しているならjQuery Backstretchプラグインをチェックしてください。 これは、任意の解像度を使用して適切かつ応答的にスケールするための新しい背景のためのコードの単一行を必要とします。 しかし、JavaScriptのメソッドに反対している開発者のために、私はCSS-Tricksに投稿されたCSS3fullpage image techniqueをお勧めします。

11. メニューアイコン

訪問者からより多くの注意を引くために、あなたのwebページに小さなアイコンセットを含める価値があるかもしれません。 標準的なメニューリンクは、多くの場合、適切に機能し、ユーザーがページ間を移動するのに十分です。

しかし、私は多くの場合、各メニューリンク用に設計されたカスタマイズされたアイコンを見て感銘を受けています。 あなたの上の運行、サイドバー、またはフッター区域で完全に見る自由なアイコンセットのトンを見つけることができる。

12. 更新された配色

私は実際にあなたの全体的な配色のデザインを変更することを意味するのではなく、それに新しい色を追加するようなものです。 数ヶ月後に数ヶ月のために同じレイアウトを実行した後、それは小さな領域を更新し、驚きによって繰り返しの訪問者をキャッ

アンカーリンク、ヘッダー、背景、ツールバーなどが含まれている項目もあります。 あなたの軌道を改善するために、このような配色デザイナーなどのオンラインツールを使用することを検討してください。

13. 強化されたブラウザサポート

すべての主要なレガシーブラウザで完全にサポートされているウェブサイトを構築することは困難です。 非常に少数の人々がInternet Explorer6を実行していますが、それはまだ私のGoogle Analyticsレポートのいくつかに表示されます。 アイデアを探している開発者は、ブラウザテストの小さな試行を行うことを検討するかもしれません。

より重要な主流のブラウザには、IE9、Mozilla Firefox、Opera、Chrome、Safari、おそらくCamino/SeaMonkeyの最新リリースが含まれています。 しかし、Internet Explorer6-8は、まだ広く企業や古いコンピュータラボの間で使用されています。 Ietesterソフトウェアを使用してクイックレンダリングテストを実行できます。 同様に、IE8には開発者ツールモードがあり、デバッグのために古いレンダリングエンジンに切り替えることができます。

14. Fitted Typography

古いレイアウトはまだテキストスタイルを効率的に利用しているかもしれませんが、これは必ずしもそうではありません。 私は大きなタイポグラフィがレイアウトにはるかに簡単に収まると感じています。 それは読みやすく、より大きな画面解像度でより多くのスペースを占有することは言うまでもありません。

“フィットタイポグラフィ”のアイデアは、それがあなたのウェブサイトにぴったり合うようにテキストをスタイ あなたはいくつかのページを通過し、10-15分でこれらのスタイルを更新することができます。

15. ソーシャルメディア共有

今では、ほとんどの開発者は、人気のあるソーシャルネットワーキングサイトで使用される共有バッジに精通していると確信し Facebook、Twitter、Reddit、Pinterest、Dzone、および他の多くの外部ネットワークは、あなたのウェブサイトに埋め込むことができるコードを提供します。 その後、訪問者はあなたのウェブサイトを離れることなく、これらのネットワークにあなたのリンクを共有することができます。

一部のブログやウェブマガジンでは、これらのバッジがページをスクロールダウンすると表示されます。 これは、重要なコンテンツをブロックしていない身体領域のすぐ外側にホバリングさせることができるため、優れたテクニックです。 私はまた、同様の効果を持つことができ、ソーシャルメディアのツールバーに私たちのポストを閲覧することをお勧めします。

16. ユーザーディスカッション

WordPressやDrupalのようなCMSを実行している場合は、デフォルトでコメントフォームを含めることができます。 しかし、静的なwebページを作成するときは、この機能を模倣するために独自のデータベースシステムを設定する必要があります。 しかし、オープンソース技術の台頭に伴い、開発者はDisqusなどのより良いソリューションを実装することができます。

この方法を使用すると、ディスカッションエリアからスパムや迷惑メールをクリーンアップすることは常に対処していません。 Disqusアカウントをまだお持ちでないユーザーは、人気のあるソーシャルネットワーキングプロファイルを使用してすぐに接続するか、ページから AkismetにうんざりしているWordPressユーザーでも、Disqus Comment Systemプラグインを使用して切り替えることができます。

17. フッター領域を広げる

ほとんどの小さなウェブサイトのレイアウトは、下部のフッターセクションで非常に保守的になります。 これは基本的な版権情報および少数の主要なページリンクを含むかもしれない。 しかし、現代のwebデザインの傾向は、メタリンクの多くの大きなフッターのアイデアをサポートしています。

これらは、多くの追加情報を持つスタートアップや大企業のウェブサイトで一般的に見られます。 確かにそれが属していないレイアウトにこれを強制しようとしないでください,しかし、それは大きなフッター領域を開くことは、あなたのウェブサイトの経験を向上させることができる場合は、いくつかの熟考の価値があります.

18. Responsify Images

動的流体とレスポンシブウェブページの画像は、それ自体がトレンドになっています。 画像を固定幅に設定して、ウィンドウのサイズが変更されるとコンテナラッパーから抜け出すのは、今ではほとんど馬鹿げています。 最も一般的な手法は、すべてのimg要素にCSSを使用してwidth: 100%を適用することです。

しかし、あなたはまた、バインドに有用であることが証明されるかもしれないいくつかの他のオープンソースの方法を検討することができます。 ResponsiveImgは非常に小さなファイルサイズを持つそのようなjQueryプラグインです。 これをページに含め、ページ上のすべての画像をターゲットにする単一行のコードを実行するだけです。 これはまだデスクトップベースのコンテンツを使用しているモバイルレイアウトに優れた追加です。

19. Menu Accessibility

これはあなたのレイアウトで常に更新しようとするべきものではありませんが、開発者やデザイナーが初めて正しく取得しないものです。 サブメニューリンクを実装するためのより良い方法があれば、ナビゲーションシステムとブレーンストーミングを振り返る価値があると思います。

サイドバーとコンテンツ領域は、垂直方向に十分なスペースがあるため、多くの場合、アコーディオンメニューを保持します。 しかし、ドロップダウンメニューやサブメニューをスライドさせた水平ナビゲーションバーについて考えてみてください。 メニューリンクが迅速かつ簡単にアクセスできる限り、ユーザーベースの間で問題はないはずです。

20. Semantic Microformats/Microdata

Microformatsと新しいMicrodata仕様は、HTMLコード内のメタデータを拡張するために使用されます。 これらの属性は、コンテンツとそのコンテンツがページ上の他のコンテンツとどのように関連するかについての追加情報を提供します。 そして最終的にこれらの結果はGoogleが個々のキーワードのための、そしてイメージおよびビデオ調査のような他のエンジンの内のあなたのウェブサイ

Microdataの最も顕著なサポートされている文書化されたバージョンはSchema.org.彼らのウェブサイトは、あなたが戻って、セマンティックスキーママークアップであなたのHTMLコンテンツを編集するために必要なすべての情報を提供します。 このスキーマ構文は、すべての主要な検索エンジンによってサポートされており、将来のセマンティックメタデータ設計に進化する可能性があります。

21. ナビゲーションリンクの再配置

一部のウェブサイトでは、固定コンテンツナビゲーションで実行することは本当の問題ではないかもしれません。 しかし私はある特定の運行リンクがたくさんの優先順位を与えられることあるより大きいビジネスウェブサイトか有価証券で見つけた。 そして、同様にめったに見つけることができないいくつかの項目があります！ あなたのウェブサイトを拾い読みし、他のどの訪問者でもであったようにするのに時間をかけなさい。

あなたが最も興味を持っているリンク、そしておそらくあなたが追加したいリンクを検討してください。 これらには、ウェブサイトの簡単な履歴、チームに関する情報、連絡先の詳細、プライバシーに関する懸念、プレスリリースなどが含まれます。 また、ユーザーからのフィードバックを収集し、希望と新規または更新されたページの需要との間に相関があるかどうかを確認するのに役立ちます。

22. トップに戻るリンク

あなたのウェブサイトがコンテンツの非常に長いページを公開している場合、これはあなたのレイアウトに必須の要素です。 トップリンクに戻るスクロールは、これらの日、ほとんどどこでも見つけることができます。 ユーザーはホームキーを押すとは思わないし、それはすべての方法をバックアップスクロール迷惑なことができます。 このリンクのための最もよい位置はあなたの容器の横に浮かぶか、または私達がHongkiatで実行したようにフッターで右に着席している。

23. コード/preタグのカスタマイズ

最初にウェブサイトのスタイルシートを作成するとき、多くの開発者は典型的なページ要素を見落とすでしょう。 ヘッダーと段落は非常に一般的ですが、preタグやinline codeタグはどうですか？ これらは、text/NFOファイルに表示されるように、事前にフォーマットされたソースコード構文をカプセル化するために使用されます。 いくつかのウェブサイトは、これらの要素のための必要はありませんが、それはまだ彼らが念のためにスタイルを設定していることをお勧めします。

24. 画像の幅/高さ属性を追加する

これで、このタスクは、通過する必要がある画像の数によっては、簡単に時間がかかる可能性があります。 しかし、あなたが定義された幅/高さのないあなたのウェブサイトで画像を見つけた場合、それはそれらを更新する価値があるかもしれません。

通常、これらの属性を持たない画像は、完全にロードする前に1×1pxの正方形として表示されます。 これにより、新しい画像がロードされると、webページとスクロールバーがジャンプします。 再びこれは皆のために有用ではないだろうが、それはいくつかのケースでは迅速な定着剤として注目に値します。 そして、固定属性を使用して応答画像のためのCSS技術がまだあります。

25. JavaScript通知

JavaScriptで働いている開発者は、一般的なダイアログボックスについて知っています。 あなただけの情報を表示し、ユーザーにOKボタンを提供していますアラートボックスを設定することができます。 しかし、ユーザーの入力を要求するプロンプトボックスと一緒にはい/いいえボタンを持つ確認アラートもあります。

これらはすべてalertifyを使用してカスタマイズできます。js”を発表した。 これは、独自のフロントエンドアラートボックスを設計するための非常に小さなオープンソースライブラリです。 それはあなたがあなた自身のCSSスタイルを一致させる必要がある場合は、セットアップに非常に迅速かつカスタマイズするのは簡単です。

26. 応答性の高いメディアクエリ

これは、追加するコードの簡単なビットのようには思えないかもしれませんが、実際にはあまり時間がかかりません。 レスポンシブクエリは、既存のスタイルシートに追加したり、新しいレスポンシブに追加したりすることができます。cssドキュメント。 いずれにしても、モニター、タブレット、スマートフォンからさまざまな表示サイズを処理するために、定期的なスタイ

レスポンシブクエリは、必ずしもレイアウトに完全に応答する必要はありません。 時には、これらはちょうどそのようなあなたの細長いサイドバーや大きなフッターなどのコンテンツのビットを非表示にすることがあります。 その後、もともとデスクトップレイアウトに隠されている完全に応答ミニフッターを表示することができます。 メディアクエリの詳細については、responsive webチュートリアルのコレクションをご覧ください。

27. アフィリエイトリンク

あなたの分野に関連する同様のウェブサイトのオンライン構築コンテンツが常にあります。 それらのほとんどは、既存のコンテンツからの派生物やパロディです。 しかし競争に網を回すかわりに友好的な大気を作成しないためになぜか。 あなたのレイアウトの余分スペースを有すれば関係団体に頼むあなたのニッチ(調査のGoogle)の関連のウェブサイトに少数の電子メールを送りなさい。

あなたはリンクを交換し、お互いのトラフィックをもたらすのを助けることができます。 これはあなたのウェブサイトをたくさんより速く見つけ、他のウェブサイトのコミュニティの内でまた含まれていることを見るために新しいユーザーのためのドアを開ける。 プラスgoogleの権限のウェブサイトからのbacklinksを得ることはあなたの範囲の信頼性しか助けることができない。

28. アイコンベースフォント

最近、アイコンフォントとデータ属性について議論した24waysの記事を読んでいました。 これにより、webデザインの将来と、HTML/CSSがフロントエンドコーディングにどのように劇的に影響を与えたかを考えました。 アイコンベースのフォントは、ナビゲーションメニュー、順序付けられた/順序付けられていないリスト、さらには基本的なページコンテンツを含む

これらのフォントの多くは、@font-faceを使用してウェブサイトにすばやく追加できます。 これは、フォントをホストするためにTypekitのようなサードパーティのサービスに依存する必要がないことを意味します。 また、PNGアイコンを使用するのではなく、より意味的なデザインスタイルを意味します。

29. 画像ボックスの影

あなたは長いあなたのページ上の訪問者を維持したい場合は、いくつかの本当の品質のコンテンツを提供する必要があります。 これはすでにあなたのウェブサイトの場合かもしれませんが、あなたのスタイルが当たり障りのないものであれば、人々は他の場所に見えます。 雰囲気と美学は良いwebデザインで巨大です。

ページ画像の周りに境界線をラップするquick imageクラスを構築することをお勧めします。 これは、あまりにも、境界線やパディングと一緒に小さなボックスの影が含まれていてもよいです。 あなたのイメージが画面から飛び降り、テキストの段落で目立つのを助けるために何か。

30. Alternate Stylesheets

単一のウェブサイトのレイアウトを構築するときに含める必要があるさまざまなメディアスタイルをすべて考慮してくださ これは、デスクトップモニター、ラップトップ、タブレット、おそらくスマートフォンでもよく見ている必要があります。 そして、常にサポートされていない投影と印刷メディアを忘れないでください。

これらのあいまいなタイプのメディアを使用する多くの聴衆がいる場合は、独自の代替スタイルシートをスタイリングすることをお勧めします。 これらは、印刷などのメディアタイプに基づいてラベル付けすることができます。css、または既存のスタイルシートに追加しました。 十分な需要がある場合は、あなたの訪問者は永遠に感謝されます。 そして、それは正直なところ、一般的なプリンタのためのあなたのデフォルトのウェブサイトのレイアウトを編集するために時間の全体の多くを

最終的な考え

創造的なデザイナー、特にフロントエンドのweb開発者は、このリストの中でいくつかの有用なテクニックを見つけることができます。 これらのアイデアのほとんどは、実装に1-2時間以上かかるべきではありませんが、多くは15-30分ほどで達成できます。

あなたのウェブサイトのレイアウトを再評価し、随時新しいトレンドで更新することは、特にネイティブブラウザシャドウ、アニメーション、および角の丸みを帯びたCSS3プロパティの新しいリリースでは、多くの場合、良いアイデアです。 あなたには、いくつかの迅速な更新を必要としている場合、これは一見の価値がアイデアの優れたコレクションです。

さらに、記事について質問やアイデアがある場合は、ポストディスカッションエリアで私たちと共有すること自由に感じます。