تصميم الويب سريع الاستجابة هو الكلمة الطنانة لهذا العقد بالفعل ، وهو مثالي للعالم المتصل بشاشات متعددة الذي نعيش فيه. ومع ذلك ، فإن المفاضلة لذلك هي في الأداء نظرًا لأحجام الملفات الكبيرة.
وقد دفع هذا بعض الخبراء إلى القول إن التصميم سريع الاستجابة ، مثل الأيام الأولى من Flash ، شيء يمكن أن نتحمس له جميعًا بدون سبب وجيه. ومع ذلك ، في حين أن هناك مشاكل في الأداء في الوقت الحالي ، يمكن التغلب عليها إلى حد ما مع بعض التعديلات الصغيرة ، والضغط وتغيير حجم الصورة.
يعمل التصميم السريع على تحميل جميع عناصر HTML نفسها لكل جهاز ، بما في ذلك تلك المخصصة لتوصيل الأجهزة اللوحية المكتبية. وهذا يعني أن كل المحتوى يتم تسليمه غالبًا ، بما في ذلك الصور والنصوص البرمجية ، بصرف النظر عن الجهاز الذي يتم عرضه عليه.
دراسة في العام الماضي ، أظهرت 86٪ من المواقع المتجاوبة التي تقدم حاليًا عبر الإنترنت صفحة سطح مكتب كاملة للأجهزة المحمولة. ومن الواضح أن هذا هو الاتجاه إلى أسلوب التصميم الذي يحتاج إلى معالجة ، إذا أردنا وقف تقدم صفحات الويب المتضخمة في مساراتها.
في الوقت الحالي ، يعمل التصميم سريع الاستجابة على زيادة أحجام الصفحات ، وهذا هو الاتجاه الذي يجب معالجته ، خاصة عندما تعتقد أن 57٪ من مستخدمي الجوّال سيغادرون إذا لم يتم تحميل الموقع في غضون 3 ثوان.
لأولئك الذين لديهم بالفعل تصميم في المكان ويريدون الآن تحسين ، Mobitest يمكن استخدامها لقياس الأداء من أجل المضي فيه ومعالجته. وبالطبع ، عند التخطيط للتصميم ، سيكون من الأسهل تنفيذ التحسين في هذه المرحلة ، ويجب أن يُعتبر الأداء دائمًا جزءًا أساسيًا من التصميم ، وليس جزءًا ثانويًا.
لتحسين الأداء ، يجب تقليل حجم الصفحات والموارد التي تم تحميلها. ويمكن تنفيذ ذلك باستخدام تقنيات مختلفة ، دون تغيير شكل وجوهر الموقع بشكل جدي.
أول شيء يجب مراعاته هو كيفية التأكد من أن الموارد المطلوبة فقط هي التي يتم إرسالها إلى الجهاز المستهدف. يمكن القيام بذلك عن طريق تقليل عدد طلبات HTTP ، بحيث يقضي المستخدم وقتًا أقل في انتظار تحميل DOM. يمكن أن يتم ذلك بدوره عن طريق ضغط موارد CSS و Javascript ، لأدوات مثل بوصلة - إطار عمل تأليف CSS مفتوح المصدر - يمكن استخدامه. يسمح ذلك للمطورين بإنشاء علامات أنظف وإنشاء صور متحركة وإضافات مع الحد الأدنى من الجلبة.
فيما يتعلق JavaScript ، أدوات مثل UglifyJS يمكن استخدامها ، مما يضغط الكود.
يمكن اعتبار ذلك تقنية مهمة عندما يتعلق الأمر بالتصميم المتجاوب ، حيث يمكن استخدامه للتأكد من عدم قيام مستخدمي الهاتف المحمول والهواتف الذكية بتنزيل جوانب الموقع التي تبطئها أو أنها لن تستخدمها.
يمكن استخدام التحميل الشرطي لإيقاف تحميل جميع أنواع المحتوى ، بما في ذلك الأدوات الاجتماعية والصور والخرائط وغيرها الكثير. من المهم أن تلاحظ في هذه المرحلة أنه يجب اختبار الموقع بدقة في كل مرحلة من مراحل التحسين حتى يكون من السهل رؤية ما أحدث اختلافًا مع تقدمك.
نعلم جميعًا أن الصور تكون عادة مسؤولة عن تناول أكبر كمية من الكيلوبايت في صفحة الويب. من الأمان أيضًا أن نقول أن الصور المصممة لمتصفح سطح المكتب ستقل أداؤها عند تسليمها إلى جهاز جوال.
إذا كان الموقع يحتوي أيضًا على الكثير من المحتوى القديم ، فإن ذلك سيؤثر على الأداء بشكل أكبر ، وبعض الطرق لمنع تنفيذ هذا المحتوى من التحميل. بينما يمكن القيام بذلك عن طريق تغيير الترميز عن طريق تغيير عناصر src أو img ، وهو حل PHP صور التكيف ربما أسهل. يقوم البرنامج باكتشاف حجم الشاشة ويقوم تلقائيًا بإنشاء وتخزين وتخزين الصور HTML المضمنة المناسبة بدون الحاجة إلى تغيير الترميز. لاستخدامه بالتزامن مع تقنيات Fluid Image ، فهو حل مفيد والآخر يوفر الكثير من الوقت. تستخدم الصور التواؤمية ملف htaccess وملف php واحدًا وخطًا واحدًا من جافا سكريبت لتحديد حجم شاشة زوار الموقع.
يجدر التفكير في النص أيضًا ، حيث سيتم التفافه بشكل طبيعي عند تضييق الجهاز وقد يتسبب في مشكلات في العرض. FitText هي أداة يمكن أن تساعد في معالجة هذا ، وهو ملحق jQuery يقوم تلقائيًا بتحديث حجم الخط ، مع خيارات للأحجام الدنيا والقصوى المسموح بها.
هذا مثالي للعناوين الرئيسية التي قد يتم عرضها بشكل سيئ على جهاز محمول ويسمح بتجاهل حجم الخط المحدد لـ CSS3. ومع ذلك ، فإن FitText مخصص فقط للعناوين الرئيسية ويجب عدم استخدامه داخل نص الفقرة.
في حين أن تصميم الاستجابة له مشاكله ، مثل أي تقنية أو تقنية جديدة نسبيًا ، فإنه لا يزال يستحق اختيار إنشاء موقع بهذه الطريقة. لا أحد يرغب في الرجوع إلى الوراء ، وفي حين أنه قد يكون من الأسهل إنشاء موقع ويب للجوّال ، فمن الأفضل أن تكون مبتكرًا قدر الإمكان.
توافق Google ، نصيحتهم هو استخدام التصميم المتجاوب كأفضل طريقة للتصميم للجوال. بالطبع لعمالقة البحث ، هذا يعني أنه ليس لديهم سوى عنوان URL واحد للزحف ، بدلاً من العديد من عناوين URL لما هو في الأساس نفس الموقع ، لذلك فهو يصب في مصلحتهم.
ومع ذلك ، في هذا الوقت من الهوس تقاسم الاجتماعية فمن المنطقي أيضا ، كما يمكن لمشتركي المحمول مشاركة صفحة مع شخص ما باستخدام سطح المكتب. من أجل خلق تجربة موحدة ، يجب أن يقدم هذا المحتوى نفسه.
علاوة على ذلك ، فإن وجود موقع مستجيب يؤدي إلى تحسين الإنتاجية في القوى العاملة حيث لا يوجد الكثير للقيام به. وهذا ينطبق على المحتوى والتحديثات وكبار المسئولين الاقتصاديين ، لأن هذا سوف يتعين تنفيذه بشكل منفصل إذا تم بناء مواقع مختلفة.
أصبحت أجهزة الجوّال والأجهزة اللوحية أمرًا معتادًا للاتصال بالإنترنت وتصفح الإنترنت في هذا العصر الذي يعود تاريخه إلى ما بعد الكمبيوتر الشخصي تقريبًا. ارتفعت مبيعات الأجهزة اللوحية في جميع أنحاء العالم خلال عام واحد فقط ، أي أكثر من الضعف في ذلك الوقت ، مع اختيار العديد من المستهلكين الآن لأجهزة مختلفة تعمل بنظام Android ، بالإضافة إلى نظام التشغيل iOS.
ليس هناك شك في أن التصميم المستجيب حتى الآن له تأثير إيجابي ، على الرغم من القلق بشأن الأداء. وفقا لتقرير واحد التي سألتها بعض أهم العلامات التجارية في العالم عن مدى تأثر موقع الويب المتجاوب بحركة المرور ، وزادت الزيارات عبر جميع الأجهزة إلى حد كبير.
شملت هذه الزيادة متوسطًا بنسبة 23٪ من قِبل زائري الجوّال ، فضلاً عن انخفاض معدل الارتداد بنسبة 26٪ ، مع إنفاق الزائرين حوالي 7.5٪ من الوقت على المواقع أكثر مما كان يُنظر سابقًا.
أبلغ أونيل ، بائع التجزئة العصري للملابس ، عن معدل تحويل بنسبة 65.7٪ على iPad و iPhone كنتيجة لتطوير موقع سريع الاستجابة. وقد مثل هذا نموًا في الإيرادات بنسبة 101.2٪ على هذه الأجهزة وحدها.
فيما يتعلق بأجهزة Android ، كان معدل التحويل أفضل ، حيث بلغت النسبة 407.3٪ ، وهو ما يمثل نموًا كبيرًا في الإيرادات بنسبة 591.4٪. شوهد معدل تحويل أصغر على الأجهزة غير المحمولة ، على الرغم من أن النمو كان لا يزال ينظر إليه.
هذه ليست سوى واحدة من العلامات التجارية التي تصدر الأرقام الخاصة بها ومن الصعب جدًا الحصول على البيانات من الآخرين في الوقت الحالي ، بقدر ما كان الأمر مع تأثير وسائل الإعلام الاجتماعية قبل عامين. ومع ذلك ، فإنه يذهب إلى حد ما لإثبات أن العائدات من تصميم موقع على شبكة الإنترنت استجابة يمكن أن تكون كبيرة.
مع أخذ ذلك في الاعتبار ، ما هو السبب الآخر الذي يحتاجه أي مصمم للبدء في تصميم استجابة لعملائه ومحاولة التأكد من أنها يمكن أن تؤدي كذلك قدر استطاعتها؟ لا يوجد واحد ، وقد يجد المصممون الذين لا يريدون أن يتورطوا في تعلم كيفية تصميم وبناء وتحسين موقع باستخدام تقنيات الاستجابة نفسها في الغبار.
قال 67٪ من المستخدمين إنهم اشتروا عبر موقع ويب للجوال ويعتقد أن استخدام الإنترنت عبر الهاتف المحمول سيتفوق على سطح المكتب بحلول العام المقبل. مع أخذ كل ذلك في الاعتبار ، من السهل معرفة السبب الذي يجعل الشركات ستزداد اهتمامًا بأفضل حلول ويب للجوّال التي يمكنها تقديمها.
قد لا يزال التصميم المتجاوب في مهده في الوقت الحالي ، ولكن يبدو من الواضح أن الطلب في السوق سيجعله ينمو بسرعة ، لذلك فإنه من المفيد تعلم أكبر عدد ممكن من جوانب الانضباط الآن.
ما التقنيات التي استخدمتها لتحسين المواقع سريعة الاستجابة؟ هل يؤدي تسليم محتوى بديل إلى إبطال فوائد التصميم المتجاوب؟ اسمحوا لنا أن نعرف في التعليقات.