سایت ریسپانسیو و روش طراحی آن

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

سایت ریسپانسیو و روش طراحی آن

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

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

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

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

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

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

همچنین گوگل نیز بسیار به سایت ریسپانسیو اهمیت می دهد. و یکی از ویژگی های سئوی خوب و مناسب را ریسپانسیو بودن سایت می داند و به ریسپانسیو بودن سایت امتیاز بالا می دهد.

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

راه تماس با ما

 مزیت های سایت ریسپانسیو

از جمله مزیت های سایت ریسپانسیو می توان به موارد زیر اشاره کرد:

  • نمایش کامل و مناسب سایت در تمامی مرورگرها مانند گوگل کروم، فایرفاکس، اوپرا، سافاری، اکسپلورر، …
  • هزینه کمتر نسبت به طراحی متفاوت برای دستگاه های مختلف
  • راضی بودن بازدیدکنندگان از مشاهده سایت
  • سئو خوب و مناسب از نظر گوگل و دیگر موتورهای جستجو

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

تفاوت های سایت های ریسپانسیو با طراحی سایت موبایل

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

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

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

سومین تفاوت نیز به تجربه کاربری یا همان (UX, user experience) مربوط می شود که یکی از عوامل بسیار تاثیرگذار در سئو است و در رتبه بندی سایت شما در گوگل نیز تاثیر فراوان دارد. سایت ریسپانسیو و یا سایت واکنشگرا تجربه کاربری خوشایندی برای کاربر فراهم می آورد.

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

راه تشخیص سایت ریسپانسیو چیست؟

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

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

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

آموزش سایت ریسپانسیو یا همان سایت واکنشگرا

اولین تگ مورد استفاده در سایت های ریسپانسیو مربوط به تگ Viewport است که عرض صفحه را می توان در آن قرار داد. به این صورت

<meta name=”viewport” content=”width=680″>

در این کد عرض صفحه را 680پیکسل معرفی کرده ایم.

<meta name=”viewport” content=”width=device-width”>

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

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

<meta name=”viewport” content=”width=480, initial-scale=1, maximum-scale=2″>

در این کد اندازه پیش فرض 1 و بیشترین بزرگنمایی 2برابر هست.

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

استفاده از  دستور media برای حداقل و حداکثر بودن عرض صفحه به این صورت است:

@media ( min-width : 1000px ) {

CODE

}

این CODE فقط در صفحه نمایش هایی با حداقل 1000 پیکسل به نمایش در می آید.

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

اخرین عامل تاثیرگذار و پایه در طراحی سایت ریسپانسیو اندازه فونت هست.

استفاده از واحد pt و یا درصد و همینطور em راه حلی مناسب برای طراحی سایت ریسپانسیو هست.

خلاصه مطالب بالا:

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

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

مقالات اخیر:

سئو وردپرس با استفاده از افزونه yoast

۶ نکته درباره سایت های وردپرس

تفاوت UI و UX چیست؟

زبان‌های برنامه نویسی تحت وب و انواع آن

۱۱ سبک قالب ایمیل HTML در سال ۲۰۱۸ (بخش اول)

سئو داخلی سایت چیست؟

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Share this post

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *