مع تزايد الوصول إلى الإنترنت من الأجهزة المحمولة ، لم يعد يكفي أن يكون لديك تصميم موقع ثابت يبدو جيدًا فقط على شاشة الكمبيوتر.
ناهيك عن أنه يتعين عليك أيضًا التفكير في الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة 2 في 1 ونماذج الهواتف الذكية المختلفة ذات أبعاد الشاشة المختلفة عند الخروج بتصميم.
لذا فإن صفع المحتوى الخاص بك في عمود واحد واستدعائه للإيقاف لن يؤدي إلى قطعه.
باستخدام تصميم الويب سريع الاستجابة ، يمكنك التأكد من أن موقع الويب الخاص بك يبدو في أفضل حالاته على الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وشاشات سطح المكتب.
وهذا التحسن في تجربة المستخدم يعني زيادة التحويلات ونمو الأعمال.
سيوفر لك هذا الدليل كل ما تحتاج لمعرفته حول تصميم مواقع الويب سريع الاستجابة ، بما في ذلك التعريفات ، والمشي خطوة بخطوة ، والأمثلة ، والمزيد.
التصميم سريع الاستجابة هو أسلوب لتصميم الويب يجعل محتوى الويب الخاص بك يتكيف مع أحجام الشاشة والنوافذ المختلفة لمجموعة متنوعة من الأجهزة.
على سبيل المثال ، قد يتم فصل المحتوى الخاص بك إلى أعمدة مختلفة على شاشات سطح المكتب ، لأنها واسعة بما يكفي لاستيعاب هذا التصميم.
إذا قمت بفصل المحتوى الخاص بك إلى عدة أعمدة على جهاز محمول ، فسيكون من الصعب على المستخدمين قراءته والتفاعل معه.
يتيح التصميم سريع الاستجابة إمكانية تقديم تنسيقات متعددة ومنفصلة للمحتوى والتصميم الخاص بك إلى أجهزة مختلفة اعتمادًا على حجم الشاشة.
لا يكفي أن يبدو موقع الويب الخاص بك جيدًا على شاشة الكمبيوتر. 🖥 الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة 2 في 1 والهواتف الذكية كلها جزء من المعادلة … ويغطي هذا الدليل كل ما تحتاج لمعرفته حول التصميم سريع الاستجابة 🤳
انقر للتغريد
الفرق بين التصميم سريع الاستجابة والتصميم التكيفي هو أن التصميم سريع الاستجابة يتكيف مع عرض إصدار صفحة واحدة. في المقابل ، يوفر التصميم التكيفي عدة إصدارات مختلفة تمامًا من نفس الصفحة.
تصميم سريع الاستجابة
التصميم المتجاوب مقابل التصميم التكيفي
كلاهما اتجاهان مهمان لتصميم الويب يساعدان مشرفي المواقع على التحكم في كيفية ظهور مواقعهم على الشاشات المختلفة ، لكن النهج مختلف.
من خلال التصميم سريع الاستجابة ، سيصل المستخدمون إلى نفس الملف الأساسي من خلال متصفحهم ، بغض النظر عن الجهاز ، لكن كود CSS سيتحكم في التخطيط ويعرضه بشكل مختلف بناءً على حجم الشاشة. باستخدام التصميم التكيفي ، يوجد نص برمجي يتحقق من حجم الشاشة ، ثم يصل إلى القالب المصمم لهذا الجهاز.
إذا كنت جديدًا في تصميم الويب أو التطوير أو التدوين ، فقد تتساءل عن سبب أهمية التصميم سريع الاستجابة في المقام الأول.
الجواب بسيط. لم يعد يكفي التصميم لجهاز واحد. تجاوزت حركة مرور الويب عبر الأجهزة المحمولة سطح المكتب وتشكل الآن غالبية حركة مرور موقع الويب ، حيث تمثل أكثر من 51٪ .
الجوال ، الكمبيوتر اللوحي ، حصة سوق سطح المكتب
الجوال ، الكمبيوتر اللوحي ، حصة سوق سطح المكتب
عندما يستخدم أكثر من نصف زوارك المحتملين جهازًا محمولًا لتصفح الإنترنت ، لا يمكنك فقط تقديم صفحة مصممة لسطح المكتب. سيكون من الصعب قراءتها واستخدامها ، وتؤدي إلى تجربة مستخدم سيئة.
لكن هذا ليس كل شيء. يشكل المستخدمون على أجهزة الجوال أيضًا غالبية زيارات محرك البحث .
حركة بحث الجوال
حركة بحث الجوال
أخيرًا ، على مدار السنوات القليلة الماضية ، أصبح الهاتف المحمول أحد أهم القنوات الإعلانية. حتى في سوق ما بعد الجائحة ، ينمو الإنفاق على إعلانات الهاتف المحمول بنسبة 4.8٪ ليصل إلى 91.52 مليار دولار.
سواء اخترت الإعلان على وسائل التواصل الاجتماعي أو استخدام نهج عضوي مثل YouTube SEO ، فإن الغالبية العظمى من حركة المرور الخاصة بك ستأتي من مستخدمي الهاتف المحمول.
إذا لم تكن صفحاتك المقصودة محسّنة للجوال وسهلة الاستخدام ، فلن تتمكن من زيادة عائد الاستثمار لجهودك التسويقية. ستؤدي معدلات التحويل السيئة إلى عدد أقل من العملاء المحتملين وإهدار الإنفاق الإعلاني.
يعتمد ما إذا كانت مواقع وورد بريس تستجيب أم لا على موضوع موقع WP الخاص بك. و ورد موضوع ما يعادل قالب لموقع ثابت والضوابط تصميم وتخطيط المحتوى الخاص بك.
إذا كنت تستخدم سمة وورد بريس افتراضية ، مثل Twenty Twenty ، فإن التصميم يكون سريع الاستجابة ، ولكن نظرًا لأنه تصميم مكون من عمود واحد ، فقد لا تدركه عند النظر إليه على شاشات مختلفة.
إذا كنت تستخدم سمة وورد بريس أخرى ، فيمكنك اختبار ما إذا كانت مستجيبة أم لا من خلال مقارنة شكلها على أجهزة مختلفة أو باستخدام Chrome Developer Tools.
في هذا القسم ، سنغطي الأساس الأساسي لتصميم مواقع الويب سريع الاستجابة ولبنات بنائه المختلفة.
CSS و HTML
تساؤلات الإعلام
تخطيطات السوائل
تخطيط Flexbox
صور مستجيبة
سرعة
أساس التصميم سريع الاستجابة هو مزيج من HTML و CSS ، وهما لغتان تتحكمان في محتوى وتخطيط الصفحة في أي متصفح ويب معين.
html مقابل css
HTML مقابل CSS (مصدر الصورة: codingdojo.com)
يتحكم HTML بشكل أساسي في بنية صفحة الويب وعناصرها ومحتواها. على سبيل المثال ، لإضافة صورة إلى موقع ويب ، يجب عليك استخدام كود HTML مثل هذا:
<img src="image.gif" alt="image" class=”full-width-img”>يمكنك تعيين “فئة” أو “معرّف” يمكنك استهدافها لاحقًا برمز CSS .
يمكنك أيضًا التحكم في السمات الأساسية مثل الارتفاع والعرض داخل HTML الخاص بك ، ولكن لم يعد هذا يعتبر أفضل ممارسة.
بدلاً من ذلك ، يتم استخدام CSS لتحرير تصميم وتخطيط العناصر التي تقوم بتضمينها في صفحة بها HTML. يمكن تضمين كود CSS في <style>قسم من مستند HTML ، أو كملف ورقة أنماط منفصل .
على سبيل المثال ، يمكننا تعديل عرض جميع صور HTML على مستوى العنصر مثل هذا:
img {
width: 100%;
}أو يمكننا استهداف الفئة المحددة “full-width-img” بإضافة نقطة في المقدمة.
.full-width-img {
width: 100%;
}يمكنك أيضًا التحكم في التصميم بما يتجاوز الطول والعرض واللون فقط . استخدام CSS مثل هذا هو كيفية جعل التصميم مستجيبًا عندما تقوم بدمجه مع تقنية تسمى استعلام الوسائط.
يعد الاستعلام عن الوسائط جزءًا أساسيًا من CSS3 يتيح لك عرض المحتوى للتكيف مع عوامل مختلفة مثل حجم الشاشة أو الدقة.
استعلامات الوسائط – تصميم الويب سريع الاستجابة
استعلامات الوسائط لسطح المكتب أو الجهاز اللوحي أو الهاتف الذكي
إنه يعمل بطريقة مشابهة لـ “شرط if” في بعض لغات البرمجة ، ويتحقق أساسًا مما إذا كان إطار عرض الشاشة واسعًا بدرجة كافية أو واسعًا جدًا قبل تنفيذ الكود المناسب.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}إذا كانت الشاشة بعرض 780 بكسل على الأقل ، فستشغل صور فئة “full-width-img” 90٪ من الشاشة وسيتم توسيطها تلقائيًا بهوامش عريضة متساوية.
يعد التصميم المرن جزءًا أساسيًا من التصميم المتجاوب الحديث. في الأيام الخوالي ، كان بإمكانك تعيين قيمة ثابتة لكل عنصر HTML ، مثل 600 بكسل.
يعتمد التنسيق المرن بدلاً من ذلك على القيم الديناميكية مثل نسبة مئوية من عرض منفذ العرض.
تخطيط مرن – تصميم ويب سريع الاستجابة
مثال على التخطيط المرن
سيؤدي هذا الأسلوب إلى زيادة أو تقليل أحجام عناصر الحاوية المختلفة ديناميكيًا بناءً على حجم الشاشة.
في حين أن التخطيط القائم على النسبة المئوية مرن ، شعر العديد من المصممين ومطوري الويب أنه لم يكن ديناميكيًا أو مرنًا بدرجة كافية. Flexbox عبارة عن وحدة CSS مصممة كطريقة أكثر فاعلية لتخطيط عناصر متعددة ، حتى عندما يكون حجم المحتويات داخل الحاوية غير معروف.
تقوم الحاوية المرنة بتوسيع العناصر لملء المساحة الخالية المتوفرة أو تقليصها لمنع الفائض. تحتوي هذه الحاويات المرنة على عدد من الخصائص الفريدة ، مثل justify-content ، التي لا يمكنك تحريرها باستخدام عنصر HTML عادي.
تبرير flexbox
حاوية Flexbox
إنه موضوع معقد ، لذا إذا كنت تريد استخدامه في تصميمك ، فيجب عليك قراءة دليل flexbox الخاص بـ CSS Tricks .
يتبع التكرار الأساسي للصور المتجاوبة نفس مفهوم التخطيط المرن ، باستخدام وحدة ديناميكية للتحكم في العرض أو الارتفاع. نموذج كود CSS الذي قمنا بتغطيته سابقًا يحقق هذا بالفعل:
img {
width: 100%;
}وحدة النسبة المئوية تقترب من نسبة مئوية واحدة من عرض أو ارتفاع منفذ العرض وتتأكد من بقاء الصورة متناسبة مع الشاشة.
تكمن مشكلة هذا الأسلوب في أنه يتعين على كل مستخدم تنزيل الصورة بالحجم الكامل ، حتى على الهاتف المحمول.
لتقديم إصدارات مختلفة معدة لتناسب أجهزة مختلفة ، يلزمك استخدام srcsetسمة HTML في علامات img لتحديد أكثر من حجم للصورة للاختيار من بينها.
<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>يستخدم وورد بريس تلقائيًا هذه الوظيفة للصور المضمنة في المنشورات أو الصفحات.
عندما تحاول إنشاء تصميم سريع الاستجابة لموقع الويب الخاص بك ، يجب أن تكون سرعة التحميل أولوية قصوى .
يبلغ متوسط معدل الارتداد للصفحات التي يتم تحميلها في ثانيتين 9٪ ، بينما الصفحات التي تستغرق 5 ثوانٍ تؤدي إلى معدل ارتداد يبلغ 38٪.
يجب ألا يؤدي أسلوبك في الاستجابة إلى منع أو تأخير العرض الأول لصفحتك أكثر مما تحتاج إليه.
هناك عدة طرق يمكنك من خلالها جعل صفحاتك أسرع. إن تحسين صورك ، وتنفيذ التخزين المؤقت ، والتقليل ، واستخدام تخطيط CSS أكثر كفاءة ، وتجنب JS لحظر العرض ، وتحسين مسار العرض الحرج ، كلها أفكار رائعة يجب أن تفكر فيها.
يمكنك أيضًا محاولة تطبيق Google AMP لصفحات الجوال الخاصة بك ، ولكن في دراسة حالة Google AMP الخاصة بنا ، انخفض العملاء المحتملون عبر الهاتف المحمول بنسبة هائلة بلغت 59٪.
للعمل مع استعلامات الوسائط ، تحتاج إلى تحديد “نقاط التوقف سريعة الاستجابة” أو نقاط توقف حجم الشاشة. نقطة التوقف هي عرض الشاشة حيث تستخدم استعلام وسائط لتنفيذ أنماط CSS جديدة.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
الجوال: 360 × 640
الجوال: 375 × 667
الجوال: ٣٦٠ × ٧٢٠
آيفون X: 375 × 812
بكسل 2: 411 × 731
الجهاز اللوحي: 768 × 1024
الكمبيوتر المحمول: 1366 × 768
كمبيوتر محمول أو كمبيوتر مكتبي عالي الدقة: 1920 × 1080
إذا اخترت أسلوب تصميم الجوّال أولاً ، باستخدام عمود واحد وأحجام خطوط أصغر كأساس ، فلن تحتاج إلى تضمين نقاط فصل الأجهزة المحمولة – إلا إذا كنت ترغب في تحسين التصميم لنماذج معينة.
الجوال أولاً – تصميم الويب سريع الاستجابة
تصميم الجوال الأول (مصدر الصورة: silocreativo.com)
لذلك يمكنك إنشاء تصميم أساسي سريع الاستجابة من خلال نقطتي توقف فقط ، واحدة للأجهزة اللوحية والأخرى لأجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية.
كواحد من الأطر الأولى والأكثر استجابةً ، قاد Bootstrap الهجوم على تصميم الويب الثابت وساعد في إنشاء تصميم للهاتف المحمول أولاً كمعيار صناعي.
نتيجة لذلك ، لا يزال العديد من المصممين حتى يومنا هذا يتبعون نقاط توقف عرض الشاشة في Bootstrap.
نقاط توقف مستجيبة للتمهيد
نقاط توقف تستجيب Bootstrap
يستخدمون استعلامات الوسائط لاستهداف الهواتف ذات المناظر الطبيعية (576 بكسل) والأجهزة اللوحية (768 بكسل) وأجهزة الكمبيوتر المحمولة (992 بكسل) وشاشات سطح المكتب الكبيرة جدًا (1200 بكسل).
الآن بعد أن أصبحت معتادًا على اللبنات الأساسية ، حان الوقت لجعل موقع الويب الخاص بك مستجيبًا.
تعيين نطاقات استعلام الوسائط (نقاط التوقف المستجيبة)
حجم عناصر تخطيط مع النسب المئوية أو إنشاء تخطيط شبكة CSS
تنفيذ الصور المستجيبة
الطباعة المستجيبة لنص موقع الويب الخاص بك
اختبار الاستجابة
قم بتعيين نطاقات استعلام الوسائط بناءً على الاحتياجات الفريدة لتصميمك. على سبيل المثال ، إذا أردنا اتباع معايير Bootstrap لتصميمنا ، فسنستخدم استعلامات الوسائط التالية:
576 بكسل للهواتف الرأسية
768 بكسل للأجهزة اللوحية
992 بكسل لأجهزة الكمبيوتر المحمولة
1200 بكسل للأجهزة الكبيرة
الخطوة الأولى والأكثر أهمية هي إعداد أحجام مختلفة لعناصر تخطيط مختلفة بناءً على استعلام الوسائط أو نقطة توقف الشاشة.
سيعتمد عدد حاويات التخطيط المتوفرة لديك على التصميم ، لكن معظم مواقع الويب تركز على العناصر المدرجة أدناه:
غلاف أو حاوية
رأس
المحتوى
الشريط الجانبي
تذييل
تخطيط موقع مشترك
التخطيط المشترك
باستخدام نهج المحمول أولاً ، يمكنك تصميم عناصر التخطيط الرئيسية مثل هذا (بدون استعلام وسائط للأنماط الأساسية للهواتف المحمولة):
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}في النهج القائم على النسبة المئوية ، تتحكم السمة “float” في أي جانب من الشاشة سيظهر العنصر عليه أو يسارًا أو يمينًا.
إذا كنت تريد أن تذهب أبعد من الأساسيات وإنشاء التصميم المتجاوب المتطورة، تحتاج إلى تآلف مع تخطيط CSS حول flexbox وخصائصها مثل مربع التحجيم و العطف .
إحدى الطرق للتأكد من عدم كسر صورك هي مجرد استخدام قيمة ديناميكية لجميع الصور ، كما غطينا سابقًا.
هل تحتاج إلى استضافة سريعة وآمنة وصديقة للمطورين لمواقع عملائك؟ تم تصميم Kinsta مع وضع مطوري وورد بريس في الاعتبار ويوفر الكثير من الأدوات ولوحة تحكم قوية. تحقق من خططنا
img {
width: 100%;
}لكن هذا لن يقلل العبء الواقع على زائري هاتفك المحمول عند وصولهم إلى موقع الويب الخاص بك.
تأكد دائمًا من تضمين srcsetذلك بأحجام مختلفة من صورتك عند إضافة الصور إلى صفحاتك.
يمكن أن يستغرق القيام بذلك يدويًا وقتًا طويلاً ، ولكن مع CMS مثل وورد بريس ، يحدث ذلك تلقائيًا عند تحميل ملفات الوسائط .
ينصب التركيز الرئيسي لتصميم الويب سريع الاستجابة على استجابة كتل التخطيط والعناصر والوسائط. غالبًا ما يتم التعامل مع النص على أنه فكرة متأخرة.
ولكن للحصول على تصميم سريع الاستجابة حقًا ، يجب عليك أيضًا ضبط أحجام الخطوط بشكل مناسب لتتناسب مع حجم الشاشة.
أسهل طريقة للقيام بذلك هي تعيين قيمة ثابتة لحجم الخط ، مثل 22 بكسل ، وتكييفها في كل استعلام وسائط .
2 حجم الخط المبعثر اختيار
حجم الخط مقابل حجم عرض النقاط المبعثرة
يمكنك استهداف عدة عناصر نصية في نفس الوقت باستخدام فاصلة للفصل بين كل عنصر.
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}أولاً ، تريد اختبار ما إذا كان موقعك متوافقًا مع الجوّال من خلال اختبار Google المتوافق مع الجوّال . ما عليك سوى إدخال عنوان URL لموقع الويب الخاص بك والنقر فوق الزر “اختبار URL” للحصول على النتائج.
اختبار التوافق مع الأجهزة الجوّالة من Google
اختبار التوافق مع الأجهزة الجوّالة من Google
لا تقلق إذا استغرق الأمر بعض الوقت لجلب موقعك. هذا لا يعكس سرعة تحميل صفحتك.
إذا اتبعت الخطوات الموضحة في هذه المقالة ، فيجب أن تشير إلى أن لديك موقعًا إلكترونيًا متوافقًا مع الجوّال.
ثم تريد اختبار موقعك على أحجام شاشات متعددة باستخدام أداة مثل أدوات مطور Chrome .
اضغط على CTRL + Shift + I على أجهزة الكمبيوتر التي تعمل بنظام Windows ، أو اضغط على Command + Option + I على أجهزة Mac لفتح عرض الجهاز ذي الصلة. من هنا ، يمكنك تحديد الجهاز المحمول أو الجهاز اللوحي الذي تختاره لاختبار استجابة التصميم الخاص بك.
اختبار التنسيقات سريعة الاستجابة في Chrome
اختبار التنسيقات سريعة الاستجابة والجوّال في Chrome
هناك بضعة أسئلة تريد الإجابة عليها عند إجراء هذه العملية.
هل يتم ضبط التنسيق مع المقدار الصحيح من الأعمدة؟
هل يتناسب المحتوى جيدًا مع عناصر التخطيط والحاويات على شاشات مختلفة؟
هل تناسب أحجام الخطوط كل شاشة؟
يحتوي CSS على وحدات قياس مطلقة ونسبية. مثال على وحدة طول مطلقة هو سم أو بكسل. تعتمد الوحدات النسبية أو القيم الديناميكية على حجم ودقة الشاشة أو أحجام خطوط العنصر الجذر.
PX – بكسل واحد
EM – وحدة نسبية تعتمد على حجم خط العنصر.
REM – وحدة نسبية تعتمد على حجم خط العنصر.
VH ، VW -٪ من ارتفاع أو عرض منفذ العرض.
٪ – النسبة المئوية للعنصر الأصل.
من المحتمل أن يلتزم مصمم الويب أو المطور الجديد بالبكسل للنص لأنها وحدة الطول الأكثر مباشرة في CSS.
ولكن عند تعيين العرض والعرض الأقصى للصور والعناصر الأخرى ، فإن استخدام٪ هو الحل الأفضل. سيضمن هذا الأسلوب ضبط المكونات وفقًا لحجم شاشة كل جهاز.
سنغطي أدناه بعض الأمثلة على تصميم الويب سريع الاستجابة من مختلف الصناعات – ونتعلم مما يفعلونه بشكل صحيح أو خاطئ.
تصميم مستجيب Nyt
NYT على الهاتف المحمول والكمبيوتر اللوحي والكمبيوتر المحمول
على سطح المكتب ، يذكرك تخطيط NYT بصحيفة تقليدية مزدحمة بالمرئيات وصفوف وأعمدة مختلفة من المحتوى. يبدو أن هناك عمودًا أو صفًا منفصلاً لكل فئة من فئات الأخبار.
على الهاتف المحمول ، يتوافق مع معيار العمود الواحد ويضبط أيضًا القائمة لتكون بتنسيق الأكورديون ليكون أسهل في الاستخدام.
تصميم مستجيب كريس غيلبو 2
فن عدم المطابقة على الهاتف المحمول والكمبيوتر اللوحي والكمبيوتر المحمول
ظلت مدونة كريس جيلبو “فن عدم المطابقة” قوية لأكثر من عقد من الزمان. على الرغم من أن التصميم ليس الأكثر تطورًا ، إلا أنه سريع الاستجابة ويقوم بتكييف الشريط الجانبي ذي العمودين وتخطيط المحتوى الرئيسي لتصميم عمود واحد على الأجهزة المحمولة.
التصميم المتجاوب من أمازون 1
أمازون على الهاتف المحمول والكمبيوتر اللوحي والكمبيوتر المحمول
Amazon هي شركة عالمية رائدة في التجارة الإلكترونية لسبب ما ، واجهة المستخدم الخاصة بها مرنة تمامًا عبر جميع الأجهزة.
يزيل تخطيط الجهاز اللوحي بعض المساحة البيضاء ويضيف قسمًا قابلاً للتمرير من الرموز لتناسب المزيد من المحتوى في حزمة أصغر.
يقوم تخطيط الهاتف المحمول الخاص بهم بإدراجه في عمود واحد ، مع التركيز على الأساسيات ، مثل سجل الشراء الحديث ، بدلاً من رموز روابط الأقسام المختلفة من صفحتهم الرئيسية.
تصميم مستجيب لموقع youtube
YouTube على الهاتف المحمول والكمبيوتر اللوحي والكمبيوتر المحمول
يتمثل جوهر تصميم صفحة YouTube الرئيسية في شبكة مرنة من مقاطع الفيديو الملائمة لكل مستخدم. على الأجهزة اللوحية ، ينخفض عدد الأعمدة في كل صف إلى ثلاثة. على الهاتف المحمول ، يتم تقليله إلى تصميم أحادي العمود.
تعمل نسخة الهاتف المحمول أيضًا على نقل القائمة الرئيسية إلى أسفل الشاشة ، بالقرب من إبهام مستخدمي الهواتف الذكية. تعمل هذه الخطوة البسيطة على تحسين التنقل و UX.
تصميم سلكي سريع الاستجابة
سلكي على الهاتف المحمول والكمبيوتر اللوحي والكمبيوتر المحمول
يركز نهج Wired لتصميم الويب سريع الاستجابة على تنفيذ تخطيط أحادي العمود على جميع الشاشات الأصغر ، بدءًا من الأجهزة اللوحية.
إنه تخطيط أساسي ولكنه يسهل جذب انتباه المستخدم إلى أهم الأخبار و CTA للاشتراك .
تأكد من أن موقع الويب الخاص بك يبدو “مذهلاً” عبر الأجهزة باستخدام هذا الدليل للتصميم سريع الاستجابة!
انقر للتغريد
هناك الكثير من العناصر المختلفة التي تدخل في تصميم الويب سريع الاستجابة. بدون فهم أساسي لـ HTML و CSS ، قد يكون من السهل ارتكاب الأخطاء.
ولكن من خلال التعرف على وحدات البناء المختلفة ، وتحليل الأمثلة باستخدام أدوات تطوير الويب ، والاختبار أثناء التنقل باستخدام نموذج التعليمات البرمجية ، يجب أن تكون قادرًا على جعل موقع الويب الخاص بك مستجيبًا دون أي مشكلة كبيرة.
إذا كان هذا يبدو أكثر من اللازم لتحقيقه ، فيمكنك دائمًا إما استئجار مطور وورد بريس أو ببساطة التأكد من أن القالب الخاص بك مستجيب بالفعل.
وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:
مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.
تكامل Cloudflare Enterprise.
يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.
التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.
كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.
