مقدمة إلى تصميم الويب سريع الاستجابة: العناصر الزائفة واستعلامات الوسائط والمزيد

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

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

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

هذا هو نهج أحمق.

أطلق موقع Mashable على 2013 اسم عام تصميم الويب سريع الاستجابة. لماذا ا؟ أكثر من 30٪ من حركة المرور الخاصة بهم تأتي من الأجهزة المحمولة. وهم يتوقعون أن يصل هذا الرقم إلى 50٪ بحلول نهاية العام. عبر الويب بشكل عام ، جاء 17.4٪ من حركة مرور الويب من الهواتف الذكية في عام 2013. وفي الوقت نفسه ، يمثل استخدام Internet Explorer ، على سبيل المثال ، 12٪ فقط من إجمالي حركة مرور المتصفح ، بانخفاض حوالي 4٪ عن هذا الوقت من العام الماضي (وفقًا لذلك) إلى W3Schools). إذا كنت تقوم بالتحسين لمتصفح معين ، بدلاً من مستخدمي الهواتف الذكية في جميع أنحاء العالم ، فأنت تفتقد الغابة للأشجار. وفي بعض الحالات ، يمكن أن يعني هذا الفرق بين النجاح والفشل - التصميم سريع الاستجابة له آثار على معدلات التحويل وتحسين محركات البحث ومعدلات الارتداد وغير ذلك.

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

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

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

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

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

ظهرت أنواع الوسائط لأول مرة في HTML4 و CSS2.1 ، مما أتاح وضع CSS منفصل للشاشة والطباعة. بهذه الطريقة ، كان من الممكن تعيين أنماط منفصلة لشاشة كمبيوتر الصفحة مقابل النسخة المطبوعة.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

أو

 @media screen { * { background: silver } }

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

هذا التعريف ممكن من خلال إعداد الخصائص الأساسية: max-width ، و device-width ، و orientation ، و color . التعريفات الأخرى ممكنة أيضًا ؛ ولكن في هذه الحالة ، فإن أهم الأشياء التي يجب ملاحظتها هي الدقة الدنيا (العرض) وإعدادات الاتجاه (أفقي مقابل عمودي).

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

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

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

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

"التكبير الذكي"

تستخدم متصفحات الهاتف المحمول ما يسمى "التكبير الذكي" لتزويد المستخدمين بتجربة قراءة "فائقة". بشكل أساسي ، يتم استخدام التكبير الذكي لتقليل حجم الصفحة بشكل متناسب. يمكن أن يظهر هذا بطريقتين: (1) التكبير الذي يبدأه المستخدم (على سبيل المثال ، النقر مرتين على شاشة iPhone لتكبير الموقع الحالي) ، و (2) عرض نسخة مكبرة من صفحة ويب على حمل.

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

 <meta name="viewport" content="width=device-width, initial-scale=1" />

من خلال ضبط initial-scale على 1 ، نتحكم في مستوى تكبير الصفحة الأولي (أي مقدار التكبير عند تحميل الصفحة). إذا كنت قد صممت صفحة الويب الخاصة بك لتكون سريعة الاستجابة ، فيجب أن يملأ تخطيطك الديناميكي المرن شاشة الهاتف الذكي بطريقة ذكية دون الحاجة إلى أي تكبير مبدئي.

بالإضافة إلى ذلك ، يمكننا تعطيل ميزة التكبير / التصغير تمامًا باستخدام user-scalable=false .

عرض الصفحة

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

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

• 320 بكسل
• 480 بكسل
• 600 بكسل
• 768 بكسل
• 900 بكسل
• 1024 بكسل
• 1200 بكسل

ومع ذلك ، يوجد عدد من تعريفات العرض المختلفة. على سبيل المثال ، يحتوي 320 وما فوق على خمس زيادات افتراضية لاستعلام الوسائط CSS3: 480 و 600 و 768 و 992 و 1382 بكسل. إلى جانب المثال المعطى في هذا البرنامج التعليمي سريع الاستجابة لتطوير الويب ، يمكنني تعداد ما لا يقل عن عشرة مناهج أخرى.

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

عناصر Psuedo

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

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

ولكن بعد ذلك ، يمكنك أيضًا أن تكون مبدعًا باستخدام عناصر CSS الزائفة (المحددات) ، على سبيل المثال ، :before و :after . ملاحظة: مرة أخرى ، تدعم جميع المتصفحات الرئيسية العناصر الزائفة.

تُستخدم العناصر الزائفة لتطبيق أنماط معينة على أجزاء معينة من عنصر HTML ، أو لتحديد مجموعة فرعية معينة من العناصر. على سبيل المثال ، يتيح لك: العنصر الزائف :first-line تحديد الأنماط فقط في السطر الأول مع محدد معين (على سبيل المثال ، p:first-line سيتم تطبيق السطر الأول على السطر الأول من كل p s). وبالمثل ، فإن العنصر الزائف a:visited سيسمح لك بتعريف الأنماط على كل العناصر التي تحتوي a روابط قام المستخدم بزيارتها مسبقًا. من الواضح أن هذه يمكن أن تكون مفيدة.

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

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

باستخدام فقط :before و :after العناصر الزائفة ، نحقق ما يلي:

لمعرفة المزيد عن سحر عناصر psuedo ، يتمتع Chris Coyier بكتابة جيدة في CSS-Tricks.

إذن ، من أين أبدأ؟

في هذا البرنامج التعليمي ، أنشأنا بعض اللبنات الأساسية لتصميم الويب سريع الاستجابة (على سبيل المثال ، استعلامات الوسائط والعناصر الزائفة) ووضعنا بعض الأمثلة لكل منها. أين نذهب من هنا؟

الخطوة الأولى التي يجب عليك اتخاذها هي تنظيم جميع عناصر صفحة الويب الخاصة بك في أحجام شاشات مختلفة.

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

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

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

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

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

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

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

عناصر تصميم متجاوبة أخرى

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

 img { max-width: 100% }

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

بضع كلمات عن أنظمة شبكة السوائل

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

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

خاتمة

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