Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

أول موقع ويب تنشئه لأجهزة متعددة

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

العديد من الأجهزة التي تعرض المنتج النهائي

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

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

  1. تحديد البنية المعلوماتية (تُعرف اختصارًا بـ IA) وهيكل الصفحة، 2. إضافة عناصر التصميم اللازمة ليصبح الموقع سريع الاستجابة وحتى يبدو جيدًا على جميع الأجهزة.

إنشاء المحتوى والهيكل

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

إنشاء هيكل الصفحة

في ما يلي الأشياء التي نحتاج إليها:

  1. مساحة تصف المنتج الذي نقدمه وهو دورة CS256: تصميم الويب للجوّال على مستوى عالٍ
  2. نموذج لجمع المعلومات من المستخدمين المهتمين بالمنتج
  3. وصف ومقطع فيديو تفصيلي
  4. صور المنتج في الواقع
  5. جدول بيانات يتضمن معلومات تؤيد ما نقوله

TL;DR

  • حدد المحتوى المطلوب أولاً.
  • صمم البنية المعلوماتية (IA) لإطارات العرض الواسعة والضيقة.
  • أنشئ عرضًا هيكليًا للصفحة مع المحتوى ولكن بدون تنسيق.

كما توصلنا إلى بنية معلوماتية تقريبية وتنسيق لإطارات العرض الواسعة والضيقة على حد سواء.

البنية المعلوماتية لإطار العرض الضيق البنية المعلوماتية لإطار العرض الواسع

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

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

إضافة محتوى إلى الصفحة

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

إنشاء العنوان والنموذج

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

في العنوان، يمكنك إضافة نموذج نص يصف الدورة:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

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

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

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

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

إنشاء قسم الفيديو والمعلومات

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

<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
    <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
    <p>You'll understand what it takes to:</p>
    <ul>
      <li>build great web experiences on mobile devices</li>
      <li>use the tools you need to test performance</li>
      <li>apply your knowledge to your own projects in the future</li>
    </ul>
    <video controls poster="udacity.png">
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
      <p>Sorry your browser doesn't support video. 
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
    <br>
  </div>
</div>

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

ويضمن لك اتباع أفضل الممارسات سهولة دمج الفيديو في موقعك على الويب:

  • إضافة سمة علامات التحكم لتسهيل مشاهدة الفيديو على المستخدمين.
  • إضافة صورة الملصق لتوفير معاينة المحتوى للمستخدمين.
  • إضافة عدة عناصر <source> بناءً على تنسيقات الفيديو المتوفرة.
  • إضافة نص تراجع يسمح للمستخدمين بتنزيل الفيديو إذا لم يكن بإمكانهم تشغيله في النافذة.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

إنشاء قسم الصور

قد تبدو المواقع التي لا تتضمن صورًا مملة بعض الشيء. وهناك نوعان من الصور:

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

يتضمن قسم الصور في صفحتنا مجموعة من صور المحتوى.

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

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

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

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

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

إضافة قسم البيانات المجدولة

يتناول القسم الأخير جدولاً بسيطًا يُستخدم في عرض إحصاءات معينة حول المنتج.

ويجب عدم استخدام الجداول إلا مع البيانات المجدولة، مثل قوالب المعلومات.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

إضافة تذييل صفحة

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

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

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

ملخص

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

محتوى

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

تصميم موقع ويب سريع الاستجابة

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

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

المحتوى
المحتوى والهيكل
Designed site
موقع الويب النهائي

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

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

TL;DR

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

إضافة منفذ العرض

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

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

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

يظهر إطار العرض في رأس المستند ولن نحتاج إلى الإعلان عنه سوى مرة واحدة فقط.

تطبيق التصميم البسيط

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

دليل الأسلوب

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

الألوان
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

إضافة الصور الأسلوبية

موقع الويب المصمم

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

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

يمكن تضمينه ببساطة شديدة. وفي حالتنا هذه، سنستخدمه خلفية للعنوان ونضعه من خلال محتوى CSS بسيط.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

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

تحديد نقطة الأولى

يبدأ التصميم في التأثر بشكل سلبي عند استخدام العرض 600 بكسل. وفي حالتنا هذه، يتجاوز طول السطر 10 كلمات (الطول المثالي للقراءة) وهذا هو المكان الذي نريد تغييره.

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

@media (min-width: 600px) {

}

توجد مساحة أكبر على الشاشة الكبيرة ولذلك فإنها توفر مرونة في كيفية ظهور المحتوى.

في سياق صفحة المنتج، سيبدو أننا سنحتاج إلى ما يلي:

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

تقييد الحد الأقصى لعرض التصميم

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

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

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

وستكون الحاوية عنصر div بسيطًا في النموذج التالي:

<div class="container">
</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

تغيير المساحة المتروكة وتقليل حجم النص

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

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

في صفحة المنتج، سنزيد المساحة المتروكة لعناصر القسم من خلال تعيينها لتبقى عند القيمة 5% من العرض. كما سنزيد حجم رؤوس الصفحة لكل قسم من الأقسام.

#headline {
  padding: 20px 5%;
}

ضبط العناصر على إطار العرض الواسع

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

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

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

تعويم عنصر النموذج

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

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

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}
#headline {
  padding: 20px 5%;
}

تعويم عنصر الفيديو

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

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

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

ترتيب الصور

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

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

#section2 div img {
   width: 30%;
   margin: 1%;
   box-sizing: border-box;
   border-radius: 50% 50%;
   box-shadow: black 0px 0px 5px;
 }

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

عند استخدام الصور، يجب وضع حجم إطار العرض وكثافة العرض في الاعتبار.

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

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

<img src="photo.png" srcset="photo@2x.png 2x">

الجداول

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

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

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

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

الملخص

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

وعند اتباع الإرشادات التالية، سيكون بإمكانك وضع قدميك على بداية موفقة:

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