همه‌چیز از اوایل دهه 1990 شروع شد. این یعنی از عمر World Wide Web و وب‌سایت‌ها فقط ۳4 سال می‌گذرد!
تاریخچه تکاملی طراحی وبسایت در جهان
در شروع چیزی به‌نام طراحی سایت وجود نداشت چون هنوز امکانات و زبان‌هایی که به سایت رنگ، عکس و طرح اضافه می‌کرد به‌وجود نیامده بودند. اولین وب‌سایت‌هایی که ساخته شدند کاملا بر پایه متن بودند و کمتر وب‌سایتی وجود داشت که در آن عکس وجود داشته باشد. نمی‌شود از تاریخ وب دیزاین حرف زد ولی از متولد‌شدن اولین مرورگرها و CSS و زبان Javascript حرفی نزد. تاریخ طراحی وب با تحولاتی که در دنیای تکنولوژی و زبان‌های برنامه‌نویسی اتفاق افتاده پیوند خورده است.
Tim Berners-Lee: خالق اولین وبسایت
اولین سایت در سال ۱۹۹۱ در یک موسسۀ تحقیقاتی، با هدف به اشتراک گذاشتن اطلاعات و نتایج یافته‌های علمی با محققان دیگر بود.Tim Berners-Lee دانشمند بریتانیایی بود که در موسسه تحقیقاتی CERN کار و تحقیق می‌کرد. از پروژ‌ه‌های مهم او در این موسسه، پروژه طراحی World Wide Web، شبکه‌ای جهانی بود که امکان بازیابی انواع اطلاعات را در سراسر جهان با استفاده از اینترنت به افراد می‌داد. قدم بعدی، خلق کردن زبان نشانه‌گذاری html بود. Tim BernersLee اولین سایت را که متعلق به‌همان موسسه تحقیقاتی بود ساخت. سایتی با یک صفحه که هنوز نیز به‌همان شکل حفظ شده است.
تاریخچه HTML
این دوره اولین زمانی بود که مرورگر ها می توانستند تصاویر را نشان دهند . استفاده از جدول‌ها و تگ‌های Table، پیدا کردن راه‌های هوشمندانه برای ترکیب کردن سلول‌ها چیزی بود که توسط کتاب معروف David Siegel یعنی کتاب Creating Killer Sites آغاز شد. آن روز ها چند جدول را داخل هم قرار می‌دادند و یک وبسایت درست می‌کردند . جدول‌ها تنها روشی بودند که می‌شد از آن‌ها استفاده کرد ولی ساختاری شکننده داشتند به همین علت طراحی وبسایت قطعه به قطعه اختراع شد . طرح قطعه به قطعه این‌گونه عمل می کرد که طرح‌های گرافیکی را به قطعات کوچکی تبدیل می‌کردند و در کنار هم می‌گذاشتند. مشکل دیگری که برای ین روش وجود داشت، نگهداری از این ساختارهای شکننده بود.
آشنایی با اولین مرورگر
فقط ۲ سال طول کشید تا اولین مرورگر به نام ALIWEB ساخته شود. این مرورگر همچنان نیز در دسترس است. کمی بعد، صاحبان کسب و کار به این فکر افتادند تا از این فرصت استفاده کنند و وب‌سایت‌های تجاری بسازند. گرچه همچنان سایت‌ها استاتیک بودند و نمی‌توانستند امکانات به کاربران بدهند، در سال ۱۹۹۴ در جهان چیزی نزدیک به ۳ هزار سایت وجود داشت. در همان سال جف بزوس آمازون را به دنیا معرفی کرد و این سرآغاز پیشرفته شدن وب‌سایت‌ها بود.
پیدایش جاوا اسکریپت
جاوا اسکریپت (JavaScript) کلید و حلال مشکلات مربوط به محدودیت‌های HTML بود. برای مثال اگر شما قصد داشتید که یک صفحه یا پاپ‌آپ به وجود بیاورید، یا یک شیء متحرک را به صفحۀ وبسایت اضافه کنید، راه‌حل شما استفاده از جاوا اسکریپت بود. با این‌حال، مشکلی که وجود دارد این است که جاوا اسکریپت به‌صورت یک لایۀ مجزا بارگیری می‌شود. برخی از اوقات برنامه‌نویسانی که دارای تجربه کافی نیستند و یا کمی تنبل هستند ممکن است از آن برای برخی کارهای استفاده کنند، اما با این‌حال اگر از آن هوشمندانه استفاده شود می‌تواند بسیار قدرتمند باشد.
فلش – عصر طلایی انیمیشن های وب
فلش، چشم طراحی سایت را تغییر داد. برای اولین بار طراحان می‌توانند با استفاده از یک ابزار، هر شکلی را ایجاد کنند، انیمیشن اضافه کنند و سایت‌های جذاب‌تری را نسبت به قبل توسعه دهند. صفحه پایانی، تمام اطلاعات را در یک فایل جمع می‌کند تا بارگذاری شود. مسئله اصلی این بود که هر کاربر وب یک پلاگین فلش نصب نکرده بود و بارگذاری سایت‌های فلش خیلی بیشتر طول می‌کشید. عصر فلش صفحات پربار و معرف‌های متحرک را برای ما به ارمغان آورد. در حالی که فلش هنوز نیز استفاده می‌شود.
تاریخچه پیدایش CSS
تقریبا همزمان با پیدایش فلش، روش بهتری برای ساخت و طراحی وبسایت به وجود آمد که نام آن CSS بود. مفهوم پایۀ CSS در این قسمت به معنای جدا کردن محتوا از نمایش آن می‌باشد. بنابراین ظاهر و فرمت وبسایت در قالب CSS اما محتوای آن در قالب HTML بود. اولین نسخه و ورژن CSS تا انعطاف‌پذیر بودن فاصلۀ زیادی داشت. مشکل بزرگتری که در آن وجود داشت نیز پشتیبانی مرورگرها از این فرمت بود. چند سالی طول کشید تا مرورگرها بتوانند از CSS پشتیبانی کنند، و اغلب مرورگرهایی که از آن پشتیبانی می‌کردند دارای باگ‌های زیادی بودند. اینجا دقیقا زمانی بود که یک مرورگر دارای جدیدترین ویژگی‌ها، و دیگری فاقد آن‌ها بود که این امر برای برنامه‌نویسی سایت یک کابوس بزرگ است.
عصر موبایل
دستگاه‌های تلفن همراه و گوشی‌های هوشمند، نحوه استفاده و تفکر مردم را در خصوص وب تغییر دادند. در سال 2007، اکثر سایت‌ها با هیچ استانداردی از «موبایل فرندلی» نبودند. علاوه بر این، استفاده از وب در یک دستگاه تلفن همراه اغلب خسته کننده بود. این امر طراحان وب را مجبور کرد تا رویکرد بهتری برای طراحی وب موبایل ایجاد کنند. این سبک جدید، سوالات زیادی را ایجاد کرد. آیا سایت موبایل باید کوچک شود؟ آیا باید استانداردهایی برای موبایل ایجاد کنیم؟ چگونه سرعت آن را افزایش دهیم تا کاربران داده‌ها را هدر ندهند؟ اولین پیشرفتی که به وجود آمده بود، ایدۀ شبکه‌های ستونی یا column grids بود. پس از پشت سر گذاشتن نشست‌های متعدد و ارائه راهکارهای مختلف، سیستم 960 grid پیروز شد و تقسیم بندی 12 ستونی (12-column division) تبدیل به روشی شد که بسیاری از طراحان از آن استفاده می‌کردند.
طراحی وب پاسخگو !
طراحی وب پاسخگو یا ریسپانسیو (responsive) قدم بزرگ دیگری در طراحی سایت بود. شخص متفکر و باهوشی به نام اتان مارکوت (Ethan Marcotte) تصمیم گرفت تا روش‌های موجود را با استفاده از محتوای تکراری اما طرح و لایه ی متفاوت برای طراحی به چالش بکشد تا در نهایت مفهوم طراحی وب پاسخگو یا responsive به نام او ثبت شود. وبسایت پاسخگو معنا و مفهوم‌های مختلفی دارد. از دید یک طراح وب، ریسپانسیو به معنای ساخت لایه‌ها و طرح‌های مختلف است. برای یک مشتری، ریسپانسیو به معنای کار کردن وبسایت بر روی تلفن همراه است. در نهایت از دید یک برنامه‌نویس وبسایت، ریسپانسیو به معنای چگونگی ارائۀ عکس‌ها، سرعت دانلود، معنا شناسی موبایل، دسکتاپ و ... است. مزیت اصلی در اینجا همبستگی محتوا می‌باشد، به این معنا که یک وبسایت، بر روی تمام پلت فرم‌ها نظیر نسخه‌های مختلف وبسایت و کامپیوتر، و انواع مختلف تلفن‌های همراه هوشمند کار کند.