الأزمات الشائعة في التصميم سريع الاستجابة وكيفية التعامل معها

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

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

إذن ، هذا ما تعلمته عن التصميم لشبكة ويب سريعة الاستجابة:

تصميم لجمهورك. ليس انت.

لنفترض أنك تحاول الوصول إلى جمهور هندي إلى حد كبير من خلال موقع ويب فائق السرعة ومصمم ببراعة وتجربة مستخدم رائعة لمستخدمي الهواتف المحمولة. هناك 1.2 مليار نسمة. يجب أن تكون ضربة سريعة وفورية. الأرقام نفسها في صالحك. أو سيكونون كذلك لو كنت تعلم أن 13٪ بالكاد يمتلكون هواتف ذكية. (المصدر: Google Mobile Planet).

هذا فقط أحد الأسباب التي تجعل تعلم وفهم جمهورك أمرًا بالغ الأهمية.

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

من المعروف أن المصممين يغفلون عن من يصممون من أجله.

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

للأرقام الخاصة بالهواتف المحمولة ، استخدم Google's Mobile Planet. استفسر من عملائك عن جمهورهم.

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

يحتاج "الهيكل الشبكي" إلى قصة

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

(من المحتمل) ألا يكون تصميمك عبارة عن صفحة واحدة يظهر فيها المحتوى ولا يحدث أي شيء آخر.

لا توجد تفاعلات ولا حالات ولا رسوم متحركة أو تأثيرات: في الأساس يتم تجريد كل شيء يمكن أن يجعل موقعك ناجحًا (أو فشل ، إذا تم استخدامه دون تفكير). بينما تعتبر Style Tiles كلاسيكية لسبب وجيه (كما قال مؤسسها ، "لبدء محادثة حول التصميم") من السهل جدًا أن تكون متطورًا في شروط التصميم الحالية.

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

لا تتخلص من الأفكار فقط. هل سمعت عن رواية القصص؟

أخبر عملائك بقصة تفاعلية سريعة الاستجابة مع لا شيء سوى نموذجك الأولي وحدسك.

استخدم أدوات مثل Balsamiq و Axure و UXPin وما إلى ذلك لإنشاء نسخ مرئية لتلك "القصص". ضرب خيالهم بالكلمات ؛ أطعمها بنموذج أولي جيد الصنع.
سيعمل على تبسيط أعمال التصميم والتطوير الخاصة بك في وقت لاحق ويمنحك مسارًا محددًا إلى حد ما لتلتزم به. وكمكافأة: الانطباعات الأولى لا تزال مهمة. يظهر النموذج الأولي الجيد أنك متحمس للمشروع.

المحتوى: أولاً ومرئي وقابل للتكيف. دائماً

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

أنت تهزم الغرض الكامل للتصميم سريع الاستجابة من خلال الاضطرار إلى إخفاء المحتوى الخاص بك.

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

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

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

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

من الطرق الجيدة للقيام بذلك استخدام ملخص موجز ودقيق للمعاينة .

دع المستخدم يقرر ما إذا كان يريد التمرير عبر المحتوى الخاص بك لبقية المحتوى. TL ؛ DR هو أمر شائع بين الجميع (حتى المؤسسات الإعلامية ، وهذا هو السبب في أننا ننشر القصص دون التحقق الفعلي من الحقائق وعلى أساس لا شيء سوى الضجيج). لذا أضف قسمًا في نهاية المحتوى الخاص بك واجعله أسهل.

ثانيًا: قم بإعطاء المستخدمين معلومات كاملة بدلاً من مجرد نسخة مجزأة منها.

استخدم المحارف والأعمدة المتجاوبة. استخدم جداول استجابة Zurb لجداول البيانات المرنة. ضغط الوسائط (استخدم CDN والتخزين المؤقت لزيادة الأداء).
المحتوى هو رسالتك. تأكد من أنه واضح ومرئي ، بغض النظر عن حجم الجهاز.

المكافأة: يضعك المحتوى أولاً في الاعتبار التسلسل الهرمي للمحتوى ، وهذا يجعل تصميم التنقل عملية أكثر سلاسة.

احترم حدود الجهاز وقدراته

عندما نتحدث عن "الجوال أولاً" أو "التحسين التدريجي" ، فهل نتفهم حقًا ونستوعب الحد الأدنى؟ إليك ملخص لما يجب أن يكون عليه "الحد الأدنى":

• عرض الشاشة القابل للاستخدام: 120 بكسل كحد أدنى.
• دعم لغة الترميز: يتم تسليم XHTML Basic 1.1 مع نوع المحتوى application / xhtml + xml.
• ترميز الأحرف: UTF-8
• دعم تنسيق الصورة: JPEG ، GIF 89a.
• الألوان: 256 لونًا كحد أدنى.
• دعم ورقة الأنماط: CSS Level 1، CSS Level 2media rule جنبًا إلى جنب مع الأجهزة المحمولة وجميع أنواع الوسائط
• HTTP: HTTP / 1.0 أو أحدث HTTP1.1
• البرنامج النصي: لا يوجد دعم للبرمجة النصية من جانب العميل.

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

من فضلك خفف العبء

لا أريد أن أعزف على هذا (لدينا الكثير من الآراء حول هذا الموضوع) ، ولكن ليس هناك من ينكر أهمية سرعة الصفحة في التصنيفات الأعلى وتجربة مستخدم أفضل.

ببساطة: إذا كانت صفحتك بطيئة في التحميل ، فلن يكلف أحد عناء انتظارها للحاق بها.

نهج مثل Mobile-First يعمل بشكل جيد جدًا في الواقع لهذا الغرض. في التحسين التدريجي ، نبدأ مع الحد الأدنى من كل شيء: عناصر واجهة المستخدم ، والميزات ، وحقيقة أننا نصمم لأضيق نطاقات النطاق الترددي لجميع الأجهزة. أولئك الذين ما زالوا يشجبون مزايا نهج الجوال أولاً سيوافقون على أن هذا يضع المرء في الاعتبار الأداء والسرعة على كل شيء آخر .

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

لذلك استخدم CDN (ممكن لمواقع الويب ذات الزيارات المتوسطة والعالية) وتقنيات التطوير الخلفية التي تخفف على وجه التحديد تحميل الصفحات. استخدم التخزين المؤقت. قم بتحسين الأداء الملحوظ (مدى سرعة "الشعور" بالموقع بالنسبة للمستخدم) عن طريق تحديد المربع ذي الصلة قبل حفظ صورة JPG للويب.

حافظ على تصميمك خفيفًا ومتناسقًا (أقله من جميع العملاء والمستخدمين).

TL ؛ الدكتور

إذن ، هذا ما تعلمته عن التصميم لشبكة ويب واحدة سريعة الاستجابة:

• تصميم للجمهور. ابحث قليلاً واستخدم Google Mobile Planet (والأدوات المماثلة الأخرى) للأرقام.
• يمكن إحياء الإطار السلكي من خلال قصة. "النموذج الأولي" يعني الإصدار الأولي للجهاز / النظام. اجعله شيئًا يعمل بالفعل. استخدم أدوات النماذج الأولية التفاعلية.
• اجعل المحتوى مرئيًا وقابلًا للتكيف. لا تخفي المحتوى من الهواتف المحمولة عندما يتم تنزيله على أي حال. إذا كان هناك منشور أصلي واحد ، فقم بإضافة ملخص قصير ذي صلة يكون أكثر ملاءمة للقراءة على الهاتف المحمول.
• احترم حدود الجهاز وقدراته. نقاش الماوس / النقر بالإصبع جانباً أو بصرف النظر عن الأبعاد ، صمم الحد الأدنى من مواصفات الجهاز الذي يستخدمه جمهورك المستهدف.
• انتبه للأداء. ليس فقط من أجل تصنيفات بحث أفضل ، ولكن الخبرة أيضًا.

السيرة الذاتية للمؤلف: Lucy Barret مرتبطة بـ HireWPGeeks Ltd. وهي توفر HTML إلى خدمات تحويل WordPress ولديها فريق من المطورين الخبراء لمساعدتها. وهي أيضًا مدوّنة شغوفة وتحب مشاركة معرفتها مع مجتمع WordPress الكبير. تابع شركتها على شبكات التواصل الاجتماعي مثل Facebook و Google+.