أفضل الممارسات للتحسين التدريجي في تصميم الويب

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

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

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

1. فهم التحسين التدريجي

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

هذا هو عكس التدهور اللطيف الذي يشمل جميع الميزات بشكل افتراضي ، ثم يتحلل عندما لا يعمل شيء ما.

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

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

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

إليك المتهدمة العامة للسمات الرئيسية للتحسين التدريجي ، والتي يجب أن تأخذها في الاعتبار:

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

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

ولكن ماذا عن المتصفحات التي لا تدعم CSS3 الحديثة؟ هذا هو المكان الذي تلعب فيه مواقع مثل Can I Use. يجب أن تقرر الميزات التي تستحق التنفيذ ، وأن تصدر الأحكام على الجمهور المستهدف لموقع الويب الخاص بك.

2. العيش في أوراق الأنماط

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

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

اكتب علامات HTML و CSS الدلالية التي تعمل في أكبر عدد ممكن من المتصفحات النشطة (دعم المتصفحات القديمة مثل دعم IE5 ليس ضروريًا).

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

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

الهدفين الأساسيين لـ HTML هما كالتالي:

• تماما الدلالي وصالحة الشفرة
• ا تجربة متسقة للجميع

الطريقة الأكثر مباشرة لتحقيق هذه الأهداف هي ابدأ من لا شيء و اعمل بجهد, كما أن معظم دعاة تعزيز التدريجي أن أوصي به.

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

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

ولكن لا يزال هناك سؤال واحد كبير: إذا كان المتصفح لا يدعم CSS الحديث الخاص بي ، فماذا أفعل?

أنت ببساطة اكتب الرمز الذي يعمل بدون هذا, والنظر في CSS الحديثة كتعزيز تدريجي. هذا هو جمال منهجية التعزيز التدريجي.

لا تحتاج إلى احتياطي ، لأنك افتراض افتراض أن لا شيء معتمد بشكل افتراضي.

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

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

نعم ، إنه قبيح ، ونعم ، يبدو أننا فقدنا عشرون عامًا من التقدم ... ولكنه يعمل.

3. التعامل مع جافا سكريبت

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

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

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

هنا مثال آخر. لنفترض أن لديك رابطًا يقوم بتحميل المحتوى بشكل ديناميكي. ال أ href القيمة فارغة ، لأن كل شيء يتم تحميله عبر جافا سكريبت باستخدام طريقة preventDefault ().

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

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

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

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

كل ميزة تتطلب اختبار فردي مع حل فردي.

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

إذا كنت ترغب في إجراء اختبار مباشر ، فيمكنك عادة تعطيل CSS و JavaScript في كل متصفح رئيسي لنرى كيف ينفذ موقع الويب الخاص بك. يجدر أيضًا التفكير في استخدام ملحقات مثل A-Tester for WCAG.

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

• تعزيز التدريجي! “لا جافا سكريبت”
• التفاعل هو المفتاح: التحسين التدريجي وجافا سكريبت
• التحسين التدريجي: إنه حول المحتوى
• كيفية تطبيق التعزيز التدريجي عندما يبدو جافا سكريبت مثل الشرط

حيث التقدمي تعزيز يقع قصيرة

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

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

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

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

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

قراءة متعمقة

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

إذا كنت تريد معرفة المزيد حول التحسين التدريجي ، تحقق من هذه الوظائف ذات الصلة:

• فهم التعزيز التدريجي
• تعزيز التدريجي: ما هو عليه ، وكيفية استخدامه?
• جافا سكريبت التبعية رد فعل: الأسطورية خرق التعزيز التدريجي