مَا هُو التصمِيم التجَاوُبي و لِمَاذا أستَخدِمُهُ في موقعي ؟
Get link
Facebook
X
Pinterest
Email
Other Apps
ما هو التصميم التجاوبي ؟ لماذا التصميم التجاوبي مُهِم الآن أكثر من أي وقت مضى ؟ و كيف تستخدمُه في تصاميمِك ؟
التصميم التجاوُبي (Responsive design) كما يدُلُّ إسمُه هو تصميم يتجاوَب و يتميّز بالمُرونة حيث يتغيّر بتغيُّر الجهاز المستخدم في التصفُّح و هذا الأمر يظهر بشكل واضح في المواقع الحديثة التي تستخدِمُ هذا النوع من التصاميم.
كما تعلَم فاستخدام الهواتف الذكيّة للتصفُح زاد بشكل كبير في الآونة الأخيرة و المواقع التي لا تُوفّر تصميم تجاوبي قد تخسرُ عدد كبير من الزوار و الأرباح =)
إن كان موقِعُك يتوفّر على تصميم تجاوبي ستُوفّر عليك برمجة نسخة للهاتف، تطبيق لموقِعِك و العديد من المصاريف و التكاليف !
ستكتشفُ رفقتي في هاته المقالة التصميم التجاوبي، كيف ظهر و أفضل الطُرُق لاستخدامِه في موقعك الشخصي كيفما كان نوعه ;)
هيّا بنا !
التصميم التجاوُبِي، ضروري لنجاحِك !
0. كيف ظهر التصميم التجاوبي ؟
الحاجة أم الإختراع
في السنوات الأخيرة عرف العالم ظهور الهواتف الذكية و كُل الشركات أضحت تتنافس على توفير أقوى الهواتف الداعمة لآخر تقنيات التواصل على شبكة الأنترنت، لكن كان هناك تطوُّراً آخر من جانب مطوّري المواقع.
فقد صار مصمّمي المواقع بالإضافة لتطوير المواقع التي تُستعمَلُ على الحواسيب يطوّرون إصدار خاص بالهاتف تحت رابط من نوع (m.fb.com) للتفريق بين المواقع الخاصة بالهاتف و تلك الخاصة بالحاسوب و المنصات ذات الشاشة الكبيرة.
و هاته التقنية لا زالت مستخدمة إلّا أنه في سنة 2010 ظهر التصميم التجاوُبي كحل لعدة مشاكل سردتُها في مقدمة المقالة =)
المتصفحات و دعمها للتصميم التجاوبي
بدورها قامت المتصفحات بدعم هاته التقنية في عرض المواقع و صارت أكثر دعماً له خصوصاً بعد ظهور الـ HTML5/CSS3 الذي جعل من هاته التقنية أفضلها على الإطلاق ;)
1. ما الأجهزة المعنيّة بالتصميم التجاوبي ؟
الحواسيب
كما تعلَم قارئي العزيز فليست كُل الحواسيب تتوفّر على قياس شاشة واحدة بل قد تجد حواسيب ذات شاشة كبيرة و أخرى ذات شاشة صغيرة و التصميم التجاوبي يجعَلُ موقِعَك يظهرُ في كُل هاته الشاشات بحيث تسهُلُ القراءة و التصفُح بكُل متعة لزُوّار موقِعك !
الأجهزة اللوحية
بالإضافة للحواسيب نجد أن التصميم التجاوبي يوفّرُ سهولة استخدام لمن يتوفّر على جهاز لوحي(iPad، Galaxy tab، …) و بالتالي فقراءة الفيديوهات أيضاً تأخُذُ حيّزاً كبيراً من نجاح هاته التقنية حيث أن الفيديوهات تتمدّد و تتقلّص كي تُوفّر للمستخدم استخداماً مثاليّاً لموقِعِك :)
الهواتف الذكيّة
و بالطبع فإن التصفُح التجاوبي يُمكِّنُك من إخفاء الأمور التي لن يحتاجها متصفّحي موقِعِك على هواتِفهم و يُمَكِّنُك أيضاً من الحصول على أرباح من عرض إعلانات أدسنس تجاوبيّة الشيء الذي لا يوفرُه التصاميم العاديّة !
2. كيف أجعلُ موقعي تجاوبيّاً
بالإعتماد على ملفات الستايل (CSS3)
بإمكانِك تحويل الصور، القوائم، النصوص و كذلك قارئ الفيديو في موقِعِك ليصبِحَ تجاوُبياً بالإعتماد على السي إس إس 3(CSS3) و هو لغة جد معروفة في مجال تصميم المواقع يتم استخدامُها مع اللغة الشهيرة HTML5 للحصول على تصاميم تجاوبية رائعة !
لكن الأمر ليس بتلك السهولة و أدعُوك بالتالي لانتظار دروس التصميم التجاوبي على مجتمع تقانة لفهم أفضل و أوضح إن شاء الله =)
مثلاً بالنسبة للصور بإمكانك استخدام عرض [c]100%[/c] مع طول [c]auto[/c] و هذا مثال لصورة تجاوبيّة :
[code lang="html"] <imgsrc="image.jpg"style="width:100%; height:auto"/> [/code] و هذا سيجعَلُ الصور تتمدّد بتغيير الجهاز (عرض المتصفح) و بالتالي تحصُل على صور تجاوبيّة.
أكثر من هذا بإمكانِك وضع ملفات CSS متنوعة (هنا [c]small.css[/c]، [c]large.css[/c] و [c]print.css[/c]) حسب عرض الشاشة (الجهاز المستخدم).
و تقوم بوضع الستايل الخاص بموقِعِك لكُلٍّ من الأحجام المتنوعة في كُل ملف على حدى و هكذا يسهُل عليك تمييزها كما في المثال التالي (كود يتم وضعُه داخل [c]<head></head>[/c]. [code lang="html"] < 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"/> [/code] أو بإمكانك استخدام ملف CSS واحد مع استخدام دالة [c]@media only screen[/c] بهاته الطريقة : [code lang="css"]/* 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 هنا */ } [/code] طبعاً يوجد أيضاً إمكانيّة إستخدام الجافاسكربت (Javascript) في التصميم التجاوبي و هذا مستخدم في قوالب بلوجر (Blogger) لكن لا يُنصَح نظراً لوجود متصفحات لا تدعم هذا الأمر و تكون عامة بطيئة التصفح.
بالإعتماد على بيئات عمل (frameworks)
هناك ما هو أفضل، الإعتماد على بيئات عمل جاهزة للإستخدام من أجل الحصول على تصميم تجاوُبي بسهولة أكبر و بكفاءة أفضل =)
يوجد عدة بيئات عمل لكن سأغطي الأفضل فقط في مجتمع تقانة في شكل دروس و أيضاً في شكل مقالات إن شاء الله.
3. بيئات العمل الجاهزة للإستخدام
بيئات العمل (frameworks) تُمكنك من إتمام الأعمال اعتمادا على طرق تكون مُعَدَّة من قبل للحصول على تصاميم تجاوبيّة بسرعة و دون كلل أو ملل و بالتالي ربح الوقت أثناء و بعد التصميم مع الإستفادة من التحديثات المستمرة من طرف المطوّرين !
لكن الجانب السلبي لهاته البيئات هو كونها تتوفّر على عدد كبير من الخصائص التي قد لا تحتاجُها في عملِك لكنها عُموماً تفي بالغرض و لا تؤثر كثيراً على سرعة تصفُّح موقِعِك ;)
بوتستراب (Bootstrap)
البوتستراب(Bootstrap) هو بيئة العمل المفضلة لدي حيث قُمتُ باستخدامها في عدة مواقع و منها مجتمع تقانة (taqana.net) فهذا جعلني أحصُلُ على تصاميم أنيقة و في نفس الوقت تجاوبيّة.
لذلك أنصَحُك بمتابعة دروسي القادمة حول البوتستراب الذي من المؤكّد أنك ستستفيد منها إن شاء الله !
طبعاً يوجد الإصدار العربي (RTL) للبوتستراب و الذي سأترُكُه مفاجئة في أوّل درس =)
الفوندايشن(Foundation) مثله مثل البوتستراب تم تطويره من طرف Zurb و يتميّز بكونه قليل الحجم و يُوفر ستايل خفيف ليس به عدة أمور كتلك المتوفرة في البوتستراب و يستحق التجربة.
أروع مجتمع هو تقانا ، حقيقة بدون مجاملة او مبالغة ااكتشفت مؤخرا هذا الكنز واستفد كثيرا منه وأقرأ حاليا مقالاته بعناية وتركيز حقيقة جودة ونوعية استمروا بارك الله فيكم
التحفيز مثل الماء، يجب أن نأخُذ منه كل يوم و إلّا لن نستطيع تحقيق النُّمُو و الإنجاز الذي هو مصدر السعادة ;) لقد سبق لي أن تكلّمتُ عن الطُّرُق التي تُمكّنُنِي من تحفيز نَفسِي بِشَكْل يَوْمِي و من بين هاته الطُرُق نصحتُك بقراءة، مشاهدة و سماع قصص النّاجِحين لأن هذا من أقوى الطُّرُق و سيدفعُك لتحقيق الأعاجيب إن شاء الله. في هذه المقالة إرتأيتُ أن أشارك معك أحد أفضل القنوات على اليوتيوب ، العربية و الأجنبيّة لشحن طاقتِك و التعرُّف على أسرار النجاح في الحياة =) كما تعلَم فالتنمية الذاتية هي عِلمٌ لا يُدَرَّسُ في المدرسة ، و يجب عليك تخصيص وقت لها لأنك بتعلُّمِها و تطبيقِها ستتمكّنُ بفضل الله من النجاح بشكل أسرَع و تحقيق أفضل الإنجازات ! هيّا بنا ;) أفْضَل القَنَوَات لِلتَّحفِيز الذَّاتِي ! 1. بسمة أمل (الدكتور عمرو خالد) بسمة أمل عبارة عن سلسلة من القصص الرائعة يسردُها الدكتور عمرو خالد و التي عرفت نجاحاً كبيراً و تُعتبرُ مصدراً رائعاً للإلهام للعديد من الناجحين و الذين هم في طريق النجاح. رابط قناة بسمة أمل : BasmetAmalOfficial 2. قناة التنمية البشريّة للمتميّزين هذه القناة تضُم...
العديد من التصاميم و المواقع تستخدمُ هذا اللون، اللون الرمادي ، لكن ما سرّ هذا اللون ؟ لماذا عليك استخدامه في تصاميمك و ما الإنطباع الذي يُعطي هذا اللون ؟ هل التصاميم الإحترافية التي تستخدم اللون الرمادي هي الأكثر رونقاً ؟ العديد من المصممين يستخدمون اللون الرمادي ، لكن القليل منهُم يعرفُ أسرار هذا اللون الرائع ! في هذا المقال ستكتشف معي بعضاً من أسرار هذا اللون الإحترافي و طريقة استخدامه في تصاميمك سواءاً على موقعك أو في تصاميم الجرافيك. بسم الله على بركة الله ! اللون الرمادي : أنيق و بسيط لون يصلُح لكل الأعمال "أنيق و بسيط" اللون الرمادي كان و لا زال من الألوان الأكثر استخداماً في كل التصاميم، نظراً لبساطته التي تجعله محبوباً من طرف الكُل و أناقته التي تجعلُ الألوان التي تأتي معه تظهر في حُلة حسنة. إن كان موقعك أو تصميمك خالي من هذا اللون، ستشعُرُ أن شيئاً ما ينقُصُ تصميمك، و هذا ما حدث معي في بداياتي في عالم التصميم، كُنتُ أستخدمُ عدة ألوان و أتسائل في نفسي عن ما الذي ينقُص، و بعد عدة أشهُر إكتشفتُ السر، اللون الرمادي ! ما الفرق بين الأعمال الإحترافية و الأعمال التي ...
مرحباً و تحية لكل أصدقاء و أوفياء مجتمع تقانة التعليمي =) لأننا نؤمن أن العرب لديهم القدرة على الإبداع أيضاً، لأن الإتقان هو سمة المبدعين و المتميّزين، لأننا نطمح للإحسان في كل خطوة نحو المستقبل و لإننا بالعطاء يمكننا النهوض بالأمة العربية الإسلامية. لكل هذا، و المزيد، نتشرف بالإعلان عن الإصدار الجديد من تقانة بتقنيات و جودة عالمية، مع إضافة إمكانية نشر دورات بالإضافة للدروس و المقالات. نطمح من خلال إعادة تطوير و هيكلة موقع تقانة من الألف إلى الياء لتوفير موقع رائد في مجال المحتوى التقاني العربي و موقع يفتخر به كل العرب و المسلمين في كل أرجاء العالم الإفتراضي و كذلك العالم بأكمله. من الإضافات التي تم إضافتها نجد التالي : الإضافة شرح نظام نقاط التميز بإمكان التقانيّون (أعضاء مجتمع تقانة) الحصول على نقاط التميّز و التي ستمكنهم من الحصول على رُتَب عالية و صلاحيات جمة من بينها إمكانية الولوج لدورات حصرية، برمجيات أو خدمات مدفوعة ذات جودة عالية. الدورات بالإضافة للدروس و المقالات، سيصبح بإمكان التقانيّون إضافة دورات، حالياً يتم تجربة نظام الحماية الخاص بالدورات الحصرية و التي ستك...
عدد مهم من المستخدمين يتصفحون المواقع من الهواتف ,كذالك جوجل أصبح يهتم بالمواقع التي تستخدم التصميم المتجاوب
ReplyDeleteصحيح أخي الكريم و لهذا أدعوا كُل من يملِكُ موقعاً لا يتوفّر على تصميم تجاوبي أن يتابع دروس البوتستراب التي سيتم نشرُها قريباً إن شاء الله =)
ReplyDeleteشكراً على تعليقك المفيد ;)
تحياتي.
مشكووور أخي سفيان و أنتظر دروس البوتستراب بكل شوق :woot: :whistle:
ReplyDeleteمشكووور أخي سفيان :woot: :D
ReplyDeleteشكرا اخي على المعلومات والكودات :woot:
ReplyDeleteوالله درس رائع اخي و معلومات ممتازة لشخص يريد تصميم موقعه يعني ان لم اكن مخطئ بكلمة واحدة هذا الدرس يتحدث عن التناسق =)
ReplyDeleteشرح ممتاز
ReplyDeleteمفيد للغاية أخي سفيان
ReplyDeleteشكرا لكم =)
[…] المصمّمة باحتراف توفّر تصميم تجاوُبي يدعم الهواتف الذكيّة و الأجهزة اللوحيّة […]
ReplyDeleteأروع مجتمع هو تقانا ، حقيقة بدون مجاملة او مبالغة
ReplyDeleteااكتشفت مؤخرا هذا الكنز واستفد كثيرا منه وأقرأ حاليا مقالاته بعناية وتركيز
حقيقة جودة ونوعية
استمروا بارك الله فيكم