جعل موقع الويب ذو العرض الثابت مناسبًا للجوّال

آخر تحديث في 22 مايو 2020

بناء متوافق مع الأجهزة المحمولة. مر وقت ، عندما كان أكثر ما يقلقني كمصمم جرافيك ومطور ويب هو جعل وظيفة CSS الخاصة بي في Internet Explorer. لا يقتصر الأمر على أن IE لا يزال يمثل ألمًا في الخلف ، بل علينا الآن القلق بشأن العديد من أحجام الشاشات وأنظمة التشغيل.

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

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

على الصعيد العالمي ، تمثل الأجهزة المحمولة أكثر من نصف الدقائق التي تقضيها عبر الإنترنت ، وفقًا لـ comScore

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

إنه شامل من الآن فصاعدًا ، تصميم مواقع الويب بها فئات CSS ومعرفات لكل شيء ، وأعني كل شيء.

من رأس وقائمة div's إلى علامات <p> في التذييل. ستحتاج إلى ضبط حجم كل هذه الأشياء بناءً على عرض الشاشة. يكون النقل والتحجيم والقياس أسهل كثيرًا عندما يمكن استهداف العنصر عبر CSS.

تعد استعلامات وسائط CSS أسهل في الاستخدام مما تعتقد.

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

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

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

يسرد Css-tricks.com العديد من عروض الجوال لنا كمرجع سريع.

نموذج كود CSS

/ * ———– iPhone 5 و 5S ———– * /

/ * عمودي وأفقي * /

شاشةmedia فقط

و (أدنى عرض للجهاز: 320 بكسل)

و (أقصى عرض للجهاز: 568 بكسل)

و (-webkit-min-device-pixel-ratio: 2) {

/ ***** رمزك هنا ***** /

}

يوجد المزيد من رموز استعلام الوسائط لهواتف Galaxy و HTC و Apple. بالإضافة إلى ذلك ، يتم سرد عروض أجهزة Ipad و Galaxy و Nexus اللوحية. كل ما عليك فعله هو إدخال هذا الرمز في ملف CSS الخاص بموقعك وملء أقواس CSS الفارغة بالشفرة الخاصة بك! فعله!

موقعك مستجيب ، لكنه لا يزال غير صحيح تمامًا

قد تبدأ في ملاحظة أن بعض العناصر الموجودة على موقعك تشغل مساحة كبيرة جدًا على الأجهزة المحمولة ، مثل قائمتك الرئيسية. لجعله سريع الاستجابة ، من المرجح أنك قمت بتطبيق "float: none" على العلامات <li> الموجودة في قائمتك. لكن القائمة الآن تشغل جزءًا كبيرًا من العقارات في الجزء العلوي من موقعك. ستحتاج إلى تحويل قائمتك الرئيسية إلى قائمة منسدلة باستخدام استعلامات وسائط jQuery و CSS. يوضح Css-tricks.com أيضًا كيفية القيام بذلك.

يمكنك أيضًا اعتبار بعض العناصر غير مهمة ، مثل تلك التي يمكن العثور عليها على كل من أجهزة سطح المكتب والأجهزة المحمولة. . يمكنك التخلص منها باستخدام CSS:

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

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

<a href="#skip”> انقر هنا للتخطي إلى المحتوى الرئيسي </a>

<a id="skip”> </a> المحتوى الرئيسي يبدأ هنا

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

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

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

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

- عزاق هيل ، مصمم جرافيك أول