حقا سهل الاستجابة التصميم
ليس سراً أن الكثيرين يعتقدون أن الويب المستجيب هو المستقبل. يعني إنشاء موقع سريع الاستجابة أنه قادر على التكيف مع العديد من المتصفحات والأحجام المختلفة المتوفرة. إذا كنت أرغب في التأكد من إمكانية مشاهدة موقع الويب الخاص بي الذي قمت بإنشائه على سطح المكتب على جهاز لوحي باستخدام التمرير والتصغير / التصغير في الذاكرة ، سأكون مهتمًا بإنشاء موقع سريع الاستجابة.
أحد الأسباب التي جعلت مواقع الويب المتجاوبة تحظى بشعبية ، وذلك لأنها منطقية تمامًا. إنه أرخص من إنشاء موقع إضافي أو أكثر للهواتف المحمولة والأجهزة اللوحية. كما يضمن أيضًا وجود تجربة مشاهدة متناسقة بين الأجهزة وشاشات سطح المكتب. من غير المرح زيادة حجم النافذة أو التمرير أفقيًا لرؤية موقع ويب كامل.
أثناء إنشاء تصميمات الويب المتجاوبة تصبح أسهل ، فهناك بعض الطرق لزيادة السرعة. بفضل بعض CSS و HTML ، يمكننا ترميزها مباشرة في مواقعنا. عناصر أخرى تتطلب المزيد من العمل. وفي كلتا الحالتين ، توصلنا إلى قائمة تساعدك على وضع موقعك المتجاوب مع الحد الأدنى من الجلبة والنتائج القصوى.
الإضافات jQuery
النظائر
Isotope هو مكوّن jQuery الإضافي الذي يدّعي أنه ينشئ تصميمات سحرية لا يمكن إنشاؤها بخلاف ذلك بواسطة CSS و HTML. لديه القدرة على إعادة ترتيب العناصر داخل الحاوية بحيث تتناسب معها أثناء تغيير حجمها. يمكنك أيضا استخدام Isotope لتصفية وفرز العناصر حسب الفئات ومثل.
Breakpoints.js
تم إجراء Breakpoint مع المطورين والمصممين في الاعتبار. إنه ملحق يتيح لك إنشاء نقاط توقف لأحجام مختلفة من المتصفحات. عندما يتم تغيير حجم متصفحك إلى واحد من تلك الأحجام ، فإن العناصر تكون قادرة على ملاءمتها في الشاشة.
FitText.js
هذا هو أحد المكونات الإضافية المفضلة لـ jQuery لأنه مخصص للخطوط. في كثير من الأحيان في تصميم الويب المتجاوب ، لا يأخذ الأشخاص في الاعتبار أن العناوين الرئيسية يجب أن تكون متجاوبة بدلاً من أن تضغط في مساحة معينة. FitText يسمح لك بفعل ذلك ، ولكن تذكر أن تستخدمه فقط للعناوين!
Response.js
إذا كنت تحب فكرة Breakpoint.js وتريد المزيد من التخصيص ، فإن Response.js هي الحل. إنه أمر رائع حقًا لأولئك الذين يعرفون jQuery أفضل من CSS و HTML ويحتاجون إلى إنشاء مواقع ويب سريعة الاستجابة. تستخدم نقاط التوقف الخاصة بك ، ولكن هناك الكثير من التخصيص ، مثل حجم الجهاز وحصص البكسل والقدرة على تحميل مصادر مختلفة لأحجام مختلفة.
TinyNav.js
TinyNav هو ملحق jQuery خفيف الوزن يسمح لك بتغيير أي قائمة من القوائم باستخدام القوائم لتحويلها إلى قوائم منسدلة عندما يتم تغيير حجم المتصفح. يمكنك تحديد الأحجام بالإضافة إلى القوائم التي تتغير. ليس هذا واسع في الوظيفة ، لكنه فعال جدا على ما يفعل.
الأطر والأنظمة الشعبية
نظام الشبكة المستجيبة
يدعي هذا النظام أنه لا يمكن أن يكون نموذجًا تقريبيًا أو إطارًا ، بل مجرد نظام لجعل تصميماتك مستجيبة. يبدو أنها واحدة من أكثرها مرونة لأنها لا تقيدك بحجم معين أو بشبكة معينة. إنهم يستخدمون طبقات CSS مختلفة قادرة على الطفو وإنشاء أعمدة خاصة بهم.
نظام الشبكة الذهبية
GGS هو أيضًا نظام وليس "إطارًا". إنهم يحبون أن يشيروا إلى أنفسهم كمنطلقين أو مبادئ توجيهية لأولئك الذين يرغبون في استخدام كمية معينة من الشبكات في تصميم الويب الخاص بهم. يتم إعطاؤك 18 colums على الشاشة ، ولكن 16 لاستخدامها في التصميم الخاص بك. تقوم بتكوين العرض الخاص بك والمزاريب لاستخدامها والانتقال بشكل أساسي من هناك.
1140 نظام الشبكة
لفترة من الوقت ، كان العديد من المصممين يستخدمون تصميمات الويب التي كانت بعرض 960 بكسل. ثم أصبح ذلك صغيرا وصعدوا. الآن يتم تطوير العديد من التصاميم باستخدام عرض 1140 بكسل. يتيح لك نظام الشبكة ذو 1140 إنشاء 12 عمودًا لاستخدامها في تصميم مواقع ويب عريض.
التغريد Bootstrap
Bootstrap هو واحد من أكثر الأطر المتاحة شعبية. إنه إطار عمل شبكي مكون من 12 إطارًا جعل من نفسه مستعرضًا قابلاً للاستخدام (بما في ذلك Internet Explorer 7) ويمكن استخدامه بشكل مستجيب في الأجهزة المحمولة. يأتي مع العديد من مكونات التصميم ، والطباعة ، وجافا سكريبت لاستخدام وإنشاء مواقع أنيقة وبديهية.
SimpleGrid
يأخذ SimpleGrid فكرة الشبكات ويبسّطها. مع معظم أنظمة الشبكة والأطر ، لديك هذه الفئات غير معروف والأعمدة غير معروف. تحتوي الشبكة البسيطة على فئات تحدد الأعمدة أولاً والأوسط والأخير. بالإضافة إلى ذلك ، يمكنك إضافة "فتحات" مختلفة إلى الأعمدة لجعلها تبدو وكأنها أكثر من الأعمدة. إنه إطار بسيط ومباشر.
أدوات استجابة أخرى
تصميم صفحات الويب سريع الاستجابة
مثل الكثير من المصممين أو المطورين ، ربما يمكنك رسم تصميماتك قبل البدء في صنعها. نأمل أن تفعل. إذا لم يكن الأمر كذلك ، فربما يجب أن تبدأ باستخدام أوراق رسم RWD هذه. أنها تأتي مع جهاز اختلاف وأحجام سطح المكتب عليها بحيث يمكنك تخطيط كل شيء.
تصميم مستجيب كروكي
إذا كنت تحب فكرة الرسم على الورق ، ولكنك ترغب في جمع كل رسومات الشعار المبتكرة ، يمكنك التفكير في الحصول على كراسة الرسم التصميمية سريعة الاستجابة. لأنه يأتي مع 50 صفحة ، دوامة مع أحجام الشاشة المختلفة في كل صفحة. لقد أنجزت جميع الشبكات والرياضيات من أجلك ، لذا فهذه أداة رائعة للمبتدئين والخبراء في التصميم المتجاوب.
بلاط ستايل
هذا هو مورد صغير لطيف لمصممي الويب سواء كانوا يبحثون عن شيء للتصميم الاستجابة أم لا. إنها PSD تسمح لك بالحصول على جوهر موقع الويب عن طريق إضافة العناوين (الطباعة) والشعارات والألوان والعناصر الأخرى. إن السبب في أن هذا يعمل من أجل تصميم الويب سريع الاستجابة لأنه لا يتضمن أي أبعاد ، مجرد فكرة رقمية بدون قيود.
حاسبة مستجيبة
هناك الكثير من الرياضيات تشارك في إنشاء تصميمات متجاوبة مثالية للبيكسل. من الضروري أن تكون الرياضيات صحيحة أيضًا ، لأنك ستتعامل مع نسب مختلفة ، وعرض وأحجام المتصفح. للمساعدة ، إليك الآلة الحاسبة التي تمنحك الرياضيات الصحيحة و CSS لتتماشى معها.
استنتاج
من الضروري أن نلاحظ ما تفعله الويب سريع الاستجابة. سيحتاج العديد من العملاء إلى إتاحة مواقعهم لمجموعة متنوعة من الأجهزة ، وهو أكثر فعالية من حيث التكلفة لإنشاء مواقع سريعة الاستجابة. بالإضافة إلى ذلك ، فإن معظم أطر العمل والموارد الأخرى للتصميم المتجاوب تساعد حقًا في إنشاء مواقع ويب قياسية منظمة وعالية الجودة.
ما هي الطرق المفضلة لديك لبدء التصاميم سريعة الاستجابة؟ هل فاتنا موردًا تعتمد عليه؟ اسمحوا لنا أن نعرف في التعليقات.