Open Source Web Design

در آغاز همه گیر شدن وب (سال های ۹۰ تا ۹۳) زبان برنامه نویسی HTML زبان بسیار ساده و مختصری بود. هدف از ایجاد HTML این بود که با استفاده از آن بتوان مطالب را به شکلی ساخت یافته و مرتب در وب قرار داد. در آغاز دستوراتی در HTML تعبیه شده بود که برای ایجاد یک صفحه وب ساخت یافته کفایت می کرد. دستوراتی برای ایجاد کردن بخش عنوان، لیست، پاراگراف، لینک به صفحات دیگر و … در HTML وجود داشت و وجود همین دستورات کافی به نظر می رسید. در HTML دستوراتی برای طرح بندی صفحه در نظر گرفته نشده بود.

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

(مرورگر Mosaic در حال نمایش سایت Yahoo!)

کم کم نیاز به دستوراتی برای طراحی صفحه و شکل دهی به متن و تصاویر احساس شد و کم کم دستوراتی مانند برچسب <b> برای نمایش دادن متن به شکل پررنگ و <i> برای نمایش متن به شکل مایل به HTML اضافه شد ولی این دستورات جوابگوی نیاز طراحان نبود و طراحان برای طرح دادن به صفحات سایت خود از برخی دستورات HTML مانند برچسب های <font> و <table> سوء استفاده کردند. به عنوان مثال، برچسب <table> برای نمایش اطلاعات جدولی ایجاد شده بود ولی طراحان از این برچسب برای ایجاد کل سایت استفاده کردند و عناصر را داخل جدول ها جای دادند. هر چه طراحی های صفحات پیچیده تر می شد، طراحان به میزان بیشتری با محدودیت دستورات در HTML مواجه می شدند.

به عنوان مثال، برچسب <h1> برای نمایش عنوان در صفحه ایجاد شده بود ولی شما قادر به تغییر اندازه فونت این بخش نبودید. طراحان نیز در طراحی از این برچسب استفاده نمی کردند  چون به علت بزرگ بودن اندازه فونت، استفاده از این برچسب به طراحی صفحه لطمه وارد می کرد، در نتیجه طراحان به جای استفاده از بر چسب <h1> از برچسب <font> استفاده کردند که در آن می توان اندازه فونت را تعیین کرد. به کد زیر دقت کنید:

[html toolbar="false"]<br />
<font size="+3" face="Helvetica" color="red">Open Source Web Design</font><br />
[/html]

استفاده از این برچسب هم مشکلاتی ایجاد می کند. اصلی ترین مشکل این است که اگر کسی که از نظر بینایی مشکل داشته باشد، بخواهد از مطالب صفحه طراحی شده با استفاده از برنامه های صفحه خوان استفاده کند با مشکل مواجه خواهد شد چون برنامه های صفحه خوان هرگاه با برچسب <h1> مواجه شوند، کاربر را مطلع می کنند که بخش مربوطه یک عنوان است ولی با استفاده از برچسب <font> این قبیل ابزارها هیچ تفاوتی بین بخش عنوان و بقیه متون نخواهد گذاشت. درضمن بزرگترین کاربر سایت شما در اصل مرورگر سایت گوگل است که سعی می کند مطالب سایت شما را فهرست کند. مرورگر گوگل هم در اصل نابیناست و فقط کد صفحات را بررسی می کند و کاری با طرح و تصاویر صفحه ندارد، چون نه احتیاجی به این بخش ها دارد و نه اینکه می تواند از آنها استفاده کند. جستجوگرهای گوگل برای مطالب داخل برچسب <h1> اهمیت ویژه قائل هستند چون می دانند که این بخش در اصل عنوان صفحه است ولی وقتی شما در صفحه خود از این برچسب استفاده نکنید در نتیجه گوگل هم فرض خواهد کرد که شما بخش عنوان را در صفحه خود تعبیه نکرده اید.

نتیجه این خواهد بود که با استفاده نادرست از دستورات HTML، صفحات ساختار منطقی خود را از دست داده و به موقعیت سایت شما در موتورهای جستجو نیز لطمه وارد خواهد شد.

در نهایت این مشکل از دید کنسرسیوم جهانی وب (w3c) مخفی نماند و این سازمان به فکر ایجاد استاندارد جدیدی افتاد تا مشکل موجود را برطرف کند. در سال ۱۹۹۵ این سازمان استاندارد CSS را معرفی کرد و در سال ۱۹۹۶ این استاندارد به تمامی طراحان وب توصیه شد و در سال ۱۹۹۸ نیز نسخه دوم این استاندارد نیز منتشر شد.

امروزه ، CSS به عنوان یک استاندارد در طراحی وب پذیرفته شده و روز به روز به تعداد سایت هایی که از CSS در طراحی استفاده می کنند اضافه می شود. بیشتر سایت های بزرگ در حرکت به سمت CSS تردید داشتند ولی درحال حاضر بسیاری از سایت های بزرگ نیز در طراحی از CSS استفاده کردند.

اولین سایتی که طراحی قدیمی را کنار گذاشت و در طراحی قالب از CSS استفاده کرد، سایت ورزشی ESPN بود که در حال حاضر در طول روز بیش از ۱۰ میلیون بازدید کننده دارد. البته سایت های بزگ دیگری نیز از CSS در طراحی استفاده کردند همچون سایت gamespot که به عنوان بزرگترین سایت مرتبط با بازی های رایانه ای شناخته می شود و یا سایت معروف download که طراحی صفحات خود را تغییر داد و از طراحی بر پایه CSS استفاده کرد.