دليل شامل للإصلاح Responsive مشاكل التصميم في عام 2023

إذا قمت بالاشتراك في خدمة من رابط على هذه الصفحة ، فقد تحصل شركة Reeves and Sons Limited على عمولة. انظر لدينا بيان الأخلاق.

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

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

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

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

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

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

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

1. "الجوال أولاً" مغفل

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

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

  • Desktop
  • المناظر الطبيعية موبايل
  • بورتريه موبايل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. من الأفضل استخدام responsive صور

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

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

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

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

التعليقات 1 الاستجابة

  1. م ص يقول:

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

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المشار إليها إلزامية *

التقييم *

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.