التصميم المتجاوب Responsive Design أصبح ضرورة ملحة، لتعدد الأجهزة Devices  والمتصفحات Browsers  المستخدمة في الدخول على شبكة الإنترنت، فلم تعد اجهزة الويب web device هي الوسيله الوحيدة، فإذا وجد المستخدم user صعوبة في قراءة محتوى موقعك website content سيخرج منه، باحثاً عن غيره وبالتالي ستفقد العديد من زوار موقعك ومستخدميه.

وبناء على هذه الدراسة  recent study التي أجراها موقع  HubSpot والتي أثبتت أن:

•  ما يقارب الـ 25% من الأمريكان يستخدمون هواتفهم المحمولة Mobile للدخول على شبكة الانترنت.
• أن واحد من بين كل خمسة أشخاص يمتلك هاتف ذكي ، 50% منهم يستخدمونه لتصفح الانترنت.

إذا فإليك 10 نصائح تساعدك عند البدء بتصميم متجاوب:

1- ابدأ بالجوال أولاً Go Mobile First.

قبل البدء بالتخطيط لتصميم لشاشات الكمبيوتر Web design عليك أن تفكر بخبرة المستخدم user experience واحتياجه لتصميم يتجاوب مع الهاتف المحمول Smart phone لأنه أصبح الأكثر استخداماً وانتشاراً.

فهناك شخص من بين كل سبعة أشخاص يستخدم الـ Mobile في الدخول على الانترنت access to internet ، لذا قم بتصميم موقع يناسب العرض على شاشات الهاتف الصغيرة mobile screen ، ثم فكر في تصميم لشاشات الكمبيوتر والـ Laptop .

2- التفاعل مع استعلامات الوسائط Media Queries.

تُعد Media Queries أحد المميزات للغة البرمجة CSS3، التي تسمح للمحتوى Content بالتجاوب مع الجهاز المستخدم، حيث تقوم بتخزين بعض المعلومات الخاصة بالجهاز كالدقة Resolution والارتفاع Height والعرض Width والاتجاه Orientation .

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

3- افهم ماذا يعنى الجوال Mobile للمستخدمين.

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

4- استخدم النسب المئوية Use Percentages .

تنفيذ الـ Fluid Grid من أصعب الأجزاء في عمل تصميم متجاوب، فهي تعمل جنباً إلى جنب مع استعلامات الوسائط Media Queries لنتمكن من عرض المحتوى على مختلف الشاشات والأجهزة.

بدلاً من تصميم نقاط التوقف Breakpoints لكل إطار حسب طول وعرض الشاشة أو الجهاز المستخدم، يمكنك تحديد حد أقصى للإطار باستخدام النسبة المئوية Maximum Percentage  وليس البيكسل Pixel وهذا يسمح للموقع بإعادة ترتيب خطوط الإطار Layout اعتماداً على النسبه حسب الشاشة المستخدمة في عرض المحتوى .

5- الحاجة إلى السرعة The Need Of Speed.

بطىء التحميل هو أحد أهم عيوب المواقع المتجاوبة، فقد أثبتت دراسة أن حوالى 48% من المواقع المتجاوبة Responsive Sites تستغرق من 4 إلى 8 ثوانِِ للتحميل، ربما كان هذا مناسباً في 1997 أما الأن فأكثر من 64% من مستخدمي الهواتف الذكية يتوقعون تحميل الموقع في أقل من 4 ثوانِِ.

وتُعد الصور الغير محسنة هي السبب الرئيسي في بطىء التحميل بسبب كبر حجمها ،فلا تدع هذه المشكلة الصغيرة تفقدك زوار موقعك ويمكن حلها بتحويل الصور إلى صيغ ملائمة  للعرض على الجوال Adaptive Images مثل PNG.

6- حذف العناصر الغير ضرورية .

لبس فقط لتحسين تجربة المستخدم  UX ولكن لرفع سرعة موقعك أيضاً. فالموقع الذي يحتوي عدد كبير من العناصر الغير مهمة Excessive elements  لن يكون جيدا للاستخدام أو حتى لمجرد المشاهدة. ويمكنك استخدام موقع مثل GZIP للمقارنة بين موقعك قبل وبعد حذف العناصر الغير لازمة.

7- To Hamburger Or Not To Hamburger.

تعتبر Hamburger Icon بمثابة دليل على وجود قائمة خفية hidden menu كما هو معروف، وهل للأسف محل نقاش حاد بين المستخدمين users  فمنهم من يفضلها وأكثرهم يكرهها ويراها مزعجة وغير ضرورية.

ولبناء تصميم متجاوب ناجح عليك أن تحدد ما تفضله النسبة الأكبر من المستخدمين، فإن كانوا يفضلون القائمة المرئية Visible menu فعليك استخدامها لكي تكسب رضي المستخدمين.

8-  اجعله قابلاً للقراءة Make It Readable.

عند تصميم موقع متجاوب RWD حاول أن تجعل النصوص سهلة القراءة readable حتى لا يضطر المستخدم لإرهاق عينية أو تكبير النص ليتمكن من القراءة بل اختار حجم خط text size كبير بالنسبة لشاشة الجوال والأفضل يكون حجم الخط 16px ،1em، 12pt ويمكنك استخدام دليل للوصول للحجم المناسب مثل px to em .

عند إنشاء العناوين الرئيسية headlines يمكنك استخدام أداة مثل FitText لإنشاء نص سريع الاستجابة Responsive text.

9- استخدام حجم الزر المناسب Right Button Size.

بالنسبة للجوال تجنب الأزرار الصغيرة ، وكن حريصاً أن يكون حجم الزر 44x 44 px على الأقل ليكون مريح في عند الضغط عليه comfortable tapping، ومن الأفضل أن تستخدم الزر الممتلىء padding button بدلا من المفرغ margins button لأنه يعطى مساحه أكبر للضغط أما المفرغ فلا يعطي هذه الميزة.

10- التصميم حسب اتجاه الشاشة Screen Orientation.

وفقاً للإحصائيات فإن الاتجاه الأفقي Landscape orientation تفوق على الاتجاه الرأسي Portrait orientation بنسبة 59% إلى 41% ، فعند تصميم موقعك يجب أن تأخذ الاتجاهين بعين الاعتبار ولكن وجه معظم اهتمامك للإتجاه الافقي وتأكد من جودة الصور وعدم امتدادها.

الخلاصة.

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

مترجم بتصرف عن 10 Tips to Get You Started with Responsive Design