تصميم الويب سريع الاستجابة ، بطبيعته ، لا يلاحظه أحد لمن يستهلك المحتوى عبر الإنترنت. لذلك عندما يطلب شخص ما إنشاء موقع ويب جديد ، فإنه غالبًا ما يكون غير مدرك تمامًا للمفهوم ، على الرغم من تجربته على أساس يومي. ومع ذلك ، يتم الآن الاعتراف بتصميم مواقع الويب المتجاوب كممارسة قياسية في جميع أنحاء الصناعة.
لقد أدى إنشاء مواقع الويب المتجاوبة إلى تغيير عملياتنا ، بدءًا من إنشاء نماذج بالأحجام الطبيعية للصفحات الكاملة ، إلى إنشاء مكتبات تضم مكونات وتصميمات قابلة لإعادة الاستخدام.
التخطيط يعتمد على المحتوى والأساليب تعتمد على العلامة التجارية
في الآونة الأخيرة ، اتصل بنا عميل حالي لإعادة تصميم موقع الويب الخاص به بشكل متجاوب. لقد عملنا معهم سابقًا باستخدام عملية شلال صلبة. بالانتقال إلى سير عمل رشيق ، تمكنا من احتضان التغيير في أي نقطة في المشروع.
وطوال هذه العملية ، التزمنا بالفلسفة القائلة بأن التصميم يعتمد على المحتوى وأن الأنماط تعتمد على العلامة التجارية.
تعمل مستندات المواصفات بشكل رائع لإدراج كل الوظائف المطلوبة في الموقع. ولكن هل هو حقا ما يحتاجه العميل؟ من الصعب جدًا تصور هذه الميزات في المكان. وبالتالي فإن النتيجة هي أن وثائق المواصفات غالباً ما تتحول إلى قوائم أمنيات منتفخة. هذا لا يساعد العميل أو المصممين أو الموقع النهائي.
بدلاً من وثائق المواصفات ، اخترنا استخدام الإطارات السلكية. تضمنت الخطوة الأولى من المشروع إنشاء إطارات سلكية لكل صفحة. قد يبدو هذا مبالغة في الإسراف ، إلا أن الإطارات السلكية أدت إلى مناقشات مبكرة حول المحتوى والميزات لكل صفحة. لقد وجدنا أن الميزات التي لم نضعها في الاعتبار من قبل قد تمت إضافتها ، بينما تمت إزالة الكثير منها.
قدمت لنا الأطر السلكية تمثيلًا مرئيًا واضحًا لكيفية تحديد أولوية المحتوى والوظيفة في كل صفحة. ثم أصبحت هذه الأطر السلكية نقطة مرجعية ، لتحل محل وثيقة المواصفات.
نصيحة أساسية: إنتاج إطارات سلكية بدلاً من وثائق المواصفات يركز كل شخص على الميزات الأساسية وأهمية المحتوى.
تدقيق الأطر السلكية يسمح لنا بتشكيل قائمة بجميع المكونات المشتركة. عبر موقع واحد ، سيكون هناك عشرات من الأقسام الصغيرة في كل صفحة متشابهة جدًا. يمكن تجميع هذه المكونات في قائمة شاملة والتي سيتم استخدامها لاحقًا.
هذه المرحلة لها ثلاث فوائد رئيسية:
نصيحة أساسية: من المهم التخطيط لمقاربة تطوير المشروع للمشروع لإنشاء قاعدة شيفرة قابلة للحفظ.
مكتبات النماذج هي مجموعة من العناصر الشائعة المستخدمة على موقع الويب. من خلال التركيز على تطوير الواجهة الأمامية على مكونات لا تعتمد على الصفحات ، يمكننا تقليل الشفرة الزائدة وتحسين التناسق.
باستخدام قائمة المكونات التي جمعناها خلال مرحلة المراجعة ، يمكننا بناء Sass لدينا في مجموعة من الملفات يمكن التحكم فيها.
لقد استخدمنا مكتبات النماذج في عدد قليل من المشاريع ، ولكننا نكافح دائمًا مع اصطلاحات التسمية ، لا سيما بنية المجلد: أين تضع الأنماط الخاصة بك لمشغل الموسيقى هذا ، أو في المكونات ، أو في الجزئيات؟
في السابق ، كنا نستخدم المصطلحات مثل الأجزاء والمكونات لتنظيم ملفات Sass الخاصة بنا. في حين أن هذه تبدو مثل اصطلاحات تسمية شرعية تماما ، فهي مفتوحة للتأويل. عندما يكون هناك العديد من المطورين الذين يعملون في مشروع ما ، يؤدي ترك قاعدة الشفرة المفتوحة للتأويل إلى CSS غير منظمة.
يوفر BEM (Block، Element، Modifier) اتفاقية مشتركة للمتابعة ، ويخلق فهماً بين مطوري الواجهة الأمامية. تركت الطريقة القديمة للمطورين الأفراد للتوصل إلى أسماء الفئات التي كانت عالية المستوى بحيث لا يمكن استخلاص أي معنى منها. لحسن الحظ كنا محظوظين برؤية براد فروست نتحدث عن مكتبته النمطية في مؤتمر مقدما في مانشستر. يقوم مختبر الأنماط بإعارة المصطلحات من الكيمياء لوصف المكونات التي تشكل المكتبة. إن استخدام الذرات والجزيئات والكائنات الحية لوصف الاختلافات بين المكونات في الصفحة يساعد على شرح المفهوم للمطورين الجدد في المشروع.
التصميم الذري هو لواجهات المستخدم: http://t.co/eEZSYeK5VF يمكنك تطبيق التصميم الذري على أي واجهة مستخدم ، مثل Instagram pic.twitter.com/BrztgtRoGU
- براد فروست (brad_frost) 10 من تموز 2015
في الطبيعة ، الذرات هي أصغر فئة (ما لم نتعمق في الكواركات والإلكترونات). في تطوير الويب ، تعد الذرات هي العناصر الأساسية في HTML. لجميع النوايا والأغراض لا يفعلون الكثير من تلقاء أنفسهم. وتشمل هذه العناوين ، والفقرات ، والمدخلات ، والأزرار ، والقوائم ... يمكنك الحصول على الفكرة.
هذه هي الطبقة التالية. في الكيمياء ، تتكون الجزيئات من ذرات ، وينطبق الشيء نفسه على بنية CSS. الجزيئات عبارة عن مكونات على موقع الويب تستخدم الذرات لتشكيلها.
مثال جيد لجزيء هو مربع البحث. يحتوي هذا على 3 ذرات: تسمية ومدخلات وزر. تبدأ طبقة الجزيء في تشكيل بعض العناصر التي يمكننا استخدامها على موقع الويب. من المهم جعل كل هذه الجزيئات قابلة للتوسع. ينبغي أن تصمم مع فكرة يمكن استخدامها في أي مكان على الموقع. هدفنا النهائي هو جعل CSS مرنة وقابلة لإعادة الاستخدام قدر الإمكان.
كما يوحي الاسم ، الكائنات الحية هي مجموعات من الجزيئات. تتضمن بعض أمثلة هذه رؤوس أو تذييل أو قائمة المنتجات.
إذا أخذنا مثال الرأس ، فسيشمل ذلك شعارًا والبحث والتنقل. تم إنشاء كل هذه بمثابة جزيئات ويتم دمجها لتشكيل كائن رأس.
هذا هو المكان الذي ينتهي التشبيه الكيمياء الحيوية. وكما يقول براد ، "ادخل إلى لغة أكثر منطقية للعملاء والناتج النهائي" . القوالب هي الغراء لموقع الويب. يجمع هذا كل الكائنات التي أنشأناها في تخطيط يمكن تطبيقها على صفحة على الموقع.
مثال يمكن أن يكون قائمة بلوق. قد يتضمن هذا القالب رأسًا وتذييلًا وقائمة بعناصر المدونة وشريط جانبي. تكون القوالب بنية بشكل عام ، وتحتوي فقط على التخطيط.
القسم الأخير هو صفحات. هذا هو المكان الذي يمكنك اختبار القوالب بالبيانات الحقيقية. الصفحات هي أمثلة محددة للقالب. هذا الجزء مهم لأنه يسمح لنا برؤية مدى نجاح الذرات والجزيئات والكائنات الحية والقوالب.
من المحتم أنه عند إنشاء موقع الويب ، سيتم تفويت بعض السيناريوهات. المثال الكلاسيكي هو العناوين الطويلة ، أو تقديم الطعام لمختلف العملات واللغات.
مفتاح الوجبات الجاهزة: أهمية اصطلاحات التسمية. يؤدي إنشاء طبقات CSS إلى إنشاء مصدر بتنسيق نظيف للعمل من صغير بقدر الإمكان.
تصميم الأنماط صعب. لا يمكنك تصميم نمط معزول مثل عنصر الأخبار ، ونتوقع أن يتناسب مع بقية الصفحة. تختلف الطريقة التي نبني بها مواقع الويب وطريقة تصميمها.
من المحتمل أن تتغير التصاميم بغض النظر عما إذا كنا سنحصل على التوقيع ... لقد أصبح التوقيع خطوة غير ذات صلة في العملية التي لا تفرض سوى الضغط على كلا الجانبين
استخدمنا Photoshop لإنشاء نماذج بالأحجام القياسية من الأسلاك مع هذه المكونات في مكانها. بمجرد أن نكون سعداء بمظهر وأسلوب التصاميم ، انتقلنا إلى عزل كل مكون. وقد سمح لنا هذا بضمان أن يكون كل مكون مرنا بما فيه الكفاية للعمل في أي مكان على الموقع.
كنا واعين للغاية لعدم الحصول على توقيع على أي عمل التصميم. يخلق تصميم التصميم حاجزًا عندما يشعر المصمم بالضغط لخلق شيء يتم ضبطه على الحجر. من المحتمل أن تتغير التصاميم بغض النظر عما إذا كنا سنحصل على الموافقة أم لا. بشكل عام ، يسعدنا استيعاب أي تغييرات في أي وقت في الجدول الزمني للمشروع. أصبح التوقيع خطوة غير ذات صلة في العملية التي تمارس الضغط فقط على كلا الجانبين لإلحاق الضرر بالعلاقة.
من المهم معرفة موعد الانتقال من Photoshop إلى التعليمات البرمجية. هذه الخطوة أقدم بكثير مما اعتدنا عليه لسببين:
بدلاً من قضاء وقت إضافي في Photoshop ، اخترنا استثمار الوقت في الشفرة. إذا كان ينبغي لنا أن نلائم أي شيء ، فيجب أن يكون الرمز ، الشيء الذي سيتم استخدامه فعليًا ويراه جميع مستخدمي موقع الويب. بالنسبة لنا ، كان Photoshop أداة لإنشاء نمط تصميم يمكن استخدامه عبر موقع الويب.
التصميم هو أكثر من ذلك بكثير حول التعاون بين كل فرد في الفريق. كانت النماذج بالأحجام الطبيعية لا تزال جزءًا مهمًا من العملية ، حيث ساعدت العميل على تصور كيف سيبدو الموقع. إذا كنا جميعًا سعداء بالاتجاه العام للتصميم ، فسننقله إلى الرمز. نادرًا ما قضينا وقتًا في الرجوع إلى الوراء وإعادة توجيه التعديلات إلى مستندات Photoshop.
Key takeaway: يعد Photoshop أداة رائعة لإنشاء مفاهيم التصميم. يعد الانتقال إلى رمز في أقرب وقت ممكن أمرًا مهمًا. الكمال في الرمز ، وليس فوتوشوب.
جمال سير العمل هذا هو وجود العديد من الأماكن لمراجعة الموقع وتحسينه.
من المهم أن نلاحظ أن هذه خطوات فضفاضة في عملية مشروعنا. إذا احتجنا إلى شيء جديد خلال المشروع ، فسنعامله بشكل عام على أنه مكون مستقل ومركب يمكن إسقاطه في موقع الويب واعتماد موضوع تصميم الموقع.
تقدم كل خطوة من هذه الخطوات نقطة يمكننا من خلالها مراجعة عملنا حتى الآن. كما يسمح لمجموعة جديدة من العيون لرؤية الأشياء من منظور مختلف.
خلال أي من هذه المراحل قد نجد أن بعض الأجزاء لا تعمل كما هو متوقع. هذا على ما يرام. في الحقيقة إنه جيد. يعتبر الإمساك بسوء الاستخدام في وقت مبكر هو المفتاح لموقع الويب الناجح. إن العودة إلى هذه الأجزاء من الموقع الإلكتروني وإضفاء السلك عليها سيجعل المشروع أفضل عندما يبدأ العمل.
نصيحة أساسية: لا تخف من العودة إلى البداية إذا كان هناك شيء يحتاج إلى تحسين. سيؤدي الإمساك بها مبكراً إلى جعل المشروع أفضل عندما يبدأ العمل.
لقد أمضينا أيامًا في العمل معًا لضمان الانتهاء من كل جزء من الموقع على مستوى عالٍ. اختبرنا أكبر عدد ممكن من السيناريوهات ، مما يضمن أن تجربة التصفح كانت متسقة.
بمجرد أن تكون البيانات في موقع الويب ، يمكننا اختبار الموقع بالكامل. غالبًا ما يكون من السهل جدًا إعداد مشروع مباشر بدون اختبار كامل. يمكننا التحقق من السرعة وسهولة التنقل والأكثر أهمية تدفق الشراء.
الجميع يذكر أبل لكونها الكمال ولكني متأكد من محاولاتهم الأولى كانت بعيدة عن الكمال. يستغرق الأمر وقتًا وتفانيًا لإجراء هذه التحسينات النهائية لإعطائنا المنتجات التي نحبها اليوم. باستخدام مختبرنا للأجهزة ، والذي يتضمن معظم الأجهزة والأنظمة الأساسية الشائعة ، تمكنا من التأكد من أن التجربة تم تحسينها على أكبر عدد ممكن من أحدث المنصات وأحجام الشاشات بقدر الإمكان.
يعد التعلم من كل مشروع أمرًا مهمًا حتى نتمكن باستمرار من تحسين العمليات التي تؤدي إلى مواقع ويب أفضل.
شهد هذا المشروع ولادة مكتبة نمط الخاصة بنا الداخلية التي تشجع على الاتساق بين المشاريع. عند العمل في إحدى الوكالات ، قد يكون لدينا عشرات المشاريع قيد التطوير في وقت واحد. القدرة على أي شخص للعمل في أي مشروع أمر مهم.
سيساعد إنشاء قاعدة يمكننا العمل عليها جميعًا في المساهمة في تحقيق هذا الهدف.
تم اعتبار أداء موقع الويب فقط في نهاية المشروع. يجب أن يكون موقع الويب سريع الاستجابة ناجحًا وسريعًا. تختلف المجموعة الضخمة من الأجهزة وقدراتها بشكل كبير من أجهزة كمبيوتر Mac الجديدة إلى الهواتف الذكية القديمة. عند إنشاء موقع ويب غني بالوسائط ، قد يكون من الصعب جدًا إدارة الأداء ، خاصة عند محاولة تحسينه بشكل رجعي.
في مؤتمر Upfront في مانشستر ، رأينا يسينيا بيريز كروز التحدث عن الأداء في كل مرحلة من مراحل المشروع ، بما في ذلك التصميم. في الإدراك المتأخر ، هذا شيء يجب علينا تنفيذه. وبوصفه فريقاً من المصممين والمطورين والمطورين الأماميين ، فإن إدارة الحجم والأداء الإجمالي (لا سيما الأداء المدرك) يجب أن تكون أولوية أكبر.
كل شيء في الصفحة يحتوي على تكلفة للأداء. يضمن تحديد الأولويات المهمة أن موقع الويب ليس سريعًا فحسب ، بل متاحًا لمزيد من الأجهزة. على بعض الأجهزة القديمة ، وجدنا أن موقع الويب لم يصطدم بالمتصفح فحسب ، بل الجهاز بأكمله. إن محاولة تسريع الموقع بأثر رجعي يعني أننا لم نتمكن من جعل الموقع أسرع مما كان يمكن أن يكون عليه.
في المرة القادمة ، سنحرص على ضمان الأداء المتأصل في كل مرحلة من مراحل العملية ، لذا لن يكون هذا الأمر متأخراً.