ویب سائیٹ کو موبائل ڈیوائسز کے قابل بنانے کیلئے مختصر سی ایس ایس کوڈ

CSS3 میں Media queries کی سہولت شامل کی گئی ہے۔ میڈیا کیویریز کے ذریعہ یہ معلوم کیا جا سکتا ہے کہ اس وقت ویب پیج جس ونڈو میں کھلا ہوا ہے اس کی چوڑائی اور لمبائی کتنی ہے، یا اگر صارف یہ ویب پیج کسی سمارٹ فون پر دیکھ رہا ہے تو اس فون کا رخ اونچائی (Portrait) کی طرف ہے یا چوڑائی (Landscape) کی طرف۔ ان کے علاوہ مزید چیزیں بھی ہیں جو میڈیا کیویریز کے ذریعے معلوم کی جا سکتی ہیں اور ان معلومات کی بنیاد پر ویب پیج کے لیے اسٹائلز (CSS) کا انتخاب کیا جا سکتا ہے۔

مثلاً‌ میڈیا کیویریز کے ذریعے ونڈو کی چوڑائی معلوم کر کے یہ دیکھا جا سکتا ہے کہ یہ ویب سائیٹ اس وقت کمپیوٹر اسکرین پر دیکھی جا رہی ہے یا پھر کسی چھوٹی ڈیوائس یعنی سمارٹ فون وغیرہ پر، پھر اس بنیاد پر یہ فیصلہ کیا جا سکتا ہے کہ اس ویب پیج پر کونسے اسٹائلز لگائے جائیں۔ اگر کمپیوٹر اسکرین ہے تو اس پر اتنی جگہ دستیاب ہوتی ہے کہ ہم زیادہ کالمز ساتھ ساتھ دکھا سکتے ہیں، لیکن سمارٹ فون کی اسکرین چھوٹی ہونے کی وجہ سے ہم ایسا نہیں کر سکتے۔

Responsive web design وہ اصطلاح ہے جو ویب سائیٹ کے ایسے ڈیزائن کے لیے استعمال ہوتی ہے جو اپنے آپ کو کسی بھی ڈیوائس (کمپیوٹر، ٹیب، سمارٹ فون وغیرہ) کے مطابق ڈھال لے۔ میڈیا کیویریز کا استعمال کر کے ویب سائیٹ کا ڈیزائن مختلف موبائل ڈیوائسز کے لیے تیار کرنا ایک فن ہے جو آپ بہت سے تجربات کے بعد سیکھتے ہیں۔ ویسے تو اب زیادہ تر ویب سائیٹس ایسی دیکھنے کو ملتی ہیں جو کسی ایپلی کیشن مثلاً‌ Wordpress یا Drupal وغیرہ کی مدد سے بنائی گئی ہوتی ہیں۔ ان CMS ایپلی کیشنز کے لیے تیار کیے گئے زیادہ ترتھیمز اور ٹیمپلیٹس ایسا ڈیزائن سپورٹ کرتے ہیں جو کمپیوٹر، ٹیب اور موبائل فون پر دیکھا جا سکے۔ لیکن اس وقت بھی انٹرنیٹ پر بے شمار ویب سائٹس ایسی موجود ہیں جو ویب پیج فائلز پر مشتمل ہیں۔ ان ویب سائیٹس کا ڈیزائن جب تیار کیا گیا تھا تب ایسی موبائل ڈیوائسز دنیا میں متعارف نہیں ہوئی تھیں جن پر ویب سائیٹس بہتر انداز میں دیکھی جا سکتیں۔ چنانچہ یہاں ایک فوری نوعیت کا حل پیش کیا جا رہا ہے جو ایسی ویب سائیٹس کو سمارٹ فونز اور ٹیبز وغیرہ پر کم از کم پڑھنے کے قابل ضرور بنا دے گا۔

عام طور پر چھوٹی ڈیوائسز ویب سائیٹ کو اسکرین کے اندر فٹ کرنے کی کوشش کرتی ہیں۔ اس طرح وہ ویب سائیٹ جو صرف کمپیوٹر اسکرین کے لیے تیار کی گئی ہے، بہت چھوٹی ہو کر ایک سمارٹ فون کی اسکرین پر نظر آتی ہے۔ ایسی ویب سائیٹ کے صفحات ٹھیک طرح سے پڑھنے کے لیے صارف کو بار بار Zoom in اور Zoom out کرنا پڑتا ہے جو کہ ایک دقت طلب کام ہے۔ چنانچہ CSS کی مدد سے چند کام ایسے کیے جا سکتے ہیں جن سے ویب سائیٹ چھوٹی ڈیوائس پر با آسانی دیکھی جا سکے۔

ہر ویب پیج میں ویوپورٹ کا میٹا ٹیگ شامل کریں

سب سے پہلے تو یہ ضروری ہے کہ ہر ویب پیج کے ہیڈ سیکشن میں ویوپورٹ کا میٹا ٹیگ شامل کیا جائے۔

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

CSS کوڈ کی وضاحت

1. درج ذیل کوڈ میں آپ دیکھ رہے ہیں کہ میڈیا کیویری کے Selector کے اندر تمام اسٹائل رولز لکھے گئے ہیں۔ میڈیا کیویری کی لائن میں یہ کہا جا رہا ہے کہ اگر وہ ونڈو جس میں یہ ویب پیج کھلا ہوا ہے، اس کی چوڑائی 800 پکسلز سے کم ہے تو درج ذیل بتائے گئے اسٹائل رولز استعمال کیے جائیں۔
2. پہلے body ایلیمنٹ کا فونٹ سائز کم کیا گیا ہے اور اس کی پیڈنگ سیٹ کی گئی ہے تاکہ لکھائی اسکرین کی دیوار کے ساتھ جڑی ہوئی نظر نہ آئے۔
3. پھر ویب پیج کے ان ایلیمنٹس کو غائب کیا گیا ہے جو ہم موبائل ڈیوائسز پر نہیں دکھانا چاہتے۔
4. اس کے بعد ایسے ایلیمنٹس کے اسٹائلز کو غیر مؤثر کیا گیا ہے جو ممکنہ طور پر ویب پیج کا ڈیزائن (Layout) بنانے کے لیے استعمال ہو سکتے ہیں۔ ایسا کرنے کے لیے ہم ان ایلیمنٹس کے زیادہ تر اسٹائلز کو ڈیفالٹ سیٹنگز پر لے گئے ہیں۔
5. پھر ہم نے ایسے لنک ایلیمنٹس کے اسٹائلز کو اپنی مرضی کے مطابق ڈھالا ہے جن کے اسٹائلز ممکن ہے مرکزی فہرست (Main navigation) وغیرہ کے لیے سیٹ کیے گئے ہوں۔
6. اس کے بعد تصویر اور ٹیبل کی زیادہ سے زیادہ چوڑائی 90 فیصد مقرر کی گئی ہے تاکہ اگر کسی تصویر یا ٹیبل کا پہلے سے سیٹ کیا گیا سائز ڈیوائس اسکرین کی چوڑائی سے زیادہ ہے تو اس کی بجائے یہ والا سائز سیٹ ہو جائے جو ہم نے مقرر کیا ہے۔
7. آخر میں آپ ٹیبل سیل <td>کے متعلق اسٹائل رولز دیکھ رہے ہیں جنہیں آپ حسب منشا استعمال کر سکتے ہیں۔ اگر کوئی ٹیبل ایسا ہے جس کے خانوں (Cells) کی تعداد بہت زیادہ ہے جس کی وجہ سے یہ ٹیبل ڈیوائس کی چوڑائی میں پورا نہیں آرہا تو آپ اس ٹیبل کے سیلز کو ساتھ ساتھ دکھانے کی بجائے اوپر نیچے دکھا سکتے ہیں۔ لیکن اس کا انحصار اس بات پر ہوگا کہ ان خانوں کی ویلیوز آپس میں کتنی متعلق ہے۔
8. ان اسٹائلز میں آپ important! کا لفظ بار بار دیکھ رہے ہیں۔ اس کے استعمال سے یہ فائدہ ہوتا ہے کہ اگر ویب پیج میں کسی ایلیمنٹ کے اندر کوئی (Inline) اسٹائل رول استعمال کیا گیا ہے تو وہ غیر مؤثر ہو جاتا ہے، اور یہاں بتایا گیا اسٹائل رول اس ایلیمنٹ پر لاگو ہو جاتا ہے۔ اس کے علاوہ important! کی وجہ سے اس ایلیمنٹ پر لگایا گیا وہ اسٹائل رول بھی غیر مؤثر ہو جاتا ہے جو کسی دوسری جگہ پر اس اسٹائل رول کو Override کر رہا ہے۔

@media only screen and (max-width: 799px) {
 
    body {
        padding:8px !important;
        background:white !important;
        font-size:85% !important;
    }
 
    #element1, #element2, #element3 {
        display:none;
    }
 
    hgroup, section, aside, div, nav, ul, li, header, footer, p {
        position:static !important;
        float:none !important;
        width:auto !important;
        padding:0 !important;
        margin:0 auto 8px auto !important;
        background:white !important;
        color:black !important;
    }
 
    ul, ol {
        width:95% !important;
    }
 
    li a {
        color:blue !important;
        background:white !important;
        float:none !important;
    } 
 
    img {
        max-width:90% !important;
        width:auto;
        height:auto;
        float:none !important;
    }
 
    table {
        max-width:90% !important;
    }
 
    /* Use this if needed
    #my-wide-table th, #my-wide-table td {
        width:auto !important;
        display:block !important;
    }
    */
 
}

ٹیبل کی مدد سے تیار کیا گیا ڈیزائن

اگر آپ کی ویب سائیٹ کا ڈیزائن ٹیبل کی مدد سے تیار کیا گیا ہے تو اس کے لیے آپ تجربےکے طور پر یہ کر سکتے ہیں کہ ٹیبل کے کالمز کو ساتھ ساتھ دکھانے کی بجائے اوپر نیچے دکھا دیں۔ درج ذیل کوڈ میں سب سے اہم اسٹائل رول display:block ہے جو ٹیبل کے سیل کو ایک بلاک ایلیمنٹ میں تبدیل کر دیتا ہے۔

    #layout-table td, 
    #layout-table-right-col, 
    #layout-table-middle-col, 
    #layout-table-left-col {
        width:auto !important;
        display:block !important;
        background:white !important;
        color:black !important;
        padding:0 !important;
        margin:0 auto 12px auto !important;
    }

پیڈنگ کا مسئلہ

عموماً‌ جب آپ مختلف ڈیوائسز کے لیے کوئی لے آؤٹ تیار کرتے ہیں ہیں تو مختلف ایلی منٹس پر لگائی گئی padding کی پراپرٹی بہت تنگ کرتی ہے، اس لیے کہ یہ ایلی منٹ کا سائز بڑھا دیتی ہے۔ مثلاً‌ اگر آپ نے کسی div ٹیگ کی چوڑائی 300px اور اس کی پیڈنگ 20px رکھی ہے تو اب اس ٹیگ کی اصل چوڑائی 340px ہوجائے گی۔ اور صورت حال اس وقت مزید پیچیدہ ہو جاتی ہے جب چوڑائی کسی اور اسٹائل رول میں مقرر کی گئی ہو اور پیڈنگ کسی اور اسٹائل رول میں مقرر کی گئی ہو۔ چنانچہ اس صورت حال سے بچنے کے لیے box-sizing پراپرٹی استعمال کی جا سکتی ہے جو کہ پیڈنگ کی وجہ سے ایلی منٹ کا سائز نہیں بڑھنے دیتی بلکہ اس کی اصل چوڑائی کے اندر ہی پیڈنگ اپلائی کرتی ہے۔

footer {
        width: 100%;
        padding: 50px;
        box-sizing: border-box;
}

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