البحث في الموقع

خطوط Comic Sans (كوميك سانز). أنا أتذكر تلك الأيام التي كنت أتجه فيها إلى استخدام خطوط (Comic Sans) كلّما أصابتني الحيرة في اختيار الخط المناسب لمتطلباتي. مع أنه ملف خط إلا أنه يبدو كخط عادي مكتوب باليد. وكلّما كان الناس ينتقدون أعمالي عَلمتُ بأن اختياري كان خاطئاً. ولكنني كنت صغيراً حينها ولم يكن لدي أية مشكلة في ارتكاب الأخطاء والتعلّم. ولكن إذا دخلنا المجال المهني الاحترافي فعلينا أن نفكر مرتين قبل اتخاذ القرار النهائي، الشيء نفسه ينطبق على الخطوط. تصميم الخط مهم جداً في كل تنسيقات النصوص. ستحتاج لسنوات من الخبرة والكثير من الحدس لتطوير الشعور الغريزي اللازم لتحليل الخط للحالة المعنية. سوف تغطي هذه المناقشة بعض النقاط الأساسية التي يجب أن تأخذها بعين الاعتبار أثناء بحثك عن أفضل خط لتصميمك المقبل. في نهاية المطاف يجب أن تكون النتيجة النهائية أكثر جمالاً وروعة. ملاحظة: قد تبدو أمثلتي ونصوصي في هذه المقالة بسيطة جداً ولكنها تفي بالغرض. الفكرة هي تقديم الشرح بأبسط أسلوب ممكن. تحليل نتيجتك النهائيةأليس هذا واضحاً؟ أنت لا تستطيع البدء بالبحث عن أفضل خط ما لم تكن متأكداً مما يَهدِفُ إليه الخط في النهاية. دوّن بسرعة نوعية المشاهدين اللذين تتوقعهم. هل سيكون رُوّاد موقعك الإلكتروني من محبي السهر في الليل أو من الموظفين ذوي الياقات البيضاء؟ كل هذا يعتمد على نوعية المحتوى واتجاهاتك. من السهل جداً أن تختار أي خط وتبدأ به عملكَ عندما تكون أعداد روّاد موقعكَ ليست ضخمة وكنتَ قد بدأتَ مشروعكَ للتو. وستفهم فيما بعد كم أنَّ الاختيار الخاطئ للخط يمكن أن يؤثر سلباً على موقعك الإلكتروني (بعد انتهائك من هذه المقالة، لن يكون لك أي عذر في اتخاذ قرارات خاطئة فيما يتعلق باختيار الخطوط). بمجرد أن تفهم أهدافك ستكون هذه النصائح أكثر وضوحاً. المساحة البيضاءلأولئك اللذين ابتسموا عند قراءة "المساحة البيضاء" تعلمون بالضبط ما أعنيه. الخط الذي لا يهتم بالمسافة بين حرفين سيضيّعُ الكثير من وقتك (خصوصاً في الخطوط اللاتينية). الأحرف المتلاصقة بشدة وبإحكام ستختلط للناظر إليها وستكون النتيجة المرئية غير واضحة. المساحة البيضاء المحسوبة بشكل صحيح تساعد العين على تسريع المهارات العقلية لقراءة مريحة. أنا لم أقصد أن تأخذ المساحة البيضاء كل الاهتمام طوال الوقت. سيكون هناك حالات حيث التباعد الحاد بين الأحرف سيرفع مستوى التركيز لقارئها. ولكن، مثل هذه الحالات نادرة. لا تكثر من التجربةمن الغريب أن تختار خطا بأحجام وأشكال متفاوتة لمجرد أنها توفر نظرة فنية تريدها لنصك. إذا انتهى بك المطاف مع خطوط بتشوهات فنية فإن دماغ القارئ سيستغرق وقتاً أطول لفهم المعلومة. مثل الصورة التالية حيث حاولتُ الإكثار من تجربة الخطوط وكما تشاهد النتيجة النهائية. غموض تام. المعاناة في القراءة تجعل الوقت المستغرق في القراءة أطول وهذا سيكون كافياً لجعل القارئ ينتقل إلى نافذة أخرى وحتى إلى موقع آخر. وهذا شيء لا تريد حصوله، أليس كذلك؟ خطوط العنوان هي ليست خطوط الفقرةهناك خطوط مصممة لغرض معين. كخطوط صممت خصيصاً للعناوين. استخدمهم للعناوين والقارئ سينبهر بهذا الاختيار للخط. ولكن لمجرد أن الخط يبدو جيداً للعنوان والفقرة، هذا لا يعني أن العكس صحيح. الخط المصمم للعنوان لن يفي بالغرض عند استخدامه في الفقرات. الخطوط الكلاسيكيةخطوط (Times New Roman) قد لا توفر لك مستواً رفيعاً في تصميماتك ولكنها أيضاً لن تكون رهيبة. هذه الخطوط القديمة كانت جيدة جداً في الماضي وقد استُخدِمَت مراراً وتكراراً كلما احتار المصممون في اختيار الخط الصحيح. قد لا تعطيك المستوى الرفيع الذي تتطلع إليه ولكن في بعض الأوقات هذه الخطوط كافية فحسب (مثل الخطوط المختارة في صحيفة نيويورك تايمز). قد يكون هذا الخط عالي الدقة بما يتناسب مع تصميماتك. تجنب التباين العالي (High Contrast)إذاً، كيف تطبق التباين في عالم الخطوط؟ التباين (Contrast) في هذه الحالة هو الفرق بين تصميم خطين. هذا يعني ألّا تستخدم خطين مختلفين كلياً في نفس الصفحة، والأكثر من ذلك هو أن تستخدمها بجانب بعضها. أرجوا أن تفهم أن التغيير التدريجي سيكون لطيفاً لنظر القارئ. إذا قمت بتشتيت ذهن القارئ عبر التغيرات الحادة للخطوط في زمن قصير فإن هذا سيقضي على الهدف المطلوب من القراءة. على المصممين اختيار الخطوط التي تندمج مع تصاميمهم وليس الخطوط التي تقضي على التصميم. تأكد بأن تساعد القارئ على توفير الوقت بدلاً من إضاعته أثناء محاولته فهم ما يحدث. ولكن، احصل على بعض التصفيققد تمنعك بعض من نصائحي من الحصول على التصفيق، ولكن هذا لا يعني ألّا تقوم بالتجربة. حتى لو أنك التزمت بقرار واحد في كل التصميم، فقد يكون هنالك نصوص نادرة ستكون بارزة ومهمة وستترك القارئين منتظرين للمزيد منها. إنها التجربة! الصيغة السحرية للانتهاء من الأمرأعتقد بأننا قمنا بقراءة وافية حتى الآن، وسأقدم النصيحة الأخيرة (والأكثر وضوحاً). في نهاية المطاف اختيارك وقرارك هو الذي سيُطبَّق لذلك بدلاً من التفكير كثيراً فقط نَفّذ الخطوات الأساسية التي ستتبعها في أي حالة. البحث عن الخطوط المألوفة وإنشاء قائمة.احذر من الخطوط التي لم ترها من قبل، ستقودك مباشرة إلى المنتديات ومواقع الطباعة المختلفة ولكن البحث سيكون مفيداً إن كان لديك الوقت لذلك.ابدأ باللعب بكل خط في التصميم لتشاهد النتيجة النهائية وتختار ما هو الأفضل لتصميمك. قم بزيادة أو تصغير حجم الخط أو حتى اجعلها بالأحرف الكبيرة في بعض الأحيان، انظر كيف تبدو.استخدم حدسك في الاختيار.تذكّر، إن أحببتَه فستكون قادراً على شرحه وتوضيحه أيضاً. ولكن، إذا لم تكن واثقاً من اختيارك عندها ستجد عشرة من الناقدين ينقضّون على عملكَ الشاق وتعبك. كن واثقاً (وحذراً). ترجمة -وبتصرّف- للمقال: How to Choose the Perfect Font for Your Needs.

تُناسب الأنظمة الشبكية (grids) جيدًا لاستخدامها لتقسيم محتوى مُحدّد مُسبقًا وتوجيهه للتناسب مع الصفحة، ولكن عند تصميم مواقع ويب انسيابية بطبعها، سنكون بحاجة إلى شيء ما إضافي ....حسنا، إنه التصميم المُتجاوب (responsive). إن إدخال النسب التي يستخدمها المهندسون المعماريون والنحاتون ومصمموا الكتب جميعهم قد استخدموها في أعمالهم لمساعدتهم في وضع الأساس لمنتوجاتهم من أجل تطبيق مقياس موادهم من الرسم إلى تشكيل البنية النهائية. يمكننا تطبيق آلية مماثلة على الويب من خلال التركيز على الأساس والشكل للمحتوى الذي نملكه أولًا ومن ثم العمل بشكل عكسي نحو التصميم المُتمدّد والأنظمة الشبكية المبنية على النسب والتي تدعو إلى الانسجام بين المحتوى content والمُخطط layout والشاشة screen. الأعمدة مُملة، مُشيّدة على مفهوم العلاقاتيُمكن لخيارات المخطّط أن تضع الأساس لتصاميمنا، كما أحبت مصممة الجرافيك Anne Burdick أن تُعلّمنا بقولها: هل نؤيد ترتيب المحتوى؟ أم هل يتطلب المحتوى لمسة إنسانية؟ هل ينبغي أن ننقاد نحو الفوضى؟ مهما كان الأساس لذلك، فإن كلًا منها يُمكن أن يُقدّم بشكل ناجح في مخططك من خلال استخدام: النسبة التامّة (even ratio (1:1، النسبة الذهبية (golden ratio (1:1.618، أو النسب العشوائية random proportions (أو اللانسبة) على التوالي. إن النسبة التي نختارها ستكون بمثابة الحمض النووي (DNA) الذي من خلاله تتشكّل كامل قراراتنا في التخطيط. هذا الرقم بمفرده سوف يربط كل عنصر من تصميمنا، ومن خلال ضبطه سنكون قادرين على التأثير بشكل جذري على بُنية تصاميمنا. النسب ذات الدرجات المُنخفضة -أو التي تحوي أرقامًا باختلافات صغيرة فيما بينها- سوف تُسفر عن اختلافات في المُخطط، وستعمل بشكل جيد من أجل الدقة، والمحتوى الهادئ مثل المدونات الشخصية أو المقالات الطويلة.النسب الأكبر ينتج عنها تباين في أحجام المكونات، مما يجعلها مثالية للمزيد من المحتوى الديناميكي. مصفوفة ذات نسبة تامّة الحجم من الصور مرتبة، منظمة وقوية. مصفوفة مبنية على أساس النسبة الذهبية تُشعرك بواقعيتها وديناميكيتها. مصفوفة فوضوية مُثيرة للاهتمام ومُقلقة إلى حدٍ ما. النسب المنطقية Rational Ratiosيُمكن أن تتألف النسبة من أي رقمين مُعطية إيانا عددًا غير محدود من الاحتمالات، ولكن لتضييق الاحتمالات، قد يكون من الأفضل البدء بالشيء المألوف. النسب المنطقية ودّية بنفس القدر الذي تعتبر فيه الرياضيات غير مُخيفة إلى حد كبير: النسبة التامّة Even 1:1 نسبة الأنصاف Halves 1:2 نسبة الأثلاث Thirds 1:3 نسبة الأرباع Fourths 1:4 قاعدة الأثلاث، هي مثال معروف لقوة النسب المنطقية في التخطيط. المحتوى المنظم للغاية مثل مصفوفات الصور أو مقاطع الفيديو أو النص الحيادي أو الرسمي يتم تقديمه بشكل أفضل من خلال نسبة منطقية. هذه النسب تعمل بشكل جيّد عند التصميم المُتناظر، ولكن يمكن استخدامها للتخطيطات غير المُتناظرة أيضًا. النسب غير المنطقية Irrational Ratiosفي كتاب The Book of Rectangles، Spatial Law and Gestures of The Orthogons Described – 1956 جمَع المُصمم والمهندس المعماري التشيكي Wolfgang von Wersin مجموعة من النسب الديناميكية المُستخدمة من طرف الفنانين، المهندسين المعماريين والخطاطين على مرّ التاريخ لتوجيه أعمالهم. حسب Wersin، كان يُعتقد بأنه "لا شيء يتفوّق على هذه النسب". بالتالي فلا بأس أبدا للبدء بها. Quadrat (or Square/Even) 1:1 Hemidiagon 1:1.118 Trion 1:1.154 Quadriagon 1:1.207 Biauron 1:1.236 Penton 1:1.272 Diagon 1:1.414 Bipenton 1:1.458 Hemiolion 1:1.5 Auron (the golden ratio) 1:1.618 Hecton (or Sixton) 1:1.732 Doppelquadrat (Halves) 1:2 النسبة غير المنطقية الأكثر شهرة في التصميم هي بالطبع النسبة الذهبية golden ratio المُشتقة من نماذج في الطبيعة والنموذج البشري. النسب غير المنطقية تعطينا زيادات صغيرة في النسب، وعلاقاتها الخاصة شديدة الحساسية وتعمل بشكل أفضل في المخططات غير المُتكافئة / غير المتناظرة. ماذا غير ذلك؟من تلقاء نفسها فإن النسبة ليست كافية لإنشاء تركيبة مُترابطة. لحسن الحظ فإن الهندسة النقية ليست دليلنا الوحيد هنا. لطالما أحببت مفهوم Bringhurst في اختيار الخطوط استنادًا إلى من قام بتصميمهم وأين تم ذلك. ربما بالإمكان تطبيق منهجية مُماثلة على التخطيط، حيث نشتق النسب من التأثيرات العرضية مثل نوع الخيارات أو حتى الموسيقى. العمل ضمن مقياسالتركيبة الناجحة تستخدم تنوعًا لإنشاء التسلسل الهرمي والحركة. باستخدام النسبة التي اخترناها يُمكننا استقراء مصفوفة من الأحجام مثل الكثير من النوتات على السلم الموسيقي، ثم بناء مخططاتنا باستخدام (النوتات) –أو عروض widths- من ذلك المقياس. ثم بإمكاننا تكرار وتخطي جميع أنحاء المقياس لإنشاء نوع من اللحن البصري. لبناء مقياسنا، نختار أولًا وحدة أساس. أود أن أقترح استخدام أساس حجم الخط للطابعة الخاصة بك من أجل زيادة الربط بين نسب التخطيط والمحتوى الخاصة بك. دعونا نستخدم 1em لإبقاء الحسابات بسيطة، ثم نضرب وحدتنا الأساسية بالرقم على الجانب الأيمن من نسبتنا لتوليد الحجم التالي من المقياس وتكرار ذلك حتى نحصل تنوع كافي من الأحجام لبناء مُخططنا (ثمانية أجزاء ينبغي أن تكون كافية). ثمانية نوتات مولدة باستخدام النسبة الذهبية من خلال تقرير الأحجام بناء على مقياس يُمكننا أن نختار العلاقات التي تتناسب بشكل أفضل مع أساس تصميمنا. الفروقات الكبيرة في المقاييس يمكن أن تكون نتيجتها وخيمة. يمكن أن تكون الفروقات الصغيرة أكثر دقة مما هي عليه في المخططات ذات الأعمدة التقليدية. بغض النظر عن حجم التغيير فإن النتيجة مُتصلة هندسيًا من خلال نسبتنا. مصفوفة صور من شبكة مؤلفة من ستة أعمدة ذات نسبة تامّة مصفوفة صور من شبكة مؤلفة من ستة أعمدة ذات نسبة ذهبية تخفيف الحمل الإدراكيعند العمل مع النسب والمقاييس فإن قراراتك الخاصة بالمُخطط ستصبح مُعرفة بشكل أكثر صرامة. على سبيل المثال، إذا كنا نطرح محتوى مدونة من النمط الشائع –صورة زائد نسخة- (نُسمي هذا الأمر بدعاية مُغالى بها blurb)، وهناك حاجة إلى ثلاثة أو أكثر من الأعمدة في الشبكة ذات النسبة التامّة لإعطاء أي تمييز في الحجم بين العناصر. دعاية مُغالى فيها من شبكة من ثلاثة أعمدة مُعتمدة النسبة التامة في شبكة مُعتمدة على النسبة فإن عمودين فقط سيكونان ضروريان، والمدونات مُعدّة لأن تكون أكثر تعبيرًا عن الشخصية، وأعتقد بأن النسبة الذهبية بأبعادها البشرية ستكون مُناسبة لذلك. دعاية مُغالى فيها في شبكة من عمودين مُعتمدة النسبة الذهبية عرض كل نص هو أكبر بـ 2.618 ضعفًا من الصورة المُقابلة له -أو نحو الضعف على مقياسنا-. الحد من الأعمدة يساعدنا في طريقتين، حيث يُعطينا: * وضوحًا أكبر للمخطط: يتم تعزيز التسلسل الهرمي والمحاذاة من خلال خيارات التقييد الصارمة. * قرارات أقل عند التصميم: القيود تُبقي عقولنا مُركزة على القضايا الكبرى مثل المحتوى وسهولة الاستخدام. ببساطة، فإن شبكة الدعاية المُغالى فيها blurb المُعتمدة على النسبة تُقنن العلاقة فيها بين عنصرين على أساس شكل المحتوى. باستخدام هذه العلاقة كبداية، يُمكننا تجسيد التمدد في نظام الشبكة المبني على المحتوى. لدينا هُنا شبكة دعاية مُغالى فيها شبكات داخل شبكاتيُمكننا الآن تصميم شبكات أبسط مبنية وبداخل بعضها البعض، وتتقاسم نسبة مُشتركة للحفاظ على الانسجام بين السياقات المُختلفة. أسمي شبكات مثل التي استخدمناها لمثالنا في الدعاية المُغالى بها بشبكة محتوى content grid. شبكات المحتوى تُحدّد العلاقات داخل قطعة من المحتوى قابلة للنقل وتعمل بشكل جيّد من أجل المقالات، ووحدات الأعمدة الجانبية sidebar modules، والعناصر الأخرى التي يُمكن إعادة استخدامها من نظام التصميم. لتقسيم مساحة الرؤية المُتاحة يُمكننا استخدام شبكة تخطيط عالمية layout grid والتي تتصرف أكثر كشبكات والتي قمنا باستخدامها في الويب منذ سنوات وحتى الآن. انبثاق نظام A system emergesبالاستمرار في مثال مدونتنا سوف نستخدم مقياسنا لاشتقاق شبكة محتوى أخرى من أجل منشوراتنا. في منشور المدونة النموذجي لدينا صورة كبيرة، وفحوى النص، وروابط الشبكات الاجتماعية، والصور المضمنة، وبعض المحتوى الداعم والموضوع على الهوامش. من خلال تجريب الترتيبات المتنوعة من مقياسنا يمكننا الوصول إلى شبكة تستوعب احتياجات محتوانا. شبكة مقال من أربع أعمدة باستخدام 1 و 2 من مقياسنا، العمود الأول الأرق يستضيف وحدة الشبكات الاجتماعية، بينما جميع الأعمدة الأربعة ستعطينا الفرصة لمحاذاة عناصر منشوراتنا حسب الحاجة. لتحويل هذه العروض إلى نسب CSS مُتمددة فإننا فقط بحاجة إلى إجمالي العروض المُتماثلة مع مقياسنا، ومن ثم تحويل كل عمود باستخدام صيغة Ethan Marcotte الشهيرة: حيث أن الهدف target هو عرض عمود، والسياق context هو مجموع كل الأعمدة المُستخدمة في الشبكة. (أو إذا كنت تواجه "صندوقًا مرنًا - flex-box" من أجل المُخطط فإنه يمكنك فقط استخدام أرقام النسبة بالضبط من مقياسك). يُمكننا بناء قسم ثلاثي بسيط "شبكة تخطيط" لاستيعاب أقسام محتوانا الأكبر: منطقة للعلامات التجارية branding وأزرار التنقل navigation، منطقة من أجل الجسم الرئيسي للمحتوى main body of content، ومنطقة ثالثة من أجل روابط المحتوى content links المُميزة وذات الصلة. من المُتحمل أن منطقة محتوانا الرئيسية تحتاج أن تكون أوسع لاستضافة محتوى منشوراتنا، ومنطقة أزرار التنقل navigation أكثر رقة. سوف نجد عروض الأعمدة من مقياسنا التي تُشعرنا أنها مُلائمة لمُخططنا مُعطية المساحة المُناسبة من أجل كل قسم. التماثل، شبكة مُخطط من ثلاثة أعمدة باستخدام 1 و 3 من مقياسنا. أخيرًا، نحن نضع شبكات محتوانا (شبكة المقال وشبكة الدعاية المُغالى فيها مُسبقًا) إلى شبكة مُخططنا، وخلق مُخطط يكون مُتمدد ويعمل تمامًا من قبل محتوانا. (يُمكنك الاطلاع على عرض تجريبي لمدونة عبر الضغط على الرابط التالي: http://alistapart.com/d/392/content-out-layout/demos/blog-golden.html) محتوانا الجديد المبني على النسبة الذهبية لمخطط المدونة. على سبيل المقارنة، لقد بنيت أيضًا نفس هذا المُخطط على شبكة Twitter Bootstrap’s المؤلفة من 12 عمود. (يُمكنك الاطلاع على عرض تجريبي لمدونة Bootstrap بالضغط على الرابط التالي: http://alistapart.com/d/392/content-out-layout/demos/blog-even.html ). والمُخطط المبني على النسبة يضم المحتويات بشكل أفضل وعند أي مقاس أو حجم عشوائي. التلاؤم مع القيودتكييف مُخططنا لطرق العرض المنوعة أصبح الآن أسهل بكثير، إذا أصبح لدينا مُتغيرات أقل لأخذها بعين الاعتبار. ومن أجل هذه الآلية يُمكننا بناء نموذج أولي مُتمدد في المُتصفح، ثم التدقيق أين يبدأ المُخطط بالتعثر عند تغيير حجم النافذة. التعرف على المفاهيم المُعتادةعندما تتمدد طريقة العرض وتتقلص فإن علاقاتنا سوف تتذبذب وخاصة في الأحجام فيما بين الأجهزة ذات المقاسات النموذجية مثل الجهاز اللوحي tablet والحاسب المكتبي الشخصي desktop. وبعد استكشاف كيفية انهيار المُخططات المُتمددة في العديد من المواقع ذات الزيارات الجيدة فقد قمت بعزل بعض القضايا الشائعة التي تُحدد أهمية أين يُطلب التغيير في الشبكة: سبعات 7sقاعدة السبعات 7s تجد صورة مُقصرة بحيث أن عرضها يتم تصغيره، ويتم ضغط النص المجاور طوليًا، ومقياس غير قابل للقراءة. النموذج الناتج يُشكل الرقم 7 ويخلق مُربع واضح من المساحة البيضاء تحت الصور. وهذا الأمر يصرف الانتباه بشكل خاص عند تكراره عبر المُخطط. أمثلة من نماذج قاعدة 7 والفراغات السلبية الناتجة. التراكمات Driftsتتم إزالة التراكمات من محتواها والذي لم تعد له أي علاقة بشيء. ويُمكن أن تزيل الاقتران مع القطع المُتباينة من المحتوى المُتناثر، أو تجرف فقط كل شيء من خلال هجرها. عبر المُخطط فإن الانجرافات تدمر التسلسل الهرمي وتسبب أنهارًا مُقلقة من المساحات السلبية. الصور قد جُرفت من المحتوى مُشكلة أعمدتها الخاصة بينما محتوى عناوينها ووصفها قد خسرا أي اتصال بصري ببعضها بعض. الالتصاقات Pinchesتحدث الالتصاقات عندما تقترب العناصر جدًا من الأجزاء الأخرى للمحتوى. يتم تدمير العلاقات عندما يقوم المُشاهد بعمل ارتباطات غير صحيحة: زوج من الصور مع عنوان خاطئ، روابط تذهب إلى قائمة من تشكيلها الخاص. وفي الحالات القصوى فإن المحتوى يصطدم على حساب كل قابلية للقراءة. تُسبب الالتصاقات نقاط بصرية ساخنة تصرف العين وتخلط بين العلاقات. إيجاد القيود الجوهرية elemental constraintsمن أجل التمدد فإن عناصر مُعينة ستحتاج انتباهًا خاصًا. ينبغي أن تكون المقاطع مُحافظة على مقياس قابلية القراءة. الإعلانات ينبغي أن تُحافظ على الحجم الموضع والمُتصل نسبيًا، والصور لا ينبغي أن يتم تكبيرها أكثر من دقتها. وضع عرض مُحدّد هو حل سهل، ولكنها لا تبني تمددًا حقيقيًا. عوضًا عن ذلك يُمكننا وضع عرض أدنى min-width و/أو عرض أقصى max-width في كود CSS الخاص بنا للحفاظ على سلامة هذا المحتوى. طريقة أكثر مُلائمة النهج القائم على النسبة للأنظمة الشبكية يسمح لنا بالانتقال إلى حيث لا يكون بإمكاننا معرفة حجم المكان الحاوي، ولا نوع المحتوى الذي سيتوزع في ذلك المكان. يُمكننا أن نبني أنظمة تخطيط من المحتوى لدينا وأن نعتمد على النسب للمحافظة على تركيبة مُتناغمة من هذه الأجزاء المُتفرقة. انطلاقًا من ذلك إن فهمًا عميقًا لكيفية فشل التصاميم المُتمددة يُمكن أن يُظهر لنا متى نتكيف مع هذه النُظم، ومتى نضيف قيودًا. زودنا Ethan Marcotte في 2009، ومرة أخرى في 2010 بالأدوات وأوضح أي منها للتجاوب. أعطانا Mark Boulton في 2011 فلسفة توجيهية. من نسج هذه الأفكار المؤثرة للغاية جنبًا إلى جنب مع الأسلوب المرن يُمكننا المضي قدمًا نحو تخطيطات أكثر تطورًا ومُصممة خصيصًا لاحتياجات محتوانا، ممزوجة بطابع فريد ومُناسبة لطبيعة موقعنا المُتغيرة دائمًا. ترجمة -وبتصرّف- للمقال Content out layout لصاحبه Nathan Ford.