في الموضوع السابق تحدثت عن تصميم الويب للهاتف النقال كمقدمة وبشكل عام مع بعض الأمثلة على تصفح مواقع الويب من المتصفحات الموجودة في الهواتف.

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

إعتبارات تصميم الويب للهاتف النقال

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

قياسات الشاشة المختلفة

تتعدد أحجام الشاشات في الهواتف المتحركة التي تتغير بين فترة وأخرى. توجد إحصائية عُرضت في عام 2008 تشير إلى نسبة استخدام الهواتف مقارنة بأحجامها. وحجم الشاشة يصبح أعرض من السابق ويفيد حجم الشاشة في تحديد ملامح الأشكال التي يريد المصمم عملها كنموذج لحجم الشاشة الحقيقي.


مصدر الصورة

يحصل الحجم 240X320 على استخدام واسع بين الهواتف. يستطيع المطور أن يستفيد من دعم الهواتف للأحجام الأعلى من هذا الحجم بحيث تدعم ميزة التصغير والتكبير ولكن لا تزال هناك حدود لعرض تصاميم مواقع بحجم أكبر من عرض 1024 pixel مثل متصفح Safari في هاتف iPhone.

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

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

إختلاف شكل التصميم في متصفحات الويب

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

إتباع المعايير القياسية

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

يفيد ذلك في التعامل مع المتصفحات القديمة، إضافةً إلى عرض الموقع بدون إستخدام تنسيقات CSS مثل عرض عناوين Headings وإستخدام الاسماء البديلة في الصور عن طريق خاصية alt الموجودة في وسم img الخاص بالصور.

ترتيب المحتويات حسب الأولية

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

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

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

إختيار العنوان الخاص لمستخدمي الهاتف

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

يمكن كذلك إستخدام نطاق .mobi مثل example.mobi فهو مخصص لنسخ الهواتف النقالة ولكن أراه مضيعة للوقت فيمكن الإكتفاء بالنطاق الحالي أو وضع نطاق فرعي خاص بنسخة الهاتف.

إختبار الموقع دائماً

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

متصفحات الويب في الهواتف النقالة

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

كما أن هذه المتصفحات هي من تدعم تقنيات الويب في الهاتف النقال مثل WML, HTML, XHTML Mobile Profile, CHTML التي أشرنا أليها في السابق. سأعرض هذا الجدول بشكل بسيط لأغلب متصفحات الويب المستخدمة في دخول المواقع من الهواتف النقالة مع وجود تفاصيل صغيرة مثل أنظمة التشغيل المستخدمة ومحركات التصفح وغيره.

المتصفحالمالكالمحركأنظمة التشغيل
SafariAppleWebkitApple iOS
Opera MiniOperaPrestoBlackBerry OS, Windows Mobile, Apple iOS, Symbian OS, Google Android
Internet Explorer MobileMicrosoftTridentWindows Mobile, Windows CE
MinimoMozillaGeckoWindows CE, Linux
webOS browserPalmWebkitPalm webOS
Iris BrowserTorch Mobile IncWebkitWindows Mobile, Windows CE
SkyfireSkyfireGecko Windows Mobile, Google Android, Symbian OS

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

الإختلاف بين المتصفح في الحاسوب والمتصفح في الهاتف النقال من نفس النوع من حيث دعم التقنيات موجود، مثال على ذلك متصفح Safari التابع لشركة Apple حيث المتصفح الموجود في هاتف iPhone وجهاز ipod و ipad لا يدعم قيمة fixed في خاصية position الموجودة في تقنية CSS ويتم اللجوء إلى لغة Javascript لحل هذه المشكلة. يفضل دائماً بالإختبار بشكل مستمر والإستعانة بأدوات التطوير الخاصة لكل هاتف نقال لأنه يختصر الكثير من الوقت.