المحتوى عن 'تصميم متجاوب'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 4 نتائج

  1. حسب موقع smart insights فإن 80% من مستخدمي الإنترنت يمتلكون هاتفًا ذكيًا، هذا يعني ملايين الأشخاص الذين يتصفحون الإنترنت ويحاولون أن يجدوا منتجات ومعلومات خلال تصفحهم. ولإرضاء الزبائن المحتملين يجب على كل شركة أن تجعل موقعها الإلكتروني قابلاً للتصفح على الأجهزة المحمولة. ها هي بعض النصائح المستوحاة من تجربتنا الخاصة في شركة Sonifi لتساعدك على تصميم وبرمجة موقع إلكتروني متوافق مع الأجهزة المحمولة. النصيحة الأولى: كل المواقع الإلكترونية على الأجهزة المحمولة تحتاج للخاصية name="viewport"‎ في العنصر meta تذكر بأن ترفق الخاصية viewport من العنصر meta عند انشائك لموقع الكتروني خاص بالأجهزة المحمولة. حجم الإطار المعروض (viewport) هو عبارة عن حقل وهمي مستخدم من قِبَل محركات البحث لتحديد كيفية قياس وتحجيم محتوى الموقع الإلكتروني لذلك يعد تضمين الخاصية viewport ضروريًا جدًا عند بناء تجربة متعددة الأجهزة. حجم الإطار المعروض يخبر متصفح الهاتف بأنه يجب عليه أن يتوافق مع شاشة أصغر وبدونه فإن الموقع الإلكتروني ببساطة لن يعمل بشكل جيد على الأجهزة المحمولة. وبالرغم من أي إعدادات تقرر أن تستخدمها لتحديد ما يتحكم به منفذ العرض الخاص بك، تأكد من أن تضعه في العنصر head من الصفحة. "80% من مستخدمي الإنترنت يبحثون عن المنتجات عبر هواتفهم الذكية" النصيحة الثانية: الحجم مهم في المواقع المتوافقة مع الأجهزة المحمولة هل جربت من قبل أن تزور موقعًا إلكترونيًا واحتجت أن تضغط على زر معين ولكن الزر كان صغيرًا جدًا بحيث أنك ضغطت على زر أخر عن طريق الخطأ؟ أو هل جربت من قبل أن تكبِّر الشاشة لتقرأ شيئًا معينًا؟ هذا الأمر مزعجٌ جدًا ولذلك إنه من المهم أخذ الحجم بعين الاعتبار عند تصميم الموقع الإلكتروني، وليس فقط حجم الصفحة، بل أيضًا حجم الخطوط والأزرار. الخطوط حجم الخط للمواقع على الهواتف يجب أن يكون 14 بكسل على الأقل، وعلى الرغم من أن هذا الحجم قد يبدو أكبر مما تريد ولكنه يسهل على الزائر أن يقرأ الصفحة بدون أي تكبير للصفحة أو أي صعوبة. أما الخط الأصغر يمكن أن يستخدم في العناوين والنماذج وبإمكانك تقليصه حتى 12 بكسل. الأزرار دائمًا تذكر هذا الإختصار «أ.أ.أ»: أي «الأزرار الأكبر أفضل»،إذ أن الأزرار الكبيرة تقلل من احتمالية الضغط بشكل خاطئ على زر آخر. بالنسبة لرواد الهواتف المحمولة مثل شركة "آبل" فهم ينصحون بأن يكون حجم الأزرار على الأقل 44 بكسل × 44 بكسل من أجل تحسين تجربة المستخدم وزيادة التحويلات في مواقع التجارة الإلكترونية. النصيحة الثالثة: النوافذ المنبثقة لا يجب استخدامها في تصميم مواقع الإنترنت الخاصة الأجهزة المحمولة كَون المتصفحات الخاصة بالهواتف لا تدعم النوافذ المنبثقة، فإن وجود هذه النوافذ يسبب الكثير من التشتت والقلق لتجربة المستخدم بشكل كامل، وحتى أصغر النوافذ تسبب هذا التشتت لمستخدمي الهواتف. وعلى مدار عملية التصميم، احرص جيدًا على تجنب استخدام النوافذ المنبثقة للحصول على أفضل النتائج واحرص ايضًا على تجنب التحديث الدوري للصفحة وذلك لعدم امتلاء ملفات ذاكرة التخزين المؤقت في الهاتف بل أعطِ المستخدم حرية التحكم في هذه العملية. النصيحة الرابعة: قلّل من استخدام الحقول الخاصة بالكتابة في قائمة التنقل لأنه وكما تعلم، من الصعب بعض الشيء إدخال النصوص والكتابة عند تصفح المواقع على الهاتف فينصح باستبدال هذه الحقول بأزرار او قوائم مما يمكن المستخدمين من اختيار ما يريدون بسهولة وبدون الوقوع في أي اضطرابات. وعليك الأخذ بعين الاعتبار بأن مستخدمي الأجهزة المحمولة لا يستطيعون استخدام لوحة مفاتيح او فأرة، على عكس مستخدمي الكمبيوتر، لذلك احرص على ايجاد طرق ابداعية أكثر لجعل تجربتهم هي نفسها وبدون اللجوء لاستخدام لوحة مفاتيح صغيرة او التصفح بصعوبة. بعض الحلول تشمل: القوائم القوائم المنسدلة الأزرار -خيارات الصور النصيحة الخامسة: استخدم وضع تصفح ذكي في تصميمك قد أجريتَ بالتأكيد بالعديد من الأبحاث قبل بنائك للموقع الإلكتروني لمحاولة فهم جمهورك وما يتوقعون وجوده في الموقع، قم بمراجعة المعلومات ثانيةً عند تطويرك لنموذج خاص بالأجهزة المحمولة لتستطيع تحديد كيف سوف يتصفح هذا الجمهور موقعك على الهاتف. إن كان جمهورك المستهدف من المستخدمين يرغب برؤية محتوى متجدد بشكل مستمر فعليك وضع قائمة التصفح أسفل المحتوى الرئيسي مما سيترك مساحة كافية للمحتوى والعناوين لتظهر أكثر وبدون إعاقة لمظهر الصفحة. أما إن كان المتابعون يريدون الوصول الدائم للتصفح حسب الفئة، إذن يجب عليك وضع قائمة التصفح في أعلى الصفحة. النصيحة السادسة: قم بتبسيط تصميم موقعك الإلكتروني حاول بأن تتخلص من المحتوى الغير ضروري في موقعك وقم بتبسيط التصميم الخاص بالصفحة لجعل الاستخدام أفضل، وتذكر بأن التصميم الخاص بالأجهزة المحمولة يدور حول نظرية الحد الأدنى (minimalism)، وتبسيط التصميم يساعد على تحسين الاستخدام. أنشئ موقعك بحيث تسمح للمستخدمين بتصفحه دون أي صعوبات وذلك عن طريق تجنب الجداول والإطارات والصيغ الأخرى. ودائمًا أبقِ الحشوة على أقل مستوى لأنه كلما زاد عدد المستخدمين الذين يضغطون على الروابط كلما زاد انتظارهم للتحميل، واجعل موقعك بسيطًا لخلق توازن بين المحتوى والتصفح. النصيحة السابعة: قسّم الصفحة لأجزاء صغيرة عملية عرض المحتوى الذي يتناسب تمامًا مع الشاشات الكبيرة للكمبيوتر وتعبئتها في أجهزة صغيرة ومحمولة باليد تشبه كثيرًا عملية ادخال قطعة مربعة في فتحة دائرية. قسّم الصفحة لأجزاء صغيرة بوضع الأقسام الطويلة من النصوص في عدة صفحات بدلاً من وضعها في صفحة واحدة طويلة تجعل المستخدمين يمررون بشكل مستمر لرؤية المحتوى وبإمكانك التخلص من المحتوى الأقل أهمية وعمل عمود واحد من النص لتجنب التمرير الأفقي في الصفحة. النصيحة الثامنة: قياس الصور يصنع فرقًا كبيرًا لمستخدمي الأجهزة المحمولة لاحظ جميع الصور المستخدمة في المحتوى وفي الخلفية، وتأكّد بأن الصورة مقاسها صحيح عند التصفح بالوضع العمودي أو الأفقي، وإذا كانت الصور لا تحقق الأبعاد المناسبة فعليك تغيير تنسيق صفحات في CSS لجعل الصورة بعرض 100% أو بأن تجعل الصورة نفسها مناسبة بداخل الصفحة (خاص بصور الخلفية). وباتباعك لهذه النصائح السهلة بإمكانك التأكد من أن تصاميمك مناسبة لكل من الحاسوب والهاتف وبالتالي يمكن للزائرين أن يحظوا بأفضل تجربة ممكنة. ترجمة -بتصرف- للمقال ‎8 tips for designing mobile-friendly websites لصاحبته: Sarah Almond
  2. لم يعد إنشاء تصاميم متجاوبة اختياريًّا، فلقد أصبحت شبكات CSS وعلى نحو سريع الخيّار المفضّل لإنشاء بنى منسجمة لمواقع ويب تبدو بمظهر رائع على مختلف أنواع الأجهزة. تزوّدنا شبكات CSS بطريقة سريعة لبناء أيّ موقع. فلا بدّ أن تكون قد عانيت مع خصائص التموضع والتعويم float في CSS من قبل. كل هذه المعاناة ستنتهي مع شبكات CSS. تجعل شبكات CSS3 من عمليّة إنشاء وتعديل موقع، شيئًا يسيرًا للغاية. سنتعلّم كيف تعمل هذه الشبكات ولماذا ينبغي علينا استخدامها، وكيف ننشئ شبكاتنا الخاصّة بنا لبناء layouts مُخصّصة. ما هو نظام شبكة CSS؟ قبل أن نبدأ بإنشاء بنية خاصّة بنا، هناك بعض الأمور التي نحتاج أن نعرفها مسبقًا. لإنشاء مخطّط لموقع ويب جديد نبدأ أولّا بشبكة. ستحتوي هذه الشبكة الأساسيّة على أسطر rows وأعمدة columns وخلايا cells ومسارات tracks وخطوط lines ومناطق areas. هناك أيضًا عناصر الشبكة وهي بشكل أساسي عبارة عن المحتوى الذي نضعه ضمن الشبكة. تشبه الشبكة الجدول من ناحية الإظهار. ولكن يكمن الفرق الكبير بينهما في وجود خصائص مُحدّدة وقويّة متاحة ضمن شبكة CSS، سنتحدّث عنها بعد قليل. تحمل الأسطر والأعمدة والخلايا نفس المعنى في كلّ من شبكات CSS وجداول HTML العاديّة. أمّا المسار track فهو عبارة عن سطر كامل أو عمود كامل. المسار track في الشبكة، عبارة عن سطر كامل أو عمود كامل. وبالنسبة للمنطقة فهي مكوّنة من خلايا تشكّل حاويةً مستطيلة الشكل للمحتوى، في حين أنّ خطوط الشبكة grid lines هي الفواصل بين الخلايا في البنية الشبكيّة، وهي تشبه على أية حال حدود الخلايا في جداول HTML العاديّة. تشكّل المناطق مقاطع بنيويّة ذات طبيعة متنوّعة، مثل المناطق الخاصة بالعنوان header والشريط الجانبي sidebar والمحتوى الأساسي والتذييل footer. تشكّل المنطقة area مقاطع بنيويّة متنوّعة في الشبكة. بتعريف هذه المناطق باستخدام شيفرة CSS الجديدة المتاحة، يمكننا إنشاء وتنسيق البنية الشبكيّة المطلوبة، بنفس السرعة التي تحتاجها لإنشاء بنية جدوليّة قديمة، ولكن بمزايا قابلية التعديل والتغيير بسهولة أكبر بكثير. المشكلة الوحيدة في شيفرة CSS الجديدة هي أنّها حتى هذه اللحظة ليست متوافقة بشكل كامل مع جميع المتصفّحات، ولكن تبقى مسألة وقت قبل أن تصبح قياسيّة في المدى القريب، بحيث تعمل على جميع المتصفّحات الأساسيّة المعاصرة. يمكنك تجربة مزايا الشبكة الجديدة مع جميع المتصفّحات من خلال إضافة يمكن الحصول عليها من هنا. يمكننا في متصفّح Chrome تفعيل منصّة الويب التجريبيّة experimental web platform بكتابة العنوان التالي في شريط عنوان المتصفّح: Chrome://flags انتقل إلى الأسفل حتى تصل إلى قسم تفعيل مزايا منصّة ويب التجريبيّة Enable Experimental Web Platform features ثم انقر Enable تحت العنوان. يمكننا اختبار شبكات CSS3 في متصفّح Chrome بإجراءات بسيطة. انقر بعد ذلك زر إعادة التشغيل الآن Relaunch Now وهذا كلّ شيء. أصبحنا الآن مستعدّين لتجربة شبكات CSS في Chrome ضمن أنظمة تشغيل Windows و Mac و Linux وحتى أجهزة Android. إعداد الشبكات باستخدام HTML5 الآن وبعد تفعيل الأدوات التجريبيّة، يمكننا البدء بإنشاء البنية الشبكيّة. نحتاج إلى صفحة لاختبار تأثيرات شيفرة CSS، انشأ ملف index.html. نحن مستعدّون الآن لإضافة شيفرة HTML5 أساسيّة لعرض أي شبكة ننشئها بعد قليل. سننشئ منطقة خاصّة بالعنوان header وأخرى خاصّة بالتذييل footer بالإضافة إلى منطقة خاصّة بالمحتوى content ومنطقة للشريط الجانبيّ sidebar على الجانب الأيمن من الصفحة. لنضيف الشيفرة التاليّة إلى الصفحة: <div id="grid"> <div class="header"></div> <div class="sidebar"></div> <div class="content"></div> <div class="footer"></div> </div> يمكننا وبشكل اختياري أن نضيف محتوى إلى كلّ قسم من الأقسام السابقة إذا أردنا أن نرى أين ستظهر الشبكة بعد الانتهاء. تنسيق الشبكة بشيفرة CSS قبل أن نبدأ بتنسيق الشبكة يجب أن نعلم أنّ هناك بعض تنسيقات CSS لا تعمل مع الشبكات: الخصائص column-* أي جميع الخصائص التي تبدأ بـ column- مثل column-span و column-width و column-rule. الخاصيّة float، وهذه الخاصيّة يمكن استخدمها إذا طبّقتها قبل تطبيق الخاصيّة display التي تُعيّن طريقة العرض إلى شبكة كما سنرى بعد قليل. لن يكون بالإمكان تعويم float المحتوى داخل الشبكة. الخاصيّة clear، حيث أنّه بمجرّد العمل مع بنى الشبكات فلا داعي لاستخدام هذه الخاصيّة لأنّ الشبكة تتجاهلها. الخاصيّة vertical-align، لا تمتلك هذه الخاصيّة أي تأثير على بنية الشبكة. العنصرين الزائفين first-line:: و first-letter:: لا يمكن تطبيقهما ضمن الشبكة. بالنسبة لأي خاصيّة CSS غير موجودة في القائمة السابقة فيمكن استخدامها مع الشبكات. قم بإنشاء الملف style.css لنعمل على تطبيق بنية الشبكة على التصميم. سنبدأ الآن باستخدام مُحدّد معرّف العنصر كما يلي: #grid { display:grid; } إذا وجدت أنّ تموضع الشبكة ليس مناسبًا، جرّب تغيير الخاصية السابقة لتصبح display:inline-grid حيث يؤدي ذلك إلى إنشاء البنية ضمن المنطقة التي تعمل ضمنها بدلًا من إنشاء حاوية مُخصّصة كما تفعل القيمة block عند استخدامها. نلاحظ أنّ الشبكة قد تمّ إنشائها ولكنّها فارغة. لإنشاء الخلايا يمكننا استخدام grid-template-rows و grid-template-columns بحيث نضعهم أسفل الخاصيّة display التي عرّفناها قبل قليل. القيم التي يمكن تزويدها لهاتين الخاصيّتين هي قيم أحجام الخلايا التي نرغب بإنشائها. فمثلًا إذا عرّفنا قيمة حجم واحدة من أجل سطر ما، فسيؤدّي ذلك إلى إنشاء سطر واحد فقط، في حين يؤدّي تعريف خمس قيم حجم إلى إنشاء خمسة أسطر. ويمكن تطبيق نفس الأسلوب على الأعمدة. فلإنشاء البنية السابقة المقترحة، يمكننا تعريف الأسطر والأعمدة على الشكل التالي: #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); } أنشأنا في المثال السابق ثلاثة أسطر وتسعة أعمدة. يبلغ ارتفاع السطر الأوّل 100 بيكسل، أمّا السطر الثاني فسيتم ضبطه تلقائيًّا بحيث يلائم المحتوى المُضاف بالنسبة إلى الشبكة، وسيبلغ ارتفاع السطر الثالث 100 بيكسل أيضًا. تسمح لنا الدالّة repeat بإنشاء أي عدد من الأعمدة أو الأسطر طالما أردنا أن يكون لها نفس القياس. في مثالنا هذا سننشئ تسعة أعمدة بعرض 100 بيكسل لكلٍّ منها. يبدو للوهلة الأولى أنّنا أضفنا عددًا عشوائيًّا من الأعمدة، خصوصًا أنّه لدينا خمس مناطق areas في البنية التي خطّطنا لها مسبقًا. تكمن الإجابة على ذلك أنّه بإمكاننا أن نجعل المناطق تمتد span على أكثر من خليّة، ويسمح لنا ذلك بضبط الحجم الافتراضي لكلّ منطقة بشكل فعّال. في مثالنا هذا ومن أجل سطر واحد يمكن أن تمتدّ المنطقة التي تضمّ المحتوى الرئيسي عبر سبعة أعمدة بحيث يبلغ العرض الافتراضي لها 700 بيكسل، كما يمتدّ الشريط الجانبيّ عبر عمودين ليصبح عرضه 200 بيكسل، وهكذا نحصل على عرض إجمالي قدره 900 بيكسل. لاحظ أنّه كان بإمكاننا تعريف عدد أقل من الأعمدة بعرض أكبر لكلّ منها، ولكننا لم نفعل ذلك. يكمن السبب في أنّه عند استخدام عدد أعمدة أكبر بعرض أصغر لكلّ منها، فإنّ ذلك سيؤدّي إلى تحكّم أكبر في عرض المناطق الممتدة على تلك الأعمدة، وخاصةً التي تحتاج إلى عرض قليل نسبيًّا مثل المنطقة التي نضع فيها حقوق التأليف والنشر مثلًا. تُطبّق نفس الفكرة تمامًا من أجل الأسطر، لكن لاحظ بأنّنا قد اخترنا عددًا قليلًا منها ممّا لا يمنحنا نفس المرونة المتوفّرة بالنسبة للأعمدة. على العموم لا بأس في ذلك، فهدفنا هنا هو تحقيق الفكرة والتعلّم حول الإمكانيّات المتوفّرة لتخطيط البنية الشبكيّة. لا تبدو الأمور حتى الآن كما هو مخطّط لها، لكن بمجرّد تعريف وتسمية مناطق الشبكة ستأخذ البنية الشبكيّة الشكل المطلوب. لتسمية المناطق فإنّنا نعيّن اسم المنطقة لكلّ عمود وسطر ستمتدّ عليه هذه المنطقة. يمكننا استخدام الخاصيّة grid-template-areas بحيث نضعها أسفل الخاصّتين المسؤولتين عن تعيين عدد الأسطر والأعمدة الّلتين أضفناهما قبل قليل، أي على النحو التالي: #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); grid-template-areas: "header header header header header header header header header" "content content content content content content content sidebar sidebar" "footer footer footer footer footer footer footer footer footer"; } نلاحظ من السطر الأوّل أنّ المنطقة header تمتدّ على كامل الأعمدة، وكذلك الأمر بالنسبة للمنطقة footer على السطر الثالث. أمّا السطر الثاني فسيحتوي على منطقة المحتوى الرئيسي main بالإضافة إلى منطقة الشريط الجانبي sidebar. حتى هذه اللحظة لم يتم إنشاء الشبكة بعد. في الحقيقة تُشير الأسماء المعرّفة توًّا: header و content و sidebar و footer إلى أسماء أصناف CSS سنعرّفها بعد قليل. بحيث نستخدم خصائص جديدة مع هذه الأصناف تُشير إلى بداية ونهاية كل منطقة بالنسبة للأسطر: grid-row-start و grid-row-end وبالنسبة للأعمدة: grid-column-start و grid-column-end. يمكن إضافة أصناف CSS هذه مباشرةً بعد شيفرة الشبكة السابقة: .header { grid-row-start:1; grid-row-end:2; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:8; } .sidebar { grid-row-start:2; grid-row-end:3; grid-column-start:8; grid-column-end:10; } .footer { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:7; } تُحتسب المناطق اعتبارًا من خطّ البداية (سطر أو عمود) إلى الخطّ الذي يلي خطّ النهاية الفعليّ حتى ولو لم يكن هذا الخط موجودًا، فإذا لم نأخذ هذا الأمر بعين الاعتبار، فمن الممكن إسناد نفس القيمة للبداية وللنهاية لمنطقة ما وبالتالي لا تظهر هذه المنطقة أبدًا. بهذا نكون قد انتهينا من إعداد الشبكة ويمكن البدء بإضافة التنسيقات المرغوبة. الأمر السلبيّ الوحيد في التصميم السابق أنّه ليس متجاوبًا مع شاشات الأجهزة المحمولة. جعل البنية متجاوبة مع الأجهزة المحمولة وفقًا لهذا التقرير فإنّ أكثر من نصف مجموع الأوقات التي قضاها المستخدمون على الانترنت في النصف الأوّل من عام 2015 كانت على الأجهزة المحمولة. وهذا يزيد بمقدار 11% عمّا كان عليه الوضع في العام السابق ويزيد بمقدار 39% عمّا كان عليه في عام 2008. من الملاحظ أنّ عدد الساعات التي يتمّ قضائها على الأجهزة المحمولة في ازدياد مطّرد، فإن لم نجعل موقعنا متجاوبًا مع هذه الأجهزة فسيفوتنا القطار! قد تبدو هذه العمليّة صعبة للوهلة الأولى، ولكنّ الأمر ليس بهذه الصعوبة. يوجد أسلوب أساسيّ يمكن من خلاله جعل البنية الشبكيّة متجاوبة، حيث يمكن باستخدام القاعدة media@ والخاصيّتان max-width و min-width أن نسمح للمتصفّح بعرض محتوى مناسب إذا استُخدم الجهاز المحمول لعرض الموقع. يمكن باستخدام القاعدة media@ تعريف أنماط تنسيق مُحدّدة للموقع بحيث تُطبّق عند استعراض هذا الموقع ضمن شاشة الجهاز المحمول. تسمح الخاصيّة max-width بشكل عام لأيّ عنصر بالالتزام بقياس مُحدّد عن طريق إسناد العرض الأعظمي للمنطقة التي يُسمح للمحتوى الخاص به أن يشغلها. تخبر هذه الخاصيّة موقعنا بأنّه من الممكن أن ندع محتويات المناطق تكبر أو تصغر طالما أنّها لا تتجاوز القيمة التي حدّدناها ضمن الخاصيّة max-width. أمّا عند استخدام الخاصيّة max-width مع القاعدة media@ فسيكون للخاصيّة max-width دور جديد وهو تحديد شرط لتطبيق أنماط تنسيق مُحدّدة عندما يتم استخدام شاشات صغيرة، كشاشات الأجهزة المحمولة. وينطبق نفس الأسلوب تمامًا على الخاصيّة min-width عند استخدمها مع القاعدة media@. الآن لنضع القاعدة التالية أوّل تنسيقات CSS التي أضفناها إلى ملف التنسيق: @media (max-width:900px) and (min-width:500px) { /* Your grid layout code goes here */ } ستُطبّق التنسيقات الموجودة ضمن القاعدة media@ عندما يُستخدم أيّ جهاز يتراوح عرض شاشته بين 900 بيكسل (العرض الأعظمي max-width) و500 بيكسل (العرض الأصغري min-width). لا ننسى بالطبع تعديل هذه القيم بما يتلاءم مع احتياجاتنا. التغييرات البسيطة في البنية لنضع الآن جميع التنسيقات مع بعضها البعض، ونضيف المزيد منها إلى البنية الجديدة. الشكل النهائي لملف تنسيقات CSS سيبدو مشابهًا لما يلي: @media (max-width:900px) and (min-width:500px) { #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); } } .header { grid-row-start:1; grid-row-end:2; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:8; } .sidebar { grid-row-start:2; grid-row-end:3; grid-column-start:8; grid-column-end:10; } .footer { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:7; } وهنا صورة تمثيليّة لما سنحصل عليه ضمن المتصفّح: صورة تمثيليّة للشكل الناتج يتألّف من ترويسة ومنطقة محتوى رئيسيّة وشريط جانبي ومنطقة للتذييل. إذا أردنا في أيّ وقت تعديل البنية الشبكيّة السابقة، فكل ما علينا فعله هو إعادة تعريف المناطق بتغيير مواقع البداية والنهاية لها لنحصل على الشكل المرغوب. وهذا يساعدنا على الانتقال إلى أيّ شكل جديد دون الحاجة لإعادة تصميم الصفحة بشكل كامل. توجد هناك تقنيّات متقدّمة يمكننا استخدمها لإضافة المزيد من المزايا إلى هذه البنية، يمكننا كما هو متوقّع استخدام تنسيقات CSS المألوفة لإكساب بنيتنا الجديدة تنسيقات جميلة وجذّابة. خاتمة نحن مستعدّون الآن لاستخدام آخر التحسينات في عالم CSS، يمكننا الآن فهم وإنشاء عناصر جديدة ومختلفة وتجميعها معًا لتشكيل بنية شبكيّة. أنصح بمراجعة وثائق العمل الحاليّة الخاصّة بالبنية الشبكيّة، وبشكل دوريّ، للاطّلاع على آخر المستجدّات حالما تصدر. ترجمة -وبتصرّف- للمقال Understanding CSS Grids for Modern WordPress Website Design لصاحبته Jenni McKinnon.
  3. أطلقتُ مدوّنة ووردبريس منذ عامين. أضفت إليها الكثير من المحتوى لبضعة أشهر. كتبتُ المقال بعد المقال، مع التركيز على أن يكون المحتوى عالي الجودة. كل هذا أملاً في أن يأتي النجاح ولو بعد حين. ولكن كما هي العادة في هذه القصص، بعد فترة صرفتني التزامات أخرى عن المدوّنة، وتركتها في حالة من الإهمال. لم أنشر حتى كتابة هذه السطور مقالاً واحدًا على الموقع لمدّة تزيد عن 15 شهرًا. كانت المدوّنة تجذب أقل من 2000 زائرًا شهريًا وقت التخلّي عنها. قررتُ قبل بضعة أيّام التحقّق من إحصاءات الموقع على تحليلات جوجل للمرّة الأولى خلال مدّة تزيد عن العام. والعجيب أنّي اكتشفت أنّ المدوّنة قد جذبت أكثر من 10,000 زائرًا في الشهر السابق من دون أيّ تدخل من طرفي. ربّما تقول أنّها أيّام سعدي ولكن كانت هناك مشكلة كبيرة: المقاييس. نتحدّث بالتحديد عن معدّل ارتداد (Bounce Rate) تجاوز 90%، فقط 1.18 صفحة في الجلسة الواحدة ومتوسّط الجلسة 46 ثانية. إذًا ما هو المغزى من القصّة؟ ببساطة لا يهم عدد الزّيارات الذي تحصل عليه، فإنّ موقعك لن يربح شيئًا إذا لم يكن مُحسّنًا بشكلٍ يتوافق مع قابلية الاستخدام. يعتبر الحصول على زوّار لموقع هو نصف التحدّي، ما يهمّ حقًّا هو جعل هؤلاء الزوّار يسجّلون في موقعك. ومن تجربتي فإنّ قابلية الاستخدام غالبًا ما تكون الجانب الذي تُهمله الكثير من المُدوّنات والمشاريع التقنية على الويب. لحسن الحظّ فإنّ ووردبريس (وعدد لا يحصى من القوالب والإضافات) يعطينا كل الأدوات التي نحتاجها لبناء مواقع قابليّة استخدامها عالية. في هذا المقال سنقوم باستكشاف خمسة طرق رئيسيّة والتي من خلالها يمكنك جعل تجربة تصفّح موقع ووردبريس الخاص بك ممتعة أكثر. لماذا يعد "تحسين تجربة المستخدم" سببا في غاية الأهمية لنجاح موقعك/ مدوّنتك ربّما لا حاجة لي أن أذكّرك بماهية تجربة المستخدم (User Experience – UX) ولكن إذا كنت ترغب في معرفة المزيد، فلدينا قسم يحتوي مجموعة مقالات حول تجربة المستخدم على أكاديمية حسوب. كما هو مُتوقّع فإن تحسين تجربة المستخدم (User Experience Optimization – UXO) تهدف إلى تحسين موقعك ليكون أكثر قابلية للاستخدام. لاحظ أنّنا هنا لا نتحدّث عن جانب تصميم الموقع في حدّ ذاته. فيمكن لموقع سيء التصميم أن يقدّم تجربة مستخدم رائعة لجمهوره المستهدف. إنّما نتحدّث هنا تحديدًا عن "قابلية استخدام" موقعك. يرتبط هذا الأمر ارتباطًا وثيقًا بالتصميم الخاص بموقعك ولكن لا يعتمد بالضرورة على جودة التصميم في حدّ ذاتها. لن نتطرّق اليوم لكيفيّة جعل موقعك يبدو جميلًا وإنّما سنتطرّق إلى كيف تجعل موقعك قابلاً للاستخدام على أكمل وجه. الأمر الذي يهم في نهاية المطاف إذا أردت الحصول على عدد أكبر من الزوّار الدائمين. 1- التصميم المتجاوب (Responsive Design) من المؤكّد أنّك تعرف مدى أهميّة التصميم المتجاوب. إلا أنّه هناك اختلافًا كبيرًا بين معرفة أهميّة التصميم المتجاوب وأن يكون لديك بالفعل تصميم ووردبريس متجاوب وقابل للاستخدام بشكلٍ عالي الجودة. الأمر بسيط: إذا كان موقعك غير قابل للاستخدام على أكبر عدد من الأجهزة المستخدمة بواسطة جمهورك المستهدف، فإنّ موقعك لا يعدّ متجاوبًا بما فيه الكفاية. لأن هذه هي الفكرة عندما يتعلّق الأمر بالتجاوب. موقعك ليس إما مُتجاوبًا أو ليس مُتجاوب فالإجابة على هذا السؤال (هل موقعك مُتجاوب) ليست “نعم” أو “لا” بل هي نسبة مئوية إن صحّ التّعبير، حيث يجب أن نجيب على سؤال آخر وهو "ما نسبة الزيارات التي يظهر فيها موقعك مُتجاوبًا". يمكنك معرفة أكثر الأجهزة التي يستخدمها زوّار موقعك من خلال تحليلات جوجل عن طريق مسار Audience > Mobile > Devices: في المثال أعلاه يمكنك رؤية أنّ غالبيّة زوّار الموقع يستخدمون أجهزة Apple iPhone وiPad. ثاني أكثر الأجهزة شيوعًا لدى زوّار الموقع هو Nexus 5. بناءً على هذه البيانات فمن الطبيعي أن تقوم باختبار موقعك على iPhone وiPad. لن أخوض في تفاصيل اختبار قابلية الاستخدام لأجهزة الهاتف. بدلاً من ذلك فسنركّز على الإجابة على السؤال البديهي: هل تصفّح موقعك يبدو سهلاً على الهاتف الذي قمت باختياره؟ سيكون من الجيّد إذا استطعت طلب مساعدة من قريب أو صديق لك في هذا الاختبار (خاصّةً إذا لم ير هذا الشخص موقعك من قبل). إذا كنت تملك الجهاز المستخدم بصورة أكبر لتصفّح موقعك فبالتأكيد يمكنك اختبار موقعك عن طريق هذا الجهاز. ولكن إذا لم يكن لديك الجهاز فأقترح عليك أدوات اختبار مثل MobileTest.me وأداة StudioPress' responsive testing. هذه الخدمة رائعة أيضًا. نقطة أخيرة: إذا لم تكن لديك الوسائل الكاملة للحصول على تصميم متجاوب لموقع ووردبريس الخاص بك فبإمكانك استخدام Jetpack's Mobile Theme. هذا القالب ليس الحل الأمثل، ولكنّه مجّاني وفوري التنفيذ. 2- الانتقال الثابت (Fixed Navigation) يمكنك تخمين ما تقوم به هذه الخاصيّة من اسمها: يبقى شريط القوائم ثابتًا في الجزء العلوي من الشاشة عندما تقوم بالتمرير (Scroll)، بدل اختفائه. تزيد خاصيّة الانتقال الثابت من قابليّة استخدام موقعك حيث أنّها تعتبر بمثابة ضمان لإمكانيّة وصول الزوّار لأكثر الروابط أهميّة في موقعك أغلب الوقت. نظرًا لحجم شاشات الهواتف، فيجب عليك إذا كنت تستخدم خاصيّة الانتقال الثابت أن تتأكّد من أن شريط الانتقال لا يستولي على معظم مساحة الشاشة بالنسبة للهواتف ذات الشاشات الصغيرة. راجع قسم التصميم المتجاوب أعلاه لمعرفة الأدوات التي يمكنك اختبار تصميم موقعك من خلالها على أجهزة الهاتف للتأكد من شريط الانتقال يعمل بالشكل المطلوب. إذًا كيف يمكنك إضافة شريط الانتقال الثابت إلى موقعك؟ هناك عدّة حلول. هناك الكثير من قوالب ووردبريس التي تقدّم لك إمكانيّة الحصول على شريط انتقال ثابت كأمر أساسي لكن لا تبدو فكرة استبدال قالب بآخر لمجرد الحصول على هذه الخاصّيّة فكرة عملية. لحسن الحظ فإن هناك إضافات ووردبريس مجّانية جاهزة لحلّ هذه المشكلة ، لديك حرية الاختيار من بين ثلاث إضافات مجّانيّة عالية الجودة متاحة للتحميل: Sticky Header myStickymenu Sticky Menu (or Anything!) on Scroll 3- قائمة جانبية ثابتة (عناصر) بعد استعراض الانتقال الثابت يمكنك بسهولة تخمين ما تفعله القائمة الجانبيّة الثابتة. برأيي فإنّ هذه الميزة لها تأثير أقلّ من قائمة الانتقال الثابتة من ناحية قابليّة الاستخدام إلا أنّها تعتبر مفيدة إذا أردت على سبيل المثال جذب الانتباه إلى عنصر محدّد مهم في موقعك. لاحظ أنّني قد قمت بتضمين كلمة "عناصر" أعلاه لسبب وجيه – ستكون الخاصيّة أكثر فعاليّة إذا أردت تثبيت عنصر محدّد من الشريط الجانبي بدلاً من الشريط بأكمله. بإمكانك تثبيت القائمة الجانبية باستخدام: الإضافة المذكورة سابقًا Sticky Menu أو وودجت Q2W3 Widget - Sticky Widget: 4- أزرار المشاركة الاجتماعية العائمة (Floating Social Share Buttons) من المؤكّد أنّك رأيت أزرار المشاركة الاجتماعيّة العائمة من قبل. الصورة التالية مثال على هذا النوع من الأزرار: يمكن لهذه الأزرار أيضًا أن تظهر إلى جانب المحتوى إلا أنّ هذا النّوع لم يعد شائعًا كما كان. إحدى العثرات التي يجب الحذر منها بالنّسبة لأزرار المشاركة الاجتماعيّة العائمة هي طريقة ظهورها في أجهزة الهواتف. هل تختفي جميع الأزرار معًا، وإذا كانت تختفي معًا فعلاً، كيف يمكن للمستخدم المشاركة من جهازه بسهولة عن طريق حلّ بديل؟ كل هذه هي أسئلة عليك الإجابة عليها من منظور قابليّة الاستخدام. إذا كانت أزرار المشاركة العائمة تختفي بالفعل فإنّك بحاجة لإيجاد حل بديل سهل الاستخدام لمستخدمي الهواتف النقّالة. إذًا كيف يمكن إضافية خاصيّة أزرار المشاركة الاجتماعيّة العائمة على موقع ووردبريس الخاص بك؟ ستقوم إضافة Floating Social بتنفيذ الأمر ببساطة. لا يوجد هناك الكثير من البدائل في الوقت الراهن ولكن الإضافتين Flare و Digg Digg يمكنهما تقديم الخاصيّة إلا أنّه لم يتمّ تحديثهما منذ فترة. بديل آخر لكل الحلول المعروضة أعلاه هو دمج أزرار المشاركة الاجتماعيّة الخاصّة بك في قائمة التنقّل الثابتة أو في القائمة الجانبيّة الثابتة في موقعك. غيض من فيض تردّدتُ كثيرًا عند كتابة هذا المقال لمعرفتي بأن الطرق التي يمكن استخدامها لزيادة قابليّة استخدام موقعك كثيرة جدًا. رغم ذلك فإنّك في نهاية المطاف اكتفيت بأربعة طرق فقط. هناك الكثير من الطرق إضافة إلى الأربعة طرق المذكورة سابقًا يمكنك استخدامها لتحسين قابلية المستخدم الخاصّة بموقعك. ركّزنا في هذا المقال على بعض الأشياء الأكثر ظهورًا للمستخدم ولكن في الحقيقة فإنّ الأشياء غير المحسوسة هي التي تخلق فرقًا أكبر بالنسبة لقابليّة الاستخدام. على سبيل المثال، تعتبر سرعة التحميل جزءًا كبيرًا جدًّا من قابليّة الاستخدام. إذا استغرق موقعك وقتًا طويلاً في التحميل فإنّ معظم الزّوار سيقومون ببساطة بمغادرة الموقع، في هذه الحالة فإنّ جميع جوانب موقعك ستصبح بلا معنى. مع أخذ ذلك في الاعتبار، يمكنك العمل على كل شيء بدءًا من تحسين الصورة، إلى التخزين المؤقّت، إلى حلول شبكة توصيل المحتوى (Content Delivery Network) ولا تنسى أدوات سرعة الصفحة. ترجمة -وبتصرّف- للمقال 4Quick Ways To Lower Your WordPress Site's Bounce Rate لصاحبه Tom Ewer
  4. أصبحت قابلية الوصول accessibility من أبرز المواضيع والنقاشات تداولًا بين مطوّري الويب، وازداد اهتمام أصحاب المواقع حول قابلية الوصول ومدى تكيّف مواقعهم مع أغلب الأجهزة والشاشات، وأعطى هذا الاهتمام المتزايد المجال لبزوغ شكل جديد كليًا من أشكال التصميم وحمل الاسم ‹‹تصميم المواقع المتجاوبة Responsive Web Design››، فمع زيادة حصّة أجهزة الهاتف والأجهزة اللوحيّة، أصبح من الضروري التأكّد من تجاوبيّة وتوافقيّة الموقع مع أي جهاز يستطيع الوصول إلى الإنترنت. يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD. ما هو التصميم المتلائم (Adaptive Web Design (AWD؟يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا. ما هو التصميم المتجاوب (Responsive Web Design (RWD؟يَستخدم التصميم المُتجاوب شيفرة CSS محدّدة لتعديل مظهر الموقع وفقا للجهاز الذي يستعرض الموقع، والبيانات المرتبطة بكل جهاز تُحمّل بصرف النظر فيما إذا كانت تُستخدم أم لا، وتمامًا عكس المواقع المصممة باستخدام التصميم المتلائم، فإن المواقع المصممة باستخدام التصميم المتجاوب تُحمّل بسرعة منخفضة نسبيًا. ما هو الفرق إذا؟يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD: يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.خاتمةبصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر. ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.