كيف تكتب صفحات الويب للأجهزة النقالة

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

ولكن هل تريد حقًا أن تعمل صفحتك؟ يرغب معظم المصممين في تألق صفحاتهم!

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

المبادئ التوجيهية العامة لبناء موقع للأجهزة النقالة

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

تخطيط صفحة الويب للهواتف الذكية

أول شيء يجب أن تتذكره عند كتابة صفحات لسوق الهواتف الذكية هو أنك لست بحاجة إلى إجراء أي تغييرات إذا كنت لا تريد ذلك. الأمر الرائع في معظم الهواتف الذكية المتوفرة هو أنها تستخدم متصفحات Webkit (Safari على iOS و Chrome على Android) لعرض صفحات الويب ، لذلك إذا كانت صفحتك تبدو جيدة في Safari أو Chrome ، فسيبدو الأمر جيدًا على معظم الهواتف الذكية (أصغر بكثير) ). ولكن هناك أشياء يمكنك القيام بها لجعل تجربة التصفح أكثر متعة:

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

الروابط والتنقل على iPhones

• كلما كانت عناوين URL أقصر ، كان ذلك أفضل. إذا حاولت كتابة عنوان URL على هاتف خليوي ، فستعرف أنه ألم (ربما باستثناء المراهقين الذين اعتادوا على إرسال الكثير من الرسائل النصية). حتى على iPhone ، فمن الممل كتابة عناوين URL الطويلة. يبقيهم قصيرة.
• لكن من السهل النقر على نص الرابط الطويل. عندما تكون في صفحة ترتبط فيها عدة كلمات منفصلة بمقالات مختلفة ، وكلها بجوار بعضها البعض ، قد يكون من الصعب جدًا النقر على واحدة صحيحة دون التكبير. سوف يستسلم الكثير من الناس ويذهبون إلى مكان آخر. الروابط مع 3-5 كلمات فيها أسهل للنقر على الهاتف من الروابط ذات الكلمة الواحدة.
• لا تضع الملاحة الخاصة بك في أعلى الشاشة. ليس هناك ما هو أكثر مزعج من الاضطرار إلى الصفحة من خلال الشاشات وشاشات الروابط للعثور على المعلومات التي تريدها. إذا نظرت إلى صفحات الويب التي تم تصميمها للهواتف المحمولة ، سترى أن أول الأشياء التي تظهر هي المحتوى والعنوان. ثم ، أدناه هو الملاحة.
• لا تخف من إخفاء نظام الملاحة. إخفاء ارتباطات التنقل مع CSS أو JavaScript وجعلها تظهر فقط عندما يسأل المستخدم عنها هي طريقة لجعل الصفحة أكثر سهولة لمستخدمي الهواتف الذكية.

نصائح للصور على الهواتف الذكية

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

ما يجب تجنبه عند تصميم للجوال

هناك العديد من الأشياء التي يجب تجنبها عند إنشاء صفحة متوافقة مع الجوّال. كما هو مذكور أعلاه ، إذا كنت تريد حقاً الحصول على هذه الصفحات ، يمكنك التأكد من أن الموقع يعمل بدونها.

• Flash - لا تدعم معظم الهواتف الجوالة Flash ، لذلك لا يُعد تضمينها في صفحاتك اللاسلكية فكرة جيدة.
• ملفات تعريف الارتباط - العديد من الهواتف المحمولة ليس لديها دعم ملفات تعريف الارتباط. iPhones لديها دعم ملفات تعريف الارتباط.
• الإطارات - حتى إذا كان المستعرض يدعمها ، فكر في أبعاد الشاشة. لا تعمل الإطارات على الأجهزة المحمولة فقط - فهي صعبة جدًا أو مستحيلة القراءة.
• الجداول - لا تستخدم جداول للتخطيط على صفحة جوال. وحاول تجنب الجداول بشكل عام. لا يتم دعمها على كل الهواتف المحمولة (على الرغم من أن هواتف iPhone والهواتف الذكية الأخرى تدعمها) ويمكنك الحصول على نتائج غريبة في نهاية المطاف.
• الجداول المتداخلة - إذا كان من الضروري استخدام جدول ، فتأكد من عدم تواجده في جدول آخر. يصعب على متصفحات سطح المكتب هذه دعمها ، وفي أحسن الأحوال ، جعل تحميل الصفحة أبطأ.
• لا تعني المقاييس المطلقة - بعبارة أخرى - أبعاد الكائنات بأحجام مطلقة (مثل البكسل أو المليمترات أو البوصة). إذا حددت شيئًا بحجم عرض 100 بكسل ، على جهاز جوّال واحد قد يكون نصف الشاشة وعلى جهاز آخر ، فقد يكون عرضه ضعف العرض. الأحجام النسبية (مثل نظام الإدارة البيئية والنسب المئوية) تعمل بشكل أفضل.

• الخطوط - لا تفترض أن أيًا من الخطوط المستخدمة في الوصول إليها سيكون متاحًا على الهواتف المحمولة.

اقرأ أكثر

• كيفية جعل موقع الويب الخاص بك المحمول ودية باستخدام PHP