أتصفح الإنترنت كل يوم ، على أجهزة متعددة. أستخدم جهاز Macbook Pro و iMac و PC و iPad و iPhone ونعم حتى جهاز التلفزيون الخاص بي. لذلك يزعجني حقًا عندما أرى مواقع الويب التي لم يتم تحسينها للحصول على درجات دقة شاشة أكبر ، أو تستغرق دقيقتين للتحميل على جهازي المتحرك.
لقد احتضننا جميعًا مفهوم التصميم سريع الاستجابة. قلة قليلة من الناس يجادلون ضدها. في الواقع ، لقد سمعت مؤخرًا أن الشركة الوحيدة غير الراغبة في دفع تكاليف الوقت الإضافي المتضمنة. ولكن كما هو الحال في أي ممارسة جديدة ، نمت الأساطير لمواجهة ذلك.
دعنا نرى ما إذا كان بإمكاننا إفساد عدد قليل من تلك المفاهيم الخاطئة ...
نعم ، تنفجر شبكة المحمول ، ونعم هي القوة الدافعة وراء التصميم المتجاوب ، ولكن عندما نفكر في التصميم التفاعلي ، نحتاج إلى التفكير في أكثر من مجرد هاتف متحرك. مع عرض شاشات شبكية العين ومتصفحات ألعاب الفيديو ، يشاهد مستخدمو الإنترنت الآن مواقع الويب على شاشات كبيرة الحجم وفي سياقات مختلفة.
حاول أن تأخذ في الاعتبار سياقات المستخدم المختلفة عند تصميم وتطوير مواقع الويب المتجاوبة. تحتاج إلى التفكير في الجهاز الذي يستخدمه المستخدم: هل المستخدم على جهاز محمول أو في المنزل أمام التلفزيون؟ تحتاج إلى التفكير في مكان وجود المستخدم: هل المستخدم في الخط في محل البقالة أو المخيم في البرية؟ إن امتلاك محتوى جيد لا يعني شيئًا إذا كان موقعك يستغرق 10 دقائق للتحميل بينما يجلس مستخدموك على الشاطئ لوجود مارغريتا.
المحتوى هو كل شيء ، لكن السياق موجود في كل مكان ، وهو شيء لا يمكنك التحكم فيه مطلقًا. وهذا هو السبب ، من الناحية الواقعية ، يجب أن المحتوى الخاص بك إلى أي قرار ، كبيرة أو صغيرة. لدينا مجموعة من الأدوات التي تسمح لنا بالتعامل مع التنسيقات ، وتحسين أحجام النصوص ، وزيادة الأداء لأي سياق ، لذا عليك أن تتذكر استخدامها.
تذكر أن السياق يتحول في كل الأوقات ، ولهذا السبب من المهم للغاية الموازنة بين التصميم المرئي واحتياجات المستخدم والأداء عند الاقتراب من التصميم المتجاوب. انها ليست مجرد عن المحمول.
اعتدت على القول بأن تصميم الويب المتجاوب لن يعمل لكل مشروع وأنه يعتمد على حالة الاستخدام. حسنًا ، لقد قمت مؤخرًا بتعديل وجهة نظري وأعتقد اعتقادا راسخًا أنه إذا أردنا أن نكون مصممين ومطورين يركزون على المستخدم ، فإننا بحاجة إلى التعامل مع كل مشروع مع وضع التصميم المستجيب في الاعتبار.
يمكن تحديد مواقع العرض الثابتة على دقة الشاشة الكبيرة والصغيرة. خلاصة القول هي أن مواقع الويب الخاصة بنا يجب أن تكون في متناول الجميع بغض النظر عن الجهاز أو دقة الشاشة التي يستخدمونها ، دون قيود.
لقد لاحظت وجود اتجاه في الصناعة حيث يقوم المصممون والمطورون ببناء مواقع ويب سريعة الاستجابة تصل إلى درجات معينة من الأجهزة فقط ، وأنا مذنب بهذا أيضًا. الأجهزة الثلاثة الأكثر شيوعًا هي بالطبع أجهزة الكمبيوتر المحمولة / أجهزة سطح المكتب وأجهزة iPad و iPhone (أو أجهزة الجوال الأخرى). كمصممين نحتاج إلى إدراك أن التصميم المستجيب يدور حول نقاط توقف التصميم ويجعل المحتوى قابلاً للقراءة ومتاح للجميع ، وليس فقط مستخدمي بعض الأجهزة.
ومع ذلك ، إذا كنت تصمم مواقع ويب في برنامج حاسوبي ، فمن المهم أن يكون لديك نوع من إطار العمل مع نقاط التوقف للعمل. أقترح إنشاء الخاصة بك. قم بتحسين التصميم وفقًا للمحتوى. أفضل طريقة لمعرفة نقاط التوقف التي تعمل بشكل أفضل هي رسم بضعة إطارات سلكية أولاً للحصول على فكرة ، ثم يمكنك البدء في وضع وحدات البكسل في البرنامج الذي تختاره. تأكد من العمل خارج الشبكة نفسها عند تصميم السلك والتصميم.
إذا كنت مثلي ، فقم برمز الأطر الخاصة بك وإنشاء نموذج أولي حي. وقد ساعدني ذلك كثيرًا في سير العمل المتجاوب لأنني أستطيع إنشاء نموذج عشوائي موحد وإضافة نقاط توقف إلى التصميم مع اقتراب التصميم بدلاً من محاولة إدخال بيكسل في Photoshop.
واحدة من أكبر المشاكل التي لاحظتها في الكثير من المواقع الإلكترونية المتجاوبة هي أن الطباعة تطرح على الذئاب عندما يختار المصممون والمطورون استخدام نقاط توقف الجهاز فوق نقاط توقف التصميم. في رأيي ، فإن اختيار الجهاز على التصميم يظهر عدم اكتراث تام بالمحتوى المنشور والمستخدم الذي يستهلك هذا المحتوى. يجب أن يحتفظ المحتوى بقابليه للقراءة حتى يضطر إلى ضبطه للحفاظ على هذه القراءة. سيكون المحتوى دائمًا ملكًا ويجب أن تكون إمكانية الوصول إلى المحتوى وقابليته للقراءة هي الأولوية القصوى دائمًا.
إحدى الطرق التي أحب استخدامها في الحفاظ على سهولة قراءة المحتوى في تصميم متجاوب هي استخدام الوحدات النسبية مثل نظام الإدارة البيئية لحجم الخط ، والحشو ، والهوامش ، والتخطيط. تصميم مستجيب هو كل شيء عن تخطيطات متناسبة ، وفي رأيي ، نظم الإدارة البيئية هي مناسبة تماما.
تعد وحدات Ems وحدات نسبية قابلة للتحجيم مع حجم حجم العناصر الأصلية ، ويمكنها توفير الكثير من الوقت والجهد ، وتساعد في الحفاظ على بنية تخطيطك بالكامل. ماذا تعني بسؤالك هذا؟ حسنا ، هذا يعني أنه مع زيادة حجم الخط الأساسي أو خفضه ، يتكيف التخطيط بالتساوي دون أن يتفوق على أي شيء.
إليك مثالاً ، لنفترض أننا عثرنا على نقطتي توقف للتصميم ، واحدة لشاشة سطح مكتب كبيرة جدًا بدقة فائقة وواحدة لجهاز لوحي صغير. لنفترض أيضًا أن حجم خطنا الأساسي هو 16 بكسل الذي يساوي 1.0 ميغابايت ونقوم بتحليل حجم الخط الأساسي حتى 22 بكسل عند عرض الموقع بدقة 3840 × 2160 (دقة فائقة) ونقوم بتخفيض حجم الخط الأساسي إلى 14 بكسل بدقة 800 × 600 (كمبيوتر محمول صغير / جهاز لوحي). لقد قمنا بتغيير كبير بشكل كبير في حجم ونمط موقعنا على اثنين من نقاط التوقف المعينة ، واحدة كبيرة وصغيرة واحدة. العنوان الرئيسي في 1.4em بحجم خط بحجم 22px لحجم أكبر يعني أن 1.4em يساوي 30.8px وعند حجم الخط الأساسي الأصغر البالغ 14px ، فإن 1.4em يساوي 19.6px. على الرغم من أن حجم الخط الخاص بنا قد أصبح أكبر بشكل كبير عند 3840 × 2160 ، إلا أنه لا داعي للقلق بشأن كسر المخطط نظرًا لأنه تم تعديله أيضًا. لنفترض أن العنصر المحتوي لدينا كان بعرض 50em. عند الدقة 800 × 600 التي من شأنها أن تكون 700 بكسل ، ولكن بدقة 3840 × 2160 ، ستكون 1100 بكسل. لدينا الحشو والهوامش سوف تعدل كذلك. في القرار الأكبر الذي يحتوي على أحجام الخطوط والتخطيط الموضوعة في نظام الإدارة البيئية ، فقد سمح تصميمنا بالتوسع بشكل متناسب مما يجعل المحتوى الخاص بنا أكثر قابلية للوصول وأكثر قابلية للقراءة.
الغرض من التصميم المتجاوب هو جعل المحتوى الخاص بك في متناول الجميع ، حتى المعاقين ، عبر جميع أجهزة وشاشات الشاشة. مخبأة المحتوى ليست فكرة جيدة على الإطلاق ، وهناك احتمالات ، إذا كان عليك إخفاء ذلك ، فأنت لا تحتاج إليه في البداية. يخفي المحتوى الذي يتم إخفاؤه أنه لا يمكن قراءته على قارئي الشاشة وأنت الآن تجعل المحتوى الخاص بك غير متاح للأشخاص الذين يعانون من إعاقات بصرية أو معرفية. ضع ذلك في اعتبارك ، يجب أن يكون المحتوى عامًا عبر جميع الأجهزة ، ولا تعاقب المستخدمين عن طريق تقييد ما يمكنهم عرضه على جهاز منفصل.
ومع ذلك ، ما زلت أجد عددًا قليلًا من حالات الاستخدام التي لا تظهر فيها : تأتي في متناول اليدين. في الغالب ، تتعامل جميع حالات الاستخدام مع نوع من التنقل ، وأستخدم العرض: لا شيء ؛ على عناصر التنقل التي تغير النموذج على أجهزة مختلفة. لن تكون فكرة جيدة الحد من المحتوى أو إخفاؤه على أجهزة مختلفة لأنك على الأرجح قد قمت على أساس هذا القرار على افتراض وبعض المستخدمين ، في مكان ما ، سيكون لديهم تجربة سيئة للغاية.
كان هناك عدد من مواقع الويب التي رأيتها مؤخرًا والتي أظهرت عدم وجود تعاطف تجاه المستخدمين ذوي النطاق الترددي المنخفض. تحتوي غالبية هذه المواقع على نفس الأشياء المشتركة والصور الكبيرة والمكتبات الكبيرة لجافا سكريبت والعديد من هذه المواقع يمكن أن يكون قد تم تحسينها إذا تم تصميمها باستخدام أسلوب أول للجوال.
نظرًا لأنه لا يزال هناك الكثير من النقاش حول الصور المتجاوبة ، يصعب على أي شخص الالتزام بأي حل واحد. أتفهم المعضلة ، لكن الانتظار للحصول على حل مثالي قياسي عبر جميع المتصفحات والأجهزة لا يجعل استخدام موقعك الحالي أسهل على الأجهزة ذات النطاق الترددي المحدود. ابحث عن حل يعمل على حل مشكلتك بشكل أفضل وتشغيله. لا يعني العثور على حل مشاكل في الأداء لكل شخص ، وهذا يهزم تمامًا الهدف من التصميم سريع الاستجابة.
يمكن أن تتسبب مكتبات JavaScript الكبيرة أيضًا في حدوث مشكلات على الأجهزة الصغيرة. حاول العثور على طريقة للاتصال بها بشكل مشروط بناءً على دقة الشاشة أو نوع الجهاز. لا ينبغي أن يكون الأداء بعد ثانوي عندما يتعلق الأمر بتصميم متجاوب.
لقد انفجرت شبكة الإنترنت ، ومع ظهور تكنولوجيا الهاتف الذكي والهواتف الذكية ، يمكننا الوصول إلى المحتوى في أي مكان وفي أي سياق. من المهم التأكد من أنه يمكننا الوصول إلى جميع مستخدمينا ومنحهم ما يريدون ، ومتى يريدون ذلك. التصميم المتجاوب هو تقنية جديدة للغاية وفي رأيي ، إنها التقنية المثالية لتوحيد المحتوى الخاص بنا عبر الويب.
ما هي الأساطير الأخرى حول التصميم المستجيب التي ترغب في فضحها؟ هل هناك أي سلبيات للتصميم الاستجابة؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة الويب المتجاوب عبر Shutterstock.