كيفية إعادة تصميم موقع ويب لتبدو مذهلة على الهاتف المحمول

[ Proto .io هي أداة نماذج أولية لتطبيقات الأجهزة المحمولة يستخدمها رواد الأعمال والشركات الناشئة لإنشاء نماذج أولية واقعية تفاعلية بالكامل تبدو وكأنها تطبيقات حقيقية.]

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

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

كيفية إعادة تصميم موقع على شبكة الإنترنت للحصول على تجربة هاتف محمول رائعة

Handsome (HandsomeMade) هي شركة تصميم وتكنولوجيا تشمل قيمها الأساسية "التفكير المتمحور حول الإنسان على كل المستويات" و "البرامج الجميلة والمبهجة بشكل هادف." يشرح المدير الإبداعي براندون تيرميني والمدير الفني أليكس زوب كيفية تطبيق هذه المبادئ على إعادة تصميم مواقع الويب للجوال:

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

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

كيفية إعادة تصميم موقع ويب ليبدو جميلاً على الهاتف المحمول

لقد طلبنا من Termini مشاركة بعض أفضل ممارسات التصميم المرئي الخاصة به. يقول: "هناك المئات من ما يجب فعله وما يجب تجنبه على مر السنين". هذه هي أفضل ثلاث ممارسات يضعها في مكانها الوسيم:

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

اختبار إعادة تصميم موقع الويب للجوال الخاص بك

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

موصى به لك:

موارد

ماذا يعني توفير مكافحة الربح بالنسبة للشركات الهندية الناشئة؟

تشارانيا ل.

31 يوليو 2022

موارد

كيف تساعد الشركات الناشئة في تكنولوجيا التعليم في تطوير مهارات القوى العاملة في الهند وتصبح جاهزة للمستقبل ...

أنكوش س.

31 يوليو 2022

أخبار

الأسهم التقنية في العصر الجديد هذا الأسبوع: مشاكل Zomato مستمرة ، EaseMyTrip تنشر Stro ...

تابانانا ر.

31 يوليو 2022

سمات

تتخذ الشركات الهندية الناشئة اختصارات في مطاردة للتمويل

نيخيل س.

31 يوليو 2022

أخبار

منصة التسويق الرقمي Logicserve Bags INR 80 Cr Funding، Rbrands as LS Dig ...

شيتان ت.

31 يوليو 2022

أخبار

تقرير يحذر من تجديد التدقيق التنظيمي على Lendingtech Space

شيتان ت.

31 يوليو 2022

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

أردنا معرفة المزيد حول كيفية الاختبار وإعادة تصميم موقع ويب للجوال لضمان الجودة. لذلك ، سمعنا من سيمون بابينو ، الرئيس التنفيذي لشركة Crowdsourced Testing (crowdsourcingqa). أنشأ Papineau Crowdsourced Testing لمعالجة بعض نقاط الألم التي واجهها في تجربته في اختبار العديد من تطبيقات الجوال ومواقع الويب والألعاب والمزيد.

ما يعمل على سطح المكتب لا يعمل دائمًا على الهاتف المحمول - والعكس صحيح

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

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

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

كيفية إعادة تصميم موقع على شبكة الإنترنت باستخدام التصميم سريع الاستجابة

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

لماذا التصميم سريع الاستجابة؟ التمهيدي

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

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

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

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

أفضل الممارسات في التصميم المرئي سريع الاستجابة

وفقًا لـ Bentz ، فإن أخذ أفضل الممارسات التالية في الاعتبار سيساعد في جعل إعادة تصميم موقع الويب سريع الاستجابة الخاص بك يبدو ويعمل في أفضل حالاته:

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

تبدأ إعادة تصميم موقع الويب الرائع بنموذج أولي رائع

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