كم تصميم على عملهم للموقع الواحد ليلائم جميع الأجهزة

كانت لدي أساليب متعددة في تصميم واجهة متجاوبة Responsive مع عدة قياسات، في الماضي كنت أضع لكل قياس تصميمه الخاص، بعدها إستخدمت خاصية Media Query في تحديد القياسات الأجهزة اللوحية والهواتف.

حالياً أفضل الإستعانة بقوالب Front-end مثل Twitter Bootstrap، Zurb Foundation، Base فهي تقوم بتجهيز القياسات المتجاوبة بشكل تلقائي (عن طريق Media Query) وتجعلك تركز على تصميم سطح المكتب فقط، حتى جميعهم يحملون ميزة "Mobile First".

الحل هو تصميم واحد يعتمد مبدأ التصميم التجاوبي Responsive Design:

التوجه الأكبر الذي أراه هو بعض الاختيارات الأساسية للتصميم (ألوان، نقوش، خطوط) باستخدام أدوات مثل Style Tiles:

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

أي أنك لن تقوم بتصميم كامل، وإنما تحدد هوية الموقع البصرية وتصمم عناصره بشكل منفصل

يمكنك الحصول على مجموعة جيدة من الأدوات للتصميم التجاوبي من هنا:

هناك خاصية اسمها Media Queries

ابحث عنها باليوتيوب وسوف تجد لها شرح

تقدر من خلالها تعمل اكثر من تصميم من خلال تصميم واحد

عبر مقاسات الشاشه

لا أتخيل مشروع أجمل من bootstrap 3 .

فقط اتبع جميع التعليمات والنتيجة مذهلة :)

بالإضافة إلى مكتبة تغطي أغلب الأغراض وعناصر التحكم.

وسهولة في بناء القوالب themes.