مواد
- شروع کرنے کے لئے ٹولز
- 01. قبول ویب ڈیزائن خاکہ شیٹس
- 02. قبول ڈیزائن خاکہ
- 03. قبول وائر فریمز
- 04. ملٹی ڈیوائس لے آؤٹ پیٹرن
- 05. انداز ٹائلیں
- لچکدار / سیال گرڈ کے اوزار
- 06. گولڈن گرڈ سسٹم
- 07. گناہ 960
- 08. سادہ گرڈ
- 09. 1140px سی ایس ایس گرڈ
- 10. کالمینل سی ایس ایس گرڈ سسٹم
- 11. سیمنٹک گرڈ سسٹم
- 12.سوسی
- 13. گرڈپاک
- 14. گرڈسیٹ
- 15. RWD کے لئے ایک بہتر فوٹوشاپ گرڈ
- 16. سیال گرڈ
- 17. قبول کیلکولیٹر
- جوابی تصاویر (اور متن) کے اوزار
- 18. قبول تصاویر
- 19. انکولی امیجز
- 20. سینچا.یو ایس سی آر (سابقہ ٹنیس سرک)
- 21. فٹ ٹیکسٹ
- 22. سلیب ٹیکسٹ
- میڈیا کے سوالات کے ل. ٹولز
- 23. رسپانس.جے
- 24. CSS3- Mediaqueries.js
- 25. Adapt.js
- 26. زمرہ بندی
- قبول ڈیزائن (اور موبائل) بوائلر پلیٹیں
- 27. 320 اور اس سے زیادہ
- 28. گرڈ لیس
- 29. کنکال
- 30. بوٹسٹریپ
- پلگ انز ، شمس اور پولی فیلز
- 31. قبول پلگ ان
- 32. معزول کرنا
- 33. میڈیا ٹیبل
- "جانچ ، جانچ: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. ردعمل
- 36. قبول ڈیزائن ٹیسٹنگ
- 37. ذمہ دار
- 38. قبول.اس
- 39. اسکرینکوئری.یس
- 40. اپٹٹس
- 41. قبول ڈیزائن بک مارکلیٹ
- 42. قبول ڈیزائن ٹیسٹ بک مارکلیٹ
- 43. اسکرین فلائ
- 44. میڈیا سوالات کا اشارے
- 45. شم
- 46. ڈرائیو میں
- 47. ایڈوب شیڈو
- 48. اوپیرا موبائل ایمولیٹر + ریموٹ ڈیبگ
- مزید پریرتا
- 49. MediaQueri.es
- 50.RWD
- پسند آیا؟ یہ پڑھیں!
جیسا کہ ایتھن مارکوٹے نے اپنے مضمون "قبول ویب ڈیزائن" کے ساتھ ساتھ اس کی سب سے زیادہ فروخت ہونے والی کتاب دونوں میں متعارف کرایا / مرتب کیا ، کسی کو سائٹ کو جواب دہ بنانے کے لئے تین عناصر کی ضرورت ہوتی ہے۔
- ایک لچکدار / سیال گرڈ
- قبول تصاویر
- میڈیا سے متعلق سوالات
دوسرے بہت سارے عظیم مضامین موجود ہیں جن میں محرکات ، تصورات اور ذمہ دار ویب ڈیزائن سے متعلق تکنیک کا احاطہ کیا گیا ہے ، لہذا ہم اس مضمون کی توجہ کچھ اعلی ٹولز پر رکھیں گے جو آپ کو ذمہ داری سے ذمہ دار بننے میں مدد فراہم کریں گے۔
شروع کرنے کے لئے ٹولز
اپنی سائٹ کی تعمیر شروع کرنے سے پہلے ، یہ معلوم کرنا بہتر ہوگا کہ صفحے پر موجود عناصر مختلف آلات کے مختلف براؤزر کے سائز کو کس طرح ڈھیل لیں گے جن پر ان کی نگاہ سے دیکھا جائے گا ، اور اس سے رابطہ منقطع ہونے سے بچنے کے ل often جو اکثر بنیادی طور پر سوچنے میں آتے ہیں۔ ڈیسک ٹاپ ڈیزائن اور بقیہ ردعمل کے بارے میں غور و فکر کے بطور (خاص طور پر اسٹیفنی (سلیوان) ریوس کا تبصرہ ملاحظہ کریں)۔
01. قبول ویب ڈیزائن خاکہ شیٹس
جوابی خاکے کی چادروں کا یہ سیٹ ، جیریمی پی ایلفورڈ کے ذریعہ ، نقشہ ترتیب دینا شروع کرنے کا ایک عمدہ نقطہ ہے کہ صفحے کے حصے مختلف قراردادوں میں کیسے بدلیں گے۔
02. قبول ڈیزائن خاکہ
اگر آپ اپنے تمام خاکوں کو ایک ہی جگہ پر رکھنا پسند کرتے ہیں تو ، پھر آپ ایپ اسکیچ بک کمپنی کے ذریعہ 50 جوابدہ اسکیچ شیٹوں کی اس تار سے بنی کتاب پر غور کرنا چاہیں گے۔
03. قبول وائر فریمز
ذمہ دار ویب سائٹس کی تعمیر میں ایک مشکل وائر فریموں کو استعمال کرنے میں ہے جس سے یہ ظاہر ہوتا ہے کہ جواب دہ ڈیزائن کس طرح کام کرے گا۔ ایڈوب کے جیمز میلرز نے یہ تجرباتی ٹول جمع کیا ہے تاکہ یہ ظاہر کیا جاسکے کہ پیچیدہ ترتیبوں کے کس طرح وائر فریمنگ کام کرسکتی ہے۔
04. ملٹی ڈیوائس لے آؤٹ پیٹرن
جب کسی جوابی ڈیزائن کی منصوبہ بندی کرنا یہ مفید ہے کہ آپ کے سامنے دوسرے لوگوں نے اس سے کس طرح رابطہ کیا ہے تو ، لہذا لیوک Wroblewski کے ملٹی ڈیوائس لے آؤٹ پیٹرن ، جو مشہور نمونوں کی فہرست کے ساتھ مثال کے طور پر درج کرتے ہیں ، یہ شروع کرنے کے لئے ایک بہترین جگہ ہے۔
05. انداز ٹائلیں
سمانتھا وارن کے اسٹائل ٹائلز نے جوابی عمر میں ڈیزائن کے لئے ایک نئی تکنیک کی تجویز پیش کی۔ فکسڈ چوڑائی ڈیزائن کے مذاق کے بجائے ، یہ ایسے سوئچز یا موڈ بورڈز کی طرح ہیں جو دانے دار تفصیل میں جانے کے بغیر ڈیزائن کے عمومی انداز کو ظاہر کرتے ہیں۔
لچکدار / سیال گرڈ کے اوزار
جیسا کہ پہلے کہا گیا ہے ، جواب دہ ڈیزائن کے لئے ضروری پہلا جزو ایک لچکدار / سیال گرڈ ہے۔مندرجہ ذیل پہلے سے ہی پہلے ہی بلٹ ہیں: آپ کو انہیں ڈاؤن لوڈ کرنے کی ضرورت ہے اور آپ جلد ہی ایک زیادہ ذمہ دار سائٹ کی طرف گامزن ہوجائیں گے۔
06. گولڈن گرڈ سسٹم
جونی کورپی ، جس نے کم فریم ورک بھی تیار کیا ، نے حال ہی میں قابل اعتماد ڈیزائن کے ل a قابل اعتماد گرڈ سسٹم کا یہ نیا ورژن جاری کیا ہے۔ "فولڈنگ" سمجھا جاتا ہے کیونکہ یہ آسانی سے 16 ، آٹھ ، چار سے چار کالموں کے مطابق ڈھل جاتا ہے ، گولڈن گرڈ سسٹم میں براؤزر کا ایک چھوٹا سا اوورلی بھی ہوتا ہے جو آپ کے صفحات پر گرڈ کو جانچنے کے لئے بے نقاب کرتا ہے۔
07. گناہ 960
پیراویل ، انکارپوریٹڈ کے باصلاحیت جینٹس نے 960.gs گرڈ میں ترمیم شدہ گرڈ جاری کیا ہے جسے وہ اپنے ذمہ دار منصوبوں کی بنیاد کے طور پر استعمال کرتے ہیں۔
08. سادہ گرڈ
کونپل میئر ہیڈ کے ذریعہ ، سادہ گریڈ جوابدہی کے ساتھ بنایا گیا تھا ، لہذا آپ کے ذمہ دار ویب سائٹ پروجیکٹ کے ساتھ اٹھنا اور چلنا آسان ہے۔
09. 1140px سی ایس ایس گرڈ
ایک اور عمدہ ذمہ دار گرڈ سسٹم 1140px سی ایس ایس گرڈ ہے جو میلبورن ڈیزائنر اینڈی ٹیلر کا ہے ، جو ایک وسیع ڈیسک ٹاپ ریزولوشن سے لے کر موبائل تک جاتا ہے۔
10. کالمینل سی ایس ایس گرڈ سسٹم
کالمینل گرڈ سسٹم ، جو پلپ + پکسلز عرف تخلیقی ڈائریکٹر نک گورس لائن نے بنایا ہے ، 1140px گرڈ سسٹم پر مبنی ہے ، لیکن کچھ اضافی سامان جیسے خاکہ شیٹ اور وائر فریمنگ ٹیمپلیٹس کے ساتھ سی ایس ایس ڈیبگنگ اسٹائلوں پر مشتمل ہے۔
11. سیمنٹک گرڈ سسٹم
پہلے سے پروسیسر شدہ سی ایس ایس ایکسٹینشنز جیسے ساس اور ایل ای ایس زیادہ مقبول ہورہے ہیں ، اور ٹائلر ٹیٹ کا سیمنٹک گرڈ سسٹم انہیں اس گرڈ سسٹم میں زیادہ سے زیادہ اثر انداز کرنے کے لئے استعمال کرتا ہے جو غیرضروری طبقات یا عناصر کو استعمال کرنے کا دعوی نہیں کرتا ہے۔ مزید معلومات کوڈنگ پر پڑھیں ۔سماشیگ میگزین ڈاٹ کام / 01/08/23/the-semantic-grid- نظام- صفحہ-layout-for-ttt//۔
12.سوسی
سینمینٹک گرڈ سسٹم کی طرح اوڈ برڈ کے SUSY نے ایک گرڈ سسٹم بنایا ہے جس میں کوئی اضافی مارک اپ یا خصوصی کلاس استعمال نہیں ہوتی ہے ، لیکن SUSY کا مقصد صرف ساس (اور اس کی توسیع ، کمپاس) کے صارفین ہیں۔
13. گرڈپاک
ایرسکائن ڈیزائن کے ذریعہ گرڈپاک ، آس پاس کے جدید ترین ذمہ دار گرڈ جنریٹرز میں سے ایک ہے۔ یہ آپ کو بہت سارے بریک پوائنٹس پر اپنے کالم اور گٹر سیٹ کرنے کی سہولت دیتا ہے ، پھر سی ایس ایس ، جاوا اسکرپٹ اور پی این جی فائلوں کو آؤٹ پٹ کرتا ہے تاکہ آپ کی پوری ٹیم اسی نقطہ آغاز سے کام کر رہی ہو۔
14. گرڈسیٹ
گرڈسیٹ پر اسرار کی ہلکی سی ہوا ابھی بھی موجود ہے ، جب میں یہ لکھتا ہوں ، ابھی حقیقت میں اسے جاری نہیں کیا گیا ہے۔ لیکن مارک بولٹن ڈیزائن کے ذریعہ آلے سے سپیک ، غیر نسخہ دار ، گرڈ سسٹم اور اپنے گرڈ کو آن لائن بچانے اور ان کا نظم کرنے کے ایک طریقہ کا وعدہ کیا گیا ہے۔
15. RWD کے لئے ایک بہتر فوٹوشاپ گرڈ
ایلیٹ جے اسٹاکس نے پرانے 960px ڈی فیکٹو گرڈ کے معیار کو ترک کرنے اور اس کی بجائے 1000 پکس بیس سے کام کرنے کی تجویز پیش کی ہے ، جس سے کام کرنے میں تمام فیصد حساب کتابیں آسان ہوجاتی ہیں۔ اگر آپ اتفاق کرتے ہیں تو ، اس نے آپ کے ساتھ کام شروع کرنے کے لئے ایک پی ایس ڈی بنایا ہے۔
16. سیال گرڈ
اگر آپ کا ڈیزائن انتہائی ماہر ہے اور آپ کو اپنی مرضی کے مطابق گرڈ بنانے کی ضرورت ہے تو ، آپ ایسا کرسکتے ہیں۔ نیٹ ایوارڈز کے شاندار نئے آنے والے نامزد شخص ہیری روبرٹس کے فلو گرڈ کیلکولیٹر کے ساتھ۔
17. قبول کیلکولیٹر
فی صد کیلکولیٹر کے لئے ایک اور پکسلز ، لیکن اسٹو سٹو رابسن کا یہ آپ کے لئے سی ایس ایس کے تمام اصول تیار کرکے دوسروں سے ایک قدم آگے جاتا ہے ، اس کا مطلب ہے کہ آپ انہیں صرف اپنی اسٹائل شیٹ میں کاپی کرکے پیسٹ کرسکتے ہیں۔
جوابی تصاویر (اور متن) کے اوزار
ذمہ دار ویب ڈیزائن کا ایک اور اہم جزو سیال تصاویر ہیں۔ اگرچہ سیال تصویروں کے حصول کی تکنیک سیدھی ہے ، لیکن کارکردگی کو بہتر بنانا اور مختلف آلات کے لئے صفحہ بوجھ قبول ویب ڈیزائن میں سب سے بڑا چیلنج ہے۔ مسئلے تک پہنچنے کے لئے کچھ وسائل یہ ہیں۔
18. قبول تصاویر
فیلمنٹ گروپ نے اسکرین ریزولوشن پر مبنی مناسب سائز کے امیج بھیجنے کا ایک طریقہ وضع کیا۔ موبائل کی پہلی تصاویر کے ساتھ یہ تجربہ جو جواب دہی اور ذمہ داری کے ساتھ پیمانے پر مختلف سائز کی دو تصاویر کو حوالہ دینے کے ل calls مطالبہ کرتا ہے۔
19. انکولی امیجز
میٹ ولکاکس نے قبول تصویروں کے آلے سے انپٹیو امیجز بنانے کے ل inspiration پریرتا لیا ، جس میں پی ایچ پی اور تھوڑا سا جاوا اسکرپٹ استعمال کیا گیا ہے تاکہ کسی اضافی مارک اپ کی ضرورت کے بغیر صارف کے آلے پر مناسب تصاویر پیش کی جاسکے۔
20. سینچا.یو ایس سی آر (سابقہ ٹنیس سرک)
سینچا کلاؤڈ سروس مہیا کرتا ہے جو میزبان تصاویر کے مطلوبہ ورژن بھیجنے کی درخواست کرتا ہے جس کے ذریعہ وہ درخواست کرتا ہے۔ اس کو استعمال کرنے کا طریقہ جاننے کے ل doc ، دستاویزات.سنچا.com/io/src/ دیکھیں۔
21. فٹ ٹیکسٹ
پیراویل ، انکارپوریٹڈ کا ایک اور جوہر ، FitText.js ہے ، ڈیزائن اور ڈیوائس کے لئے ہیڈ لائن ویب ٹائپ کو جواب دہ بنانے کے لئے jQuery پلگ ان ہے۔ تفصیلات کے لئے دیکھیں ٹرینٹ والٹن ڈاٹ کام / 01/05/10/fit-to-scale/.
22. سلیب ٹیکسٹ
فٹ ٹیکسٹ اور سلیب ٹائپ الگورتھم سے متاثر ہو کر ، برائن میک آلیسٹر کا سلیب ٹیکسٹ ایک jQuery پلگ ان ہے جس میں متن کے بولڈ بلاکس بنائے جاتے ہیں جو طے شدہ چوڑائی کو مدنظر رکھتے ہوئے ردعمل کا سائز تبدیل کرتے ہیں۔
میڈیا کے سوالات کے ل. ٹولز
اب جب آپ کو اندازہ ہے کہ آپ کی ترتیب مختلف آلات ، مائعات کی گرڈ اور مائعات کی تصاویر کے ل change کیسے بدلے گی ، لہذا آپ کو صفحے کے عناصر کو جوابی کیفیت میں بدلنے کے ل media میڈیا سوالات کی ضرورت ہے۔
23. رسپانس.جے
جواب دہ ڈیزائن کے ساتھ ایک مسئلہ یہ ہے کہ وہ براؤزر جو میڈیا کے سوالات نہیں پڑھ سکتے وہ پیچھے رہ جاتے ہیں۔ یہ آپ کے ہدف کے سامعین کے لئے کوئی مسئلہ نہیں ہوسکتا ہے ، لیکن بوڑھے براؤزرز میں صارفین کو ایڈجسٹ کرنا اب بھی ایک عمدہ عمل ہے۔ اسکاٹ جہل کے ذریعہ ریسپانس ڈاٹ جے ایس صرف کم سے کم چوڑائی اور زیادہ سے زیادہ چوڑائی کی خصوصیات کی حمایت کرتا ہے۔
مزید کے لئے filamentgroup.com/lab/ ਸੰਬੰਧਿਤjs_رفاسٹ_css3_media_queries_for_internet_explorer_6_8_and_more/ ملاحظہ کریں۔
24. CSS3- Mediaqueries.js
CSS3-Mediaqueries.js ، واؤٹر وین ڈیر گراف کے ذریعہ ، آئی ای اور دوسرے براؤزر کے پرانے ورژن کو مؤثر طریقے سے جانچنے اور ہر قسم کے میڈیا سوالات کا اطلاق کرنے کے قابل بناتا ہے۔
25. Adapt.js
اصل 960.gs گرڈ سسٹم کے مصنف ناتھن اسمتھ نے اڈاپٹ ڈاٹ جے ایس لکھا ہے ، جس میں براؤزر کے طول و عرض کا پتہ چلتا ہے اور صرف مطلوبہ اسٹائل شیٹ کی خدمت کی جاتی ہے - جیسے میڈیا کے سوالات لیکن میڈیا کے سوالات کے بغیر ، یعنی یہ بوڑھے براؤزر میں بھی کام کرتا ہے۔
26. زمرہ بندی
یہ آلہ کا پتہ لگانے کے برعکس زاویہ سے رابطہ کیا گیا ہے - بریٹ جانکورڈ کی زمرہ دار اسکرپٹ نے فرض کیا ہے کہ جب تک کہ ڈیسک ٹاپ یا ٹیبلٹ کے بطور شناخت نہ ہو ، آلات موبائل ہوتے ہیں ، لہذا آپ کو ہمدردانہ طریقے سے براؤزر کے وسائل پیش کرنے کے اہل بناتے ہیں۔
قبول ڈیزائن (اور موبائل) بوائلر پلیٹیں
موثر جوابدہ ورک فلو کی روح میں ، بوائلر پلیٹس براؤزر میں ڈیزائنوں کو آگے بڑھنے کے عمل کو جلد کے بعد آسان کردیتی ہیں۔ اس میں سے زیادہ تر بوائلر پلیٹیں ایک صاف پیکیج میں مذکورہ بالا ٹولز میں سے ایک ساتھ ملتی ہیں: ایک لچکدار گرڈ ، جس میں اسکرپٹس کے ساتھ اضافہ ہوتا ہے ، جبکہ موبائل کو سب سے پہلے ، مواد سے باہر فلسفے کو نافذ کرتے ہوئے۔
27. 320 اور اس سے زیادہ
اینڈی کلارک کا 320 اور اپ ایک موبائل کا پہلا بوائلرپلیٹ ہے جو بہت سارے جدید ویب ڈیزائن ٹولز ، جیسے کم اور بوٹسٹریپ کے ساتھ ضم ہوتا ہے (# 30 دیکھیں)۔ کسی سائٹ کو تیزی سے چلانے اور چلانے کا ایک ہلکا اور چست طریقہ ہے۔ اینڈی کے ساتھ ہمارے انٹرویو کو بھی دیکھیں ، جس میں وہ ہمیں نئے ورژن کے بارے میں مزید بتاتا ہے۔
28. گرڈ لیس
گرڈلیس ایک HTML5 اور CSS3 بوائلرپلیٹ ہے جو نوع ٹائپ اور بیکڈ اِن کراس براؤزر مطابقت پر توجہ دینے کے ساتھ آپ کے ذمہ دار ڈیزائنوں کی بنیاد کے طور پر کام کرسکتا ہے۔
29. کنکال
پچھلے دو بوائلر پلیٹوں کے برعکس ، جس کا نقطہ آغاز سب سے چھوٹی ریزولوشن کے ساتھ ہے ، ڈیو گاماچے کے ذریعہ تیار کردہ اسکیلٹون ڈویلپمنٹ کٹ ، 960.gs گرڈ سسٹم پر مبنی ہے اور موبائل پر اسکیل ہے۔ سکیلٹون ڈویلپرز کے لئے اوپر والے انداز میں اسٹائل بنانے کے لئے ایک عمدہ اسٹائل فریم ورک کی حامل ہے۔
30. بوٹسٹریپ
ٹویٹر کے ذریعہ بنایا گیا ہے اور اب کھلی کھلی ہوئی ہے ، بوٹسٹریپ ایک سائٹ کو جلدی سے آن لائن حاصل کرنے کے لئے ایک فریم ورک اور اجزاء کا سلسلہ ہے ، اور اس کے دو بنیادی حصے جواب دہی کے ساتھ کام کرتے ہیں۔
پلگ انز ، شمس اور پولی فیلز
اگرچہ جدید براؤزرز اور سوفٹویئر جواب دہندگان کے لئے کمر بستہ ہیں ، بعض اوقات ہمیں مستقل تجربہ فراہم کرنے کے لئے اضافی ٹولز کا استعمال کرنا پڑتا ہے۔
31. قبول پلگ ان
ماریوس لبلنسکی نے ایک ورڈپریس پلگ ان لکھا ہے جس میں کسی بھی موجودہ ڈبلیو پی تھیم کو جوابی شکل میں تبدیل کرنے کا وعدہ کیا گیا ہے۔ یہ کس طرح کام کرتا ہے میں ابھی تک نہیں جانتا کیونکہ اس تحریر کے وقت کے طور پر اسے جاری نہیں کیا گیا ہے ، لیکن اگر یہ اپنے وعدے پر قائم ہے تو یہ بہت مفید ہونا چاہئے۔
32. معزول کرنا
ڈیسک ٹاپ براؤزرز پر مواد کی اوور فلو ہینڈلنگ اچھی طرح سے کام کرتی ہے ، لیکن پرانے موبائل براؤزر اسے متضاد طور پر ہینڈل کرتے ہیں۔ پُرجوش فلمانی گروپ کے زیر اقتدار پولیفل پورے آلات میں مستقل گراوٹ کا اضافہ کرتا ہے ، اس بات کو یقینی بناتا ہے کہ تمام موبائل استعمال کنندہ بہترین تجربہ حاصل کریں۔
33. میڈیا ٹیبل
مارکو پیگارو کا jQuery پلگ ان ، میڈیا ٹیبل ، Respond.js کے ساتھ کام کرتا ہے تاکہ آپ کو چھوٹے پردے والے آلات پر بڑے ڈیٹا ٹیبلز کو کس طرح ڈسپلے کرنے کے بارے میں اس مسئلے کو حل کرنے میں مدد مل سکے ، ردعمل کالم بنائیں اور جہاں مناسب ہو وہاں شو / پوش ٹوگل شامل کریں۔
"جانچ ، جانچ: 1-2-3 ..."
جوابی ورک فلو کا ایک اور پہلو یہ ہے کہ آپ اپنے ٹارگٹ آلات اور قراردادوں کو جانیں اور پھر ان میں جانچیں۔
34. resizeMyBrowser
ریسائزرمی بروزر ، فرنٹ اینڈ ڈویلپر چن لیو کے ذریعہ ، آپ کے براؤزر ونڈو کے لئے جواب دہی کے مطابق ڈیزائن کیے گئے صفحات کی جانچ کرنے یا ایک نیا پیش سیٹ تیار کرنے کے ل several کئی پیشگی جہت رکھتے ہیں اگر آپ اپنی ضرورتوں کے مطابق نہیں مل پاتے ہیں۔
35. ردعمل
ریمی میپ براؤزر ، ریسپانس پی ایکس کی طرح ، جیسے ریمی شارپ نے بنایا ہوا ہے ، آپ کے صفحات کو ونڈو میں لاد دیتا ہے جہاں سے آپ چوڑائی اور اونچائی کو جانچ سکتے ہیں کہ اس بات کا تعین کرنے کے لئے کہ آپ کے میڈیا کے سوالات کس حد تک فائرنگ کر رہے ہیں اور جہاں بریک پوائنٹس ڈیزائن میں ہیں۔
36. قبول ڈیزائن ٹیسٹنگ
ڈیزائنر اور ڈویلپر میٹ کارسلی کا ناقابل یقین حد تک مفید ٹول: قبول ڈیزائن ڈیزائن میں اپنی ذمہ دار سائٹ کا URL درج کریں تاکہ یہ دیکھنے کے ل it یہ براؤزر کے مختلف سائز میں کس طرح پیش ہوتا ہے۔
37. ذمہ دار
ایک URL درج کریں اور ذمہ دار آپ کو دکھائے گا کہ یہ بہت سے عام ڈیوائس کے سائز میں کیسے دکھاتا ہے - بے رحمانہ روبوٹک کارکردگی کے ساتھ۔ تما پگسلی اور اینڈی ہووے اس کے ذمہ دار ہیں۔
38. قبول.اس
ایک اور ان پیج ڈیوائس ایمولیٹر ، ریسپانس۔یہ آپ کو یو آر ایل ٹائپ کرنے دیتا ہے اور پھر مختلف پریسٹس کی رینج کے درمیان اس کا سائز بدل دیتا ہے۔ یہ ٹیم نے آنے والی ٹائپکاسٹ ایپ کے پیچھے کی ہے۔
39. اسکرینکوئری.یس
براؤزر کے ایک اور طول و عرض کا آلہ ، لیکن سکندرکیری۔مندر شرک سے موبائل اور ٹیبلٹ کا ایک وسیع سیٹ رکھنے کے ساتھ ساتھ ایک گرڈ اور حکمران بھی ہے جو ٹھیک پیمائش کو اتنا آسان بنا دیتا ہے۔
40. اپٹٹس
متعدد وضاحتی سائز میں سائٹس کی جانچ کے لئے ایک اور ایپ ، لیکن آپٹکس میک دیسی ہے۔ یہ میک ایپ اسٹور کے ذریعہ قابل اعتماد ہے ، اور مقامی ہونے کی وجہ سے اضافی خصوصیات جیسے آسان اسکرین شاٹس اور آف لائن مدد ملتی ہے۔
41. قبول ڈیزائن بک مارکلیٹ
وکٹر کولن نے ایک بہت ہی آسان لیکن موثر بک مارکلیٹ بنایا ہے۔ جب آپ اسے کسی بھی ویب صفحے پر چالو کرتے ہیں تو اس میں ایک ٹول بار شامل ہوجاتا ہے جس سے آپ کو چار عمومی اسکرین طول و عرض کے درمیان سوئچ کرنے میں مدد ملتی ہے تاکہ آپ دیکھ سکیں کہ آپ کی سائٹ مختلف سائز میں کس طرح رینڈر ہوتی ہے۔
42. قبول ڈیزائن ٹیسٹ بک مارکلیٹ
بنیامین کیین کا یہ بک مارک آپ کو اپنے ڈیوائس کے سائز کی وضاحت کرنے اور زیادہ سے زیادہ یا کچھ اپنی پسند کی اجازت دے کر مزید تخصیص کی اجازت دیتا ہے۔ چالو ہونے پر یہ آسانی سے موازنہ کرنے کے ل side ، تمام منتخب سائز میں سائٹ کو دکھاتا ہے۔
43. اسکرین فلائ
اسکرین فلائی ، بذریعہ QuirkTools ، آپ کو ڈیسک ٹاپ ، ٹیبلٹ ، موبائل اور ٹیلی ویژن پر مختلف قراردادوں پر سائٹ کی جانچ کرنے کی سہولت دیتا ہے۔ ڈیسک ٹاپ ٹیسٹنگ فی الحال سفاری تک ہی محدود ہے ، جبکہ ٹیبلٹ اور موبائل میں آلات اور براؤزر کے لئے مزید اختیارات موجود ہیں۔ ٹیلیویژن صرف اوپیرا تک ہی محدود ہے۔
44. میڈیا سوالات کا اشارے
برازیل کے ذریعہ جب میڈیا استفسار شروع کیا گیا ہے تو جوہان بروک جانچ کرنے کا ایک خالص سی ایس ایس طریقہ پیش کرتا ہے۔ ڈیزائن توڑ پوائنٹس کے ساتھ جانچ اور کھیل کے ل Media میڈیا کوئوری اشارے ایک اور اچھا ٹول ہے۔
45. شم
بوسٹن گلوب کی نئی شکل میں استعمال ہونے والے اوزار میں سے ایک ، آر ڈبلیو ڈی موومنٹ کا پوسٹر بوائے ، شم ایک نوڈ. جے ایس ایپ ہے جو ایک ہی وائی فائی نیٹ ورک پر ایک سے زیادہ ڈیوائسز میں ایک ویب پیج چلاتا ہے ، جس سے کراس ڈیوائس ٹیسٹنگ بہت آسان ہوجاتا ہے۔ .
46. ڈرائیو میں
اگر آپ کے پاس شمڈ کو چلانے کے لئے نوڈ ڈاٹ جے ایس سرور موجود نہیں ہے تو ، اسکاٹ جہل نے ڈرائیو ان نامی ایک آسان ورژن بنایا ہے جو بنیادی طور پر اسی طرح کام کرتا ہے ، لیکن پی ایچ پی ، اپاچی ، اور ایک ایچ ٹی ٹیکس فائل کا استعمال کرتے ہوئے۔
47. ایڈوب شیڈو
ایڈوب اس ریموٹ ڈیبگنگ ٹول کے ذریعہ ویب ٹکنالوجی میں آگے بڑھ رہے ہیں۔ میک یا ونڈوز پر شیڈو اور کروم ایکسٹینشن ، نیز اینڈروئیڈ یا آئی فون پر شیڈو کلائنٹ انسٹال کریں ، اور آپ بہت سارے مختلف آلات کے مابین ویب صفحات کا اشتراک کرسکتے ہیں۔
48. اوپیرا موبائل ایمولیٹر + ریموٹ ڈیبگ
موبائل پیجز کو ڈیبگ کرنے کا ایک آسان طریقہ یہ ہے کہ اوپیرا اور اوپیرا موبائل ایمولیٹر انسٹال کریں اور دونوں کو ان کے ریموٹ ڈیبگ آپشن سے جوڑیں۔ سیٹ اپ کرنے کے لئے آسان اور تیز ، اور ویب کٹ سے زیادہ پر جانچ کرنے کا اضافی فائدہ ہے۔
مزید پریرتا
اس بارے میں خیال حاصل کرنا چاہتے ہیں کہ دوسرے اپنے ڈیزائن کو کس طرح ذمہ دار بنارہے ہیں؟
49. MediaQueri.es
اگر آپ نے پہلے ہی اسے نہیں دیکھا ہے تو ، میڈیاکویری سائٹ پر سائٹوں کی ایک بڑھتی ہوئی تعداد موجود ہے جو جوابی پہلو کو عبور کرچکی ہیں۔
50.RWD
ایتھن مارکوٹے نے ایک ٹویٹر اکاؤنٹ چلایا جو RWD کی دنیا سے تازہ ترین خبروں ، اوزاروں اور نمائشوں کو لے کر آتا ہے۔
ڈینس جیکب ایک اسپیکر ، مصنف ، ویب ڈیزائن ٹرینر اور تخلیقی صلاحیتوں کے مباحثہ نگار ہونے کو پسند کرتے ہیں ، جبکہ پیٹر گیسٹن The Book of CSS3 کے مصنف ہیں اور ایک تجربہ کار ویب ڈویلپر ہیں جو بروکن لنکس پر بلاگ کرتے ہیں۔
پسند آیا؟ یہ پڑھیں!
- موبائل ویب سائٹ بنانے کے ل Pro پرو ٹپس
- اعلی سی ایس ایس اور جاوا اسکرپٹ تکنیک
- کس طرح ایک اپلی کیشن بنانے کے لئے
- ڈیزائنرز کے لئے بہترین مفت ویب فونٹس
- دریافت کریں کہ اگست کی حقیقت کے لئے آگے کیا ہے
- مفت ٹیکسٹچر ڈاؤن لوڈ کریں: اعلی ریزولوشن اور اب استعمال کے لئے تیار ہے
