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

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

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

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

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

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

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

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

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

@media only screen and (max-width: 480px) {
  /* This CSS will be applied only to phones and other small devices. */
}

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

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

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

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

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

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

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

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

<article>
	<nav>
		<ul class="navbar" id="mainNavbar">
			<li><a href="/">Home</a></li>
			<li><a href="/products.html">Products</a></li>
			<!-- More nav items... -->
			<li><a href="/contact.html">Contact</a></li>
		</ul>
	</nav>
	<p>Here is our content.</p>
</article>
<aside>
	<p>Here is a side note about our content.</p>
</aside>

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

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

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

.navbar {
	background-color: #055;
	margin: 0;
	padding: 0;
	width: 100%;
	line-height: 1;
	overflow: hidden;
}

.navbar li, .navbar a {
	display: inline-block;	
}

.navbar li {
	list-style-type: none;
}

.navbar > li {
	margin-left: .25em;
}

.navbar > li:first-child {
	margin-left: 0;
}

.navbar a {
	padding: .25em;
	text-decoration: none;
	height: 1em;
	font-weight: bold;	
	color: #fff;
}

.navbar a:hover {
	background-color: #088;
}

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

body {
	font-family: sans-serif;
	font-size: 16px;
	background-color: #fff;
}

article {
	background-color: #eee;
	padding: 2.5%;
	margin-right: 1%;
	width: 64%;
	float:left;
}

aside {
	background-color: #ccc;
	padding: 2.5%;
	width: 25%;
	float: left;
}

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

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

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

@media only screen and (max-width: 550px) {
	aside, article {
		width: 95%;
		float: none;
	}

	article {
		margin-right: 0;
		margin-bottom: 1em;
	}
}

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

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

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

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

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

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

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

<html class="no-js">
<script src="modernizr.custom.js"></script>

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

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

.js .navbar {
	height: 1.5em;
 	overflow: hidden;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>

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

<script type="text/javascript">
	$('#mainNavbar').flexMenu();
</script>

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

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

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

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

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

.flexMenu-popup {
	padding: 0;
	background-color: #088;
	margin: 0;
}

.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {
	background-color: #5599AA;
}

.flexMenu-viewMore > a:after {
	display: inline-block;
	content:"";
	border-left:0.3em solid transparent;
	border-right:0.3em solid transparent;
	border-top:0.4em solid white;
	margin-left:0.4em;	
	position: relative;
	top: -.1em;
}

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
	background-color: #088;	
}

.flexMenu-popup > li > a, .flexMenu-popup > li {
	display: block;
}

.flexMenu-popup > li > a:hover {
	background-color: #3aa;
}

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

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

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

.touch .navbar {
	font-size: 1.25em;
}

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

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

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

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

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

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

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

<!--[if lt IE 8]>    <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

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

.lt-ie8 .flexMenu-popup {
	margin-top: -1px
}

.lt-ie8 article {
	width: 600px;
}

.lt-ie8 aside {
	width: 200px;
}

.lt-ie8 body {
	width: 901px;
}

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

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

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

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

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