طراخی فروشگاه اینترنتی

responsive design یا طراحی ریسپانسیو یعنی چه؟

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

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

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

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

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

برای این که بتوانید یک وبسایت واکنشگرا داشته باشید، باید تغییرات لازم را از همان ابتدا در کدنویسی صفحات سایت اعمال کنید. برای این کار می‌توانید از فریم وورک‌های مخصوص این کار استفاده نمایید. برای مثال Bootstrap و W3.CSS دو فریم وورک مناسب برای طراحی ریسپانسیو یک وبسایت هستند.
 

• به کار بردن متا تگ viewport برای تنظیمات صفحه

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

• تنظیم فونت صفحه

تگ کاربردی width=device-width کمک می‌کند تا صفحه، فونت خود را با ابعاد هر نمایشگری سازگار نماید. صرف نظر از این که کاربر با چه ابزار هوشمندی به محتوای آن صفحه دسترسی پیدا کرده است
 

• از بین بردن تاثیر جهت‌گیری نمایشگر

تنظیمات صفحه و فونت باید به گونه‌ای باشد که با چرخاندن صفحه گوشی، باز هم صفحه نمایش به طور کامل استفاده شود. از این رو، به کار بردن دستور initial-scale=1 برای از بین بردن تاثیر جهت‌گیری نمایشگر گوشی ضروری است. اگر در تگ گزینه‌های width=device-width و initial-scale به کار نروند، باز هم viewport تاثیر خود را خواهد گذاشت. در واقع وجود این تگ کمک می‌کند تا ابزار Lighthouse، هماهنگی صفحات HTML با نوع و ابعاد نمایشگر را به صورت خودکار بررسی نماید.

• تنظیم میدان دید کاربر

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

• چیدمان محتوا در صفحه

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

چرا ریسپانسیو بودن سایت‌ها مهم است؟

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

تاثیر Responsive design بر سئو

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