طراحی سایت واکنشگرا یا ریسپانسیو

طراحی سایت ریسپانسیو یا واکنشگرا ساختاری ارزشمند !

• طراحی وب سایت ریسپانسیو یا واکنشگرا چیست؟
• یک سایت واکنشگرا چه نتیجه و تاثیری دارد؟
• مهم ترین خصوصیات یک وب سایت ریسپانسیو چیست؟
• چگونه یک سایت را واکنشگرا یا ریسپانسیو کنیم؟
• برای ریسپانسیو کردن یک سایت به چه دانشی نیاز است؟

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

تیم طراحی و سئو سایت وب داران شما را به خواندن این مطلب دعوت می نماید.

به یک سایت ریسپانسیو احتیاج دارید؟ کارشناس وب داران برای مشاوره منتظر تماس شماست.

تعریفی جامع از وب سایت ریسپانسیو یا واکنشگرا از سایت معتبر آموزش طراحی w3schools.com

طبق تعریف یکی از وب سایت های معتبر آموزش طراحی وب سایت جهان w3schools.com :

طراحی سایت واکنشگرا درباره استفاده از کدهای html و css در سایت به منظور تغییر اندازه وب سایت به صورت اتوماتیک می باشد.

به بیان دیگر از این وب سایت معروف می توان اینگونه تعریف را کامل کرد که:

طراحی سایت ریسپانسیو درباره ساخت وب سایتی است که، در تمام موبایل ها،تبلت ها، لپ تاپ ها یا دسکتاپ ها به وضوع و عالی دیده شود.

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

به تصویر زیر دقت کنید.

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

هر کدام از ستون های 1، 2 و 3 می تواند شامل متن، تصویر یا ویدیو باشد. که برای راحتی در درک از متن استفاده کرده ایم.

به این نکته باید توجه کرد که در دسکتاپ ها ستون ها به صورت عمودی در کنار هم قرار میگیرند.

به یک سایت ریسپانسیو احتیاج دارید؟ کارشناس وب داران برای مشاوره منتظر تماس شماست.

حال فرض کنیم ما این وب سایت را می خواهیم با یک موبایل مشاهده نماییم.

اگر این حالت یعنی شکل بالا در موبایل نمایش داده شود، چه می شود؟

کاملا مشخص است که ستونها جمع شده و داخل هم می رود یعنی تصاویر، متن ها و ویدیو ها ناخوانا شده و دیده نمی شوند.

حال به تصویر زیر دقت کنید.

تصویر بالا همان وب سایت را در حالت موبایل یا تبلت نمایش می دهد. اگر کمی دقت کنیم :

متوجه این نکته خواهیم شد که ستون های 1،2،3 به جای حالت عمودی به شکل کاملا افقی در زیر هم قرار گرفته اند.

حال که ساختار یک وب سایت واکنشگرا را درک کردیم، باید به این مسئله مهم فکر کنیم که :

یک سایت ریسپانسیو چه تاثیری در بهتر شدن رابط کاربری UX با وب سایت دارد؟ (منظور از رابطه کاربری یعنی: یعنی تعامل کاربر و وب سایت به بهترین شکل ممکن باشد)

یک سایت واکنش گرا یا ریسپانسیو چه تاثیراتی دارد؟

این اطلاعات را با توجه به آمار ها و تعاریف وب سایت webfx.com برای شما عزیزان توضیح می دهیم.

شماره 1 انعطاف پذیری

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

شماره 2 رابط کاربری فوق العاده

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

شماره 3 کاهش هزینه ها

قطعا طراحی سایت ریسپانسیو هزینه های شما را کاهش خوهد داد اما چگونه؟

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

شماره 4 بهتر شدن نتیجه سئو

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

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

Mobile First Indexing گوگل می تواند نشان دهنده این باشد که واکنشگرا بودن یک وب سایت تا چه حد اهمیت دارد.

mobile first indexing یعنی : ابتدا در گوگل وب سایت هایی ایندکس شوند که مشکلی در نمایش دستگاه های موبایل نداشته باشند.

شماره 5 افزایش کابران موبایل

یکی از مهمترین تاثیرات یک سایت ریسپانسیو افزایش روز افزون کاربران موبایل نسبت به دسکتاپ هاست.

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

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

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

به یک سایت ریسپانسیو احتیاج دارید؟ کارشناس وب داران برای مشاوره منتظر تماس شماست.

چگونه یک وب سایت را واکنشگرا یا ریسپانسیو کنیم؟

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

تعریف فریم ورک به زبان ساده

فریم ورک یا چهارچوب یا قالب برنامه نویسی و نرم افزاری است که برای گسترش دهنده Developer ها یا همان برنامه نویسان مورد استفاده قرار می گیرد.

در دنیای طراحی وب ، اگر بخواهیم تعریف ساده تر از فریم ورک ها داشته باشیم می گوییم:

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

در این مقاله ما به ذکر دو روش اکتفا کردیم ، امیدوارم استفاده لازم را ببرید.

پیش نیازها:

برای ساخت صفحات ریسپانسیو احتیاج به داشتن پیش زمینه هایی در مورد css3 و html5 و JavaScript و استفاده از مدیا کوئری ها دارید، همچنین نیازمند به استفاده از کامپوننت ها و فریم ورک های خاصی خواهید داشت، مانند استفاده از فریم ورک های bootstrap ، Foundation ، Skeleton YAML

1- در ادامه قصد ساخت یک صفحه سایت ریسپانسیو ساده را با استفاده از مدیاکوئری (media query) داریم.

ما با استفاده از media query تعیین می کنیم صفحه سایت در هر دستگاهی با رزولوشن های مختلف چگونه نمایش داده شود.

به عنوان مثال با استفاده از تگ [email protected] تعیین می کنیم که : اگر اندازه عرض رزولوشن دستگاه 320 پیکسل باشد، بک گراند صفحه سبز شود.

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

برای طراحی سایت واکنشگرا نیازی نیست به مقدار بی نهایت اندازه رزولوشن را در ذهن خود داشته باشید، این کدها بر اساس رزولوشن های استاندارد ایجاد می شوند:

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

• ابعاد برای موبایل

320*480 پیکسل

360*640 پیکسل

• ابعاد برای تبلت و دسکتاپ

1024*768 پیکسل

• ابعاد برای دسکتاپ

800*1280 پیکسل

980*1280 پیکسل

1280*600 پیکسل

1290*900 پیکسل

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

برای دریافت بهترین نتیجه باید اندازه عرض عناصر (width) را با درصد تنظیم نمود و نه پیکسل ، یعنی باید میزان عرض هر div به اندازه 30% باشد نه 300پیکسل.

تصویر زیر گویای این موضوع است.

به کد زیر توجه کنید :

در این قطعه گفته شده که اگر اندازه مرورگر از 500 پیکسل بزرگتر باشد رنگ پس زمینه سبز و در غیر این صورت قرمز باشد.

یعنی شما با کوچک و بزرگ کردن مرورگر باید این تغییرات را مشاهده کنید.

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

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

بدون این تگ مرورگرها صفحه سایت شما را با اندازه 980 رندر می کنند.

تگ viewport چیست؟

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

چگونه از تگ viewport استفاده کنیم؟

کد مثال بالا را در نظربگیرید، برای ساخت نمونه سایت ریسپانسیو ، در بخش head سایت ، کد زیر را وارد کنید(مانند مثال):

meta name=”viewport” content=”width=device-width, initial-scale=1.0″

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

وظیفه width=device-width چیست؟

width=device-width به مرورگر دستور می دهد که عرض صفحه سایت را با عرض گوشی یکسان کند ، یعنی اگر سایت در گوشی موبایل با اندازه 360 دیده شود، سایت نسبت به این اندازه واکنش نشان داده و عرض آن به 360 تغییر می کند.

این متغیر حتی امکان دریافت مقدار عددی را هم دارد.

وظیفه initial-scale :

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

در حالت پیش فرض زووم روی 1 تنظیم شده است.

وظیفه user-scalable=yes/noچیست؟

امکان zoom کردن روی سایت را به صورت کلی می توان با استفاده از این متغیر به بازدید کننده داد (yes) و یا کلا زووم را غیر فعال نمود (no)

وظیفه maximum-scale در طراحی سایت ریسپانسیو :

میزان حداکثر زومی که کاربر می تواند روی سایت داشته باشد.

استفاده از مدیا کوئری در طراحی سایت ریسپانسیو:

در قطعه کد بالا از خاصیت [email protected] برای دریافت عرض نمایشگر استفاده شده است ، همانطور که می بینید این کد در بخش استایل در هدر سایت نوشته شده است.

در حقیقت دو امکان برای تعیین خصوصیت های نمایش سایت وجود دارد.

مثال بالا ساده ترین مثال برای ساخت صفحه وب با استفاده از تکنولوژی ریسپانسیو است.

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

به یک سایت ریسپانسیو احتیاج دارید؟ کارشناس وب داران برای مشاوره منتظر تماس شماست.

ریسپانسیو کردن سایت وردپرسی با استفاده از افزونه WPtouch

WPtouch یک افزونه وردپرسی موبایلی است، که به صورت خودکار یک قالب موبایلی برای حالت ریسپانسیو را به وب سایت شما اضافه می کند.

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

آموزش نصب و راه اندازی افزونه WPtouch

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

بدون نیاز به هیچ تنظیمی ، به صورت پیش فرض ، افزونه به خوبی کار می کند.

چگونه بفهمیم یک سایت، ریسپانسیو طراحی شده است؟

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

می بینید که سایز صفحه تغییر می کند اما نوشته ها و لینک ها همچنان خوانا هستند و نیازی به zoom in و یا zoom out و اسکرول ندارند، این کار را هم در صفحه اصلی و هم در صفحات داخلی تست کنید.

پرسش و پاسخ های متداول

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

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

مزیت های یک سایت واکنش گرا چیست؟

شماره 1 انعطاف پذیری زمانی که از یک وب سایت واکنشگرا یا ریسپانسیو استفاده می کنید، به راحتی انعطاف پذیری سایت را برای دسکتاپ ها و موبایل ها مشاهده می کنیم. یعنی وب سایت به راحتی با تمام وسیله ها در دسترس و قابل استفاده است و این اتفاق به سرعت رخ می دهد. شماره 2 رابط کاربری فوق العاده طبق تحقیقاتی که از چندین میلیون وب سایت انجام شده است. وب سایت های واکنشگرا به دلیل سازگار بودن استفاده در انواع دستگاه ها حس بهتری را به کاربر منتقل کرده و استفاده از آن ها برای کاربران آسانتر است و در نتیجه تعداد کاربران این وب سایت ها به مراتب بیشتر از وب سایت های معمولیست. شماره 3 کاهش هزینه ها قطعا طراحی سایت ریسپانسیو هزینه های شما را کاهش خوهد داد اما چگونه؟ با طراحی وب سایت واکنشگرا دیگر احتیاجی به طراحی دو وب سایت جداگانه که هم برای موبایل و هم برای دسکتاپ ها قابل استفاده باشد ندارید. به وسیله یک وب سایت ریسپانسیو نیاز شما به طراحی اپلیکیشن نیز برطرف می شود زیرا سایت شما در گوشی های موبایل به راحتی قابل استفاده است. شماره 4 بهتر شدن نتیجه سئو با توجه به استانداردهای موتور های جستجو از جمله Google یک وب سایت خوب وب سایتی است که واکنشگرا باشد. گوگل اهمیت بسیار زیادی به وب سایت هایی که برای استفاده در موبایل طراحی شده باشند، می دهد. Mobile First Indexing گوگل می تواند نشان دهنده این باشد که واکنشگرا بودن یک وب سایت تا چه حد اهمیت دارد. mobile first indexing یعنی : ابتدا در گوگل وب سایت هایی ایندکس شوند که مشکلی در نمایش دستگاه های موبایل نداشته باشند. شماره 5 افزایش کابران موبایل یکی از مهمترین تاثیرات یک سایت ریسپانسیو افزایش روز افزون کاربران موبایل نسبت به دسکتاپ هاست. این افزایش یاعث شده است که استفاده از وب سایت های ریسپانسیو یک مزیت مهم به شمار بیاید، و سایت هایی که این قابلیت را نداشته باشند، حجم بسیار بزرگی از کاربران را از دست می دهند.

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

بسته به حجم و نوع تکنولوژی وب سایت از 2 هفته تا 2 ماه زمان لازم است.

چرا وب داران را انتخاب کنیم؟

تمامی وب سایت های طراحی شده توسط وب داران دارای خاصیت واکنشگرایی بوده و نیازی به هزینه جداگانه برای رسپانسیو کردن وب سایت نمی باشد.