أصبحت webdesign المتجاوب مصطلحًا جذابًا لجعل موقع الويب الخاص بك يعمل بشكل جيد بدرجة دقة منخفضة.
أحدثت الهواتف الذكية ثورة في الويب على الجوّال ، كما ألقت الأجهزة اللوحية مفتاحًا آخر في التروس مع تزايد شعبيتها. مع أخذ كل الأشياء بعين الاعتبار ، يمكن تجربة موقع على شبكة الإنترنت اليوم على هاتف ذكي منخفض الدقة ، أو جهاز لوحي متوسط الدقة ، أو سطح مكتب أو كمبيوتر محمول عالي الدقة. عند رمي شاشات شبكية العين في المزيج ، يكون عدد أحجام الشاشات المحتملة مذهلاً. من الناحية المثالية ، سيبدو موقعك على الويب ويعمل بأمان على كل ما سبق ، في أي قرار.
تصميم الويب المتجاوب في حد ذاته هو عملية جعل موقع الويب يعمل على شاشات صغيرة جدًا وشاشات كبيرة جدًا وفي أي قرار بينهما.
على مدى السنوات القليلة الماضية ، وضعت هذه الصناعة بشكل جماعي قائمة مختصرة من أفضل الممارسات الشائعة. تركز العديد من هذه الممارسات على إعادة تهيئة المواقع الإلكترونية المخصصة بدقة عالية إلى أحجام أقل. يبدأ الآخرون في الجوّال ويصلون إلى مناطق العرض الكبيرة ، مع تحسينها حسب الحاجة. يمكن تصنيف كل هذه الممارسات بشكل عام إما كتخطيطات استجابة أو تكيفية.
عمومًا ، تعمل التصميمات المتجاوبة بشكل أفضل من التخطيطات التكيفية ، ولكن في بعض الحالات (webapps المعقدة على سبيل المثال) قد يساعد النهج التكييفي المستخدمين بشكل أفضل. في كلتا الحالتين ، والهدف هو جعل موقع الويب الخاص بك دائما تبدو بأفضل شكل ممكن في القرار المطلوب.
يختار معظم الناس استخدام استعلامات الوسائط للقيام بذلك ، مثل هم صخرة صلبة ما لم تكن بحاجة إلى دعم IE8 أو أدناه. بالنسبة لأولئك منا الذين لا يزال لديهم جمهور في IE6 - 8 على الرغم من أن Scott Jhl قد أنشأ JavaScript polyfill يُسمى Respond.js من شأنها أن تجعل الأشياء تعمل.
قبل ذلك ، كان العديد من webdesigners التواصل الحد الأدنى مع المطورين حتى عملية التسليم. لكن على الرغم من ذلك ، يتعين على المصممين والمطورين العمل معًا من خلال كل من عملية التصميم والتطوير حتى يسير كل شيء بسلاسة. من تحليلات المستخدمين إلى ما يمكن أو لا يمكن إعادة ترتيبه عند تغيير وجهات النظر - المصممين والمطورين أقرب من أي وقت مضى ، إن لم يكن الشخص نفسه. إذا كنت تبحث عن مصدر إلهام لما تبدو عليه التخطيطات سريعة الاستجابة أو التكيفية ، تساؤلات الإعلام هو معرض مصمم على شبكة الإنترنت شعبية يعرض أربعة viewports من موقع على شبكة الإنترنت.
عندما بدأت فكرة webdesign المستجيب أولاً في اكتساب الأرض ، هيمنت التقنيات التكيفية لبعض الوقت. من السهل الانتقال إلى التصميم والتطوير لهذه التخطيطات ، على الرغم من أنها تتطلب المزيد من العمل مقارنة بالمهتمين المستجيبين. هذا هو أيضًا المسار الذي يتخذه العديد من الأشخاص عند تحديث موقع ويب حالي ليكون متوافقًا مع الجوّال. نظرًا لطبيعة التنسيقات التكيفية ، فإنها تمنح الكثير من التحكم في تصميم موقع الويب. يجب عليك فقط تصميم واجهات عرض محددة ، بينما لا يعرض المتصفّح سوى أعلى الإعلانات التي تناسب عرضه. هذه التنسيقات هي تلك التي "snap" عند الضبط أثناء تغيير حجم نافذة المستعرض. في الواقع ، إذا قمت بتغيير حجم نافذتك لتكون أصغر من 1024 بكسل ، فسترى هذا التغيير المفاجئ الذي أتحدث عنه عند ضبط تخطيط موقع الويب هذا للتركيز على إطار عرض متوسط الدقة.
عند تصميم نهج التطوير التكييفي ، يكون العمل سهلاً إلى حد ما. قبل أن تصبح webdesign المتجاوبة شيئًا ، قمت ببساطة بتصميم تصميم واحد ثم تطويره. الآن ، ستصمم لواجهات عرض متعددة ، وتطورها. بشكل عام ، من الأسهل أن تبدأ في أوضاع العرض ذات الدقة المنخفضة وتعمل في طريقك. إذا بدأت مع viewports عالية الدقة ونزول ، يمكن أن الأمور في نهاية المطاف قليلاً ... المدمجة. وبحلول الوقت الذي تصل فيه إلى الجوال ، تشوش.
يعتمد عدد مرات المشاهدة التي تصممها لك أنت والمطور تمامًا ، على وضع خطة معركة استنادًا إلى المستخدمين التابعين لك. إذا أظهرت تحليلات الموقع الحالية أن المستخدمين يستخدمون في الغالب مقابس عرض ذات دقة منخفضة ومتوسطة ، فخطط لذلك. أنت تريد على الأقل ثلاثة: واحد لمقاييس العرض منخفضة الدقة (الهواتف الذكية) ، ووسائط العرض ذات الدقة المتوسطة (الأجهزة اللوحية) ، وواحدة لمنافذ العرض عالية الدقة (أجهزة سطح المكتب وأجهزة الكمبيوتر المحمولة). من الناحية المثالية ، التخطيط لستة هو المعيار ، مع وجود تخطيط دقة عالية ومنخفضة لكل من المنافذ الثلاثة المذكورة أعلاه. ومع ذلك ، فإن وجود عدد كبير جدًا من ذلك سيجعل التطوير والصيانة أكثر من اللازم ، لذا كن حذرا.
إن تطوير تصميم تكيفي بسيط للغاية في الواقع. بافتراض أنك عملت مع المصمم (أو المصمم) من البداية ، مثل تطوير موقع تقليدي. ستبدأ بتطوير الموقع في منفذ عرض منخفض الدقة للجوال. بمجرد الانتهاء من ذلك ، سنستخدم استعلامات الوسائط لتوسيع التخطيط لإطارات العرض ذات الدقة الأعلى. في ما يلي استعلامات وسائط العرض ذات الاستبانة المنخفضة والمتوسطة والعالية الدقة:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }هذا هو المكان الذي تأتي منه "المفاجئة" في النهج التكيفي. نظرًا لأننا نستهدف العديد من درجات دقة العرض الشائعة ، فقد يؤدي الانتقال من واحد إلى الآخر عند تغيير حجم النافذة إلى تقفز المخطط. كما ذكرت من قبل ، فإن التصميم التكييفي والتطوير هو مفيد للغاية فقط لإعادة التهيئة أو لتطبيقات الويب المعقدة. إن تصميم وتطوير العديد من التخطيطات لمنافذ المشاهدة المستقلة يعد أمرًا أكثر صعوبة إذا لم تكن هناك حاجة إليه.
اعتبارًا من اليوم ، يعتبر التصميم والتطوير المتجاوبان منهجًا واقعيًا للاستخدام. على الرغم من أنه يوفر تحكمًا أقل في التخطيط مقارنةً بالنهج التكييفي ، إلا أنه أقل بكثير من العمل على التنفيذ والصيانة حيث أنه لديك فقط تخطيط واحد فقط. كما أنها مخصصة أكثر لموقع الويب أيضًا ، وهذه هي نقطة البيع الرئيسية. ستتمكن من إنشاء نقاط التوقف الخاصة بك استنادًا إلى الوقت الذي ينهار فيه التصميم أو لا يبدو كما هو مقصود.
تخطيطات متجاوبة تشمل أيضا تخطيطات السائل. قبل التقاط webdesign المستجيب ، كانت الأنظمة السائلة شائعة - تخطيطات باستخدام النسب المئوية للعرض. في حين أنهم عملوا بشكل جيد في معظم الحالات ، كان ذلك قبل أن يكون لدينا الهواتف الذكية والأجهزة اللوحية. الآن ، يتم زيادة تخطيطات معظم السائل عن طريق استعلامات الوسائط بدقة منخفضة جدا وعالية جدا. خلاف ذلك قد ينتهي بك الأمر مع تصاميم مدمجة للغاية أو كبيرة للغاية.
في حين أن لديك دليل بسيط للغاية لمتابعة التصميم التكيفي ، فإن التصميم سريع الاستجابة ليس واضحًا تمامًا. هناك نقاش ساخن أن التصميم في المتصفح هو أفضل طريقة للذهاب إليه - التصميم والتطوير في نفس الوقت. نظرًا لأنك ستأخذ جميع مرات المشاهدة بعين الاعتبار عند تصميمها ، فهناك المزيد من العمل الذي ينطوي عليه تصميم التصميم. من الناحية المثالية ، نريد أن نضع في الاعتبار وجهات النظر ، ولكن ليس التصميم لأي تصميم معين. إذا كان ذلك ممكنًا ، فحاول الالتقاء على أرض وسطى. ركز على واجهات العرض ذات الدقة المتوسطة مع مراعاة أن التخطيط سوف يحتاج إلى ضبط دقة أقل وأعلى في وقت لاحق.
من المهم جدًا استخدام تحليلات المستخدم الحالية إذا كان لديك. إذا كان موقعك يحتوي بالفعل على التحليلات التي توضح جمهورك في المقام الأول قراءة من نوافذ العرض منخفضة الدقة ، والتصميم مع التركيز على تلك. استهدف جمهورك ، حتى إذا كان ذلك يعني تجاهل بعض أفضل الممارسات هناك. في النهاية ، سيكون موقع الويب الخاص بك يخدمهم ، وليس الأشخاص الذين يقومون بتجميع هذه الممارسات "الأفضل".
بمجرد اكتمال مرحلة التصميم ، يكون التطوير هو المكان الذي تبدأ فيه المتعة الحقيقية. كما ذكر من قبل ، إذا كان لديك بيانات تحليلية لجمهورك النموذجي ، فابدأ من هناك. بمجرد تطوير التصميم ، ستستخدم استعلامات الوسائط لجعلها سريعة الاستجابة. بدلاً من تحديد مجموعات العرض على الرغم من ذلك ، ستقوم بدلاً من ذلك بتغيير حجم متصفحك يدويًا حتى ينكسر التخطيط. عندما يحدث ذلك ، هذا هو عرض نقطة الإيقاف - قم بإضافة استعلام وسائط لإصلاح الفاصل في التصميم ومتابعة تغيير الحجم. من الناحية المثالية ، ستفعل ذلك من جهاز عالي الدقة حتى تتمكن من مشاهدة جميع مناطق العرض. بمجرد التأكد من دعمك لمقاييس العرض المنخفضة والعالية الدقة ، انتقل إلى الاختبار.
نادرًا ما قد تصادف موقع ويب يستخدم حلًا مخصصًا ، مثل {$lang_domain} . بشكل عام ، تقع غالبية الويب في مجموعات الاستجابة أو التكيف على النحو المبين أعلاه ، ولكن في بعض الأحيان يصبح الناس مبدعين ويصنعون الحلول الخاصة بهم. {$lang_domain} يفعل ذلك عن طريق البدء في نقاط التوقف القياسية المنخفضة والمتوسطة والثانوية ، ثم يتم استكمالها حسب الحاجة عند فصل المخطط. علاوة على ذلك ، يكون التصميم أيضًا ذا طبيعة متغيرة حتى يصل إلى الحد الأقصى المقرر. مع وضع ذلك في الاعتبار ، ابتكري وابن شيئًا يكسر القاعدة!
للأسف ، ليس هناك أي حل جيد لمتصفح يختبر هذه التنسيقات حتى الآن. أفضل طريقة للاختبار هي إجراء ذلك يدويًا: تحميل الصفحة على الهاتف والجهاز اللوحي والكمبيوتر المحمول وأي شيء آخر. يمكنك أيضًا استخدام spoofer في إطار العرض في متصفحك إذا كان يدعم هذا الامتداد. تموج المحاكي هو امتداد أستخدمه في chrome لاختبار بعض viewports منخفضة الدقة. على الرغم من أنه من غير المؤكد بالتأكيد إجراء اختبار يدوي على الأجهزة ، إلا أنه يعطي انطباعًا أكثر دقة عن وظائف موقعك. واجهة المستخدم التي تبدو جيدة على المحاكي ، قد تؤدي في الواقع أداء ضعيفًا على جهاز فعلي.
على نطاق واسع مثل هذه المقالة ، وهذا هو مجرد التمهيدي في موضوع أنواع التخطيط. هناك الكثير من المعلومات حول أساليب webdesign المتجاوبة غير المدرجة في هذه المقالة ؛ لا يُفسر هنا تحسين عناصر واجهة المستخدم وطباعتها والصور المتجاوبة والوسائط ونسب البكسل للجهاز وغير ذلك الكثير. ومع ذلك ، هناك الكثير من المصادر لمثل هذه المعرفة ، في أشكال أكثر كثافة من المعلومات. منذ أن جاءت فكرة تصميم الويب المتجاوب ، ساهمنا في ثروة هائلة من المعرفة حول هذا الموضوع. آمل من خلال توضيح الفرق بين أنواع التخطيط هنا ، سيكون لديك القدرة على التعامل بشكل أفضل مع فكرة شبكة الويب سريعة الاستجابة ... دون أن تضيع في حفرة الأرانب.
يعمل المجتمع باستمرار على ابتكار تقنيات جديدة وبناء حلول مبتكرة للمشاكل التي بدأنا نواجهها للتو. لذا ، في حين أن هناك ثروة هائلة من المعلومات المتاحة حول تصميم المواقع المتجاوب ، هناك مفهوم لا يزال في مهدها. في حين أنه من السهل التوافق مع أفضل الممارسات وحالات الاستخدام الشائعة ، يتم دائمًا تشجيع الإبداع وإرساء الحلول الخاصة بك. إذا كان لديك أي نصائح أو اقتراحات لأولئك منا فقط الدخول في ، أو توسيع معرفتنا في webdesign والتنمية سريعة الاستجابة ، شرارة مناقشة أدناه!
صورة مميزة / صورة مصغرة ، الاستخدامات صورة متجاوبة عبر Shutterstock.