あなたの過ちからウェブデザインを学ぶ方法

公開: 2019-10-24

Webは単一のモノリシックフレームワークから作成されていません。モジュール性があるため、インターネット上で目にするすべてのものを構成するすべての要素を学ぶのははるかに困難です。

誰もが間違いを犯して、開発時間やプログラムを遅くしたり、プログラムにバグを導入したりすることになります。それだけでなく、ある種の間違いはあなたが仕事を探しているときにあなたを不利にします。

ウェブサイトをデザインしたり、本番環境に移行したりするときに発生する問題をできるだけ少なくするためのベストプラクティスがあります。ジュニアWeb開発者が犯す最も一般的な5つの間違いと、それらを回避する方法を次に示します。

jQueryに過度に依存している

jQueryは、世界で群を抜いて最も人気のあるJavaScriptフレームワークです。作成したらすぐにプロジェクトに採用するのは魅力的なように思えるかもしれませんが、そんなに急いではいけません。

jQueryは、Web開発を高速化するための便利なメソッドを数多く提供しますが、あまり使用しないことが重要です。新しいWeb開発者は、ほとんどの場合、jQueryのAPIメソッドがどのように機能するかではなく、そのメソッドを理解するという間違いを犯します。

多くの雇用主は、 JavaScriptがどのように機能するかを完全に理解していない開発者もいるため、jQueryを便利ではなく負債と見なしています。

jQueryを使用しても問題はありません。可能であれば、JavaScriptメソッドを自分で使用することに慣れてください。実装に時間がかかる便利なメソッドについては、jQueryのみに依存してください。

CSSフレームワークに過度に依存している

セマンティックUIやブートストラップなどのCSSフレームワークは、多くの時間を節約できます。手動でスタイリングしたり、アプリ内にレスポンシブデザインを組み込んだりする必要がなくなります。

ただし、jQueryと同じように、独自のCSSコードを作成しないというサイクルに巻き込まれるのは簡単です。一日の終わりに、あなたのサイトは一般的で半分完成したように見えます。極端な場合、それはあなたと同じ考えを持っていた他の十数のウェブサイトのようにさえ見えるかもしれません。

CSSコードの記述に精通していない場合は、マニュアルを読んだり、必要な情報を提供してくれるメンターを見つけたりすることができます。たとえば、研究ガイドが私のために研究論文を書いて提供してくれるように。良い質的な助けを借りてあなた。コードを書くためにより直感的になる可能性のあるさまざまなフレームワークがあります。

Bootstrapのようなフレームワークは、あなたの生活を楽にするために存在します。過度の依存を避けるために、CSSのスタイリング自体を学び、プリプロセッサを使用して開発をスピードアップする方法を学び、色彩理論を研究して、どの色が一緒になり、どの色が合わないかを知ってください。概念を正しく理解すると、フレームワークすら必要なくなったことに気付くかもしれません。

回復ツールがない

あなたがそれを最も必要とするときに回復ツールを持っていないことはあなたのウェブサイトのクラッシュとその可能性のある崩壊につながる可能性があります。あなたがあなたのウェブサイトに変更を加えるときはいつでも、あなたはそれが良くない危険を冒しています。陥る可能性のあるセーフティネットを確保するために、WPリセットなどの回復ツールの利用を検討してください。

WPリセットは、Webサイトで問題が発生した場合の最善の解決策です。おそらく問題は、WP管理者にアクセスできないこと、または死の白い画面に遭遇することです。それが何であれ、WPリセットはあなたの背中を持っています。それはあなたがあなたのウェブサイトを素早くそして簡単に回復することを可能にする便利なクリーニングツールを備えています。

さらに、プラグインやテーマをすばやくインストールしたり、障害がある場合は無効にしたりするために使用できます。さらに、WP Resetの機能Snapshotsは、変更を加える前にWebサイトのスナップショットを自動的に取得するため、計画どおりに進まなかった場合にそのスナップショットを回復できます。

このプラグインが提供する最も強力なオプションは、Nuclear Resetオプションです。これにより、インストールを完全に消去し、すべてのプラグイン、テーマ、およびデータベースエントリを削除できます。ただし、本当に必要な場合にのみ使用してください。

速度のためにあなたのサイトを最適化するのを忘れている

jQueryに過度に依存することの影響の1つは、アンチパターンの習慣に陥る傾向があることです。スクリプトを配置する場所に応じて、ブラウザが最初に読み込まれるときに、ページが読み込まれる前にJavaScriptとCSSコードを実行する必要があります。

ご想像のとおり、スクリプトが多すぎるとWebサイトの速度が低下します。未使用のCSSクラスがあると、Webサイトのバンドルサイズが大きくなり、同様に速度が低下します。

速度の最適化には多くのことが関わっています。いくつかの要素を挙げれば、フォント、画像、追加のJavaScriptファイルとCSSファイル、およびファイル圧縮がすべてその役割を果たします。これらをマスターしたら、ファイルから未使用のCSSクラスとJavaScriptメソッドを削除できるWebpackやRollupなどのパッケージバンドラーを調べてください。

不完全な入力検証

あなたがこれまでに構築したウェブサイトの最も重要な部分のいくつかはフォームです。人がサーバーに情報を渡すことができる唯一の方法であるため、それらに対していくつかの健全性チェックを行う必要があります。

インターネット上で最も一般的な攻撃ベクトルのいくつかは、依然としてXSS攻撃とSQLインジェクションです。ジュニア開発者が犯しがちな間違いは、フロントエンドで入力検証のみを行うことです。

すべての入力検証はJavaScriptを介して行われますが、これを無効にするのは簡単です。そうは言っても、Sytian Web DeveloperPhilippinesのKennethSytianは、バックエンドとフロントエンドの両方で常に入力検証を実行することを推奨しています。さらに、インジェクション攻撃を不可能にするために、英数字以外のすべての文字をエスケープする必要があります。

SEOの重要性を無視する

あなたが美しいウェブサイトを構築してそれらを出荷するだけでは十分ではありません。あなたが提供しているコンテンツを人々が見て、感謝することも同様に重要です。そのための最善の方法は、SEOの知識とその実装を改善することです。

SEOは長くて複雑なプロセスであり、絶えず変化するゲームのルールのループにとどまるには、絶え間ない調査が必要です。そのアーチ型の範囲で、それは開発プロセスの終わりに行われるために却下されるべきではありません。

画像に常に説明的な「alt」タグを付けるなど、一部の方法は積極的に処理する必要があります。プロジェクトがすでに完了しているときに、すべてのファイルをスキャンしてaltタグとmetaタグを探すことを想像してみてください。

ファビコンがない

ファビコンは設定が非常に簡単であるため、不要であるとして簡単に却下できますが、ファビコンの存在は非常に重要です。最近のWebでは、ユーザーが複数のタブを開いて、後で再びアクセスできるようにするのが一般的です。ファビコンは一種のブックマークとして機能するため、サイトが一目でわかります。 1つがないということは、ユーザーが途中で興味を失うことを意味する場合があります。

Photoshopで自分で作成するのではなく、受賞歴のあるUXデザイナーのMichelle Dippは、オンラインで見つけることができる無料のグラフィックデザインツールを使用することをお勧めします。ファビコンテンプレートを提供するものを見つけることもできるので、手間をかけずに独自のテンプレートを作成できます。

レスポンシブデザインを無視する

レスポンシブデザインは、ウェブサイトが持つべき最も重要なものの1つにランクされています。インターネット上のほとんどのトラフィックはモバイルデバイスからのものです。画面サイズに応じて異なるコンテンツを表示するサイトがない場合、重大な不利益が生じます。競合他社が同じものを提供している場合は特にそうです。

ユーザーエクスペリエンスを向上させる1つの方法は、Webサイトにスティッキー要素を実装することです。スティッキー要素とは、ユーザーが閲覧している間、ページに固定されたままの要素です。要素が固定されていると、それらにアクセスしやすくなり、それらが常に1つの場所にあることがわかります。これは、携帯電話の場合に不可欠です。

そうは言っても、WP Stickyは、スティッキー要素を作成するために使用できる完璧なプラグインです。 WP Stickyを使用すると、コードを1行も記述せずに、必要な数の要素をスティッキーにすることができます。画面から要素を選択するだけです。

WP Stickyを使用すると、メニュー、ヘッダー、フッターなどをスティッキーにすることができます。さらに、要素の位置や不透明度を調整したり、特定の投稿に追加したり、特定の投稿から削除したりすることができます。

WPスティッキーその上、それはグーグルがページをランク付けするときに考慮に入れる要素の1つです。ページがモバイルでレスポンシブでない場合は、ウェブマスターのコンソールからサイトを更新するように警告するメールが数通届く可能性があります。

結論

適切なウェブデザインには時間がかかります。調査する時間、作業する時間、そして推奨される方法に慣れるまでの時間。開発期間中にミスを犯すことは、世界の終わりではありません。代わりに、あなたが遭遇した挫折を学習体験として受け止めてください。それらを使用して適切なWebデザインの知識とアプリケーションを向上させます。

–

著者について

Becky Holtonは、最高のエッセイ執筆サービスであるBestdissertation.comのジャーナリスト兼ブロガーです。彼女は教育技術、専門家による執筆に興味があり、AustralianWritingsでの有益なスピーキングをいつでもサポートする準備ができています。 Twitterで彼女をフォローしてください。