Messages

Sliders

Sliders

Add a Signup Form to Your Website

Add a Signup Form to Your Website

مراحل ثبت دامنه و تنظیمات DNS

مراحل ثبت دامنه و تنظیمات DNS

چرا ترافیک وب سایت برای تجارت من مهم است؟

چرا ترافیک وب سایت برای تجارت من مهم است؟

Why is Website Traffic Important to My Business?

Why is Website Traffic Important to My Business?

ترافیک وب

ترافیک وب

Web traffic

Web traffic

8 نشانه اساسی گوگل برای رتبه بندی در سال 2019

8 نشانه اساسی گوگل برای رتبه بندی در سال 2019

مشکلات رایج در کدنویسی معتبر و رفع آنها

مشکلات رایج در کدنویسی معتبر و رفع آنها

article حل مشکل محتوای تکراری (Duplicate Content) در سایت

article حل مشکل محتوای تکراری (Duplicate Content) در سایت

رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!

رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!

چرا برخی سایت ها و وبلاگ ها رتبه الکسای بهتری دارند؟

چرا برخی سایت ها و وبلاگ ها رتبه الکسای بهتری دارند؟

article پیج رنک چیست و چگونه می توان آن را افزایش داد؟

article پیج رنک چیست و چگونه می توان آن را افزایش داد؟

article چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟

article چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟

کدام نوع وبلاگ می تواند برای تجارت  شما مفید باشد

کدام نوع وبلاگ می تواند برای تجارت شما مفید باشد

What a Blog Can Do For Your Small Business

What a Blog Can Do For Your Small Business

WhatsApp vs WhatsApp Business App: What's the Difference?

WhatsApp vs WhatsApp Business App: What's the Difference?

TinyMCE 5: Inline editor example

TinyMCE 5: Inline editor example

TinyMCE 5 - Inline editor example

TinyMCE 5 - Inline editor example

Native HTML5 Drag and Drop

Native HTML5 Drag and Drop

HTML5 Drag and Drop

HTML5 Drag and Drop

Step Organization in Java

Step Organization in Java

How to use Cucumber? – Cucumber best practices

How to use Cucumber? – Cucumber best practices

A Guide to Cucumber Best Practices

A Guide to Cucumber Best Practices

Why Responsive Design Support is the Most Important Feature You Can Add To Your Website

Why Responsive Design Support is the Most Important Feature You Can Add To Your Website

5 مزایای قدرتمند وبلاگ نویسی برای تجارت شما

5 مزایای قدرتمند وبلاگ نویسی برای تجارت شما

5 POWERFUL BENEFITS OF BLOGGING FOR YOUR SMALL BUSINESS

5 POWERFUL BENEFITS OF BLOGGING FOR YOUR SMALL BUSINESS

Angular 1 using redux architecture

Angular 1 using redux architecture

Google Analytics for Nonprofits

Google Analytics for Nonprofits

Home Login Logout

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

معمولاْ صفحات سایت با اندازه‌های ثابتی طراحی و پیاده‌سازی می‌شدند. در این نوع طراحی تنها تصور می‌شد که صفحات وب تنها به روی صفحه‌های نمایش با اندازه خاص (مثلا لپ تاپ) نمایش داده خواهد شد. اما امروز دنیا با ورود گوشی‌های هوشمند در اندازه‌های مختلف بسیار متفاوت است و دیگر نمی‌توان اندازه خاصی برای صفحه‌های وب در نظر گرفت. کاربران شما نیز به دنبال استفاده از سایت شما نه تنها در رایانه‌های شخصی بلکه با گوشی هوشمند، تبلت و رایانه‌های قابل حمل خود هستند.

راه‌های رویارویی با این مسئله به چهار دسته کلی زیر تقسیم می‌شود:

  1. Responsive design
  2. Adaptive desing
  3. Fluid design
  4. Fixed design

در این مقاله از ویراوب به توضیح این روش‌ها خواهیم پرداخت. با ما همراه باشید...

توصیف راه‌های متفاوت طراحی

Responsive

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

این سبک طراحی امروزه به عنوان یکی از پرطرفدارترین روش‌ها در نظر گرفته می‌شود.

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

Adaptive

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

به عنوان مثال، در گوشی‌های Iphone X ابتدا اندازه‌ی صفحه برابر با 812*375 پیکسل تعیین می‌شود و سپس طراحی برای آن انجام می‌شود.

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

Fluid

در این روش، صفحه وب بر اساس درصد نسبت به ابعاد صفحه نمایش طراحی می‌شود. مثلاْ عرض صفحه برابر با ۹۹ درصد عرض صفحه‌ی نمایش در نظر گرفته می‌شود و آن‌گاه طراحی می‌شود.

برای روشن‌تر شدن مطلب تصور کنید در یک صفحه وب می‌خواهید دو تصویر را به صورت افقی در کنار یکدیگر قرار دهید. در روش Fluid عرض این عکس‌ها باید به صورت درصد (٪) ثبت شوند. فرض کنید برای هر عکس عرض ٪۴۰ در نظر گرفته می‌شود. این بدان معناست که این صفحه روی هر دستگاهی که باز شود پهنای عکس‌ها در صفحه‌ی آن دستگاه نیز به اندازه ی ٪۴۰ از عرض آن دستگاه باقی خواهد ماند.

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

مشکلی که این روش دارد این است که فرض کنید ۱۰ عکس دارید که پهنای هر کدام را برابر ٪۱۰ در نظر می‌گیرید. این عکس‌ها روی صفحه‌ی دسک‌تاپ یا لپ‌تاپ به وضوح قابل دیدن هستند اما اگر همان صفحه را در یک موبایل معمولی باز کنید سایز عکس‌ها نیز کوچک می‌شوند و دیگر به خوبی قابل مشاهده نیستند.

حال حالتی را در نظر بگیرید که ما این حق انتخاب را داشته باشیم که بگوییم اگر این عکس‌ها در صفحه‌ی موبایل باز شدند به جای این‌که به صورت افقی با عرض ٪۱۰ در کنار یکدیگر ظاهر شوند به صورت ستونی زیر یکدیگر قرار بگیرند و عرض هر عکس نیز ٪۱۰۰ شود. در این صورت عکس‌ها بسیار باکیفیت‌تر قابل مشاهده هستند. روش طراحی Responsive که در آغاز بررسی شد این امکان را فراهم آورده است و ما در طراحی صفحات با ویراوب این قابلیت را به برای طراحان فراهم آورده‌ایم.

Fixed

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

در این روش اندازه‌های مورد استفاده در صفحه به صورت ثابت و معمولاْ بر اساس پیکسل تعیین می‌شوند. مثلاْ اگر عرض عکسی برابر ۲۰۰ پیکسل در نظر گرفته شده باشد پهنای این عکس مستقل از دستگاهی که روی آن ظاهر می‌شود ۲۰۰ پیکسل است.

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

بررسی دقیق‌تر نقاط ضعف و قوت راهکارهای طراحی

پیش از اینکه به مقایسه این روش‌ها بپردازیم اجازه دهید که این روش‌ها را با عبارت‌های مختصری نمایش دهیم. از این پس در این متن این روش‌ها را با نام‌های زیر نمایش خواهیم داد:

  • RWD: Respnsive web desing
  • AWD: Adaptive web desing
  • FLWD: Fluid web desing
  • FXWD: Fixed web desing

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

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

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

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

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

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

چطور می‌توان روش FLWD را مقایسه کرد؟

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

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

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

در نتیجه برای طراحی صفحه‌های وب جدید و وب‌سایت‌های جدید استفاده از روش‌های RWD بسیار مناسب و ساده است.  روش‌های مثل FLWD و FXWD نیز برای استفاده در وب اصلا مناسب نیست و باید از آنها پرهیز کرد.

چه چیزهایی را باید برای انتخاب روش طراحی در نظر گرفت؟

از آن‌جا که در بسیاری از حالت‌ها می‌توان روش‌هایی چون RWD ،AWD و FLWD را به کار برد چگونه می‌توان تعیین کرد که کدام روش مناسب‌تر است؟ در دنیای اقتصاد امروز سایت شما تقریباْ اولین جایی است که مشتریان شما با محصولات، کسب و کار و یا نماد کسب و کار شما روبرو می‌شوند. این به معنی آن است که اگر تجربه کاربر در برخورد با سایت شما ضعیف باشد مشتری متقاعد نخواهد شد که کار خود را با سایت شما ادامه دهد و این برای شما بسیار پرهزینه خواهد بود. این دلیلی است که قبل از شروع از به کار باید تصمیم بگیرید که کدام روش بهترین اثر را روی مشتریان شما خواهند داشت. چه کسی به سایت شما خواهد آمد؟ از چه دستگاه‌هایی برای اتصال به سایت شما استفاده خواهند کرد؟ اینها تنها بخشی از پرسش‌هایی است که قبل از طراحی باید به آن‌ها بپردازید و با تحلیل درست روش مناسب برای کار خود را انتخاب کنید.

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

خبر خوب این‌که ویراوب این امکان را برای کاربران خود به طرزی بسیار آسان فراهم آورده است.

نکته دیگری را که باید در نظر بگیرید این است که نشان کسب و کاری را که برای آن می‌خواهید سایت طراحی کنید یک نشان جدید است یا قبلاْ موجود بوده و کاربرانی را دارد. استفاده از روش RWD برای تمام سایت‌های جدید راهکاری بسیار مناسب است این در حالی است که اگر سیستم قدیمی وجود دارد و کاربران آن با محیط آن عادت کرده اند نیازی نیست که یک طراحی جدید را ایجاد کنید، تنها کافی است که یک نمایش جدید برای کاربران جدید خود ایجاد کنید و روش AWD را دنبال کنید.

روش‌هایی مثل FLWD نیز برای زمانی مناسب است که شما می‌خواهید در کمترین زمان ممکن یک سایت را ایجاد کنید و در نهایت بعد از گذشت زمان طراحی‌های خود را بهینه کنید. این روش به شما کمک می‌کند در کمترین زمان ممکن تمام اندازه‌های متفاوت از دستگاه‌ها را بدون نگرانی حمایت کنید و در زمان مناسب ایده‌های جدید خود را در قالب‌های RWD ارائه کنید.

نتیجه‌گیری

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

LocalTheme

Help