نظرة إلى طباعة أفضل للمواقع الحديثة

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

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

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

الاختلافات في الإنترنت اليوم

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

أصبح من الممكن تمامًا الآن تضمين الخطوط الخاصة بك مع CSS @ الخط وجه خاصية. يمكنك استخدام أي كتابه صحيحه(.ttf) أو النوع المفتوح(.otf) ملف وتخزين نسخة محليا على الخادم الخاص بك. ثم مع بعض السحر CSS3 تشمل الأسرة في أي مكان على صفحة الويب الخاصة بك!

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

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

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

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

الغرض من الطباعة الرقمية

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

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

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

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

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

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

رؤوس صفحات الويب

واحدة من أهم الأصول لطباعة الويب الخاص بك هي عناوين العلامات. إذا كنت غير معتاد على عناوين HTML تتراوح من

إلى

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

على الرغم من أن مواصفات HTML5 القياسية تتضمن ما يصل إلى 6 أنماط عنوان مختلفة ، إلا أنني أوصي باستخدام ما بين 3-4. ليس من الضروري تضمينها جميعًا في صفحاتك. ومن غير المحتمل أيضًا أن تجد استخدامًا لستة عناوين مختلفة. عندما تجلس أولاً لبناء أنماطك ، جرّب صياغة بعض الأمثلة للعناوين لترى ما تحب.

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

على سبيل المثال ، لديك

يجب أن تبرز العلامات أكثر من بين جميع عناوين صفحتك.

و

هي العلامات الأكثر شعبية وتوصي بها Google للزحف إلى محتوى الصفحة. إن استخدام تأثيرات التصميم مثل الخط الغامق أو التسطير أو الحدود المتقطعة أو الألوان المختلفة سيساعد عناوينك على القفز من الصفحة.

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

بناء الارتباطات التشعبية الفريدة

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

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

عند الذهاب إلى أسلوب الروابط الخاصة بك ، يجب عليك مراعاة ما يلي - كيف ستبدو التغييرات في إعداد صفحتك, ما نوع لون الخلفية الذي تعمل عليه؟, و ما هو لون النص للتباين?

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

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

بناء قوائم التصميم

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

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

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

كيفية إنشاء ونقلت في الصفحة

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

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