تصميم مواقع الويب التكيفي

📅 آخر تحديث: ٢٨ يوليو ٢٠٢٦
✍️ نُشر في: ٢٨ يوليو ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة
"M2 Mobile Web"، واجهة الويب الأصلية للهواتف المحمولة الخاصة بتويتر ، كانت فيما بعد بمثابة نسخة احتياطية قديمة للعملاء الذين لا يدعمون جافا سكريبت و/أو المتصفحات غير المتوافقة، مثل أجهزة ألعاب الفيديو ذات إمكانيات تصفح الويب المحدودة. تم إيقاف تشغيلها في ديسمبر 2020. [ 1 ]

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

يصف هذا غالبًا استخدام نسخة مخصصة للهواتف المحمولة ونسخة أخرى لأجهزة الكمبيوتر المكتبية من صفحة ويب (أو في معظم الحالات، الموقع الإلكتروني بأكمله )، حيث يتم استرجاع أي منهما بناءً على وكيل المستخدم المحدد في طلب HTTP GET ، وهو ما يُعرف بالخدمة الديناميكية. كان تصميم الويب التكيفي من أوائل الاستراتيجيات لتحسين الموقع لقراءة سهلة على الهواتف المحمولة ، وكانت الممارسة الأكثر شيوعًا تتضمن استخدام موقع ويب منفصل تمامًا للهواتف المحمولة وأجهزة الكمبيوتر المكتبية، حيث غالبًا ما يتم إعادة توجيه الأجهزة المحمولة إلى نسخة الموقع المخصصة للهواتف المحمولة والموجودة على نطاق فرعي (غالبًا النطاق الفرعي من المستوى الثالث، ويرمز له بـ "m" ؛ على سبيل المثال http://m.website.com/ ؛ و/أو معلمات عنوان URL كما هو الحال في يوتيوب). اليوم، يتم التخلي تدريجيًا عن استخدام موقعين ثابتين منفصلين لعرض الصفحات على الهواتف المحمولة وأجهزة الكمبيوتر المكتبية، حيث يتم استخدام البرمجة النصية من جانب الخادم بدلاً من ذلك لعرض صفحات يتم إنشاؤها ديناميكيًا أو لتحديد أي نسخة من الصفحة الثابتة سيتم عرضها ديناميكيًا، على الرغم من أنه لا يزال من الممكن ملاحظة استخدام مواقع مستقلة للهواتف المحمولة وأجهزة الكمبيوتر المكتبية بشكل متكرر. بينما تستخدم العديد من المواقع الإلكترونية تقنيات تصميم الويب المتجاوبة أو التكيفية، فإن هاتين التقنيتين ليستا متنافيتين ، وأفضل الممارسات للحصول على محتوى مصمم قابل للقراءة عالميًا تستخدم مزيجًا من التقنيتين لدعم مجموعة كاملة من الأجهزة والبرامج . [ 2 ]&app=m&persist_app=1

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

التعريف التقني

التصميم التكيفي للمواقع الإلكترونية هو عملية كشف من جانب الخادم، تُحدد تخطيطًا وحجمًا مناسبين للعرض. يمكن استخدام جميع أنواع تخطيطات تصميم المواقع، بما في ذلك التخطيط المتجاوب. يُقدم التصميم التكيفي نسخًا مختلفة من الصفحة للأجهزة المختلفة بناءً على أحجام الشاشات ودقتها الشائعة. صاغ هذا المصطلح لأول مرة آرون غوستافسون في كتابه الصادر عام ٢٠١١ بعنوان " التصميم التكيفي للمواقع الإلكترونية: صياغة تجارب غنية بالتحسين التدريجي" . [ ٢ ]

مصطلحات التقنيات

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

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

التقدم التكنولوجي يؤدي إلى ضرورة

التصميم التكيفي هو نهج شامل لتصميم مواقع الويب يركز على ملاءمة التصميم لمجموعة متنوعة من واجهات المستخدم، بدلاً من اقتصاره على تنسيق العرض المخصص لأجهزة الكمبيوتر المكتبية. يكتسب هذا أهمية خاصة مع ازدياد حصة الأجهزة المحمولة في السوق مقارنةً بأجهزة الكمبيوتر المكتبية. [ 5 ] على الرغم من أن ممارسات تصميم الويب الديناميكي موجودة منذ أكثر من عقدين، إلا أن التصميم الديناميكي، فيما يتعلق بالتخطيط الرسومي، وخاصةً لعرضه على الأجهزة المحمولة، يُعد مفهومًا حديثًا نسبيًا. وقد ركزت التقنيات الحديثة، مثل استعلامات الوسائط CSS3 وAJAX و HTML5 و JavaScript ، على التصميم المتجاوب، الذي يتميز عادةً بكفاءة وفعالية أكبر من التصميم التكيفي. وقد أدى الانتقال من أجهزة الكمبيوتر المكتبية إلى الأجهزة المحمولة إلى التحول من تصميم الويب التكيفي إلى تصميم الويب المتجاوب. [ 6 ] [ 7 ]

التاريخ والتكيف والتطور

يكتشف تصميم المواقع التكيفي حجم الشاشة أثناء طلب HTTP GET ، ويُقدّم صفحة مُخصصة لوكيل المستخدم . عادةً، تُصمّم المواقع التكيفية لستة أحجام شاشات: 320، 480، 760، 960، 1200، و1600. [ 8 ] [ 9 ] لم تكن هذه ممارسة شائعة لتحسين تجربة المستخدم على الأجهزة المحمولة فحسب، بل كانت أيضًا جزءًا من المرحلة الانتقالية بين شاشات CRT منخفضة الدقة بنسبة 4:3 وشاشات LCD عالية الدقة بنسبة 16:9 . كان تصميم المواقع التكيفي القياسي ضروريًا لإنشاء تخطيطات سلسة لمختلف الشاشات المتاحة. [ 8 ]

في بدايات الهواتف الذكية، تباينت أحجام الشاشات بشكل كبير، وافتقرت متصفحات الجوال إلى الوظائف المتقدمة والإضافات المتوفرة في متصفحات سطح المكتب. كما كان الإنترنت عبر الجوال مكلفًا وبطيئًا، مما استدعى تصميم صفحات جوال مُبسطة تحتوي على عدد أقل من الصور أو بجودة أقل، مع تبسيط تنسيق النصوص لسهولة القراءة. [ 10 ] حدث تغيير جذري مع ظهور هاتف آيفون وانتشار شبكات الجيل الثالث ، مما زاد بشكل ملحوظ من سرعات الاتصال وعرض النطاق الترددي. أصبح من الشائع أن تحتوي مواقع الويب على نسختين: نسخة الجوال (غالبًا باستخدام نطاق فرعي "m") ونسخة سطح المكتب. مع ذلك، كانت نسخ الجوال لا تزال غالبًا مُصغّرة، بجودة صور أقل ومحتوى محدود كالفيديو لتحسين سرعة التحميل. كما أثر انتشار شاشات اللمس على التصميم، مما أدى إلى استخدام أزرار وروابط أكبر لتسهيل التنقل بالأصابع. لاحقًا، قلل الانتشار الواسع لتقنية الجيل الرابع LTE من الحاجة إلى التضحية بجودة الوسائط أو المحتوى. مع ازدياد شعبية نظام التشغيل أندرويد من جوجل وتوسع نطاق خيارات الهواتف الذكية، تراجع استخدام نموذج الصفحات المتعددة في تصميم المواقع الديناميكية، مع أنه لا يزال يُستخدم أحيانًا لفصل تصميم محتوى شاشات اللمس عن تصميم سطح المكتب. عند دمج تصميم ماتيريال أو تخطيطات وألوان خاصة بكل جهاز، يقوم بعض المطورين بإنشاء قوالب ثلاثية الصفحات (أندرويد، iOS، سطح المكتب)، مع تعديل الأيقونات والألوان لكل قالب واستخدام استعلامات الوسائط للتخطيط. يُبسط هذا التصميم والبرمجة، مع ضرورة تحديث القوالب الثلاثة جميعها.

تصميم المواقع الإلكترونية المتجاوب مقابل تصميم المواقع الإلكترونية التكيفي

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

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

توجد اختلافات في هذه المفاهيم تُطمس الحدود بين تصميم المواقع التكيفي والمتجاوب، مثل "العروض" في Django وبعض جوانب AJAX ، والتي تُقدّم إصدارات مختلفة من الصفحات، بما في ذلك لغرض ضمان سلاسة العرض على مختلف الأجهزة، ومع ذلك، يتم إنشاء الصفحات ديناميكيًا، وليس بشكل ثابت. [ 9 ] [ 12 ] [ 2 ]

انظر أيضاً

  • أجاكس  – مجموعة من تقنيات تطوير الويب. صفحات تعرض أوصافًا مختصرة لأهداف إعادة التوجيه.
  • التوافق مع الإصدارات السابقة  – القدرة التقنية على التفاعل مع التقنيات القديمة. صفحات تعرض أوصافًا مختصرة لأهداف إعادة التوجيه
  • التفاوض على المحتوى  – تقديم عدة مستندات في نفس عنوان URI
  • CSS  - لغة أوراق الأنماط
  • استفسارات وسائل الإعلام
  • نهج "الأجهزة المحمولة أولاً"  – منهج لتصميم مواقع الويب يضمن عرض صفحات الويب بشكل جيد على مختلف الأجهزة. صفحات تعرض وصفًا موجزًا ​​لوجهات إعادة التوجيه.
  • Polyfill (برمجة)  – كود لتنفيذ ميزات في متصفحات الويب التي لا تدعمها
  • تصميم المواقع المتجاوب  – منهج لتصميم المواقع الإلكترونية يهدف إلى جعل صفحات الويب تُعرض بشكل جيد على مختلف الأجهزة، حيث تعرض الصفحات وصفًا موجزًا ​​لوجهات إعادة التوجيه.
  • واجهات المستخدم  – الوسائل التي يتفاعل بها المستخدم مع الجهاز ويتحكم به. صفحات تعرض أوصافًا مختصرة لوجهات إعادة التوجيه
  • منطقة العرض  - منطقة عرض المضلعات في رسومات الحاسوب

مراجع

  1. ↑ "إغلاق تويتر القديم يعني أنه لا يمكنك التغريد من جهاز 3DS بعد الآن" . سكرين رانت . 28-11-2020.
  2. 1 2 3 غوستافسون، آرون. تصميم مواقع الويب التكيفي: صياغة تجارب ثرية باستخدام التحسين التدريجي . إيزي ريدرز، ذ.م.م.؛ الطبعة الأولى، 2011. ISBN 978-0-9835895-0-1
  3. ↑ "التدهور التدريجي مقابل التحسين التدريجي" . 3 فبراير 2009. مؤرشف من الأصل في 13 نوفمبر 2014. تم الاطلاع عليه في 21 ديسمبر 2016 .
  4. ↑ باركر، تود؛ واكس، ماغي كوستيلو؛ جيل، سكوت (فبراير 2010). التصميم باستخدام التحسين التدريجي . ص 456. ISBN  978-0-321-65888-3تم الاطلاع عليه بتاريخ 1 مارس 2010 .
  5. ↑ "حصة سوق أجهزة الكمبيوتر المكتبية مقابل الهواتف المحمولة عالميًا" . إحصائيات StatCounter العالمية . تم الاطلاع عليه بتاريخ 19 فبراير 2024 .
  6. ↑ "الهجرة من أجهزة الكمبيوتر المكتبية إلى الأجهزة المحمولة: لماذا هي مهمة وماذا نفعل حيالها" . سمارت إنسايتس . 2018-12-07 . تم الاطلاع عليه بتاريخ 2024-12-12 .
  7. ↑ "الانتقال من سطح المكتب إلى الهاتف المحمول - تصميم مواقع الويب في الولايات المتحدة الأمريكية" . أ. موقع ويب . تم الاسترجاع في 12-12-2024 .
  8. 1 2 3 4 أديسشيا، إميلي جريس (1 مارس 2016). "اختيار تصميم موقع الويب: الاستجابة مقابل التكيف" .
  9. 1 2 "التصميم لـ 10000 شاشة: 4 نصائح لتصميم مواقع الويب المتجاوبة" .
  10. ↑ تيودوريسكو، أ. (2023-07-14). " صعود الإنترنت عبر الهاتف المحمول: تتبع تطور الأجهزة المحمولة" . وقائع المؤتمر الدولي للتميز في الأعمال . 17 (1): 1645. doi : 10.2478/picbe-2023-0147 .
  11. ↑ "تصميم المواقع الإلكترونية المتجاوب" . MDN . 2025-07-01 . تم الاطلاع عليه بتاريخ 2025-07-04 .
  12. ↑ فيرتمان، ماكسيميليانو (30 يوليو 2010). برمجة الويب عبر الهاتف المحمول . ص 512. ISBN  978-0-596-80778-8.