ویب سائٹ کو موبائل ریسپانسیو کیسے بنائیں

ویب سائٹ کو موبائل ریسپانسیو بنانے کے لیے viewport میٹا ٹیگ شامل کریں، لے آؤٹ کو موبائل اول انداز میں لچکدار چوڑائیوں کے ساتھ بنائیں، اور بڑی اسکرینوں پر CSS بریک پوائنٹس سے اسے دوبارہ ترتیب دیں — کالم ایک دوسرے کے نیچے لگائیں، مینو سمیٹیں، اور تصاویر کو فٹ کریں۔ پھر ہر صفحے کو فون کی چوڑائی پر دیکھیں کہ کہیں اطراف میں اسکرول تو نہیں ہو رہا، متن بہت چھوٹا تو نہیں، یا بٹن اتنے چھوٹے تو نہیں کہ ٹیپ نہ ہو سکیں۔ AI سے بنی سائٹ پر ایک واضح پرامپٹ اور فون سائز کے پریویو میں ایک جائزہ عموماً زیادہ تر مسائل ٹھیک کر دیتا ہے۔

ریسپانسیو ڈیزائن دراصل کیا ہے

ایک ریسپانسیو سائٹ صفحات اور URLs کا ایک ہی سیٹ استعمال کرتی ہے جو اسکرین کے مطابق ڈھل جاتے ہیں۔ “m.” والی الگ سائٹ کے بجائے CSS کچھ خاص چوڑائیوں پر لے آؤٹ بدلتا ہے، جنہیں بریک پوائنٹس کہتے ہیں۔ اس کے بنیادی اجزاء:

• viewport میٹا ٹیگ موبائل براؤزر کو بتاتا ہے کہ آلے کی اصل چوڑائی استعمال کرے۔
• لچکدار لے آؤٹ فیصد، flexbox اور grid استعمال کرتے ہیں، فکسڈ پکسل چوڑائیوں کے بجائے۔
• Media queries (یا Tailwind کی md: جیسی کلاسز) ایک دی گئی چوڑائی سے اوپر لے آؤٹ بدلتی ہیں۔
• لچکدار میڈیا — تصاویر اور ویڈیوز جو اپنے کنٹینر میں فٹ ہونے کے لیے سکڑ جائیں۔

یہ اس لیے اہم ہے کہ آپ کا زیادہ تر ٹریفک فون سے آ سکتا ہے، اور گوگل صفحات کا موبائل ورژن انڈیکس کرتا ہے۔ اگر مواد یا لنکس صرف ڈیسک ٹاپ پر ہوں تو گوگل انہیں بھی شاید نہ دیکھے۔

اختیارات اور ان کے تبادلے

موبائل اول عموماً سادہ ہوتا ہے: ایک کالم سب سے آسان لے آؤٹ ہے، اور جیسے جیسے جگہ بڑھے کالم شامل کرنا، ہٹانے سے کم کام ہے۔

وہ حصے جو عام طور پر ٹوٹتے ہیں

viewport ٹیگ

اگر صفحہ فون پر ایک چھوٹی ڈیسک ٹاپ سائٹ کی طرح دکھے تو viewport ٹیگ غائب ہے:

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

maximum-scale=1 یا user-scalable=no شامل نہ کریں۔ پنچ زوم بلاک کرنا کم بینائی والے لوگوں کے لیے سائٹ استعمال کرنا مشکل بنا دیتا ہے۔

فکسڈ چوڑائیاں اور اطراف میں اسکرول

سب سے عام ریسپانسیو بگ وہ چیز ہے جو اسکرین سے چوڑی ہو: width: 1200px والا فکسڈ کنٹینر، چوڑی ٹیبل، لمبا URL یا کوڈ بلاک، یا max-width: 100% کے بغیر تصویر۔ پھر پورا صفحہ اطراف میں اسکرول ہوتا ہے۔ width کی جگہ max-width استعمال کریں، متن کو لپیٹنے دیں، اور بڑی چیزوں کو اپنا الگ اسکرول ایریا دیں۔

نیویگیشن

ڈیسک ٹاپ کے پانچ مینو لنکس شاذ و نادر ہی فون پر فٹ ہوتے ہیں۔ عام حل ایک مینو بٹن ہے جو پینل کھولے۔ دو یا تین سب سے اہم اقدامات — “بک کریں”، “کارٹ”، “سائن ان” — نظر آتے رہیں، اور یقینی بنائیں کہ مینو کی بورڈ سے بھی کام کرے اور آسانی سے بند ہو جائے۔

متن اور ٹیپ ہدف

• فون پر تقریباً 16 px کا متن ایک معقول کم سے کم حد ہے۔ چھوٹے متن والے ان پٹس پر iPhone ٹیپ کرنے پر زوم ہو جاتا ہے۔
• بٹنز اور لنکس کو آسانی سے ٹیپ کے قابل بنائیں۔ WCAG 2.2 AA کم از کم 24 بائی 24 CSS پکسلز (یا کافی فاصلہ) رکھتا ہے؛ انگوٹھوں کے لیے تقریباً 44 پکسلز زیادہ آرام دہ ہیں۔
• قریبی لنکس کے درمیان جگہ چھوڑیں تاکہ لوگ غلط لنک پر نہ جائیں۔

ٹیبلز اور ڈیٹا

چوڑی ٹیبلز ریسپانسیو ایپ کا سب سے مشکل حصہ ہیں۔ ترجیحی ترتیب میں اختیارات: فون پر کم کالم دکھائیں، ہر قطار کو کارڈ بنائیں، یا ٹیبل کو افقی طور پر اسکرول ہونے والے کنٹینر میں رکھیں جس کا پہلا کالم جما ہوا ہو۔ جو لوگوں کو موازنہ کرنا ہو اس کی بنیاد پر چنیں۔

تصاویر اور میڈیا

max-width: 100% اور height: auto استعمال کریں، srcset کے ساتھ چھوٹی اسکرینوں کو چھوٹی فائلیں دیں، اور لے آؤٹ جھٹکوں سے بچنے کے لیے width اور height مقرر کریں۔ ایمبیڈ کی گئی ویڈیوز اور نقشوں کو ریسپانسیو ریپر چاہیے تاکہ ان کا تناسب برقرار رہے۔ چھوٹی تصاویر صفحات کو تیز بھی کرتی ہیں — دیکھیں اپنی ویب سائٹ کو تیز کیسے بنائیں۔

فارمز

لیبلز کو فیلڈز کے اوپر رکھیں، فیلڈز کو پوری چوڑائی دیں، اور درست ان پٹ ٹائپس استعمال کریں (type="email"، type="tel"، inputmode="numeric") تاکہ فون متعلقہ کی بورڈ دکھائے۔ سبمٹ بٹن ایسی جگہ رکھیں جہاں انگوٹھا پہنچ سکے، اور کی بورڈ کھلنے پر بھی وہ نظر آتا رہے۔

صرف ہوور پر چلنے والے تعاملات

فون پر ہوور نہیں ہوتا۔ ٹول ٹپس، ڈراپ ڈاؤنز اور پیش نظارے جو صرف ہوور پر ظاہر ہوں، ٹچ استعمال کرنے والوں کو نظر نہیں آتے۔ انہیں ٹیپ پر بھی کام کرنے دیں۔

کام کرنے والے پرامپٹس

نئی بلڈ کے لیے شروع میں ہی کہیں:

اسے موبائل اول انداز میں بنائیں۔ فونز پر ایک کالم، ٹیبلٹ چوڑائی سے دو کالم، اور ڈیسک ٹاپ پر مکمل لے آؤٹ۔ 320 px چوڑائی پر افقی اسکرولنگ نہ ہو، متن کم از کم 16 px ہو، ٹیپ ہدف کم از کم 44 px ہوں، چھوٹی اسکرینوں پر مینو بٹن ہو، اور فونز پر ٹیبلز کارڈز میں بدل جائیں۔

موجودہ صفحے کے لیے، جو آپ دیکھ رہے ہیں وہ بیان کریں:

فونز پر /pricing صفحہ اطراف میں اسکرول ہوتا ہے اور تین پلان کارڈز ایک ساتھ سکڑ کر رکھے ہیں۔ 768 px سے نیچے کارڈز کو عمودی طور پر لگائیں، موازنے کی ٹیبل کو اپنے کنٹینر کے اندر افقی اسکرول کرنے دیں جس کا فیچر کالم جما ہوا ہو، اور ڈیسک ٹاپ لے آؤٹ نہ بدلیں۔

ہر صفحے کو 375 px چوڑائی پر دیکھیں۔ وہ ہر چیز لکھیں جو باہر نکلتی ہو، ایک دوسرے پر چڑھتی ہو، 16 px سے چھوٹا متن ہو، 44 px سے چھوٹے ٹیپ ہدف ہوں، یا صرف ہوور پر کام کرتی ہو، پھر ہر ایک ٹھیک کریں۔

قدم بہ قدم

1. viewport ٹیگ کی تصدیق کریں کہ وہ صفحے کے head میں ہے۔
2. 320–375 px چوڑائی پر جانچیں براؤزر کے ڈیوائس موڈ یا فون سائز کے پریویو میں۔ ہر صفحہ اوپر سے نیچے تک اسکرول کریں۔
3. پہلے افقی اسکرول ٹھیک کریں۔ وہ عنصر ڈھونڈیں جو بہت چوڑا ہے؛ جب تک وہ ختم نہ ہو، باقی چیزوں کا اندازہ لگانا مشکل ہے۔
4. نیویگیشن درست کریں: مینو بٹن، اور اہم اقدامات نظر آتے ہوئے۔
5. متن، ٹیپ ہدف اور فارمز ہر اہم فلو پر جانچیں — سائن اپ، سرچ، چیک آؤٹ، رابطہ۔
6. ٹیبلز اور میڈیا سنبھالیں: کارڈز یا اسکرول کنٹینرز، ریسپانسیو تصاویر اور ایمبیڈز۔
7. درمیانی سائزوں کی جانچ کریں۔ چوڑائی کو فون سے ڈیسک ٹاپ تک آہستہ کھینچیں؛ لے آؤٹ اکثر ٹیبلٹ چوڑائی کے آس پاس ٹوٹتے ہیں۔
8. ایک حقیقی فون پر جانچیں۔ ایمولیٹرز وہ چیزیں نہیں دکھاتے جیسے کی بورڈ کا بٹن کو ڈھانپنا، نوچز، اور موبائل ڈیٹا پر سائٹ کتنی تیزی سے کھلتی ہے۔

عام غلطیاں

• صرف ایک فون سائز پر جانچنا۔ ایک چھوٹا فون، ایک بڑا فون اور ایک ٹیبلٹ جانچیں۔
• موبائل پر مواد چھپا دینا تاکہ وہ فٹ ہو جائے۔ گوگل موبائل ورژن انڈیکس کرتا ہے، اور فون صارفین کو وہی معلومات چاہیے۔
• viewport ٹیگ میں زوم بند کرنا۔
• ڈیسک ٹاپ سائز کی تصاویر فونز پر، جو لوڈ ٹائم اور ڈیٹا دونوں خرچ کرتی ہیں۔
• فکسڈ عناصر کا ڈھیر: ایک چپکا ہوا ہیڈر، کوکی بینر اور چیٹ بلبلہ آدھی فون اسکرین ڈھانپ سکتے ہیں۔
• ایسے پاپ اپس جو بند نہ ہو سکیں چھوٹی اسکرین پر، کیونکہ بند کرنے کا بٹن اسکرین سے باہر ہو۔

موبائل چیک لسٹ

• viewport میٹا ٹیگ موجود؛ زوم بند نہیں
• 320 px پر کسی بھی صفحے پر افقی اسکرولنگ نہیں
• متن تقریباً 16 px؛ ان پٹس زوم نہیں کرتے
• ٹیپ ہدف آرام سے بڑے اور فاصلے پر ہیں
• مینو فونز پر اور کی بورڈ کے ساتھ کام کرتا ہے
• فونز پر ٹیبلز پڑھنے کے قابل ہیں (کارڈز، کم کالم یا اسکرول کنٹینر)
• تصاویر اور ایمبیڈز اسکیل ہوتے ہیں؛ درست سائز کی فائلیں دی جاتی ہیں
• فارمز درست ان پٹ ٹائپس استعمال کرتے ہیں؛ سبمٹ بٹن تک رسائی ہے
• کوئی اہم چیز ہوور پر منحصر نہیں
• کم از کم ایک حقیقی فون پر جانچا گیا

ریسپانسیو لے آؤٹ ایکسیسبیلیٹی کا بھی حصہ ہے: WCAG چاہتا ہے کہ مواد 320 px چوڑائی اور 200% زوم پر کام کرے۔ اگر آپ ایسی ایپ بنا رہے ہیں جسے لوگ روزانہ اپنے فون پر استعمال کریں گے، تو موبائل فرینڈلی ویب ایپ کیسے بنائیں میں انسٹال ہونے والی PWAs سمیت مزید تفصیل ہے۔

Mythex پر ریسپانسیو ڈیزائن

Mythex ریسپانسیو ویب ایپس بناتا ہے، اور Pro پر انہیں Android اور iPhone ایپس کے طور پر لپیٹ سکتا ہے۔ ورک اسپیس میں Preview کے اوپر موبائل آئیکن (Switch to Mobile) پر کلک کریں تاکہ اپنی ایپ فون سائز کے فریم میں دیکھیں، اور فریم کا کنارا کھینچ کر دوسری چوڑائیاں آزمائیں (Preview اور Code)۔ چھوٹی اسکرین کے لے آؤٹ کو ٹھیک کرنے کا مختصر اسٹارٹر پرامپٹ دستاویزات میں موبائل ریسپانسیو پرامپٹس میں ہے۔ فون پر بھی جانچیں — شائع شدہ URL کھولیں، یا پریویو لنک شیئر کر کے اپنے فون پر کھولیں۔

سوالات