دليل بسيط لطباعة مستجيبة
تركز الغالبية العظمى من المقالات التي تتحدث عن التصميم التفاعلي على مجالين رئيسيين: شبكة مرنة ، مرنة ، وصور مرنة ومرنة. ما لا يتحدث عنه كثيرون هو الطباعة.
ومع ذلك ، بالنسبة لغالبية مواقع الويب ، فإن النص ، المحتوى ، هو العنصر الأكثر أهمية.
من المفترض ، بالنسبة إلى المواقع التي تكون فيها الصور أو الفيديو هي المحتوى الأساسي ، أن النوع المتجاوب أقل أهمية ، ولكن لا يزال من غير الممكن تجاهله.
والخبر السار هو أن الطباعة المتجاوبة ليست صعبة التحقيق بشكل خاص. نحتاج فقط إلى تخصيص بعض الوقت للتفكير في كيفية استجابة النوع لدينا للتغييرات في حجم الشاشة ، ثم تنفيذ هذه التغييرات.
مبادئ النوع المستجيب
هناك نوعان من المبادئ الأساسية لإنشاء الطباعة التفاعلية السريعة. الأول هو نوع يمكن تغيير حجمه. وهذا يعني أن النوع لا يقوم فقط بتغيير حجمه بناءً على حجم الشاشة ، ولكن أيضًا يمكن تغيير حجمه بواسطة المستخدم.
والثاني هو أطوال خط الأمثل ، والتي تحافظ على سهولة القراءة. وهذا يعني أن بعض الشاشات ، مما يجعل مساحة المحتوى أصغر وأطوال السطر أقصر ، أكثر منطقية ، على الرغم من أن المحتوى يمكن أن يمتد من الناحية النظرية على نطاق أوسع.
نوع كبير الحجم باستخدام rems
يستخدم معظم المصممين البيكسل أو نظام الإدارة البيئية لتحديد حجمها. تعد Ems خيارًا أفضل ، حيث تسمح للمستخدمين بتغيير نوع المتصفح. ولكن نظام الإدارة البيئية يتعلق بالعنصر الأم ، مما يعني أنه أكثر تعقيدًا للاستخدام من البكسلات ، والتي تتراكم فقط في التصاميم سريعة الاستجابة حيث توجد أحجام وعلاقات أكثر لتتبعها.
Rems تقدم بديلا أفضل لنظام الإدارة البيئية. انهم يعملون بطريقة مماثلة تقريبا ، باستثناء واحد الفرق الرئيسي: وحدات ريم هي نسبة إلى html عنصر ، بدلا من العناصر الفردية. هذا يجعل الحفاظ على الحجم المناسب من نوعك أكثر وضوحًا.
يتم دعم وحدات Rem الآن في جميع المتصفحات الحديثة الكبرى ، بما في ذلك Opera من الإصدار 11.6 و IE9. على الرغم من أنك قد ترغب في تضمين خاصية الرجوع إلى المتصفحات السابقة ، فهناك دعم واسع بما يكفي لاستخدامه الآن.
بما أنك ستستخدم وحدات rem لتغيير الحجم ، تأكد من تطبيق إعادة التعيين على html عنصر وليس بك body جزء. لذلك يجب أن تبدو كما يلي:
html { font-size:100%; }
الآن سيتم تطبيق وحدات rem على حجم الخط الافتراضي للجهاز.
القادم سوف تحتاج إلى تحديد حجم الخط لكل حجم العرض. أوصي بتجريب أحجام الخطوط الفعلية على الأجهزة المختلفة لمعرفة ما يبدو أفضل. يعتمد إلى حد كبير على الخطوط التي اخترتها ، بالإضافة إلى التصميم العام.
ستحتاج على الأرجح إلى تحديد أحجام خطوط متعددة استنادًا إلى أحجام مختلفة للشاشة ، وهذا أمر جيد جدًا. على سبيل المثال ، قد يبدو CSS على هذا النحو:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
منح ، هذا هو رمز مبسط لهذه المادة ، لكنه يمنحك نقطة انطلاق. قد تلاحظ أنه بالنسبة لأصغر الشاشات ، يتم تحديد حجم أكبر قليلاً. وذلك لأن أحجام الخطوط الأكبر عادةً أسهل في القراءة على الشاشات الصغيرة.
بالطبع ، سترغب في تقديم مواصفات إضافية لأشياء مثل h1 عناصر وهذا. أنا أوصي باستخدام أداة مثل عينة خط الويب لنرى كيف سيبدو نوعك في الواقع.
الحفاظ على طول الخط الأمثل
في حين أن النوع الذي يمكن تغيير حجمه يعد مفهومًا واضحًا إلى حد ما ، إلا أن الحفاظ على طول الخط المناسب عبر الأجهزة المتعددة يصبح خادعًا بعض الشيء. كان هناك قدر كبير من الجدل حول ما هو طول الخط الأمثل للقراءة ، ولكن وفقا ل معهد بايمارد ، يبدو أن الإجماع يتراوح بين 50 و 75 حرفًا في كل سطر.
كما يوصون باستخدام حاوية عرض ثابتة للمحتوى الخاص بك ، ولكن ذلك يهزم الغرض من التصميم المتجاوب ، لذلك نحن بحاجة إلى التعامل مع الأشياء بطريقة مختلفة قليلاً إذا أردنا الحفاظ على الاستجابة بأطوال خط محسنة.
أولاً ، انظر إلى أحجام الشاشات المختلفة التي ستصممها واكتشف حجم الخط الذي يجب أن تستخدمه للحصول على 50 حرفًا تقريبًا على سطر. بالنسبة إلى الشاشات الصغيرة جدًا ، قد تحتاج إلى استخدام أقل من 50 حرفًا في كل سطر للحفاظ على حجم خط يمكن قراءته ، ولكن يجب أن يكون 50 هدفًا. هذا يعطينا نقطة انطلاق جيدة لحجم الخط الخاص بنا.
يجب أيضًا تعيين أقصى عرض (أو نقاط قطع) لمناطق محتوى النص. انظر إلى حجم النوع الذي تستخدمه لحجم شاشة محدد ، ثم حدد عرض حاوية المحتوى عندما يكون لديك 75 حرفًا تقريبًا لكل سطر. لن يكون هذا الأمر صحيحًا ما لم تكن تستخدم خطًا أحاديًا ، ولكن يجب أن تكون قادرًا على الوصول إلى متوسط بسهولة. ويصبح هذا أقصى عرض للحاوية.
لنفترض أن حجم الخط الافتراضي لجهاز معين هو 16 بكسل ، وأنك تريد أن يكون حجم الخط 20 بكسل (لنفترض أننا نستخدم حرفًا مصليًا مثل Droid Serif لهذا المثال). هذا يعني أنك ستحدد النوع ليكون 1.25rem. عند هذا الحجم ، ستحتاج إلى عرض حاوية بعرض 675 بكسل تقريبًا. هذا يعطينا عدد الأحرف في 60S في المتوسط ، وهو الحق في عرض هدفنا.
لتحديد عرض الحاوية ، ما عليك سوى استخدام هذا الرمز:
@media (min-width: 950px) { .container {width:675px;} }
يمكنك تعيين أقصى عرض للخط لكل حجم للعرض ، أو فقط لعروض محددة. باستخدام الشاشات الأصغر حجمًا ، قد ترغب في ترك عرض الحاوية وترك النوع منتشرًا على كامل عرض الشاشة.
الآن ، مع شاشات أكبر بكثير ، قد ترغب في النظر في تقسيم المحتوى الخاص بك إلى عدة أعمدة. لنفترض ، على سبيل المثال ، أنك تعمل مع جهاز iPad في وضع العرض الأفقي. يبلغ عرض الشاشة 2048 بكسل. يؤدي امتداد الخطوط الخاصة بك لملء الشاشة إلى صعوبة قراءتها ، لكن توسيط محتواك وإبقاء طول خطك أقصر من هزيمة هدف عرض المحتوى في الوضع الأفقي.
لذلك ، قم بتعيين نوعك في عمودين (أو حتى ثلاثة ، حسب حجم الخط). مواصفات متعدد الأعمدة في CSS3 يجعل من السهل جدًا تقسيم النص إلى عدة أعمدة دون الحاجة إلى تغيير تخطيطك بالكامل. ادمج ذلك مع استعلامات الوسائط ، وأصبح لديك الآن تنسيق محتوى ينقسم إلى عمودين أو ثلاثة أعمدة للشاشات الأكبر ، مع الحفاظ على كل من حجم الكتابة مقروءًا للغاية وطول الخط المقروء.
مرة أخرى ، رمز القيام بذلك بسيط للغاية:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
الآن ، على شاشات أكبر من 1140 بكسل ، ستحصل على تقسيم المحتوى الخاص بك إلى عمودين ، مما يجعل أطوالك أكثر قابلية للقراءة.
باستخدام الخطوط البديلة
شيء واحد غالبًا ما يتم تجاهله عند الحديث عن الطباعة المتجاوبة ، هو فكرة أن الخطوط المختلفة قد لا تعمل بشكل جيد في أحجام مختلفة. هذا ينطبق بشكل خاص على خطوط العرض.
هل يعني ذلك أنه يجب تجنب استخدام هذه الخطوط في التصميمات سريعة الاستجابة؟ بالطبع لا. بدلاً من ذلك ، ما عليك سوى تحديد خطوط مختلفة للعناصر المختلفة في التخطيطات الأكبر أو الأصغر.
على سبيل المثال ، مع تصميم لأجهزة الكمبيوتر المكتبية ، قد ترغب في استخدام خط مثل سيناريو الدوري لرؤوسك. ولكن على شاشة أصغر ، مثل iPhone ، ستحتاج إما إلى جعله كبيرًا إلى حد يسيطر على المحتوى ، أو سيكون من الصعب جدًا قراءته.
ما يمكننا القيام به هنا هو استخدام League Script لشاشات العرض الكبيرة (iPad ، سطح المكتب ، إلخ) ، أثناء التحويل إلى نسخة أكبر من خط الجسم للعرض الأصغر (مثل iPhone أو الهواتف الذكية الأخرى).
للقيام بذلك ، يمكنك ببساطة تحديد شيء مثل هذا:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
بالطبع يمكن القيام بذلك لأكثر من مجرد العناوين الخاصة بك ، أيضا.
استنتاج
في حين ركز التصميم المتجاوب بشكل كبير على الصور والتخطيط العام ، فإن الطباعة لا تقل أهمية عن كل تلك الأشياء. أفضل جزء هو أنه ليس من الصعب بشكل خاص تكييف وتحسين الطباعة الخاصة بك لتصميم متجاوب.
من الضروري أن تضع بنفس الوقت والجهد الذي تضعه في عناصر أخرى من تصميمك. يُعد الحفاظ على قابلية قراءة المحتوى النصي عنصرًا أساسيًا لإنشاء تجربة مستخدم مثالية لزائريك.
هل تضع قدرًا كبيرًا من التركيز على الطباعة المتجاوبة في تصميماتك بينما تقوم بعمل الشبكات والصور المتجاوبة؟ لما و لما لا؟