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

در زمان شروع طراحی وب سایت یکی از تصمیمات اولیه ایی که شما باید در همان ابتدا بگیرید این است که می خواهید طرح بندی وب سایت با عرضی ثابت باشد یا عرضی سیال (مایع) Liquid Layout (همچنین این طراحی، طرح بندی منعطف نامیده می شود).

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

Liquid Layout چیست؟

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

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

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

در ادامه برخی از مزایای طراحی سیال یا مایع برای وب سایت آمده است.

طراحی سیال می تواند کاربر پسند باشد

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

طراحی سیال می تواند از نظر بصری خوش آیند باشد

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

طراحی سیال می تواند اسکرول افقی را کاهش دهد

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

معایب طراحی سیال

طراحی سیال کنترل کمتری در طراحی به شما می دهد

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

طراحی سایت سیال می تواند برای نمایش ویدئو، فلش و غیره مشکل ایجاد کند

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

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

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

طراحی سیال می تواند مشکل خوانایی ایجاد کند

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

طراحی سیال می تواند در چاپ صفحه مشکل ایجاد کند

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

طرح بندی هایبرید

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

به عنوان مثال، نوارهای سیاه در بالا و پایین صفحه در امتداد هم نمایش داده می شوند و نوارهای قرمز حاوی لینک ها به نظر می رسد گسترده شده و تمام عرض صفحه بدون در نظر گرفتن رزولوشن اشغال کرده است.

تمام بقیه محتوای صفحه طراحی شده است تا در بهترین رزولوشن صفحه نمایش 1024768* ارائه شوند. این تکنیک ترکیب طرح بندی ثابت و سیال برای ایجاد طرح ترکیبی را تضمین می کند که سایت به زیبایی را در تمام رزولوشن های صفحه نمایش به نظر می رسد. فضاهای زشت نه در محتوای صفحه ایجاد شده توسط طرح های سیال و نه در طرح های عرض ثابت وجود ندارد. به همین دلیل، بسیاری از وب سایت ها به طور فزاینده ای از این تکنیک ها برای ایجاد پوسته های ترکیبی که مزایای استفاده از طرح های ثابت و سیال را دارند، استفاده می کنند.

رزولوشن ایده آل برای طراحی سایت

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

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

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

کلام آخر

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

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