تقنية تطوير مواقع الويب هي عملية متعددة الأوجه للغاية. ولكن مع ذلك ، يمكن تقسيم جميع مراحلها إلى مكونين رئيسيين - الهيكل الوظيفي والغلاف الخارجي. أو ، كما هو معتاد بين مشرفي المواقع ، الواجهة الخلفية والأمامية على التوالي. غالبًا ما يعتقد الأشخاص الذين يطلبون مواقع الويب الخاصة بهم من استوديوهات تطوير الويب بسذاجة أن الأمر يستحق التركيز فقط على الوظائف ، وسيكون هذا هو القرار الصحيح. لكن هذا صحيح في حالات نادرة جدًا جدًا ، وعادةً ما تكون لمشاريع بدء التشغيل في مرحلة الاختبار التجريبي. خلاف ذلك ، فإن التصميم الجرافيكي وواجهة المستخدم مطلوبان ببساطة للامتثال لمعايير تطوير الويب وأن يكونا ملائمين.
حجر الزاوية الأول الذي يقوم به مصمم الواجهة أو المصمم ، هو عرض تخطيط الموقع. بعد كل شيء ، فمن الضروري رسم واجهات. بشكل حدسي بحت ، تظهر طريقتان - إما إنشاء تخطيطات منفصلة لكل دقة شاشة شائعة ، أو إنشاء إصدار واحد من الموقع لجميع شاشات العرض. وسيكون كلا الخيارين خاطئين ، لكن أول الأشياء أولاً.
عرض قياسي للموقع بالبكسللـ Runet
قبل تطوير التخطيط التكيفي ، كان تطوير موقع بعرض ألف بكسل ظاهرة جماعية. تم اختيار هذا الرقم لسبب واحد بسيط - بحيث يتناسب الموقع مع أي شاشة. وهذا له منطقه الخاص ، لكن دعنا نفترض أن الشخص لا يزال لديه على الأقل شاشة عالية الدقة على سطح المكتب. في هذه الحالة ، سيبدو التخطيط الخاص بك مثل شريط صغير في منتصف الشاشة ، حيث كل شيء عالق معًا في كومة واحدة ، وعلى الجانبين توجد مساحة ضخمة غير مستخدمة. لنفترض الآن أن شخصًا ما يصل إلى موقع الويب الخاص بك على جهاز لوحي بشاشة عرض 800 بكسل ويتم تحديد "إظهار موقع الويب بالكامل" في الإعدادات. في هذه الحالة ، سيتم أيضًا عرض موقعك بشكل غير صحيح ، لأنه ببساطة لن يتناسب مع الشاشة.
من هذه الاعتبارات ، يمكننا أن نستنتج أن العرض الثابت للتخطيط لا يناسبنا بالتأكيد ونحن بحاجة للبحث عن طريقة أخرى. دعونا نحلل فكرة التخطيط المنفصل لكل عرض شاشة.
تخطيطات لجميع المناسبات
إذا اخترت كاستراتيجية لإنشاء تخطيطات لجميع أحجام الشاشات في السوق ، فسيكون موقعك هو الأكثر تميزًا على الإنترنت بالكامل. بعد كل شيء ، من المستحيل اليوم تغطية النطاق الكامل للأجهزة ، في محاولة لضبط كل خيار. ولكن إذا ركزت على أكثر درجات دقة الشاشات وشاشات الأجهزة شيوعًا ، فإن الفكرة ليست سيئة. العيب الوحيد هو التكاليف المالية. بعد كل شيء ، عندما يضطر مصمم الواجهة والمصمم والمبرمج إلى القيام بنفس العمل 5 أو 6 مرات ، سيكلف المشروعأعلى بشكل غير متناسب من السعر الأصلي المحدد في الميزانية.
لذلك ، يمكن للمواقع المكونة من صفحة واحدة فقط التباهي بوفرة الإصدارات لشاشات مختلفة ، والغرض منها هو بيع منتج واحد والتأكد من القيام بذلك بشكل جيد. حسنًا ، إذا لم يكن لديك أي من عمليات الإنزال هذه ، ولكن لديك موقع متعدد الصفحات ، فعليك التفكير أكثر.
أحجام المواقع الأكثر شيوعًا
حل وسط بين الطرفين هو عرض التخطيط لثلاثة أو أربعة أحجام للشاشة. من بينها ، يجب أن يكون هناك تخطيط للأجهزة المحمولة. يجب تكييف الباقي مع شاشات سطح المكتب الصغيرة والمتوسطة والكبيرة. كيف تختار عرض الموقع؟ نقدم أدناه إحصائيات خدمة HotLog لشهر مايو 2017 ، والتي توضح لنا توزيع شعبية مختلف درجات دقة شاشة الجهاز ، بالإضافة إلى ديناميكيات هذا المؤشر.
من الجدول يمكنك معرفة كيفية تحديد حجم الموقع الذي تريد استخدامه. بالإضافة إلى ذلك ، يمكننا أن نستنتج أن الشكل الأكثر شيوعًا اليوم هو شاشة 1366 × 768 بكسل. يتم تثبيت هذه الشاشات في أجهزة الكمبيوتر المحمولة ذات الميزانية المحدودة ، لذا فإن شعبيتها أمر طبيعي. والشاشة التالية الأكثر شيوعًا هي شاشة Full HD ، وهي المعيار الذهبي لمقاطع الفيديو والألعاب ، وبالتالي لإنشاء تخطيطات مواقع الويب. علاوة على ذلك ، في الجدول ، نرى دقة الأجهزة المحمولة 360 × 640 بكسل ، بالإضافة إلى خيارات متنوعة لشاشات سطح المكتب والجوال بعد ذلك.
تصميم التخطيط
هكذابعد تحليل الإحصائيات ، يمكننا أن نستنتج أن العرض الأمثل للموقع له 4 أشكال مختلفة:
- إصدار كمبيوتر محمول بعرض 1366 بكسل.
- إصدار Full HD.
- تخطيط عريض 800 بكسل للعرض على شاشات سطح المكتب الصغيرة.
- نسخة الموبايل للموقع - بعرض 360 بكسل.
لنفترض أننا قررنا الحجم الذي يجب استخدامه للمصدر الذي تم إنشاؤه للموقع. لكن مثل هذا المشروع سيظل مكلفًا. فلنلقِ نظرة على المزيد من الخيارات هذه المرة دون استخدام عرض ثابت.
جعل التصميم مرنًا
هناك نهج بديل ، عندما يستحق التكيف مع الحد الأدنى لحجم الشاشة فقط ، وسيتم تحديد أحجام الموقع نفسها بالنسب المئوية. في الوقت نفسه ، يمكن تعيين عناصر الواجهة مثل القوائم والأزرار والشعار بقيم مطلقة ، مع التركيز على الحد الأدنى لحجم عرض الشاشة بالبكسل. على العكس من ذلك ، سيتم شد الكتل ذات المحتوى وفقًا للنسبة المئوية المحددة لعرض مساحة الشاشة. يتيح لك هذا النهج التوقف عن إدراك حجم المواقع كقيد للمصمم والتغلب بمهارة على هذا الفارق الدقيق.
ما هي النسبة الذهبية وكيف يمكن تطبيقها على تصميم صفحة الويب؟
حتى في عصر النهضة ، حاول العديد من المهندسين المعماريين والفنانين إعطاء إبداعاتهم الشكل والتناسب المثاليين. للحصول على إجابات لأسئلة حول قيم مثل هذه النسبة ، لجأوا إلى ملكة جميع العلوم - الرياضيات.
منذ العصور القديمة ، تم اختراع نسبة تراها أعيننا على أنها الأكثر طبيعية وأناقة ،لأنه موجود في كل مكان في الطبيعة. كان مكتشف صيغة هذه النسبة مهندسًا يونانيًا قديمًا موهوبًا اسمه Phidias. لقد حسب أنه إذا كان الجزء الأكبر من النسبة مرتبطًا بالجزء الأصغر لأن الكل مرتبط بالجزء الأكبر ، فإن هذه النسبة ستبدو أفضل. لكن هذا هو الحال إذا كنت تريد تقسيم الكائن بشكل غير متماثل. سميت هذه النسبة فيما بعد بالقسم الذهبي ، والتي لا تزال لا تبالغ في تقدير أهميتها لتاريخ الثقافة العالمي.
رجوع إلى تصميم الويب
الأمر بسيط للغاية - باستخدام النسبة الذهبية ، يمكنك تصميم صفحات ترضي العين البشرية قدر الإمكان. بالحساب وفقًا لتعريف معادلة النسبة الذهبية ، نحصل على الرقم غير النسبي 1 ، 6180339887 … ، ولكن للراحة ، يمكننا استخدام القيمة المقربة 1 ، 62. وهذا يعني أن كتل صفحتنا يجب أن تكون 62 ٪ و 38٪ من الكل ، بغض النظر عن حجم المصدر الذي تم إنشاؤه للموقع الذي تستخدمه. يمكنك رؤية مثال في هذا الرسم البياني:
استخدم التقنيات الجديدة
تتيح تقنيات تخطيط مواقع الويب الحديثة نقل فكرة المخطط والمصمم بدقة ، لذا يمكنك الآن تنفيذ أفكار أكثر جرأة مما كانت عليه في فجر تقنيات الإنترنت. لم تعد بحاجة إلى التفكير مليًا في الحجم الذي يجب أن يكون عليه الموقع. مع ظهور أشياء مثل التخطيط التكيفي للكتل ، والتحميل الديناميكي للمحتوى والخطوط ، أصبح تطوير موقع الويب أكثر متعة. بعد كل شيء ، هذه التقنياتعدد أقل من القيود ، على الرغم من أنها لا تزال موجودة. لكن كما تعلم ، لن يكون هناك فن بلا حدود. نقترح عليك استخدام نهج تصميم إبداعي واحد - النسبة الذهبية. باستخدامه ، يمكنك ملء مساحة العمل بشكل فعال وجميل ، بغض النظر عن أحجام الموقع التي تحددها في القوالب الخاصة بك.
كيفية زيادة مساحة العمل بالموقع
هناك فرصة جيدة ألا يكون لديك مساحة كافية لتناسب جميع عناصر واجهة المستخدم في تخطيط صغير. في هذه الحالة ، عليك أن تبدأ بالتفكير بشكل إبداعي أو حتى بشكل أكثر إبداعًا مما كنت تفعله من قبل.
أقصى مساحة خالية على الموقع عن طريق إخفاء التنقل في القائمة المنبثقة. من المنطقي استخدام هذا الأسلوب ليس فقط على الأجهزة المحمولة ، ولكن أيضًا على أجهزة الكمبيوتر المكتبية. بعد كل شيء ، لا يحتاج المستخدم إلى إلقاء نظرة طوال الوقت على العناوين الموجودة على موقعك - لقد جاء من أجل المحتوى. و يجب احترام رغبات المستخدم
مثال على طريقة جيدة لإخفاء القائمة هو التخطيط التالي (الصورة أدناه).
في الزاوية العلوية من المنطقة الحمراء ، يمكنك رؤية الصليب ، والنقر فوق الذي سيخفي القائمة في أيقونة صغيرة ، ويترك المستخدم وحده مع محتوى الموقع.
ومع ذلك ، هذا اختياري ، يمكنك ترك التنقل ، والذي سيكون دائمًا في الأفق. ولكن يمكنك جعله عنصر تصميم جميل ، وليس مجرد قائمة بالروابط الشائعة على الموقع. استخدم الرموز البديهية بالإضافة إلى الروابط النصية أو بدلاً منها. هو نفسهسيسمح لموقعك بالاستفادة بشكل أكثر كفاءة من مساحة الشاشة على جهاز المستخدم.
أفضل موقع متجاوب
إذا كنت لا تعرف التصميم الذي تختاره للموقع ، فكل شيء بسيط بالنسبة لك. لتوفير تكاليف التطوير وفي نفس الوقت لا تفقد جمهورك بسبب سوء التخطيط لبعض الأجهزة ، استخدم التصميم سريع الاستجابة.
التصميم سريع الاستجابة هو تصميم يبدو جيدًا بنفس القدر على الأجهزة المختلفة. سيسمح هذا الأسلوب بأن يكون موقعك مفهومًا ومريحًا حتى على جهاز كمبيوتر محمول ، حتى على جهاز لوحي ، حتى على هاتف ذكي. يتم تحقيق هذا التأثير من خلال تغيير عرض منطقة عمل الشاشة تلقائيًا. باستخدام أوراق الأنماط سريعة الاستجابة لموقعك ، فإنك تتخذ أفضل قرار ممكن.
ما الفرق بين التصميم سريع الاستجابة وإصدارات موقع الويب
يختلف التصميم سريع الاستجابة عن إصدار الجوال للموقع في أنه في الحالة الأخيرة ، يتلقى المستخدم كود html يختلف عن رمز سطح المكتب. هذا عيب من حيث تحسين أداء الخادم وكذلك تحسين محرك البحث. بالإضافة إلى ذلك ، يصبح من الصعب حساب إحصائيات الإصدارات المختلفة من الموقع. ليس للنهج التكيفي هذه العيوب
يتم تحقيق الاستجابة لمختلف الأجهزة من خلال تخطيط بنسبة مئوية من العرض المحدد أو عن طريق نقل الكتل إلى المساحة المتاحة (في المستوى الرأسي على الهاتف الذكي بدلاً منأفقيًا على سطح المكتب) ، أو إنشاء تخطيطات فردية لشاشات مختلفة.
تعرف على المزيد حول التصميم سريع الاستجابة والتطوير في دروسنا.
