تخطيطات الويب المستجيبة لمقدمة شاشات المحمول والنصائح والأمثلة

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

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

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

كيف يعمل التصميم المستجيب

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

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

لماذا التصميم للجوال?

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

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

(مصدر الصورة: bradfrostweb)

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

من المحتمل ألا تجعل موقع الويب الخاص بك يعمل بنسبة 100٪ على كل جهاز يعمل على تشغيل كل متصفح. ولكن يمكنك استهداف الأغلبية بناءً على متوسط عرض الشاشة. تستخدم طرز iPhone الأقدم دقة عرض 320 × 480 وهو أمر لا يمكن تصديقه. أود تصوير ما لا يقل عن 240 بكسل ، أو حتى أصغر إذا كنت تستطيع أن تناسب ذلك.

إزالة التكبير الافتراضي

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

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

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

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

تحجيم الصورة الديناميكية

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

img max-width: 100٪؛

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

تكون الصور المرنة ممكنة أيضًا إذا كنت تستخدم مكونات JavaScript أو jQuery. هناك بعض المطورين الأذكياء حقًا الذين وضعوا في الوقت المناسب لبناء محتوى صورة سريع الاستجابة. هذا الخيط هو واحد فقط من العديد في Stack Overflow الذي يتميز بنهج غريب ولكنه مناسب لحل أخطاء IE6 / 7.

أنا شخصياً أوصي بالالتزام بتغيير حجم صورة CSS الطبيعية. إذا كان موقع الويب الخاص بك يعمل في متصفح للجوال مع تمكين JavaScript ، فمن المحتمل أن يدعم CSS أيضًا. إذا كنت ترغب حقًا في التعمق أكثر ، فقم بمراجعة هذه المقالة التي تصل إلى 24 طريقة صور لـ Adaptive Designs ...

لمس تصاميم

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

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

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

تخطيطات CSS المخصصة

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

(مصدر الصورة: بيبرسون)

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

تبديل المحتوى الإضافي تشغيل / إيقاف

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

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

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

باستخدام استعلامات الوسائط

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

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

هناك بعض الخيارات الإضافية التي يمكنك استخدامها للكشف عن اتجاه الجهاز. يمكن أن يوفر لك هذا الدليل الرائع على وسائط CSS بعض الأفكار. بالإضافة إلى ذلك ، يقدم مشروع الهاتف المحمول الجديد 320 وما فوق ملفًا نقالًا لـ CSS للجوال @وسائل الإعلام الأساليب. يمكن تضمينها مباشرة في نفس ملف mobile.css وتطبيق القواعد على العديد من الأجهزة المختلفة.

 / * الهواتف الذكية (صورة وعرض أفقي) ----------- * /media فقط الشاشة و (دقيقة- عرض الجهاز: 320 بكسل) و (أقصى عرض للجهاز: 480 بكسل) / * الأنماط * / / * الهواتف الذكية (أفقي) ----------- * /media فقط الشاشة و (الحد الأدنى للعرض: 321 بكسل) / * الأنماط * / / * الهواتف الذكية (صورة) ---- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- شاشة الوسائط فقط و (دقيقة- عرض الجهاز: 768 بكسل) و (أقصى عرض- الجهاز: 1024 بكسل) / * الأنماط * /

(المصدر: استعلامات الوسائط CSS3 Hardboiled)

أدوات مفيدة

الهيكل العظمي - جميل Boilerplate لتصميم موبايل تستجيب
الانتقال من التكيف إلى استجابة كاملة

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

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

شنق القمر