طريقة تصميم موقع متأقلم

[اميرة عبد الدايم]

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


الهيكل العام للموقع

يجب أن لا يتقيد الموقع بتصميم ثابت ، بل يراعي المصمم ان تكون أجزاء الموقع مرنة و تترتب حسب أبعاد الشاشة من حيث: الموقع و القياسات. يعني كلما قل عرض الشاشة يتم نقل بعض الأجزاء الى الأسفل.
و حتى أبعاد أجزاء الموقع ، بدل من جعلها ذات قيم ثابتها ، ممكن استخدام نسب مؤية، مثل: جعل العرض 50% ، أي نصف حجم الشاشة.
يمكن تحديد طريقة حركة أقسام الصفحة باستخدام نقاط الفصل Breakpoints : وهي عبارة عن أوامر تساعد على تعريف CSS على الأقسام التي يجب ان تنزل. مثلا: عندما يكون تصميم الموقع يتكون من عمودين في حالة الحاسوب العادي و عمود واحد في حالة الهاتف الذكي، فان نقل مكونات العمود تحت الأخر تتم باستخدام الـ Breakpoints.


بداية التصميم

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



الصور

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


برمجة الموقع

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


الخط

عند اختيار الخط المستخدَم في الموقع ، يحبذ استخدام خط نظامي - الذي يوجد في الحاسوب بشكل افتراضي ، بدل من استخدم خط مخصص يحتاج للتحميل من الأنترنت. الأمر الذي يساهم في تأخير تحميل الموقع بعض الشيء.


الخلاصة

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



المصدر .. والمزيد من المعلومات هنا :





. http://www.cloudwings.com.sa/web-dev...�أقلم.html