50 مفيدة أدوات تصميم مواقع الإنترنت تستجيب للمصممين

هذه المقالة هي جزء من موقعنا "سلسلة تصميم الويب المستجيب" - يتكون من الأدوات والموارد والبرامج التعليمية لمساعدتك في إنشاء مواقع الويب للمستخدمين من جميع المنصات. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

خلال الأيام القليلة الماضية ، أظهرنا لك بعضًا من أفضل مظاهر WordPress و Joomla التي يمكنك تنزيلها واستخدامها على موقعك. اليوم ، سوف نقدم لك الأدوات. مزيج من الأطر والخدمات والبرامج النصية القابلة للتنزيل ، نعتقد أنها ستكون مساعدة كبيرة عندما يتعلق الأمر بتطوير الويب استجابة.

لتسهيل الانتقال إلى قائمة الأدوات بأكملها ، قمنا بتصنيفها إلى الأقسام التالية:

• الشبكة والأطر
• رسم صفائح و wireframes
• جافا سكريبت و jQuery الإضافات
• اختبار ومعاينة
• المتزلجون
• الآخرين

الشبكة والأطر

[العودة إلى الأعلى]

Columnal

Columnal هو مشروع Pulp + Pixels ، تم استعارته من cssgrid.net بينما تم استلهام بعض الكودات من 960.gs. يساعدك Columnal كثيرًا في تصميم الويب المتجاوب الخاص بك ، من خلال جعل شبكاتك مرنة لتغييرها ديناميكيًا عند تغيير حجم نافذة المتصفح.

هيكل عظمي

الهيكل العظمي عبارة عن إطار CSS بسيط وقوي ، والذي يحبه المطورين والمصممين بشكل أساسي بسبب بساطته وفعاليته. لا يوجد رافع ثقيل مع Javascript هنا ، فقط CSS جيد ونقي مع وثائق نظيفة.

LessFramework 4

إطار أقل هو إطار عمل أو أكثر باسم منشئه. إنه نظام شبكة CSS متكيف يعتمد على استخدام استعلامات وسائط CSS مضمنة ، مما يجعل تطوير مواقع الويب المستجيبة أسهل بكثير.

نظام الشبكة الدلالية

يستخدم نظام الشبكة الدلالية لتصميم تخطيطات الشبكة المستجيبة. ويستخدم امتدادات CSS سابقة المعالجة مثل LESS أو SCSS أو Stylus لتوفير أقصى قدر من الكفاءة. يمكنك تحديد عرض الأعمدة والمزاريج واختيار عدد الأعمدة والتبديل بين البكسل والنسب المئوية.

نظام الشبكة الذهبية

نظام الشبكة الذهبية Golden Grid System هو نظام شبكة السوائل يعمل كنقطة انطلاق لتصميم الويب المستجيب. إنها تمكن الموقع من تقديم صفحات جيدة المظهر تتراوح من 240 إلى 2560 بكسل.

320 وما فوق

320 و Up عبارة عن أداة تحليل استعلامات وسائط CSS ، والتي ستكون بمثابة قالب البداية للتصميم المتجاوب الخاص بك. يتبع منهجًا معكوسًا تمامًا عن العديد من المراجل الأخرى المتاحة.

Inuit.css

Inuit.css هو إطار عمل CSS ، وهو سهل الاستخدام للغاية ، حتى بالنسبة للمبتدئين. لديه نهج الحد الأدنى ، وبالتالي تحتاج إلى التعامل مع الأشياء التي تحتاج إليها فقط ، ولكن إذا لزم الأمر ، يمكن أيضا أن تمتد مع عدد قليل من الإضافات المتاحة.

Gridless

Gridless عبارة عن غلاية لإنشاء مواقع متجاوبة ومتفاعلة مع الطباعة الجميلة. تركز هذه الأداة على التطوير التدريجي للمشروع ، وتعمل كنقطة انطلاق لأي تصميم.

1140 CSS Grid

1140 CSS Grid عبارة عن نظام رائع لشبكة CSS تم تصميمه بواسطة مصمم Melbourne Andy Taylor ، والذي يتيح تصميمك ملائماً تمامًا عند 1140 بكسل للشاشات الكبيرة وسيتكيف تصميم الموائع الخاص بك بسلاسة مع دقة أصغر أخرى مع القليل من العمل الإضافي.

1KBCSSGrid

1KB CSS Grid التي صممها Tyler Tate ، عبارة عن مولد CSS Grid بسيط وخفيف الوزن. سيتيح لك تعيين عدد الأعمدة وعرض العمود وعرض الحضيض ، ويمكنك الحصول على CSS قابل للتنزيل لشبكة مواقع الويب الخاصة بك.

التمهيد

يعد Bootstrap ، الذي تم إنشاؤه وصيانته ، بواسطة Mark Otto و Jacob Thornton على Twitter ، مجموعة ممتازة من عناصر واجهة المستخدم ، والتخطيطات ، وأدوات جافا سكريبت ، وهي متاحة مجانًا لك للتنزيل والاستخدام في مشاريع تصميم الويب الخاصة بك.

حاسبة شبكة السوائل

ستساعدك هذه الأداة البسيطة على الحصول بسرعة على CSS لتصميم موقع شبكة السوائل لديك.

شبكات السوائل

Fluid Grid عبارة عن إطار شبكة سائل بسيط ولكنه مفيد ، يقوم بإنشاء تخطيطات مستجيبة تستند إلى أعمدة 6 أو 7 أو 8 أو 9 أو 10 أو 12 أو 16.

Flurid

Flurid عبارة عن إطار شبكة CSS عبر متصفح بسيط ومفيد للغاية مع ما يصل إلى 16 عمودًا. وعلاوة على ذلك ، فإنه لا يخفي البيكسلات في الهوامش.

Gridset

Gridset هي أداة لإنشاء شبكات من أي نوع ، مثل ، عمودي ، غير متماثل ، ثابت ، نسبة ، مركب ، استجابة وأكثر من ذلك. لا تزال هذه الأداة التي وضعها مارك بولتون في مرحلة تجريبية ، لكنها أثبتت أنها واعدة. وهل ذكرت أن استخدامه بسيط مثل تضمين رابط.

Gridpak

Gridpak هو منشئ الشبكة سريعة الاستجابة على الإنترنت ، حيث يمكن تغيير عدد الأعمدة ، والحشو ، والمزاريب ، ويمكن إضافة نقاط التوقف المخصصة. يتم إنشاء CSS بواسطة الأداة وجعلها جاهزة للتنزيل. كما يوفر قوالب شبكة PNG ، والتي يمكن استخدامها لتصميم أغراض في Photoshop.

SimpleGrid

يعد SimpleGrid ، الذي طوره مايكل كون ، إطار CSS بسيطًا ومباشرًا لإنشاء تخطيطات لانهائية قائمة على الشبكة. بشكل افتراضي ، يتم إعداد SimpleGrid لأربعة نطاقات مختلفة من أحجام الشاشة.

سوزي

Susy by Oddbird ، يشبه في العمل لنظام الشبكة الدلالية. لا يستخدم أي علامات إضافية أو أي فصول خاصة أخرى ، ولكنه يستهدف فقط مستخدمي Saas وملحق Compass.

شبكة السوائل الصغيرة

Tiny Fluid Grid هو تطبيق ويب رائع ، يمكن أن يساعدك على تحديد نظام الشبكة لموقع الويب الخاص بك بطريقة تفاعلية. يمكنك تعيين عدد الأعمدة ونسبة الحضيض والحد الأدنى والحد الأقصى لعرض مخطط موقع الويب الخاص بك ، ويمكنك الحصول على CSS قابل للتنزيل له.

نظام الشبكة المتغير

تم تصميم وتطوير نظام الشبكة المتغير بواسطة SprySoft ويستند إلى نظام الشبكة 960. يسمح للمطورين والمصممين بإنشاء الشبكة المخصصة ثم تنزيل ملف CSS المرافق بناءً على تلك الشبكة.

رسم صفائح و wireframes

[العودة إلى الأعلى]

استجابة ورقة تصميم صفحات الويب

هذه الأداة مفيدة في تحديد مواضع العناصر المختلفة في تخطيط موقع الويب الخاص بك عبر أجهزة مختلفة. بمساعدة هذا الجهاز ، يمكنك تكوين فكرة عن مكان وضع العناصر الضرورية لموقع ويب لأحجام ودرجات دقة الشاشة المختلفة.

Wireframes استجابة

Responsive Wireframes هي أداة تجريبية تم إنشاؤها بواسطة James Mellers من Adobe. تم تصميمه باستخدام HTML و CSS فقط (لم يتم استخدام أي صور أو JS) والتي يمكنك استخدامها لتصور كيف يبدو التصميم المتجاوب على المتصفحات الفعلية لمختلف أجهزة سطح المكتب والأجهزة المحمولة.

StyleTiles

تمنحك Style Tiles طريقة لتطوير فكرة عن كيفية ظهور موقع الويب ، بغض النظر عن الأنماط المعقدة التي تدخل حيز التنفيذ. يمنحك الفرصة لسير عمل تصميم استجابة مثالية وكذلك القدرة على دمج التقيمات العملاء.

جافا سكريبت و jQuery الإضافات

[العودة إلى الأعلى]

Adapt.Js

Adapt.js هو حل Javascript وبديل ممتاز لاستعلامات وسائط CSS. يعد استخدام أسلوبmedia ممارسة جيدة ، لكن هذا لا يعمل مع جميع المتصفحات. أصدر ناثان سميث ، مبتكر نظام 960 Grid System ، Adapt.js ، مكتبة جافا سكريبت خفيفة الوزن للغاية للتغلب على هذه المشكلة.

النظائر

Isotope عبارة عن مكون إضافي مسج مذهلة ، والذي يثبت أنه مفيد جدًا أثناء تصميم تصميم مستجيب. لا يساعد فقط في إعادة ترتيب عناصر الصفحة عندما يتم تغيير حجم نافذة المتصفح أو يكون حجم الشاشة أصغر ، ولكنه يساعد أيضًا في تصفية تلك العناصر.

ماسونية

الماسوني هو مكون إضافي مسج ممتاز ، والذي يستخدم لإنشاء تخطيطات ديناميكية وقابلة للتكيف. يساعد هذا المكون الإضافي في إعادة ترتيب العناصر في تصميمك المتجاوب ، بحيث يمكن احتواؤها بشكل أفضل في الأماكن المفتوحة على الشبكة.

Respond.js

Respond.js عبارة عن برنامج نصي سريع وخفيف الوزن (3 كيلو بايت مصغر و 1 كيلوبايت gzipped) ، هدفه الرئيسي هو تمكين تصميم الويب المتجاوب في تلك التي لا تدعم استعلامات الوسائط CSS3 ، مثل متصفحات IE.

TinyNav.js

TinyNav.js هو مكون إضافي مسج صغير وخفيف الوزن ، فقط 362 بايت ، يحول قوائم التنقل الكبيرة إلى قوائم منسدلة صغيرة للشاشات الأصغر.

ووكمارك مسج البرنامج المساعد

Wookmark هو مكون إضافي jQuery يكتشف حجم نافذة المتصفح ويرتب تلقائيًا عناصر الصفحة في أعمدة. يمكنك أيضًا مشاهدة معاينة مباشرة في أسفل الصفحة نفسها.

اختبار ومعاينة

[العودة إلى الأعلى]

ProtoFluid

ProtoFluid عبارة عن أداة للنماذج الأولية المستندة إلى الويب والتي تتيح لك اختبار النماذج الأولية لموقع الويب الخاص بك بأحجام وشاشات مختلفة. فقط اكتب عنوان URL ، حدد الجهاز (أو أي أبعاد مخصصة) واضغط على launch. نظرًا لأنها أداة قائمة على الويب ، فإنها تتيح لك أيضًا استخدام ملحقات أخرى مثل FireBug.

Responsive.Is

يتم إنشاء Respive.Is بواسطة TypeCast أداة محاكي مستعرض أخرى ، والتي يمكنك استخدامها لاختبار تصميم استجابة. ما عليك سوى كتابة عنوان URL ، وسيغير حجمه تلقائيًا وفقًا للجهاز الذي تختاره.

Responsivepx.Com

RespivePx هي أداة رائعة لاختبار تصميم موقع الويب الخاص بك استجابة. الميزة الرئيسية التي تميزها عن الآخرين ، هي قدرتها على تغيير حجم بكسل موقع الويب. تتيح لك هذه الميزة الرائعة تحديد نقاط التوقف وأيضًا اختبار كيفية عمل استعلامات وسائط CSS في موقعك.

استجابة أداة اختبار تصميم الويب

أداة اختبار رهيبة ، يمكن أن تسمح لك بمشاهدة موقعك الإلكتروني المتجاوب بأحجام مختلفة للشاشة في وقت واحد في شاشة واحدة ، أثناء إنشائها أو تصميمها. تعجبني هذه الأداة بشكل أساسي لأنها تُظهر جميع دقة الشاشة جنبًا إلى جنب مما يسهل تصحيح الأخطاء.

ReView.Js

ReView هو نظام viewport ديناميكي ، تم تطويره في جافا سكريبت خالص ، مما يمنحك تجربة مشاهدة رائعة لتصميم الويب استجابة.

Screenfly

يعد Screenfly by QuirkTools أداة رائعة ستمكنك من مشاهدة موقع الويب الخاص بك سريع الاستجابة في مجموعة متنوعة من الأجهزة: سطح المكتب والكمبيوتر اللوحي والجوال والتلفزيون. كما أن لديها خيارات لتمكين أو تعطيل التمرير أو حتى لتدوير العرض.

Screenqueri.es

Screenqueri.es هي أداة اختبار تصميم مثالية استجابة بكسل. ما عليك سوى إدخال أي عنوان موقع ويب تريد التحقق منه ، وستعرض هذه الأداة التي تؤديها موقع الويب بأحجام مختلفة للشاشة وفقًا للجهاز. يمكنك أيضًا تغيير حجم حجم البكسل بكسل يدويًا لتحديد نقاط التوقف.

المستجيب

اختبر موقعك في أجهزة مختلفة من iPhone و iPad ، إلى Kindle و Android على المستجيب. كما أنه يعرض موقعك في وضع عمودي وأفقي. أحب هذه الأداة أكثر من ذلك بكثير بسبب الخطوط العريضة للأجهزة المعروضة على الصفحة ، والتي تجلب المزيد من المعنى للعملية بأكملها.

المتزلجون

[العودة إلى الأعلى]

توت بري

إن Blueberry عبارة عن منزلق صورة jQuery مفتوح المصدر ومفتوح المصدر ، وهو مكتوب للعمل بالتحديد على تخطيطات السوائل أو المستجيبة.

Elastislide

تريد دائري من شأنه أن يضبط تلقائيا إلى حجم الشاشة عندما يتم تغيير حجم نافذة المتصفح أو عندما تكون في شاشة أصغر؟ Elastislide هو البرنامج المساعد jQuery الأنسب لاحتياجاتك.

استجابة CSS3 المتزلج

هذا منزلق CSS3 سريع الاستجابة يمكن أن يتكيف مع أي حجم للشاشة ودقة الشاشة بسهولة. والشيء الجميل في هذا المنزلق هو أن الأسهم تذهب داخل الصندوق عندما يكون حجم شاشة الجهاز صغيرًا بدرجة كافية. لا حاجة جافا سكريبت.

ResponsiveSlides.Js

إن RespiveSlides.Js هو مكون إضافي بسيط للغاية وخفيف للغاية (فقط 1 كيلو بايت) يعمل على إنشاء شريط تمرير استجابة باستخدام قوائم غير مرتبة. إنه يعمل على مجموعة واسعة من المتصفحات ، وأيضًا على IE6 وما فوق.

الآخرين

[العودة إلى الأعلى]

الصور التكيفية

Adaptive Images هي أداة عبر الإنترنت لتصميم الويب المتجاوب ، الذي يكتشف حجم شاشة الزوار ويقوم بإنشاء وتخزين وتوصيل الصور التي تم تغيير حجمها ، استنادًا إلى حجم الشاشة ودقة.

FitText.Js

FitText.js هي أداة جافا سكريبت صغيرة ، تتيح تغيير حجم النص والعناوين تلقائيًا عند تغيير حجم نافذة المتصفح. لا مزيد من المخاوف من عدم تطابق حجم النص مع هذه الأداة على متن الطائرة.

FitVid.Js

هل تريد إعادة قياس مقاطع الفيديو المضمّنة عند تغيير حجم نافذة المتصفح أو إذا كان حجم الجهاز أصغر؟ FitVid.Js يمكن أن تساعدك على تحقيق هذا. إنه مكون إضافي بسيط وسهل الاستخدام jQuery يستخدم لتحقيق مقاطع الفيديو المدمجة ذات السوائل.

صور الشبكية

يُعد Retina Images حلاً رائعًا لجافا سكريبت ، حيث يعمل تلقائيًا على عرض صور أكبر وعالية الدقة @ 2X عند عرضها على شاشة شبكية العين. كل ما عليك القيام به هو وضع نسخة عالية الدقة من كل صورة واحدة ، وسوف تدير الباقي.

شبكة صور مستجيبة غير ملحومة

تعرض شبكة الصور المستجيبة غير الملحومة الصور من الحافة إلى الحافة على المستعرض ، دون أي ثغرات بين الصور. يتم تجانب الصور وتتدفق من اليسار إلى اليمين عبر الصفحة في أعمدة. يتم ضبط عدد الأعمدة وفقًا لتغيير حجم نافذة المتصفح.

SlabText

SlabText هو مكون إضافي أو أداة مسج بواسطة Brian McAllister استنادًا إلى خوارزمية slabText ، التي تقسم العناوين إلى صفوف قبل تغيير حجم كل صف لملء المساحة المتاحة. انها تشبه الى حد بعيد البرنامج المساعد FitText.Js في العمل.

زورب - تستجيب

هل سبق لك أن تساءلت عن كيفية التعامل مع جداول البيانات الكبيرة في تصميم متجاوب؟ Zurb ، يمنحك التحرير والسرد CSS / JS الإجابة ؛ يستغرق جداول البيانات ويقوم بتعديلها حتى لا تقوم بتقسيم التخطيط المتجاوب على أجهزة الشاشة الصغيرة.

Categorizr

Categorizr هو برنامج نصي PHP صغير جدًا ، ويوفر لزوارك تجربة ويب أكثر استهدافًا. سيساعدك ذلك على تقديم تصميمات خاصة بالجهاز للكمبيوتر اللوحي أو التلفزيون أو المحمول أو سطح المكتب.

وسائل الإعلام الاستعلام المرجعية

يوضح لك Media Query Bookmarklet حجم منفذ العرض الحالي وأي استعلام وسائط تم تشغيله للتو.

حاسبة تستجيب

الحاسبة المستجيبة هي أداة بسيطة جدًا عبر الإنترنت يمكن أن تساعدك في تحويل وحدات البكسل إلى نسب مئوية أثناء تصميم موقع الويب المتجاوب.

حتى الاسبوع المقبل

في الأسبوع الثاني من هذه السلسلة ، سنقوم بتفكيرك في الدروس التعليمية التي ستدفعك حقًا إلى تصميم مواقع الويب المستجيبة (RWD).

لا تفوت.