10
تشکر

کدام لایه بندی؟ استاتیک، شناور، تطبیقی یا واکنش گرا

طراحی وب

طراحی وب

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

لایه بندی استاتیک

Static Layout

Static Layout

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

لایه بندی شناور

Liquid Layout

Liquid Layout

لایه بندی شناور (Liquid) یا fluid به جای استفاده از عرض های از پیش تعیین شده از عرض های نسبی استفاده میکند که معمولاً از درصد استفاده می‌شود که البته از انواع واحدهای نسبی مختلف دیگر مانند ems نیز میتوان استفاده کرد.

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

لایه بندی تطبیقی

Adaptive Layout

Adaptive Layout

در لایه بندی تطبیقی (Adaptive) با استفاده از مدیا کوئری ها، سایت را برای نمایشگرها با اندازه های مختلف، آماده میکنند، و از یک نظر مشابه لایه بندی استاتیک است زیرا با استفاده از مدیا کوئری و واحد px اندازهای متفاوتی را برای سایت درست میکنند.
در‌ واقع با استفاده از این لایه بندی سایت را در چندین اندازه مختلف تنظیم میکنند. برای مثال با استفاده مدیا کوئری تعیین میکنند که اگر اندازه نمایشگر 500px بود عرض سایت 400px و اگر اندازه نمایشگر 1000px بود، عرض سایت 960px باشد.
این نوع لایه بندی برای تبدیل لایه بندی های استاتیک خوب است و همچنین به زمان کمتری برای توسعه نسبت به لایه بندی واکنش گرا یا ریسپانسیو دارد.

لایه بندی واکنش گرا

Responsive Layout

Responsive Layout

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

نتیجه‌ گیری

اگر به مثال بهتری احتیاج دارید میتوانید به سایت liquidapsize.com بروید.
همچنین اگر با لایه بندی های مختلف دیگری نیز کار کردید میتوانید در قسمت نظرات بیان کنید.

  • خوب بود ولی بهتر بود که یه سورس کد میزاشتید که بهتر متوجه بشیم
    ممنون از اینکه مطالب جدید میزارید.

  • حامد می‌گه:

    جمع بندی بسیار خوبی بود.
    متشکرم جناب شفیعی

  • محمد اسفندیاری می‌گه:

    با تشکر از شما

  • فرشاد می‌گه:

    مثل همیشه مفید ، کوتاه ، مهم و کار آمد


  • نظرات این مطلب بسته است.