Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

ملاحة التنقل الأول البسيطة ، المستجيبة 

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Asaad (you can also view the original English article)

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

ملاحة المحمول

إذا كنت قد قرأت Luke Wroblewski التنقل الأول فستكون على دراية بما قاله:

كقاعدة عامة ، تحتل الملاحة المحتوى الأكثر أولوية على الجوّال.

ما يعنيه هذا هو أن مستخدمي الجوّال غالبًا ما يبحثون عن إجابات فورية ؛ يريدون المحتوى الذي بحثوا عنه ، وليس المزيد من خيارات التنقل.

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

خذ هذا المثال من لندن وشركاه:

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

اذا ما هو الحل؟

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


شاشة كبيرة ، شاشة صغيرة.

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

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

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

حل CSS السليم

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

وهذا يعني أنه سيتم تحميل الحد الأدنى فقط من CSS والموارد عندما يتم عرض تصميمنا مع جهاز محمول. وهذا يعني أيضًا أن الإصدارات القديمة من IE (التي لا تتعرف على استعلامات الوسائط) سيتم عرضها على موقع الجوال. راجع Joni Korpi's Leaving Old Internet Explorer Behind للمزيد من المعلومات.

1. التعليمات

سأشرح الأفكار التي تقف وراء هذا الحل بينما نمضي قدمًا ، لذا دعونا في الوقت الحالي نرسم بعض العلامات ، بدءًا من مستند blanco HTML5.

ملاحظة: لا تنسى علامة Viewport Meta Tag!

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

2. توصيف التنقل

لقد تعاونا مع صفحة html الأساسية ، لذا حان الآن وقت الجذب الرئيسي ؛ تنقلنا الرئيسي ..

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

3. إعادة تعيين CSS

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

4. الأنماط الأساسية

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

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

هذه هي كل الأشياء الأساسية (الخطوط ، ارتفاعات الخط ، الألوان ، إلخ) ، ما هو مهم حتى الآن هو أن أقوم بتصميم زر "القائمة" لتطفو إلى اليمين داخل <header> ، حيث غالبًا ما تتوقع التنقل للعثور عليه.

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

على أي حال ، انقر فوقه وسيتم نقلك إلى التنقل ، فائقة.

الآن دعونا نصمم القائمة قليلا.

5. أنماط التنقل

سنقوم بالفعل بتصميم نظام التنقل الأساسي لدينا مثلما حدث في لندن& شركائها في وقت سابق ، إلا أنه من الواضح أنه في أسفل الصفحة.

أفضل بكثير. لقد جعلنا روابط القائمة لطيفة وكبيرة (اقرأ المزيد عن أحجام لوحة اللمس على مدونة Luke Wroblewski الخاصة) وحدد مرة أخرى: حالة التركيز لتعليقات المستخدمين.

أصبح من الواضح أيضًا أننا أدخلنا رابطًا "علويًا" سيعيد المستخدمين إلى أعلى الصفحة إذا لزم الأمر.

6. الحصول على أكبر

حسنًا ، لقد تعاملنا مع تخطيطنا البسيط للجوال ، لذا فقد حان الوقت لبعض التحسين التدريجي. سنستخدم طلبات البحث عن الوسائط لتحديد متى لا يعد تخطيطنا للجوّال مناسبًا.

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

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

يمكننا بالتالي البدء في إضافة قواعد ، لذا لنقم بإعداد استعلام وسائط:

سيعمل استعلام الوسائط هذا على تشغيل جميع الأنماط المتضمنة فيه عندما يكون إطار العرض بعرض 768 بكسل على الأقل. لاحظ تضمين الكلمة الأساسية الوحيدة التي تضمن عدم تشويش Internet Explorer 8 ومحاولة معالجة الاستعلام. انظر تفسيري السابق للحصول على التفاصيل.

دعونا نطلق الأشياء من خلال جعل زر "القائمة" الخاص بنا يختفي:

مع جعل المتصفح أوسع قليلاً ، لن يتم عرض زر القائمة.

7. تبديل الملاحة

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

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

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

8. واحد آخر شيء

إذا كنت قد لاحظت أنك لاحظت أنه لا يزال لدينا رابط "علوي" في التنقل - فنحن لا نحتاج حقًا إلى ذلك أكثر من ذلك؟

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

ومن ثم يمكننا التخلص منه في استعلاماتنا الإعلامية:

استنتاج

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

مزيد من الموارد

بعض الروابط المفيدة المذكورة في البرنامج التعليمي ، كلها مكدسة في قائمة واحدة مفيدة:

خيار استثنائي

هناك الكثير من نماذج التصميم للتنقل الأول المتاح في سوق إنفاتو للاستخدام الفوري في مشاريعك.

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

first - Mobile First Web App Theme
الأول - تطبيق ويب التنقل الأول  الموضوع
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.