تصميم موقع الويب التكيفي هو نظام مناسب لعرض موقع الويب نفسه على أنواع مختلفة من الأجهزة عبر الإنترنت. بعبارات بسيطة ، هذه هي القدرة على عرض صفحة ويب واحدة على جهاز كمبيوتر محمول وهاتف ذكي وأدوات أخرى.
أصبحت استجابة الويب ضرورة منذ أن حصل الناس على أدوات تدعم الإنترنت بتنسيقات مختلفة. تسعى الشركات والمتاجر عبر الإنترنت وحتى المواقع الإعلامية فقط لإرضاء جمهورها والتكيف معها بكل طريقة ممكنة. يحل التصميم سريع الاستجابة مشكلة الملاءمة ، وبالتالي فهو عنصر عمل لا غنى عنه.
خصائص تصميم الويب سريع الاستجابة
تتميز راحة التصميم بعدة معايير رئيسية
- الحجم. يجب أن يكون لتصميم موقع الويب سريع الاستجابة اختلافات طفيفة عند عرض الصفحة على أجهزة مختلفة ، لذا يجب أن تتوافق أحجام الصور والنصوص والعناصر الأخرى المعروضة مع أحجام الأجهزة نفسها. للقيام بذلك ، قام مطورو الويب بتعديل التصميم بحيث يحتوي على إصدارات متعددة للعرض.
- تعديل المحتوى. المواد التي تملأ الموقع (صور ، فيديوهاتوعناصر الوسائط المتعددة الأخرى) يجب أن تتطابق أيضًا مع دقة الشاشة المطلوبة دون فقد جودة العرض.
- مرونة التصميم. التضمين في تطوير العناصر التي تسمح لك بتعديل تصميم الموقع بسرعة عند تغيير صفحة الويب التي تشاهدها. على سبيل المثال ، يقوم المستخدم بتمرير الصفحة لأعلى ولأسفل ، أو يتنقل عبر أقسام مختلفة ، أو يغير موضع الشاشة من الوضع الرأسي إلى الأفقي والعكس.
- تبسيط العناصر حسب الجهاز لتحسين سهولة الاستخدام.
- إخفاء الكتل غير المهمة على الشاشات الأصغر.
أساسيات
يرتبط بناء مواقع الويب بالتأكيد بلغات البرمجة ، لأنه ببساطة لا يمكنك الاستغناء عنها. باستخدام HTML و CSS ، يتعرف المتصفح على تكوين العناصر وترتيبها (نصوص ، رسوم توضيحية ، مقاطع فيديو) - هذه هي الطريقة التي يتكون بها الموقع.
CSS مسؤولة عن الألوان والأنماط والأحجام والخطوط والمحاذاة والحشو وعناصر الخلفية والنماذج وما إلى ذلك. HTML مسؤولة عن المحتوى العام وهيكل الموقع. وبالتالي ، يتم إنشاء مورد الويب في مجموع طريقتين من أهم طرق الوصف.
CSS ، من ناحية أخرى ، هي أداة تصميم لا غنى عنها. لديه مجموعة كبيرة من الميزات التي تتفوق على HTML:
- يوفر تناسقًا في التصميم عبر صفحات متعددة ، ومظهر الموقع ، ويتحكم في عرض مستندات HTML.
- يمنحك الفرصة للقيام بالتصميم والمحتوى في نفس الوقت.
- يطبق أنماط متعددة والقدرة علىالمشاهدة على أجهزة مختلفة.
- يتخذ قرارات تصميم معقدة.
- تتميز بالسرعة العالية.
لتطوير موقع على شبكة الإنترنت ، تحتاج إلى معرفة بعض المفاهيم الأساسية.
يُرمز إلى محدد CSS باسم النمط الذي يحدد الخصائص وخيارات التنسيق. يخبر المتصفح بالعنصر المحدد الذي تنطبق عليه الخصائص.
الخاصية هي وحدة هيكلية. يحدد المعلمات الخارجية (الحجم والموقع واللون والشكل ، وما إلى ذلك) ويتم التعبير عنها في رمز محدد.
هناك مجموعة من خصائص CSS المحددة التي تصف كائنًا واحدًا في المظهر والموقع.
تشكل هذه العناصر معًا المخطط التالي:
المحدد {property1: value؛ الملكية 2 ؛ قيمة}.
أحجام التخطيط والقرارات
يبدأ تطوير التصميم بإعداد التخطيط في Photoshop أو برامج الرسوم الأخرى. للراحة ، يتم إدخال علامات خاصة للشبكة المعيارية في اللوحة القماشية ، ويتم ملاحظة المسافات البادئة الخاصة. وهكذا ، يُظهر مصمم الويب لمصمم التصميم مبادئ هيكلة الموقع المستقبلي والترتيب الصحيح لعناصر الويب.
قرارات تصميم الويب سريعة الاستجابة وأحجامها لأنواع الأجهزة الرئيسية:
- يلتزم هذا التصميم بمبدأ بدء العمل بإذن المحمول. تم إنشاء تصميم الهاتف الذكي بحجم 460 × 960 بكسل.
- حجم تخطيط الجهاز اللوحي 768 × 1024.
- حجم الكمبيوتر الدفتري هو 1280 × 802.
- حجم الكمبيوتر هو 1600 × 992.
في النسخة المحمولة للموقعيجب أن تكون مبسطة قدر الإمكان ، مع الاحتفاظ بجميع الوظائف الرئيسية. إذا تم إعداد التصميم لمتجر عبر الإنترنت ، مع كل التبسيط قيد الاستخدام ، فيجب أن يحتوي على وصف رئيسي ، وكتالوج منتج ، وخيار طلب ، وعربة تسوق ، وما إلى ذلك - جميع العناصر الضرورية للعمل الكامل ، كما هو الحال مع العرض الكامل التنسيق على جهاز كمبيوتر. الراحة في إصدار الهاتف المحمول هي أنه يمكنك هنا تجنب الصفحات الإضافية لتوفير الوقت عند التحميل.
في المحتوى التكيفي ، باستخدام كود html ، يمكنك إخفاء بعض العناصر غير الضرورية حقًا. على سبيل المثال ، بدقة عالية ، يعرض الموقع بطاقة منتج مع وصفها وسعرها ومعلومات التسليم والقدرة على الإضافة إلى "السلة". في دقة الهاتف المحمول ، يتم تبسيط العملية إلى صورة وسعر وزر شراء.
يجب أن تراعي الدقة المتوسطة والحد الأدنى للتصميم سريع الاستجابة سهولة القراءة والعرض من قبل المستخدم.
تخطيط
الغرض من تخطيط التصميم التكيفي هو إنشاء تخطيط مرن ، أو كما هو معتاد أيضًا أن نقول: "قالب مطاطي". خلاصة القول ليست في أحجام الصفحات المكونة من رقم واحد ، ولكن في الانضغاط النسبي للقالب لسهولة العرض على جميع الأجهزة.
تم بناؤه بشكل أساسي على CSS. أثناء التطوير ، يتم تحديد نقاط التحكم في أبعاد الشاشة. وبالتالي ، يتم تحديد عرض الكائنات المتبقية. للقيام بذلك ، يتم تعيين عرض الصفحة بواسطة خاصية css max-width ، بناءً على هذه المعايير ، يتم تحديد حجم العناصر الأخرى كنسبة مئوية. على سبيل المثال ، حجم الكتلة على الرئيسيالصفحة 600 بكسل ، وعرض كتلة الشريط الجانبي (الشريط الجانبي للموقع) 400 بكسل ، على التوالي ، سيكون عرض المحتوى 60٪ ، وعرض الشريط الجانبي 40٪.
هناك عدة أنواع من التنسيقات سريعة الاستجابة. يتم تحديد كل منها على حدة ، اعتمادًا على الميزات والبناء.
المشاهدات:
- نوع تخطيط يسمح للكتل بالالتفاف عند تقليل دقة الشاشة. في المواقع متعددة الأعمدة ، يتم نقل الكتل الإضافية إلى أسفل الشاشة.
- عندما يتم عمل نمط منفصل لكل إذن. يستغرق هذا النوع من التصميم سريع الاستجابة وقتًا أطول ولكنه الأكثر قابلية للقراءة.
- نوع بسيط من التصميم يهدف إلى قياس جميع العناصر. انها ليست مرنة.
- نوع اللوحة مناسب للاستخدام في تطبيقات الهاتف المحمول ، عندما تظهر وظائف إضافية عند تغيير موضع الشاشة نفسها.
إنشاء طبقات مستجيبة هو جزء واحد فقط من الوظيفة. الصور التكيفية هي حالة منفصلة لها مشاكلها وطرق حلها.
يجب عرض صورة واحدة بوضوح بدرجات دقة شاشة مختلفة. توجد مشكلة هنا - كيفية التأكد من أن الصورة تظل كما هي دائمًا ، بغض النظر عن التغيير في الدقة. لن يكون إدخال رمز CSS بسيط في هذه الحالة كافيًا.
مثال: img {max-width: 250px؛} - هنا يجب عليك تطبيق طريقة يكون فيها حجم الحاوية التي تحتوي على الصورة محدودًا ، وليس الصورة نفسها. سيبدو بالشكل التالي: div img {max-width: 250px؛}. هذه الطريقة تحل المشكلةتخطيط الصور الصغيرة ، ولكن غير مناسب للرسوم التوضيحية الكبيرة.
لذلك ، يفضل العديد من المطورين استخدام لغات جافا سكريبت التي تسمح لك بتكييف أي صورة دون زيادة التحميل على الخادم. تقدم Javascript عددًا كبيرًا من البرامج النصية البديلة.
إيجابيات وسلبيات التنسيق سريع الاستجابة
الإيجابيات:
- احفظ موقع جميع العناصر. يكون هذا مناسبًا عندما يكون المستخدم معتادًا على النسخة الكاملة من الموقع.
- حفظ المجالات والعناوين.
- التخصيص الكامل لتنسيقات الأذونات الأخرى.
سلبيات:
- فقدان المرونة الوظيفية
- أي حمولات زائدة بالمعلومات محفوفة بإطلاق طويل لمورد الويب ، مما يجبر العديد من المستخدمين على التبديل إلى خيارات أسرع.
إنشاء موقع على شبكة الإنترنت
هيكل الموقع مقسم إلى عدة أقسام وكتل. تقليديًا ، يتكون التصميم من الجزء العلوي من الموقع (العنوان) والشعار والقائمة وكتلة المحتوى والجزء الأخير من الموقع (على سبيل المثال ، معلومات الاتصال التفصيلية). دعونا نرى كيفية عمل تصميم موقع ويب سريع الاستجابة من قالب بسيط
العلامات المساعدة للكتابة:
- التفاف - علامة تجمع كل عناصر القالب ؛
- رأس h1 - الشعار ؛
- header - رأس القائمة والعناصر المهمة الأخرى ؛
- محتوى - حظر ؛
- colLeft - حجم المحتوى ؛
- colRight - الشريط الجانبي (عمود جانبي) ؛
- تذييل - الجزء الأخير من الموقع ؛
- شاشة الوسائط - مجموعاتالدقة المطلوبة.
عند كتابة موقع ما ، يمكن أن تتحرك هذه العناصر بترتيب مختلف حسب الحاجة. على سبيل المثال ، عند الدقة العالية ، قد يتم عرض القائمة عموديًا. في إصدار الهاتف المحمول ، يمكن إنشاء التخطيط بطريقة تجعل القائمة تنزلق في وضع أفقي.
- viewport - علامة تسمح لك بحفظ حجم النص في نسخة أصغر من التصميم. وهي تقع بين العلامتين
- max-width - لتحسين الموقع لتجنب التمدد بدقة أعلى من 1000 بكسل.
عند تنفيذ التصميم ، تساعد مكتبة jQuery كثيرًا عندما تحتاج إلى تغيير نمط وهيكل الكتل.
ما الفرق بين التصميم المتجاوب والمتحرك
لفهم كامل ، ضع في اعتبارك بعض الأمثلة التوضيحية ، لأن الخلط بين هذين المفهومين ليس نادرًا.
يجب أن تفهم أن إصدار الهاتف المحمول هو تناظري للموقع الأساسي بنطاق فرعي. العرض الخارجي للموقع يكرر بشكل كامل النمط والوظائف ، في حين أن هيكله ومحتواه قد يختلفان عن الإصدار الرئيسي ، حيث يتم اختصار الإصدار إلى العناصر الضرورية.
التصميم سريع الاستجابة هو الأمثل لجميع درجات دقة الجهاز. إنه قابل للتحجيم ويتم عرضه بشكل صحيح بغض النظر عن ظروف المشاهدة.
هذان عرضان مختلفان للموقع ، تدور حولهما الخلافات بلا كلل أيهما أفضل. وتجدر الإشارة إلى أنه لم يتم التوصل إلى قرار نهائي بعد. أثنى شخص ما على هذا التصميم ، مشيرًا إلى اتجاه الموضة والكثير من المزايا.يحتوي الإصدار المحمول أيضًا على العديد من المزايا التي لا يتمتع بها التصميم سريع الاستجابة. لذلك بداية يجب أن تفهم الحاجات الأساسية
الفوائد
كيف يكون التصميم سريع الاستجابة أفضل من الهاتف المحمول؟
براعة. في عصرنا ، مع مثل هذا النمو المحموم للسوق ، من الضروري ببساطة تقديم المعلومات بطريقة مختلفة ، مما يرضي رغبات المستهلكين. التصميم سريع الاستجابة يحل هذه المشكلة
ترويج فعال في محركات البحث. ما لا يمكن أن يعزى إلى المزايا الرئيسية للجهاز التكيفي. تفضل محركات البحث منح المستخدمين مواقع ويب سريعة الاستجابة.
سهولة الاستخدام. عادةً ما يتم تصميم التصميم سريع الاستجابة في أفضل حلول التصميم ، وهو هدية لطيفة للإدراك البصري للمستخدمين.
السهولة والبساطة سواء في تنفيذ المشروع أو في استخدامه.
معدلات تحويل جيدة. نظرًا لوجود المزيد من الفرص للعرض مع التصميم التكيفي ، يزداد التحويل نفسه.
الاقتصاد. إنه أرخص نسبيًا من إنشاء إصدار محمول منفصل والترويج له.
إيجابيات وسلبيات إصدار الجوال
يتطلب إنشاء تصميم متنقل سريع الاستجابة تنوعًا واتساقًا. بادئ ذي بدء ، يوصى بكتابة الشروط المرجعية بالتفصيل ، والتي ستساعد بالطبع على تجنب الأعمال غير الضرورية وتوفير الوقت ، وكذلك مراعاة ميزات الخادم الذي سيتم استضافة الموقع عليه
هناك مزايا وعيوب معينة للتصميم سريع الاستجابة للهاتف المحمول.
الايجابيات:
- إذا كان لديك موقع جاهز ، فلا داعي لتطوير تصميم لنسخة الجوال من البداية. يمكن إجراء تغييرات قليلة فقط ، وتحرير هذا التخطيط من الوظائف غير المطلوبة.
- نظرًا لجميع أنواع التبسيط ، يعتبر إصدار الهاتف المحمول أسرع عند التنزيل.
- يرى المستخدم أهم معلومة في كل المحتوى.
- تنفيذ سريع. هناك مكونات إضافية يمكنك من خلالها تنفيذ تكييف الهاتف المحمول ، حتى إذا كنت لا تعرف العلامات والرموز.
- خيارات محرك البحث تفضل الإصدارات التكيفية لأنها تستغرق وقتًا أقل في التحليل
سلبيات:
- قد لا تتطابق جميع إصدارات الأجهزة المحمولة مع دقة الأجهزة المحمولة. سيتم فتح الموقع ، بالطبع ، لكن دقة الشاشة لا تتطابق دائمًا مع التخطيط. في بعض الأحيان ، قد يبدو تصميم الهاتف الذكي المصمم جيدًا مختلفًا عند فتحه كجهاز لوحي.
- تتطلب إصدارات الجوال نطاقات مدفوعة منفصلة.
- هناك بعض المشكلات الطفيفة المتعلقة بنشر المحتوى. إذا كانت هناك عدة إصدارات في وقت واحد ، فيجب تعديل المحتوى لجميع التنسيقات مرة واحدة. يمكن اعتبار إرسال مادة جديدة على الموقع الرئيسي ونسخها إلى النسخة المحمولة بمثابة سرقة. لتجنب هذه المشكلة ، قد تضطر إلى إثبات اتصال الموارد.
طرق التنفيذ
طرق التنفيذ الرئيسية:
- بعد إنشاء تصميم التخطيطات والتخطيط ، يتم تحميله إلى الأبعاد المطلوبة باستخدامموقع المشغل والرمز الرئيسي. هذه طريقة كلاسيكية تستخدم عند إنشاء إصدارات متوسطة وصغيرة (أجهزة لوحية ، هواتف ذكية ، إلخ).
- BootStrap عبارة عن مجموعة بسيطة وواضحة من أدوات التكيف. مناسب لإنشاء إصدارات للصفحة المقصودة ومشاريع الويب الأخرى غير المعقدة للغاية. يعطي فرصة جيدة لتطبيق العديد من الأنماط المختلفة في وظائف الواجهة.
- نظام الشبكة المتجاوبة هو مجموعة شائعة من الأدوات متعددة الاستخدامات. سهل التطبيق ولا يتطلب معرفة عميقة. يتضمن مجموعة متنوعة من الرسوم البيانية.
- GUMBY - إطار عمل CSS يتميز باستجابة مرنة وأدوات رائعة.
- ملفات تعريف الارتباط - يسمح لك بتنفيذ الصور المتجاوبة. يرافق الملفات التي يطلبها المتصفح تلقائيًا.
- ExpressionEngine هي طريقة أخرى لإنشاء صور سريعة الاستجابة. يحدد ما إذا كان الجهاز متحركًا ، وقادرًا على تغيير الصور إلى الدقة المطلوبة.
- ProtoFluid - يوفر نماذج أولية سريعة. مناسب لجميع أنواع الأجهزة.
