• 2 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
نکات و اصول مهم در طراحی وبسایت
#1
1- صفحات را با استفاده از استاندارد HTML4 و HTML5 به اندازه توان مرورگر طراحی کنید.

2- تمام صفحات ایستا(HTML) را بررسی، ارزیابی و آزمایش کنید تا عاری از مشکل باشد.

3- همیشه از نرم افزارهای مدیریت کد سورس(VCM) مثل Git, Svn, TFS برای مدیریت کدها و version ها استفاده کنید.

5- مکانیزم و شیوه کار پروتوکل HTTP رو کامل فرا بگیرید.

6- حتاالمکان با استفاده از CSS طرح بصری ایجاد کنید نه با تصاویر.

7- در محیط Development برای بالا بردن کیفیت و خوانایی کد، از توضیحات/Comment استفاده کنید و در محیط Production آنها را حذف کنید.

کد:
<!-- Begin header --!>
<!-- End header --!>

<!-- Begin menu --!>
<!-- Menu::Main --!>
...
<!-- Menu::Links --!>
...
<!-- End menu --!>
...


8- قوانین CSS را در صفحات بررسی کنید و از استاندارد های CSS و CSS2 و CSS3 بهره بگیرید.

9- حتاالمکان کدهای Stylesheet را بصورت External و از داخل هاست خودتون استفاده کنید.
کد:
<link type="text/css" href="print.css" rel="stylesheet" media="all" title="Print"/>

10- حالت نمایش صفحات رو با غیرفعال/Disable بودن CSS در مرورگر را تست کنید. (مخصوصاً Tableless ها)

11- از Stylesheet های Print/چاپ هم استفاده کنید و قابلیت انتخاب به کاربر بدید.

12- از پیچاندن و آشفته کردن بیش از حد آدرسها و URL ها خودداری کنید. (پیچیدگی =! امنیت)

13- داده های ورودی توسط کاربر را بدقت بررسی و کنترل کنید.

14- از اجرا کردن برنامه های Console/Shell از طریق اسکریپت(Client-side) جداً خودداری کنید.

15- خطاهای جاوااسکریپت صفحات سایت رو با debug کردن صفحه رفع کنید.

16- با استفاده از تگ <noscript> وضعیت غیرفعال/Disable بودن جاوااسکریپت را مدیریت کنید.

17- حتاالمکان مشخصات و صفت های تگهای <style> و <script> را کامل بنویسید.

کد:
<script type="application/javascript" language="javascript1.5">
<style type="text/css" media="all" title="Common">


18- خطاهای جاوااسکریپت صفحات را رفع کنید.

19- از بکاربردن بیش از حد کدهای CSS و جاوااسکریپت خودداری کنید.

20- حتاالمکان از ActiveX ها و Plug-in ها استفاده نکنید.

21- رفتار موتورهای جستجو را با فایلها و دایرکتوری های خاص سایت در فایل robots.txt مشخص کنید.

22- کاربران را از استفاده کوکی برای ذخیره اطلاعات مطلع کنید.

23- از استفاده بیش از حد کوکی و ذخیره اطلاعات حساس/نمایشی درونشان خودداری کنید.

24- از استفاده موسیقی و صدا در صفحاتتان خودداری کنید. یا حداقل امکان انتخاب به کاربر بدهید.

25- از نشان دادن خطاهای unfriendly به کاربر خودداری کنید.

26- طوری طراحی کنید که تفاوت سلیقه ها را هم در نظر داشته باشد.

27- صفحات را برای موتورهای جستجو بهینه کنید. (search engine optimization / SEO)

28- شکل ظاهری سایت را با رفتار و نوع سایت طراحی کنید.

29- آدرس های ایمیل رو بصورت خام/plain نمایش ندید تا قربانی spam نشوید.

30- از بکاربردن متون، تصاویر و پس زمینه های پررنگ/زننده خودداری کنید.

31- از بکاربردن تصاویر Background شلوغ و سنگین خودداری کنید.

32- جهت افزایش ایمنی سایت، سیستم HTTPS رو روی سرور پیاده سازی کنید.

33- هیچوقت Click-Jacking انجام ندید!

34- از متون خیلی ریز یا خیلی درشت استفاده نکنید.

35- سایت را طوری طراحی کنید که نیازهای افراد مبتدی، متوسط و حرفه ای را فراهم کند.

36- افرادی را برای تست سایت دخالت دهید که در فرایند طراحی "نبوده اند".

37- صفحاتی را برای Privacy و Term of use/service ایجاد نمایید.

38- پست الکترونیک یا فرم تماس را در دسترس قرار دهید.

39- انتقادات، پیشنهادات و نظرات(Feedback) کاربران را مشتاقانه پذیرا باشید.

40- ایجاد نقشه سایت(sitemap) و راهنما را فراموش نکنید.

41- از صفت alt در تگهای img و از صفت title در تگهای link استفاده کنید.

42- از استفاده بیش از حد Frame خودداری کنید.

43- Link های صفحات را چک کنید و از سالم بودنشان مطمئن بشید.

44- شکل ظاهری صفحات جداگانه را با شکل ظاهری صفحات اصلی یکنواخت کنید.

45- به عملا و دیکطه لقاط دغط کنید!

46- برای تگهای Link از صفت title استفاده نمایید.

47- صفحات را از نظر محتوا و کدنویسی بروز کنید.

48- لینک های خارجی را در پنجره/صفحه خودتان باز نکنید.
کد:
<a href="http://domain/" target="_BLANK" rel="noopener">Title</a>


49- درخواست های HTTP را به حداقل برسونید.

50- جداول را خارج از Scrollbar مرورگر قرار ندهید. بطوری که اسکرول افقی ایجاد شود.

51- از قرار دادن تصاویر و فایلهای Download/Upload در پوشه اصلی/root سایت خودداری کنید.

52- تصاویر را از سایتهای متفرقه External لود نکنید.

53- حجم و نوع فایلهای Download را به کاربر نمایش دهید.
file.zip - 5 MB
Iran.mp3 - 7 MB
...

54- حتاالمکان از تگ <blink> استفاده نکنید.

55- کلمات را بصورت حروف بزرگ ننویسید. (این یعنی با صدای بلند حرف زدن)
WHAT IS YOUR NAME?!

56- دائماً از حروف Bold/توپر و اریب/Italic استفاده نکنید.

57- حد فاصل بین Link ها را رعایت کنید.
Index | About | Contact | FAQ | ...

58- عرض متون را محدود کنید.

59- تصاویر را برای بزرگ نمایی نکشید.

60- از تعدد رنگ استفاده نکنید.

61- صفحات را در تمام مرورگرها تست و بررسی کنید.[b] IE Firefox[/b] Chrome [b]Opera...[/b]

62- صفحات را برای رزولوشن های بالا طراحی نکنید!

63- از استفاده بیش از حد پنجره های Popup خودداری کنید!

64- سایت خود را در موتورهای جستجو و Link directory ها ثبت کنید.

65- چندین آدرس و URL قابل حدس و user friendly برای بخشهای مهم سایت ایجاد کنید.

66- همیشه صفت maxlength را به فیلدهای text اضافه کنید.

67- صفتهای فرمها را بصورت کامل بنویسید و بحالت پیشفرض رها نکنید.

68- همیشه تصاویر اپلیکیشن را فشرده و optimize کنید تا حجمشان کاهش یابد.

69- از سیستم های cache برای داده های استاتیک(عکس فایل js فایل css) استفاده کنید.

70- حتاالمکان کدهای JavaScript را بصورت External و از داخل هاست خودتون include کنید.
<script type="application/javascript" src="jquery.js"></script>

71- فایلهای تصاویر را optimize کنید تا metadata های اضافی فایل حذف و حجم فایل کاهش یابد.

72- تگهای خالی src و href را حذف کنید.

73- حتاالمکان از expression های CSS استفاده نکنید. (YSlow recommendation)

74- برای کاهش مصرف پهنای باند و افزایش سرعت سایت، همیشه فایلهای CSS, JavaScript, HTML را minify و lint کنید.
CSS:
JS:

75- استفاده از redirect را به حداقل ممکن برسانید.

76- بصورت هفتگی یا ماهیانه سرعت سایت را آنالیز و ایرادات را رفع کنید:

77- بهتره همیشه آیکون وبسایت را با نام favicon.ico و در پوشه اصلی/root سایت قرار بدید.
چراکه بعضی مرورگرها بصورت پیشفرض/Hardcode بدنبال فایلی با این نام و در همین مسیر می گردند.

78- مرورگرها برای تعیین نحوه پردازش URL از نوع MIME صفحه استفاده می کنند و نه پسوند فایل! بنابراین بسیار مهم هست که اسکریپت ها و سرورهای وب، نوع MIME صحیح را در هدر Content-Type درج کنند.

کد پی‌اچ‌پی:
header('Content-Type: application/json');

header('Content-Type: text/plain');

header('Content-Type: application/pdf'); 

توجه: اگر این مورد درست پیکربندی نشود، مرورگرها به اشتباه به تفسیر محتوای فایلها می پردازند و خروجی سایتها نیز به درستی کار نمی کند، و حتی ممکن است فایلهای load شده مورد سوء استفاده های امنیتی قرار بگیرند.

 79- تلاش بر ساختن صفحه ای مناسب برای خطاهای 404 کنید.

80- حتماً از validator های W3C برای بررسی و رفع ایرادات کدهای HTML/CSS صفحات خود استفاده کنید.
وبلاگ: Yousha.Blog.ir


 کد کمتر => خطای کمتر => قابل فهمتر => خوانایی بالاتر => نگهداری بهتر

  پاسخ
#2
مقاله بروز و چند مورد جدید اضافه شد.
وبلاگ: Yousha.Blog.ir


 کد کمتر => خطای کمتر => قابل فهمتر => خوانایی بالاتر => نگهداری بهتر

  پاسخ
تشکر شده توسط : undefined ayoubsys
#3
راهی هست که فایل های CSS متعدد مانند style و RTL بدون پلاگین مانند w3 cache به صورت inline بارگذاری بشن که سرعت بهتر بشه؟
ژورنالیست کامیون
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان