تصميمات الويب والاستدامة
توصف عملية تصميم الويب المستدام بتصميم وتطوير المواقع ذات التأثير البيئي المنخفض من خلال استضافتها بتكنولوجيا موفرة للطاقة وتحسين أداء الصور واستخدام تكنولوجيا الويب المستدامة. وبالتالي، فإن الاستدامة هنا تشير إلى تصميم وتطوير المواقع الإلكترونية ذات التأثير البيئي المنخفض والمسؤولية المجتمعية والمجدية اقتصاديًا.
تبلغ نسبة إنتاج الإنترنت من انبعاثات الكربون 3.7% وهو ما يعادل إجمالي انبعاثات العالم من حركة المرور الجوي.
وفيما يلي بعض النقاط التي يمكن تطبيقها للتقليل من بصمة الكربون:
- استخدام مراكز بيانات وطرق استضافة للمواقع موفرة للطاقة وأخذ البنية التحتية للمواقع الإلكترونية في الاعتبار عند تصميمها وتطويرها من حيث أثرها البيئي.
- تقليل مدة تحميل أصول الموقع بتقليل حجم الصور باستخدام الصيغة الصحيحة لملفات الصور، وذلك لأن الصور على المواقع الإلكترونية تحتاج أطول فترات تحميل مقارنةً بغيرها من المكونات.
- استخدم أساليب تكنولوجيا لمواقع أكثر استدامة من خلال المعاجلة الفعالة للغتيّ HTML وCSS لما يتطلبه استخدام التكنولوجيا غير الحديثة من دعم إضافي لملحقات الموقع وبالتالي استخدام طاقة غير مستدامة للمعالج.
- استخدم شبكات تسليم المحتوى CDN لمساعدتك على تقديم المحتوى بموقعك بفعالية أكثر وتقليل حركة نقل البيانات على الإنترنت.
- تجنب الإفراط في تطبيق تقنيات التطوير، حيث يؤدي الاستخدام الزائد عن الحد لمكتبات ونصوص الأطراف الثالثة إلى زيادة وقت التحميل وحجم الطاقة التي يستهلكها المعالج، مما يؤثر في النهاية على أداء موقعك وبصمة الكربون التي يتركها.
يهدف «نظام تصميم المواقع الإلكترونية» إلى توفير العناصر والأقسام والقواعد الإرشادية لمساعدة الحكومة الاتحادية للإمارات العربية المتحدة على بناء مواقع ذات كفاءة وفعالية، حيث تعد الاستدامة هدفًا يساعد نظام التصميم على توفير الأساسيات التي من المخطط إضافة القواعد إليها في المستقبل.
مبادئ التصميم المستدام للويب:
- ترشيد استهلاك الطاقة
- التطبيق الأمثل لوسائل الإعلام
- كتابة كود فعال للموقع
- الصيانة المستمرة
- التصميم الشامل جميع المستخدمين
- البنى التحتية والاستضافة الخضراء
دعونا نفهم الآن كيف يمكننا تنفيذ مشاريع التصميم المستدام لتتطابق مع معايير إتاحة محتوى الويب من خلال بعض الأسئلة.
اسأل الأسئلة الصحيحة
تتم عملية التصميم وفقًا لما يتم من أبحاث، حيث تعد مزيجًا بين المتطلبات التجارية وتجربة المستخدم والمحتوى التي تحدد جميعها الاتجاه الذي يتخذه التصميم.
ولذا، يجب أن نسأل أولًا إذا كان المذهب المتبنّى مستدامًا، وفيما يلي بعض الأسئلة التي يجب أن تسألها كمصمم مواقع إلكترونية:
هل يوفر التصميم تجربة «خفية» دون عوائق؟
يعد تحسين تجربة المستخدم بهدف رفع الكفاءة وتوفير الوقت وتحسين التجربة بشكل عام أمرًا ضروريًا للتحسين من كفاءة خدمات الويب، حيث نسعى إلى إتاحة منتجاتنا وخدماتنا الرقمية للجميع بإزالة العقبات كالنافذات الصغيرة بالشاشة pop-up banners والإعلانات غير المرتبطة بالمحتوى وما يعرف بالأنماط المظلمة أو الخادعة والحاجة إلى تحميل برامج إضافية.
مصادر إضافية:
Deceptive Patterns (https://www.deceptive.design)
Dont make me think, revisted
هل يوظف التصميم الصور بشكلٍ فعال؟
عادةً ما تشغل الصور الحيز الأكبر من حجم صفحة الويب، مما يجعل الاستخدام الفعال لها محوريًا لترشيد استهلاك الطاقة وتحسين الأداء، فاحرص على أن تكون لكل صورة غرض محدد وتذكر أنه يمكن لأدق التفاصيل أو للألوان المزدهرة أن تتسبب في زيادة حجم الملف.
قم باختيار صورًا وعناصر مرئية بسيطة، ولتحقيق الأثر المرئي المطلوب، يمكنك اختيار بدائل أقل حجمًا مثل SVG أو تصميمات CSS، حيث من الضروري ضمان توافق جودة الصور وحجمها مع الأجهزة المختلفة.
تأكد إذا كان نظام إدارة المحتوى لديك يغير حجم الصور التي يرفعها المستخدم على الموقع وإذا كان يحول الصيغ المعروفة تلقائيًا إلى صيغ حديثة وأكثر فعالية من HEIF وWebP وJPEG XR.
احرص أيضًا على تطبيق خاصية «التحميل البطئ» أو lazy loading على الصور لزيادة سرعة تحميل الصفحات، مما يضمن عدم تحميل الصور قبل وصولها إلى شاشة المستخدم.
مصادر إضافية:
How to Optimize Images for Faster Load Times and Sustainability
WebDev: Fast load time
The importance of good website imagery
Accessibility expert warns: stop using carousels
Sustainable websites – tip #1 – use images efficiently
كمصمم، هل تضع حدًا لحجم صفحة الويب؟
يشير مصطلح "ميزانية حجم الصفحة" حرفيًا إلى ميزانية يتم تحديد من خلالها الحجم المتاح لحجم الصفحة بالميجابايت، ويمكن لميزانية حجم الصفحة أن ينقسم أكثر إلى الحجم المحدد بالكيلوبايت لصيغ HTML وCSS وJavaScript والخطوط والصور وغيرها.
وعندما يتم تحديد ميزانية حجم الصفحة، يصبح هدف الفريق هو تقديم كل صفحة أساسية من الموقع بما لا يتعدى الميزانية المتفق عليها، مما يعني وضع إجمالي حجم أصول الصفحة في الاعتبار كالصور الثابتة والمتحركة والفيديوهات وغيرها.
مصادر إضافية:
How Performance Budgets Improve Websites
Sustainable web design – make your website better for the environment
How to set a Page Weight Budget for a greener, faster website
هل تم اختيار أقل حجم مناسب للخط واستخدام ما يحتاجه الموقع فقط؟
يمكن لملفات الخطوط المعدّلة أن تتسبب في زيادة حجم صفحة الويب، وتؤيد مبادئ التصميم المستدام للويب هنا استخدام شبكات توزيع المحتوى CDN التي يمكنها إرسال نسخات محسنة من خطوط المستخدمة على الموقع الإلكتروني.
ويجب أيضًا تحميل سمْك الخط المطلوب، حيث تمتلك بعض الخطوط ما يصل إلى ثمانية أنواع مختلفة، ولكن يجب أن تسأل نفسك كمم ومطور إذا كان كل سمْك مستخدم له وظيفة على موقعك.
مصادر إضافية:
Sustainable website fonts and the proper use of them
هل تتسم تجربة المستخدم بالسلاسة عبر الأجهزة المختلفة؟
على المنتجات والخدمات الرقمية أن تعمل بسلاسة عبر بسلاسة عبر أنواع الأجهزة المستمرة في التزايد من حيث الحجم والتكنولوجيا المستخدمة والمتصفح وسرعة الإنترنت ونوع الجهاز نفسه.
ويعد التصميم لكل جهاز على حدا من الممارسات المستدامة لأن الوقت والمجهود المطلوب لإدارة أكثر من نسخة لصفحة واحدة بالموقع يعد أعلى بكثير مقارنة بالتصميمات المستجابة. ولمزيد من التفاصيل، يمكنك الاطلاع على التصميم المتجاوب.
هل يضاف الفيديو والصور المتحركة عند الحاجة فقط؟
يفوق استهلاك محتوى الفيديو للطاقة استهلاك محتوى الصور لها بكثير. ولكن إذا كان عليك استخدام الفيديو كجزء من التصميم ومحتوى الموقع، فينصح في تلك الحالة باستخدام منصة لاستضافة الفيديو تراعي مبادئ الاستدامة وتحسن من أداء مخرجات الفيديو لكل جهاز على حدا.»
«لذلك، احرص على التفكير جيدًا في أنسب طريقة لإضافة الفيديو والصور المتحركة لضمان توفير قيمة حقيقية للمستخدم.
مصادر إضافية:
Why Web Designers Need To Think About Sustainable Web Design
هل تحرص على احترام خصوصية المستخدم؟
تهدف القوانين، كقانون حماية البيانات العامة بأوروبا وقانون كاليفورنيا لخصوصية المستخدم بالولايات المتحدة، إلى تعزيز حقوق الشعوب في الخصوصية وحماية مصالحهم كمستهلكين. وعلى المصممين تحمل مسؤولية حماية خصوصية المستخدم واحترامها ضمن الحلول التي يتوصلون إليها.»
«وعلى المنتجات والخدمات الرقمية أن تكون غاية في الدقة فيما يتعلق بطبيعة البيانات التي يتم جمعها واستخداماتها.»
هل تراعي أفضل ممارسات كتابة الكود والبرمجة؟
تشمل بصمة كربون موقع الويب الانبعاثات التي تصدر عن فريق تطويره، كما تؤثر تكلفة الطاقة المستخدمة لتطويره وإدارته على الاتجاه الذي يتبناه نحو الاستدامة.
ولكن قد يتعذر إعادة استخدام أكواد البرمجة ببعض المشاريع، إلا أنه يمكن استخدام طرق ذكية بدلًا من كتابة الكود من الصفر.
ويعد الهدف من نظام التصميم هو توفير عناصر قابلة لإعادة الاستخدام لمواقع جهات الحكومة الاتحادية التابعة للإمارات العربية المتحدة، والتي يمكن استخدامها كما هي، وبالتالي تقليل الجهد المطلوب لبناء العنصر مرة أخرى على كل موقع على حدا.
مصادر إضافية:
Developing Sustainable Design Systems
Do you write clean and reusable code?
هل تستخدَم الطاقة المتجددة في استضافة المواقع؟
تمثل مراكز البيانات جزءًا كبيرًا من إجمالي الطاقة التي يستهلكها الإنترنت. وعند تحديد مزود خدمة الاستضافة لموقع ويب، احرص على تحديد استخدامات الطاقة المتجددة، ويعد اختيار مضيف ويب أخضر أحد أسهل طرق تقليل الانبعاثات بأي موقع ويب.
مصادر إضافية:
Wikipedia: Green hosting
Green Web Hosting: How To Choose An Eco-Friendly Hosting Provider For Your Digital Project
هل تتواجد البنية التحتية لخدمة الاستضافة بالقرب من المستخدم الرئيسي جغرافيًا أم تستخدم شبكات توزيع المحتوى CDN؟
يستهلك نقل البيانات حول العالم الكثير من الطاقة، ولكن في حالة تأكدك من تمركز أكثر من 50% من المستخدمين الرئيسيين في موقع جغرافي معين، فإنه ينصح بالتأكد من تواجد بنيتك التحتية بأقرب موقع متاح بجانبه، مع الأخذ في الاعتبار عدم وضع أي من المبادئ الأخرى للاستدامة فيما يتعلق بالاستضافة الخضراء.
ويمكن بدلًا من ذلك استخدام شبكات توزيع المحتوى التي تزيد من سرعة أداء موقعك وتعد أيضًا حلًا مستدامًا وموفرًا للطاقة لكافة عناصره.
مزايا اتباع نهج الاستدامة
لا تقتصر عملية تصميم الويب المستدام على كونها مبادرة نحو البيئة، حيث تمثل أيضًا ركيزة أساسية في العصر الرقمي.
ولسعة بصمة الكربون الخاصة بالإنترنت، والتي تنافس تلك الخاصة بالصناعات الكبرى، فإن كل بايت من البيانات المعالَجة وكل صورة يتم تحميلها وكل فيديو يتم مشاهدته يستهلك طاقة. وقد لا تبدو المشاريع الموجهة لعدد قليل ذات تأثير ليس بكبير على البصمة بالعالم، إلا أن الجهود المجمّعة في النهاية يمكن أن تقوم بعمل تأثير بمرور الوقت.
وبتبني ممارسات تصميم الويب المستدام، فإننا نقلل من تأثير البيئة ونوفر تجاربًا أسرع وأكثر فعالية وإتاحة للمستخدم. ويمكن لأي مجتمع رقمي لديه وعي بالبيئة أن يترك بصمة إيجابية ذات تأثير ممتد على البيئة وعلى تجربة المستخدم.
