5 طرق بسيطة لتحسين طباعة الويب
النوع هو أحد أكثر العناصر استخدامًا على الويب. فكر في الأمر. إذا لم تكن YouTube أو Flickr ، فستجد أن زوار موقعك قادمون لمحتوى النص الخاص بك - وليس العبوة الفارغة التي تحيط به. فلماذا لا يزال مصممو الويب يعالجون نصًا مثل عنصر ثانوي؟
الطباعة الجيدة تجلب الطلب إلى الصفحة وتزيد من الوضوح . يسمح للأشخاص بمعالجة المعلومات بشكل أسرع.
موقع أكثر قابلية للمساحة ، يمكن قراءته يعني زوار سعداء. يزور الزوار السعداء غالبًا ، وشراء المنتجات ، وترك التعليقات ، ومشاركة الموقع مع الأصدقاء. انظر لماذا قد يكون من المفيد التفكير؟
يمكنني أن أتحمل إلى الأبد حول ما وصلت إليه الطباعة على شبكة الإنترنت ، وإلى أي مدى يجب أن تذهب. لقد ارتدت باستمرار بين تصميم الويب والطباعة. عندما تنتقل من InDesign إلى TextMate ، تكون حدود نوع الويب واضحة وضوح الشمس .
ولكن قيل الكثير عن نوع الويب الذي لا يمكنه فعله. هذا لن يكون خدعة أخرى. بدلاً من ذلك ، دعنا نركز على 5 إصلاحات سهلة لعيون الكتابة التي تزخر عبر الويب.
1. استخدم ورقة أنماط إعادة تعيين
غبي ، لكنه صحيح: لا يوجد متصفحان يستخدمان افتراضيات العرض التقديمي نفسها. الاختلافات في الحشو والهوامش والعناوين والمسافات البادئة منتشرة. إذا كنت ترغب في أن يكون تنسيق الصفحة أكثر تناسقًا عبر المتصفحات ، فيدفع لبدء استخدام ورقة أنماط إعادة تعيين CSS.
اثنان أوصي:
ياهو CSS إعادة تعيين الأنماط
ورقة إعادة تعيين CSS الخاصة بـ Eric Meyer
2. مشاهدة القياس الخاص بك
يشير القياس إلى طول سطر واحد من النوع. خط أطول = قياس أطول. وقد أظهرت الدراسات أنه من أجل القراءة المثلى ، يجب أن يكون تشغيل أعمدة النص مثل نسخ النص الرئيسي الخاص بك في مكان ما بين 45 - 75 حرفًا (30 - 50 ems) بما في ذلك المسافات . هذا هو أحد الأسباب التي تجعل التصميمات السائلة (تلك التي تتوسع فيها الأعمدة وتتقلص لتلائم عرض المستعرض) أصعب على العيون.
بالإضافة إلى ذلك ، يجب أن تزيد قيادتك مع طول Measure الخاص بك . القائد هو مقدار المسافة البيضاء بين أسطر النص ، ويتم التحكم فيه عن طريق خاصية ارتفاع سطر CSS. إذا كنت بحاجة إلى استخدام قياس طويل جدًا ، فتأكد من فتح قيادتك.
وبالمثل ، إذا كان لديك عمود صغير مثل شريط جانبي بقياس قصير ، فيجب أن تكون قيادتك أكثر إحكامًا. أجد القيمة الافتراضية معظم المتصفحات تعيين ضيق قليلاً. خط ارتفاع حوالي 1.4em يعمل بشكل جيد لمعظم محتوى الجسم.
3. تميل إلى الفضاء بين
الأمر لا يتعلق فقط بنصك - بل حول المساحة المحيطة به. المساحة القليلة جدًا تجعل من الصعب قراءة النص ، ولكن هذا كثير جدًا. المفتاح هو إيجاد توازن بسيط يرشد العين من عنصر إلى آخر.
أحد الأخطاء الشائعة التي يقوم بها المصممون الجديد هو ملء كل بوصة من المساحة. تشير المساحة البيضاء إلى المساحة الفارغة أو "السلبية" حول المحتوى الخاص بك ، وهو أمر بالغ الأهمية. ألقِ نظرة على مجلة مصمّمة جيدًا مثل Dwell أو Good ، وستلاحظ أنه على الرغم من أنها تكلف أموال الناشر لطباعة كل صفحة ، فإنها تترك كميات وفيرة من المساحة البيضاء حول النص. ستكون الصفحة متوازنة وستنتقل عينيك من الفضاء إلى الفضاء بفعالية.
بالإضافة إلى ضبط ارتفاع خطك (كما هو مذكور في رقم 1) ، حاول زيادة مساحة الحشو والهوامش . ما لم تكن تحاول سحب خدعة بصرية مجنونة ، يجب أن يكون هناك دائمًا قدر كبير من المساحة البيضاء حول النص. لا تدع ذلك ضد العناصر الأخرى ، وخاصة الصور. دع أجزاء المحتوى الخاصة بك (العناوين ، الفقرات ، الأشرطة الجانبية ، إلخ) تتنفس.
كتب مارك بولتون مقالة مفيدة للغاية حول الفضاء الأبيض للحصول على قائمة Apart ، تحقق من ذلك.
4. لا تذهب الخط مجنون
القاعدة الأساسية الجيدة لأي مصمم هي: لا تستخدم أكثر من خطين الوجوه في التصميم الخاص بك. يمكن أن يبدو وجهان من خطوط أنيقة للغاية. قائمة بعيدا يستخدم الاختلافات من جورجيا وفيردانا لخلق نظرة أنيقة ومصقولة. ولكن الاستمرار في إضافة وجوه الخط إلى الواجهة الخاصة بك يخلق ارتباكًا لا لزوم له. وبالمثل ، تجنب استخدام الكثير من أحجام الخطوط أو الألوان أو العلاجات في صفحة أو في فقرة أو أنها سوف تتنافس مع بعضها البعض بدلاً من إضافة التأكيد على النحو المقصود.
برغم من مداخن الخط والتقنيات مثل تقنية sIFR و Typeface.js تسمح لك بتحديد أي خط تريده كإعداد افتراضي ، ومقاومة الإغراء باللجوء إلى نسخة الجسم. الخطوط الزخرفية من الأفضل الاحتفاظ بها في العناوين لأنها تؤثر على سهولة القراءة. فكر في الأمر - متى تكون آخر مرة حصلت فيها على رواية غلاف كتابي تم إعدادها بالكامل في Comic Sans؟
عند إنشاء مكدّلات الخط ، انتبه إلى حجم أزواجك. تظهر بعض الخطوط التي تظهر بطريقة مشابهة بأحجام مختلفة جدًا. Verdana و Arial هي مثال رائع على ذلك. Typetester أداة رائعة لمقارنة خطوط الويب الأساسية وإنشاء تكديس ناجح. أداة أخرى مفيدة تسمى Font Stack Builder يوضح لك النسبة المئوية للمستخدمين الذين سيشاهدون كل شكل.
بغض النظر عن الخطوط التي تقرر استخدامها ، تأكد من أنها ليست صغيرة جدًا. أعرف النص الصعب ... يبدو النص الصغير رائعًا. لكن التفكير في الفقراء ، التحديق المستخدمين! احتفظ بنص أساسي يتجاوز 10 أو 12 بكسل. إذا كنت تصر على صغير جدا ، على الأقل استخدام التحجيم النسبي لجميع مستخدمي IE 6.0 الذين لا يستطيعون جعله أكبر. اقرأ ويلسون مينر المقال على أحجام الخطوط لاتخاذ مأخذ عظيم على النقاش.
5) لا تهمل التفاصيل
قدم العميل المحتوى. فإضافته إلى الموقع هو مجرد مسألة نسخ ولصق ، أليس كذلك؟ خطأ ، خطأ ، خطأ. هذا هو مصيدة الويب فخ تقع في كثير من الأحيان.
حتى أولئك منا الذين يضيفون باهتمام علامات العنوان ، نسق كل فقرة وينظموا قوائم نقطية بحذر ننسى بعض التفاصيل الطبوغرافية الهامة. كثيرون (بمن فيهم أنا) غابوا عن التدريب على الطباعة الرسمية ، لذلك لا يمكنك لومنا بالكامل. لكن الشيطان يكمن في التفاصيل. وقتها نتبنى هذه الأساسيات:
استخدم علامات الاقتباس الذكية
ما الفرق بين الاقتباسات الذكية والاقتباسات البكم؟ يتم تقنين علامات الاقتباس الذكية (المعروفة أيضًا باسم الكتاب أو curly ) ويكون لها نمط فتح وإغلاق. عادةً ما تكون علامات الاقتباس ( المستقيمة ) عادةً صعودًا ونزولًا. الفاصلة العليا هي مطبوعًا على شكل حرف واحد فقط ، لذا تنطبق المشكلة نفسها. يجب استخدام الاقتباس الغامض (ويسمى أيضا البرايم ) فقط بين القياسات. على سبيل المثال ، يستخدم 6'4 ″ اقتباسات رئيسية مزدوجة وحيدة.
للأسف لدينا لوحات المفاتيح الافتراضية إلى ونقلت رئيس الوزراء. Microsoft Word وغيرها من برامج تحرير النصوص فقط تصحيح لهم بالنسبة لنا ونحن نكتب. تتطلب إضافة علامات الاقتباس الذكية إلى صفحات HTML مزيدًا من العمل من مطور الويب لأنك تحتاج إلى استخدام الترميز لإنشاء رموز عروض فتح وإغلاق. أرى نفس المشكلة مع رموز الشرح والعلامات والعلامات التجارية وحقوق النشر. يأخذ المبرمجون الطريق السهل عن طريق استبدالهم بالوصلات ، والفترات المتعددة ، و TM الكبيرة والسيئة (C). إن استخدام الرموز الصحيحة يحدث فرقًا بصريًا. هل هذا صحيح وجعل المحررين في كل مكان يبتسم.
كيفية عمل علامات ذكية:
#8216; = فتح سعر واحد
’ = إغلاق اقتباس واحد
“ = فتح الاقتباس المزدوج
” = إغلاق الاقتباس المزدوج
وأنا أعلم - لا أحد يريد أن يقضي كل يوم مطاردة الاسعار. لحسن الحظ ، أدوات مثل سراويل أنيقة و Textism يمكن أن تفعل الكثير من العمل الشاق بالنسبة لك من خلال تنسيق النص الذي يتضمن اقتباسات ذكية وما شابه.
اقرأ "المشكلة مع EM و EN" من قائمة Apart لمزيد من التفاصيل حول الموضوع وترميز الأحرف UTF-8 لمعظم الحروف الخاصة الشائعة.
تحذير واحد - لن تسمح لك الكثير من برامج تحرير النصوص من CMS (مثل تلك التي يستخدمها هذا الموقع) بتنفيذ علامات اقتباس ذكية دون ملحقات إضافية. محزن لكن حقيقي.
التوقف عن وضع مساحتين بعد فترة. رجاء! انها ليست ضرورية ومزعج في الواقع إلى حد ما.
على روابطك ، استخدم border-bottom: 1px solid بدلاً من زخرفة النص: underline . يمكن أن يتم تشغيل التسطير خلال أحرف descender (g، j، p، q، y) مما يجعل من الصعب قراءتها ، خاصة عند استخدام أحجام الخطوط الأصغر.
وعلى الرغم من أنها لا علاقة لها بالطباعة ، إلا أن إجراء تدقيق إملائي سريع لم يقتل أي شخص . حتى لو كان كل ما فعلته هو النسخ واللصق ، فإن الخطأ الإملائي الذي ينزلق إلى موقع حي ينعكس بشكل سيئ على جميع المعنيين.
انتبه لهذه الإصلاحات الخمسة وتصميمات موقعك ستتحسن بالتأكيد. تذكر أن هذه مجرد نقطة بداية. الطباعة الجيدة هي مهارة مكتسبة مثل أي شيء آخر ، وتتطلب الدراسة والممارسة . ترقب دائمًا المواقع التي تحصل عليها بشكل صحيح وتلاحظ ما تفعله. تحتاج الإلهام؟ تحقق من المواقع أدناه للحصول على أمثلة كبيرة من الطباعة على شبكة الإنترنت وأمثلة آخر تجد أن تكون ملهمة.
نوع ملهم:
مكتوبة حصريًا لـ WDD بواسطة Mindy Wagner.
ما رأيك في هذه الطرق البسيطة لتحسين طباعتك؟ هل تنفذها على مواقع الويب الخاصة بك؟ نود أن نسمع منك!