قاعة مشاهير تصميم الويب

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

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

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

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

التخطيطات: جداول HTML وعوامات CSS

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

جداول HTML

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

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

يطفو CSS

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

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

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

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

تباعد العناصر: مسافات غير فاصلة (   ) و Spacer.gif

غالبًا ما بحث مصممو الويب المهتمون بالتفاصيل عن طرق لتباعد العناصر وصولاً إلى البكسل الدقيق. مرة أخرى ، لم يكن هذا سهلاً في اليوم. وبالتالي ، تم استخدام الفضاء غير المنكسر (& nbsp ؛) و spacer.gif للحصول على مزيد من التحكم في التباعد.

مسافة غير فاصلة (   )

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

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

Spacer.gif

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

جعلت CSS كل من هذه الاختراقات قديمة. لكن ألا تعرف أن محرر WordPress Gutenberg لديه كتلة Spacer تقوم بنفس الشيء إلى حد كبير؟ يذهب فقط لإظهار أن الحاجة لا تزال قائمة.

الطباعة: نص قائم على الصورة

كانت الحاجة إلى هذا بسيطة جدًا. اقتصرت شبكة الويب المبكرة بشكل أساسي على الخطوط المثبتة على نظام المستخدم. بالطبع ، لم يكن لدى المصممين أي وسيلة لمعرفة جميع الخطوط التي كان بإمكان المستخدمين الوصول إليها - بخلاف الأساسيات مثل Times New Roman و Georgia و Arial و Helvetica.

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

رؤوس مثبتة والتنقل: إطارات

ربما كانت إطارات HTML سابقة لعصرها ، حيث أن العديد من المهام التي استخدمناها من أجلها تتم الآن من خلال CSS و JavaScript.

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

وكان أهمها القدرة على إنشاء عناوين "مثبتة" والتنقل. أثناء قيام المستخدم بالتمرير عبر المحتوى ، لا يزال بإمكانه التنقل بسهولة عبر الموقع.

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

تحسين الصورة: صور مقطعة

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

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

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

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

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

استرضاء Internet Explorer: <!--[if IE]>

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

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

لقد كان متعدد الاستخدامات إلى حد ما حيث يمكنك تطبيق الأنماط على جميع إصدارات IE <!--[if IE]> ، أو استهداف تلك التي تستخدم إصدارات أقدم <!--[if lt IE 11]> . يمكنك أيضًا استخدامه في الاتجاه المعاكس ، بحثًا عن إصدارات أكبر من أو تساوي إصدارًا معينًا <!--[if gte IE 10]> .

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

مأجور تصميم الويب للتذكر

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

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

والأفضل من ذلك أنهم ساعدوا في تمهيد الطريق لما هو الويب اليوم. تم استبدال معظم العناصر الموجودة في هذه القائمة بمعايير HTML و CSS ، والتي تفيد الجميع.