69 نکته در طراحی و ساخت صفحات وب

1- صفحات را با استفاده از استاندارد HTML4 يا XHTML1 به اندازه توان مرورگر طراحي کنيد.
 
2- تمام صفحات ايستا(HTML) را بررسي، ارزيابي و آزمایش کنيد.
 
3- اغلب کاربران مرورگر را بخاطر بروز خطا/مشکل مقصر نمي دانند، سايت را مقصر مي دانند!
 
4- حتاالمکان با XHTML هماهنگ شويد تا آينده صفحات وبتان تضمين شده باشد.
 
5- حتاالمکان با استفاده از CSS طرح بصري ايجاد کنيد نه با تصاوير.
 
6- براي بالا بردن کيفيت و خوانايي کد، از توضيحات/Comments استفاده کنيد.

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

7- از تغییر مسیر خودکار خطاهای 404 خودداری کنید.
 
8- قوانین CSS را در صفحات بررسی کنید و از استاندارد های CSS1 بهره بگیرید.
 
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- از توضیحات/Comment های HTML در تگ <script> استفاده کنید.
<script>
<!--
...
--!>
</script>
 
16- با استفاده از تگ <NoScript> وضعیت غیرفعال/Disable بودن جاوااسکریپت را کنترل کنید!
 
17- مشخصات و صفت های تگهای<style> و <script> را کامل بنویسید.
<script type="text/javascript" language="javascript1.5">
<style type="text/css" media="all" title="Common">
 
18- خطاهای جاوااسکریپت صفحات را حل و مدیریت کنید.

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

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

21- مشکل مرورگرهایی که از جاوااپلت پشتیبانی نمی کنند را مدیریت کنید.

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

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

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

25- کاربر و طراح یکی نیستند!

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

27- صفحات را عاری از عیب و نقص طراحی کنید(مرورگرها، سیستمها و... به اندازه خودشان مشکلات دارند).

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

29- کاربران از سایت استفاده می کنند، نه مرورگر!

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

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

32- کاربران انتظار حداکثر بازده از حداقل کار را دارند.

33- مدت زمانی که کاربر منتظر می ماند برابر باشد با پاداش/نتیجه مطلوبی که میگیرد.

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

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

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

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

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

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

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

41- از صفت Alt در تگهای تصاویر، پیوندها و... استفاده کنید.

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

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

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

45- به املا و دیکته لغات دقت کنید.

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

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

48- سایتها/Link های خارجی را در پنجره/صفحه خودتان باز نکنید.

<a href="http://domain/" target="_BLANK">Title</a>
 
 49- از پس زمینه های تیره استفاده نکنید.

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

51- حتاالمکان از تصاویر PNG استفاده نکنید(فعلاً).

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

53- آدرس تصاویر را از سایتهای خارجی(External) نگیرید!

54- حجم و نوع فایلهای Download را نمایش دهید.

file.zip - 5 MB
Iran.mp3 - 7 MB

...
 
55- از تگ <blink> استفاده نکنید.

56- متنها را بصورت حروف بزرگ ننویسید(این یعنی با صدای بلند/فریاد با خواننده حرف زدن)
WHAT IS YOUR NAME?!

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

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

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

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

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

62- صفحات را در تمام مرورگرها تست و بررسی کنید. IE, Firefox, Opera...

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

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

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

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

67- همیشه صفت MaxLength را برای فیلدهای متنی درنظر بگیرید.

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

 
در آخر هم یوشا خان فرمودند که موفق باشید :