ملخص

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

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

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

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

مواقع الويب المستجيبة

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

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

كيف تنفذها؟

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

/* Desktop styles */
.container {
  display: flex;
  padding: 20px;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .container {
    display: block;
    padding: 10px;
  }
}

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

المكافأة: قد لا تحتاج CSS إلى تغييرات جذرية

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

التحديات

تطور المواقع المستجيبة

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

/* Example using dvh unit */
.header {
  height: 100dvh; /* Adjusts based on available viewport height */
}

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

مثال على العالم الحقيقي: تطبيقنا

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

  
Content 1
  
Content 2

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

خاتمة

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