طراحی ریسپانسیو مناسب برای سئو

طراحی ریسپانسیو مناسب برای سئو؛ شرط لازم!

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

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

اهمیت این موضوع با Mobile-First Indexing بیشتر شده است. گوگل در درجه اول محتوایی را بررسی و ایندکس می‌کند که نسخه موبایل سایت در اختیار Googlebot Smartphone قرار می‌دهد. فرایند انتقال وب به Mobile-First Indexing نیز در اکتبر ۲۰۲۳ کامل شد.

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

نکات مهم در مورد اهمیت ریسپانسیو بودن وب‌سایت در سئو

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

طراحی ریسپانسیو یا Responsive Web Design روشی در طراحی و توسعه وب است که باعث می‌شود صفحه با اندازه و ویژگی‌های فضای نمایش کاربر هماهنگ شود. در این روش معمولاً URL و محتوای اصلی صفحه ثابت می‌مانند، اما نحوه چیدمان ستون‌ها، منوها، تصاویر، فونت‌ها و عناصر تعاملی براساس عرض Viewport تغییر می‌کند.

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

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

در طراحی ریسپانسیو، سه گروه از ابزارها نقش اصلی دارند:

• چیدمان‌های انعطاف‌پذیر مانند CSS Grid و Flexbox
• واحدهای نسبی و توابعی مانند %، rem، fr، minmax() و clamp()
• Media Queryها برای تغییر چیدمان در شرایط مشخص

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

تفاوت Responsive، Mobile-Friendly و Mobile-First چیست؟

این سه اصطلاح به مفاهیم متفاوتی اشاره دارند:

Responsive Design به روشی گفته می‌شود که چیدمان صفحه را با اندازه نمایشگر هماهنگ می‌کند.

Mobile-Friendly وصف سایتی است که در موبایل قابل استفاده باشد. یک سایت ممکن است در موبایل قابل استفاده باشد، اما چیدمان آن به‌صورت کامل و انعطاف‌پذیر با تمام اندازه‌ها هماهنگ نشود.

Mobile-First Design یک رویکرد طراحی است که فرایند طراحی را از کوچک‌ترین نمایشگر آغاز می‌کند و سپس امکانات و چیدمان را برای نمایشگرهای بزرگ‌تر توسعه می‌دهد.

Mobile-First شرط لازم طراحی ریسپانسیو نیست. می‌توان یک سایت ریسپانسیو را با رویکرد Desktop-First نیز ساخت؛ بااین‌حال، شروع از موبایل در بسیاری از پروژه‌ها به اولویت‌بندی بهتر محتوا و کاهش CSS اضافی کمک می‌کند.

تفاوت طراحی ریسپانسیو با Mobile-First Indexing چیست؟

Mobile-First Design به نحوه طراحی سایت مربوط است، اما Mobile-First Indexing به شیوه خزش و ایندکس گوگل اشاره دارد.

در Mobile-First Indexing، گوگل نسخه‌ای را مبنای اصلی قرار می‌دهد که کاربران موبایل مشاهده می‌کنند. بنابراین ممکن است سایتی با رویکرد Desktop-First ساخته شده باشد، اما همچنان در Mobile-First Indexing بررسی شود.

مقایسه طراحی ریسپانسیو با سایر روش‌های نمایش موبایل

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

معیار	طراحی ریسپانسیو	Dynamic Serving	نسخه موبایل جداگانه
URL موبایل و دسکتاپ	یکسان	یکسان	متفاوت
HTML	معمولاً یکسان	متناسب با دستگاه متفاوت	متفاوت
پیچیدگی نگهداری	کمتر	بیشتر	بیشتر
احتمال ناهماهنگی محتوا	کمتر	متوسط	بیشتر
نیاز به تنظیمات اضافی	محدود	تشخیص User-Agent و Vary Header	Canonical، Alternate و Redirect
کاربرد معمول	اغلب پروژه‌های جدید	شرایط فنی خاص	سامانه‌های قدیمی یا پروژه‌های خاص

گوگل طراحی ریسپانسیو را پیشنهاد می‌کند؛ زیرا معمولاً ساده‌ترین روش برای پیاده‌سازی و نگهداری است. این توصیه به معنای دریافت امتیاز رتبه‌بندی ویژه برای Responsive Design نیست. Dynamic Serving و URLهای جداگانه نیز در صورت اجرای درست قابل استفاده‌اند.

طراحی ریسپانسیو چه تأثیری بر سئو دارد؟

طراحی واکنش‌گرا یک فاکتور مستقل و مستقیم برای افزایش رتبه نیست. گوگل به یک صفحه صرفاً به دلیل استفاده از CSS Grid، Media Query یا یک URL مشترک رتبه بالاتری نمی‌دهد.

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

ارتباط طراحی ریسپانسیو با Mobile-First Indexing

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

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

آیا ریسپانسیو بودن مستقیماً رتبه سایت را افزایش می‌دهد؟

خیر. ریسپانسیو بودن یک امتیاز مستقل نیست و اجرای آن رتبه بهتر را تضمین نمی‌کند.

ممکن است یک سایت کاملاً ریسپانسیو باشد، اما محتوای ضعیف، ساختار نامناسب، لینک‌های داخلی ناقص، سرعت پایین یا مشکلات ایندکس داشته باشد. در مقابل، یک سایت مبتنی بر Dynamic Serving نیز می‌تواند در صورت اجرای صحیح عملکرد سئوی مناسبی داشته باشد.

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

آیا کاهش نرخ پرش باعث بهبود رتبه می‌شود؟

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

بهتر است اثر طراحی ریسپانسیو با معیارهای واقعی کسب‌وکار بررسی شود؛ مانند:

• تکمیل فرم
• خرید محصول
• تماس با شرکت
• کلیک روی دکمه‌های اصلی
• مشاهده صفحات بیشتر
• کاهش خطا در فرایند پرداخت

تأثیر طراحی ریسپانسیو بر نرخ تبدیل

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

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

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

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

مزایای طراحی ریسپانسیو

استفاده از یک URL برای هر صفحه

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

مدیریت ساده‌تر محتوا

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

کاهش احتمال ناهماهنگی موبایل و دسکتاپ

هدینگ‌ها، متادیتا، داده‌های ساختاریافته و لینک‌های داخلی معمولاً از یک HTML مشترک استفاده می‌کنند.

کاهش پیچیدگی تنظیمات سئو

در مقایسه با URLهای موبایل جداگانه، نیاز کمتری به Canonical، Alternate و Redirectهای دستگاه‌محور وجود دارد.

یکپارچگی داده‌های تحلیلی

تمام بازدیدها روی یک URL ثبت می‌شوند و تحلیل عملکرد صفحه در ابزارهای آماری ساده‌تر است.

هزینه نگهداری کمتر

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

معایب و محدودیت‌های طراحی ریسپانسیو

ریسپانسیو بودن سرعت را تضمین نمی‌کند

ممکن است ظاهر صفحه در موبایل صحیح باشد، اما تصاویر بزرگ، JavaScript سنگین و فونت‌های متعدد همچنان سرعت را کاهش دهند.

پنهان کردن عناصر به معنی حذف دانلود آن‌ها نیست

اگر یک تصویر، اسلایدر یا ویدئو با CSS مخفی شود، ممکن است مرورگر همچنان فایل آن را دانلود کند. حذف بصری با جلوگیری از بارگذاری یکسان نیست.

چیدمان‌های پیچیده به تست بیشتری نیاز دارند

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

اصلاح سایت‌های قدیمی می‌تواند پرهزینه باشد

اگر قالب با عرض ثابت، جدول‌های قدیمی یا فریم‌ورک منسوخ ساخته شده باشد، اضافه کردن چند Media Query ممکن است کافی نباشد.

یک چیدمان واحد همیشه پاسخ‌گوی تمام نیازها نیست

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

اصول فنی طراحی سایت ریسپانسیو و سئو محور

تنظیم صحیح Meta Viewport

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

از مقادیری مانند user-scalable=no یا محدود کردن maximum-scale برای جلوگیری از بزرگ‌نمایی استفاده نکنید؛ زیرا ممکن است دسترسی کاربران کم‌بینا به محتوا را محدود کند.

استفاده از چیدمان‌های انعطاف‌پذیر

Flexbox برای چیدمان‌های یک‌بعدی و CSS Grid برای ساختارهای دوبعدی مناسب است. برای نمونه، می‌توان کارت‌های یک بخش را با Grid به‌صورت منعطف نمایش داد:

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  );
  gap: 1.5rem;
}

در این نمونه، تعداد ستون‌ها براساس فضای موجود تغییر می‌کند و در عرض‌های کوچک کارت‌ها به یک ستون تبدیل می‌شوند.

استفاده هدفمند از واحدهای نسبی

استفاده از پیکسل ممنوع نیست. px برای Border، آیکون، بعضی کنترل‌ها و مقادیر دقیق کاربرد دارد. بااین‌حال، برای عرض کانتینر، تایپوگرافی و فاصله‌های اصلی، واحدهای انعطاف‌پذیر معمولاً نتیجه بهتری ایجاد می‌کنند.

مثال:

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

تابع clamp() اجازه می‌دهد اندازه متن بین یک حداقل و حداکثر مشخص، متناسب با Viewport تغییر کند.

انتخاب Breakpoint براساس محتوا

Breakpoint نباید فقط براساس نام دستگاه‌هایی مانند iPhone، iPad یا Galaxy تعیین شود؛ زیرا اندازه نمایشگرها دائماً تغییر می‌کند.

صفحه را از عرض کم به زیاد یا برعکس بررسی کنید و زمانی Breakpoint جدید تعریف کنید که:

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

Media Queryها علاوه بر عرض Viewport می‌توانند شرایطی مانند Orientation، Hover، نوع Pointer و ترجیح کاهش حرکت را نیز بررسی کنند.

جلوگیری از اسکرول افقی

اسکرول افقی معمولاً بر اثر یکی از این موارد ایجاد می‌شود:

• عرض ثابت بیشتر از Viewport
• تصویر یا ویدئوی بدون محدودیت عرض
• جدول عریض
• متن یا URL بسیار طولانی
• Margin منفی
• عنصر Absolute خارج از کانتینر
• کدهای pre و code
• iframe با عرض ثابت

برای تصاویر و ویدئوهای معمولی می‌توان از این قاعده استفاده کرد:

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

استفاده عمومی از overflow-x: hidden برای پنهان کردن مشکل توصیه نمی‌شود؛ زیرا فقط نشانه ظاهری خطا را مخفی می‌کند و ممکن است بخشی از محتوا یا کنترل‌ها از دسترس خارج شوند.

مدیریت محتوای موبایل و دسکتاپ

محتوای اصلی را در موبایل حفظ کنید

نسخه موبایل باید محتوای اصلی و اطلاعاتی را که برای درک موضوع صفحه ضروری‌اند در اختیار کاربران و Googlebot قرار دهد.

برای کوتاه‌تر کردن صفحه موبایل، نباید بخش‌های مهمی مانند موارد زیر حذف شوند:

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

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

عنوان‌ها و متادیتا را هماهنگ نگه دارید

در طراحی ریسپانسیو معمولاً Title، Meta Description و هدینگ‌ها از یک HTML مشترک ارائه می‌شوند. اگر از Dynamic Serving یا نسخه موبایل جداگانه استفاده می‌کنید، عنوان و اطلاعات اصلی باید معادل باشند.

تطابق کلمه‌به‌کلمه همیشه ضروری نیست؛ اما نباید نسخه موبایل هدف، موضوع یا اطلاعات متفاوتی نسبت به دسکتاپ ارائه دهد.

لینک‌های داخلی مهم را حذف نکنید

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

ظاهر منوی موبایل می‌تواند متفاوت باشد، اما صفحات مهم باید همچنان از طریق مسیرهای منطقی در دسترس باشند؛ از جمله:

• صفحات خدمات
• دسته‌بندی‌های اصلی
• محصولات مهم
• مقالات راهنما
• صفحه تماس
• قوانین و اطلاعات سازمانی

داده‌های ساختاریافته را حفظ کنید

اگر سایت از داده‌های ساختاریافته مانند Product، Article، Breadcrumb یا Organization استفاده می‌کند، اطلاعات ضروری آن‌ها باید در نسخه موبایل نیز موجود باشند.

در طراحی ریسپانسیو معمولاً این موضوع به‌صورت طبیعی حل می‌شود؛ زیرا HTML مشترک است. در روش‌های دیگر باید هماهنگی Markupها جداگانه بررسی شود.

استفاده از تب و آکاردئون

قرار دادن محتوای طولانی در تب یا آکاردئون برای صفحه موبایل اشکالی ندارد، به شرطی که:

• محتوا در HTML یا DOM صفحه وجود داشته باشد.
• کاربر بتواند به‌آسانی آن را باز کند.
• محتوای اصلی صرفاً برای دست‌کاری موتور جستجو پنهان نشده باشد.
• بارگذاری محتوا به تعامل پیچیده یا رفتار غیرقابل‌پیش‌بینی وابسته نباشد.

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

بهینه‌سازی تصاویر و رسانه‌های ریسپانسیو

تفاوت تصویر کوچک‌شده با تصویر ریسپانسیو

اگر یک تصویر ۲۵۰۰ پیکسلی با CSS در عرض ۳۲۰ پیکسل نمایش داده شود، ظاهر آن ریسپانسیو است؛ اما مرورگر ممکن است همچنان فایل بزرگ را دانلود کند.

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

استفاده از srcset و sizes

ویژگی srcset نسخه‌های مختلف تصویر را معرفی می‌کند و sizes اندازه تقریبی نمایش تصویر در چیدمان را مشخص می‌سازد:

<img
  src="responsive-design-800.webp"
  srcset="
    responsive-design-480.webp 480w,
    responsive-design-800.webp 800w,
    responsive-design-1200.webp 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1000px) 50vw,
    800px
  "
  width="1200"
  height="800"
  alt="مقایسه نمایش یک سایت ریسپانسیو در موبایل و دسکتاپ"
>

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

چه زمانی از <picture> استفاده کنیم؟

برای بیشتر تصاویر، srcset و sizes کافی‌اند. عنصر <picture> زمانی مناسب است که نیاز به کنترل دقیق‌تری داشته باشید؛ برای مثال:

• تغییر کادر تصویر در موبایل
• نمایش تصویر عمودی به‌جای افقی
• ارائه فرمت AVIF یا WebP همراه با نسخه جایگزین
• استفاده از تصویر متفاوت در یک Breakpoint

نمونه:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="responsive-design-mobile.webp"
  >
  <source
    type="image/avif"
    srcset="responsive-design-desktop.avif"
  >
  <img
    src="responsive-design-desktop.webp"
    width="1200"
    height="700"
    alt="نمونه طراحی ریسپانسیو سایت"
  >
</picture>

عنصر <picture> به‌خصوص برای Art Direction کاربرد دارد؛ یعنی جایی که فقط اندازه فایل تغییر نمی‌کند و ترکیب‌بندی تصویر نیز متفاوت است.

تعیین عرض و ارتفاع تصاویر

ویژگی‌های width و height به مرورگر کمک می‌کنند نسبت تصویر را پیش از دانلود فایل تشخیص دهد و فضای لازم را رزرو کند. این کار احتمال جابه‌جایی ناگهانی عناصر و افزایش CLS را کاهش می‌دهد.

در طراحی ریسپانسیو، تعیین عرض و ارتفاع HTML مانع تغییر اندازه تصویر با CSS نمی‌شود:

img {
  max-width: 100%;
  height: auto;
}

Lazy Loading تصاویر

برای تصاویر پایین صفحه می‌توان از بارگذاری تنبل استفاده کرد:

<img
  src="example.webp"
  loading="lazy"
  width="800"
  height="500"
  alt="نمونه چیدمان واکنش‌گرا"
>

اما تصویر اصلی ابتدای صفحه که احتمالاً عنصر LCP است، نباید به‌صورت پیش‌فرض Lazy Load شود؛ زیرا این کار ممکن است نمایش محتوای اصلی را به تأخیر بیندازد.

ریسپانسیو کردن ویدئو و iframe

برای حفظ نسبت تصویر ویدئوها می‌توان از aspect-ratio استفاده کرد:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

این روش برای ویدئوهای YouTube، نقشه‌ها و ابزارهای تعبیه‌شده کاربرد دارد.

نمایش جدول‌ها در موبایل

برای جدول‌های کوتاه، قرار دادن جدول در یک کانتینر قابل اسکرول می‌تواند راهکار مناسبی باشد:

.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

برای جدول‌های بزرگ‌تر، راهکارهای زیر را نیز بررسی کنید:

• اولویت‌بندی ستون‌ها
• تبدیل ردیف‌ها به کارت در موبایل
• ثابت نگه داشتن ستون اصلی
• ارائه خلاصه بالای جدول
• امکان فیلتر یا انتخاب ستون‌ها

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

ارتباط طراحی ریسپانسیو با Core Web Vitals

Core Web Vitals سه معیار برای اندازه‌گیری عملکرد بارگذاری، پاسخ‌گویی و پایداری بصری صفحه هستند:

معیار	موضوع اندازه‌گیری	محدوده مطلوب
LCP	نمایش محتوای اصلی	حداکثر ۲٫۵ ثانیه
INP	پاسخ‌گویی به تعامل	حداکثر ۲۰۰ میلی‌ثانیه
CLS	پایداری بصری	حداکثر ۰٫۱

برای قرار گرفتن در وضعیت مطلوب، حداقل ۷۵ درصد بازدیدهای صفحه باید در محدوده خوب هر معیار قرار بگیرند.

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

بهبود LCP در موبایل

LCP معمولاً یکی از عناصر اصلی بالای صفحه است؛ مانند:

• تصویر Hero
• تصویر محصول
• عنوان بزرگ
• بنر اصلی
• بلوک متنی بزرگ

برای بهبود آن:

• تصویر LCP را در اندازه مناسب ارائه کنید.
• تصویر اصلی را بی‌دلیل Lazy Load نکنید.
• CSS ضروری را سریع‌تر در اختیار مرورگر قرار دهید.
• پاسخ سرور و TTFB را بررسی کنید.
• فونت‌های ضروری را محدود و بهینه کنید.
• منابع مسدودکننده رندر را کاهش دهید.
• از بارگذاری اسلایدر سنگین در ابتدای صفحه پرهیز کنید.

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

بهبود INP

INP سرعت واکنش صفحه به کلیک، لمس یا ورودی صفحه‌کلید را اندازه‌گیری می‌کند. عوامل رایج ضعف INP عبارت‌اند از:

• JavaScript سنگین
• Long Taskها
• Event Handlerهای پیچیده
• اسکریپت‌های شخص ثالث
• DOM بسیار بزرگ
• رندر مجدد گسترده
• فیلترها و منوهای سنگین

بزرگ بودن دکمه‌ها تعامل را آسان‌تر می‌کند، اما زمان پاسخ مرورگر را به‌تنهایی کاهش نمی‌دهد. برای بهبود INP باید عملکرد JavaScript و Main Thread نیز بررسی شود.

کاهش CLS

CLS زمانی افزایش می‌یابد که عناصر صفحه بدون انتظار کاربر جابه‌جا شوند. دلایل رایج:

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

برای کاهش CLS، فضای تصاویر، ویدئوها، تبلیغات و ابزارهای تعاملی را از قبل مشخص کنید.

تفاوت داده‌های آزمایشگاهی و واقعی

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

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

اصول تجربه کاربری و دسترس‌پذیری در موبایل

اندازه و خوانایی متن

۱۶ پیکسل معمولاً نقطه شروع مناسبی برای متن اصلی است، اما قانون ثابت و مناسبی برای همه فونت‌ها نیست. خوانایی به عوامل زیر بستگی دارد:

• نوع و وزن فونت
• ارتفاع حروف
• فاصله خطوط
• طول هر خط
• کنتراست
• فاصله پاراگراف‌ها
• امکان بزرگ‌نمایی

متن اصلی نباید برای خواندن به Zoom اجباری نیاز داشته باشد.

اندازه دکمه‌ها و لینک‌ها

براساس WCAG 2.2 سطح AA، هدف‌های Pointer در حالت معمول باید حداقل فضای ۲۴ در ۲۴ پیکسل CSS داشته باشند؛ هرچند استثناهایی نیز وجود دارد. معیار پیشرفته‌تر سطح AAA اندازه ۴۴ در ۴۴ پیکسل را مطرح می‌کند.

برای دکمه‌های اصلی موبایل، استفاده از ابعاد حدود ۴۴ تا ۴۸ پیکسل معمولاً احتمال لمس اشتباه را کاهش می‌دهد. علاوه بر اندازه خود دکمه، فاصله آن با کنترل‌های مجاور نیز مهم است.

طراحی منوی موبایل

منوی موبایل باید:

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

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

بهینه‌سازی فرم‌ها

برای فرم‌های موبایل:

• فقط اطلاعات ضروری را درخواست کنید.
• Label هر فیلد را حفظ کنید.
• از نوع Input مناسب مانند email، tel و number استفاده کنید.
• پیام خطا را کنار همان فیلد نمایش دهید.
• امکان Autofill را فراهم کنید.
• دکمه ارسال را به‌اندازه کافی بزرگ طراحی کنید.
• داده واردشده را پس از خطا حذف نکنید.
• فرم‌های طولانی را در صورت نیاز مرحله‌بندی کنید.

جلوگیری از پاپ‌آپ‌های مزاحم

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

فضای اشغال‌شده توسط عناصر ثابت را بررسی کنید و مطمئن شوید:

• محتوای اصلی قابل مشاهده است.
• دکمه بستن مشخص است.
• چند عنصر Sticky هم‌زمان نمایش داده نمی‌شوند.
• کاربر به کلیک اجباری برای مشاهده محتوا نیاز ندارد.

حفظ بزرگ‌نمایی

کاربر باید بتواند در صورت نیاز با Pinch-to-Zoom متن یا تصویر را بزرگ کند. غیرفعال کردن این قابلیت ممکن است دسترسی کاربران کم‌بینا را محدود کند.

احترام به ترجیح کاهش حرکت

برای کاربرانی که حرکت زیاد برایشان آزاردهنده است، از Media Query زیر استفاده کنید:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

اشتباهات رایج طراحی ریسپانسیو

کوچک کردن نسخه دسکتاپ به‌جای طراحی موبایل

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

حذف محتوای اصلی در موبایل

محتوای ضروری نباید فقط برای کوتاه‌تر شدن صفحه حذف شود. می‌توان آن را با تب، آکاردئون و ساختار بهتر سازماندهی کرد.

استفاده از عرض ثابت

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

بارگذاری تصاویر بزرگ دسکتاپ

نمایش ظاهری کوچک‌تر، حجم فایل را کاهش نمی‌دهد. برای کاربران موبایل نسخه‌های مناسب تصویر ارائه کنید.

حذف لینک‌های مهم از منوی موبایل

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

استفاده بیش از حد از اسلایدر و انیمیشن

اسلایدرها ممکن است JavaScript، تصاویر و DOM اضافی ایجاد کنند. هر اسلایدر باید هدف مشخصی داشته باشد و محتوای مهم نباید فقط در اسلایدهای بعدی قرار بگیرد.

پنهان کردن خطا با overflow-x: hidden

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

استفاده از Hover به‌عنوان تنها روش تعامل

موبایل Hover واقعی ندارد. اطلاعات یا کنترل‌های ضروری نباید فقط با قرار گرفتن نشانگر ماوس ظاهر شوند.

بارگذاری منابع مخفی

یک عنصر display: none ممکن است همچنان تصویر، فونت یا اسکریپت خود را دانلود کند. شبکه و Performance مرورگر را برای اطمینان بررسی کنید.

آزمایش فقط صفحه اصلی

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

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

Chrome DevTools

Device Mode در Chrome DevTools امکان تغییر Viewport و شبیه‌سازی بعضی دستگاه‌ها را فراهم می‌کند.

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

موارد زیر را بررسی کنید:

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

آزمایش روی دستگاه واقعی

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

حداقل سایت را روی این شرایط آزمایش کنید:

• یک گوشی Android
• یک iPhone
• یک تبلت یا Viewport متوسط
• یک لپ‌تاپ
• یک نمایشگر عریض
• Safari و Chrome
• اینترنت ضعیف‌تر از شبکه دفتر

Lighthouse و PageSpeed Insights

Lighthouse ابزاری خودکار برای بررسی Performance، Accessibility، Best Practices و SEO است. گزارش آن برای یافتن مشکلات فنی مفید است، اما امتیاز آن نباید به‌تنهایی معیار موفقیت صفحه باشد.

PageSpeed Insights علاوه بر داده‌های آزمایشگاهی، در صورت وجود داده کافی، اطلاعات واقعی کاربران را نیز نمایش می‌دهد.

URL Inspection در سرچ کنسول

URL Inspection برای بررسی موارد زیر مفید است:

• وضعیت ایندکس صفحه
• HTML مشاهده‌شده توسط گوگل
• منابع بارگذاری‌شده
• خطاهای خزش
• Canonical انتخاب‌شده
• امکان درخواست ایندکس

این ابزار گواهی Mobile-Friendly صادر نمی‌کند و جایگزین تست تجربه کاربری روی دستگاه واقعی نیست.

ابزار منقضی‌شده Mobile-Friendly Test

Google Mobile-Friendly Test و گزارش Mobile Usability سرچ کنسول در تاریخ ۱ دسامبر ۲۰۲۳ بازنشسته شدند. بنابراین نباید در راهنماهای جدید به‌عنوان ابزار فعال پیشنهاد شوند.

تمام قالب‌های سایت را آزمایش کنید

حداقل یک URL از هر قالب بررسی شود:

• صفحه اصلی
• مقاله
• دسته‌بندی
• خدمات
• محصول
• آرشیو
• نتایج جستجو
• صفحه تماس
• فرم ثبت‌نام
• سبد خرید
• پرداخت
• صفحه 404

مشکلات قالبی معمولاً روی تعداد زیادی URL تکرار می‌شوند؛ بنابراین اصلاح Template می‌تواند تأثیر بیشتری از اصلاح یک صفحه منفرد داشته باشد.

آیا سایت غیرریسپانسیو به بازطراحی کامل نیاز دارد؟

مشکلاتی که با اصلاح محدود برطرف می‌شوند

در بعضی سایت‌ها مشکلات با تغییرات محدود قابل رفع‌اند:

• افزودن Meta Viewport
• اصلاح عرض کانتینر
• ریسپانسیو کردن تصاویر
• بازطراحی منوی موبایل
• افزایش فاصله دکمه‌ها
• اصلاح جدول‌ها
• اضافه کردن Media Query
• کاهش فونت‌ها و اسکریپت‌های غیرضروری

چه زمانی اصلاح قالب کافی نیست؟

بازطراحی کامل زمانی منطقی‌تر است که:

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

کدام صفحات باید زودتر اصلاح شوند؟

اولویت را براساس داده تعیین کنید:

1. صفحات درآمدزا و نزدیک به تبدیل
2. صفحات دارای بیشترین ورودی موبایل
3. قالب‌هایی که تعداد زیادی URL تولید می‌کنند
4. صفحات دارای Core Web Vitals ضعیف
5. صفحات دارای خطا در فرم یا پرداخت
6. صفحاتی که اسکرول افقی یا محتوای بریده‌شده دارند

چگونه بدون آسیب به سئو بازطراحی کنیم؟

در بازطراحی ریسپانسیو این موارد را حفظ یا کنترل کنید:

• URLها
• Canonicalها
• Title و Meta Description
• H1 و ساختار هدینگ‌ها
• محتوای اصلی
• لینک‌های داخلی
• داده‌های ساختاریافته
• Alt تصاویر
• وضعیت Index و Noindex
• Redirectهای ضروری
• کدهای رهگیری
• فرم‌ها و Conversionها

قبل و بعد از انتشار، نمونه‌ای از صفحات مهم را Crawl و مقایسه کنید.

چک‌لیست طراحی ریسپانسیو مناسب برای سئو

چیدمان

• Meta Viewport به‌درستی تنظیم شده است.
• صفحه در عرض‌های مختلف اسکرول افقی ندارد.
• چیدمان براساس محتوا تغییر می‌کند.
• از Grid و Flexbox به‌صورت منطقی استفاده شده است.
• عناصر Absolute از صفحه خارج نمی‌شوند.
• حالت افقی موبایل بررسی شده است.

محتوا و سئو

• محتوای اصلی در موبایل و دسکتاپ معادل است.
• H1، هدینگ‌ها و متادیتا هماهنگ‌اند.
• لینک‌های داخلی مهم در موبایل وجود دارند.
• داده‌های ساختاریافته حفظ شده‌اند.
• محتوای تب‌ها و آکاردئون‌ها قابل دسترسی است.
• لینک‌های Canonical و وضعیت ایندکس تغییر نکرده‌اند.

تصاویر و رسانه‌ها

• تصاویر بیشتر از اندازه موردنیاز دانلود نمی‌شوند.
• srcset و sizes در تصاویر مهم استفاده شده‌اند.
• عرض و ارتفاع تصاویر مشخص است.
• تصویر LCP بی‌دلیل Lazy Load نشده است.
• ویدئوها و iframeها از صفحه خارج نمی‌شوند.
• جدول‌ها در موبایل خوانا و قابل استفاده‌اند.

Core Web Vitals

• LCP در داده واقعی بررسی شده است.
• INP و عملکرد JavaScript آزمایش شده‌اند.
• عناصر بدون رزرو فضا باعث CLS نمی‌شوند.
• تفاوت Lab Data و Field Data در نظر گرفته شده است.
• قالب‌های مختلف به‌صورت جداگانه تحلیل شده‌اند.

تجربه کاربری و دسترس‌پذیری

• متن بدون بزرگ‌نمایی اجباری خوانده می‌شود.
• Zoom غیرفعال نشده است.
• دکمه‌ها و لینک‌ها فضای لمس کافی دارند.
• منو با لمس و صفحه‌کلید کار می‌کند.
• فرم‌ها Label و پیام خطای واضح دارند.
• پاپ‌آپ‌ها محتوای اصلی را نمی‌پوشانند.
• ترجیح کاهش حرکت رعایت شده است.

آزمایش پیش از انتشار

• سایت با Chrome DevTools بررسی شده است.
• سایت روی دستگاه واقعی آزمایش شده است.
• صفحات اصلی با Lighthouse ارزیابی شده‌اند.
• URLهای مهم با Search Console بررسی شده‌اند.
• فرم‌ها، تماس، ثبت‌نام و پرداخت تست شده‌اند.
• Analytics و Conversion Tracking فعال هستند.

دیگر وقت توجه به ضرورت‌هاست!

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

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

در یک پروژه حرفه‌ای، تصمیم‌ها باید براساس رفتار واقعی کاربران، نوع محتوا، داده‌های سرچ کنسول، Core Web Vitals و اهداف تجاری گرفته شوند؛ نه فقط براساس ظاهر صفحه در چند مدل موبایل.

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