نبذة عن المشروع
عملت على تحسين موقع DepartRoutine المبني باستخدام WordPress وElementor بهدف توفير تجربة استخدام متناسقة على أجهزة الكمبيوتر والهواتف والأجهزة اللوحية، مع الحفاظ على تصميم الموقع الحالي وعدم التأثير على وظائفه. كما شمل المشروع تحسين الأداء، معالجة مشاكل الخطوط، تنظيف الموقع والاستضافة، وتوثيق جميع التعديلات لتسهيل صيانته مستقبلا.
التحدي
واجه المشروع عدة تحديات تقنية، أبرزها وجود عدم توافق بين إصدار Elementor وإصدار Elementor Pro، مما أدى إلى تعطل أدوات الاستجابة (Responsive Controls) وعدم إمكانية الاعتماد عليها لإدارة تصميم الموقع على مختلف الأجهزة.
إضافة إلى ذلك، كان المطلوب:
تحسين تجربة الاستخدام على الهواتف والأجهزة اللوحية.
الحفاظ على استقرار نسخة سطح المكتب.
تحسين الخطوط والتسلسل البصري للعناوين.
رفع أداء الموقع دون استخدام إضافات مدفوعة.
تنظيف الموقع والاستضافة دون التأثير على أي وظيفة قائمة.
منهجية العمل
قبل البدء تم إنشاء نسخة احتياطية كاملة للموقع والعمل داخل بيئة Staging لضمان تنفيذ جميع التعديلات واختبارها بأمان قبل نقلها إلى الموقع المباشر.
وبسبب مشاكل Elementor، قمت بتطوير إطار عمل مخصص باستخدام CSS للتحكم الكامل في استجابة الموقع على مختلف الأجهزة، بدلاً من الاعتماد على أدوات Elementor غير المستقرة.
ما تم تنفيذه
تحسين الاستجابة (Responsive Design)
تحسين توزيع العناصر والمسافات والمحاذاة.
تحسين عرض الصور والوسائط على مختلف أحجام الشاشات.
إنشاء عناصر مخصصة لكل جهاز عند الحاجة.
تطوير Classes مخصصة للتحكم في إظهار وإخفاء العناصر حسب نوع الجهاز.
تطوير حلول مخصصة
قمت بتطوير Slider مخصص باستخدام HTML وCSS ليعمل بكفاءة على جميع الأجهزة، وذلك بدلاً من الاعتماد على مكونات Elementor التي كانت تعاني من مشاكل توافق.
تحسين نسخة سطح المكتب
مع الحفاظ على التصميم الأصلي، تم تنفيذ عدد من التحسينات التي طلبها العميل، منها:
تحديث شريط التنقل (Header).
تحسين تصميم الأزرار.
إضافة تأثيرات Hover للقوائم.
توحيد المظهر بين جميع الأجهزة.
تحسين نظام الخطوط
تم إعادة ضبط أحجام العناوين بطريقة Responsive لتحسين سهولة القراءة وتحقيق تسلسل بصري واضح مع الحفاظ على هوية التصميم الحالية.
تنظيف الموقع والاستضافة
شمل المشروع أيضاً:
إزالة الإضافات غير المستخدمة.
حذف ملفات غير ضرورية بحجم يقارب 14 جيجابايت من الاستضافة.
تحسين استغلال مساحة التخزين.
تنظيف الملفات والأصول غير المستخدمة.
تقليل متطلبات الصيانة المستقبلية.
توثيق العمل
تم توثيق جميع أكواد CSS المخصصة داخل لوحة تحكم WordPress مع إضافة تعليقات توضح:
آلية التحكم في الاستجابة.
قواعد إظهار وإخفاء العناصر.
إعدادات الخطوط.
حلول التوافق.
ملاحظات تساعد أي مطور يعمل على الموقع مستقبلاً.
النتائج
تحسين تجربة المستخدم على أجهزة الكمبيوتر والهواتف والأجهزة اللوحية.
رفع سرعة الموقع وتحسين الأداء دون الحاجة إلى إضافات مدفوعة.
الحفاظ على جميع وظائف الموقع أثناء تنفيذ التعديلات.
تحسين قابلية صيانة الموقع مستقبلاً من خلال توثيق جميع التعديلات.
تحسين استغلال موارد الاستضافة وتقليل استهلاك المساحة.
