بكفيك غمز!

أحمد شديد

UX/UI Designer, Frontend Developer

منذ 4 سنوات بواسطة

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

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

ما هو التحسين التدريجي Progressive Enhancement ؟

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

التصميم التالي يعرض 3 حالات لصفحة ويب بسيطة وكيفية تجاوبها مع مشاكل CSS و Javascript. كما ترون في أول تصميم بأن المحتوى يظهر بشكل جيد وسيتمكن المستخدم من الوصول إليه من دون مشاكل.

في عالم الويب يوجد مصطلح كان منتشراً لفترة طويلة وهو Graceful Degradation، تقوم فكرته على أنه عند تصميم موقع بآخر التقنيات الحديثة، يجب أن يتم التأكد بأنه يعمل بشكل جيد أو مقبول على الأجهزة والمتصفحات القديمة.

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

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

mm

تشبيه حبة M&M بفكرة التحسين التدريجي

كيف يمكن أن نطبق التحسين التدريجي في تصميم الويب؟

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

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

view-diff

الفرق بين العرض الأساسي والعرض المحسن.

 

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


.wrapper {
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;

.img {
position: relative;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/shadeed.jpg");
background-size: cover;
display: block;
width: 130px;
height: 130px;
border-radius: 50%;
margin: 0 auto 15px auto;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.35);
}

.name {
font-family: Arial;
text-decoration: none;
font-size: 20px;
color: #000;
}
}

@media (min-width: 992px) {
.img {
border: 4px solid #fff;
box-shadow: 0 0 0 4px rgba(255,255,255,.4), 0 0 0 8px rgba(255,255,255,.3), 0 6px 10px 0 rgba(0,0,0,.35), 7px 3px 0 0 rgba(0,0,0,.05) !important;

&:after {
content: "";
position: absolute;
left: -25%;
top: 50%;
width: 10px;
height: 10px;
background: rgb(189, 189, 189);
border-radius: 50%;
}

&:before {
content: "";
position: absolute;
right: -30%;
top: 50%;
width: 10px;
height: 10px;
background: rgb(189, 189, 189);
border-radius: 50%;
}
}
}
See the Pen <a href=’http://codepen.io/shadeed/pen/c87157d2e9551031468e26503d48133d/’>c87157d2e9551031468e26503d48133d</a> by Ahmad Shadeed (<a href=’http://codepen.io/shadeed’>@shadeed</a>) on <a href=’http://codepen.io’>CodePen</a>.

 

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

مصمم تجربة المستخدم UX وواجهات الإستخدام UI، مستشار ومطور واجهات أمامية Front-End Developer، مهتم في كتابة CSS للمشاريع الكبيرة.

  • araby alhomsi

    جميل جداً، حقاً هذا مفيد، وأنا حالياً أحاول تكويد موقع Mobile First وأرجوا من الله أن يوفقني في ذلك، شكراً لك.

  • Mohammed K Faraj-allah

    جميل جدا المقال ولكن نقطة لا أوفقك الرأي فيها وهي ان تقوم بالبدء بـ first mobile أحسها غير منطقيه !