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

اتباع نهج مرن للملاحة استجابة

by
Difficulty:BeginnerLength:LongLanguages:

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

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

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


يصلح الملاحة؟

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

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


الخطوة 1: اختيار نقاط التوقف

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

Screenshots of Twitter Bootstrap at desktop and mobile breakpoints

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

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

وقد التغريد Bootstrap عدة نقاط التوقف، بما في ذلك نقطة توقف "الهاتف ذكي" الذي يتم تشغيله على زوايا أوسع لا 480px. كما أنها نقطة توقف "صورة أقراص" التي يتم تشغيلها بين 768px و 979px.

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

استفسارات وسائط الإعلام لا يقول لنا ما هو نوع الجهاز قيد الاستخدام، ولكن يمكننا أن نجعل تكهنا استناداً إلى حجم الجهاز.

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

Screenshot of the Boston Globe at three different widths

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


الخطوة 2: كتابة الترميز

لنبدأ ببناء صفحة بسيطة. سننشئ منطقة "مقالة" تحتوي على بعض المحتوى وشريط تنقل. بجانب المقال ، سنضع جانباً.

وتشمل عناصر التنقل عشرة أو حتى في هذه القائمة، من أجل المظاهرة.


الخطوة 3: التصميم الأساسي

أولاً ، دعنا نضع قائمتنا للبحث عن شريط تنقل.

كما سنقوم نحن المادة تبرز قليلاً، وعرض لنا جانبا كالشريط جانبي. نحن نستخدم قيم النسبة المئوية لعرض لدينا لجعل السائل التصميم لدينا.

يجب أن تبدو نتائجنا النهائية كما يلي:

Screenshots of the design at small medium and large widths

الخطوة 4: إضافة نقطة توقف

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

Screenshot of the demo in a small window

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

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


خطوة 5: تعيين ارتفاع ثابت على شريط التنقل

في العديد من الحالات ، لا يتناسب محتوى شريط التنقل مع سطر واحد أنيق. دعونا نصلح ذلك!

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

للقيام بذلك، سنقوم تحميل وتشمل بناء مخصصة ل Modernizr، مكتبة جافا سكريبت التي تسمح لنا باختبار دعم ميزة في المستعرضات. دعم تجاربنا بناء مخصصة لجافا سكريبت ودعم أحداث اللمس.

بعد ذلك ، سنضيف فئة "no-js" إلى علامتنا. إذا كان المستخدم لديه جافا سكريبت ، فسيغير Mozernizr هذه الفئة إلى "js." إذا لم يكن لدى المستخدم جافا سكريبت ، فستصنف الطبقة "no-js".

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

والآن بعد أن أصبح لدينا فصل .js يعمل في مكانه ، فلنستخدمه لإخفاء أي عناصر تلتف على خط ثانٍ.


خطوة 6: إضافة فليكسمينو

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

أننا نحتاج أيضا إلى معرفة فليكسمينو إلقاء نظرة على القائمة، وتغيير حجمه حسب الحاجة:

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

flexMenu working but looking pretty ugly

ولدينا الآن السلوك الذي نريد، ولكن القائمة المنسدلة تبدو فظيعة جداً. هذا ما يرام--سنقوم الإصلاح التي في الخطوة التالية.


الخطوة 7: نمط flexMenu

والآن، دعونا نضيف بعض الأنماط جعل القائمة المنسدلة تبدو أجمل. سنقوم أيضا بإضافة CSS سهم "القائمة" أو الارتباط "مزيد" لتجعل من الواضح أن هذه الروابط سوف تفتح قائمة منسدلة.

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

Screenshot of our popup menu looking pretty decent

الخطوة 8: ضبط لشاشات اللمس

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

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

Mmm Big Type

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

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

Screenshot of our responsive navbar on an iPhone

الخطوة 9: إصلاح Funkiness عبر متصفح

إذا كنت اسحب التجريبي حتى الآن في IE7، ستلاحظ ربما مشكلتين:

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

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

للتغلب على هذه المشكلة ، يمكننا تعيين عرض ثابت لصفحتنا في IE7. للقيام بذلك ، لنقم أولاً بإضافة فئة "أقل من IE8" في أعلى الصفحة.

وبعد ذلك، دعونا نضيف بعض المغلق الذي يقوم بتعيين عرض بكسل محدد لهذه المادة، وجانبا في IE7. عرض إجمالي لهذه المناطق، بالإضافة إلى الحشو والهامش، وبدل للتقريب، يخرج إلى 901 بكسل.

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


مزيد من القراءة

مقالات براد فروست تستجيب أنماط التنقل السريع وأنماط الملاحة المعقدة للتصميم المستجيب لمجموعة متنوعة واسعة من الطرق للملاحة على المواقع سريعة الاستجابة.

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

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

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.