مواد
- نامعلوم کے لئے ڈیزائننگ
- ڈیزائن کے لئے ایک عملی نقطہ نظر
- لے آؤنسٹک بننا
- آہستہ آہستہ کوڈنگ
- مارک اپ میں ڈائیونگ کرنا
ایسا لگتا ہے کہ ان دنوں سبھی ذمہ دار ویب ڈیزائن کے بارے میں بات کر رہے ہیں ، اور اچھی وجہ کے ساتھ۔ چونکہ ویب فعال ڈیوائسز کی تعداد بڑھتی ہی جارہی ہے - ہر ایک میں مختلف صلاحیتوں اور خصوصیات کا حامل ہے - فکسڈ چوڑائی والی ویب سائٹ بنانے کا اب سمجھدار نہیں ہے۔
سچ ہے ، یہ کبھی نہیں تھا۔ پھر بھی ابھی تک تجربات کو ڈیزائن کرنے کا بہترین عمل سمجھا جاتا تھا جس نے متعدد مفروضے بنائے تھے ، چاہے وہ اسکرین ریزولوشن ، بینڈوتھ یا ان پٹ طریقہ کے آس پاس ہوں۔ اگر آپ نے کبھی بھی 960px وسیع ویب سائٹ ڈیزائن کی ہے ، صرف اسے کسی دوست کی چھوٹی اسکرین نیٹ بک پر دیکھنے کے لئے (اور ہاں ، میں یہاں تکلیف دہ تجربے سے لکھ رہا ہوں) ، آپ کو سمجھ آجائے گی کہ یہ خاص طور پر چالاک نقطہ نظر کیوں نہیں تھا۔ اب ، اسمارٹ فونز اور ٹیبلٹس کو مکس میں پھینکنے کے بعد ، یہ واضح ہوجاتا ہے کہ ہمارے روایتی طریقے اب مقصد کے لئے موزوں نہیں ہیں۔
شکر ہے کہ سی ایس ایس میڈیا کے سوالات کی آمد اور یہ بڑھتا ہوا اعتراف کہ ویب اپنے طور پر ایک میڈیم ہے ، اس کا مطلب ہے کہ ہم پلیٹ فارم کی اصل نوعیت کو گلے لگانے شروع کر رہے ہیں ، یہ تسلیم کرتے ہوئے کہ اس کی آفاقیہ طاقت ہے ، کمزوری نہیں۔
اگلے پانچ دنوں میں ، میں آپ کو ایک ایسی تکنیک کے ذریعہ رہنمائی کروں گا جو اس حقیقت کو پہچان لے: ذمہ دار ویب ڈیزائن. ایتھن مارکوٹے کے ذریعہ تیار کردہ ، اس میں سیال کی ترتیب ، لچکدار امیجز اور میڈیا کے سوالات کو یکجا کیا گیا ہے تاکہ وہ ایسی سائٹیں تعمیر کرنے میں ہماری مدد کریں جو کسی بھی ماحول کے ساتھ ان کا سامنا کریں۔
میں آپ کو یہ دکھا کر اس انداز کا مظاہرہ کروں گا کہ ایک آسان میڈیا گیلری کیسے بنائی جائے۔ میری مثالوں میں ، میں نے ایک حالیہ روڈ ٹرپ کی دستاویز کرنے کے لئے ایک چھوٹی سی ویب سائٹ بنائ ہے جو میں نے ریاستہائے متحدہ میں کی تھی ، لیکن اپنی ضروریات کے مطابق کوڈ اور ڈیزائن کو اپنی مرضی کے مطابق بنائیں۔
نامعلوم کے لئے ڈیزائننگ
اس ٹیوٹوریل کا بیشتر حصہ ذمہ دار ڈیزائن کے ترقیاتی پہلو کے آس پاس ہوگا۔ لیکن کسی بھی کوڈ کو کھودنے سے پہلے ، سوچنے کے لئے ایک لمحہ لگائیں کہ ہم کسی ایسی ویب سائٹ کو کس طرح ڈیزائن کرسکتے ہیں جس میں بخوبی لامحدود ترتیب ہوسکتی ہے۔
اب ، میں خوش قسمت ہوں کہ میں انٹرفیس ڈیزائن کرسکتا ہوں اور فرنٹ اینڈ کوڈ تیار کریں جو ان کو حقیقی بنائے۔ یہ کورس کی کوئی انوکھی مہارت نہیں ہے - اگر آپ اپنے لئے کام کرتے ہیں تو شاید آپ بھی ایسا ہی ہو۔ لیکن یہ سمجھنا یقینی طور پر فائدہ مند ہے کہ جب سیال کے ڈیزائن تیار کرتے ہیں تو مواد کس طرح موافقت پذیر اور دوبارہ آسکتا ہے۔
میں ایک بڑی ٹیم کے حصے کے طور پر بھی کام کرتا ہوں جہاں میرا کردار زیادہ مہارت حاصل ہے۔ اس طرح کے ماحول میں ، بصری ڈیزائنر مکمل طور پر تار فریموں کو پرکشش ، کشش (منسلک ، پکسل - بہترین) کمپپس میں ترجمہ کرنے پر مرکوز ہوسکتا ہے۔ اور یہ معمولی بات نہیں ہے کہ ڈویلپرز کا الگ سے واقع ہونا ، ان ترتیب کو دبلی پتلی اور موثر مارک اپ اور سی ایس ایس میں ترجمہ کرنا۔
تاہم ، اس طرح کے لکیری اور الگ الگ ورک فلو تیزی سے ٹوٹ جاتے ہیں جب ہم یہ جائزہ لینے لگیں کہ ڈیزائن مختلف ماحول کو کیسے اپنائے گا۔ جتنا بھی کوئی نیا ٹول یا ٹکنالوجی ہے ، ہمیں کام کرنے کے زیادہ باہمی تعاون اور فرتیلی طریقوں پر بھی غور کرنا چاہئے۔ جوابدہ ویب سائٹوں کو ڈیزائن کرتے وقت درپیش بہت سے مشکل مسائل کو محض گفتگو ، تجربہ اور تکرار کے ذریعے حل کیا جاسکتا ہے۔
ڈیزائن کے لئے ایک عملی نقطہ نظر
اس کا مطلب یہ نہیں ہے کہ ڈیزائنرز کے بارے میں یہ سوچنے کی کوئی گنجائش نہیں ہے کہ کوئی ڈیزائن کسی خاص آلے کی قید سے باہر کیسے کام کرسکتا ہے۔
کلیئر لیفٹ میں ، ہم ڈیسک ٹاپ کے نقطہ نظر سے بصری ڈیزائن کا آغاز کرتے ہیں۔ ہم ایک عمدہ ڈیزائن کی زبان اور بصری جمالیات کی وضاحت کرتے ہوئے ابتدا کرتے ہیں ، جو اکثر ایک بنیادی حص pieceے میں ابتدائی تلاشیاں کرتے ہیں۔ مثال کے طور پر ، اگر ہم کسی فوڈ سائٹ کو ڈیزائن کررہے ہیں تو ، ہم ایک ہدایت والے صفحے سے شروعات کریں گے۔ ایک نیوز سائٹ ، کہانی کا صفحہ۔
نہ صرف یہ سائٹ کا ایک اہم صفحہ ہے ، بلکہ اس میں ہمارے پاس ٹائپوگرافک پیلیٹ بنانے کے ل enough کافی ساختہ مواد شامل ہے۔ ہم اس کے بارے میں بھی سوچیں گے کہ لے آؤٹ کیسے موافقت پذیر ہوسکتا ہے - چاہے وہ اس مرحلے میں ہمارے ذہنوں کے پیچھے ہی ہو۔
کسی ڈیزائن کو دباؤ ڈالنے کا ایک مفید طریقہ یہ ہے کہ اس طرح کا صفحہ لینا اور اسے ایک تنگ (~ 320px چوڑی) اسکرین کے لئے ڈھالنا ہے۔ آپ کو ممکنہ طور پر پتہ چل جائے گا کہ اس چوڑائی پر کام کرنے کے لئے ڈیزائن کے کچھ پہلوؤں پر دوبارہ غور کرنے کی ضرورت ہوگی۔ یہاں کچھ مثالیں ہیں:
- نوع ٹائپ: بڑے عنوانات وسیع تر ترتیب پر اچھی طرح کام کرسکتے ہیں ، لیکن چھوٹی اسکرینوں پر وہ عمودی جگہ کافی زیادہ لے سکتے ہیں لہذا اضافی سکرولنگ کی ضرورت ہوتی ہے۔ جیسے جیسے لائن کی لمبائی میں ردوبدل ہوتا ہے ، آپ کو لائن اونچائی اور دوسرے ٹائپوگرافک علاج پر بھی غور کرنا چاہئے۔
- روابط: آپ کا ڈیزائن ٹچ اسکرین آلات پر کیسے کام کرے گا؟ اگرچہ ہمارے پاس ابھی تک ان کا پتہ لگانے کا آسان طریقہ نہیں ہے (مطلب کہ ہمیں اپنے ڈیزائن کے تمام پہلوؤں کو مدنظر رکھنا چاہئے) ، ایک تنگ اسکرین کے لئے ڈیزائن کرنے سے ہمیں روابط اور دیگر انٹرایکٹو عناصر کے ہدف والے علاقوں کے بارے میں سوچنے کا موقع مل سکتا ہے۔ . آئی او ایس کے رہنما خطوط تجویز کرتے ہیں کہ یہ کم از کم 44 پکسلز / پوائنٹس مربع ہوں ، جس کا مقصد حاصل کرنا ایک اچھی شخصیت ہے۔
- سمت شناسی: یہ شاید کسی بھی جوابدہ ڈیزائن کا سب سے عجیب و غریب جزو ہوگا ، خاص طور پر اگر آپ کی سائٹ میں بہت سارے حصے اور گہری درجہ بندی موجود ہے۔ بریڈ فراسٹ نے نیویگیشن کے بارے میں کچھ مختلف طریقوں کی ایک سمری لکھی ہے جس پر فی الحال غور کیا جارہا ہے۔
- ضرورت سے زیادہ مواد: کیا کچھ مواد درکار نہیں ہے؟ کیا دوسرے مواد کو صرف کچھ مخصوص منظرناموں میں ہی دکھائے جانے کی ضرورت ہے؟ میں صارف کو کس ڈیوائس کے استعمال سے ہوتا ہے اس کی بنیاد پر مواد کو چھپانے کی وکالت نہیں کرتا ہوں ، لیکن مشروط بوجھ (جیسے ہم اس ہفتے کے آخر میں دیکھیں گے) جیسی تکنیکیں چھوٹے صفحوں کی خدمت میں مدد کرسکتی ہیں جو ضرورت کے وقت صرف تکمیلی مواد کو لوڈ کرتے ہیں۔
دو متضاد لے آؤٹ کو ڈیزائن کرنے سے اس خیال کو تقویت ملتی ہے کہ ایک ڈیزائن اپنی مرضی کے مطابق بنائے گا ، جبکہ ممکنہ گچوں کو جلد شروع کیا جائے۔ اگرچہ یہ کام دوگنا ہونے کی مانند ہے ، لیکن اس بات کو ذہن میں رکھیں کہ ہم ہر صفحے کو پکسل کامل صحت سے متعلق کے لئے ڈیزائن نہیں کررہے ہیں۔ اس کے بجائے ، ہم ایک توسیع پذیر ڈیزائن کی زبان بنانے پر توجہ دے رہے ہیں۔ ایک ایسی زبان جو تیار ہوگی جب ہم اسے کوڈ میں نافذ کرنا شروع کریں گے ، اور وہ ایک جو انفرادی ماڈیولز اور اجزاء کے ارد گرد ہے۔
لے آؤنسٹک بننا
حیرت کی بات نہیں ، ایک ایسی صنعت کے لئے جس نے تاریخی طور پر ویب کا پرنٹ کی طرح سلوک کیا ہے ، فکسڈ چوڑائی کی ترتیب نے ہمارے پیدا کردہ بہت سارے ڈیلیوریلز کو گھس لیا ہے۔ جب ہم موافقت پذیر میڈیم کی تیاری کا آغاز کرتے ہیں تو ، نئے طریقوں پر غور کیا جارہا ہے جو ہمیں میڈیم کی روانی نوعیت کا اعتراف کرتے ہوئے مسائل کو حل کرنے اور نظریات کو بات چیت کرنے کی اجازت دیتے ہیں۔ یہ میرے پسندیدہ میں سے کچھ ہیں:
- صفحہ کی وضاحت آریھ: اگرچہ وائر فریم اکثر آؤٹ لیٹ (اور اس طرح ایک خاص قسم کا آلہ مان لیتے ہیں) کو اشارہ کرسکتے ہیں ، لیکن صفحہ کی وضاحت آریج اس مفروضے کو دور کردیتی ہے اور اس کے بجائے دستاویز میں ترجیح کے لحاظ سے ترتیب دیئے گئے انفرادی اجزاء کی وضاحت کرتی ہے۔
- انداز ٹائل: جب گاہکوں کے ساتھ ڈیزائن آئیڈیوں کو بات چیت کرتے ہو تو ، ہم خود کو ’’ ویب سائٹس کی پینٹنگز ‘‘ پیش کر سکتے ہیں۔ اگر ہم محتاط نہیں ہیں تو ، مؤکل صحیح طور پر ایسے تصورات کو دیکھنے کے لئے کہیں گے جو اس بات کا مظاہرہ کرتے ہیں کہ ڈیزائن دوسرے آلات پر بھی کس طرح دکھائے گا۔ یہ ہمیں متعدد آلات کیلئے متعدد صفحات تیار کرنے کی غیر مستحکم صورتحال پر مجبور کرسکتا ہے۔ سامنتھا وارن نے اس مسئلے کے بارے میں سوچا ہے اور اسٹائل ٹائلس کے ساتھ آئے ہیں۔ یہ کسی موڈ بورڈ (لیکن کم مبہم) اور مکمل طور پر سمجھے گئے کامپ (لیکن کم عین مطابق) کے بیچ کہیں بیٹھتے ہیں ، اور نوع ٹائپ ، بٹن اسٹائل اور ماسٹ ہیڈ ٹریٹمنٹ میں گفتگو کرنے میں ہماری مدد کرتے ہیں۔ وہ ہمارے مؤکلوں کے ساتھ زیادہ پختہ بحث و مباحثہ کی بھی حوصلہ افزائی کرتے ہیں۔
- متحرک ڈیزائن کھیل: باہمی تعاون کے ساتھ ڈیزائن ورکشاپوں کے دوران یہ مشق واقعی میں بہتر کام کر سکتی ہے۔ اس مشق میں ، ہر ایک پوسٹ پر لکھتا ہے - وہ عناصر کو نوٹ کرتا ہے جو ایک خاص صفحے پر ظاہر ہوسکتے ہیں۔ اس کے بعد یہ اہمیت کے لحاظ سے دیوار سے پھنس گئے ہیں ، گویا وہ کسی موبائل فون پر خط لگائے ہوئے دکھائی دے رہے ہیں۔ نتیجے میں ہونے والی بحث سے کچھ حیرت انگیز نتائج برآمد ہوسکتے ہیں۔ مثال کے طور پر ، آپ کو اندازہ ہوسکتا ہے کہ صفحہ میں نیویگیشن سب سے اہم جز نہیں ہے۔ اس کے نتیجے میں وہ ڈیزائن تیار ہوسکتا ہے ، جہاں صفحے کے اوپری حصے میں ایک اسکیپ لنک کا فوٹر میں موجود نیویگیشن سے رابطہ ہوتا ہے۔
ابھی بھی ان ٹولز کی گنجائش موجود ہے جو ہم پہلے ہی استعمال کر رہے ہیں ، لیکن جب کسی ویب سائٹ کو وسیع الفاظ میں ڈیزائن کرتے ہو تو ہمیں ذہن میں رکھنا ہوگا کہ لے آؤٹ اب کوئی معروف نہیں ہے۔
آہستہ آہستہ کوڈنگ
شکر ہے ، ہمیں جس مثال کے طور پر ہم کام کر رہے ہیں اس میں بصری ڈیزائن کے بارے میں فکر کرنے کی ضرورت نہیں ہے کیونکہ ہمارے لئے سخت محنت کی گئی ہے! اس کے بجائے ، ہم اپنے ڈیزائن کو مکمل طور پر ذمہ دار ویب سائٹ میں کوڈ کرنے پر مرتکز کرسکتے ہیں۔
ہمارے شروع کرنے سے پہلے ایک اور چیز۔ ہم جس میڈیم کے ساتھ کام کر رہے ہیں اس کے ایک اصول کو یاد رکھنا ضروری ہے: ہمہ جہت۔ اس کا مطلب ہے کہ نہ صرف آج کے ویب سے چلنے والے آلات کی تشکیل ، بلکہ کل اور کل کے ساتھ مطابقت کو یقینی بنانا۔ جان آلسوپ نے بیان کیا کہ کیوں یہ اصول ان کی پوسٹ میں اگلے 6 بلین میں اہمیت رکھتا ہے:
"یہ اگلے چھ بلین دیہی ہندوستان ، افریقہ ، چین کے بچے ہیں جہاں بجلی تک رسائی ، اور نیٹ ورک ، وقفے وقفے سے ہوسکتے ہیں۔ یہ سواترا میں ایک دہائی پرانے ونٹل باکس میں موجود ہے۔ وہ لوگ جو سیکڑوں مختلف زبانیں بولتے ہیں ، اور درجنوں مختلف ہیں۔ تحریری نظام۔ یہ وہ لوگ ہیں جو اپنے خاندان میں سب سے پہلے ہیں جو پڑھ لکھ سکتے ہیں۔ یہ دنیا بھر میں 20 فیصد لوگ ہیں جو نہیں لکھ سکتے ہیں اور نہ ہی لکھ سکتے ہیں۔’
ہم اپنے پیشہ کے مابین مختلف فیشن (جس سے بہتر الفاظ کی خواہش رکھتے ہیں) کو دیکھ کر ویب پر اپنی تفہیم کا سراغ لگاسکتے ہیں: ویب معیار ، رسائ ، غیر متفرق جاوا اسکرپٹ… سب ایک ہی موضوع کے مختلف ہیں: ترقی پسندانہ اضافہ۔ ذمہ دار ویب ڈیزائن کا بھی یہی حال ہے۔ تعمیر کرنا a واقعی ذمہ دار ویب سائٹ ایک ایسی سائٹ کی تعمیر کرنا ہے جو نہ صرف پیچھے کی طرف مطابقت پذیر ہو بلکہ مستقبل میں دوستانہ بھی ہو۔
مارک اپ میں ڈائیونگ کرنا
ٹھیک ہے ، پیش کش کی خاطر کافی ہے ، اب وقت آگیا ہے کہ ٹیکسٹ ایڈیٹر کھولیں۔ہمارے ڈیزائنر نے ہمیں ڈیسک ٹاپ پر مبنی ڈیزائن مہیا کیا ہے ، اور یہ کافی مہربان رہا ہے کہ اس کی مثال فراہم کرنے کے لئے کہ یہ کس طرح تنگ نظری پورٹ میں ظاہر ہوسکتا ہے۔
ہوسکتا ہے کہ ان کو الگ الگ کوڈ کرنے کی آزمائش ہو لیکن میں ایک مختلف نقطہ نظر تجویز کرنے جا رہا ہوں۔ الگ الگ اجزاء - یا پیٹرن - رکھ کر جو ایک صفحے پر ڈیزائن بناتے ہیں ، ہم پیٹرن پورٹ فولیو تشکیل دے سکتے ہیں۔ اس سے ہمیں کسی بھی صفحے کی ترتیب کی حدود سے باہر اجزاء تیار کرنے کی اجازت ملتی ہے ، اور کسی بھی رجعت آزمائش کے لئے ہمیں بعد میں حوالہ دینے کے لئے کچھ دے گا۔ آئیے کچھ مختلف آلات میں ابتدائی مارک اپ دیکھیں:
ہمارا نشان زدہ پیٹرن پورٹ فولیو دیکھیں
ٹھیک ہے ، مجھے مجرم قرار دیا جائے گا - ہمارے پاس پہلے سے ہی ایک ذمہ دار ویب سائٹ موجود ہے! ہمارا مواد ہر آلے کی حدود میں ڈھل رہا ہے ، چاہے کوئی نیا آئی پیڈ ہو یا مسترد شدہ فیچر فون۔ یہاں تک کہ یہ لنکس جیسے متن والے صرف براؤزر میں کام کرتا ہے۔
عالمگیریت کے بنیادی اصولوں کا شکریہ ، ویب ہے پہلے سے طے شدہ. یہ بہت اچھا ہے ، لیکن اس کا مطلب یہ بھی ہے کہ اب ہم کوڈ کے ساتھ جو کچھ بھی کرتے ہیں وہ اس مقامی موافقت پر سمجھوتہ کرسکتا ہے۔
کل: ہم احتیاط سے چہل قدمی کریں گے اور جواب دہ ڈیزائن کے پہلے پہلو کو استعمال کرنا شروع کریں گے: نوع ٹائپ اور مائع گرڈ۔
