ما هو التصميم التجاوبي ؟ لماذا التصميم التجاوبي مُهِم الآن أكثر من أي وقت مضى ؟ و كيف تستخدمُه في تصاميمِك ؟

التصميم التجاوُبي (Responsive design) كما يدُلُّ إسمُه هو تصميم يتجاوَب و يتميّز بالمُرونة حيث يتغيّر بتغيُّر الجهاز المستخدم في التصفُّح و هذا الأمر يظهر بشكل واضح في المواقع الحديثة التي تستخدِمُ هذا النوع من التصاميم.

كما تعلَم فاستخدام الهواتف الذكيّة للتصفُح زاد بشكل كبير في الآونة الأخيرة و المواقع التي لا تُوفّر تصميم تجاوبي قد تخسرُ عدد كبير من الزوار و الأرباح =)

إن كان موقِعُك يتوفّر على تصميم تجاوبي ستُوفّر عليك برمجة نسخة للهاتف، تطبيق لموقِعِك و العديد من المصاريف و التكاليف !

ستكتشفُ رفقتي في هاته المقالة التصميم التجاوبي، كيف ظهر و أفضل الطُرُق لاستخدامِه في موقعك الشخصي كيفما كان نوعه ;)

هيّا بنا !

التصميم التجاوُبِي، ضروري لنجاحِك !

responsive-design-everywhere

0. كيف ظهر التصميم التجاوبي ؟

الحاجة أم الإختراع

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

فقد صار مصمّمي المواقع بالإضافة لتطوير المواقع التي تُستعمَلُ على الحواسيب يطوّرون إصدار خاص بالهاتف تحت رابط من نوع (m.fb.com) للتفريق بين المواقع الخاصة بالهاتف و تلك الخاصة بالحاسوب و المنصات ذات الشاشة الكبيرة.

و هاته التقنية لا زالت مستخدمة إلّا أنه في سنة 2010 ظهر التصميم التجاوُبي كحل لعدة مشاكل سردتُها في مقدمة المقالة =)

المتصفحات و دعمها للتصميم التجاوبي

بدورها قامت المتصفحات بدعم هاته التقنية في عرض المواقع و صارت أكثر دعماً له خصوصاً بعد ظهور الـ HTML5/CSS3 الذي جعل من هاته التقنية أفضلها على الإطلاق ;)

1. ما الأجهزة المعنيّة بالتصميم التجاوبي ؟

iphone-macbook-responsive-taqana

الحواسيب

كما تعلَم قارئي العزيز فليست كُل الحواسيب تتوفّر على قياس شاشة واحدة بل قد تجد حواسيب ذات شاشة كبيرة و أخرى ذات شاشة صغيرة و التصميم التجاوبي يجعَلُ موقِعَك يظهرُ في كُل هاته الشاشات بحيث تسهُلُ القراءة و التصفُح بكُل متعة لزُوّار موقِعك !

الأجهزة اللوحية

بالإضافة للحواسيب نجد أن التصميم التجاوبي يوفّرُ سهولة استخدام لمن يتوفّر على جهاز لوحي (iPad، Galaxy tab، …) و بالتالي فقراءة الفيديوهات أيضاً تأخُذُ حيّزاً كبيراً من نجاح هاته التقنية حيث أن الفيديوهات تتمدّد و تتقلّص كي تُوفّر للمستخدم استخداماً مثاليّاً لموقِعِك :)

الهواتف الذكيّة

و بالطبع فإن التصفُح التجاوبي يُمكِّنُك من إخفاء الأمور التي لن يحتاجها متصفّحي موقِعِك على هواتِفهم و يُمَكِّنُك أيضاً من الحصول على أرباح من عرض إعلانات أدسنس تجاوبيّة الشيء الذي لا يوفرُه التصاميم العاديّة !

2. كيف أجعلُ موقعي تجاوبيّاً

بالإعتماد على ملفات الستايل (CSS3)

بإمكانِك تحويل الصور، القوائم، النصوص و كذلك قارئ الفيديو في موقِعِك ليصبِحَ تجاوُبياً بالإعتماد على السي إس إس 3 (CSS3) و هو لغة جد معروفة في مجال تصميم المواقع يتم استخدامُها مع اللغة الشهيرة HTML5 للحصول على تصاميم تجاوبية رائعة !

لكن الأمر ليس بتلك السهولة و أدعُوك بالتالي لانتظار دروس التصميم التجاوبي على مجتمع تقانة لفهم أفضل و أوضح إن شاء الله =)

مثلاً بالنسبة للصور بإمكانك استخدام عرض 100% مع طول auto و هذا مثال لصورة تجاوبيّة :

<imgsrc="image.jpg"style="width:100%; height:auto"/>

و هذا سيجعَلُ الصور تتمدّد بتغيير الجهاز (عرض المتصفح) و بالتالي تحصُل على صور تجاوبيّة.

أكثر من هذا بإمكانِك وضع ملفات CSS متنوعة (هنا small.css، large.css و print.css) حسب عرض الشاشة (الجهاز المستخدم).

و تقوم بوضع الستايل الخاص بموقِعِك لكُلٍّ من الأحجام المتنوعة في كُل ملف على حدى و هكذا يسهُل عليك تمييزها كما في المثال التالي (كود يتم وضعُه داخل <head></head>.

< linkrel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
< linkrel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
< linkrel="stylesheet" media="print" href="print.css"/>

أو بإمكانك استخدام ملف CSS واحد مع استخدام دالة @media only screen بهاته الطريقة :
/* XS - الهواتف */
@media only screen and (max-width:479px){
/* ضع كود css هنا */
}
/* SM - الأجهزة اللوحية */
@media only screen and (max-width:768px){
/* ضع كود css هنا */
}
/* MD - الحواسيب */
@media only screen and (min-width:768px){
/* ضع كود css هنا */
}
/* LARGE - الحواسيب */
@media only screen and (min-width:992px){
/* ضع كود css هنا */
}
/* شاشة كبيرة */
@media only screen and (min-width:1200px){
/* ضع كود css هنا */
}

طبعاً يوجد أيضاً إمكانيّة إستخدام الجافاسكربت (Javascript) في التصميم التجاوبي و هذا مستخدم في قوالب بلوجر (Blogger) لكن لا يُنصَح نظراً لوجود متصفحات لا تدعم هذا الأمر و تكون عامة بطيئة التصفح.

بالإعتماد على بيئات عمل (frameworks)

هناك ما هو أفضل، الإعتماد على بيئات عمل جاهزة للإستخدام من أجل الحصول على تصميم تجاوُبي بسهولة أكبر و بكفاءة أفضل =)

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

3. بيئات العمل الجاهزة للإستخدام

بيئات العمل (frameworks) تُمكنك من إتمام الأعمال اعتمادا على طرق تكون مُعَدَّة من قبل للحصول على تصاميم تجاوبيّة بسرعة و دون كلل أو ملل و بالتالي ربح الوقت أثناء و بعد التصميم مع الإستفادة من التحديثات المستمرة من طرف المطوّرين !

لكن الجانب السلبي لهاته البيئات هو كونها تتوفّر على عدد كبير من الخصائص التي قد لا تحتاجُها في عملِك لكنها عُموماً تفي بالغرض و لا تؤثر كثيراً على سرعة تصفُّح موقِعِك ;)

بوتستراب (Bootstrap)

البوتستراب (Bootstrap) هو بيئة العمل المفضلة لدي حيث قُمتُ باستخدامها في عدة مواقع و منها مجتمع تقانة (taqana.net) فهذا جعلني أحصُلُ على تصاميم أنيقة و في نفس الوقت تجاوبيّة.

لذلك أنصَحُك بمتابعة دروسي القادمة حول البوتستراب الذي من المؤكّد أنك ستستفيد منها إن شاء الله !

طبعاً يوجد الإصدار العربي (RTL) للبوتستراب و الذي سأترُكُه مفاجئة في أوّل درس =)

فوندايشن (Foundation)

الفوندايشن (Foundation) مثله مثل البوتستراب تم تطويره من طرف Zurb و يتميّز بكونه قليل الحجم و يُوفر ستايل خفيف ليس به عدة أمور كتلك المتوفرة في البوتستراب و يستحق التجربة.

رائع، لقد تعرّفت على التصميم التجاوُبي بشكل سريع و أتمنى أن تكون هاته المقالة قد أعجبتك =)

لا تتردّد في وضع تعليق أسفل هذه المقالة لطلب المساعدة و سأكون جد سعيد للإجابة عليك !

أثبت وُجودَك :woot:

سفيان – مجتمع تقانة

 





مقالات ذات صلة :


Profile photo of سفيان صبيري
29376

عن

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





التعليقات :

# nejjaoui قبل سنتين
Profile photo of nejjaoui

عدد مهم من المستخدمين يتصفحون المواقع من الهواتف ,كذالك جوجل أصبح يهتم بالمواقع التي تستخدم التصميم المتجاوب

# سفيان صبيري قبل سنتين
Profile photo of سفيان صبيري

صحيح أخي الكريم و لهذا أدعوا كُل من يملِكُ موقعاً لا يتوفّر على تصميم تجاوبي أن يتابع دروس البوتستراب التي سيتم نشرُها قريباً إن شاء الله =)

شكراً على تعليقك المفيد ;)

تحياتي.

# adnan kassaoui قبل سنتين
Profile photo of adnan kassaoui

مشكووور أخي سفيان و أنتظر دروس البوتستراب بكل شوق :woot: :whistle:

# سفيان صبيري قبل سنتين
Profile photo of سفيان صبيري

شكراً على تعليقك أخي عدنان، هذا واجب =)

لقد تم نشر الدرس الأوّل أخي عدنان من هنا : http://taqana.net/tutorial/bootstrap-basics-responsive-design

# youyoukanan قبل سنتين
Profile photo of youyoukanan

مشكووور أخي سفيان :woot: :D

# Almehdi Mazout قبل سنتين
Profile photo of Almehdi Mazout

شكرا اخي على المعلومات والكودات :woot:

# islamchikh قبل سنتين
Profile photo of islamchikh

والله درس رائع اخي و معلومات ممتازة لشخص يريد تصميم موقعه يعني ان لم اكن مخطئ بكلمة واحدة هذا الدرس يتحدث عن التناسق =)

# yassin3 قبل سنتين
Profile photo of yassin3

شرح ممتاز

# ياسين باداس قبل سنتين
Profile photo of ياسين باداس

مفيد للغاية أخي سفيان
شكرا لكم =)

# mokhtar01 قبل 8 شهور
Profile photo of mokhtar01

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

1 Pings/Trackbacks:

كتابة تعليق :

xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)