مفهوم طراحی وب سایت بدون جدول

  • چهارشنبه ۲ اسفند ۱۳۹۶
  • بازدید ۲,۴۲۰ نفر

تصویر tableLess-web-design_1038_1 مفهوم طراحی وب سایت بدون جدول

طراحی وب سایت بدون جدول

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

طراحی وب سایت بدون جدول چیست ؟

طراحی و پیاده سازی صفحات وب بدون جداول یا همان TableLess Web Design یک فلسفه در طراحی وب می باشد که در آن برای طراحی از جداول HTML استفاده نمی شود. در این روش طراحی به منظور تعیین آرایش و چیدمان عناصر موجود از زبان های شیوه نامه ایی همچون CSS استفاده می شود و کار طراحی را به مراتب راحت تر از جدول می کند.

در دسامبر سال 1996 میلادی استاندارد CSS1 به منظور بهتر کردن دسترس پذیری وب و همچنین تاکید بر جداسازی محتوای اصلی از شیوه نامه ها، توسط W3C منتشر شد. W3C در سال های بعد با ارائه نسخه های جدیدی از زبان شیوه نامه ایی CSS، امکاناتی برای موقعیت دهی و چینش جدول ها به این زبان، آن را بهبود داد. در اواخر دهه 1990، زمانی که حباب دات کام در طراحی و ساخت صفحات وب رشد چشمگیری کرد، کدنویسان نیز به استفاده از جدول های HTML به منظور چینش صفحات علاقمند شدند. در بین سال های 1995 تا 2000 میلادی حباب دات کام یک حباب اقتصادی محسوب می شد.

دلیل گرایش موقعیت دهی و چینش جدول ها

  • تقاضای صاحبان محتوا برای قرار دادن لوگوی شرکتشان در صفحات وب
  • عدم پشتیبانی کامل از زبان CSS در مرورگر های موجود در آن زمان
  • نبود آگاهی و آشنایی کافی با طرحان تازه کار با استاندارد های زبان جدید CSS

تصویر tableLess-web-design_1038_2 مفهوم طراحی وب سایت بدون جدول

نبودن آگاهی و دانش کافی یا اهمیت ندادن به دلایل استفاده از زبان CSS به جای استفاده از روشی که تحت عنوان راهی ساده تر برای دستیابی سریع به آرایش های مطلوب شناخته می شد، باعث شد تا کدنویسان به استفاده از ابزار های طراحی وب سوق یابند. از فوایدی که محدود کردن استفاده از جدول های HTML دارد می توان به دسترس پذیری اطلاعات برای کاربران بیشتر، توسط عوامل کاربری بیشتر اشاره نمود. حذف شدن بسیاری از برچسب های بی معنی مانند table ، tr و یا td از صفحات ایجاد شده، باعث کاهش پهنای باند مصرف شده می شود. امروزه تعدادی از طراحان و توسعه دهندگان وب در مورد استفاده کردن یا نکردن از جدول ساده اچ تی ام ال حتی زمانی که استفاده از آن منظقی به نظر می باشد نیز تردید دارند. از سوی دیگر برخی دیگر نیز با استفاده بیش از حد از المان هایی مانند DIV و SPAN مرتکب خطا می شوند.

مبنای کار

زبان نشانه گذاری HTML در ابتدا به منظور اشتراک گذاری مقاله ها و اسناد علمی به شکل آنلاین ساخته شده بود و نحوه نمایش آن بر عهده خود کاربر بود. اما پیشرفت علم باعث شد تا اینترنت از دنیای دانشگاه و پژوهش، وارد زندگی روز مره مردم عادی شود و در سال 1990 به یک رسانه تبدیل شد. از این رو طراحان گرافیک تلاش کردند تا ظاهر صفحات نمایش داده شده به کاربر را کنترل کنند و برای ساخت و نگه داری صفحات از جدول ها و فاصله ساز ها (تصاویر گیف تک پیکسلی شفاف با پهنا، ارتفاع یا حاشیه های مشخص) استفاده کردند. این موضوع باعث بوجود آمدن مشکلاتی همچون استفاده شدن پهنای باند و حجم بیشتر، ناتوانی مرورگر ها در تجزیه و تحلیل سند تولید شده با این روش و غیره می شد.

تصویر tableLess-web-design_1038_3 مفهوم طراحی وب سایت بدون جدول

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

در سال 2001 میلادی، حباب دات کام رفته رفته فروکش کرد و در نتیجه تقاضا برای یافتن کدنویس هایی که از تجربه بیشتری در این زمینه داشتند افزایش یافت. در اکثر مواقع توسعه UI یا همان راب کاربری توسط کدنویسان با تجربه بالا انجام می شد. در زمان بود که افراد زیادی از کدنویسی بی نظم انتقاد کردند و این موضوع باعث بوجود آمدن ایده ایی جدید در صنعت کدنویسی به نام طراحی بدون جدول شد. عبارت طراحی بدون جدول به معنی جدا سازی دستورالعمل های مربوط به طراحی از محتوای اصلی می باشد و کدنویسان در این روش به جای استفاده از جداول تو در تو و گیج کننده از CSS استفاده می نمایند. البته این بدان معنا نیست که جدول های HTML بدون دیگر بدرد نمیخورند، بلکه باید در جای مناسب از آن ها نیز استفاده لازم را کرد.

تصویر tableLess-web-design_1038_4 مفهوم طراحی وب سایت بدون جدول

مزایای طراحی وب سایت بدون جدول

دسترس پذیری

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

صرفه جویی در پهنای باند

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

قابلیت نگهداری (تعمیر پذیری)

  • ممکن است یک سایت در طول حیات خویش به تغییراتی در ظاهرش نیاز داشته باشد، این تغییرات می تواند جزئی و کوچک یا بزرگ باشد. در این موقع اگر طراح آن سایت از روش بدون جدول استفاده کرده باشد، به راحتی می تواند تغییرات دلخواه خود را بر روی صفحه مورد نظر اعمال کند. اما اگر به شکل سنتی سایت را طراحی کرده باشد، به منظور ایجاد تغییرات بر روی صفحات سایت باید زمان زیادی را صرف کند. اطلاعات و دستورالعمل های مربوط به چینش صفحات، در روش طراحی بدون جدول ممکن است در یک فایل CSS ذخیره شود. از این رو می توان تغییرات را طبق پیش فرض، سریع و سراسری اعمال کرد و نیازی به تغییر در سند HTML نباشد. همچنین در روش طراحی سایت بدون جدول می توان به راحتی و با کمترین زحمت محتوای جدیدی را به سند موجود اضافه کرد در حالی که این کار در روش طراحی سنتی بسیار زمان بر و سخت است.
مطالب مرتبط
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است