أصبح تصميم الويب سريع الاستجابة عبارة عن كلمة طافرة قريبة من كل مكان على الويب. جرب البحث عن #rwd على Twitter للعثور على محتوى متساوٍ للأجزاء ورسائل غير مرغوب فيها على Twitter. هذه مرحلة شائعة في نضج فكرة جديدة. أتذكر عندما كان AJAX كل الغضب. تم دفع المصطلح إلى الأرض. الآن ، قليل من الناس يتحدثون عن AJAX لكن المكتبات مثل jQuery يتم احتضانها بالكامل في سير عمل المطور.
يبدو أن هذا يعكس ما يحدث لتصميم الويب المتجاوب. هذا المصطلح في كل مكان. صديق لي هو في مجلة النشر ، ذهبت إلى مؤتمر في الآونة الأخيرة ، وكان محررا لمجلة جديدة معروفة الحديث عن الاتجاهات القادمة وذكر تصميم الويب الاستجابة. قد لا يكون المحررون محترفي الويب ، لكنهم يعرفون الكلمات الطنانة.
مع اكتساب تصميم الويب سريع الاستجابة ، تغيرت الطريقة التي نبني بها مواقع الويب. عندما ينتقل المصطلح من الكلمة الطنانة إلى جزء مشترك من كل مشروع تصميم مواقع ويب ، يجب أن تتغير الطريقة التي نعمل بها كمحترفين على الويب. مع وضع هذا في الاعتبار ، نحن بحاجة إلى وضع بعض القواعد الأساسية الجديدة لكيفية عملنا.
عندما يخبرك أحد الأشخاص "بالتحقق من هذا الموقع المتجاوب" ، ما هو أول شيء تفعله؟ ربما يمكنك تحجيم النافذة لمعرفة كيف يتغير الشكل. ربما لن أفتحه في هاتفي والجهاز اللوحي وأبدأ في تغيير الاتجاهات أو بدء اختبارات سرعة الصفحة. أنا حجم المتصفح والانتقال مع يومي. هذه هي تجربتنا كمصممين ومطورين ، ولكن ليس كمستخدمين. عندما أزور موقعًا كمستخدم ، ليس لدي أي صبر. أنا لا أهتم إذا كان الموقع يسحق بشكل جيد. أنا فقط أريد الشيء الذي أريده
"Squishy" هو مقياس خطي لموقع ويب. هل ينتقل الموقع من نحيل إلى دهون؟ بدلاً من التدرج الخطي ، يجب أن يركز تصميم الويب سريع الاستجابة على إنشاء موقع أساسي وتحميله تدريجيًا من هناك ، استنادًا إلى القدرات. تخيل موقعًا كان لابد من إنشاءه لهاتف محمول صغير يعمل على IE7 على شبكة EDGE. يجب أن يكون هذا الموقع الأساسي الخاص بك ومن ثم رفع مستوى بناء على حجم الشاشة وقدراتها.
تصميم الويب سريع الاستجابة معقد. هذا فقط كيف هي الامور. أتمنى لو كان هناك شيء يمكنني أن أخبرك به لتسهيل الأمر ، لكن ليس هناك شيء. استجاب معظم الناس لتصميم الويب المتجاوب عن طريق إضافة شيء إلى سير العمل ، سواء كان ذلك منتجًا جديدًا أو مجرد الانتقال إلى مطور ويسأل عما إذا كان تصميمه سيعمل بشكل متجاوب.
لدي صديق يعمل على موقع سريع الاستجابة للعميل. انها بناء الموقع في فوتوشوب في حجم سطح المكتب. بعد بعض النماذج بالأحجام الطبيعية في بعض الصفحات ، أرادت إظهار الشكل الذي سيبدو عليه الموقع في الجهاز اللوحي والهاتف الذكي ، لذلك فقد قامت بذلك أيضًا نماذج بالأحجام الطبيعية. بعد تقديمها للعميل ، حصلت على بعض التعديلات الإبداعية. هناك حوالي 50 ملف PSD لهذا الموقع في هذه المرحلة. يأخذها بضعة أيام لمراجعة التنسيقات.
ستؤدي محاولة إضافة تصميمات جديدة فقط إلى عملية تستغرق وقتًا طويلاً وغير متناسقة. واحدة من أفضل الطرق لحل هذه المشكلة هي عن طريق تصميم النماذج الأولية الخاصة بك وعرضها على العميل الخاص بك. يمنحك ذلك إمكانية التوصيل للتحدث مباشرة إلى تخطيط الموقع دون الحديث عن التصميم في نفس الوقت. مؤسسة ZURB هي أداة رائعة لبناء نماذج أولية بسرعة.
ببساطة ، لن تكون إضافة نماذج أولية إلى سير العمل كافية. لكي تنجح في إنشاء مواقع سريعة الاستجابة ، تحتاج إلى ضبط ، الأمر الذي يقودنا إلى القاعدة التالية.
عندما بدأت في إنشاء مواقع الويب لأول مرة ، استخدمت اثنين من الأدوات ، وهما Photoshop و GoLive. الآن لدي ستة برامج على الأقل أحتاجها بشكل كامل من أجل بناء موقع. ما زلت أستخدم فوتوشوب لإنشاء عناصر رسومية ، لكنني أقوم بتصميم معظمها في المتصفح باستخدام Sublime Text 2 وأستخدم أدوات مطور Safari لفحص العناصر الموجودة على نظام iOS الخاص بي 6. كما أستخدم Codekit لتجميع CSS الخاص بي والمعالج مسبقًا للتحكم في الإصدار في جيت.
تصميم الويب السريع الاستجابة يعني أيضًا تغيير طريقة تصميمك. بدلا من وضع صفحة كاملة في Photoshop ، وأنا استخدم Samantha Warren's Style Tiles لتصميم التصميم المرئي. من خلال تصميم عناصر الواجهة المرئية والعلامة التجارية الخاصة بالموقع خارج تخطيط فعلي ، يمكنك الاتصال بالتصميم مباشرةً ودمجه مع التخطيط من النموذج الأولي لإنشاء موقعك المتجاوب في المستعرض.
إن المعالجات التمهيدية لـ CSS هي أيضًا مساعدة كبيرة في أي سير عمل سريع الاستجابة. وببساطة ، يمكن استخدام المعالجات التمهيدية لفك تشابك بعض التعقيدات في بناء الموقع وتخفيف الكثير من التكرار الذي يرث للعمل في CSS. أنا شخصياً أفضل SCSS ، لكن LESS بديل أفضل للبعض لأنه يحتوي على حاجز دخول أقل ولديه وثائق أفضل.
يجب الوصول إلى [الويب] من أي نوع من الأجهزة التي يمكنها الاتصال بالإنترنت: ثابتة أو متحركة أو شاشة صغيرة أو كبيرة. - تيم برنرز - لي
HTML و CSS مستجيبان بطبيعته. من بداية HTML ، كان الهدف من الشبكة أن تكون مرنة بدرجة كافية للعمل على أي جهاز متصل بالإنترنت. لم نصل حتى في الوقت الذي انتقل فيه المصممون والمطورون نحو تخطيطات ثابتة تغيرت. في محاولة لفرض أبعاد ثابتة على مواقع الويب ، قمنا بتضييق نطاق الويب إلى أجهزة الكمبيوتر المكتبية.
تعد شبكة الويب المتجاوبة واحدة تلخص ما تريد قوله من طريقة قولك. خذ على سبيل المثال ، NPR في الخطوة الأخيرة إلى نموذج محتوى مدفوعة API. من خلال الانتقال إلى واجهة برمجة التطبيقات لتوفير المحتوى ، تمكنت NPR من إدارة مجموعتها من التطبيقات والمواقع بطريقة متسقة. الشيء الوحيد الذي يتغير هو طبقة التقديم.
هذا هو ما يجب أن تكون عليه الويب المتجاوب. معرفة ما يجب عليك قوله ، والسماح لك بالقول أنه مدفوع من قبل ذلك. التصميم يدور حول تلبية الحاجة بطريقة مرضية بشكل مرئي ، ولكن أيضًا يعمل على تلبية احتياجات المستخدم.
هذا هو ما تدور حول الويب المتجاوب ، وهو إنشاء مواقع الويب التي تعمل لصالح الأشخاص الذين يستخدمونها ، ولكنهم يصلون إلى المحتوى. إن جعل المواقع التي تستطيع إعادة تشكيل نفسها للشاشات الصغيرة هي مجرد البداية.
هل تبنت تصميم الويب سريع الاستجابة حتى الآن؟ ما هي القواعد للتصميم المتجاوب الذي تود إضافته؟ اسمحوا لنا أن نعرف في التعليقات.