ترجمة المقال القيم للغاية "تقنيات وأدوات واستراتيجيات تصميم الويب سريعة الاستجابة" من المنشور الشهير عبر الإنترنت للمطورين Smashing Magazine.

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

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

تقنيات تصميم الويب سريعة الاستجابة 1. انتقالات CSS واستعلامات الوسائط
انتقالات CSS واستعلامات الوسائط

يخوض Elliot Jay Stocks في التفاصيل حول طريقة الجمع بين استعلامات وسائط CSS وانتقالات CSS. الفكرة الأساسية هي كما يلي: عندما تقوم بتصميم موقع سريع الاستجابة باستخدام استعلامات الوسائط، فإنك تقوم باستمرار بتغيير عرض المتصفح الخاص بك لترى كيف يتصرف الموقع. ولكن في كل مرة تتم فيها معالجة أحد استعلامات الوسائط الخاصة بك، يكون الانتقال الصارم بين الأنماط مرئيًا (الأول، على سبيل المثال، لأجهزة الكمبيوتر المكتبية، والثاني للأجهزة اللوحية). لماذا لا تستخدم انتقالات CSS لتسهيل تلك التحولات الصعبة باستخدام الرسوم المتحركة؟

الصور ومقاطع الفيديو المستجيبة 5. الصور السائلة
الصور المطاطية (تحجيم المتصفح)

تعد الصور المطاطية أحد الموضوعات الأساسية في تصميم الويب سريع الاستجابة. توفر مقالة إيثان ماركوت نظرة عامة تفصيلية حول إنشائها باستخدام مقتطف الكود الكلاسيكي img ( max-width: 100%; ) بالإضافة إلى كافة التفاصيل الضرورية التي تحتاجها للبدء.

رسائل البريد الإلكتروني المستجيبة 14. تحسين بريدك الإلكتروني للأجهزة المحمولة باستخدام استعلام الوسائط
تحسين البريد الإلكتروني للأجهزة المحمولة باستخدام استعلامات الوسائط

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

أدوات تصميم الويب سريع الاستجابة يمكنك تصميم تصميم سريع الاستجابة من البداية أو استخدام الأدوات المدرجة أدناه لجعل عملية الإنشاء أسرع وأسهل.

هذا عبارة عن Polyfill سريع وخفيف الوزن (جزء من التعليمات البرمجية التي تضيف وظائف لا يدعمها المتصفح) تم إنشاؤه بواسطة Scott Jehl لدعم خصائص الحد الأدنى للعرض والحد الأقصى للعرض من استعلامات الوسائط CSS3 في IE6-IE8 وما فوق.

استخدم المعلومات من هذه الأداة الصغيرة لإنشاء موقع ويب سريع الاستجابة.

أداة للنماذج الأولية السريعة للتصميم سريع الاستجابة. يمكنك تصميم CSS لمجموعة متنوعة من أحجام الشاشات والاتجاهات والمتصفحات الشائعة، سواء كانت الهواتف (BlackBerry Torch أو Google Nexus One أو iPhone أو Motorola Droid) أو الأجهزة اللوحية (BlackBerry Playbook أو iPad أو Samsung Galaxy Tab أو Dell Streak) أو الشاشات أو تلفزيونات (720p، 1080p).

يمكنك عرض نتائج التصميم مباشرة في متصفحك واستخدام أدوات التطوير المفضلة لديك، مثل Firebug. جرب أيضًا الأداة البديلة ScreenFly.

يعتمد الإصدار 320 وما فوق على نهج الهاتف المحمول أولاً، حيث يتم إنشاء التصميمات لشاشات الهاتف المحمول أولاً ثم يتم توسيعها لتشمل الأجهزة اللوحية وأجهزة الكمبيوتر المكتبية والشاشات الأكبر حجمًا. إنه يعمل بشكل جيد كإضافة إلى HTML5 المعياري ومن تلقاء نفسه.

هذه قوالب قابلة للتخصيص لإنشاء تطبيقات ويب للجوال غنية بالميزات وعالية الأداء. سوف تحصل على توافق عبر المستعرضات للهواتف الذكية من الفئة A ودعم جيد لأجهزة BlackBerry وSymbian وIE Mobile الأقدم. بالإضافة إلى عدد كبير من التحسينات المختلفة لمتصفحات الهاتف المحمول.

أطر التصميم سريع الاستجابة 33. 1140 شبكة CSS

تم تحسين 1140 CSS Grid للعمل على شاشات تتراوح من أحجام الأجهزة المحمولة إلى الشاشات العريضة التي يبلغ عرضها 1280 بكسل. إنها شبكة بسيطة ومرنة تستخدم استعلامات الوسائط.

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

Flurid عبارة عن شبكة مطاطية بها 6 و 7 و 8 و 9 و 10 و 12 و 16 عمودًا.

FluidGrids هو مولد شبكة معياري يقوم بإنشاء تخطيطات مكونة من 6 أو 7 أو 8 أو 9 أو 10 أو 12 أو 16 عمودًا.

إطار CSS لإنشاء تخطيطات سريعة الاستجابة. يحتوي على 4 تخطيطات أساسية وثلاث مجموعات طباعة.

إطار مرن مع التركيز على الطباعة.

ستساعدك Tiny Fluid Grid على إنشاء شبكة مرنة خاصة بك مكونة من 12 أو 16 أو 24 عمودًا، وتعيين الحد الأقصى والحد الأدنى للعرض ونسبة الحشو.

استراتيجيات التصميم سريع الاستجابة 40. سير عمل المصمم سريع الاستجابة
سير عمل مطور تصميم الويب سريع الاستجابة

قام Luke Wroblewski بتدوين ملاحظات حول العرض التقديمي الذي قدمه Ethan Marcotte حول تطبيق مبادئ تصميم الويب سريع الاستجابة لتحديث الموقع الإلكتروني لإحدى الصحف الرائدة. من بين أمور أخرى، يشرح إيثان كيف يتعامل مع منهجية تصميم الويب سريع الاستجابة وما هي عملية النماذج الأولية في سياق تصميم الويب سريع الاستجابة.

قام Luke Wroblewski بتدوين الملاحظات في مؤتمر Breaking Development Conference أثناء حديث ستيفن هاي حول واقع التصميم للأجهزة المختلفة.

مناقشات ووجهات نظر مختلفة حول تصميم الويب سريع الاستجابة، يمكن لهذه المقالات، على الرغم من أنها ليست برامج تعليمية، أن توفر لك معلومات قيمة حول سبب وجوب استخدام تقنيات تصميم الويب سريع الاستجابة (ومتى لا تفعل ذلك).

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

المنشور عبارة عن مزيج من الفلسفة والاستراتيجية لتجميع أفضل الممارسات في مجال التصميم سريع الاستجابة.

مجموعة يتم تحديثها بانتظام من مواقع الويب التي تستخدم استعلامات الوسائط.

في الحلقة 9 من The Big Web Show، دعا جيفري زيلدمان ودان بنجامين إيثان ماركوت لمناقشة التصميم سريع الاستجابة.

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

تصميم الويب سريع الاستجابة

الرسم المتجاوب

css3

اضف اشارة

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

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

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

مفهوم القدرة على التكيف

"ما هو التصميم سريع الاستجابة وما الذي يتكيف معه؟" - قد يسأل الجاهل. سأجيبك: على نوع الجهاز المستخدم. يضمن التصميم سريع الاستجابة عرضًا جيدًا لصفحات الويب على الأجهزة المختلفة المتصلة بالإنترنت.

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

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

استراتيجية الجوال أولاً

تم اقتراح استراتيجية التطوير هذه في عام 2009 من قبل Luke Wroblewski، مؤلف الكتب والمقالات حول تصميم الويب، ورئيس شبكة Bagcheck الاجتماعية، والتي استحوذت عليها شركة Twitter Inc. بعد 9 أشهر فقط من إنشائها.

يُطلق على نهج Luke Wroblewski في التطوير اسم "Mobile First" لثلاثة أسباب:

تتيح لك بيئة الهاتف المحمول التركيز والتخلص من الفوضى التي تحدث بسبب "تشويش" مساحة كبيرة على الشاشة؛

يميل سوق الهاتف المحمول إلى التطور بوتيرة سريعة للغاية؛

ترتبط بيئة الهاتف المحمول بالعديد من الإمكانيات (الكاميرا، وإيماءات اللمس المتعدد، ونظام تحديد المواقع العالمي (GPS)، ومقياس التسارع، وتحديد الموقع الجغرافي).

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

تبدأ استراتيجية "Mobile First" بإنشاء هيكل ومحتوى إصدار الهاتف المحمول الذي يعمل في بيئات الإنترنت منخفضة السرعة والانتقال نحو نقاط توقف أكبر مع اتصالات أسرع، مع تحسين الإصدارات الخفيفة وتحسينها.

الاتجاهات والأساليب الحديثة في تطوير الويب

تعلم خوارزمية النمو السريع من الصفر في إنشاء مواقع الويب

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

استراتيجية المحتوى "المحتوى خارج"

الهدف من إنشاء تصميم سريع الاستجابة هو توفير أفضل سهولة للاستخدام في أي سياق. هذه فرصة ممتازة لتحليل المحتوى وتسهيل الوصول إليه وقراءته على جميع أنواع الأجهزة.

العديد ممن لا يستخدمون إستراتيجية Mobile First يفضلون إستراتيجية Content First. هذا بالطبع هو الشيء الصحيح الذي يجب فعله، ومع ذلك، لا ينبغي أن تأخذ هذه الدعوة حرفيًا وتعتقد أنه لا ينبغي عليك البدء في تطوير التصميم حتى يصبح المحتوى بأكمله جاهزًا.

يجب إنشاء المحتوى ومناقشته بشكل مستمر في مرحلة إنشاء تصميم موقع ويب سريع الاستجابة وبعد اكتماله! وكما قال المصمم الشهير سينيد بولز، "يجب أن يسير التصميم والمحتوى جنبًا إلى جنب". يجب أن يكملوا بعضهم البعض.

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

يجب أن يكون لديك إستراتيجية مطبقة تضمن تزويد كل مستخدم بالمحتوى اللازم في كل مرحلة من رحلته على موردك. يجب أن يعتمد هيكل الموقع على البحث في سلوك واحتياجات جمهورك المستهدف.

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

خذ الوقت الكافي للرسم والنموذج الأولي

يجب أن يبدأ اتخاذ القرار بشأن القرارات التي يجب اتخاذها لتصميم سريع الاستجابة بإنشاء تخطيط منظم - رسم تخطيطي، والذي سيكون من السهل قياسه في المستقبل.

إن تنوع الأجهزة بقدراتها ودقتها وأحجام شاشتها يعني وجود عدد كبير من التخطيطات. سيؤدي إنشاء رسم تخطيطي إلى وضع الأساس لنموذج أولي مستقبلي للمشروع. بمساعدتها، يمكنك طرح أفكار مختلفة للمناقشة، وعمل رسومات تقريبية ستشكل أساس إطار عمل الموقع.

بمجرد أن يصبح الرسم جاهزًا، يمكنك الانتقال إلى إنشاء نسخة مسودة صالحة للعمل من الموقع أو قالب HTML. تسمى هذه العملية بالنماذج الأولية، وتتضمن الحد الأدنى من التصميم المرئي لتحسين التفاعل والوظائف.

ستساعدك هذه الإستراتيجية على إعادة التفكير في أسلوبك بالكامل لإنشاء تصميم سريع الاستجابة. بدلاً من تطوير "مواقع الجوال" و"مواقع الويب"، ستركز الآن على تطوير أنظمة مرنة مع مجموعة من القواعد التي تحدد كيفية تسليم المحتوى وتسليمه بناءً على السياق.

آمل أن تكون هذه المقالة مفيدة لكل من مصممي الويب ذوي الخبرة والمبتدئين.

وأخيرًا، الكلمات الفاصلة التقليدية: اجعل الموقع مفيدًا ومريحًا ومألوفًا، بغض النظر عن الجهاز الذي يتم عرضه عليه. نراكم مرة أخرى أيها الأصدقاء!

ملاحظة: هل اشتركت بالفعل في تحديثات مدونتنا؟

الاتجاهات والأساليب الحديثة في تطوير الويب

تعلم خوارزمية النمو السريع من الصفر في إنشاء مواقع الويب

يعد وجود التصميم التكيفي أمرًا ضروريًا - وقد أثبتت الحياة ذلك من خلال أشعل النار؛ ولا يوجد في Mobile Joomla تأثير مثل التكيف المباشر مع موقع الويب. سأخبرك اليوم بكيفية إنشاء تصميم سريع الاستجابة عن طريق تحرير أنماط CSS باستخدام رأسك وأصابعك. لن يكون من الممكن وضع كل شيء بالتفصيل، حيث أن كل قالب له فروق دقيقة، لكنني سأعطي دفعة لبدء التكيف.

التكيف لسطح المكتب

أولاً، نقوم بتكييفه مع سطح المكتب. وهذه هي المرحلة الأساسية التي يبدأ منها الرقص بالدف. كثير من الناس يدركون العالم عن طريق الخطأ، معتقدين أنه ليس لديهم أي مشاكل في عرض الموقع على أجهزة الكمبيوتر العادية، حيث قام شخص ما بوضع القالب، ويبدو سلسًا عند الدقة العادية. مع دقة شاشتك، نعم، ولكن ماذا عن الشاشة الأكبر، كيف تبدو مع وحدات البكسل المطلقة على شاشة بدقة 1920 × 1080؟ الغرض من تعديل التصميم هو عرض الموقع بشكل طبيعي على الأجهزة المحمولة وتجنب أي مشاكل على الشاشات الكبيرة.

ماذا نفعل؟ الشيء الرئيسي هو تحويل جميع القيم الكبيرة في قالب CSS من البكسل (px) إلى النسب المئوية (٪). هناك عدة قواعد هنا:

- نقوم بتغيير بكسل بنسبة % فقط للقيم الكبيرة، وليس هناك حاجة لتغيير 5 بكسل بنسبة 1% (على سبيل المثال)،

- القيام بكل العمل من خلال Firebug، ثم نقل القيم إلى واقع الحياة.

قليلا للفهم العام. لديك موقع ويب يبلغ عرض صفحته 1000 بيكسل، ويحتوي على ثلاث كتل - 800 بيكسل مركزية وشريطي موقع جانبيين كل منهما 100 بيكسل. هذا يعني أنه بعد الاستبدال بالنسب المئوية، سيصبح حجم الصفحة 100%، والحاوية المركزية 80%، والكتل الجانبية 10%. الخام، ولكن مفهومة. الآن المزيد من التفاصيل.

قبل التعديل (حفظت ملف CSS القديم للتاريخ)، تمت كتابة الحاوية الرئيسية بأنماط مثل هذا:

#container (الهامش: 0 تلقائي؛ العرض: 1100 بكسل؛ ...

وبعد التعديل أصبح الأمر هكذا:

#container(margin:0 auto;width:77%;overflow: مخفي !مهم; ...

لقد تغيرت القائمة العلوية من:

القائمة العلوية> ul> li ul (العرض: 155 بكسل؛ ...

القائمة العلوية>ul>li ul(العرض:90%;...

ويتم تنفيذ إزاحة كتلة المحتوى باستخدام:

#content(الهامش:0 220 بكسل; ...

#المحتوى(الهامش:0 20%…

انتبه إلى الكود:

الفائض: مخفي! مهم؛

نستخدمه لتعطيل التمرير الأفقي، وهذا مفيد للتكيف مع الأجهزة المحمولة، وفي بعض الأحيان يكون من المنطقي الإشارة فقط إلى حظر التمرير الأفقي باستخدام:

تجاوز السعة-x: مخفي! مهم؛

قم بتنفيذ جميع الأعمال من خلال Firebug أو Google Inspector، وتحقق بأم عينيك - يجب أن يبدو الموقع كما هو بعد تحويل px إلى %. ليس عليك تقليص الشاشة بعد؛ فنحن لم نصل إلى التكيف مع الأجهزة المحمولة بعد، ولكننا قمنا بالعمل الأساسي للشاشات الكبيرة.

CSS للأجهزة المحمولة

لقد تم إنشاء قاعدة البيانات، بالمناسبة، وهذه هي المرحلة الأصعب، والآن نحتاج إلى التأكد من عرض الموقع بشكل صحيح على جميع الأجهزة المحمولة؛ هناك عدد قليل من التلاعبات السابقة، لأنه لن يكون من الممكن ضغط كل شيء إلى نسبة مئوية لشاشة صغيرة. أوافق، من المستحيل رؤية شريط موقع بعرض 10% على هاتف ذكي بدقة 320 بكسل.

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

مثال على شاشة الوسائط و

لقد كتبت CSS للأجهزة المحمولة على قالب Joomla 1.5 مثل هذا:

@ شاشة الوسائط و (الحد الأقصى للعرض: 500 بكسل) (الجسم، tbody(-moz-واصلات: تلقائي؛-webkit-واصلات: تلقائي؛-ms-واصلات: تلقائي؛ واصلات: تلقائي؛)

شاشة الوسائط و (الحد الأقصى للعرض: 400 بكسل) (td (فاصل الكلمات: كسر الكل؛)

شاشة @media و(max-width:1000px)(td(word-break:break-all;).أرقام الصفحات، #footer، #navigation، #header،.logo،.nav-box (العرض: لا شيء! مهم ;) #content (الموضع: تلقائي؛ العرض: 80%؛ الهامش السفلي: 0؛ الهامش الأيسر: 10%؛ الهامش الأيمن: 20%؛) #container ( العرض: 90% ! مهم؛).content-box (العرض: 110%).content-box h1 (حجم الخط: 130%;).content-box h2 (حجم الخط: 110%;).content-box h3 (حجم الخط: 120%;).content -box h4 (حجم الخط: 100%؛) .top-menu>div (الحشوة على اليمين: 0px !important;) img(max-width:96% !important;height:auto !important;)

بعض التفاصيل حول الكود.

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

أرقام الصفحات، #التذييل، #التنقل، #الرأس،.الشعار،.nav-box (العرض: لا شيء! مهم؛).

افتراضيًا، في الأجهزة المحمولة Joomla 3 والإصدارات الأحدث، تنخفض الكتل الجانبية، مما يؤدي إلى تمديد الصفحة إلى حد العار، لذلك حتى في المحركات الجديدة، يمكنك تصحيح بعض الأشياء يدويًا.

تتم الإشارة أيضًا إلى القيم الأخرى لكتل ​​الحاوية الرئيسية ونافذة المحتوى، ويتم تحويل مخرجات H1-H4 إلى نسب مئوية (البكسل يناسبني لسطح المكتب). تم أيضًا إجراء تصحيحات على مخرجات القائمة العلوية (لحسن الحظ، يجب تصغيرها، لكن هذا ليس بالغ الأهمية وسأفعل ذلك لاحقًا) وتم تغيير عرض الصور:

img(الحد الأقصى للعرض: 96% !مهم;الارتفاع:تلقائي!مهم;).

بالنسبة لهم، يشار إلى أن الحد الأقصى لحجم الصورة في العرض هو 96٪ (مع مسافات بادئة جميلة)، ويتم ضبط الارتفاع تلقائيًا.

لقد انتهت التفاصيل، مرة أخرى بالمعنى العام لتكييف موقع الويب (التصميم) من خلال CSS.

- تغيير قيم بيكسل الكبيرة إلى %،

- نقوم بالتسجيل بشكل منفصل لشاشة الوسائط وللأجهزة المحمولة.

عبر شاشة @media وتأكد من إغلاق كتل العرض غير الضرورية للجوال، ولكن قم بتحويلها إلى % تلك القيم التي يتم عرضها بشكل غير صحيح، حيث تم تركها بالبكسل في إصدار سطح المكتب من CSS.

ونتيجة لذلك، كانت تجربة المستخدم عند العمل مع Joomla Mobile 65-70%، مع التصميم سريع الاستجابة باستخدام CSS، أصبحت 99%. الاستنتاجات واضحة: لم يتم اختبار ياندكس وجول من حيث القدرة على التكيف، ولكنهما الآن يجتازان بضجة كبيرة.

الجميع يتحدث عن تصميم الويب سريع الاستجابة. لكن هل هذا يعني أن الجميع يفهم الغرض منه؟

لا يقتصر التصميم سريع الاستجابة على تطوير مواقع الويب للأجهزة المحمولة فحسب، بل يتعلق أيضًا بتكييف التخطيطات مع أحجام الشاشات المختلفة (إطارات العرض).

في هذا البرنامج التعليمي، سنلقي نظرة على المبادئ الأساسية وراء تصميم الويب سريع الاستجابة لفهم هذه التقنية بشكل أفضل. بعد ذلك، سنقوم بإنشاء موقع ويب سريع الاستجابة يتناسب بشكل مثالي مع الشاشات الكبيرة والصغيرة. أصبح تصميم الويب سريع الاستجابة شائعًا جدًا لدى المزيد والمزيد من الأشخاص الذين يستخدمون الأجهزة المحمولة مثل iPhone وiPad وBlackBerry وغيرها من الهواتف الذكية والأجهزة اللوحية التي تدعم الإنترنت.

من المهم أن نفهم أن الموقع لا ينبغي أن يكون مصممًا لجهاز سطح مكتب أو جهاز محمول محدد. المهم هنا هو قدرة التخطيط على التكيف مع الأحجام المختلفة.

إحباط المستخدم

يعتقد بعض الأشخاص أنه من الطبيعي أن يقوم المستخدم بتقليل الوظائف وإزالة المحتوى الذي يعتبرونه غير مهم. ولكن كيف يمكنك التأكد من أن المعلومات التي قمت بقصها أو نقلها إلى صفحة ثانوية ليست هي المحتوى الأكثر أهمية بالنسبة لي؟!

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

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

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

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

دليل خطوة بخطوة

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

أحد العناصر الأساسية للمرونة في التصميم سريع الاستجابة هو عرض التخطيط المرن. كل ما عليك فعله هو إنشاء عروض غلاف ومحتوى وأعمدة تتكيف مع عروض الأجهزة المختلفة. وهذا ليس بالأمر الجديد، ولكنه أكثر أهمية الآن من أي وقت مضى. لتبسيط الأمور، سنقوم بإنشاء صفحة مرنة تتكون من التنقل، وصورة رئيسية، وعمودين تأخذ في الاعتبار موضعها على الأجهزة ذات الأحجام المختلفة. لقد قمنا أيضًا بتضمين Response.min.js، الذي يسمح لاستعلامات الوسائط بالعمل في IE6-8.

هيكل HTML الأساسي:

عرض توضيحي للموقع المستجيب

• قم بالتمرير إلى المحتوى

شعار

• بيت
• يشتري
• خدمة
• جهات الاتصال

قصة

يعود تاريخ طراز مرسيدس SL إلى عام 1954 - حيث قدم الألمان سيارة مرسيدس 190 SL ذات البابين في معرض نيويورك للسيارات. ولك أن تتخيل مستوى الصدمة الجمالية لدى زوار معرض السيارات آنذاك. تحت جسم الجمال الآسر كانت هناك منصة مختصرة من سيارة مرسيدس W120 بونتون سيدان وهيكل أحادي من الفولاذ. كان التعليق مستقلاً تمامًا - مع عظم ترقوة مزدوج في الأمام وأعمدة محور متأرجحة في الخلف. الطول - 4290 ملم، المسافة بين المحاور - 2400 ملم.

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

/* التخطيط */ #wrapper ( العرض: 96%; الحد الأقصى للعرض: 920 بكسل; الهامش: تلقائي; الحشو: 2%; ) #main ( العرض: 60%; الهامش الأيمن: 5%; تعويم: يسار; ) جانبًا ( العرض: 35%; تعويم: يمين; ) /* الشعار H1 */ الرأس h1 ( الارتفاع: 98 بكسل; العرض: 216 بكسل; تعويم: يسار; العرض: كتلة; الخلفية: url(images/sllogo.png) 0 0 no- كرر؛ المسافة البادئة للنص: -9999 بكسل؛) /* التنقل */ التنقل في الرأس (عائم: يمين؛ الهامش العلوي: 40 بكسل؛) التنقل في الرأس li (العرض: مضمن؛ الهامش الأيسر: 15 بكسل؛) التنقل في الرأس ul li a ( زخرفة النص: لا شيء؛ اللون: #333؛) #skipTo (العرض: لا شيء؛) #skipTo li (الخلفية: #ccc؛) /* الصورة الرئيسية*/ #banner (طفو: يسار؛ الهامش السفلي: 15 بكسل؛ العرض : 100%; ) #banner img ( العرض: 100%; الارتفاع: تلقائي; )

ستظهر صورتك على العنصر الأصلي الخاص بها بالعرض الكامل، وستتقلص معها. فقط تأكد من أن الحد الأقصى لعرض الصور لا يتجاوز الحد الأقصى لعرض الحاوية الخاصة بها.

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

تبديل الملاحة الرئيسية

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

/* استعلامات الوسائط */ شاشة الوسائط و(الحد الأقصى للعرض: 480 بكسل) ( #skipTo ( العرض: كتلة؛ ) التنقل في الرأس، #main، جانبًا ( float: left; Clear: left; هامش: 0 0 10px; width : 100%؛) التنقل في الرأس li (الهامش: 0؛ الخلفية: #ccc؛ العرض: كتلة؛ الهامش السفلي: 3 بكسل؛) التنقل في الرأس أ (العرض: كتلة؛ الحشو: 10 بكسل؛ محاذاة النص: المركز؛)

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

للسماح باستعلامات الوسائط بأن تدخل حيز التنفيذ الكامل، يجب أن يحتوي الموقع النموذجي المستجيب والمحسّن للجوال على شيء مثل ما يلي:

خاصية العرض هي المسؤولة عن حجم إطار العرض. يمكن ضبطه على عدد محدد من البكسل، العرض = 960، أو على قيمة عرض الجهاز، وهو عرض الشاشة بالبكسل بمقياس 100%. تتحكم خاصية المقياس الأولي في المقياس عند تحميل الصفحة لأول مرة. تتحكم خصائص الحد الأقصى للحجم والحد الأدنى للحجم والقابلة للتحجيم بواسطة المستخدم في كيفية قيام المستخدمين بتحجيم الصفحة (أكبر/أصغر).

في الآونة الأخيرة، يتم تطوير التقنيات والأجهزة المختلفة (الأجهزة اللوحية والهواتف الذكية والشاشات) التي يتم من خلالها عرض المواقع بشكل متزايد.

في هذا المجال، نحصل على مجموعة كبيرة ومتنوعة من درجات دقة الشاشة المختلفة، وهذا بدوره يجعل من الصعب الحصول على المعلومات من المواقع. ولضمان سهولة قراءة المعلومات وعرضها على معظم الأجهزة، تم تطوير تقنية التصميم التكيفي.

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

تتضمن هذه التقنية أيضًا تطوير نسخة واحدة من موقع الويب لجميع الأجهزة، بدلاً من عدة أجهزة.

تصميم الويب التكيفي هو تصميم صفحات الويب التي تضمن العرض الصحيح للموقع على أجهزة مختلفة متصلة بالإنترنت وتتكيف ديناميكيًا مع أحجام نوافذ المتصفح المحددة.

المبادئ الأساسية للتصميم سريع الاستجابة:

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

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

أبعاد تخطيط التصميم المستجيب

ذات مرة في عام 2012، كتبت مقالة قصيرة حول ما يجب اختياره عند تطوير التصميم - تخطيط لموقع ثابت. حظي هذا المقال باهتمام كبير بين القراء، وتبين أن هذا الموضوع يثير اهتمام العديد من المصممين والمطورين المبتدئين؛ وفي هذا الصدد، قررت أيضًا تسليط الضوء على هذه المشكلة في هذه المقالة.

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

إذا اتبعت مبدأ الهاتف المحمول أولاً، فستكون هناك أحجام دقة تحتاج إلى تطوير تخطيط لها 320 بكسل / 480 بكسل / 768 بكسل / 1024 بكسل / 1280 بكسل، وربما يعتمد المزيد على المهام.

تبدو الصورة بهذا الشكل، ولكن غالبًا لا تكون هناك حاجة لإنشاء تخطيط لدقة معينة، على سبيل المثال، 480 بكسل. إذا لم ينكسر التخطيط عند الفاصل الزمني 768 - 320 بكسل.

بالطبع، سنقوم بإنشاء لوحة قماشية في Photoshop مع الأخذ في الاعتبار الحشو وشريط التمرير وكل شيء آخر، تمامًا مثل التخطيط العادي. لسهولة التطوير، بالإضافة إلى تصميم تخطيط أسرع. يستخدم العديد من الأشخاص الأطر في عملهم، وبالتالي يعتمدون على شبكة الإطار الذي يطورون عليه.

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

استعلام الوسائط وإطار العرض في التصميم سريع الاستجابة

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

تتم كتابة علامة تعريف viewport على النحو التالي: