بكفيك غمز!

أحمد شديد

UX/UI Designer, Frontend Developer

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

النظرة الخاطئة عن التصميم التجاوبي

النظرة الخاطئة عن التصميم التجاوبي

ما هو التصميم التجاوبي Responsive Design وكيف ظهرت فكرته؟

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

في عام 2010 قام Ethan Marcotte بكتابة مقال في مجلة Alistapart يتحدث فيه عن تطور الويب وكيف يمكن عمل صفحة تجاوبية بإستخدام Media Queries في CSS. بعد هذا المقال بدأ الويب بالتدريج ينحدر نحو التصميم التجاوبي، وأصبح لدى الجميع هواتف ذكية وأجهزة لوحية، لذلك أصبحت الحاجة إليه مهمة جداً لدرجة أننا اليوم في العام 2015 نستغرب من رؤية موقع غير تجاوبي ونشعر بالإستياء.

الفكرة الخاطئة المنتشرة عن التصميم التجاوبي بأطر العمل Frameworks

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

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

  1. 1- هذا الموقع معمول بواسطة Bootstrap صحيح؟ سألته لماذا؟ أخبرني لانه تجاوبي ويعمل على كل الشاشات.
  2. 2- لم اقم بعمل موقع تجاوبي من دون إستخدام أطر عمل جاهزة.
  3. 3- أشعر بالراحة عندما لا يطلب العميل أن يكون موقعه تجاوبياً.

 

استخدام أطر العمل ليس أمراً سيئاً

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

نصائح غير مناسبة

قبل أن أبدأ بتعلم الويب نصحني أكثر من شخص بأن أستخدم Bootstrap لعمل مواقع تجاوبية، لماذا لا اتعلم كيف استخدم ال Media Queries في CSS واقوم بعمل موقع تجاوبي بخطوات بسيطة؟ الأمر ليس صعب وسوف يتم شرح أكثر من مثال لواجهات مواقع مختلفة وكيفية بناءها من دون أطر عمل جاهزة.

كيف تعمل شبكة التصميم Grid؟

how-grid-work

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

مثال 1: تصميم مدونة

layout1

في هذا التصميم يوجد لدينا جزء رئيسي Main والشريط الجانبي Sidebar، لاحظ أنه في عرض التابلت والموبايل كل منهم يأخذ العرض بشكل كامل 100%، اما في عرض الشاشات الكبيرة يكون عرض الجزء الرئيسي 70% والشريط الجانبي 30%.

سنقوم بإستخدام مبدأ Mobile First لتنفيذ التصميم، بناءاً على ذلك في ملف CSS سنبدأ أولاً في التنسيقات الخاصة بالموبايل والتابلت ومن ثم الشاشات الكبيرة. يوجد لدينا الآن مشكلة وهي أن التصميم يظهر في كافة الحالات بعرض 100% كأنه مفتوح على موبايل أو تابلت، كما بالصورة التالية:

issue1

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

في عرض الشاشات الكبيرة، نريد أن يصبح عرض الجزء الرئيسي 70% والشريط الجانبي 30% مع إعطاء float:right للرئيسي و float:left للجانبي كما في الكود التالي:


@media (min-width: 992px) {
.main {
width: 70%;
float: left;
/*Add space to the right of the main column*/
padding-right: 30px;
}
.sidebar {
width: 30%;
float: right;
}
}
See the Pen <a href=’http://codepen.io/shadeed/pen/7a5bbdb1d75bc2bc3334afb084e32b9c/’>7a5bbdb1d75bc2bc3334afb084e32b9c</a> by Ahmad Shadeed (<a href=’http://codepen.io/shadeed’>@shadeed</a>) on <a href=’http://codepen.io’>CodePen</a>.

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

 مثال 2: معرض أعمال

layout2

يوجد لدينا أولاً الهيدر ومعها خلفية، بالنسبة للمحتوى هناك تظهر صور للأعمال بحيث تكون 4 في الشاشات الكبيرة و 3 في التابلت وعرض كامل في الموبايل.

لكي نحقق ذلك نحتاج لكتابة Media Query تقوم بالتالي:

  1. 1- إعطاء عرض كامل 100% بالموبايل.
  2. 2- في التابلت يكون عرض كل عمل 32.33% مع إعطاء margin-right بقيمة 1% لكي نعطي مساحة بينهم بالإضافة إلي float:left.
  3. 3- بالشاشات الكبيرة يكون العرض 24% مع إعطاء margin-right بقيمة 1% بالإضافة إلى float:left.

 

الكود الخاص بالشاشات الكبيرة:


@media (min-width:992px) {
.main {
.item {
width: 24%;
margin-right: 1%;
float: left;
}
}
}

See the Pen <a href=’http://codepen.io/shadeed/pen/55402e6abce6a15e08a50abe0ef272d1/’>55402e6abce6a15e08a50abe0ef272d1</a> by Ahmad Shadeed (<a href=’http://codepen.io/shadeed’>@shadeed</a>) on <a href=’http://codepen.io’>CodePen</a>.

 

الكود الخاص بالتابلت:


@media only screen and (min-width:778px) and (max-width:992px) {
.main {
.item {
width: 32.33%;
margin-right: 1%;
float: left;
}
}
}

See the Pen <a href=’http://codepen.io/shadeed/pen/df45f0c092b49e5aade1b4f20e909581/’>df45f0c092b49e5aade1b4f20e909581</a> by Ahmad Shadeed (<a href=’http://codepen.io/shadeed’>@shadeed</a>) on <a href=’http://codepen.io’>CodePen</a>.

لمشاهدة المثال كامل من هنا

النتيجة

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

مصادر إضافية

  1. W3school
  2. Learnlayout
  3. CSSMediaQueries
  4. Tuts+ Course
  5. Responsive Web Design
  6. Treehouse
  7. Google Developers

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

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

  • hassaanALalosy

    احسنت صديقي مقال كامل
    وايضآ من الممكن ان تستخدم الـ bootstrap او اي اطار عمل مع عملك الخاص
    مثلآ انا استخدم الـ @media و انا اصلا مستخدم الـ bootstrap و لا استخدم موضوع الـ col في الـ bootstrap واعتمد على ان افعلهآ يدويآ
    لكن فقط لأختصار بعض الخطوات استخدم الـ bootstrap
    مقال رائع شكرآ ^_^

  • http://www.pro4arab.com BaraaBH99

    مقال جدا رائع ومفيد !

  • Hamzaoui

    صراحة جعلته ,من ما كان للبعض صعبا في السابق, أسهل بكثير مقال رائع رائع

  • Yafa Raie

    رائع جدا ومفيد جدا …

  • Mohammed Alsheikh

    شكرا لك مقال ممتاز أستفدت منه كثيراً

  • http://www.alfaris.ws/ Ahmed Faris

    من أروع ما قرأت عن التصميم التجاوبي
    مقال مبسط ومفيد
    انا عن نفسي اول ما بدأت اتعلم تعلمت الـMedia Query قبل ان اتعلم اطر التطوير
    وفي احد الشركات، تعجب من عدم معرفتي للأطر كـFoundation مثلاً بالرغم من تصميمي مواقع تجاوبية للموبايل والـPC

  • http://www.safrnblog.com arablog1

    شكرا لك موضوع رائع ننتظر مقالات أخرى وسيتم تطبيق الشرح ان شاء الله

  • http://alfy.me/ Ahmad Alfy

    مقال ممتاز …. أعجبني استخدامك وتطويعك للغة العربية أثبت فعلاً أنه ممكن استخدامها للكتابات التقنية بدون أية مشاكل :) في انتظار مقال آخر من السلسلة :)

    • Ahmad Shadeed

      نعم كلامك صحيح أحمد، لغتنا تصلح للكتابة التقنية :) شكرا جزيلاً لك

  • HassanTheqm

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

  • http://moheb-rofail.neocities.org/ Moheb Rofail

    شكرا جزيلا على هذا المقال الرائع، إستخدمت معظم ما ذكرته فى بناء أول و (آخر) قالب ووردبريس لى :)