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

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

إعتبارات قبل البدء في تصميم النسخة الواحدة

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

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

مثال عملي

أول خطوة هي تحديد القياسات التي سيتم تغيير عناصر التصميم فيها فالشكل الأولي سيكون أكبر من 1024 بكسل وعند تصغير النافذة لما هو أقل من ذلك ستبدأ عمليات التغيير، وهذه عدة قياسات سأعتمد عليها لرؤية أهمية تغيير العناصر فيها:

  • النسخة الرئيسية: أكبر من 1024 بكسل
  • نسخة الأجهزة اللوحية: أصغر من 1024 بكسل/820 بكسل
  • نسخة الهواتف النقالة: أصغر من 480 بكسل

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

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

الصورة التالية هي ستكون نتيجة تطبيق الدرس الذي يبين النسخة الأساسية للموقع (لأجهزة الحاسوب) ونسخة الهواتف النقالة:

لإعتماد تغيير العناصر وفق القياس المناسب يجب ترتيب العناصر حسب أولويتها ووضعها حسب المساحة الكافية في القياس، فمثلاً عندما تكون النسخة خاصة بالهواتف النقالة فسيتم وضع العناصر بشكل عمودي ولا يوجد عنصر توافق مع عنصر آخر في مستوى واحد بشكل أفقي (عندما نستخدم خاصية float في تقنية CSS) ، هذا تصوري لترتيب العناصر حسب كل قياس مختلف قمت بإختياره عبر الصورة التالية:

قبل البدأ بكتابة شفرة HTML وCSS تأكد من دعم خاصية Viewport لتقبيت وضوح الصفحة ومنع تحريكها بشكل أفقي وهذا خاص للهواتف النقالة، ضع هذه الشفرة في رأس الصفحة (في عنصر head):

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

سأكتفي بكتابة شفرة CSS الخاصة بإستعلامات Media Query والتي سنغير ترتيب العناصر وقياساتها وفقاً للشرط المستخدم في الإستعلامات ، نبدأ أولاً بقياس 1024 بكسل عبر شفرة CSS التالية (سأضع الشرح كتعليقات في الشفرة):


/* تعديل العناصر بعد أن تكون النافذة أو يكون عرض الجهاز أقل من 1024 بكسل */
@media screen and (max-width: 1024px) {
	/* إستخدام صيغة النسبة لتصغير عرض النافذة بشكل آلي ليكون متوافق مع عرض النافذة */
	#container, #footer {
		width: 96%;
	}

	#last-posts {
		width: 58%;
	}
}

@media screen and (max-width: 820px) {
	/* فصل عنصر المحتويات أو آخر المواضيع عن القائمة الجانبية وكلاهما سيكون بشكل عمودي ومتوافق مع عرض الصفحة */
	#last-posts, #sidebar {
		width: 99%;
		margin: 0 auto;
		float: none;
	}

	#last-posts .post:last-child {
		border-bottom: 2px solid #bfbfbf;
	}

}

@media screen and (max-width: 740px) {

	/* جعل الشعار وقائمة الروابط بشكل عمودي ومتوسط */
	#header #logo, #header #navigation {
		float: none;
	}

	#header {
		text-align: center
	}

	#header #logo {
		margin-bottom: 15px;
	}

	#header #navigation {
		margin: 0 auto;
		overflow: hidden;
		width: 345px;
	}
}

/* تنسيق قائمة الروابط والمحتويات عندما يكون عرض الشاشة أو عرض الجهاز 480 بكسل أو في وضعية Landscape */
@media screen and (max-width: 480px) {

	#header #navigation ul li a {
		 margin-right: 15px;
		 padding: 4px 15px;
	}

	#header #navigation {
		width: 313px;
	}

	#header {
		margin-bottom: 30px;
	}

	#last-posts .post h1 a {
	 	font-size: 26px;
	}

	#last-posts .post p {
		font-size: 15px;
		line-height: 24px;
	}

}

/* تصغير الشعار بشكل تلقائي ويمكن إستخدام نفس الطريقة في تصغير الصور وذلك عن طريق إستخدام صيغة النسبة بدلاً من البكسل ‪*/‬
@media screen and (max-width: 360px) {
	#header img#logo {
		width: 99%;
	}

}

/* بعض التعديلات خاصة عندما يكون عرض النافذة أقل من 332 بكسل أو عندما يكون الهاتف في وضعية Portrait */
@media screen and (max-width: 332px) {
	#sidebar .adv img {
		width: 99%;
	}

	#header #navigation ul li a {
		 margin-right: 13px;
		 padding: 7px 14px;
		 font-size: 12px;
	}

	#header #navigation {
		width: 237px;
	}

	#last-posts .post h1 a {
	 	font-size: 20px;
	}

	#last-posts .post p {
		font-size: 15px;
		line-height: 22px;
	}

	#sidebar .sidebar-item ul li a {
		font-size: 15px;
	}

	#sidebar .sidebar-item ul li {
		line-height: 25px;
	}
}

إذا أردت معرفة كيفية عمل الصفحة أساساً بتقنية HTML و CSS هذه بعض المواضيع في المدونة وخارجها قد تفيدك:

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

إختبار التصميم في عدة متصفحات وفقاً لعرض الصفحة

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

Safari For Mac


لا توجد فروقات كثيرة بين بقية المتصفحات الحديثة مثل Firefox و Chrome

Safari for iPad


768X1024:Portrait

Safari for iPhone


320X480:Portrait

Opera for iPhone


320X480:Portrait

Browser for Nexus S


480X800:Portrait – Android OS

BlackBerry Browser


320X240 for BlackBerry Bold 9900

تلميحات للعمل بشكل أفضل

هذه بعض التلميحات التي أراها مهمة أثناء العمل على تصميم نسخة للهاتف النقال وجهاز الحاسوب:

  • إستخدم أدوات تطوير مثل أداة Web Developer وFirebug الموجودة في متصفح فايرفوكس للتعديل أثناء رؤية الشكل النهائي ومعرفة قياس الصفحة الحالي والعناصر التي تظهر بشكل غير لائق عند عرضها على قياس معين.
  • إستخدم تطبيقات المحاكاة الخاصة بالهواتف النقالة مثل iOS Simulator, Android Emulator, iBBDemo فهي تساعدك على معرفة الشكل المتوقع قبل أن يظهر على الهاتف، ولا تنسى تجربة النسخة على الهواتف التي تملكها إذا كنت تمتلك هاتف يعمل على نظام iOS أو Android، يمكن معرفة المزيد عن الأدوات التي تساعدك على تصميم موقع ويب للهاتف النقال.
  • يجب مراعاة إمكانيات متصفحات الهواتف النقالة في دعمها لخصائص CSS3، فمثلاً متصفح Opera mini يقتصر على دعم بعض الخصائص مثل Media Query إلا أنه لا يدعم بعض المحددات Selectors وخصائص مثل border-radius وbox-shadow، يمكن معرفة المزيد دعم متصفحات الهواتف النقالة لخصائص CSS3.