التخطيط التكيفي: ما هو وكيفية استخدامه. واجهات التكيف خدمات وأدوات مفيدة

وفي الوقت الحالي، فإن حوالي 11-12% من المواقع الـ 100.000 الأكثر زيارةً مستجيبة، ولا شك أن هذا العدد سيزداد في السنوات القليلة المقبلة.

نظرًا لأن المزيد من المؤسسات تشمر عن سواعدها لاحتضان حقائق الويب متعددة الأجهزة، فمن المفيد التفكير في بعض الاستراتيجيات المستخدمة لتحقيق السعادة القصوى:

التحديث التكيفي

إعادة التصميم المستجيب هي عملية أخذ موقع ويب موجود لسطح المكتب فقط و"إعادة تصميمه سريع الاستجابة" بشكل أساسي.

عندما يتعلق الأمر بالمواقع الجاهزة (خاصة التجارية منها)، لا تتاح للفرق دائمًا فرصة التخلص من كل شيء والبناء مرة أخرى.
دان سيديرهولم

بالنسبة لمعظم المؤسسات، لا يتم حتى التفكير في إنشاء تصميم جديد على نطاق واسع من الصفر. ولهذا السبب يعد التحديث سريع الاستجابة أسلوبًا شائعًا لإنشاء تجربة جيدة للأجهزة المحمولة.

مزايا

• سريع نسبيا.
  هناك عدة طرق لإجراء التحديث سريع الاستجابة، ويمكن أن تتمثل هذه الإستراتيجية في إضافة ملف Small-screens.css إلى الموقع. على الرغم من هذا المثال البسيط إلى حد ما، فإن التحديث التكيفي يعد خيارًا جذابًا لعدد كبير من المنظمات لأنه لا يتطلب إعادة بناء كل شيء من الصفر.
• مألوف.
  لا يخلط بين المستخدمين. لقد أمضى الأشخاص سنوات في التعود على الواجهة، ومن خلال تحديث الواجهة الحالية، تحافظ المؤسسات على نهج مألوف مع تحسين حياة الأشخاص الذين يستخدمون الأجهزة المحمولة.
• أسرع تنظيمياً.
  من الناحية السياسية، يعد تحديث الواجهة أكثر أمانًا من البدء من الصفر. سيكون هناك جدل أقل حول درجة اللون الأخضر التي يجب اختيارها، وما هي الصور التافهة التي يجب استخدامها، ولن تضطر الإدارة إلى لوي أذرعها. يتيح ذلك للفرق إطلاق مواقع سريعة الاستجابة بشكل أسرع.

عيوب

• يؤثر فقط على جزء صغير.
  مرة أخرى، هناك العديد من الخيارات لإعادة التصميم، ولكن الهدف من معظمها هو "جعلها جميلة". من خلال التركيز على إعادة تصميم التخطيط، غالبًا ما تفوت عمليات إعادة التصميم عددًا لا يحصى من العوامل الأخرى التي يجب أخذها في الاعتبار عند إنشاء تصميم ناجح لمجموعة متنوعة من الأجهزة.
• 10 لترات من الماء في وعاء سعة ثلاثة لترات.
  ونظرًا لأن مواقع سطح المكتب مصممة فقط لأجهزة الكمبيوتر المكتبية (وغالبًا ما تستمر لفترة طويلة)، فإنها يمكن أن تحتوي على الكثير من الفوضى. وبما أن التحديث يتكون أساسًا من إعادة صهر التصميم، فإن معظم المشكلات المتعلقة بالمحتوى لا تؤخذ في الاعتبار بشكل كامل.
• أداء.
  هناك شيء غريب في كتابة التعليمات البرمجية لدعم الأجهزة الصغيرة بشكل أفضل. إن إزالة الأشياء غير الضرورية يمكن أن تذهب أبعد من اللازم، ولكن دون التركيز على الإنتاجية، فإنها لن تنمو من تلقاء نفسها.
• أسوأ الدعم.
  لا يتم دعم استعلامات الوسائط، المصممة أصلاً لأجهزة الكمبيوتر المكتبية، بشكل جيد على معظم الأجهزة المحمولة.
• إصلاحات مؤقتة.
  أشعر بالرغبة في الموت عندما أسمع الناس يطلبون مني أن "أقوم بعمل استجابة" لشيء ما، كما لو كان مجرد مربع اختيار في خطة المشروع (وهو ما يكون كذلك بالفعل في بعض الأحيان). هذا النوع من التفكير المحدود يضيع الفرص الحقيقية التي يوفرها التصميم سريع الاستجابة.

مواقع الويب سريعة الاستجابة للجوال، أو كما أسميها "بذور مستقبل سريع الاستجابة"، هي ممارسة إنشاء موقع ويب منفصل بتنسيق "m.yourdomain.ru" باستخدام تقنيات التصميم سريع الاستجابة. تستخدم مواقع مثل The BBC وThe Guardian وEntertainment Weekly (التي عملت عليها) هذه الإستراتيجية.

تمنحك نسخة الهاتف المحمول الفرصة لزراعة بذرة ستنمو من موقع الويب القديم الخاص بك.

وبمرور الوقت، يمكن إزالة الموقع القديم، وسيتطور الموقع من كونه يعتمد على الأجهزة المحمولة أولاً، وسريع الاستجابة، ويأخذ في الاعتبار الاتجاهات المستقبلية.

مزايا

• مخاطر اقل.
  لا تزال معظم المؤسسات تنظر إلى حركة المرور من الأجهزة المحمولة على أنها أقلية. لذا فإن إطلاق موقع ويب سريع الاستجابة للجوال يسمح لهذه المؤسسات باختبار الوضع دون الحاجة إلى القفز إلى رأس الموضوع أولاً.
• فرصة لتعلم المرونة.
  يمكن للمصممين أن يتعلموا التفكير بمرونة أكبر. سوف يتعلم المطورون عددًا لا يحصى من الحيل لأجهزة Android. يمكن للمديرين معرفة كيفية الابتعاد عن الكمال في البكسل. يمكن أن يكون موقع الهاتف المحمول سريع الاستجابة بمثابة وضع حماية رائع للتعلم.
• بنية تحتية.
  يمكن للفرق تعلم كيفية حل مشكلات إدارة المحتوى، مثل إنشاء الصور، مرة واحدة وإلى الأبد
• إزالة الزائدة.
  يوفر هذا النهج فرصة عظيمة للفرق لتسأل نفسها "هل نحتاج حقًا إلى هذا" مع التركيز أيضًا على الأداء. لماذا؟ لأن تركيزهم الأساسي ينصب على تحسين تجربة المستخدم لموقعهم على الأجهزة المحمولة.
• المستقبل هو مواقع الويب المحمولة أولاً.
  على الرغم من افتقارها في البداية إلى المحتوى أو الوظيفة، إلا أنه مع توفر الوقت والجهد الكافيين، يمكن لمواقع الجوال هذه أن تحل في النهاية محل أسلافها الذين كانوا يشغلون صفحات كاملة.

عيوب

• لا يزال موقعًا للجوال.
  سواء كان مستجيبًا أم لا، لا يزال هذا النهج يحتفظ بعدد كبير من عيوب مواقع الجوال: مشاكل في إعادة توجيه عنوان URL، وإدارة المحتوى، والمحتوى المتسق، والاتساق، وتحسين محركات البحث، وغيرها.
• إصلاحات مؤقتة.
  يتم إنشاء العديد من مواقع الهاتف المحمول كضمادة إسعافية لوقف النزيف. يتم إنشاء مثل هذه المواقع بهدف تفريغ حركة المرور المتزايدة القادمة من الأجهزة المحمولة. ربما لا تزال هذه الحلول تلبي الاحتياجات الحالية، ولكن بالنظر إلى الاتجاهات المستقبلية، فمن غير المرجح أن تنقذك على المدى الطويل.
• احتمال الذبول على الكرمة.
  قد تبدأ بعض المنظمات مثل هذه المشاريع، وتقطع نصف الطريق، ثم تتخلى عن الأمر برمته حتى يتم إقرار ميزانية العام التالي.
• تصميم للشاشات الصغيرة.
  نظرًا لأن التركيز الأولي ينصب على الشاشات الصغيرة، فقد يمثل نقل الواجهة لاحقًا إلى شاشات أكبر دون فقدان الجودة تحديًا.

تصميم سريع الاستجابة للأجهزة المحمولة أصلاً
عيوب

• 50 ظلال من النقص.
  قد يفشل هذا الأسلوب لأنه سيتعين على المستخدمين التعامل مع واجهة فرانكنشتاين القديمة والجديدة.
• احتمال الذبول على الكرمة.
  تحتاج هذه الأنواع من المشاريع إلى أهداف نهائية واضحة وإلا فقد ينتهي بها الأمر عالقة في المطهر إلى الأبد.
• التعايش الفني.
  ماذا يحدث عندما تصطدم وحدة واحدة، باستخدام أحدث التقنيات والتقنيات، وجهاً لوجه مع وحدة قديمة؟ هناك العديد من التحديات المعمارية لهذا النهج.

"أنا تشيفي تشيس، وأنت لست كذلك." بالطبع، تختلف كل مؤسسة عن الأخرى، لذا فإن المسار الذي يجب اختياره يعتمد على عوامل مختلفة. يؤثر الوقت والميزانية والنطاق والهيكل التنظيمي ومجموعة المهارات والعديد من العوامل الأخرى على الإستراتيجية الأفضل للتنفيذ. ولكن مع مرور الوقت، أصبح من الواضح بشكل متزايد أن المؤسسات بحاجة إلى العمل على توفير مجموعة متزايدة من الأجهزة التي يمكنها الوصول إلى الإنترنت.

هذه ترجمة لمقال بعنوان "استراتيجية الاستجابة" بقلم براد فروست. تمت الترجمة بواسطة UXDepot بموافقة المؤلف.

ملاحظة من المترجمين: أرجو أن تتمتع هذه المادة. سنكون سعداء إذا قمت بتوضيح أي أخطاء في الترجمة لنا حتى نتمكن من تصحيحها على الفور. اكتب لنا على [البريد الإلكتروني محمي]، لو سمحت:)

يغير التخطيط التكيفي تصميم الصفحة اعتمادًا على سلوك المستخدم والنظام الأساسي وحجم الشاشة واتجاه الجهاز وهو جزء لا يتجزأ من تطوير الويب الحديث. فهو يسمح لك بالحفظ بشكل كبير وليس من الضروري رسم تصميم جديد لكل دقة، ولكن تغيير حجم وموقع العناصر الفردية.

ستتناول هذه المقالة العناصر الرئيسية للموقع وكيفية تكييفها.

ضبط دقة الشاشة

من حيث المبدأ، يمكنك تقسيم الأجهزة إلى فئات مختلفة وتصميم كل منها على حدة، لكن هذا سيستغرق الكثير من الوقت، ومن يدري ما هي المعايير التي ستكون في غضون خمس سنوات؟ علاوة على ذلك، وفقًا للإحصاءات، لدينا مجموعة كاملة من الحلول المختلفة:

يصبح من الواضح أننا لن نتمكن من الاستمرار في التصميم لكل جهاز على حدة. ولكن ماذا تفعل بعد ذلك؟

الحل الجزئي: جعل كل شيء مرنًا

وبطبيعة الحال، هذه ليست الطريقة المثالية، ولكنها تقضي على معظم المشاكل.

أنشأ إيثان ماركوت قالبًا بسيطًا يوضح استخدام التخطيط سريع الاستجابة:

للوهلة الأولى قد يبدو أن كل شيء سهل، لكنه ليس كذلك. ألق نظرة على الشعار:

إذا قمت بتصغير الصورة بأكملها، فسوف تصبح النقوش غير قابلة للقراءة. ولذلك، من أجل حفظ الشعار، يتم تقسيم الصورة إلى جزأين: الجزء الأول (الرسم التوضيحي) يستخدم كخلفية، والثاني (الشعار) يغير حجمه بشكل متناسب.

يحتوي عنصر h1 على صورة كخلفية، وتتم محاذاة الصورة مع خلفية الحاوية (الرأس).

صور مرنة

يعد العمل مع الصور أحد أهم المشكلات عند العمل مع التصميم سريع الاستجابة. هناك العديد من الطرق لتغيير حجم الصور، ومعظمها سهل التنفيذ. أحد الحلول هو استخدام الحد الأقصى للعرض في CSS:

Img (أقصى عرض: 100%؛)

الحد الأقصى لعرض الصورة هو 100% من عرض الشاشة أو نافذة المتصفح، فكلما كان العرض أصغر، كانت الصورة أصغر. لاحظ أن max-width غير مدعوم في IE، لذا استخدم width: 100% .

تعد الطريقة المقدمة خيارًا جيدًا لإنشاء صور قابلة للتكيف، ولكن من خلال تغيير الحجم فقط، سنترك وزن الصورة كما هو، مما سيؤدي إلى زيادة وقت التحميل على الأجهزة المحمولة.

طريقة أخرى: الصور المستجيبة

لا تعمل هذه التقنية، التي قدمتها شركة Filament Group، على تغيير حجم الصور فحسب، بل تقوم أيضًا بضغط دقة الصور على الشاشات الصغيرة لتسريع عملية التحميل.

تتطلب هذه التقنية عدة ملفات متاحة على Github. أولاً نأخذ ملف JavaScript ( rwd-images.js)، ملف .htaccessو rwd.gif(ملف الصورة). ثم نستخدم بعض HTML لربط درجات الدقة الكبيرة والصغيرة: أولاً صورة صغيرة ببادئة .ر(لإظهار أن الصورة يجب أن تكون سريعة الاستجابة)، ثم اربطها بالصورة الكبيرة باستخدام data-fullsrc:

بالنسبة لأي شاشة أكبر من 480 بكسل، سيتم تحميل صورة ذات دقة أعلى ( LargeRes.jpg)، وعلى الشاشات الصغيرة سيتم تحميله ( SmallRes.jpg).

يتمتع iPhone و iPod Touch بخصوصية خاصة: فالتصميم الذي تم إنشاؤه للشاشات الكبيرة سوف يتقلص ببساطة في المتصفح بدقة صغيرة دون التمرير أو تخطيط الهاتف المحمول الإضافي. ومع ذلك، لن تكون الصور والنصوص مرئية:

لحل هذه المشكلة، استخدم العلامة الوصفية:

إذا كان المقياس الأولي يساوي واحدًا، يصبح عرض الصور مساويًا لعرض الشاشة.

هيكل تخطيط الصفحة قابل للتخصيص

لإجراء تغييرات كبيرة في حجم الصفحة، قد تحتاج إلى تغيير الترتيب العام للعناصر. ويمكن القيام بذلك بسهولة من خلال ملف أنماط منفصل، أو بشكل أكثر كفاءة، من خلال استعلام وسائط CSS. لا ينبغي أن تكون هناك أي مشاكل لأن معظم الأنماط ستبقى كما هي ولن يتغير سوى القليل منها.

على سبيل المثال، لديك ملف تصميم رئيسي يحدد #wrapper و #content و #sidebar و #nav بالإضافة إلى الألوان والخلفية والخطوط. إذا كانت الأنماط الرئيسية الخاصة بك تجعل تخطيطك ضيقًا جدًا، أو قصيرًا، أو عريضًا، أو طويلًا جدًا، فيمكنك تحديد ذلك وتضمين أنماط جديدة.

style.css (الرئيسي):

/* الأنماط الأساسية التي سترثها ورقة الأنماط الفرعية */ html,body( الخلفية... الخط... اللون... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* العناصر الهيكلية */ #wrapper( width: 80%; Margin: 0 auto; الخلفية: #fff; الحشو: 20px; ) #content( width: 54%; float: left; Margin-right: 3%; ) # الشريط الجانبي الأيسر (العرض: 20%؛ تعويم: يسار؛ الهامش الأيمن: 3%؛) # الشريط الجانبي-يمين (العرض: 20%؛ تعويم: يسار؛)

mobile.css (الطفل):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; Clear: كلاهما; /* أنماط إضافية للتصميم الجديد */ border-top: 1px Solid #ccc ;

على شاشة عريضة، يتلاءم الشريطان الجانبيان الأيسر والأيمن بشكل جيد مع الجانب. على الشاشات الأضيق، تقع هذه الكتل واحدة أسفل الأخرى لمزيد من الراحة.

استعلامات الوسائط CSS3

دعونا نلقي نظرة على كيفية استخدام استعلامات وسائط CSS3 لإنشاء تصميمات سريعة الاستجابة. يحدد min-width الحد الأدنى لعرض نافذة المتصفح أو الشاشة التي سيتم تطبيق أنماط معينة عليها. إذا كانت أي قيمة أقل من min-width، فسيتم تجاهل الأنماط. max-width يفعل العكس.

شاشة @media و(الحد الأدنى للعرض: 600 بكسل) ( .hereIsMyClass ( العرض: 30%؛ تعويم: يمين؛))

لن يعمل استعلام الوسائط إلا عندما يكون الحد الأدنى للعرض أكبر من أو يساوي 600 بكسل.

شاشة @media و(أقصى عرض: 600 بكسل) ( .aClassforSmallScreens ( واضح: كلاهما؛ حجم الخط: 1.3em؛))

في هذه الحالة الفئة ( aClassforSmallscreens) سيعمل عندما يكون عرض الشاشة أقل من أو يساوي 600 بكسل.

على الرغم من إمكانية تطبيق الحد الأدنى للعرض والحد الأقصى للعرض على كل من عرض الشاشة وعرض نافذة المتصفح، فقد نحتاج فقط إلى العمل مع عرض الجهاز. على سبيل المثال، لتجاهل المتصفحات المفتوحة في نافذة صغيرة. يمكنك استخدام الحد الأدنى لعرض الجهاز والحد الأقصى لعرض الجهاز لهذا:

شاشة @media و(الحد الأقصى لعرض الجهاز: 480 بكسل) ( .classForiPhoneDisplay ( حجم الخط: 1.2em؛ ) ) شاشة @media و (الحد الأدنى لعرض الجهاز: 768 بكسل) ( .minimumiPadWidth ( واضح: كلاهما؛ الهامش السفلي : 2px الصلبة #ccc ))

خاصة بالنسبة لأجهزة iPad، تتمتع استعلامات الوسائط بهذه الخاصية توجيه، والتي يمكن أن تكون قيمها أيضًا منظر جمالي(أفقي) أو لَوحَة(رَأسِيّ):

شاشة @media و (الاتجاه: أفقي) ( .iPadLandscape ( العرض: 30%؛ تعويم: يمين؛ ) ) شاشة @media و (الاتجاه: عمودي) ( .iPadPortrait ( واضح: كلاهما؛ ))

يمكنك أيضًا دمج قيم استعلام الوسائط:

شاشة @media و(الحد الأدنى للعرض: 800 بكسل) و(الحد الأقصى للعرض: 1200 بكسل) ( .classForaMediumScreen ( الخلفية: #cc0000; العرض: 30%; التعويم: يمين; ) )

لن يتم تنفيذ هذا الرمز إلا للشاشات أو نوافذ المتصفح التي يتراوح عرضها بين 800 و1200 بكسل.

يمكنك تحميل ورقة محددة بأنماط لقيم استعلام الوسائط المختلفة مثل هذا:

جافا سكريبت

إذا كان متصفحك لا يدعم استعلامات وسائط CSS3، فيمكن إجراء استبدال النمط باستخدام jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); وظيفة resizeWindow(e)( var newWindowWidth = $(window).width(); // إذا كان العرض أقل من 600 بكسل، يتم استخدام ورقة أنماط الهاتف المحمول if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // إذا كان العرض أكبر من 600 بكسل، فسيتم استخدام ورقة أنماط سطح المكتب $("link").attr((href: "style.css")); ) ) ));

عرض المحتوى الاختياري

تعد القدرة على تقليص العناصر وإعادة ترتيبها لتناسب الشاشات الصغيرة أمرًا رائعًا. ولكن هذا ليس الخيار الأفضل. تتميز الأجهزة المحمولة عادةً بمجموعة واسعة من التغييرات: التنقل المبسط، والمحتوى الأكثر تركيزًا، والقوائم أو الصفوف بدلاً من الأعمدة.

ولحسن الحظ، يمنحنا CSS القدرة على إظهار المحتوى وإخفائه بسهولة لا تصدق.

عرض لا شيء؛

العرض: لا يُستخدم أي شيء للكائنات التي يجب إخفاؤها.

وهنا الترميز لدينا:

محتوى الشريط الجانبي الأيسر | محتوى الشريط الجانبي الأيمن

المحتوى الرئيسي شريط جانبي أيسر شريط جانبي أيمن

style.css (الرئيسي):

#content( العرض: 54%; تعويم: يسار; الهامش الأيمن: 3%; ) #الشريط الجانبي-يسار( العرض: 20%; تعويم: يسار; الهامش الأيمن: 3%; ) #الشريط الجانبي-يمين( العرض: 20 %؛ تعويم: يسار) .sidebar-nav(عرض: لا شيء؛)

mobile.css (المبسطة):

#content( العرض: 100%; ) #sidebar-left( العرض: لا شيء; ) #sidebar-right( العرض: لا شيء; ) .sidebar-nav( العرض: مضمن; )

إذا تم تقليل حجم الشاشة، فيمكنك، على سبيل المثال، استخدام برنامج نصي أو ملف تصميم بديل لزيادة المساحة البيضاء أو استبدال التنقل لمزيد من الراحة. وبالتالي، مع القدرة على إخفاء العناصر وإظهارها، وتغيير حجم الصور والعناصر وغير ذلك الكثير، يمكنك تكييف التصميم مع أي جهاز وشاشة.

كيف تستخدم Yandex بياناتك والتعلم الآلي لتخصيص الخدمات -.

إرسال عملك الجيد في قاعدة المعرفة أمر بسيط. استخدم النموذج أدناه

سيكون الطلاب وطلاب الدراسات العليا والعلماء الشباب الذين يستخدمون قاعدة المعرفة في دراساتهم وعملهم ممتنين جدًا لك.

نشر على http://allbest.ru

1. التحديث التكيفي

2. مواقع الجوال سريعة الاستجابة

3. تصميم سريع الاستجابة للأجهزة المحمولة

4. استراتيجية مرحلية

1. التحديث التكيفي

إعادة التصميم المستجيب هي عملية أخذ موقع ويب موجود لسطح المكتب فقط وجعله مستجيبًا بشكل أساسي.

وفي الوقت الحالي، فإن حوالي 11-12% من المواقع الـ 100.000 الأكثر زيارةً مستجيبة، ولا شك أن هذا العدد سيزداد في السنوات القليلة المقبلة. نظرًا لأن المزيد من المؤسسات تشمر عن سواعدها لاحتضان واقع الويب متعدد الأجهزة، فمن المفيد التفكير في بعض الاستراتيجيات المستخدمة لتحقيق السعادة القصوى:

عندما يتعلق الأمر بالمواقع الجاهزة (خاصة التجارية منها)، لا تتاح للفرق دائمًا فرصة التخلص من كل شيء والبناء مرة أخرى. بالنسبة لمعظم المؤسسات، لا يتم حتى التفكير في إنشاء تصميم جديد على نطاق واسع من الصفر. ولهذا السبب يعد التحديث سريع الاستجابة أسلوبًا شائعًا لإنشاء تجربة جيدة للأجهزة المحمولة.

مزايا:

· سريع نسبياً. لأنه لا يتطلب إعادة بناء كل شيء من الصفر.

· مألوف. لا يخلط بين المستخدمين. لقد أمضى الأشخاص سنوات في التعود على الواجهة، ومن خلال تحديث الواجهة الحالية، تحافظ المؤسسات على نهج مألوف مع تحسين حياة الأشخاص الذين يستخدمون الأجهزة المحمولة.

· أسرع من الناحية التنظيمية. تعد ترقية الواجهة أكثر أمانًا وأسهل من البدء من الصفر.

عيوب:

· يؤثر فقط على جزء صغير. 10 لترات من الماء في وعاء سعة ثلاثة لترات. الكثير من المحتوى

· الإنتاجية.

· أسوأ الدعم. لا يتم دعم استعلامات الوسائط، المصممة أصلاً لأجهزة الكمبيوتر المكتبية، بشكل جيد على معظم الأجهزة المحمولة.

2. مواقع الجوال سريعة الاستجابة

مواقع الويب المحمولة سريعة الاستجابة هي ممارسة إنشاء موقع ويب منفصل بتنسيق "m.yourdomain.ru" باستخدام تقنيات التصميم سريعة الاستجابة.

تمنحك نسخة الهاتف المحمول الفرصة لزراعة بذرة ستنمو من موقع الويب القديم الخاص بك. وبمرور الوقت، يمكن إزالة الموقع القديم، وسيتطور الموقع من كونه يعتمد على الأجهزة المحمولة أولاً، وسريع الاستجابة، ويأخذ في الاعتبار الاتجاهات المستقبلية.

مزايا:

· مخاطر اقل. تعتبر حركة المرور من الأجهزة المحمولة أقلية.

· يمكن أن يكون موقع الهاتف المحمول سريع الاستجابة بمثابة بيئة اختبار رائعة للتعلم.

· إزالة الأشياء غير الضرورية. يوفر هذا النهج فرصة عظيمة للفرق لتسأل نفسها "هل نحتاج حقًا إلى هذا" مع التركيز أيضًا على الأداء.

· المستقبل هو مواقع الويب المحمولة أولاً. على الرغم من افتقارها في البداية إلى المحتوى أو الوظيفة، إلا أنه مع توفر الوقت والجهد الكافيين، يمكن لمواقع الجوال هذه أن تحل في النهاية محل أسلافها الذين كانوا يشغلون صفحات كاملة.

عيوب:

· لا يزال هذا موقعًا للجوال. سواء كان مستجيبًا أم لا، لا يزال هذا النهج يحتفظ بعدد كبير من عيوب مواقع الجوال: مشاكل في إعادة توجيه عنوان URL، وإدارة المحتوى، والمحتوى المتسق، والاتساق، وتحسين محركات البحث، وغيرها.

· الإصلاحات المؤقتة. يتم إنشاء العديد من مواقع الهاتف المحمول كأداة مساعدة لوقف النزيف. يتم إنشاء مثل هذه المواقع بهدف تفريغ حركة المرور المتزايدة القادمة من الأجهزة المحمولة. ربما لا تزال هذه الحلول تلبي الاحتياجات الحالية، ولكن بالنظر إلى الاتجاهات المستقبلية، فمن غير المرجح أن تنقذك على المدى الطويل.

· احتمال الذبول على الكرمة.

· تصميم للشاشات الصغيرة. نظرًا لأن التركيز الأولي ينصب على الشاشات الصغيرة، فقد يمثل نقل الواجهة لاحقًا إلى شاشات أكبر دون فقدان الجودة تحديًا.

3. تصميم سريع الاستجابة للأجهزة المحمولة

تصميم واجهة الهاتف الذكي

"الجوال أولاً" هو مبدأ يتضمن تصميم واجهة تأخذ في الاعتبار القيود المفروضة على بيئة الهاتف المحمول (الشاشة الصغيرة، النطاق الترددي المنخفض، وما إلى ذلك)، ولكنها تستفيد بشكل كامل من الشاشات الكبيرة.

مزايا:

· ابدأ بقوة جديدة. الهاتف المحمول أولاً - بداية جديدة.

· أفضل دعم. دعم المزيد من الأجهزة المحمولة، وخاصة القديمة منها التي لا تدعم استعلامات الوسائط.

· الإنتاجية. في حين أن أداء الموقع هو في المقام الأول وظيفة تنفيذه، فإن التصميمات المستجيبة للأجهزة المحمولة تمنح الفرق الفرصة للتركيز على الأداء من البداية.

· مراعاة كل شيء دفعة واحدة. يمكن لتصميم الهاتف المحمول أولاً (على الرغم من اسمه) أن يستوعب عددًا كبيرًا من درجات الدقة، بدلاً من استهداف فئة واحدة فقط من الأجهزة.

· تصميم مقاوم للمستقبل.

عيوب:

· خذ وقت كثير

التحول في الوعي

· صعوبة تنظيمية

· غير مألوف

4. استراتيجية مرحلية

تعمل إستراتيجية التصميم سريع الاستجابة خطوة بخطوة على تقسيم الحملة واسعة النطاق إلى خطوات متعددة. وكما هو الحال مع التحديث (هذه الاستراتيجيات لا يستبعد بعضها بعضا)، فقد لا يكون من الممكن إجراء عملية إعادة تصميم واسعة النطاق، ولهذا السبب تقوم بعض المنظمات بذلك خطوة بخطوة. هناك عدة أنواع من إنشاء الواجهة التكيفية خطوة بخطوة: صفحة تلو الأخرى.

مزايا:

· ملحوظة

· فرصة لتعلم المرونة. يمكنك معرفة كل شيء حول إنشاء واجهات سريعة الاستجابة، ثم استخدام هذه المعرفة لبقية الموقع.

· ارتفاع فرص الانطلاق

عيوب:

عدم النزاهة

إمكانية الذبول على الكرمة

تم النشر على موقع Allbest.ru

وثائق مماثلة

مبادئ وأساليب تطوير واجهات المستخدم وقواعد تصميمها. الطرق الكلاسيكية لإنشاء نماذج أولية لواجهات المستخدم في Microsoft Expression Blend. العمل مع النصوص والرسومات في Expression Blend.

تمت إضافة الدورة التدريبية في 19/03/2012


تاريخ إنشاء الإنترنت ومبادئه الأساسية: البروتوكولات، الخدمات، الخدمات. التعريف بمفاهيم إدمان الإنترنت والتصيد والسايبربانك والرقابة. تصنيف وترتيب المواقع الإلكترونية وتطوير تصميمها. متصفحات موزيلا فايرفوكس وأوبرا.

الملخص، تمت إضافته في 11/10/2011


مراجعة أساليب وأدوات إنشاء وتصميم مواقع الويب. لغات البرمجة لإنشاء مواقع الويب. تحليل مزايا وعيوب أنظمة إدارة المحتوى CMS. تطوير تصميم وتخطيط الموقع. حساب تكاليف تطوير المنتج.

أطروحة، أضيفت في 06/02/2016


تحليل واجهات المستخدم الرسومية لأنظمة تحسين البرامج الحديثة. إنشاء نموذج رياضي وخوارزمية لنظام التحكم SBkZ_PP ومخططه السياقي المعماري. التوثيق الفني للبرنامج.

أطروحة، أضيفت في 18/04/2012


مراجعة وتحليل التقنيات المستخدمة ومحتوى وتصميم مواقع الجامعة، بما في ذلك تلك التي تم إنشاؤها على أساس نظام إدارة المحتوى (CMS). البحث في محتوى موقع PRIPIT واحتياجات المعلومات لمجموعات مختلفة من زواره المحتملين. تطوير تصميم المواقع.

أطروحة، أضيفت في 03/11/2010


شاشة المكونات الرسومية وكائنات النظام ووظائفه. نظام وسائل لتفاعل المستخدم مع الجهاز. تاريخ واجهات المستخدم الرسومية لأجهزة الكمبيوتر الشخصية وتصنيفها. نظام النافذة X.

تمت إضافة العرض في 22/05/2012


اختيار طرق إنشاء وتصميم صفحة إنترنت لتطوير موقع ويب لمؤسسة تجارية. ميزات العمل مع عناصر تصميم الويب: الخط والعناوين والرسومات. التنظيم القانوني لإنشاء واستخدام مواقع الإنترنت.

أطروحة، أضيفت في 11/11/2010


خصائص واجهات تفاعل المعلومات للأنظمة الهرمية للكمبيوتر. مبدأ "ردود الفعل". الخصائص والبساطة وقواعد إنشاء واجهات البرامج والأجهزة. اتجاهات جديدة في تصميم أنظمة الكمبيوتر.

تمت إضافة أعمال الدورة في 01/05/2017


تحليل وسائل الإعلام للأعمال الاستشارية: مراجعة لغات البرمجة وبرامج إنشاء مواقع الويب وأنظمة المعلومات والمواقع الإلكترونية للشركات الاستشارية. نمذجة العمليات التجارية. تطوير التواجد على الإنترنت.

أطروحة، أضيفت في 04/11/2012


تطوير خدمة إنترنت لإنشاء واجهة مرئية لخدمات النظام الخاصة بشركة استضافة. معايير تقييم الواجهة واتجاهات التطوير. سطح المكتب GlideOS. اختيار بنية الخدمة ولغة البرمجة وطرق الاتصال.