Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

أساسيات تصميم شبكة ويب سريعة الاستجابة

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

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

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

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

تعيين إطار العرض

يجب أن تتضمن الصفحات المحسنة للعمل على مجموعة متنوعة من الأجهزة عنصر meta viewport في رأس المستند. وتوفر علامة meta viewport إرشادات المتصفح حول كيفية التحكم في أبعاد الصفحة وحجمها.

TL;DR

  • يمكنك استخدام علامة meta viewport للتحكم في العرض وضبط إطار عرض المتصفحات.
  • ضمِّن width=device-width لمطابقة عرض الشاشة بوحدات بكسل المستقلة للجهاز.
  • ضمِّن initial-scale=1 لإنشاء علاقة من طرف لطرف بين وحدات بكسل CSS ووحدات بكسل المستقلة للجهاز.
  • تأكد من أنه يمكن الوصول إلى الصفحة من خلال عدم تعطيل ضبط المستخدم.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

يؤدي استخدام قيمة meta viewport width=device-width إلى توجيه الصفحة لمطابقة عرض الشاشة مع وحدات بكسل المستقلة للجهاز. يتيح هذا للصفحة إعادة تدفيق المحتوى ليتطابق مع أحجام الشاشات المختلفة، سواء تم العرض على هاتف جوّال صغير أم شاشة جهاز سطح مكتب كبيرة.

الصفحة التي لم يتم تعيين إطار عرض لها الصفحة التي تم تعيين إطار عرض لها

تحافظ بعض المتصفحات على أن يكون عرض الصفحة ثابتًا عند التدوير إلى الوضع الأفقي، والتكبير/التصغير بدلاً من إعادة التدفق لملء الشاشة. تؤدي إضافة السمة initial-scale=1 إلى توجيه المتصفحات لإنشاء علاقة من طرف إلى طرف بين وحدات بكسل في CSS ووحدات بكسل المستقلة للجهاز بغض النظر عن توجه الجهاز، كما يتيح ذلك للصفحة الاستفادة من العرض الأفقي الكامل.

ضمان إمكانية الدخول إلى إطار العرض

بالإضافة إلى تعيين initial-scale، يمكنك أيضًا تعيين السمات التالية على إطار العرض:

  • minimum-scale
  • maximum-scale
  • user-scalable

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

ضبط حجم المحتوى بالنسبة إلى إطار العرض

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

TL;DR

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

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

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

سيؤدي تعيين قيم عرض CSS مطلقة لعناصر الصفحة (كما هو موضح في المثال أدناه) إلى أن يكون div عريضًا جدًا على إطار العرض في الجهاز الأكثر ضيقًا (مثل الجهاز الذي يتضمن وحدات بكسل CSS قيمتها 320، مثل جهاز iPhone). بدلاً من ذلك، يمكنك استخدام قيم العرض ذات الصلة، مثل width: 100%. وبالمثل، توخ الحذر عند استخدام قيم مواضع كبيرة ومطلقة لأن ذلك قد يؤدي إلى خروج العنصر من إطار العرض على الشاشات الصغيرة.

صفحة تتضمن عنصر عرض ثابتًا بقيمة 344 بكسل على جهاز iPhone. صفحة تتضمن عنصر عرض ثابتًا بقيمة 344 بكسل على جهاز Nexus 5.

استخدام استعلامات وسائط CSS للحصول على سرعة استجابة

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

TL;DR

  • يمكن استخدام طلبات بحث الوسائط لتطبيق الأنماط بناءً على سمات الجهاز.
  • استخدم min-width على min-device-width للتأكد من تجربة البحث.
  • استخدم الأحجام النسبية للعناصر لتجنب حدوث أعطال في التنسيق.

على سبيل المثال، يمكنك وضع جميع الأنماط اللازمة للطباعة داخل استعلام وسيط طباعة:

<link rel="stylesheet" href="print.css" media="print">

بالإضافة إلى استخدام السمة media في رابط ورقة الأنماط، هناك طريقتان لتطبيق طلبات الوسائط التي يمكن تضمينها في ملف CSS وهما: @media و@import. لأغراض الأداء، يوصى باستخدام أي من الطريقتين الأوليين بدلاً من البنية @import (راجع تجنب عمليات استيراد CSS).

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

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

تطبيق طلبات الوسائط بناءً على حجم إطار العرض

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

@media (query) {
  /* CSS Rules used when query matches */
}

وعلى الرغم من أن هناك عدة عناصر مختلفة يمكننا الاستعلام عنها، فإن العناصر المستخدمة كثيرًا لتصميم الويب سريع الاستجابة هي min-width وmax-width وmin-height وmax-height.

السمة النتيجة
min-width القواعد المطبقة في أية قيمة عرض متصفح فوق القيمة المحددة في الاستعلام.
max-width القواعد المطبقة في أية قيمة عرض متصفح أدنى من القيمة المحددة في الاستعلام.
min-height القواعد المطبقة في أية قيمة طول متصفح فوق القيمة المحددة في الاستعلام.
max-height القواعد المطبقة في أية قيمة طول متصفح أدنى من القيمة المحددة في الاستعلام.
orientation=portrait القواعد المطبقة لأي متصفح تكون قيمة الطول فيه أعلى من العرض أو تساويها.
orientation=landscape القواعد المستخدمة مع أي متصفح تكون فيه قيمة العرض أعلى من الطول.

في ما يلي مثال على ذلك:

عاين إحدى الصفحات باستخدام استعلامات الوسائط لتغيير الخصائص عند إعادة ضبط حجمها.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>
  • عندما تكون قيمة عرض المتصفح بين 0 بكسل و 640 بكسل، سيتم تطبيق max-640px.css.
  • عندما تكون قيمة عرض المتصفح بين 500 بكسل و 600 بكسل، سيتم تطبيق الأنماط داخل@media.
  • عندما تكون قيمة المتصفح 640 بكسل أو أوسع، سيتم تطبيق min-640px.css.
  • عندما يكون عرض المتصفح أكبر من الطول، سيتم تطبيق landscape.css.
  • عندما يكون طول المتصفح أكبر من العرض، سيتم تطبيق portrait.css.

ملاحظة حول min-device-width

يمكنك كذلك إنشاء استعلامات بناءً على *-device-width، ولكن يوصى بأهمية الابتعاد عن ذلك.

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

علاوة على ذلك، يمكن أن يحول استخدام *-device-width دون انضباط المحتوى على أجهزة سطح المكتب أو الأجهزة الأخرى التي تتيح تغيير حجم النوافذ نظرًا لأن الاستعلام يعتمد على الحجم الفعلي للجهاز، وليس حجم نافذة المتصفح.

استخدام وحدات نسبية

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

على سبيل المثال، يضمن تعيين العرض على قيمة 100% على مستوى div علوي أنه سيتم تدوير قيمة عرض الإطار ولن يكون كبيرًا أو صغيرًا جدًا على إطار العرض. سيكون div مناسبًا، بغض النظر عما إذا كان الاتساع بقيمة 320 بكسل لجهاز iPhone، أو كان بقيمة 342 بكسل لجهاز Blackberry Z10 أو كان بقيمة 360 بكسل لجهاز Nexus 5.

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

Not recommended — fixed width

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended — responsive width

div.fullWidth {
  width: 100%;
}

كيفية اختيار نقاط الفصل

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

TL;DR

  • أنشئ نقاط الفصل بناءً على المحتوى، وليس بناءً على أجهزة أو منتجات أو علامات تجارية محددة.
  • ابدأ التصميم لأجهزة الجوّال الأصغر أولاً، ثم حسِّن التجربة شيئًا فشيئًا عند توفر مزيد من الشاشات.
  • حافظ على عدم تجاوز أسطر النصوص 70 أو 80 حرفًا كحد أقصى.

تحديد نقاط الفصل الرئيسية من خلال البدء بالصغير ومتابعة العمل بعد ذلك

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

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

عاين النشرة الجوية المعروضة على شاشة صغيرة.

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

عاين النشرة الجوية بعد أن تصبح الصفحة أوسع.

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

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

في النهاية، أعد بناء التعليمة البرمجية لشفرة CSS. في هذا المثال، وضعنا الأنماط الشائعة مثل الخطوط والرموز والوضعية الأساسية والألوان في weather.css. بعد ذلك سيتم وضع تنسيقات محددة للشاشة الصغيرة في weather-small.css وأنماط الشاشة الكبيرة في weather-large.css.

Preview of the weather forecast designed for a wider screen.

تحديد نقاط الفصل الصغيرة عند اللزوم

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

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

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Before adding minor breakpoints. After adding minor breakpoints.

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

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

تحسين النص للقراءة

تقترح نظرية سهولة القراءة التقليدية أن العمود المثالي يجب أن يحتوي على عدد يتراوح بين 70 و80 حرفًا في السطر (أي من 8 إلى 10 كلمات بالإنجليزية)، ولذلك عندما يكبر عرض النص ويتجاوز 10 كلمات، يجب التفكير في وضع نقطة فصل.

قبل إضافة نقاط فصر صغيرة. بعد إضافة نقاط فصل صغيرة.

لنلق نظرة متعمقة الآن على نموذج مشاركة المدونة الواردة أعلاه. على الشاشات الصغيرة، يظهر الخط Roboto بقياس 1em على نحو رائع بالنسبة إلى طريقة وضع 10 كلمات في كل سطر، إلا أن الشاشات الأكبر ستتطلب وجود نقطة فصل. وفي هذه الحالة، إذا كان عرض المتصفح أكبر من 575 بكسل، فسيكون العرض المثالي للمحتوى 550 بكسل.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

احذر إخفاء المحتوى تمامًا

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