CSS هي أفضل طريقة لتصميم تصاميم صفحات الويب
قد يكون تعلم كيفية كتابة تخطيطات CSS أمرًا صعبًا ، خاصة إذا كنت معتادًا على استخدام الجداول لإنشاء تصميمات صفحات الويب الرائعة. ولكن بينما تسمح HTML5 بجداول التخطيط ، إلا أنها ليست فكرة جيدة.
الجداول غير قابلة للوصول
تمامًا مثل محركات البحث ، يقرأ معظم قارئي الشاشة صفحات الويب بالترتيب الذي يتم عرضه به في HTML. والجداول يمكن أن تكون صعبة للغاية بالنسبة لقارئي الشاشة. هذا لأن المحتوى في تخطيط جدول ، بينما يكون خطيًا ، لا يكون دائمًا منطقيًا عند القراءة من اليسار إلى اليمين ومن الأعلى إلى الأسفل. بالإضافة إلى ذلك ، مع الجداول المتداخلة ، ومختلف المسافات على خلايا الجدول يمكن أن تجعل الصفحة صعبة للغاية لمعرفة.
هذا هو السبب في أن مواصفات HTML5 توصي باستخدام جداول التخطيط ولماذا يمنع HTML 4.01 من ذلك. صفحات الويب التي يمكن الوصول إليها تسمح لمزيد من الناس لاستخدامها وهي علامة لمصمم محترف.
باستخدام CSS ، يمكنك تعريف القسم على أنه ينتمي إلى الجانب الأيسر من الصفحة ولكن ضعه في HTML. بعد ذلك ، ستقرأ قارئات الشاشة ومحركات البحث على حد سواء الأجزاء المهمة (المحتوى) أولاً والأجزاء الأقل أهمية (التنقل) الأخيرة.
الجداول صعبة
حتى إذا قمت بإنشاء جدول باستخدام محرر ويب ، ستظل صفحات الويب الخاصة بك معقدة للغاية وصعبة. باستثناء معظم تصميمات صفحات الويب البسيطة ، تتطلب معظم جداول التخطيط استخدام الكثير من والسمات والجداول المتداخلة.
قد يبدو بناء الطاولة أمرًا سهلاً أثناء قيامك بذلك ، ولكنك تحتاج إلى الحفاظ عليه. بعد ستة أشهر على الخط ، قد لا يكون من السهل تذكر سبب تداخل الجداول أو عدد الخلايا المتتالية وما إلى ذلك. بالإضافة إلى ذلك ، إذا كنت تحتفظ بصفحات ويب كعضو في الفريق ، فعليك أن تشرح لكل شخص كيفية عمل الجداول أو تتوقع أن يستغرق وقتًا إضافيًا عندما يحتاج إلى إجراء تغييرات.
يمكن أن يكون CSS معقدًا أيضًا ، ولكنه يحافظ على العرض التقديمي منفصلًا عن HTML ويجعل الحفاظ عليه أكثر سهولة على المدى الطويل. بالإضافة إلى ذلك ، مع تخطيط CSS ، يمكنك كتابة ملف CSS واحد ، وتمييز كل صفحاتك بحيث تبدو بهذه الطريقة. وعندما ترغب في تغيير تصميم موقعك ، يمكنك ببساطة تغيير ملف CSS واحد ، وكل موقع chnges - لا يمر كل صفحة واحدة في كل مرة لتحديث الجداول لتحديث التخطيط.
الجداول غير مرنة
على الرغم من أنه من الممكن إنشاء تخطيطات للجداول مع عرض النسبة المئوية ، إلا أنها غالباً ما تكون أبطأ في التحميل ويمكن أن تغير بشكل مثير شكل التخطيط الخاص بك. ولكن إذا استخدمت عروضًا محددة للجداول الخاصة بك ، فسينتهي الأمر بتخطيط جامد للغاية لن يبدو جيدًا على الشاشات التي تكون بحجمها مختلفًا عن شاشاتك.
من السهل نسبيًا إنشاء تخطيطات مرنة تبدو جيدة على العديد من الشاشات والمتصفحات والحلول. في الواقع ، مع استعلامات وسائط CSS ، يمكنك إنشاء تصميمات منفصلة لشاشات مختلفة الأحجام.
الجداول المتداخلة تحميل More Slowly Than CSS لنفس التصميم
الطريقة الأكثر شيوعًا لإنشاء تصميمات خيالية مع الجداول هي "احتضان" الجداول. هذا يعني أنه يتم وضع جدول واحد (أو أكثر) داخل آخر. وكلما زاد عدد الجداول المتداخلة ، زادت المدة التي سيستغرقها متصفح الويب لعرض الصفحة.
في معظم الحالات ، يستخدم تخطيط الجدول المزيد من الأحرف لإنشاء أكثر من تصميم CSS. وهناك عدد أقل من الأحرف يعني أقل للتنزيل.
الجداول يمكن أن يضر محرك البحث الأمثل
يحتوي تخطيط الجدول الأكثر شيوعًا على شريط تنقل على الجانب الأيسر من الصفحة والمحتوى الرئيسي على اليمين. عند استخدام الجداول ، يتطلب هذا (بشكل عام) أن يكون أول محتوى يعرض في HTML هو شريط التنقل الأيسر. تصنف محركات البحث الصفحات استنادًا إلى المحتوى ، وتقرر العديد من المحركات أن المحتوى المعروض في أعلى الصفحة أكثر أهمية من المحتوى الآخر. لذلك ، ستظهر الصفحة التي تحتوي على تنقل يسرى أولاً ، على محتوى أقل أهمية من التنقل.
باستخدام CSS ، يمكنك وضع المحتوى المهم أولاً في HTML ، ثم استخدام CSS لتحديد المكان الذي يجب وضعه فيه في التصميم. وهذا يعني أن محركات البحث ستشاهد المحتوى المهم أولاً ، حتى إذا وضعه التصميم في أسفل الصفحة.
الجداول لا تُعد دائمًا جيدة الطباعة
لا تقوم العديد من تصميمات الطاولات بالطباعة بشكل جيد نظرًا لأنها واسعة جدًا جدًا بالنسبة للطابعة. لذا ، لجعلها مناسبة ، ستقوم المتصفحات بتقطيع الجداول وطباعة الأقسام أدناه مما يؤدي إلى صفحات مفككة للغاية. أحيانًا ينتهي بك الأمر إلى صفحات تبدو جيدة ، ولكن الجانب الأيمن بأكمله مفقود. صفحات أخرى ستقوم بطباعة أقسام على أوراق مختلفة.
باستخدام CSS ، يمكنك إنشاء ورقة أنماط منفصلة فقط لطباعة الصفحة.
جداول التخطيط غير صالحة في HTML 4.01
تنص مواصفات HTML 4 على: "يجب عدم استخدام الجداول تمامًا كوسيلة لتخطيط محتوى المستند لأن هذا قد يؤدي إلى حدوث مشكلات عند عرض الوسائط غير المرئية."
لذا ، إذا كنت تريد كتابة HTML 4.01 صالح ، فلا يمكنك استخدام الجداول للتخطيط. يجب عليك فقط استخدام الجداول للبيانات المجدولة. وتبدو البيانات المجدولة بشكل عام شيئًا قد تعرضه في جدول بيانات أو ربما قاعدة بيانات.
ولكن HTML5 غيرت القواعد وأصبحت الآن جداول التخطيط ، بينما لا يوصى بها ، هي HTML صالحة الآن. تنص مواصفات HTML5 على: "يجب عدم استخدام الجداول كمساعدات تخطيط."
لأن جداول التخطيط صعبة على قارئات الشاشة للتمييز ، كما ذكرت أعلاه.
يعد استخدام CSS في موضع صفحاتك وتخطيطها هو الطريقة الصحيحة الوحيدة في HTML 4.01 للحصول على التصميمات التي استخدمتها لاستخدام الجداول لإنشاء. وتوصي HTML5 بشدة بهذه الطريقة أيضًا.
الجداول للتخطيط يمكن أن تؤثر على فرص العمل الخاصة بك
نظرًا لأن المزيد والمزيد من المصممين الجدد يتعلمون HTML و CSS ، فإن مهاراتك في تخطيطات الطاولة ستقل حسب الطلب. نعم ، صحيح أن العملاء لا يخبرونك عادةً بالتكنولوجيا الدقيقة التي يجب عليك استخدامها لإنشاء صفحات الويب الخاصة بهم. لكنهم يطلبون منك أشياء مثل:
- صفحات الويب التي يسهل الوصول إليها: التصميمات التي يمكن أن يطلع عليها قراء الشاشة يتم تفويضها من قبل العديد من البلدان والشركات تجد إمكانية الوصول إليها أكثر وأكثر أهمية كل يوم.
- صفحات ويب يمكن صيانتها: تصميمات يمكن أن تأخذها معهم حتى إذا لم تكن ستحافظ عليها في المستقبل.
- تصميمات مرنة: تصميمات تعمل عبر العديد من المتصفحات والحلول والأجهزة.
- صفحات التنزيل السريع: أصبحت السرعة أكثر أهمية ، حتى بالنسبة إلى تحسين محركات البحث.
- تصميمات قابلة للطباعة: الصفحات التي تطبع بدون نصوص خاصة أو صفحات إضافية.
إذا لم تتمكن من تقديم ما يطلبه العملاء ، فسيتوقفون عن القدوم إليك لتصميماتهم ، ربما ليس اليوم ، ولكن ربما في العام المقبل أو العام التالي. هل بإمكانك حقاً أن تدع عملك يعاني لأنك لست على استعداد للبدء في تعلم أسلوب مستخدم منذ أواخر التسعينيات؟
الأخلاقية: تعلم كيفية استخدام CSS
قد يكون من الصعب تعلم CSS ، لكن أي شيء يستحق العناء يستحق الجهد. لا تحتفظ بمهاراتك من الركود. تعلم CSS وقم بإنشاء صفحات الويب الخاصة بك بالطريقة التي كان من المفترض إنشاؤها بها - مع CSS للتخطيط.