طراحی سایت ریسپانسیو یا واکشنگرا به چه معناس؟ Responsive Design
  • 1397/12/22

طراحی سایت ریسپانسیو یا واکشنگرا به چه معناس؟ Responsive Design

طراحی سایت رسپانسیو چیست؟

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

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

کوئری های مدیا Media Query

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

تصاویر و فیلم های ریسپانسیو

این ویژگی به شما این امکان را می دهد تا تصاویر و سایر رسانه ها را به صورت متناسب با دستگاه با توجه به ویژگی سرریز CSS استفاده کنید. مقیاس بندی در CSS  بسیار ساده است. حداکثر عنصر را می توان 100% در نظر گرفت. در این صورت بسته به اندازه مرورگر کوچک و بزرگ می شود.

فریم ورک چیست؟

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

در دنیای طراحی وب ، اگر بخواهیم تعریف ساده تر از فریم ورک ها داشته باشیم  می گوئیم:  یک فریم ورک به عنوان یک بسته از ساختار، فایل ها و پوشه کد های استاندارد مانند css  و html و js  و غیره است . که می تواند برای حمایت از توسعه وب سایت ها ، به عنوان پایه ای برای شروع ساختن یک سایت استفاده می شود.

اکثر وب سایت ها یک ساختار مشابه دارند. هدف از فریم ورک ها ارائه یک ساختار مشترک است تا توسعه دهندگان مجبور نباشند از اول دوباره آن را انجام دهند و می توانند از کد های مورد نیاز خود استفاده کنند. چهار چوب ها به ما کمک می کنند تا در زمان خود صرفه جویی کنیم.

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

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

بوت استراپ (bootstrap)

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

Foundation

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

تاریخچه سایت‌های واکنش گرا - ریسپانسیو

در ژوئن 2012 گوگل نظر خود را برای وب سایت‌هایی که کابرپسند هستند اعلام کرد ، درهمان روزها بود که طراحی‌های ریسپانسیو responsive مد شد و همه سایت‌ها شروع کردند به طراحی وب سایت‌هایی که در موبایل‌ها و تبلت ها در سایزهای مختلف خیلی خوب نمایش داده شوند.

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

تا اینکه در سال های بعد ویژگی به اسم Mobile Mod وارد وب شد و کاربرانی که از موبایل برای مرور صفحات وب استفاده میکردند میتوانستند با انتخاب گزینه حال موبایل نسخه موبایل استایل مخصوص موبایل را بارگذاری کنند اما باز هم این ترفند مشکلاتی همچون خوانا نبودن و بهم ریختگی شکل اصلی سایت را در بر داشت و صاحبان وب سایت ها میخواستند سایتشان به همان شکل و استایلی که هست برای موبایل ها به نمایش در بیاید.

اصول کلی طراحی ریسپانسیو

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

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

دو روش استفاده شده در طراحی سایت واکنشگرا

1- استفاده از ترکیبی از کوئری های CSS  و افکت های حرکتی

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

2-  دراپ داون شدن منو

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

تفاوت سایت واکنشگرا و غیر واکنشگرا در چیست و چگونه می توان آن را تشخیص داد؟

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

آیا طراحی سایت به صورت واکنشگرا تاثیری در نتایج گوگل دارد؟

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