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

إشترك في النشرة البريدية

اقسام الموقع

إغلاق القائمة
جميع الحقوق محفوظة لـ مدونة الربح © 2019

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

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

:
:


محتويات الموضوع


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

    استجابة تصميم الويب


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

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

    يجب أن تتضمن الصفحات المحسنة للعمل على مجموعة متنوعة من الأجهزة عنصر 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%. وبالمثل، توخ الحذر عند استخدام قيم مواضع كبيرة ومطلقة لأن ذلك قد يؤدي إلى خروج العنصر من إطار العرض على الشاشات الصغيرة.


    استخدام استعلامات وسائط 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القواعد المستخدمة مع أي متصفح تكون فيه قيمة العرض أعلى من الطول.
    في ما يلي مثال على ذلك:

    

    

    

    

    

    


    

    

    

    

    

    


    

    
<رابط يختلط = "أنماط" وسائل الاعلام = "(ماكس-العرض: 640px)" أ href = "ماكس-640px.css" > <رابط يختلط = "أنماط" وسائل الاعلام = "(مين العرض: 640px)" أ href = "دقيقة -640px.css " > <رابط يختلط = " أنماط " وسائل الاعلام = " (اتجاه: صورة) " أ href = " portrait.css " > <رابط يختلط = " أنماط " وسائل الاعلام = " (الاتجاه: أفقي) " أ href = " المشهد . المغلق " > <نمط> media ( مين العرض : 500px ) و ( ماكس العرض : 600px ل ) {     H1 { اللون : ضارب الى الحمرة . } . تنازلي : بعد { المحتوى : "في الواقع، انها بين 500px 600px لواسعة" . } } </ النمط>   
    

    
   
    

    
   
    

    
   
    

    


    

    
      
    

    


    

    
      
    

    
    
    
    

    
    
    

    
      
    

    
    
    

    
 
    • عندما تكون قيمة عرض المتصفح بين 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.
    علاوة على ذلك، يتيح استخدام الوحدات النسبية للمتصفحات عرض المحتوى بناءً على مستوى التكبير/التصغير المستخدم بدون الحاجة إلى إضافة أشرطة تمرير أفقية إلى الصفحة.
    غير موصى بها - عرض ثابت
    

    

    

    

    

    


    

    

    

    

    

    


    

    
div.fullWidth {
    

    
  width: 320px;
    

    
  margin-left: auto;
    

    
  margin-right: auto;
    

    
}
    أوصى - عرض تستجيب
    

    

    

    

    

    


    

    

    

    

    

    


    

    
div.fullWidth {
    

    
  width: 100%;
    

    
}

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

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

    TL، DR

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

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

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

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

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

    

    

    

    

    


    

    

    

    

    

    


    

    
<رابط يختلط = "أنماط" أ href = "weather.css" > <رابط يختلط = "أنماط" وسائل الاعلام = "(ماكس-العرض: 600px ل)" أ href = "الطقس-2-small.css" > <رابط يختلط = " أنماط " وسائل الاعلام = " (مين العرض: 601px) " أ href = " الطقس-2-large.css " >
    في النهاية، أعد بناء التعليمة البرمجية لشفرة CSS. في هذا المثال، وضعنا الأنماط الشائعة مثل الخطوط والرموز والوضعية الأساسية والألوان في weather.css. بعد ذلك سيتم وضع تنسيقات محددة للشاشة الصغيرة في weather-small.css وأنماط الشاشة الكبيرة في weather-large.css.

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

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

    

    

    

    

    


    

    

    

    

    

    


    

    
media ( دقيقة - عرض : 360px ) {   الجسم {     الخط - حجم : 1.0em . } } media ( دقيقة - عرض : 500px ) { . سبعة - اليوم - FC . درجة الحرارة - المنخفضة ، . سبعة - اليوم - FC . درجة الحرارة - ارتفاع {     عرض : مضمنة - كتلة .     عرض : 45 ٪؛ } . سبعة - اليوم - FC . سبعة - اليوم - درجة الحرارة {     الهامش - اليسار : 5 ٪. } . سبعة - اليوم - FC . رمز {     عرض : 64px ؛     ارتفاع : 64px ؛ } }   
    

    


    

    
 
    

    
  
    

    


    

    
   
    

    
  
    

    
  
    

    
 
    

    
 
    

    
  
    
    

    
  
    

    
 
    

    
  
    
    

    
  
    

    
 
    

    
 
    

    
 



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

    

    

    

    

    


    

    

    

    

    

    


    

    
media ( دقيقة - عرض : 700px ) { . الطقس - توقعات {     عرض : 700px ؛ } }   
    

    
  
    

    
 
    

    
 

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

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



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

    

    

    

    

    


    

    

    

    

    

    


    

    
media ( دقيقة - عرض : 575px ) {   المادة {     عرض : 550px ؛     الهامش - غادر : السيارات .     الهامش - الحق : السيارات . } }   
    

    


    

    
 
    

    
 
    

    
 
    

    
 

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

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



    مواضيع متعلقة
    الوسوم: , ,
    شارك المقال

    Health❤
    @مرسلة بواسطة
    كاتب ومحرر في موقع مدونة الربح .

    شاهد ايضاً


    تعليقات: 0

    إرسال تعليق