خدمات طراحی سایت و دیجیتال مارکتینگ

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

با توجه به الگوریتم جدید گوگل و اهمیت آن برای بهینه سازی سایت جهت استفاده اسمارت فون‌ها(smart phone)، تبلت ها و هر اندازه صفحه نمایش، اهمیت طراحی سایت ریسپانسیو یا واکنشگرا – Responsive اینجا مشخص می‌شود. بنابراین برای گرفتن رتبه بهتر در گوگل بهتر است به طراحی سایت ریسپانسیو اهمیت دهیم. اما طراحی سایت واکنشگرا یا ریسپانسیو چیست و چرا؟

ویژگی‌های یک سایت واکنش‌گرا چیست؟

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

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

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

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

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

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

تفاوت سایت‌های ریسپانسیو و نسخه موبایل سایت چیست؟

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

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

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

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

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

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

مطالعه متن‌های طولانی در موبایل دشوار است

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

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

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

رعایت عرض حداقل و حداکثر

برای آن که بتوانید صفحات سایت خود را در تمام دستگاه‌ها به بهترین شکل ممکن نمایش دهید، باید عرض حداقل و حداکثر برای عنصر body تعیین نمایید. باتوجه به جدول موجود در سایت Screen Sizes حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل باشد. همچنین طبق آخرین آمار استفاده کنندگان لپ تاپ و کامپیوتر، ماکزیموم عرض مناسب برابر ۱۰۰۰ پیکسل است.

رعایت عرض حداقل و حداکثر در طراحی ریسپانسیو

بزرگ‌نمایی در طراحی سایت ریسپانسیو

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

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

توجه به اندازه مجازی در طراحی سایت ریسپانسیو

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

برای این که بتوانید اندازه واقعی و مجازی پیکسل در ابزارهای مختلف را به دست آورید، می‌توانید آن‌ها را در سایت Size Screen مشاهده کنید. به عنوان مثال، در این سایت نشان داده شده که گوشی Galaxy SII 480 پیکسل واقعی و ۳۲۰ پیکسل مجازی دارد. به بیانی دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی باز کنید، این تصویر ۴۸۰ پیکسل از فضا را اشغال می‌کند. بهترین راه برای پایداری طرح این است که از واحدهای فیزیکی مانند cm، point و… در طراحی‌های خود استفاده کنید. علاوه بر مواردی که تا این بخش از مطلب توضیح داده شد، رعایت چند نکته دیگر در طراحی سایت‌های واکنش‌گرا ضروری است:

  • ایجاد جذابیت به وسیله دکمه‌های بزرگ و لینک‌های جذاب
  • تشویق کاربران به عضویت در خبرنامه و تکمیل فرم
  • خوانا بودن نوشته روی دکمه‌های به کار برده شده در سایت

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

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

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

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

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

طراحی واکنشگرا

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

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

اگر زمانی که ۱۰ عکس کوچک به صورت عرضی به خوبی در کنار یکدیگر در صفحه نمایش یک مانیتور نمایش داده می‌شوند، این عکس‌ها زمانی که در یک دستگاه iPad یا iPhone نمایش دهنده شوند شکل بدی به خود می‌گیرند. با استفاده از طراحی سایت ریسپانسیو می‌توانید این موضوع را حل کنید بدین صورت که اگر عرض صفحه نمایش دستگاه به کوچکی iPad باشد فقط ۷ عکس را در کنار هم نمایش دهد و به همین شکل برای iPhone که ۴ عکس در کنار هم نمایش دهنده می‌شوند.

 

فرم تماس اکثر وب‌سایت‌ها همراه با یک یا دو نوار کناری برای اهداف دیگر طراحی می‌شود. این کار برای نمایش در یک کامپیوتر خانگی عالی است ولی در یک گوشی هوشمند، فرم و نوار کناری هر دو برای خواندن بسیار کوچک نمایش داده می‌شوند. با استفاده از طراحی ریسپانسیو فرم می‌تواند طوری باشد که تمام صفحه را شامل شود و نوار کناری هم می‌تواند پنهان شود. در کل هر کاری با طراحی سایت ریسپانسیو امکان پذیر است. از سایت‌های بسیار حرفه ای در این زمینه Smashing Magazine  و john polacek  می‌باشد.

جمع بندی

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

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

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

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

پرسش و پاسخ، نظر

سوال یا نظری دارید؟ بنویسید و ارسال کنید.

طراحی شده توسط تیم توسعه و طراحی آرنیکاوب
×