اشتباهات رایج در طراحی سایت – بخش اول

developzoom-web-development-mistakes-part1

در این پست از سایت آموزش برنامه نویسی مقاله ای مربوط به اشتباهات رایج در طراحی سایت را برای شما آماده کردیم که از دسته آموزش طراحی سایت می باشد. و کامل شرح داده ایم که چگونه می توانید از این اشتباهات اجتناب کنید. با ما همراه باشید.

۱۰ اشتباه رایجی که بیشتر طراحان وب مرتکب می شوند و روش اجتناب از آنها در این مقاله گردآوری و بررسی شده است.

  • استفاده از نسخه های قدیمی HTML

اشتباه: در روزهای اولیه از اینترنت، اینترنت گزینه های کمتری برای نشانه گذاری نسبت به امروز ارائه داده بود. با این حال بسیاری از مردم امروزه نیز از کدهای نسخه های قدیمی HTML استفاده می کنند. برای مثال استفاده از مولفه <table> برای طرح بندی،  در حالی که عناصر <span> و یا <div> خیلی مناسب تر هستند، و یا استفاده از تگ هایی که HTML استاندارد کنونی از آنها پشتیبانی نمی کند. مانند  <center> یا <font>، یا استفاده از تعداد زیادی از  &nbsp; برای فاصله دادن در صفحه.

تاثیر منفی: استفاده از نسخه های قدیمی HTML می تواند باعث یچیدگی بیش از حد نشانه گذاری شود که متناقض با حرکت مرورگرهای مختلف است

چگونگی جلوگیری: توقف استفاده از <table> برای طرح بندی محتوا، و محدود کردن استفاده از آن برای نمایش اطلاعات جدولی. استفاده از گزینه های نشانه گذاری در دسترس فعلی و بروز. استفاده از HTML برای توصیف آنچه که در محتوا است، نه برای چگونگی نمایش محتوا. برای اینکه محتوای خود را به درستی نمایش دهید، از CSS استفاده کنید.

  • “سایت  در مرورگر من کار می کند …”

اشتباه: طراحان وب ممکن است به استفاده از یک مرورگر خاص تمایل پیدا کنند و برخی را نادیده بگیرند. بنابراین ممکن است تست های اساسی وب سایتشان را بر روی مرورگر مورد علاقه شان انجام دهند. ممکن است از نمونه کدهای آماده ای استفاده کنند که برای یک مرورگر خاص و بدون در نظر گرفتن فاکتورهای بقیه مرورگرها نوشته شده اند. همچنین برخی مرورگرها ساختار و مقادیر پیش فرض متفاوتی برای قالب بندی دارند.

تاثیر منفی: نوشتن یک سایت مرورگر محور به احتمال زیاد در مرورگرهای دیگر با کیفیت بسیار ضعیف نمایش داده خواهد شد.

چگونگی اجتناب از این اشتباه: لازم نیست وب سایتتان را در طول طراحی و توسعه بر روی همه مرورگرها و تمام نسخه های آنها تست کنید. با این حال، داشتن یک فاصله زمانی منظم برای چک کردن اینکه سایت شما در مرورگرهای مختلف چگونه نمایش داده می شود،  روش خوبی است. امروزه، ابزار رایگان  صرف نظر از پلت فرم ارجح شما، برای کمک به شما، در دسترس هستند: VMs رایگان، و یا اسکنر سایت. سایت هایی مانند Browsershots یا BrowserStack  عکس های فوری را نشان می دهد که صفحه داده شده چگونه  روی مرورگرها / نسخه ها / سیستم عامل های متفاوت نمایش داده می شود. ابزارهایی مانند ویژوال استودیو نیز می تواند از مرورگرهای مختلف برای نمایش صفحه وبی که شما در حال کار بر روی آن هستید استفاده کند. هنگام طراحی با CSS، تمام پیش فرض هایی که در meyerweb.com نشان داده شده است بررسی و تنظیم کنید.

اگر سایت شما با استفاده از هر ویژگی CSS به طور خاص برای یک مرورگر ایجاد شده، محتاط باشید که روش شما  با پیشوندهایی مانند -webkit- ، -moz-، یا -ms-. چگونه رفتار می کند.

  • فرم های نامناسب

اشتباه: درخواست از کاربر برای وارد کردن هر گونه اطلاعات (به ویژه هنگامی که داده ها در یک فیلد متنی وارد می شود) با فرض اینکه داده ها مطابق  آنچه قبلا تعیین  شده دریافت خواهد شد.

تاثیر منفی: خیلی چیزها می تواند در هنگام وارد  کردن کاربران به اشتباه وارد شود. همچنین صفحه ممکن است شکست بخورند اگر داده های مورد نیاز وارد نشوند، و یا داده های دریافت شده سازگار با یک طرح داده های تعیین شده نباشد. حتی جدی تر از اینها ممکن است به پایگاه داده سایت  مثلا از طریق حملات تزریق (Injection) ورود غیر مجاز انجام شود.

چگونگی اجتناب از اشتباه: اول مطمئن شوید که  برای کاربر مشخص است که شما به دنبال چه اطلاعاتی هستید. برای مثال امروزه اگر آدرس بپرسیم جوابش می تواند آدرس خانه، محل کار یا آدرس ایمیل باشد. بنابراین  در سوالات باید به طور خاص و روشن مشخص کنید به دنبال چه اطلاعاتی هستید. علاوه بر مشخص کردن سوال، از مزایای  تکنیک های اعتبار سنجی داده های موجود در HTML استفاده کنیم. مهم نیست که داده ها در سمت مرورگر چگونه اعتبار سنجی می شوند، مطمئن شوید  داده ها، همیشه در سمت سروربه خوبی اعتبار سنجی می شوند.

  • حجم بالا صفحه سایت

اشتباه: صفحاتی که با گرافیک زیاد و با کیفیت بالا و یا با تصاویر زیاد، که با استفاده از <img> و با ویژگی های ارتفاع و عرض پر شده اند و همچنین لینک های زیاد به صفحاتی  مانند CSS و جاوا اسکریپت دارند، نشانه گذاری کد HTML نیز به صورت غیر ضروری پیچیده و گسترده خواهد شد.

تاثیر منفی: زمان بارگذاری صفحه به طور کامل طولانی خواهد شد که در این صورت برخی از کاربران آن را رها خواهند کرد و از سایت ما خارج خواهند شد و یا حتی اگر برای بارگذاری صفحه صبر کنند اگر پردازش و بارگذاری صفحه بیش از حد طولانی شود خطا رخ خواهد داد.

چگونگی اجتناب از این مشکل: برخی فکر می کنند که اینترنت خیلی سریع و پرسرعت شده است بنابراین به خود اجازه می دهند تا از صفحات با حجم بالا استفاده کنند.  به جای آن می توانیم بررسی کنیم که حجم بالا برای سایت ما نیز هزینه است. تصاویر دلیل اصلی حجم بالای صفحات است. بنابراین تعداد تصاویری که سرعت بارگذاری صفحه را کم کرده اند  به حداقل برسانید.  سعی کنید این سه نکته را در نظر داشته باشید:

  • از خود بپرسید: “آیا همه گرافیک من کاملا ضروری است؟” اگر نه، تصاویر غیر ضروری را حذف کنید. شما می توانید سایت خود را در آدرس (https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/?utm_source=Tuts&utm_medium=article26&utm_campaign=Tuts) اسکن کنید تا به شما پیشنهاد دهد که کدام تصاویرتان نیاز به فشرده سازی دارد.
  • حجم فایل تصاویر خود را با ابزاری مانند Shrink O’Matic or RIOT به حداقل برسانید.
  • پیش بارگذاری تصاویر. این مورد هزینه دانلود اولیه را بهبود نمی بخشد، اما می تواند بارگذاری صفحات دیگری در سایت که از تصاویر استفاده میکنند را خیلی سریعتر کند.

راه دیگر برای کاهش هزینه کاهش تعداد لینک ها به  فایل های CSS و جاوا اسکریپت است. همچنین سعی کنید از تگ های   <style>  یا < <script در HTML به موقع و درست استفاده کنید.

  • اعتماد بیش از حد به کد

اشتباه نکنید: این که آیا جاوا اسکریپت یا کد بر روی سرور اجرا می شود پایان کار نیست.  یک توسعه دهنده وب باید آن را تست کرده و کار کردنش را تایید کند، بنابراین نتیجه گیری اینکه یکبار آن را راه اندازی کردیم بنابراین همیشه کار خواهد کرد اشتباه است.

تاثیر منفی: سایت هایی که  فاقد چک کردن خطا به طور مناسب هستند ممکن است کاربران موقع کار با سایت متوجه اشتباهاتی در آن شوند. این موضوع نه تنها می تواند باعث تجربه منفی کاربر از سایت شود بلکه باعث کاهش اعتبار سایت شما خواهد شد. همچنین  سرنخ هایی را به هکرها می دهد که راه نفوذ به وب سایت را برای آنها فراهم می کند.

چگونگی اجتناب از این مشکل: این خطاها، خطاهای انسانی هستند، که ازاشتباه برنامه نویسی بوجود می آیند. با جاوا اسکریپت، مطمئن شوید که تکنیک های خوبی برای جلوگیری از اشتباهات پیاده سازی کرده اید. راه دیگر برای کمک به ایجاد کدهای بدون خطا، انجام تست های دوره ای و unit testing است.

در مقاله بعدی به ۵ اشتباه بعدی در طراحی سایت و برنامه نویسی خواهیم پرداخت.

سایت آموزش برنامه نویسی | آموزش وردپرس | آموزش طراحی سایت

موفق باشید.

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “اشتباهات رایج در طراحی سایت – بخش اول”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *