التصميم لمتصفحات الأجهزة الكفيّة
انتشرت في الآونة الأخيرة الهواتف والأجهزة الكفية المزوّدة بتقنيات الجيل الثالث و معها زاد استخدام الانترنت عن طريقها. و لصغر حجم الشاشات في الأجهزة الكفية و اختلاف ادوات الإدخال فقد ظهرت الحاجة لوضع قواعد لتسهيل استخدام المواقع على هذه الأجهزة، و هذا ما قامت به W3C (المنظّمة المسؤولة عن وضع المواصفات و المقاييس للويب). سأذكر في هذه التدوينة بعض النقاط المستخلصة و بعض القرارات التي غلبت على تصاميم المواقع المخصصة للأجهزة الكفية.
المشكلة
- الأجهزة الكفية تحتوي على وسائل إدخال محدودة تعتمد عل النقر أو ضغط الأزرّه فقط، و لا تدعم حركة للفأرة و ما شابه.
- الأجهزة الكفية تحتوي على أزرار محدودة أو عدم وجود أية أزرار أحياناً.
- الأجهزة الكفية تعرض المواقع على شاشات صغيرة نسبياً و تتفاوت حجمها باختلاف الجهاز.
- نقل البيانات باستخدام الأجهزة الكفية يعتبر مكلف نسبياً في معظم دول العالم و هو أبطأ نسبياً و أقل استقراراً من الانترنت المنزلي.
- مستخدم الأجهزة الكفية –في الغالب- مستعجل و يريد البحث عن المعلومة في أسرع وقت ممكن.
- انعدام دعم بعض التقنيات مثل الفلاش في معظم الأجهزة الكفية الحالية. (قد يتغير في المستقبل القريب)
بعض الحلول و المقترحات
- اعرف الشريحة المستهدفة و اعرف إمكانيات الأجهزة الكفية التي يستخدمونها.
- ابتعد عن استخدام الخصائص التي تعتمد على وضع مؤشر الفأرة فوق عناصر معيّنة لتفعيل حركة أو خاصية أخرى. مستخدم الأجهزة الكفية لا يستطيع تفعيل تلك الخصائص.
- ابتعد نهائياً عن استخدام تقنية الفلاش. فتقنية الفلاش لا تعمل على معظم الأجهزة الكفية، و لن تعمل بكفاءة في المستقبل.
- حاول وضع عنوان فرعي (sub domain) مستقل سهل الكتابة يتم تحويل مستخدم الأجهزة الكفية تلقائياً له. سيسهّل ذلك التصفّح على مستخدم الأجهزة الكفية.
- يحبّذ استخدام اسم بسيط سهل الكتابة لعنوان المواقع الفرعي، و يفضّل استخدام صيغة m.website.com (استبدل website.com بعنوان موقعك بالطبع) و ذلك لتسهيل كتابة الموقع على مستخدم الأجهزة الكفية.
- لا تجبر المستخدم على الكتابة كثيراً. الأجهزة الكفية لم تصنع للكتابة المكثّفة.
أحجام شاشات مختلفة للأجهزة الكفية
- تأكد من تجربة الموقع على شاشات مختلفة الأحجام باستخدام محاكيات للأجهزة أو استخدام الأجهزة ذاتها. أشهر أحجام الشاشات للأجهزة الكفية هي :
- 128×160
- 176×220
- 320×240
- 320×480 (أيفون)
- 320×800 (سوني اريكسون اكسبيريا اكس 1)
- تجنّب استخدام الصور قدر الإمكان، و قم بمراعاة سرعة تحميل الموقع على الأجهزة الكفيّة. لا أحد بريد تحميل مستخدميه فوق طاقتهم مادياً.
- تجنب إجبار المستخدم تحريك الموقع بشكل أفقي و اجعل الحركة بشكل عمودي فقط. شاشات الأجهزة الكفيّة عاموديّة في الغالب.
- تأكد من توضيح أين سيؤدي كل رابط في الموقع، فليس هناك أسوأ من الدخول لموقع لا يريده المستخدم عن طريق الخطأ و تضييع المال و الوقت.
- صمم الموقع بشكل بسيط بعيد عن التكلف. و تأكد من أن النصوص مرئية على الشاشات المختلفة.
- قدم خدمات محدودة وأعطي الأولوية للمعلومات المهمة. ابتعد عن تكديس الخدمات. لا تجعل المستخدم يبحث عن المعلومة في الشاشة الصغيرة.
- استخدم المساحات البيضاء جيداً فالقراءة على الأجهزة الكفية أساساً صعب.
- كثير من مستخدمي الأجهزة الكفية يتصفّحون تحت مصدر ضوء (كأشعة الشمس أو ضوء الغرفة)، فاختر ألواناً يسهل رؤيتها في تلك الظروف.
- استخدم نصوص بديلة في حال عدم توفّر الصور (alt tags) قدر المستطاع، فهذه توفّر طريقة بديلة لتمييز المحتوى.
- ابتعد عن فتح الروابط في لسان أو صفحة جديدة، فهي مزعجة على أي حال.
- ضع خياراً لتصفح النسخة الأساسية من الموقع المخصّصة لاجهزة الكمبيوتر. بعض مرتادي المواقع يعرفون ما يريدون و يعرفون كيفية الوصول إلى ما يريدون من الموقع الرئيسي، أو يستخدمون أجهزة تسمح لهم بتصفّح النسخة الأساسية من الموقع بسهولة.
- تجنب استخدام الجداول و خاصية الـfloat في التصميم. فذلك سيعقد عملية رسم الصفحة على متصفّح الجهاز الكفّي.
هذه بعض النقاط التي ذكرتها W3C في قواعد لتصميم المواقع للأجهزة الكفية. أرجوا أن تشاركنا ببعض الملاحظات التي لاحظتها عند التصفح من الأجهزة الكفيّة. ما الذي قد يزيد استعمالك للانترنت عبر الأجهزة الكفيّة؟
مصنف في قابلية الاستخدام | » 15 تعليقات | 
اطبع هذا المقال
15 تعليقات على “التصميم لمتصفحات الأجهزة الكفيّة”
أنا أستخدم إضافة خاصة لتحويل موقعي تلقائياً للحجم المناسب للقراء بأجهزة اللآي فون، لكني لم أجربها من أجهزة الـ PDA او الأجهزة العادية ..
تدوينة مميزة من كاتب مميز ومدونة مميزة أيضاً …
بانتظار جديدكم
مصطفى
معلومات راااائعه ومفيده
شكرا لكـ
عبدالله القرني – أنا شخصياً أستعمل إضافة wordpress mobile في مدونتي أيضاً إذ أنها تتبع معظم النقاط التي ذكرتها. الاضافة تختصر المدة في التصميم و لكن لايجب الاعتماد عليها في الاعمال المحترفة.
السلام عليكم ،
يعطيك العافية يا عبدالله على عرضك الجميل للمشاكل والحلول ، أريد سؤالك ما رأيك بإضافة WP touch iPhone هل هي مشابهة لإضافة wordpress mobile ؟
أشكرك أخي عبدالله على هذا الطرح الجميل، والذي فعلاً نحن بحاجة إلى التركيز عليه، لأن الحياة الآن أصبحت متنقلة ومحمولة إن جاز التعبير مع انتشار الهواتف الذكية. لذلك من المهم أن نلائم مواقعنا أيضاً لتصبح مقروءة بشكل جيد عند حلّنا وترحالنا.
ولكن لدي تحفظ على استخدام النطاقات الفرعية للمتصفحات الكفية، فأنا أرى أن استخدام مثل هذه التقنيات لعرض محتوى الموقع فقط للزوار من المتصفحات الكفية قد يؤثر سلباً على الموقع، وهذه هي بعض النقاط التي أراها:
زوار الموقع يعرفون الرابط بالشكل الحالي، ويجب الحفاظ على User Experience أو تجربة المستخدم إن صح التعبير، وأن لا نجبر المستخدم على حفظ رابط آخر للموقع إن أراد رؤيته بشكل أفضل على المتصفحات الكفية.
الموقع على النطاق الأساس قد تم أرشفته مسبقاً من قبل محركات البحث، لذا، فكل الروابط التي ستؤدي إلى الموقع ستذهب به إلى النطاق الأساس، إلا إذا أجبرت التحويل من الخادم لهؤلاء الزوار إلى النطاق الفرعي، وكثر التحويلات قد تبطىء عملية التصفح.
بعض محركات البحث تعاقب على المحتويات المتكررة أو Duplicate content، لذا إن تكررت نفس المعلومات على نفس الموقع قد يؤخر ظهور النتائج على محركات البحث.
عملية المتابعة وصيانة الموقع الآخر على النطاق الفرعي تتطلب الكثير من الوقت والجهد، هذا على اعتبار أنك ستنشىء موقع متكامل على النطاق الفرعي الخاص بالمتصفحات الكفية.
الحفاظ على الفصل التام بين المحتوى Content وطريقة التقديم Presentation، فإن استخدمت نطاق فرعي للمتصفحات الكفية، ستقوم بتكرار نفس المحتوى مرة أخرى بطريقة تقديم مختلفة، ولكن على نفس الموقع.
قرأت على موقع A List Apart للكاتب Dominique Hazaël-Massieux يتحدث فيه عن بعض التقنيات التي من الممكن استخدامها لاستهداف زوّار الأجهزة الكفية، باستخدام بعض حيل CSS، كاستخدام CSS Handheld، وأيضا بعض من خواص CSS3 لاستهداف أحجام الشاشات. ربما تكون العملية مرهقة بعض الشيء للمطور الذي سيعمل عليها، ولكن باستخدامها يمكنك الحفاظ على نفس الموقع، وإظهاره بأشكال مختلفة للأجهزة المراد استهدافها. والتغلب على المشاكل التي طرحتها في الأعلى.
عبدالرحمن العتيبة:
تعتمد على الموقع.
انت تتحدّث عن عرض نفس محتوى الموقع بطريقة مختلفه، بينما هناك حالات كثيرة ستحتاج فيها الى انشاء موقع مختلف مصمّم لحاجة مستخدم الأجهزة الكفّية، بحيث تقلل الخطوات المطلوبه للحصول على المعلومه المهمّة، و تعرض عدد محدود من المعلومات. و من ثم يمكن تحويل مستخدمي الاجهزة الكفّية تلقائياً الى الموقع الفرعي.
تماماً كما ذكر مشهور.
الله يعطيك العافية أخوي عبدالله.
ممكن توضح لو سمحت وش المقصود بخاصية الـ float اللي ذكرتها في النقطة الأخيرة؟
هل تقصد اني ما أستخدمها للـ div boxes ؟ طيب وش البديل عشان أرتب الموقع؟
معليش تراني مبتدئ ، فلا تشره على الأسئلة :$
-المعتصم
هي بالضبط كما ذكرت. خاصية CSS لـdiv.
بسبب صغر الشاشة فوضع div جنب بجنب سيزيد من صعوبة الوصول للمعلومة على الشاشة الأفقية الكفي.
ضاع سؤالي بين الزحمة
، الله يوفقكم ان شاء الله
أي سؤال خاطرة بيضاء؟ أسألوا و ان شاء الله أجيب.
إضافة WP touch iPhone جربتها و لكنها لم تكن مناسبة لي. إنها تجعل الصفحات تحاكي شكل صفحات الأيفون و ذلك لم يعجبني لأني لم أكن أريد أن أكون مسوقاً للشركات. هي مشابهة لwordpress mobile و لكنها مسوقة للمتصفحين من الأيفون فقط و كنت أريد أن تكون مدونتي أكثر عمومية.
جميل جدا شكرا ع المقاله الرائع ..
هل من الممكن وضع اختياار تصفح للاجهزه الكفيه بأعلى الموقع << مشابه لموقع تغير اللغه
بحيث يكون تصميم الموقع للاجهزه العاديه وبنسخه مخففه للكفيه << لاتحتوي ع فلاشات والنقاط التي ذكرت ..
هل هذه الفكره جيده أم تثقل من تصفح الموقع ؟
bushra.b:
لا أرى مانع منها و لكن أفضل وجود الزر بالأسفل، لأن الشخص الذي لم يجد المعلومة التي يريد بعد أن وصل لأسفل الصفحة لن يتطر إلى التنقل الى أغلى الصفحة مرة أخرى لتغيير الواجهة.
انا و زميلي معانا اجهزه اكس ون طبعااركسون اهو يدخل عن طريق جهازه البلياردو وانا رافض يعطيني الصفحه الرىيسيه فقط