في واقع اليوم، يحتاج كل موقع ويب إلى العمل بشكل جيد على الهاتف المحمول. إن ديناميكية النمو في استخدام الهاتف المحمول لا تشير إلى أي تراجع على أقل تقدير. كمطور، سيتعين عليك التأكد من أن أجهزة iPhone وiPad وAndroid وغيرها من الأجهزة تعمل بسلاسة.
هذه الأجهزة مختلفة، وعلى مدى نصف العقد القادم سيكون هناك بالتأكيد مشاركين آخرين في سباق التسلح هذا. المزيد والمزيد قادمون. وبينما يفعلون ذلك، يصبح التكيف مع كل مجموعة محددة من الظروف أكثر صعوبة تدريجيًا.
تصميم موقع ويب سريع الاستجابة: الدليل النهائي
عندما يخرج الجهاز الجديد، يحاول في أغلب الأحيان أن يكون أصليًا من حيث حجم الشاشة. هذه تختلف بين الأجهزة. تتميز الهواتف بتصميم عمودي بينما تتميز الأجهزة اللوحية بالمناظر الطبيعية.
لا يمكنك الانتقال من واحد إلى آخر عن طريق التقليب بالرغم من ذلك. يعد هذا أمرًا مفروغًا منه بنسبة 100% لجمهورك، وتحتاج إلى إنشاء تعديلات لمجموعة كاملة من أحجام الشاشات المتنوعة.
لكن انتظر لحظة قبل وضع وسائل التوعية الجديدة المحتملة هذه على الرف. هناك إجابة وهي تصميم الويب سريع الاستجابة. باختصار، يعني هذا تصميم موقع الويب الخاص بك لجعله مناسبًا تمامًا لأي شاشة، وتغيير نسبة العرض إلى الارتفاع بسهولة بغض النظر عن نوع الأجهزة المحمولة التي تستخدمها.
ولهذا، يجب عليك تنفيذ شبكات وتخطيطات مرنة بالإضافة إلى ملفات الوسائط. باستخدام مدروس استعلامات وسائط CSS يلعب أيضًا دورًا رئيسيًا في تصميم الويب الإبداعي. عندما يتنقل الشخص بشكل عرضي بين أجهزته وجهاز الكمبيوتر، يجب أن يتكيف Rez الخاص بك وفقًا لذلك.
يأخذ النهج بأكمله جذوره في نظرية تجريبية تحمل الاسم نفسه للتصميم سريع الاستجابة، ولكن في الهندسة العقارية بدلاً من البرمجة.
في الأساس، فهو يتصور إنشاء أماكن يمكن أن تتغير مع تغير عدد الأشخاص الذين يدخلون ويخرجون من الغرفة في وقت معين.
يمكنك القول أن الزاوية ليست جديدة حقًا لأن هذه المبادئ تم استخدامها جزئيًا منذ فترة طويلة في تطوير الويب. هذه عبارة عن تخطيطات مرنة ونصوص برمجية تغير تنسيق العلامات والصفحات بأكملها تلقائيًا.
ومع ذلك، فإن تصميم الويب سريع الاستجابة لأسلوب جديد تمامًا من التركيز. هنا نتناول كل ما يتعلق تصميم ويب مخصص والذي يتكيف مع معظم الأجهزة التي يمكن للمرء أن يستخدمها.
1] صور السوائل
مثل إنشاء شبكات مرنة، يتم استخدام الصور المرنة على نطاق واسع، ولكن الطرق المختلفة التي يمكنك القيام بها كثيرة.
عند التفكير في كيفية تصميم موقع ويب سريع الاستجابة، فإن إحدى الطرق الموثوقة لتغيير أثر صورتك بشكل كبير هي جعلها قابلة للقياس. يمكنك القيام بذلك فيما يتعلق بحجم النص أو البعد المتغير للمكون الأصلي باستخدام قواعد CSS البسيطة.
بالنسبة للمبتدئين، قم بربط قاعدة CSS بقيمة النسبة المئوية. ترتبط نسبة العرض بعرض الأصل. وبدلاً من ذلك، الطريقة التي يمكنك القيام بها هي استخدام الارتفاع بدلاً من ذلك إذا كان أكثر أهمية بالنسبة لنسبك.
فقط لا تستخدم العرض والارتفاع في نفس الوقت. يمكنك أيضًا جعله يتناسب مع حجم النص باستخدام em .
عندما يقوم متصفحك بتغيير حجم الصورة، فقد يؤدي ذلك إلى حدوث بعض التشويه. قم بتقليل ذلك باستخدام صورة كبيرة جدًا بحيث يقوم المتصفح عادةً بتصغيرها بدلاً من تكبيرها. يمكنك أيضًا منع صورتك من التقلص إلى أقل من حجم معين إذا أصبحت غير مقروءة.
هناك طريقة أخرى للتعامل مع تغيير حجم الصورة وهي الكشف عن أجزاء الصور فقط عند تصغير حجم صفحات الويب. يتم تطبيق هذا على كل من الصور الأمامية والخلفية، وإن كان بشكل مختلف قليلاً.
يمكنك اقتصاص صورة الخلفية عن طريق وضعه في CSS. عند القيام بذلك، ستقوم أيضًا بتعطيل طباعة صورة الخلفية.
وهذا يعني أنك ستطبع محتويات الصفحة فقط، مما يؤدي إلى تحسين إمكانية القراءة. من المهم أيضًا تحديد الجانب الذي سيتم اقتصاص الصورة منه بحيث تكون العناصر الأكثر أهمية دائمًا في النطاق.
الصورة الأمامية يستحق شريحة منفصلة لأنه، على عكس الخلفية، مهم لمحتويات الصفحة. على الأقل عادة ما يكون كذلك. ويمكن تحديد مدى أهميتها أم لا من خلال الإجابة على الأسئلة التالية:
- هل هناك أي معلومات مغلفة في الصورة والتي سأحتاج إلى إضافتها كنص سمة بديل؟
- إذا قمت بطباعة الصفحة، فهل ستكون ناقصة بدون هذه الصورة؟
- هل أقوم بربطه أم لا؟
إذا كانت الإجابة "نعم" على أي مما سبق، فإن الصورة هي صورة مقدمة ذات صلة ويجب اقتصاصها مع وضع ذلك في الاعتبار. يتم اقتصاص الصور الأمامية كملف IMG عنصر في HTML.
قد تكون المعلومات المعروضة في مجملها مهمة جدًا بحيث لا يمكن اقتصاصها ببساطة. أما بالنسبة للقياس، فقد يؤدي ذلك إلى إفساد تصميمك عن طريق تغيير المساحة الرأسية التي تستخدمها الصور.
الحل هو إنشاء ما يمكن أن نسميه صورة مركبة. سوف تتداخل الصور الموجودة داخل الإعداد مع بعضها البعض إلى حد ما. لذا فإن الجزء العلوي يحتاج إلى خلفية شفافة.
يمكن أن يكون الامتداد GIF وPNG لكن PNG هو الأفضل لأنه يتم عرضه بدون الحافة الملونة عند وضعه فوق شيء بلون مختلف. يمكن لـ PNG أيضًا ضبط مستويات الشفافية بالتساوي.
بمجرد دمج الصور، ستحتاج إلى دمج الصورتين في صورة واحدة وزرعهما في كتل منفصلة. يجب عليك استخدام عناصر الكتلة الموجودة قدر الإمكان. هذه يمكن أن تكون موجودة رأس و غلاف عناصر div وغيرها.
بعد ذلك، عليك أن تفعل القواعد وضع كل صورة كخلفية غير قابلة للتكرار في كل منها شعبة.
2] هيكل تخطيط قابل للتعديل
عند التفكير في كيفية جعل تصميم الويب مناسبًا لكل شيء، قد نضطر إلى تغيير التصميم بالكامل عبر ورقة أنماط منفصلة، ولكن من الأفضل استخدام استعلام وسائط CSS.
ولتحقيق هذه الغايات، من الرائع أن يكون لدينا قائمة موحدة من الأنماط حيث نقوم بتعيين وحدات البناء الأساسية. وسيتضمن أيضًا الطباعة والخلفيات واللوحات ذات العرض المرن الافتراضي.
إذا فقدت ورقة الأنماط أيًا من معلمات الحجم، فيمكننا إدراج معلمة جديدة تم إنشاؤها عندما كانت طفلة. سيستغرق الأمر كل شيء بدءًا من الإعداد الافتراضي وإجراء التغييرات اللازمة.
6 أشياء خاطئة في نص واجهة المستخدم الخاصة بك3] استعلامات الوسائط
سيتيح لك CSS إنشاء العديد من أوراق الأنماط ومعالجات التخطيط التي ستسمح لنا بالوصول إلى نطاقات العرض المطلوبة. عند محاولة التوصل ليس فقط إلى تصميم موقع ويب إبداعي ولكن أيضًا تصميم فعال، فإن أفضل طريقة هي: وضع جميع استعلامات الوسائط في ورقة أنماط واحدة.
هنا يمكنك التقديم مين العرض و ماكس العرض. مين العرض يحدد الحد الأدنى لعرض الشاشة أو المتصفح الذي ستعمل معه الورقة المحددة. أي شيء أقل من هذا الحد الأدنى، ولن يتم تنفيذ النمط وأي شيء أكثر من الحد الأقصى لن يعمل ببساطة.
أما بالنسبة لعرض الشاشة والمتصفح، فهو وثيق الصلة بأهدافنا لأنه يمكنك استهداف أجهزة معينة ذات أبعاد فردية دون إعادة استخدام الأنماط للشاشات الأخرى مع المتصفحات التي تكرر أحجام الأجهزة.
في بعض الأحيان يكون التفضيل شائعًا، حيث يمكنك ربط ورقة أنماط فردية لاستعلامات وسائط محددة إذا كان من الممكن التضحية بالكفاءة جزئيًا. طريقة جيدة للأجهزة ذات الاتجاه الواحد والمتصفحات التي لا تغير العرض يدويًا.
على سبيل المثال، سيتم تطبيق الإعداد المحدد على iPad بشكل جيد جدًا لأنه يتغير بين الوضع الرأسي والأفقي بسرعة كبيرة. إذا كان الاستعلامان المراد تغييرهما ذهابًا وإيابًا موجودان في ورقة أنماط فردية، فسيؤديان إلى إبطاء هذا الانتقال بشكل غير معقول. ولهذا السبب من الأفضل وضع استعلام الوسائط للاتجاهين الأول والثاني في ورقة واحدة.
ستعمل هذه الطريقة بشكل رائع مع متصفح يمكن تغيير حجمه. إذا كان من الممكن، في الواقع، تغييرها من قبل المستخدم، فإن المسار الأكثر قابلية للتطبيق هو توحيد جميع استعلامات الوسائط في ورقة مدمجة من الأنماط.
عند التعامل مع الأجهزة التي لا يمكنها استخدام استعلامات CSS، يمكنك أيضًا الاستفادة من جافا سكريبت. توجد مكتبة JS جاهزة تتيح استعلامات CSS في المتصفحات القديمة. مجرد تحميل هذه النسخة ويمكنك استخدام استفساراتك.
هناك عدة طرق يمكنك من خلالها إقران JavaScript مع استعلامات وسائط CSS. ليست "حبة سحرية"، فإن استعلامات الوسائط مفيدة للغاية لتصميم موقع ويب رائع وعمل CSS بدقة. يمكن استخدام JS لتوسيع ملفك الشخصي من الخيارات.
4] إظهار/إخفاء
يعد تغيير حجم محتويات الصفحة وإعادة ترتيبها أمرًا كثيرًا ولكنه في بعض الأحيان ليس جيدًا عند الحديث عن تصميم موقع الويب. يمكن أن يتعارض في الواقع مع إرشادات تصميم الأجهزة المحمولة التي تشجع المحتويات المبسطة والأكثر تركيزًا بالإضافة إلى التنقل المبسط من بين أشياء أخرى.
يتعلق الأمر بالمرونة ولكن أيضًا بمنح المستخدم القدرة على الاختيار فيما يتعلق بالعناصر المعروضة. وبالعودة إلى CSS، لا يزال بإمكاننا تحقيق التصميم الجيد لموقع الويب.
قد تختلف الرسوم بناءً على سرعة الشحن المتوفرة: واحد هو وضع عرض لا شيء للكتلة المطلوبة في الورقة المطلوبة أو تحديد حجم المتصفح عبر JS. نحن لا نقتصر على إخفاء العناصر الموجودة على الأجهزة الصغيرة فقط.
في الشاشات الأكبر حجمًا، يمكن أيضًا إخفاء المحتوى الموجود في أوراق الأنماط الافتراضية، وإتاحته فقط على الشاشات الصغيرة الحجم. يمكن أن يكون الغرض من ذلك هو استبدال المحتوى بعناصر التنقل التي قد تؤدي إليه أو تغير التخطيط بأكمله.
ومن المهم أن نستخدم عرض لا شيء بدلا من الرؤية: مخفي. ومن المهم أيضًا التأكيد على ذلك الرؤية: مخفية سوف يخفي المحتوى فقط عندما عرض حقا يزيلها. إذا احتفظنا بالترميز على شاشات صغيرة، فلن يؤدي ذلك إلا إلى تلطيف التحسين حتى أنه قد يتسبب في حدوث أخطاء في حالات معينة.
بعض الأشياء الأخرى التي يمكنك القيام بها للجوال، هي تضمين برنامج نصي أو ورقة أنماط مختلفة للحصول على المزيد من المساحة البيضاء، أو تغيير مصادر التنقل في الصور من الافتراضي إلى الرموز.
5] شاشة تعمل باللمس
مملكة الأجهزة المحمولة بشكل أساسي، ومع ذلك، عند التفكير في كيفية إنشاء تصميم ويب، لا ينبغي للمرء أن يتجاهل شاشات اللمس على أجهزة الكمبيوتر المحمولة. يمكن أن يتحول بعضها إلى أقراص. واليوم، يوجد عدد أكبر من شاشات اللمس المزودة بهذه الإمكانية عما كان عليه الحال في السابق.
كيف يجب أن تتصرف في هذه الحالة؟ ينبغي التعامل مع الاثنين بشكل مختلف ولكن التكيف مع كليهما ليس بالأمر الصعب. في حالة استخدام شاشات اللمس، يجب ألا تحاول استخدام تمريرات CSS لتحديد الروابط. التمريرات غير متاحة، حيث يلمس الشخص الشاشة للضغط على الزر.
هناك بعض قرارات تصميم الويب الرائعة التي ليس لها تأثير سلبي كبير، إن وجدت على الإطلاق، على التنقل بالمؤشر، ولكنها تثبت أنها إبداعية وقيمة للغاية مع شاشة اللمس، حيث أن الأشخاص بشكل أساسي يستخدمون اليد اليمنى وسيستخدمونها براحة.
ناقشنا في هذه المقالة كيفية تحقيق تصميم الويب سريع الاستجابة. تساعدك المنهجية على توفير كميات هائلة من الصداع. كما أنه رائع حقًا لجمهورك، حيث يؤدي القرار المخصص إلى زيادة قيمة المستخدم.
باستخدام معلومات تصميم الويب هذه، ستصل بشكل فعال إلى المستخدمين على كل من الأجهزة القديمة والحديثة. نأمل أن تساعدك بعض هذه الأنماط حول كيفية القيام بتصميم الويب على تحقيق بناء أكثر تنظيمًا وصوتًا لمشروعك القادم.
نصيحة مفيدة: إذا كنت بحاجة إلى مساعدة الخبراء، اقرأ هذا دليل على أفضل شركات التصميم بما في ذلك ما يجب عليك مراعاته قبل استخدام واحدة.
قد يعجبك.
- تصميم الويب وتصميم المباني متشابهان.
- تصميم الموقع: كل ما تحتاج إلى معرفته.
- العناصر الأساسية لتصميم المواقع الحديثة.
1 كيف
مقالة مفيدة للغاية، استمر في العمل الجاد.