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

تخطيط موقع الويب باستخدام HTML/HTML5 وCSS/CSS3

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

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

ربما سمعت أسماء أخرى ولم تفهم معناها. قد لا تعرف أبدًا ما هو flexbox، لكنها مرونة مذهلة تسمح لك بعمل العجائب اليوم.

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

لا أعتقد أن الأمر يستحق شرح تخطيط موقع الويب لفترة طويلة. باختصار، هذا هو إنشاء كود HTML وأوراق أنماط CSS وفقًا لتصميم تم تصوره مسبقًا. في أغلب الأحيان، يتم تخطيط الصفحات بناءً على تخطيط PSD المُعد مسبقًا في Photoshop.

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

متطلبات التصميم الحديث

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

• التوافق عبر المتصفحات
• القدرة على التكيف
• رمز الحد الأدنى
• سرعة تحميل عالية للصفحة
• دلالات
• صلاحية

دعونا نلقي نظرة على أنواع التخطيط الموجودة اليوم وسوف تفهم ما يعنيه كل ذلك.

أنواع تخطيط الموقع

في هذه المقالة أريد أن أعطي الفكرة الأكثر عمومية فقط. ومن الممكن أن أصف الكثير منهم بمزيد من التفصيل قريبًا.

• تخطيط ثابت أو ثابت. بغض النظر عن حجم نافذة المتصفح أو الجهاز، سيكون عرض الصفحات ثابتًا. تشغل جميع العناصر عرضًا محددًا بدقة بالبكسل على الصفحة. إذا كانت دقة الشاشة كبيرة وتم تكبير نافذة المتصفح لملء الشاشة بأكملها، فعادةً ما تكون هناك مساحة خالية على الجانبين. وعلى العكس من ذلك، على الأجهزة المحمولة ذات التخطيط الثابت، يظهر شريط تمرير في أسفل الصفحة.
• تخطيط المطاط. تشغل الصفحة عرض المتصفح بالكامل، بغض النظر عن حجمها وبغض النظر عن الجهاز الذي تفتح هذه الصفحة عليه. يتم تعيين عرض عناصر الصفحة كنسبة مئوية من عرض النافذة، وبالتالي تشغل المساحة المتوفرة بالكامل. مع هذا التخطيط، من الصعب تحقيق تصميم جيد وسهل الاستخدام لجميع درجات دقة الشاشة الممكنة، لأن الصفحات ستبدو مختلفة.
• تخطيط جدولي أو تخطيط الجدول. في هذه الحالة، يتم إنشاء شبكة الصفحة باستخدام الجداول. تخيل أن هناك جدولًا رئيسيًا في الصفحة، وفي خلاياه، إذا لزم الأمر، هناك جداول متداخلة، ويمكن أن تحتوي خلاياها على جداول جديدة، وهكذا إلى ما لا نهاية. تبين أن الكود مرهق وغير مريح للغاية ولم تعد هناك حاجة إليه. اليوم، لم يتم وضع الصفحات بهذه الطريقة لفترة طويلة. علاوة على ذلك، فإن محركات البحث لا تحب مثل هذه الصفحات وتقوم بفهرستها بشكل سيء. إذا أردت، يمكنك وضع جدول أو عدة جدول على الصفحة، ولكن لا تستخدمها لتنظيم الصفحة.
• تخطيط الكتلة أو تخطيط الكتلة أو تخطيط div. ربما يكون هذا هو التصميم الأكثر شيوعًا اليوم. يتم إنشاء شبكة الصفحة من العديد من الكتل
  ، والتي تتداخل مع بعضها البعض. للوصول إليها، يتم استخدام سمات المعرف والفئة. افتح الكود المصدري (Ctrl + U) لأي صفحة ويب تقريبًا وسترى هذا التخطيط.
• التخطيط التكيفي أو التخطيط المحمول. ويسمى أيضًا أحيانًا بالتخطيط سريع الاستجابة. الميزة الرئيسية هي أن الصفحات تتكيف بشكل جيد مع أي دقة شاشة للمستخدم. لا يهم ما إذا كنت قد فتحت الصفحة على كمبيوتر محمول مكتبي، أو على شاشة عريضة كبيرة، أو على هاتف ذكي - في أي حال، يجب أن تبدو الصفحة جيدة وأن تكون سهلة الاستخدام. يتم تحقيق ذلك باستخدام العديد من أوراق الأنماط لدقة مختلفة.
• تخطيط مرن أو تخطيط مرن. أولاً، يتم استخدام تخطيط الكتلة المعروف، ثم يتم تحويل الكتل الضرورية إلى حاويات مرنة (صناديق مرنة). تشير أنماط العناصر إلى العرض: flex؛ يمكنك تحديد اتجاه المحور الرئيسي ومحاذاة العنصر. أصبحت هذه الميزات متاحة مع وصول CSS3. الآن أصبحت الصفحات مرنة للغاية. تمت مناقشة هذه الآلية بالتفصيل في. أوصي بأن تتعرف على هذا، فهذا هو حاضر ومستقبل التخطيط.
• التخطيط الدلالي. لقد كان استمرارًا منطقيًا لتخطيط الكتلة وأصبح متاحًا في HTML5. العلامات الجديدة تجعل الصفحة أكثر تنظيماً. محركات البحث تحب مثل هذه الصفحات. يمكنك أن ترى ما هو هذا في مقالتي الأخرى.
• تخطيط صالح أو بمعنى آخر، تخطيط خالي من الأخطاء. تم تصميم هذا التصميم وفقًا لمعايير W3C. يمكنك التحقق من صحة صفحة HTML الخاصة بك باستخدام مدقق W3C خاص.
• تخطيط عبر المتصفح. كما يوحي الاسم، مع هذا التخطيط، تبدو الصفحات متشابهة في المتصفحات المختلفة. أول شيء يبدأون به عادةً هو توصيل ملف CSS خاص بالصفحة - إعادة تعيين الأنماط.

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

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

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

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

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

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

ما هو التخطيط عبر المتصفح؟

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

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

دليل خطوة بخطوة بشكل عام

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

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

التصميم التكيفي

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

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

ماذا علينا أن نفعل؟

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

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

لنفترض أنها 300 بكسل؟ في هذه الحالة، سيساعدنا استعلام الوسائط من خلال تحديد عرض ثابت. وإذا كان حجمه 700 بكسل أو أقل، فيمكننا إثبات أن النقش سيشغل 75% من المساحة. وإذا كان العرض 300 بكسل أو أقل، فيمكنك ضبطه على 100%. بشكل عام، الموضوع مثير للاهتمام ومفيد للغاية، لذا يمكن دراسته بتفصيل كبير. ولكن، للأسف، هناك معلومات هنا للكتاب، ولن يكون من الممكن وضع كل شيء في المقال.

لماذا يجذب التصميم سريع الاستجابة عبر المتصفحات محركات البحث؟

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

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

خاتمة

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

هل سبق لك أن لاحظت أنه يمكن عرض موقع الويب بشكل مختلف في متصفحات مختلفة؟ هذا هو معنى التخطيط عبر المتصفح.

ما هو التخطيط عبر المتصفح

تخطيط عبر المتصفح- طريقة لتطوير كود (تخطيط) HTML الذي يضمن العرض الصحيح في جميع المتصفحات الموجودة

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

• ثعلب النار
• كروم
• الأوبرا
• أوبرا ميني
• سفاري
• متصفح الانترنت

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

إن التخطيط عبر المستعرضات معروف جيدًا لأولئك الذين عملوا مع متصفح Internet Explorer 6 - فقد أفسد الكثير من أعصاب مصممي التخطيط نظرًا لتفرده. ويتم التعبير عن هذا التفرد في حقيقة أن هذا المتصفح لا يدعم العديد من القواعد والمعايير. ونتيجة لذلك، اتضح أن التخطيط يبدو رائعًا في Firefox وOpera، لكنه انهار إلى فوضى مطلقة في IE6.

أسباب عدم عرض الصفحات بشكل صحيح

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

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

ما تحتاجه للتخطيط عبر المتصفحات - الأدوات

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

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

• معرفة عامة بالتخطيط؛
• المعرفة في مجال ميزات التخطيط لمتصفحات معينة؛
• عدة متصفحات على جهاز كمبيوتر واحد؛
• التحقق مع browsershots.org

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

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

• الحد الأقصى من الامتثال للتخطيط الأصلي ورغبات العملاء؛
• الحد الأقصى للعرض الصحيح في جميع المتصفحات الشائعة؛

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

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

خاتمة

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

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

تعمل بعض المتصفحات على نظام أساسي واحد فقط: يتوفر Edge وIE على نظام التشغيل Windows فقط، بينما يتوفر Safari على نظامي macOS وiOS فقط. كانت هناك محاولات للتدخل، لكن لم ينجح شيء. وهذا بالطبع يعقد الاختبار. لحسن الحظ، هناك خدمات مثل BrowserStack التي تتيح لك الوصول إلى جميع المتصفحات الموجودة، كما توفر Microsoft صور Windows المدمجة لاختبار Edge وIE في الأجهزة الافتراضية.

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

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

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

والمزيد عن الاختبار. بغض النظر عن مدى نجاح محاكي Chrome DevTools في تقليد الأجهزة والمتصفحات، فهذا مجرد تلميح لما ستبدو عليه في الواقع. من المهم التحقق من النتيجة على منصات وأجهزة حقيقية، على الأقل: Windows وAndroid وmacOS وiOS. أصابع حقيقية على جهاز حقيقي، والمتصفحات الحقيقية في بيئتها الطبيعية ستخبرك بالكثير عن كيفية استخدام واجهاتك. وهذا أكثر أهمية بكثير من مدى تشابهها مع التخطيط.

اشترك في أخبار المتصفح على Twitter، وقم بتثبيت Chrome Canary، وFirefox Nightly، وSafari Technology Preview. قم بتشغيل الإشارات، وجربها، وابق على اطلاع، والأهم من ذلك، توقف عن مطاردة وحدات البكسل وابدأ في إنشاء واجهات جيدة. يجب ألا تبدو مواقع الويب متشابهة في جميع المتصفحات.

نسخة الفيديو

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

الطباعة وتخطيط الويب

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

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

متصفحات مختلفة لأشخاص مختلفين

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

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

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

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

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

جودة عبر المتصفحات

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

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

بعض النصائح للتخطيط عبر المتصفحات:

دعونا نستخلص النتائج:

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

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