من المحتمل أنك رأيت كيف يمكن لجهاز iPhone قلب صفحات الويب وتوسيعها. يمكن أن يعرض لك صفحة الويب بأكملها في لمح البصر أو يكبر لجعل النص الذي تهتم به قابلاً للقراءة. بمعنى واحد ، منذ يستخدم iPhone Safari، لا يجب على مصممي الويب القيام بأي شيء خاص لإنشاء صفحة ويب تعمل على iPhone. لكن هل تريد حقًا أن تعمل صفحتك فقط - أم أن تبرز وتتألق؟
عندما انت بناء صفحة ويب، عليك التفكير في من سيشاهده وكيف سيشاهده. تأخذ بعض أفضل المواقع في الاعتبار نوع الجهاز الذي يتم عرض الصفحة عليه ، بما في ذلك الدقة وخيارات الألوان والوظائف المتاحة. إنهم لا يعتمدون فقط على الجهاز في اكتشاف ذلك.
إرشادات عامة لبناء موقع للأجهزة المحمولة
- اختبر على أكبر عدد ممكن من الأجهزة. أول شيء يجب عليك فعله هو عرض موقعك على iPhone والعديد من الأشياء المختلفة أجهزة محمولة أو محاكاة ما تستطيع. بينما يمكنك استخدام المحاكيات لجميع اختباراتك ، فإنها في الحقيقة لا تمنحك نفس الشعور الذي تشعر به عند محاولة التنقل عبر موقع ويب على الشاشة الصغيرة جدًا. يجب أن تختبر على الأجهزة الفعلية قدر الإمكان.
- اجعل صفحاتك تتحلل بأمان. يمكنك كتابة صفحاتك لـ يدعم الفلاش، متصفحات الشاشة العريضة ، ولكن تأكد من أن المعلومات المهمة مرئية حتى في شاشة صغيرة لا يمكنها التعامل مع أي ميزات خاصة (مثل ملفات تعريف الارتباط ، Ajax ، Flash ، JavaScript ، إلخ). أي شيء يتجاوز XHTML Basic سيتجاوز بعض الهواتف المحمولة. في حين أن معظم الهواتف الذكية يمكنها التعامل مع كل هذه الأشياء ، إلا أن الأجهزة المحمولة الأخرى لا تستطيع ذلك.
- أنشئ صفحة خاصة بالشبكة اللاسلكية - واجعل العثور عليها أمرًا سهلاً. إذا كنت تنوي إنشاء صفحة محددة لهواتفك الخلوية وعملاء اللاسلكي - اجعلها متاحة. هناك طريقة رائعة تتمثل في وضع رابط الصفحة اللاسلكية في أعلى المستند ، ثم إخفاء هذا الارتباط عن الأجهزة غير المحمولة باستخدام نوع الوسائط المحمولة باليد. بعد كل شيء ، يأتي معظم الأشخاص إلى صفحتك الرئيسية ، حتى على الهواتف المحمولة - وإذا لم يكن الرابط إلى صفحتك اللاسلكية موجودًا ، فسيغادرون إذا كانت الصفحة صعبة الاستخدام.
تخطيط صفحة الويب للهواتف الذكية
أول شيء يجب أن تتذكره عند كتابة صفحات لسوق الهواتف الذكية هو أنك لست مضطرًا لإجراء أي تغييرات إذا كنت لا ترغب في ذلك. إن الشيء العظيم في معظم الهواتف الذكية المتاحة هو أنها تستخدم متصفحات Webkit (Safari على iOS و Chrome على Android) عرض صفحات الويب ، لذا إذا كانت صفحتك تبدو جيدة في Safari أو Chrome ، فستظهر بشكل جيد على معظم الهواتف الذكية (فقط الكثير الأصغر). ولكن هناك أشياء يمكنك القيام بها لجعل تجربة التصفح أكثر متعة:
- تذكر أن الشاشة صغيرة. ستقوم الهواتف الذكية بتكثيف كل هذه الأعمدة في النافذة الصغيرة ، وهذا يمكن أن يجعل قراءتها صعبة للغاية دون تكبير. معظم المستخدمين معتادون على التكبير ، لكن يمكن أن يصبح الأمر متعبًا. من السهل قراءة عمود واحد طويل من النص.
- قسّم الصفحات إلى أجزاء أصغر. قد يكون من الصعب قراءة مقاطع نصية طويلة على الهاتف الخلوي ، لذا فإن وضعها على صفحات متعددة يسهل قراءتها.
الروابط والملاحة على أجهزة iPhone
- كلما كانت عناوين URL أقصر ، كان ذلك أفضل. إذا كنت قد حاولت كتابة عنوان URL على هاتف خلوي ، فستعرف أنه يمثل مشكلة (ربما باستثناء المراهقين الذين اعتادوا على إرسال الكثير من الرسائل النصية). حتى على iPhone ، من الممل كتابة عناوين URL الطويلة. اجعلها قصيرة.
- لكن نص الارتباط الطويل أسهل في النقر عليه. عندما تكون في صفحة حيث يتم ربط عدة كلمات منفصلة بمقالات مختلفة ، وكلها بجوار بعضها البعض ، قد يكون من الصعب جدًا النقر على الكلمة الصحيحة دون تكبير. كثير من الناس سوف يستسلمون ويذهبون إلى مكان آخر. الروابط التي تحتوي على 3 إلى 5 كلمات أسهل في النقر على الهاتف من الروابط المكونة من كلمة واحدة.
- لا تضع التنقل في أعلى الشاشة. لا يوجد شيء مزعج أكثر من الاضطرار إلى تصفح الشاشات وشاشات الروابط للعثور على المعلومات التي تريدها. إذا نظرت إلى صفحات الويب المصممة للهواتف المحمولة ، فسترى أن أول ما يظهر هو المحتوى والعنوان. ثم ، أدناه هو التنقل.
- لا تخف من إخفاء التنقل.إخفاء روابط التنقل باستخدام CSS أو JavaScript وجعلها تظهر فقط عندما يطلبها المستخدم هي طريقة لجعل الصفحة أسهل لمستخدمي الهواتف الذكية.
نصائح حول الصور على الهواتف الذكية
- يجب أن تكون الصور صغيرة. نعم ، يمكن لأجهزة Android و iPhone تكبير الصور وتصغيرها ، ولكن كلما كانت أصغر حجمًا ، من حيث الأبعاد ووقت التنزيل ، كان عملاؤك اللاسلكيون أكثر سعادة. تحسين الصور فكرة جيدة دائمًا ، لكنها مهمة لصفحات الهاتف الخلوي.
- يجب تنزيل الصور بسرعة. تشغل الصور مساحة كبيرة على صفحات الويب عندما تشاهدها من جهاز محمول. وعلى الرغم من أنها غالبًا ما تكون لطيفة جدًا وتجعل الصفحات تبدو أفضل عند عرضها على متصفح ويب بملء الشاشة ، إلا أنها غالبًا ما تعترض طريقها على جهاز محمول. بالإضافة إلى ذلك ، عندما يكون مستخدم الهاتف الذكي على الشبكة الخلوية ، فإن آخر شيء يريدون دفع ثمنه هو تنزيل مجموعة من الصور الضخمة أو رموز التنقل.
- لا تضع صورًا كبيرة في أعلى الصفحة. تمامًا كما هو الحال مع التنقل ، قد يكون من الممل جدًا انتظار صورة تستغرق ما يصل إلى 3 إلى 4 شاشات ليتم تحميلها في أعلى الصفحة. وهذا شائع للغاية على صفحات الويب. الاستثناء الوحيد لذلك هو إذا علم القارئ أنه سيحصل على صورة عند النقر ، لنقل في معرض الصور.
ما الذي يجب تجنبه عند التصميم للجوال
هناك العديد من الأشياء التي يجب تجنبها عند إنشاء صفحة متوافقة مع الجوال. كما هو مذكور أعلاه ، إذا كنت تريد حقًا الحصول عليها على صفحتك ، فيمكنك ذلك ، ولكن تأكد من أن الموقع يعمل بدونها.
- فلاش: معظم الهواتف المحمولة لا تدعم الفلاش ، لذا فليس من الجيد تضمينه في صفحاتك اللاسلكية.
- بسكويت: العديد من الهواتف المحمولة لا تدعم ملفات تعريف الارتباط. أجهزة iPhone لديها دعم ملفات تعريف الارتباط.
- الإطارات: حتى لو كان المتصفح يدعمها ، فكر في أبعاد الشاشة. الإطارات لا تعمل على الأجهزة المحمولة - فهي صعبة للغاية أو مستحيلة قراءتها.
- الجداول: لا تستخدم الجداول للتخطيط على صفحة الجوال. وحاول تجنب الجداول بشكل عام. لا يتم دعمها على كل الهواتف المحمولة (على الرغم من أن أجهزة iPhone والهواتف الذكية الأخرى تدعمها) ويمكن أن ينتهي بك الأمر بنتائج غريبة.
- الجداول المتداخلة: إذا كان لا بد من استخدام جدول ، فتأكد من عدم تضمينه في جدول آخر. يصعب على متصفحات سطح المكتب دعمها ، وفي أفضل الأحوال ، تجعل تحميل الصفحة أبطأ.
- التدابير المطلقة: بمعنى آخر ، لا تحدد أبعاد الكائنات بأحجام مطلقة (مثل وحدات البكسل أو المليمترات أو البوصة). إذا حددت شيئًا ما بعرض 100 بكسل ، فقد يكون عرض أحد الأجهزة المحمولة نصف الشاشة وعلى جهاز آخر ضعف العرض. الأحجام النسبية (مثل ems والنسب المئوية) تعمل بشكل أفضل.
- الخطوط: لا تفترض أن أيًا من الخطوط كنت معتادًا على الوصول إليه سيكون متاحًا على الهواتف المحمولة.