عندما يستمر التصميم السريع الاستجابة (وكيفية إصلاحه)

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

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

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

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

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

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

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

1. "موبايل أولا" هو مغفل

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

أفضل أسلوب هو تصميم ما لا يقل عن ثلاثة تخطيطات مختلفة (وتصل إلى 11). الحد الأدنى الذي يمكنك أخذه في الاعتبار هو:

  • سطح المكتب
  • المناظر الطبيعية موبايل
  • بورتريه موبايل

إذا كنت تريد أن تكون أكثر شمولية ، يجب عليك أيضًا مراعاة ما يلي:

  • قرص المناظر الطبيعية
  • لوحة بورتريه

والقائمة الكاملة ، إذا كنت تريد أن تكون كاملة تمامًا ستكون:

  • سطح المكتب ضخمة
  • سطح المكتب العادي
  • قرص المناظر الطبيعية الكبيرة
  • لوحي كبير لوحي
  • قرص المناظر الطبيعية الصغيرة
  • لوحة صغيرة وصورة
  • كبير المناظر الطبيعية موبايل
  • كبير صورة موبايل
  • صغير المناظر الطبيعية موبايل
  • صورة صغيرة متنقلة
  • صغيرة / لبس

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

2. ترويض تذييل الصفحة المترامية الأطراف

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

3. اقبل بعض المراوغات البسيطة على الأجهزة الغامضة

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

4. يمكنك إخفاء المحتوى الذي لا يساهم في الرسالة الأساسية

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

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

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

5. يمكنك استخدام خلفيات بديلة

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

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

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

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

6. التحكم يدويًا في ترتيب الانهيار (أو تجنب المراجع المكانية داخل المحتوى)

هذه مشكلة معقدة. يعتمد ترتيب تصغير الموقع على الترتيب الذي يتم فيه تكديس div. تحتاج إلى تكديس divs بالترتيب الصحيح بحيث يتم تصغيرها بالترتيب الصحيح.

واحدة من المشاكل التي تأتي من بناة موقع ويب WYSIWYG drag-n-drop هي أنه لا يمكنك في العادة إملاء ترتيب الطلبات المتراكمة ، وفي الحالات النادرة جدًا حيث يمكنك القيام بذلك ، يتم التراجع عن عملك الشاق في كل مرة تقوم بإجراء أصغر تعديل ، ويجب عليك الرجوع إلى شفرة المصدر مرة أخرى.

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

7. قد تحتاج إلى أحجام خطوط مختلفة للتنسيقات المختلفة

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

8. من الأفضل استخدام الصور سريعة الاستجابة

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

رأس الصورة مجاملة من

بوجدان رانسيا

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