تصميم متوافق مع الأجهزة المحمولة ومتجاوب

Responsive Mobile Website Templates

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

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

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

Dedicated Mobile Website Templates

قالب موقع ويب مخصص للجوال هو الطريقة التقليدية التي نوفر بها التوافق مع الإصدارات السابقة لجميع مواقعنا المكتبية لنقدم لعملائنا تجربة استخدام جوال مميزة. يستخدم قالب الجوال نفس خريطة الموقع ونفس محتوى موقعك المكتبي. مع ذلك، قمنا بإزالة كل الفوضى غير الضرورية لضمان وصول عملائك بسرعة إلى المعلومات التي يريدونها. على سبيل المثال، يمكنك الوصول إلى بيانات الاتصال الخاصة بك، أو عرض رابط خريطة، أو عرض منتجاتك وإجراء عملية شراء بسهولة على شاشاتهم الصغيرة. مع مرور الوقت، أضفنا لافتات وشعارات ونسقنا الألوان تلقائيًا مع قالب سطح المكتب. مع ضبط تصميم قالب الجوال المخصص بدقة، سيحظى عملاؤك بتجربة رائعة، لأن هذه الطريقة هي... الخيار الأسرع for customers using slow rural mobile connections. 

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
2. اختر تغيير المظهر
3. تصفح جميع القوالب، وانتبه إلى زر "متجاوب" أو "جوال". يتيح لك هذا الزر معاينة القالب في أي من الوضعين. القوالب المتجاوبة هي فقط تلك التي تحتوي على زر "متجاوب".
4. اختر سمة للمتابعة.
5. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
6. قم بتحديد المربع لإجراء نسخة احتياطية لإعدادات التصميم القديمة لديك، فقط في حالة حدوث أي خطأ.
7. احفظ تغيير الثيم.
8. أحيانًا عند معاينة موقعك الإلكتروني بعد تغيير القالب، قد لا يبدو جيدًا، وذلك بسبب إعدادات التخزين المؤقت للمتصفح. قد تحتاج إلى النشر ومسح ذاكرة التخزين المؤقت للمتصفح لرؤية موقعك الإلكتروني في حالة جيدة.
9. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

How to Select A New Dedicated Mobile Template

لدينا 8 قوالب مخصصة للهواتف المحمولة مختلفة، ولكن كل منها سيستخدم الألوان والخطوط من سمة سطح المكتب الخاصة بك.

1. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
3. click SELECT A NEW MOBILE THEME
4. تصفح جميع القوالب، وانتبه إلى زر "متجاوب" أو "جوال". يتيح لك هذا الزر معاينة القالب في أي من الوضعين. القوالب المتجاوبة هي فقط تلك التي تحتوي على زر "متجاوب".
5. اختر سمة للمتابعة.
6. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
7. قم بتحديد المربع لإجراء نسخة احتياطية لإعدادات التصميم القديمة لديك، فقط في حالة حدوث أي خطأ.
8. احفظ تغيير الثيم.
9. أحيانًا عند معاينة موقعك الإلكتروني بعد تغيير القالب، قد لا يبدو جيدًا، وذلك بسبب إعدادات التخزين المؤقت للمتصفح. قد تحتاج إلى النشر ومسح ذاكرة التخزين المؤقت للمتصفح لرؤية موقعك الإلكتروني في حالة جيدة.
10. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

تعديل ملف CSS الخاص بك ليكون متجاوبًا مع الأجهزة المحمولة

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

ابحث عن الأسطر في ملف أنماط CSS الخاص بك والتي تحتوي على أكبر الأبعاد وهي إما 600 بكسل أو 750 بكسل أو 900 بكسل:

#container { width: 750px; margin: 0 auto; }

وتغييرها لتكون مثل هذا، حيث تملأ 90٪ من عرض الشاشة حتى الحد الأقصى 960.

#container { width: 90%; max-width: 960px;  margin: 0 auto; }

ثم ابحث عن الأعمدة، وغيّر عرضها أو هوامشها من عرض ثابت إلى عرض نسبي، ولكن طبّق هذه العروض فقط عندما يسمح عرض الشاشة بذلك. عندما يكون عرض الشاشة أقل من 600 بكسل، ستتراصّ الأعمدة على كامل عرض المتصفح.

@media (min-width: 600px) { .leftColumn { width: 20%; float: left; }