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

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

در این مقاله تیم وب داران ( طراحی سایت در تهران ) قصد دارد به بررسی اینکه طراحی سایت ریسپانسیو یا واکنشگرا چیست و چه کارایی های دارد بپردازد.

در ادامه با ما همراه باشید.

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

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

طراحی سایت ریسپانسیو (RWD) ، یا واکنشگرا یک فرآیند طراحی وب سایت است که باعث می شود صفحات وب به خوبی بر روی انواع دستگاه ها و صفحات نمایش مشاهده شود.

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

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

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

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

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

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

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

همچنین گوگل از سال 2015 ، طراحی سایت ریسپانسیو (RWD) را یکی از عوامل رتبه بندی اعلام کرد.

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

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

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

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

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

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

1. یک طراحی سایت ریسپانسیو یا واکنشگرا باعث جذب بسیاری از کاربران به سمت خود می شود حال آنکه سایتی که ریسپانسیو نباشد بیشتر کاربرانی را که با موبایل یا تبلت وارد سایت شده اند را به دلیل سختی کار از دست می دهد.
2. سایتی که ریسپانسیو باشد کاربر پسندتر و اصطلاحا user friendly می باشد و این خود یک امتیاز بزرگ در جذب مشتری به حساب می آید.
3. یک طراحی سایت ریسپانسیو یا واکنشگرا از دید گوگل محبوب تر است .
4. واکنشگرا یا ریسپانسیو بودن یک سایت می تواند روی سئو سایت تاثیر داشته باشد.
5. تبدیل یک سایت واکنشگرا یا ریسپانسیو به وب اپلیکیشن بسیار آسان تر است.

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

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

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

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

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

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

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

به عنوان مثال با استفاده از تگ media@ تعیین می کنیم که اگر اندازه عرض رزولوشن دستگاه 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:

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

استفاده از مدیا کوئری:

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

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

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

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

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

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

گوگل پیشنهاد می دهد که وب سایت شما حتما حالت Mobile Friendly یا به عبارتی دیگر ، سازگاری با دستگاه های هوشمند را داشته باشد از جمله موبایل ها ، که این امر باعث می شود سئو (SEO) وب سایت شما صدمه نبیند و حتی افزایش یابد.

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

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

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

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

برای درخشیدن شما ، در کنار شما هستیم

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

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

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

شما می توانید برای اطلاعات بیشتر راجع به هزینه سئو به صفحه ” قیمت سئو سایت ” وب سایت ما مراجعه کنید.

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