تاریخچه طراحی وبسایت‌ها؛ از صفحات خاکستری و متنی سال ۱۹۹۱ تا انقلابی که اتان مارکوت با معرفی مفهوم Responsive به پا کرد

دنیای اینترنت امروز چنان با تصاویر متحرک، افکت‌های سه‌بعدی و رابط‌های کاربری پویا گره خورده که تصور نخستین روزهای پیدایش آن برای نسل جدید غیرممکن به نظر می‌رسد. در اوایل دهه نود میلادی زمانی که تیم برنرز لی نخستین تارنمای جهان را بارگذاری کرد، خبری از فونت‌های رنگارنگ یا چیدمان‌های پیچیده نبود و همه‌چیز در بستری صامت و متنی خلاصه می‌شد. در این مقاله می‌خواهیم ببینیم روند تکامل طراحی وبسایت‌ها از آن روزهای خاکستری سال ۱۹۹۱ تا انقلاب بزرگی که اتان مارکوت با معرفی مفهوم طراحی واکنش‌گرا ایجاد کرد چگونه شکل گرفت. آیا واقعاً نیاز به نمایش بهتر اطلاعات در موبایل‌ها بود که این تغییر ساختاری را رقم زد یا استانداردهای فنی جدید ما را به این سمت هدایت کردند؟ با ما همراه باشید تا این مسیر پرفراز و نشیب و زیرساخت‌های مهندسی آن را مرور کنیم.

۱. خشت اول؛ صفحات متنی و دوران خاکستری سال ۱۹۹۱

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

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

۲. ظهور جدول‌ها؛ تلاش برای نظم‌دهی به آشوب بصری

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

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

۳. دوران طلایی و تاریک فلش؛ انیمیشن‌های سنگین

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

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

۴. تولد استانداردهای نوین؛ ورود پرقدرت CSS و جداسازی محتوا

معرفی صفحات استایل آبشاری یا همان سی‌اس‌اس (CSS) نقطه عطفی بود که مرز میان محتوای وب و ظاهر آن را برای همیشه ترسیم کرد. با این فناوری توسعه‌دهندگان توانستند کدهای ساختاری اچ‌تی‌ام‌ال را از کدهای ظاهری جدا کنند که این کار سرعت توسعه را به شدت بالا برد. حالا برای تغییر رنگ یا فونت کل صفحات یک وبسایت بزرگ نیازی به ویرایش تک‌تک فایل‌ها نبود و تغییر یک فایل استایل بیرونی کفایت می‌کرد.

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

۵. انقلاب موبایل‌ها؛ وقتی نمایشگرهای کوچک همه‌چیز را خراب کردند

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

در ابتدا بسیاری از شرکت‌ها اقدام به ساخت نسخه‌های جداگانه مخصوص موبایل با پیشوند معروف ام (m.domain.com) کردند. این رویکرد اگرچه مشکل نمایش را تا حدی حل کرد اما هزینه‌های نگهداری و به‌روزرسانی محتوا را دو برابر کرد. طراحان باید برای هر دستگاه جدید با رزولوشن متفاوت یک نسخه خاص طراحی می‌کردند که این کار با توجه به تنوع روزافزون سخت‌افزارها عملاً غیرممکن و فرسایشی بود.

۶. اتان مارکوت و تولد مفهوم طراحی واکنش‌گرا

در سال ۲۰۱۰ طراح و توسعه‌دهنده‌ای به نام اتان مارکوت با انتشار مقاله‌ای انقلابی اصطلاح طراحی وب واکنش‌گرا (Responsive Web Design) را معرفی کرد. او استدلال کرد که ما نباید برای هر دستگاه یک سایت مجزا بسازیم بلکه باید وبسایتی طراحی کنیم که خودش را با اندازه نمایشگر کاربر وفق دهد. این ایده با ترکیب سه مفهوم شبکه‌های منعطف، تصاویر انعطاف‌پذیر و مدیا کوئری‌ها شکل گرفت.

معرفی این مفهوم بلافاصله شیوه تفکر طراحان وب در سراسر جهان را تغییر داد و به استانداردی طلایی تبدیل شد. دیگر نیازی به ردیابی نوع دستگاه کاربر نبود زیرا چیدمان صفحه به صورت پویا بر اساس پیکسل‌های در دسترس تغییر می‌کرد. این رویکرد هوشمندانه نه‌تنها تجربه کاربری را به طرز چشمگیری بهبود بخشید بلکه هزینه‌های نگهداری سایت‌ها را برای صاحبان کسب‌وکارها به شدت کاهش داد.

۷. بررسی فنی ساختار مدیا کوئری‌ها در طراحی مدرن

هسته اصلی طراحی واکنش‌گرا بر پایه مدیا کوئری‌ها (Media Queries) استوار است که بخشی از استانداردهای مدرن سی‌اس‌اس به شمار می‌روند. این کدهای دستوری به مرورگر اجازه می‌دهند تا مشخصات فیزیکی دستگاه مانند عرض، ارتفاع و جهت نمایشگر را بررسی کند. بر اساس این اطلاعات استایل‌های متفاوتی اعمال می‌شود تا محتوا به بهترین شکل ممکن چیدمان شود.

توسعه‌دهندگان با تعریف نقاط شکست مناسب می‌توانند چیدمان‌های چندستونه را در نمایشگرهای کوچک به چیدمان‌های تک‌ستونه تبدیل کنند. این ابزار فنی امکان کنترل دقیق جزئیاتی مانند اندازه فونت‌ها، فواصل و حتی نمایش یا عدم نمایش برخی عناصر غیرضروری را در موبایل فراهم می‌کند. استفاده صحیح از این قابلیت‌ها باعث بهبود شدید سرعت رندر صفحات در دستگاه‌های ضعیف‌تر می‌شود.

۸. سیستم‌های گرید و فلکس‌باکس؛ مهندسی نوین چیدمان

با پیچیده‌تر شدن ساختار صفحات وب ابزارهای سنتی سی‌اس‌اس دیگر برای چیدمان‌های منعطف کافی نبودند و نیاز به ابزارهای تخصصی‌تری احساس می‌شد. معرفی سیستم فلکس‌باکس (Flexbox) و کمی بعد از آن گرید (CSS Grid) انقلابی در نحوه توزیع فضا و تراز کردن عناصر ایجاد کرد. این سیستم‌ها به طراحان اجازه می‌دهند تا بدون نیاز به کدهای پیچیده جاوااسکریپت چیدمان‌های کاملاً منعطف بسازند.

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

۹. تاثیر سئو و رویکرد اولویت موبایل گوگل بر طراحی وب

تصمیم گوگل برای تغییر مکانیسم رتبه‌بندی به حالت اولویت نسخه موبایل (Mobile-First Indexing) ضربه نهایی را به وبسایت‌های غیرواکنش‌گرا وارد کرد. از آن پس ربات‌های گوگل ابتدا نسخه موبایل یک سایت را برای ارزیابی کیفیت و رتبه‌بندی بررسی می‌کردند. این تغییر سیاست باعث شد تا بهینه‌سازی نمایشگرهای کوچک دیگر یک گزینه اختیاری نباشد بلکه به عامل حیاتی بقا تبدیل شود.

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

۱۰. چالش‌های کاربری و روانشناسی تعامل در صفحات منعطف

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

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

۱۱. وب اپلیکیشن‌های پیش‌رونده؛ مرز باریک وب و نرم‌افزار

با پیشرفت فناوری مرورگرها مفهوم جدیدی به نام وب اپلیکیشن‌های پیش‌رونده (PWA) متولد شد که فاصله میان وبسایت و نرم‌افزار گوشی را از بین برد. این سیستم‌ها به کاربران اجازه می‌دهند تا وبسایت را مانند یک اپلیکیشن روی گوشی خود نصب کنند و حتی در حالت آفلاین به بخش‌هایی از آن دسترسی داشته باشند. این فناوری با استفاده از سرویس‌ورکرها اطلاعات را در پس‌زمینه همگام‌سازی می‌کند.

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

۱۲. آینده طراحی وب؛ هوش مصنوعی و رابط‌های پویا

امروز ما در آستانه ورود به نسلی هستیم که در آن هوش مصنوعی چیدمان صفحات وب را به صورت آنی بر اساس رفتار کاربر شخصی‌سازی می‌کند. صفحات وب آینده دیگر ایستا نخواهند بود بلکه با توجه به ترجیحات نوری، مشکلات بینایی یا سبک تعامل فرد تغییر شکل می‌دهند. این تکامل نشان می‌دهد که مسیر آغاز شده از سال ۱۹۹۱ همچنان با سرعت به سمت انعطاف‌پذیری بیشتر در حرکت است.

فناوری‌های نوین مانند واقعیت افزوده و رابط‌های صوتی نیز به زودی استانداردهای طراحی وب را بازتعریف خواهند کرد. طراحان باید خود را برای سناریوهایی آماده کنند که در آن‌ها محتوا فراتر از نمایشگرهای دوبعدی معمولی جریان می‌یابد. در نهایت هدف اصلی همواره ثابت می‌ماند؛ انتقال اطلاعات به راحت‌ترین و دردسترس‌ترین شکل ممکن به مخاطب در هر زمان و مکان.

سوالات متداول

دکتر علیرضا مجیدی

پزشک، نویسنده و بنیان‌گذار وبلاگ «یک پزشک»

دکتر علیرضا مجیدی، نویسنده و بنیان‌گذار وبلاگ «یک پزشک».
با بیش از ۲۰ سال نویسندگی «ترکیبی» مستمر در زمینهٔ پزشکی، فناوری، سینما، کتاب و فرهنگ.
باشد که با هم متفاوت بیاندیشیم!

دربارهٔ علیرضا مجیدی در یک پزشک