تصميم مواقع الويب المستجيبة (responsive) يعد حلا رائع لمشاكل تعدد الشاشات، ولكن من زاوية الطباعة تعد امر صعب. فحجم الصفحة غير ثابت.  لذلك، دعونا نوضح بعض المبادئ الأساسية في تصميم الويب المتجاوب (responsive). ولجعل الأمر بسيط سنقوم بالتركيز علي التخطيطات (layouts).

تصميم الويب المستجيب (Responsive) ضد المتكيف (Adaptive)

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

التدفق (The flow)

عندما تصبح أحجام الشاشة أصغر، المحتوي يبدا باخذ مساحة عمودية أكثر واي شئ أسفله سيدفع للأسفل، وهذا يدعي التدفق (the flow). قد يكون من الصعب الفهم اذا كنت تصمم باستخدام البكسل والنقاط (pixels , points).

الوحدات النسبية (Relative units)

الـ(canvas) يمكن أن يكون شاشة سطح مكتب أو موبايل أو أي شئ بينهما. كثافة البكسل يمكن أن تختلف أيضا، لذلك نحن بحاجة لوحدات تتسم بالمرونة وتعمل في كل مكان. الوحدات النسبية مثل النسب المئوية تكون عملية وفعالة. لذلك انشاء شئ عرضه 50% يعني انها ستاخذ دائما نصف الشاشة ( نصف إطار الرؤية).

 

نقاط التوقف (Breakpoints)

نقاط التوقف (Breakpoints) تسمح للتصميم بالتغير في نقاط محددة مسبقا، علي سبيل المثال في سطح المكتب يوجد 3 أعمدة ، ولكن علي الموبايل يظهر عمود واحد فقط. يمكن تغيير خصائص ال CSS من نقطة إلي أخري. تحديد مكان نقاط التوقف عادة ما يعتمد علي المحتوي.

القيم الأقصي والأدني (Max , Min)

أحيانا من الجيد أن يأخذ المحتوي عرض الشاشة كاملا، كما علي الموبايل، ولكن وجود نفس المحتوي المتمدد بعرض الشاشة كاملا عادة ما يكوناقل صواباً. فهذا هو سبب قدرة قيم ال (Min/Max) علي المساعدة. علي سبيل المثال وجود عرض (100% width)  و عرض أقصي ( Max width of 1000px) فهذا يعني أن المحتوي سوف يملأ الشاشة، ولكن لن يتخطي الـ 1000px.

الكائنات المتداخلة (Nested objects)

سيكون صعب التحكم بهم، وبالتالي تغليف (wrapping) العناصر في وعاء (container) يبقيهم أكثر قابلية للفهم، نظيف ومرتبين. وهذا حيث الوحدات الثابتة مثل البكسل يمكن أن تساعد. وهي مفيدة للمحتوي الذي لا تريدده أن يتوسع(scale)، مثل الشعارات والأزرار.

الموبايل (Mobile ) أم سطح المكتب (Desktop) أولا

من الناحية التنقية لا يوجد الكثير من الاختلاف اذا بدأت مشروعك من شاشة صغيرة إلي شاشة كبيرة (الموبايل أولا) أو (سطح المكتب أولا). الا ان البدأ بالموبايل أولاً يضيف قيودا إضافية ويساعدك علي اتخاذ القرار . غالبا ما يبدأ الناس بالاثنين في وقت واحد، لذلك قم بعمل ما يناسبك.

خطوط الويب مقابل خطوط النظام (Web Fonts vs System fonts)

خطوط الويب تبدو رائعة جدا، ولكن تذكر انه يتم تحمليها عند فتح الموقع، وكلما قمت باستخدام خطوط أكثر كلما زاد وقت تحميل الصفحة. من ناحية أخري خطوط النظام (System fonts) سريعة جدا في التحميل فهي تكون متواجدة بالفعل في جهاز المستخدم وفي حال عدم وجودها سيتم استخدام الخط الافتراضي.

الصور النقطية مقابل المتجهة (Bitmap images vs Vectors)

هل تستخدم أيقونات بها تفاصيل كثيرة وبها بعض التأثيرات ؟ اذا كان الجواب نعم، فقم باستخدم الصور النقطية (bitmap). اذا كان لا، فعليك استخدام صور الفيكور (vector). للصور النقطية (bitmap) استخدم ( jpg, png, gif)، بالنسبة للفيكتور  (vectors) الخيار الأفضل سيكون (SVG) أو (icon font). كل منهما لديه بعض المزايا والعيوب وقد تكلمنا في مقال سابق عن المزايا والعيوب. لكن ضع في الاعتبار الحجم – يجب ألا ترفع صورة علي الانترنت بدون تحسين(optimization).  من ناحية أخري الفيكتور (Vectors) يكون حجمها صغير، ولكن بعض المتصفحات القديمة لا تدعمها.

 

 المصدر