كيف تصنع موقعا متجاوبا؟ يمكنك هنا الحصول على معلومات حول هذه التقنية التكيفية استنادًا إلى نماذج الويب الحالية ، مما يعني أنه بموجب تصميم واحد ، يمكن الوصول إلى بوابة الويب وعرضها بشكل صحيح من أي جهاز كمبيوتر أو جهاز إلكتروني.
¿كيفية إنشاء موقع متجاوب?
يعد جعل موقع الويب مستجيبًا أو حساسًا للتكيفات الممكنة أمرًا مريحًا للغاية. بالإضافة إلى ضمان نجاح العمل بشكل صحيح على الإنترنت من أي منصة إلكترونية. في الأسطر التالية ، يتم توضيح طريقة إنشاء شبكة مستجيبة ، والتي يتم تصورها من طبيعة القدرة على التكيف مع صفحات الويب. لذلك ، عند تصميم صفحة ويب ضمن النموذج سريع الاستجابة ، سيكون من الممكن تعديل مظهر أو صورة الويب المذكور اعتمادًا على الجهاز الإلكتروني المستخدم للتنقل.
لا أحد يجهل الكمية المتعددة الأشكال من المعدات أو الأجهزة الإلكترونية الموجودة حاليًا للتنقل عبر الإنترنت ، مثل: أجهزة الكمبيوتر ، والأجهزة اللوحية ، والهواتف الذكية ، وأجهزة الكمبيوتر المحمولة ، وما إلى ذلك. في الأيام الأولى للإنترنت ، اعتاد مطورو مواقع الويب على إنشاء صفحات بعرض مشترك من وحدات البكسل. على سبيل المثال ، في التسعينيات ، كان للشاشات الموجودة حجم شاشة واحد يبلغ 90 بوصة وعرض ثابت يبلغ 14 بكسل. قام مصممو صفحات الويب بتكييف تصميماتهم مع الأبعاد القياسية للشاشات الوحيدة الموجودة.
بالقرب من بداية عام 2000 وحتى وصول 2010 ، تباينت نماذج الشاشة وعرض البكسل. تم تعديل تصميم الويب لكل من الاختلافات. كان من عام 2010 أن حدثت الثورة التكنولوجية الكبرى ، مما تسبب في خلل في سيناريو تصميم صفحة الويب. تم إدخال الملاحة عبر الهاتف المحمول في مجال الإنترنت. تستخدم هذه الاتصالات الهاتفية الجديدة المتصفحات تمامًا مثل الكمبيوتر. مع هذه الثورة التكنولوجية العظيمة ، حان الوقت للتقدم إلى ما يُعرف بالتصميم المتجاوب أو التصميم التكيفي لصفحات الويب.
أهمية معرفة كيفية إنشاء ويب مستجيب
من المهم جدًا أن يعرف مطورو صفحات الويب كيفية إنشاء شبكة ويب سريعة الاستجابة ؛ أنه حتى شركة Google ذات المكانة الكبيرة على الإنترنت تشير إلى أنها شيء ضروري للغاية. نظرًا لأن صفحة الويب المصممة وفقًا لنموذج الاستجابة تسمح بتحسين التنقل وتجنب المحتوى المكرر وتوفر جودة صورة ثابتة بشكل غير عادي. الجوانب الأخرى المهمة عند إنشاء موقع ويب سريع الاستجابة هي:
- من خلال تكييف واحد للغة ترميز النص التشعبي (HTML) ولغة CSS ، يمكن تحقيق ذلك لتغطية أي دقة شاشة. وبالتالي تجنب إنشاء صفحة ويب لكل نوع من الأجهزة التي تسمح لك بزيارتها أو تصفحها. هذا الجانب يقلل أيضًا من وقت التصميم.
- يتكيف تلقائيًا عند التصفح ، مما يجعل القراءة والتفاعل ممكنًا في كل زيارة محددة.
- تمكنوا من وضع أنفسهم بشكل أفضل وأسرع في محركات البحث. نظرًا لأن هذا النوع من التصميم يتجنب الازدواجية وإعادة التوجيه.
- تسمح صفحات الويب التي تم إنشاؤها بموجب هذا التصميم لمحتوياتها بالانتشار بسرعة أكبر ، نظرًا لطريقة المشاركة الأصلية والبسيطة.
ما هو تصميم الويب سريع الاستجابة
تصميم الويب سريع الاستجابة ، المعروف أيضًا باسم تصميم الويب التكيفي ، هو طريقة لتصميم صفحات الويب أو تطويرها. يتمتع هذا النظام بخصوصية السماح بزيارة موقع الويب الذي تم إنشاؤه بموجب تصميم واحد أو الوصول إليه من أي جهاز كمبيوتر أو منصة إلكترونية. الاسم مستجيب هو مصطلح باللغة الإنجليزية يشير إلى شيء مستجيب ، وقابل للتكيف ، ويمكن إدراكه ، ومرئي ، وما إلى ذلك.
تتلقى هذه التقنية هذا الاسم نظرًا لقدرة هذا النوع من مواقع الويب على التكيف مع كل قياس لعرض الشاشة. جعل عرضها وتشغيلها بشكل صحيح ممكنًا ، دون أي تمييز فيما يتعلق بالجهاز المستخدم للملاحة.
هذا ممكن بفضل تنظيم الصور والمحتوى ، فضلاً عن بساطة قائمة الويب سريعة الاستجابة. المؤهلات الرئيسية الأربعة التي تحدد هذا النوع من تصميم صفحات الويب وتجعله شائعًا للغاية هي:
- بسيط
- اقتصادية
- سريع
- وفوق كل ما سبق ، فهي تعمل بكامل طاقتها
كيفية عمل تصميم ويب سريع الاستجابة وتعقيده
يمكن القول إن التعقيد المتعلق بتصميم وتطوير صفحات الويب قد ظهر منذ عام 2010 ، عندما بدأت الهواتف المحمولة المزودة بملاحة بالظهور على مسرح الإنترنت. التي تستخدم متصفحات مثل Google و Firefox و Explorer وغيرها ، تمامًا مثل الكمبيوتر الشخصي. تصبح بهذه الطريقة في إمكانيات جديدة لزيارة مواقع الويب المختلفة. في هذه الأوقات ، بدأت أيضًا أول أجهزة لوحية إلكترونية مزودة بإمكانية الوصول إلى الإنترنت في الظهور.
من هناك أصبحت الاحتياجات لتصميم صفحات الويب أكثر تعقيدًا. نظرًا للتنوع الكبير في أحجام الشاشات الموجودة لعرض وتشغيل مواقع الويب. كان عليك العثور على نوع التصميم الذي يناسب أي نوع من الأجهزة ، وضبطه تلقائيًا.
لم يعد بإمكانك التصميم للحصول على دقة شاشة رئيسية واحدة أو اثنتين أو ثلاث. كان من الضروري أن نفهم أن دقة الأجهزة ستكون متغيرة بشكل متزايد ، بالإضافة إلى كونها أصغر بكثير من شاشة الكمبيوتر.
كانت هذه اللحظة بمثابة نهاية صلابة تصميم الويب. وليس فقط لمجموعة كبيرة ومتنوعة من الأجهزة ، ولكن لكل منها أيضًا خصائص محددة ، مثل:
- حجم الشاشة
- دقة الشاشة
- طاقة وحدة المعالجة المركزية
- OS
- سعة الذاكرة من بين أمور أخرى.
ثم يتم تقديم نموذج تصميم الويب الجديد ، والذي يتمثل هدفه في أنه بتصميم واحد ، سيكون التصور الصحيح ممكنًا بغض النظر عن جهاز التصفح. ومع ذلك ، فإن تطوير هذا النوع من المواقع له درجة من التعقيد.
ما هو سبب تعقيد تطوير شبكة مستجيبة؟
إن تطوير موقع ويب تحت تصميم قابلية التكيف يسمى الاستجابة له درجة من التعقيد ، حتى اليوم. لسببين رئيسيين ، مشار إليهما أدناه:
1-إنها تقنية لم يتم تطويرها لفترة طويلة وبسبب تعدد وسائل التطبيق ، لم يكن من الممكن تحديد أيها قد يكون الأفضل من بين جميع الخيارات. تظهر الابتكارات دائمًا فيما يتعلق بهذا النوع من تصميم الويب المطلوب تطويره. لذلك ، من الصعب تحديد أفضل إطار عمل أو تقنية دعم ، ولا قاعدة عامة تضمن الحل لأكبر عدد ممكن من العوائق. من أجل تسهيل تطوير هذا النوع من مواقع الويب.
2- السبب الثاني هو أن نظام التصميم التكيفي لا يعتمد فقط من وجهة النظر التكنولوجية. أما عن الطريقة التي سيختلف بها الموقع باختلاف الشاشات أو الأجهزة. بدلاً من ذلك ، يجب تصميمه مع فكرة عن كيفية عمله في كل سيناريوهات التنقل الممكنة. يضيف هذا السبب مستوى عالٍ من التعقيد إلى نموذج تصميم الويب سريع الاستجابة ليتم مسحه من قبل الأشخاص الذين يعملون كمطورين للمواقع.
تتطلب ممارسة واكتساب مهارات كافية للعمل مع تصميمات الويب التكيفية أو سريعة الاستجابة وقتًا أطول من أي نوع آخر من تصميمات الويب. لكن من المأمول أنه مع التقدم في الحوسبة ، ستكون درجة التعقيد أقل. من أجل مزيد من التطور في هذا الصدد ، من الموظفين ذوي المعرفة بالموقع الإلكتروني المشاركين في أنواع التصاميم سريعة الاستجابة ، والموظفين المحترفين مثل:
- التخطيطات
- المصممين
- المبرمجون
- موظفي التسويق التجاري والرقمي
تقليل وقت التصميم
إذا تم حل السببين السابقين ، فربما يؤدي ذلك إلى تقليل فترة التطوير أو إنشاء شبكة ويب سريعة الاستجابة. في نفس الوقت يمكن إتاحته لاستخدام المواقع المعتادة.
وفي الوقت نفسه ، لما لدينا اليوم ، قد يكون من الأسرع تطوير تصميم ويب جديد للأجهزة المحمولة من البداية ؛ لتحويل الويب أو إعادة تصميمه لجعله قابلاً للتكيف أو سريع الاستجابة. سيكون هناك أمل دائمًا في أن يجد شخص ما يومًا ما طريقة للقيام بذلك وتحقيقه ، فلنأمل في ذلك.
في غضون ذلك ، ما الذي يمكن عمله؟
حقيقة أنه لا يزال من الصعب جدًا إعادة تصميم موقع كامل لدينا على الويب ، لجعله قابلاً للتكيف. هذا لا يعني أننا نتوقف عن إجراء بعض التغييرات الصغيرة على الموقع. من أجل تحسينه وجعله مستجيبًا للتكيف مع المتصفحات المختلفة وكذلك على الأجهزة الإلكترونية المختلفة.
أول شيء يجب فعله هو التحقق من نوع تصميم الويب الذي يحتوي عليه موقع التنقل. تحقق بشكل أساسي:
- تخطيط الموقع
- ما هو هيكلها من حيث Html و CSS
عند تحليل هاتين النقطتين الأساسيتين ، يمكن إثبات أنه يمكن إجراء تعديلات صغيرة من أجل تحسين موقع الويب.
الاعتبارات السابقة التي يجب مراعاتها لمعرفة كيفية إنشاء ويب مستجيب
إذا كان الأمر كذلك أن لديك بالفعل بوابة ويب أو صفحة مقصودة أو مدونة محتوى ، والتي تم تطويرها وفقًا للتصميم المعتاد وتريد تحويلها إلى موقع ويب تصميم سريع الاستجابة أو قابلية للتكيف. إنه مجرد اتخاذ القرار واتخاذ الخطوة الأولى لتحقيقه ، واتخاذ القرار للقيام بذلك!
لا تعني حقيقة تحويل موقع ويب من تصميم تقليدي إلى متجاوب أن كل العمل الأصلي سيضيع. نظرًا لأنه لن يتم تجاهل كل المحتوى ، ولكنه سيخضع لتغييرات طفيفة وصغيرة فيه. يمكن استخدام محتوى مثل الصور والنصوص وبعض العناصر الأخرى في الموقع الحالي والعمل بشكل صحيح مع التحويل.
ومع ذلك ، في مواجهة البديل المتمثل في تكييف الموقع وتحسينه ، فمن الملائم معرفة بعض الاعتبارات السابقة التي ستفضل العمل الذي يتعين القيام به.
تحقق من حركة الويب الموجودة
قبل إجراء أي تغييرات على الويب الحالي ، يُنصح بالتحقق من حركة المرور الموجودة به. أي الإحصائيات المتعلقة بعدد الأشخاص الذين يزورون الموقع. بناءً على هذه المعلومات ، سنعمل على تعديل التصميم بهدف تحقيق نجاح أكبر وتحديد موقع بحث أفضل. في إعادة تصميم الويب وتكييفه ، من الملائم معرفة أدوات تحسين محركات البحث، لأنهم الأفضل عندما يتعلق الأمر بالحصول على موقع أفضل في الشبكة.
الإلهام الجيد ضروري
يُنصح أيضًا بإلقاء نظرة وإجراء ملف تحليل المنافس أو صفحات ذات محتوى مشابه لموقع الويب حيث سيتم تطبيق التغييرات نحو تصميم ويب سريع الاستجابة. تهدف هذه المعاينة إلى إجراء بحث لتحسينات المحتوى المحتملة. ولكن أيضًا كيف تعمل هذه الصفحات المتشابهة على أجهزة مختلفة. الجوانب التي يجب مراعاتها عند اختيار المواقع التي يمكن أن تكون ملهمة أو نماذج في التحسينات. ستكون سهولة التنقل في تلك الصفحات وتلك التي تتطلب قدرًا أقل من التكبير أو التمرير. هنا يمكنك العثور على أفضل الحيل لـ تحسين السيو من أجل تحقيق محتوى جيد طبقهم!
تفضل الدلالي Html
يشير استخدام Html الدلالية إلى أن تخطيط موقع الويب الأصلي قد تم إنشاؤه بشكل صحيح. هذا مفيد أو مفيد جدًا ، لأنه تم استخدام عناصر Html الأساسية فقط. مع الأخذ في الاعتبار عند تطوير الويب ، فإن دلالات كل علامة أعلى من تصميم نفس الويب. ترك العمل الخاص بالتصميم لـ CSS ، وفقًا للفئات والمعرفات.
أثناء عملية إنشاء موقع ويب سريع الاستجابة ، عناصر مثل:
- DIV
- P
- UL
- LI ، من بين أمور أخرى
ومع ذلك ، إذا كان من الضروري الامتثال لخطوة الاستغناء عن التصميم الكامل للنموذج. نظرًا لأنه لا يمكنك استخدام CSS متطفل ، فلا تستخدم أي سمة نمط داخل الكود. نظرًا لأن لغة Html أكثر دقة وبأقل DIV ، فإنها ستساعد في تسهيل إجراء التعديلات أو جعل الويب أكثر حساسية. لأنه سيتم تحسين CSS في النتيجة التي تم الحصول عليها.
اضبط Zoom بشكل صحيح على كيفية إنشاء موقع ويب سريع الاستجابة
يوصى بالاختيار الصحيح للتكبير في متصفحات الهاتف المحمول من أجل تحقيق العرض الكامل لمواقع الويب. كانت المتصفحات الموجودة على الأجهزة المحمولة موجودة مسبقًا قبل بدء تطوير تصميم الويب سريع الاستجابة. للعرض الكامل لمواقع الويب على هذه الأجهزة ، يتعين على المتصفحات اللجوء إلى أدوات التكبير / التصغير. لذلك عند الوصول إلى موقع ويب مصمم بشكل تقليدي من جهاز محمول. لن يتم رؤية الدقة الطبيعية للموبايل ، ولكن سيتم عرض تعديل تم تنفيذه بواسطة أداة التكبير حتى يتم ضبطه على عرض 960 بكسل.
نظرًا لعدم وجود طريقة أخرى للقيام بذلك ، كان المطورون يقومون بإنشاء Html التي نفذت تغيير أو ضبط التكبير / التصغير. هذه هي الطريقة ، عند تنفيذ تعديل الدقة على الأجهزة ، يجب إخبار الفريق باستخدام نوع آخر من القياس. النوع المناسب للاستخدام هو العلامة الوصفية المعروفة باسم منفذ العرض ، والتي يتم إدخالها في رأس موقع الويب. باستخدام علامة التعريف هذه ، يمكنك تفصيل الإجراء الذي سينفذه المتصفح في الويب المحول. انظر النحو التالي ، مكتوبًا حرفيًا:
هذا التنسيق الرمزي للعلامة الوصفية لإطار العرض هو الأكثر استخدامًا في تصميم الويب سريع الاستجابة. ومع ذلك ، هناك العديد من التكوينات الأخرى التي يمكن استخدامها لهذا الغرض. فقط بناء الجملة المقدم يحتوي على متغيرين يجعلان متصفح الهاتف المحمول يتكيف مع الويب وليس العكس. هذه المتغيرات هي:
عرض الجهاز أو عرضه
يتم تضمين العرض المتغير = عرض الجهاز في التكوين بحيث يتطابق عرض الشاشة بالبكسل مع عرض الجهاز المحمول. بهذه الطريقة ، يتم عرض دقة الهاتف الخاصة بالهاتف.
من أجل توفير أفضل استخدام ممكن ، تعرض مستعرضات الجوال الصفحة بشكل مشابه لعرض شاشة سطح المكتب. قد يختلف هذا العرض حسب الجهاز المحمول. لكنها غالبًا ما تكون واحدة من حوالي 980 بكسل. بعد ذلك ، يسعى إلى تحسين مظهر المحتوى عن طريق تكبير حجم الخط ، وكذلك تغيير مقياس المحتوى بحيث يناسب شاشة الجهاز.
قد يتسبب ذلك في أن يجد المستخدمون أنه غير متماسك إلى حد ما أو مربكًا ثم يضطرون إلى النقر نقرًا مزدوجًا للتكبير للتفاعل مع المحتوى. الاستفادة من متغير العلامة الوصفية لإطار العرض: العرض = عرض الجهاز يتطلب إجراءً على التخطيط لضبط العرض. بهذه الطريقة يمكن للصفحة إعادة ضبط المحتوى ليناسب أبعاد الشاشة المختلفة ، سواء كان معروضًا على هاتف خلوي صغير أو على شاشة كمبيوتر شخصي.
مقياس أولي أو مقياس أولي
يتم تضمين المقياس الأولي = المتغير في التكوين لتحديد مقياس ارتباط بين وحدات بكسل CSS ووحدات البكسل المتنقلة اعتمادًا على الجهاز. في التكوين الموضح أعلاه ، يشار إليه للمقياس الأولي: المقياس الأولي = 1.0. هنا يشير بناء الجملة إلى أن النسبة بين البكسل هي 1: 1 ، يتم قراءة بكسل CSS إلى بكسل الجهاز. ثم يتم إعطاء الطلب لمتصفح الهاتف المحمول لاعتماد هذه القيمة للتكبير وسيكون هو الذي يستخدمه الجهاز. ومع ذلك ، فلنلقِ نظرة على الخيارين التاليين:
- عندما يكون متغير المقياس الأولي يساوي 1.0 ، فإنه يشير إلى عرض بدون تكبير ، لأنه واحد لواحد.
- بينما إذا كان المقياس الأولي = 2.0 ، يشير المتغير إلى تكبير مكبّر إلى ضعف حجمه على الصفحة بأكملها.
لذلك ، سيكون الخيار المناسب للاستخدام على موقع ويب مصمم ليلائم عرض الهاتف المحمول هو الخيار الأول. هذا يخبر الجهاز بعدم تطبيق أي تكبير. ولكن أيضًا ، قد تكون هناك حالات يكون فيها الخيار الأفضل هو عدم تضمين هذا المتغير أو تطبيقه. وبهذه الطريقة ، فإن نفس الهاتف المحمول هو الذي يتكيف مع الزوم من تلقاء نفسه ، مع العرض المشار إليه في التصميم.
تكوينات منفذ العرض الأساسية - أمثلة التطبيق:
سواء كان لديك عرض 500 بكسل وتم إعطاء أمر مقياس أولي ، فإن الويب يأخذ مظهر شاشة بعرض 500 بكسل. ومع ذلك ، على الهاتف المحمول ، سيتم عرض التكوين الأصلي الخاص به بنسبة تقريبية مكافئة تبلغ 320 بكسل من إجمالي 500 بكسل على الويب.
ومع ذلك ، من ناحية أخرى ، إذا لم يتم إعطاء ترتيب أولي ، فسيتم عرض الويب بالكامل ، أي 500 بكسل ، تحت تكبير / تصغير. سيكون بناء جملة هاتين التهيئتين النموذجيتين لعلامة منفذ العرض نصيًا كما يلي:
سيكون التكوين السابق لموقع ويب بتصميم سريع الاستجابة يتكيف بشكل صحيح مع دقة الهاتف المحمول. بينما بالنسبة إلى موقع الويب الذي لم يتم تكييفه بالكامل مع دقة الأجهزة المحمولة ، سيكون التكوين على النحو التالي:
بالإضافة إلى التكوينات النموذجية ، هناك بعض التكوينات الأخرى. واحد منهم هو تصميم موقع على شبكة الإنترنت بعرض الهاتف المحمول ، وتطبيق التكبير. لكن هذا النوع من التصميم سيكون غريبًا جدًا ومربكًا للمستخدم.
كيفية إنشاء موقع متجاوب - استعلامات الوسائط
عندما تريد معرفة كيفية إنشاء موقع ويب سريع الاستجابة أو صفحة قابلة للتكيف ، يجب أن تعلم أنه يتعين عليك تطبيق النظام المعروف باسم استعلامات الوسائط. تتيح لك هذه التقنية إنشاء أشكال أو أنماط مختلفة ، عن طريق الشرط ، اعتمادًا على دقة الشاشة. لكن ما هي استعلامات الوسائط؟
استفسارات وسائل الإعلام
استعلامات الوسائط هي تقنية تتكون من إنشاء جمل CSS. التي يمكنك من خلالها إصدار بيانات قابلة للتطبيق على تصميمات الويب ، طالما تم استيفاء شروط معينة تم تحديدها أو إنشائها بالفعل. يمكن تطبيق عبارات الاستعلام عن الوسائط بشكل أساسي في نقطتين على الويب:
- أولاً ، في استدعاء ملف CSS ، مع تحديد شروط كل ملف لتحميله. مثال:
- ثانيًا ، في نفس ملف CSS ، إنشاء مساحة منفصلة حيث يتم تضمين كسور CSS المراد استخدامها. مثال:
شاشةmedia و (min-width: 320px) و (max-width: 480px) {
/ * بيانات الأنماط لهذا النطاق العرضي * /
في الواقع ، تعد الاستعلامات عن الوسائط أداة قوية تسمح بإمكانية ترك تصميم الويب سريع الاستجابة للاضطلاع بمسائل مختلفة أخرى داخل الويب. يستحق التوثيق لاحقًا ، المزيد عن تقنية استعلامات الوسائط.
في غضون ذلك ، يكفي في الوقت الحالي معرفة نقطتين عن نظام الاستعلام عن الوسائط:
- طريقة عمل إعلانات استعلامات الوسائط في ملف CSS
- كيفية التحديث مع تقنية الاستعلامات الميديا على متصفحات الإنترنت القديمة
إعلان استعلام الوسائط
في الفقرات السابقة كان من الممكن ملاحظة طريقتين لتنفيذ الاستفسارات الإعلامية. أولاً في صفحة نمط خارجية والطريقة الثانية للكتابة مباشرة إلى صفحة النمط.
في سياق كيفية عمل تصميم ويب سريع الاستجابة ، يجب أن يكون مفهوماً أن الاستعلام عن الوسائط هو إعلان CSS يُستخدم كمؤشر ليكون على دراية بموعد إعلان نمط آخر بناءً على قياسات أو قيم الهاتف المحمول أو أي جهاز آخر حيث سيتم عرض الويب.
على سبيل المثال ، طريقة إعلان جزء CSS ، الموجود داخل عنصر شرطي محدد بواسطة استعلام وسائط ، لها تكوين بناء الجملة التالي:
شاشةmedia و ([CONDITION]) {
/ * قواعدنا الجديدة بعرض الشاشة هذا أو أقل * /
}
وبالمثل ، بناءً على عرض الشاشة ، يمكن إنشاء ثلاثة أنواع من بيانات الاستعلام عن الوسائط. بهذه الطريقة يمكنك التأكد من طلبك في كل حالة
-يتم تطبيق الإعلان الأول فقط في تلك الدقة التي تقل عن عرض البكسل = X:
شاشةmedia و (أقصى عرض: [WIDTH] بكسل) {
/ * قواعدنا الجديدة بعرض الشاشة هذا أو أقل * /
}
-يتم تطبيق الإعلان الثاني فقط في تلك الدقة التي تكون أكبر من عرض البكسل = X:
شاشةmedia و (أدنى عرض: [WIDTH] بكسل) {
/ * قواعدنا الجديدة مع عرض الشاشة هذا أو أكثر * /
}
-يتم تطبيق الإعلان الثالث في تلك القرارات التي لها عرض بين نطاق من البكسل المحدد بين X و Y:
شاشةmedia و (min-width: [WIDTH X] px) و (max-width: [WIDTH Y] px) {
/ * قواعدنا الجديدة مع عرض الشاشة هذا أو أكثر * /
}
أي من الثلاثة؟
يعتمد القرار على ذوق المطور. ومع ذلك ، فمن الشائع تطبيق أول عبارة استعلام عن الوسائط الموضحة أعلاه. فقط من المستحسن أن يتم تطبيقه بشكل تراكمي. بهذه الطريقة ، في كل مرة يتم فيها تصغير العرض ، يتم تعديل عناصر التصميم.
جعل استعلامات الوسائط متوافقة مع Internet Explorer
كان Internet Explorer من أوائل المتصفحات الموجودة على الويب. لذلك ، من المحتمل جدًا أن هذا المستعرض لا يدعم أو يتوافق مع العديد من الأنظمة أو المعلمات أو التقنيات التي كثيرًا ما يستخدمها مستخدمو الشبكة. ولكن هناك الكثير من الموظفين التقنيين في مجال تطوير الويب ، يشاركون بشكل كامل في البحث عن الابتكارات. التي أنشأت مجموعة من المكتبات لتمكين هذه المتصفحات القديمة وجعلها متوافقة.
لجعل الإصدارات المتوافقة أقل من رقم تسعة (9) من Internet Explorer. إنها مجرد تطبيق مكتبة جافا سكريبت التالية: css3-mediaqueries-js.
من خلال وضع النص التالي في رأس موقع الويب ، ستتمكن من التعامل مع الاستعلامات الإعلامية دون أي إزعاج.
قد لا تكون النتيجة التي تم الحصول عليها هي الأفضل ، لكنها تسمح عمومًا بدرجة جيدة من التوافق.
كيفية إنشاء موقع متجاوب - التصميمات الأساسية
قد تكون هناك طرق مختلفة لتكييف موقع ويب وتحويله ، إلا أن موقع الويب سريع الاستجابة له حاليًا ثلاث قواعد أو أشكال من مفهوم التصميم. في السابق ، تم عرض معاينات المطورين مع بعض التفاصيل الجديدة لتطبيقها في هذه التصميمات. يأتي من عادة تطوير مواقع الويب التي تتميز بأنها جامدة أو ثابتة. للانتقال إلى مواقع الويب المصممة بشكل سريع الاستجابة ، وتغيير خاصية الصلابة.
اليوم يمكنك العثور على عدد لا نهائي من الأجهزة الإلكترونية التي يمكنك من خلالها تصفح الويب. ومع مرور الوقت سيكون المبلغ أكبر. يطلب مطورو مواقع الويب أن تكون هذه المواقع قادرة على التكيف بشكل صحيح مع هذه المجموعة الواسعة من الأجهزة.
التصاميم الأساسية لتبسيط العمل
تتمثل إحدى طرق تبسيط مهمة التصميم سريع الاستجابة في تقسيمها أو تصنيفها إلى ثلاث مجموعات أساسية من أجل معرفة كيفية معالجتها. هذه المجموعات الثلاث المؤهلة الكبيرة هي:
- الشاشات الكبيرة: حيث يوجد بالموقع مساحة كافية وأكثر حتى يمكن مشاهدته بالكامل دون أي إزعاج.
- الشاشات القديمة أو الصغيرة: حيث لا تجد الويب العرض المناسب لتصورها الكامل ، أي أنها لا تتناسب مع إطار الشاشة. حتى أنه يظهر شريطًا سفليًا غير مريح ، دون أي استخدام يسمح لك بدلاً من ذلك بمشاهدة محتوى أقل.
- شاشات الأجهزة المحمولة: يجد الويب مساحة صغيرة على هذه الأجهزة بحيث لا يمكن قراءة المعلومات الخاصة بمحتواها إلا بالتصميم العام.
لذلك إذا كنت ترغب في تحويل التصميم والتخطيط الأصليين لموقع ويب إلى موقع محدث يمكن استخدامه وقابل للتطبيق. المطلوب هو حل هذه المجموعات الأساسية الثلاث. تعتمد درجة صعوبة الحصول على الحل بشكل عام على كيفية صياغة النموذج. ولكن ، بشكل عام ، مع تكنولوجيا اليوم ، يمكن إجراء بعض التغييرات على الويب.
كيف تصنع ويب مستجيب للشاشات الكبيرة - الحل
في هذه النقطة الأساسية لا يمثل عادة أي صعوبة كبيرة. لأن الويب قد تم تصميمه ليتم عرضه بتنسيقات الشاشة الكبيرة هذه. المعيار الحالي هو أن مواقع الويب تعتمد على إطار مركزي لعرض الشاشة بالبكسل 960. وبهذه الطريقة عندما يتم تحميلها على الهواتف المحمولة مع التكبير / التصغير المعدّل ، فإنها تناسب معظمها بشكل صحيح. ولكن في حالة مواقع الويب القديمة ، من المحتمل أن يكون هذا الإطار المركزي بعرض البكسل مصممًا للشاشات التي يبلغ عرضها 1024 بكسل. في أي من الحالات ، بالنسبة لهذه المجموعة الأساسية ، من المعقول استخدام الحاويات كما هو موضح بالصيغة التالية:
# main {width: 960px؛ الهامش: 0 تلقائي ؛ }
يدعم هذا التكوين تعيين حاوية "رئيسية" تتيح لها أن تكون مرتكزة على الويب. إلى جانب هذه الحاوية ، يمكن إضافة خلفيات مختلفة لإثراء المظهر الخارجي للويب. تطوير تصميمه قليلاً لتجنب الصفحة السوداء والبيضاء قدر الإمكان.
باختصار ، في هذا المستوى من الشاشات الكبيرة ، لم يتم عمل الكثير لتغيير الويب. على الرغم من أنه من الممكن أن يكون هناك مستخدمون على الويب يرغبون في مشاهدته من التلفزيون بشاشة كبيرة وأيضًا على مسافة مشاهدة قصيرة.
تتطلب هذه الحالات إجراء تغييرات كبيرة كما هو الحال في المجموعة الأساسية للجوّال. ولكن نظرًا لعدم وجود الكثير ممن يستخدمون التلفزيون للتنقل ، لا يستثمر المطورون عادةً الكثير من الوقت في هذه التعديلات. إذا كنت لا تزال ترغب في العمل على هذا النوع من التكيف ، فمن المستحسن وضع لوائح مشابهة لتلك المطبقة في المجموعة المتنقلة ، والمشار إليها أدناه.
كيف تصنع ويب مستجيب للشاشات الصغيرة - الحل
من مجموعة التصميم الأساسية هذه ، يبدأ تعقيد تحول الويب المراد تكييفه. السيناريو على النحو التالي: صفحة تم إنشاؤها للعمل على عرض شاشة معين. في الواقع ، يزوره عدد من الأشخاص من أجهزة كمبيوتر تم تعديلها وفقًا لهذا العرض. ولكن هناك أيضًا نسبة كبيرة من الأشخاص الذين يجب التفكير فيهم ، والذين لديهم أجهزة ذات دقة أقل من تلك الخاصة بالتصميم لزيارة الويب.
في مجموعة التصنيف هذه ، يجب فصل الأجهزة ذات دقة الشاشة الأقل من التصميم عن الأجهزة المحمولة. حسنًا ، يتم تحليل هذه الحالات في حالة التصميم الثالثة. لذلك ، من الضروري البدء من تعريف واضح للنقطة التي ينتهي عندها جهاز الشاشة الصغيرة والنقطة التي يبدأ منها الجهاز المحمول.
بالنسبة للشاشات الصغيرة بنفس الطريقة ، يجب تقليل دقة موقع الويب الأصلي لتكييفه مع تلك الأجهزة. فقط يجب أن يكون واضحًا إلى أي مدى سيتم تنفيذ هذا الانخفاض ، دون تجاوز. بحيث لا يتم تجميع عدد كبير من العناصر على شاشات صغيرة ، مما يقلل من ظهور الويب.
المعلومات المطلوبة لوضع الحدود
يتم مشاركة المعلومات من الأجهزة المحمولة أدناه. الأمر الذي سيكون ذا أهمية كبيرة عندما يتعلق الأمر بوضع حدود الوقت الذي تتوقف فيه الشاشة عن كونها شاشة صغيرة ، لتصبح جهازًا محمولاً. هذا سيجعل القرار أسهل.
بيانات الجوال:
- تستخدم الأجهزة المحمولة عموديًا ، وهو الشكل الأكثر استخدامًا. عادة ما تتبنى دقة عرض 320 بكسل.
- في الوضع الأفقي ، يتم ضبط دقة الهاتف المحمول على الحجم الحقيقي لشاشة الجهاز. يتراوح عرض هذه الدقة بشكل عام بين 400 و 600 بكسل.
- من ناحية أخرى ، في الأجهزة اللوحية ، ستعتمد الدقة على الجهاز. بشكل عام ، مع الأخذ في الاعتبار إحصائيات النماذج الأكثر مبيعًا ، يبلغ عرض الدقة حوالي 600 بكسل. القدرة على الوصول إلى عرض 1024 بكسل.
حدود عرض الشاشة
أكبر حد عرض قياسي يتم اعتماده في تصميم الويب سريع الاستجابة في هذا التصنيف ، وفقًا للمعلومات السابقة ، يصل إلى عرض 400 بكسل. من قياس العرض هذا ، يجب أن يبدأ التغيير في تصور الويب بشكل كبير ، بالإضافة إلى أن تشغيله الأساسي سيشهد تغييرات معينة.
ومع ذلك ، قام بعض المطورين بتعيين هذا الحد لعرض 600 بكسل. إنشاء من هذا القرار ، تكيفات وسيطة بين الشاشات الصغيرة والأجهزة المحمولة.
على جانب الحد الأدنى ، تم ضبطه على اعتماد حد أدنى لعرض الشاشة يصل إلى 320 بكسل. في أي حال ، الأمر متروك لمطور الويب لإنشاء نطاق أكبر من هذه الحدود المعطاة. لكن لا يُنصح بمحاولة تغطية جميع أجهزة الشاشة الصغيرة.
أنماط التنقل الرئيسية في حل الشاشة الصغيرة
قد يكون التقاط أنماط التنقل الرئيسية الثلاثة هذه كافياً في حل تكيفي للشاشة الصغيرة. والتي تم سردها أدناه:
- الأجهزة المحمولة المستخدمة عموديا: في هذه الحالة ، تسمح شاشة الجهاز فقط بالقراءة والتنقل المبسّطين للغاية ، والتي تم إنشاؤها في نطاق دقة يتراوح بين 320 و 400 بكسل.
- الأجهزة المحمولة المستخدمة أفقيا والأجهزة اللوحية: في هذه الحالة ، يمكن تحقيق عرض أفقي تقليدي بالفعل. ومع ذلك ، من الضروري ملاحظة أن التنقل يتم إنشاؤه عن طريق اللمس وليس بالنقر. وفقًا لهذه الإجراءات ، يجب تجنب: onMouseOver في 400 أو 600 أو 800 بكسل.
- أجهزة الطاولة: في هذه الحالات ، يعمل تصميم الويب العادي دون أي مشكلة مع عرض الشاشة الذي يزيد عن 800 بكسل.
بعد قول كل ما سبق ، من المفهوم أن الشاشة الصغيرة تعني مجموعة متنوعة من أجهزة الكمبيوتر الشخصية والأجهزة المحمولة ذات المناظر الطبيعية والأجهزة اللوحية. يغطي هذا التنوع هذه المجموعة بتعقيد ناعم لتكييف الويب مع تصميم سريع الاستجابة. في هذه الحالة ، من الأهمية بمكان تبسيط العمل وأعمال التخطيط التي تقوم بها الكتل. من أجل توحيد الأنواع الثلاثة من الأجهزة في عملية واحدة.
إذا تم تحديده بوضوح من أي عرض يتم اعتبار شاشة الهاتف المحمول. يتم توضيح تنسيق الشاشة الوسيطة المراد عرضها. من أجل تحويل كتل التخطيط الحالي بحيث يتغير حجمها وفقًا للشاشة ويمكن أن تعمل أيضًا بشكل صحيح.
حاويات العرض العالمي
تفي الحاويات العالمية داخل موقع الويب بوظيفة الإشارة أو الإشارة إلى العروض العالمية. وهذا يعني أنه باستخدام هذه العناصر ، يمكنك توسيط وتحديد عرض محدد لموقع الويب. إنها تمنح التكوين بعض المرونة عن طريق التغيير من عرض ثابت إلى عرض أقصى أو عرض سقف. يجري تأسيسه في الإعلان الأولي لإطار عمل الويب ، يتغير من عرض a ماكس العرض. بنفس الطريقة ، يتم تحديد الحد الأدنى للعرض وفقًا للنطاقات المحددة مسبقًا ، مع إعلان الحد الأدنى للعرض. وبالتالي ، سيكون من الممكن التحكم في عرض تلك الأجهزة التي كان يعتقد أنها ليست ضمن نطاق التحكم. أخذ نطاق حدود عرض الشاشة المذكورة أعلاه ؛ سيكون بناء الجملة للإعلان على النحو التالي:
# رئيسي {max-width: 960px؛ العرض الأدنى: 320 بكسل ؛ الهامش: 0 auto؛}
بالنسبة للشاشات الكبيرة ، الحل هو نفسه. ومع ذلك ، عندما يتناقص حجم الويب تدريجيًا في وقت واحد ، فإن الإطار المركزي سيفعل ذلك في العرض.
مثال عملي
يوجد أدناه مثال عملي على إعدادات تحويل إطار العرض. في هذا المثال ، يوجد موقع ويب بعرض 1080 بكسل ، يتم تطبيقه على عناصر الرأس والمحتوى الرئيسي والتذييل. أول شيء يجب فعله هو الإشارة إلى هذا العرض في كتل الحاوية العامة المختلفة ، ليس كعرض ثابت ، ولكن كعرض أقصى للصفحة. بالنسبة للجمل ، فإنها ستعتمد على عدد الكتل من هذا النوع التي سيتم استخدامها. لذلك دعونا نلقي نظرة على بناء الجملة التالي:
#header #top {الموقف: النسبي؛ أقصى عرض: 1074 بكسل ؛ العرض الأدنى: 320 بكسل ؛ الارتفاع: 115 بكسل ؛ الهامش: 0 تلقائي ؛ [...]}
[...]
#header ul.menu {الموقف: النسبي؛ أقصى عرض: 1008 بكسل ؛ العرض الأدنى: 320 بكسل ؛ الارتفاع: 95 بكسل ؛ [...]}
[...]
# aux-main {الموقف: النسبي؛ أقصى عرض: 1008 بكسل ؛ العرض الأدنى: 320 بكسل ؛ الهامش: 0 تلقائي ؛ [...]}
[...]
#footer ul {max-width: 768px؛ العرض الأدنى: 320 بكسل ؛ margin: 10px auto؛}
حاويات داخلية
من هذه النقطة ، سوف نتعمق أكثر في كيفية إنشاء موقع ويب سريع الاستجابة عن طريق تحويله. يكاد يكون من المؤكد أن الصفحة المراد تحويلها تتكون من تصميم أو تخطيط ، مقسم إلى عناصر مختلفة ، على سبيل المثال ، يمكن أن تكون:
- عرض مائة بالمائة رأس
- محتوى يحتل جزءًا كبيرًا من العرض
- في جزء من الجانب ، شريط جانبي واحد أو أكثر أو قضبان جانبية
- تحتل مائة بالمائة من العرض ، تذييل
لذلك سيكون لديك العديد من الحاويات التي ربما يكون لها عرض ثابت تحدد الأعمدة في الصفحة. ربما تم تحويل هذه الحاويات إلى أعمدة من خلال تطبيق تقنيات مختلفة ، مثل:
- يطفو في أكبر كمية
- العرض: مضمنة في بعض الحالات
- العرض: مربع في الآخرين منهم
ستكون الخطوة التالية التي يجب اتخاذها هي القدرة على تحويل هذه العناصر إلى بيانات غير دقيقة. بحيث لا تقوم الحاوية الرئيسية بمعايرة البيان الأصلي المشار إليه بالضبط. أو ما هو نفسه ، يجب عليك التغيير من البكسل إلى قيم النسبة المئوية في كل تلك العناصر التي تشير إلى مسافة في عرض الموقع ، مثل ما يلي:
- الاعراض
- عروض ماكس
- الهوامش و
- الحشوات
مع عمل التخطيط الذي تم إجراؤه مسبقًا ، تصبح هذه الخطوة بسيطة حقًا. نظرًا لأنه يتم إجراء قسمة فقط ، لتتمكن من تحديد ما يتوافق مع القياس بالبكسل لعنصر الحاوية في قيم النسبة المئوية. لذلك سيتم حساب النسبة المئوية بتطبيق المعادلة الرياضية التالية:
[Px من عرض العنصر الداخلي] / [Px لعرض العنصر الأصل] * 100
إنها طريقة جيدة لمطوري الويب للتعود على العمل على نموذج الويب مع القياسات بالنسب المئوية ، لأن هذه الخطوة قد تم حلها بالفعل.
حساب النسب
الخطوة التالية التي يجب القيام بها هي حساب النسب المئوية. في هذا الجزء يمكن تقديم شيء مزعج من حيث الأعمدة. نظرًا لأن العمود السابق تم إنشاؤه باستخدام عناصر عائمة ، وعندما تقوم بتقليص الإطار ، يتحرك الشريط الجانبي أسفل المحتوى. ومع ذلك ، يتم تطبيق المعادلة المذكورة أعلاه. وبهذه الطريقة يتم إجراء حسابات النسبة المئوية لكل عنصر داخل الحاوية العالمية DIV. والذي كما ذكر أعلاه كان بعرض 1080 بكسل. بتحويل هذه القياسات إلى قيم نسبية ، يتم الحصول على الصيغة التالية:
#main #content {float: left؛ العرض: 63.9880952٪ ؛ الهامش: 30 بكسل 0 0 1.98412698٪ ؛ }
[...]
#main #sidebar {float: left؛ الهامش: 20 بكسل 0 0 3.47222222٪ ؛ العرض: 28.7698413٪ ؛ }
كما يمكن رؤيته ، فقد تم تحويل كل من الهوامش الأفقية والعرض. بهذه الطريقة سيحتفظ موقع الويب بمظهر مربع. نقطة أخرى مهمة يجب ملاحظتها هي عدد الكسور العشرية المشار إليها في النسب المئوية. الغرض منه هو أن يكون الحساب دقيقًا قدر الإمكان للقيمة الأصلية بالبكسل.
حل للعناصر الداخلية السائبة التي يزيد حجمها
في عملية تحويل صفحة الويب ، من الممكن العثور على بعض العناصر السائبة في النموذج والتي ، نظرًا لتصنيفها ، يمكن أن تنمو فوق الحد الأقصى للحاويات العالمية ، max-width. يمكن الكشف عن هذه العناصر من خلال اللعب بحجم المتصفح ، حيث يتم اكتشافها وتصحيحها. هناك طريقة سريعة أخرى لتصحيح هذه العناصر أو تجنبها وهي تحديد الحاويات وإعطاء الترتيب الذي لا يزيد فيه أي عنصر داخلي عن حجم الحاوية نفسها.
في المثال الذي يتم تطويره ، يتم تطبيق هذا الشكل الأخير من التصحيح ، داخل المحتوى الرئيسي والشريط الجانبي. وبالتالي ، يمكن حل بعض المشكلات التي قد تنشأ عن الأدوات من تلقاء نفسها. وفقًا لذلك ، سيكون التكوين لحل العناصر الداخلية السائبة كما يلي:
#main #content {float: left؛ العرض: 63.9880952٪ ؛ الهامش: 30 بكسل 0 0 1.98412698٪ ؛ }
#main #content * {max-width: 100٪}
[...]
#main #sidebar {float: left؛ الهامش: 20 بكسل 0 0 3.47222222٪ ؛ العرض: 28.7698413٪ ؛ }
#main #sidebar * {max-width: 100٪}
العناصر الموضوعة في المطلق
لجميع تلك العناصر التي يتم وضعها على الإطلاق في صفحة الويب للتحويل. يجب تطبيق نفس العملية السابقة عليها مع العروض ، وتكييفها مع القيم بالنسب المئوية على محور الإحداثي لتغير عرضها. بافتراض أنه في المثال الذي يتم تطويره ، توجد بعض العناصر الموضوعة على الإطلاق في الرأس. يجب تكييف مواضعهم مع هذه العناصر ، بحيث لا تظل طافية في الهواء عند تقليل أبعاد الويب. لهذا ، سيكون التكوين على النحو التالي:
[...]
#header #top p.breadcrumb {الموقف: مطلق؛ أعلى: 90 بكسل ؛ يسار: 3.72439479٪؛ اللون: أبيض ؛}
[...]
#header #top p.like {الموقف: مطلق؛ أعلى: 10 بكسل ؛ اليسار: 54.0037244٪؛ }
[...]
#header #top div.vcard {الموقف: مطلق؛ أعلى: 11 بكسل ؛ يمين: 5.49348231٪ ؛ العرض: 27.9329609٪ ؛}
تطبيق استعلامات الوسائط في العناصر الداخلية
عند تعديل عرض الصفحة ، من الممكن أن تكون هناك عناصر ، بسبب محتواها ، لا تجد مساحة في إعادة التصميم. هذه يمكن أن تعيق الطريق ، من خلال جعل التعديلات تبدو سيئة. من أجل تجنب هذا الموقف المحرج ، يتم استخدام استعلامات وسائط بسيطة تسمح بتعديل جذري لـ CSS ، عند حدوث بعض الأبعاد المحددة.
تعد الاستعلامات عن الوسائط أداة قوية جدًا يمكن من خلالها إنشاء العديد من الأعمال الفنية. هذه المرة سيتم تطبيقها لتحديد شروط معينة فيما يتعلق بعرض الشاشة ، ومن أين ستتغير CSS. لهذا سوف نذكر الصيغة التالية:
شاشةmedia و (أقصى عرض: [WIDTH] بكسل) {
/ * قواعدنا الجديدة بعرض الشاشة هذا أو أقل * /
}
يسعى بيان الاستعلام عن الوسائط هذا على وجه التحديد إلى تكييف التخطيط مع قرارات مختلفة. لذلك يمكن استخدامه أكثر من أي شيء آخر لإخفاء بعض العناصر الثانوية ، والتي ، في ظل عرض معين للشاشة ، يمكن أن تزعج المستخدم أكثر من مساعدة المستخدم. بالإضافة إلى أنها تعمل على صنع وصلات صغيرة ، بحيث يمكن لبعض العناصر أن تتناسب مع إعادة التصميم في سيناريوهات مختلفة.
لتوضيح ما قيل ، سيتم إخفاء بعض عناصر الدقة التي تقل عن 800 و 600 بكسل. أنها في حالة واحدة تعيق العرض الصحيح لمحتوى الصفحة الرئيسية للموقع المراد تكييفه. وفقًا للصيغة التالية:
شاشةmedia و (الحد الأقصى للعرض: 800 بكسل) {
#header #top p مثل ،
#header #top p.breadcrumb ،
#header #top div.vcard p.twitter ،
#header #top div.vcard p.linkedin ،
#header #top div.vcard p.delicious،
#header #top div.vcard p.google ،
.vcard h2 {display: none؛}
}
شاشةmedia و (الحد الأقصى للعرض: 600 بكسل) {
#sidebar .twitter {display: none؛}
}
كما يتضح ، يتم إخفاؤها بدقة أقل من 800 بكسل:
-الحب
- مسار التنقل
-الأزرار الاجتماعية ، من بين أمور أخرى
بدءًا من 600 بكسل أسفل ، تتم إزالة آخر التغريدات من الشريط الجانبي
تتيح لك استعلامات الوسائط أيضًا تعديل بعض الأنماط
كما ترى ، تسمح لك استعلامات الوسائط بإخفاء بعض العناصر الداخلية. لكنها تسمح لك أيضًا بإجراء تغييرات على بعض الأنماط. يمكن استخدام هذه الخصوصية إذا كان العنصر ، بالإضافة إلى عدم تكييفه من حيث العرض ، غير مرغوب فيه أو لا يريد أن يختفي أو يختبئ. إذا ظهر هذا الموقف على الويب ، فأنت تريد تغييره. وبعد ذلك ، من خلال استخدام الاستعلامات الإعلامية ، سيتم السعي إلى تغيير أسلوبه بمهارة حتى يتكيف.
بافتراض أنه على الويب الذي يتم العمل عليه ، فإن الأزرار الاجتماعية تسبب هذا النوع من المشاكل. وتقرر تغيير تنسيقها بمهارة ، عن طريق إزالة الرموز وتقليل حجم الخط ، عندما تنخفض الصفحة إلى أقل من 960 بكسل في العرض. سيكون التكوين بعد ذلك كما يلي:
شاشةmedia و (أقصى عرض: 960 بكسل) {
#header #top div.vcard p {font-size: 9px؛}
#header #top div.vcard p.twitter a ،
#header #top div.vcard p.linkedin a ،
#header #top div.vcard p.delicious a ،
#header #top div.vcard p.google a {background: none؛ الحشو: 0 ؛ العرض: 50٪ ؛ تعويم: اليسار؛}
}
ماذا تفعل مع القوائم
ماذا عن القوائم ، في إطار عملية إنشاء موقع ويب سريع الاستجابة على الشاشات الصغيرة؟ الجواب على هذا السؤال هو أنه مشكلة معقدة إلى حد ما يجب حلها. نظرًا لأنها مجموعة من العناصر التي عادة ما تكون طويلة إلى حد ما ، وكذلك القائمة نفسها ، فهي ليست المحتوى الرئيسي للويب. لذلك ، لا يمكن السماح بأن تشغل القائمة مساحة كبيرة عند فتح الصفحة على شاشات صغيرة.
في الأجهزة التي تعمل باللمس ، قد يكون من المزعج للمستخدم أن تظهر قائمة من الروابط الصغيرة ، لذا فإن تقليص الروابط لن يكون الحل الأكثر قابلية للتطبيق. البديل الذي يمكن أن يكون مواتياً هو استبدال القائمة بعنصر محدد. والذي يمثل عنصر تحكم يعرض قائمة من الخيارات ، حيث يمكن للمستخدم الاختيار بشكل مريح. يقلل عنصر التحديد من قوائم القوائم الطويلة إلى كتلة صغيرة ، لذا فإن استخدامه مثالي للأجهزة مثل الأجهزة اللوحية والهواتف المحمولة.
عند القيام بهذا الاستبدال في التصميم الجديد سريع الاستجابة ، يوصى باستخدام المكون الإضافي tinynav jquery. وهو بسيط ومتوافق للغاية ، يشير هذا المكون الإضافي إلى جميع عناصر UL في القائمة. وهذا بدوره يضيف عنصرًا محددًا إلى بداية القائمة بالخصائص المشار إليها. وبالتالي ، فإن الخطوة المتبقية هي إخفاء UL أو التحديد باستخدام استعلامات الوسائط ، حتى يتم الوصول إلى حل مناسب.
الإجراء مع عنصر التحديد
سيتم إجراء استبدال القائمة بعنصر محدد من خلال المكون الإضافي المذكور أعلاه. والتي يجب وضعها في رأس قائمة الروابط. لذلك ، عندما تبدأ الصفحة في النزول إلى دقة عرض أقل من 800 بكسل ، سيتم استبدال الروابط بالاختيار. ثم يتم اتباع الخطوات التالية:
- أضف البرنامج النصي وفي البرنامج المساعد jquery جاهزًا ، اضبط المكالمة على العنصر الجديد. بناءا على الاتى:
$ («. menu ul»). tinyNav ()؛
يضيف هذا التكوين التحديد في كل قائمة روابط في القائمة العلوية
- أخبر CSS الأساسي بإخفاء عناصر التحديد الجديدة ، مع الإعلان التالي:
.tinynav {display: none}
- استفد من استعلام وسائط مناسب وأضف بداخله تنسيق التحديد والترتيب لإخفاء القائمة نفسها. ترك التكوين على النحو التالي:
شاشةmedia و (الحد الأقصى للعرض: 800 بكسل) {
#header ul.menu li ul {display: none}
.tinynav {display: block؛ الموقف: مطلق. أسفل: 5 بكسل ؛ العرض: 79٪؛ الهامش الأيسر: 15٪}
}
بهذه الطريقة ، سيتم استبدال قائمة الويب بعنصر محدد ، عن طريق خفض دقة الشاشة إلى أقل من 800 بكسل عرضًا.
حظر الخلفيات في كيفية إنشاء ويب مستجيب
في هذه المرحلة من تكييف الويب ، ستعتمد درجة الصعوبة على كيفية عمل النموذج. عند تصميم الويب ، عند نقطة CSS ، عادةً ما يتم تزيين الكتل بخلفيات صور. يتم استخدام عدد كبير من التقنيات في عملية الزخرفة. بعضها أسهل من البعض الآخر عندما يتعلق الأمر بتغيير الحجم.
بعض الحلول
هذا هو السبب ، اعتمادًا على التقنية المستخدمة ، قد يكون الإجراء أقل أو أكثر بساطة. قد يكون الأمر كذلك أن الخلفية الموجودة على الويب تفقد هدفها عندما تكون الحواف مخفية. مما يؤدي في هذه الحالات إلى مشكلة كبيرة يجب التغلب عليها. فيما يلي بعض الحلول لهذا:
- قم بتعديل أكبر عدد ممكن من الخلفيات لأنماط CSS3. والتي سوف تتكيف بشكل جيد للغاية مع التغييرات. أصبح من السهل الآن جعل معظم المتصفحات متوافقة ، عند استخدام حواف مستديرة أو ظلال أو تدرجات. مع حالات CSS الثلاثة ، يصعب على التصميمات أن تتطلب عددًا كبيرًا من الصور لإنشاء الكتل.
- يمكنك الاستغناء عن صور الخلفية ، لاستبدالها قدر الإمكان بأقرب CSS3 لكيفية قيام استعلامات الوسائط والعروض التكيفية بعملها
- إذا كانت هذه هي حالة الصناديق التي تهيمن بالفعل على حالة الكتلة. يوصى بتكرار هذا النمط في الكتلة والبحث عن الخلفية الأصلية لتكون مميزة قليلاً
الحلول الأخرى لثلاثة أنواع من صور الخلفية التي يمكن أن تكون مزعجة هي:
- الصور ذات الحدود في إطار الصفحة ، والتي حتى لو بقيت خارج الجزء المعروض ، فإن النتيجة النهائية لا تزعجك ، لذلك فهي متروكة
- أيقونات في عناوين معينة ، يتم إصلاحها بإخفائها باستعلامات الوسائط عندما تبدأ في الإزعاج
- تتضمن الخلفية العامة للرأس المربع الأبيض حيث ينتقل اسم مؤلف الويب. لهذا ، يمكن تكرار نفس النمط في مربع المؤلف بحيث يتم إخفاء إحدى الخلفيات مع الأخرى عن طريق تقليل أبعاد الصفحة.
كيف تصنع ويب مستجيب لشاشة الجوال - الحل
تمت بالفعل مشاهدة العديد من جوانب كيفية إنشاء موقع ويب سريع الاستجابة على الشاشات الصغيرة سابقًا. مع هذه المعرفة ، يمكنك الانتقال من تصميم ويب صلب بعرض ثابت 1080 بكسل إلى تصميم قابل للتكيف تمامًا مع الشاشات الصغيرة ، من عدد كبير من الأجهزة. لكن حل التصميم سريع الاستجابة لشاشات المحمول مفقود.
مع تطبيق ما تم رؤيته للشاشات الصغيرة في تصميم الهاتف ، فإن التغييرات تجعله يبدو مقبولاً. يلزم إتقان المزيد ، نظرًا لأن التخطيط المكون من عمودين مع العناصر المتراكمة في الرأس غير عملي للغاية بالنسبة للهواتف المحمولة
لذلك ، من المناسب بدء العملية لتحقيق العرض الصحيح على الأجهزة المحمولة. من المهم ملاحظة أن استخدام التنقل على الهاتف المحمول يختلف عن أي موقع ويب عادي. قد ترغب بعد ذلك في الذهاب إلى أبعد من التغييرات البسيطة في قابلية عرض الشاشة أو إخفاء العنصر.
علامة منفذ العرض في هذه الحالة
يعد عنصر منفذ العرض أداة جيدة لتكييف الويب مع الهواتف المحمولة. أولاً ، لأن منفذ العرض يشير إلى الهاتف المحمول بالطريقة التي تريد أن يعمل بها التكبير / التصغير ، عندما يعرض الجهاز موقع الويب. ومع ذلك ، يمكن تقديم خيارين أساسيين ، كما هو موضح أدناه:
الخيار 1: بالنسبة إلى مواقع الويب ذات التصميم سريع الاستجابة المقترن بشكل مناسب بدرجات دقة الأجهزة المحمولة ، يتوفر ما يلي:
هذا الخيار هو الأكثر مثالية ، ولكنه أيضًا الأكثر شاقة. لأنه عندما تقوم بتقليل عرض العمود إلى أقل من 500 أو 400 بكسل ، تصبح العروض غير قابلة للإدارة تمامًا. لذلك ، يجب إجراء تغييرات جذرية في تصور الويب.
الخيار 2: إذا كان الأمر كذلك بالنسبة لمواقع الويب التي لم يتم تكييفها بشكل كامل مع دقة الهاتف المحمول ، فلدينا ما يلي:
قد يكون هذا الخيار الآخر أكثر سرعة. لأنه يُشار فقط في التصميم إلى أنه يمكن عرض الهاتف بالدقة المطلوبة. بمعنى آخر ، سيستمر الويب في كونه الصفحة العادية ، فقط في إصدار أكثر تصغيرًا أو تكيفًا.
العواقب المحتملة
إذا اخترت الخيار الثاني ، فقد تظهر مشكلتان مع موقع الويب ليتم تكييفه أو تصميمه بشكل سريع الاستجابة.
-الأول: سيعمل منفذ العرض في هذه الحالة عالميًا في جميع متصفحات الجوال. بالنظر إلى الحالة ، على سبيل المثال ، التي تشير إلى علامة منفذ عرض يبلغ عرضها 500 بكسل ، سينتج عن أجهزة iPad التي يبلغ عرضها حوالي 800 بكسل عرض صفحة 500 بكسل فقط. عدم الاستفادة من مائة بالمائة من المساحة المتوفرة.
-ثان: الاستمرار في حالة الإشارة إلى إطار عرض بعرض 500 بكسل. في هذه الحالة ، دقة عرض 320 بكسل ، سيتم عرض محتوى الويب الذي يتم العمل عليه في وضع منخفض للغاية. لذلك ، إذا لم يتم إجراء بعض التعديلات ، فلن تعمل. من ناحية أخرى ، إذا تم إجراء تعديلات معينة لتكييف القوائم أو المصادر ، فسيتم تعديل إصدار الويب بنفس الطريقة ليتم عرضها على جهاز لوحي ، في حالة الشاشة الصغيرة. في الختام ، قد يكون حل الإشارة إلى عرض ثابت باستخدام علامة منفذ العرض هو الحل الأسرع ، ولكنه لم يعد فعالاً.
رؤية عواقب اختيار الخيار 2 من علامة منفذ العرض ، يجعل الخيار 1 هو الخيار الأفضل. بهذه الطريقة ، يُسمح للهاتف المحمول نفسه بإظهار الدقة التي يمكنه القيام بها ، عند استخدام منفذ العرض المشار إليه أعلاه كخيار 1 في رأس الصفحة.
مع قرار التصور هذا ، يجب العمل لاحقًا على استعلام الوسائط لإصدار الهاتف المحمول. يتطلب هذا الانتقال من أعمدة إلى كتل بعرض مائة بالمائة. قم أيضًا بحذف عناصر معينة وضغطها وضبط الخطوط بحيث تكون سهلة القراءة بعرض 320 بكسل.
إزالة الأعمدة
كما هو مذكور أعلاه ، من أجل التكيف المستجيب للأجهزة المحمولة ، من الضروري إتقان التصميم في مظهر العمودين لتجنب تكتل العناصر في الرأس. بالنسبة لهذه العملية ، سيتم حذف عمود من خلال وضع أحدهما متراكبًا على الآخر ، ولكن هناك سيناريوهان يمكن أن يحدثا:
-أن الأعمدة مرتبة بالفعل في Html: في هذه الحالة ، يتم تقديمها بالطريقة المرغوبة للجوال. سيكون من الضروري فقط جعل Floats تختفي أو تعديل العرض: inline-block أو display: box ، لاستبدالها بعرض عادي: block. بتطبيق الصيغة التالية:
شاشةmedia و (الحد الأقصى للعرض: 400 بكسل) {
#content {display: block؛ تعويم: لا شيء ؛ }
}
-إذا لم يتم ترتيب الأعمدة: في هذا السيناريو ، يجب أن تعمل بمواضع مطلقة بحيث تحتل الكتل السفلية الجزء العلوي من الصفحة. وكذلك استخدام الهوامش لتحريك الكتل العلوية إلى الأسفل حتى لا تتداخل. مثال ، بافتراض التوزيع التالي:
</div>
في هذه الهيكلة ، من المرغوب فيه أن تكون عناصر الشريط الجانبي على الهاتف المحمول موجودة قبل المحتوى. ثم يتم تقديم CSS على النحو التالي:
شاشةmedia و (الحد الأقصى للعرض: 400 بكسل) {
#main {الموقف: النسبي؛ العرض: 100٪؛ }
#content {margin-top: 80px؛ العرض: 100٪؛ تعويم: لا شيء ؛}
# شريط جانبي {الارتفاع: 80 بكسل ؛ الموقف: مطلق. أعلى: 0؛ العرض: 100٪؛ تعويم: لا شيء ؛ }
}
لتصور السيناريو الثاني ، حيث يجب استخدام المواضع المطلقة في الإصدار المحمول ، يتم تقديم مثال الهيكل التالي
شاشةmedia و (الحد الأقصى للعرض: 450 بكسل) {
#main #sidebar {display: block؛ تعويم: لا شيء! مهم ؛ العرض: 100٪؛ الموقف: مطلق. أعلى: -80 بكسل ؛ الهامش: 0! مهم؛ الحد السفلي: 1px صلب #aaa ؛ المساحة المتروكة: 0 0 20 بكسل 0 ؛}
#main #content {float: none؛ العرض: تلقائي ؛ الهامش: 100 بكسل 0 0 0 ؛ }
}
في هذه الحالة ، هناك أيضًا تغيير بعرض 450 بكسل في إصدار الهاتف المحمول.
ضبط الخطوط
هناك جانب آخر يجب معالجته في التكيف سريع الاستجابة في إصدار الهاتف المحمول وهو تعديل الخطوط. لأنه عندما تم تصميم الويب ، تم إنشاؤه مع وضع الشاشات الكبيرة في الاعتبار. عند الانتقال إلى إصدارات الأجهزة المحمولة التي تحتوي على شاشات عمودية صغيرة ، غالبًا ما تكون مواقع الويب غير مريحة للقراءة أو العرض. تشغل عناوين الويب مساحة كبيرة ، ونص المحتوى ، نظرًا لحجم الخط ، يجعل من الصعب قراءته. وفقًا لذلك ، من الضروري مراجعة جميع المصادر ، وإحضارها إلى تكوين قابل للتطبيق للعرض على شاشة الهاتف المحمول.
فيما يلي تعديلات تتعلق بهذا الجانب ، حيث تم تعديل خطوط القائمة ، وتم تقليل حجم خط العناوين وزيادة تلك الخاصة بالمحتوى. لاحظ التكوين التالي:
# رأس القائمة لي ،
#header ul.menu li.analytics،
#header ul.menu li.development {background: none؛}
#header ul.menu li h4 {margin: 30px 0 0 0px؛ حجم الخط: 12 بكسل ؛ مسافة بادئة نصية: 10٪ ؛}
#main #content .hnews h3 a،
#main #content .hnews h1 a {font-size: 22px؛ }
#main #content .hnews .entry-content {font-size: 16px؛}
تعديلات أخرى من حيث الجماليات والأنماط
لقد أجريت جميع العمليات السابقة لكيفية إنشاء موقع ويب سريع الاستجابة في تصميم إصدار الهاتف المحمول. ما تبقى هو وضع اللمسات الأخيرة على مظهر الويب وأسلوبه. في هذه الحالة يمكنك إعادة تصميم تلك الأنماط التي لا تتكيف مع الإصدار الجديد وتجاهل تلك الأنماط التي يكون لها مكان فيها. بالطريقة نفسها ، يمكنك نقل بعض العناصر مثل الأشرطة الجانبية ، على سبيل المثال ، لوضعها في مكان آخر ، أو أيضًا إجراء تغييرات على الهوامش ، من بين عمليات ضبط أخرى. لكي نحقق أخيرًا شبكة ويب محمولة جميلة جاهزة للانطلاق.
كيف تصنع موقعًا مستجيبًا؟ - الاختبارات والاختبارات
عندما تقوم بالتصميم ليس فقط من حيث تطوير الويب ، ولكن في أي إنشاء أو هيكلة لشيء جديد. هناك مرحلة اختبار أو اختبار ، حيث يمكنك التحقق من النتائج ، إذا كانت مثالية أو تتطلب تحسينات.
ومع ذلك ، فمن الملائم إجراء فحص أو اختبار بعد تنفيذ جميع الإجراءات السابقة. يجب إجراء هذه الاختبارات أثناء تنفيذ الخطوات وللتمكن من التحقق من التغييرات التي يتم تحقيقها في كل منها. بنفس الطريقة ، من الضروري إجراء الفحصين التاليين في تشغيل الويب
اذهب للاختبار في المتصفح
أثناء عملك على التصميم سريع الاستجابة ، يجب عليك ضبط عرض الشاشة. من أجل التحقق من التعديلات الجديدة التي تتخذ أشكالاً جديدة. وبنفس الطريقة ، يمكن اكتشاف الأخطاء الصغيرة وبالتالي يمكن إجراء تعديلات على استعلامات الوسائط المستخدمة. للتحقق من عرض الشاشة ، هناك طريقتان للقيام بذلك:
- تصرف مباشرة عن طريق إزالة تكبير المتصفح لاختبار عرضه.
- استفد من أشياء مثل ISH كأداة مفيدة لتنفيذ إعدادات الاختبار هذه بأوامر بسيطة.
تجاوز ذاكرة التخزين المؤقت للجوال
تقوم الأجهزة المحمولة بطبيعتها بتخزين البيانات مؤقتًا بما يتجاوز ما هو ضروري ، حتى أكثر من المتصفح العادي. في المعتاد ، عادة ما يكفي تنفيذ CTRL + F5 للحث على الأحمال بدون ذاكرة تخزين مؤقت. على الرغم من صعوبة هذا النوع من الإجراءات على الهواتف المحمولة ، إلا أن بعض المتصفحات لديها خيار تعطيل ذاكرة التخزين المؤقت. لتسهيل العمل بشكل أفضل بدون ذاكرة التخزين المؤقت ، يوصى بما يلي:
- العمل مع المتغيرات في استدعاء Css ، مثل:
"/styles.css؟version=xxxx"
عمل التعديل في كل حالة على رقم الإصدار. لكي يكون عنوان URL مختلفًا بحيث لا يستخدم ذاكرة التخزين المؤقت.
- العمل مباشرة في المتصفح. زيادة الحد الأدنى من دقة الهاتف المحمول بلطف ، بين 420 و 450 بكسل. بهذه الطريقة يمكن أن تجعلها تظهر في المتصفح من خلال تقليص حجمها بدرجة كافية. هناك طريقة أخرى من خلال استخدام الأدوات التي تعمل على تغيير حجم صفحات الويب.
من خلال هذه الإجراءات ، سيتم الحصول على نتيجة أكثر عملية وراحة دون أدنى شك عند إجراء الاختبارات.
كيف تصنع موقعًا مستجيبًا؟ - الخلاصة
في كل ما سبق ، كان من الممكن معرفة بعض التقنيات والأدوات والإجراءات التكنولوجية التي يتم تطبيقها بشكل متكرر في تصميم شبكة ويب سريعة الاستجابة. يمكن أيضًا تطبيق كل هذه المعرفة على موقع ويب موجود تريد إحضاره إلى تصميم متكيف. دون الحاجة إلى العمل على بناء موقع جديد.
لذلك ، بالنسبة للسؤال التالي: القيام بكل ما تعلمته ، هل من الممكن إنشاء موقع ويب بتصميم متجاوب؟ من الواضح أن الإجابة هي لا. لماذا ا؟ لأنه كان من الممكن فقط جعل موقع الويب حساسًا للتكيفات ، وهو ما لم يكن كذلك في الأصل. لأنه تم تصوره تحت طبيعة جامدة أو ثابتة.
العواقب أو الأخطاء المحتملة
أثناء عملية تكييف موقع ويب تقليدي أو موقع أكثر حساسية للتغييرات ، يمكن أن يؤدي ذلك إلى ارتكاب بعض الأخطاء ، وبالتالي ستظهر عواقب معينة ، دعنا نرى:
-يجب حذف بعض العناصر التي كانت ذات أهمية حيوية عند إنشاء الصفحة. من ناحية أخرى ، فإن إجراء الحذف تم بناءً على المظهر وليس بسبب أهمية نقل المحتوى إلى زائر الويب.
- ربما لا يكون قد حقق الكمال في الجانب البصري العام. القدرة على تحسين القائمة فقط. حالة مختلفة تمامًا عما إذا تم إنشاء الويب من البداية.
- اعتمادًا على طراز موقع الويب الأصلي ، قد يصل أو لا يصل إلى نهاية التكيف مع التغييرات. مع بعض النماذج بالأحجام الطبيعية ، سيكون المطورون في هذه المحاولة قادرين فقط على تقديم حلول وسيطة.
أخيرًا حول التصميم سريع الاستجابة
أخيرًا ، ما تم تنفيذه كان مجرد تفاصيل بسيطة. إبراز أهمية العمل للحصول على نموذج قابل للتكيف مع تصميم لم يكن أصلاً. عندما تقرأ "التصميم المتجاوب" ، فإنك تدرك أنك تتحدث عن التصميم وليس عن عمل التخطيط. لذلك ، يجب أن تنشأ كيفية إنشاء موقع ويب سريع الاستجابة من سياق التصميم الجديد الأصلي.
ومع ذلك ، فإن القدرة على عرض موقع ويب يمكنه التغيير والتكيف مع دقة الهاتف المحمول ، بدءًا من موقع صارم ، يعد إنجازًا كبيرًا ومفيدًا إلى حد ما. ما تم شرحه هنا لا يعني أنك تدربت بالفعل على التصميم سريع الاستجابة. لهذا ، هناك حاجة إلى مزيد من البحث.
لأن المزيد من الأساس والمعرفة والتعلم من مختلف أكثر عمومية ، ستكون هناك حاجة إلى مزيد من العمليات التقنية.
كيفية إنشاء موقع متجاوب - نصائح نهائية
في الختام ، من المهم معرفة أن التصميم سريع الاستجابة هو ما هو موجود على الويب. يتطلب هذا النوع من تصميم الويب طريقة جديدة في التفكير. يمكن أن يكون تطوير مواقع الويب هذه أسهل باتباع النصائح التالية:
- فكر في الجوّال أولاً: عند التصميم ، من الملائم أن تبدأ أولاً بالتكيف مع الحجم الصغير لشاشة الهاتف المحمول. وهكذا بعد ضبط المحتوى على شاشات ذات أحجام أكبر. لأنه عند التصميم مع وضع الهاتف المحمول في الاعتبار ، يمكنك أن تكون أكثر موضوعية مع المحتوى الذي يجب عرضه على الصفحة ، وترك فقط ما هو مهم حقًا لتقديمه.
- لا تقم بتحسين التصميم لجهاز محمول أو كمبيوتر لوحي معين
- اتبع المعايير والممارسات الجيدة: على سبيل المثال ، عدم استخدام أنماط CSS المحددة في الملف نفسه ، ضمن علامات Html.
- تجنب أن تكون تابعًا للبكسل في التصميم: ضع في اعتبارك أن العناصر تجد الموضع الذي يتوافق معها. هذا لأنهم يهتمون بسيولة الحاويات والأبعاد. عندما لا يتم عرضها بالشكل المطلوب ، ما عليك سوى إصلاح تخطيط العناصر من خلال تطبيق استعلامات الوسائط.