الشفرة

كيفية جعل أشكال الاتصال الخاصة بك المحمول ودية

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

ستجعل العديد من ممارسات HTML و CSS البسيطة من أشكال الاتصال أكثر سهولة وراحة للزائرين على أجهزة الجوّال.

مدخلات نموذج النمط لتسهيل التحكم باللمس

سيؤدي تطبيق تصميم CSS الملائم للاستخدام على شكل عناصر شكل إلى جعل المدخلات والأزرار وعناصر التحكم تجربة رائعة جدًا للمستخدمين الذين يستخدمون الشاشة اللمسية.

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

input styled
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {  الظهور -webkit: لا شيء ؛  -moz-appearance: none؛ display: block؛ margin: 0؛ width: 100٪؛  الارتفاع: 40 بكسل ؛ ارتفاع الخط: 40 بكسل ؛  font-size: 17px؛ border: 1px solid #bbb؛}

كما ستستفيد أشكال التحكم في الإدخال الأخرى بسهولة من تصميم CSS المخصص:

Styled form controls

تستفيد مربعات الاختيار من سهولة النقر عليها: 

input[type=checkbox] {width: 44px; height: 44px;-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;border: 1px solid #bbb;}

وبالمثل ، يمكن تصميم عناصر الزر وإعطاء معاملة خاصة: 

button[type=submit] {-webkit-appearance: none; -moz-appearance: none;display: block;margin: 1.5em 0;font-size: 1em; line-height: 2.5em;color: #333;font-weight: bold;height: 2.5em; width: 100%;background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);border: 1px solid #bbb;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

حتى أنواع الإدخال الأقل شيوعًا ، مثل أشرطة تمرير النطاق ، ستستفيد من تصميم CSS إضافي: 

input[type=range] {width: 100%;}  input [type = range] :: - webkit-slider-thumb {-webkit-appearance: none؛ width: 44px؛  الارتفاع: 44 بكسل ؛ الخلفية: #fdfdfd؛  الخلفية: -moz-linear-gradient (top، #fdfdfd 0٪، #bebebe 100٪)؛  الخلفية: -Webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0٪ ، # fdfdfd) ، توقف اللون (100٪ ، # bebebe)) ؛  الخلفية: -webkit-linear-gradient (top، #fdfdfd 0٪، # bebebe 100٪)؛  الخلفية: -o-linear-gradient (top، #fdfdfd 0٪، # bebebe 100٪)؛  الخلفية: -ms-linear-gradient (top، #fdfdfd 0٪، # bebebe 100٪)؛  الخلفية: التدرج الخطي (إلى الأسفل ، #fdfdfd 0٪ ، # bebebe 100٪) ؛ الحد: 1px solid #bbb ؛ -webkit-border-radius: 22px؛  -moz-border-radius: 22px؛  border-radius: 22px؛}

استخدم أنواع إدخال HTML5 لتشغيل لوحة المفاتيح المناسبة

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

في ما يلي كيفية ظهور لوحات المفاتيح المرنة المختلفة على iPhone (iOS 6) ، بناءً على نوع الإدخال المحدد:
URL keyboard
Tel keyboard
Email keyboard
Time picker
Date picker

لاحظ في هذه الأمثلة أننا نحدد أيضًا نص العنصر النائب ، باستخدام placeholder صفة، عزا. يمكّننا هذا من إظهار المستخدم مثالاً لنوع البيانات التي يُتوقع دخولها في حقل معين.

اتصالات الهاتف من نوع للاتصال

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

لحسن الحظ ، يمكن تعطيل سلوك الكشف التلقائي هذا على كل من أجهزة iOS و Android عن طريق إدخال العنصر التالي في عنصر من صفحة الويب:

يمكّنك هذا من تحديد ارتباطات الهاتف يدويًا على صفحات الويب الخاصة بك ، مما يمنحك تحكمًا أكبر في المكان الذي تظهر فيه وكيف تبدو: 

Tel: يمكنك وضع رابط هاتف باستخدام محدد CSS التالي: 
a[href^='tel:']:link, a[href^='tel:']:visited {color: #333;font-weight: bold;text-decoration: underline;}  a [href ^ = 'tel:']: hover، a [href ^ = 'tel:']: active {text-decoration: none؛} 
  الجانب السلبي الوحيد لهذا النهج اليدوي هو أن زوار سطح المكتب سيتمكنون أيضًا من رؤية روابط الهاتف هذه ولكن لن يتمكنوا من تنشيطها.  طريقة واحدة حول هذا هو تطبيق tel  تصميم الوصلة فقط إلى واجهات العرض الصغيرة ، باستخدام استعلام وسائط CSS: 
/* unstyled tel links as default */a[href^='tel:']:link, a[href^='tel:']:visited {color: #6f757c;font-weight: normal;  text-decoration: none؛} a [href ^ = 'tel:']: hover، a [href ^ = 'tel:']: active {color: # 6f757c؛ text-decoration: none؛} / * styled tel links بالنسبة إلى مناطق العرض الصغيرة * / شاشة الوسائط @ و (الحد الأقصى للعرض: 600 بكسل) {a [href ^ = 'tel:']: link، a [href ^ = 'tel:']: تمت زيارة {color: # 333؛ font- الوزن: غامق ، زخرفة النص: تسطير ؛} a [href ^ = 'tel:']: hover، a [href ^ = 'tel:']: active {color: # 333؛ text-decoration: none؛}} 
  التحكم في التصحيح التلقائي والرسملة 
  لدى نظام iOS على وجه الخصوص عادةً التصحيح التلقائي والاستفادة من بيانات إدخال النموذج.  بالنسبة لبعض أنواع الحقول ، يعد هذا مفيدًا جدًا ، ولكن بالنسبة للآخرين ، يمكن أن يسبب إحباطًا سريعًا.  على سبيل المثال ، غالبًا ما تجمع أسماء المستخدمين بين الأحرف والأرقام.  لحسن الحظ ، يتيح لك iOS التحكم في هذا السلوك باستخدام autocorrect  و autocapitalize  الصفات: 
  هناك المزيد من الخيارات للتكوين autocapitalize  .  يمكنك أيضًا تعيين القيمة على words  ، characters  أو sentences  ، ولكن فكر بعناية في المكان الذي تستخدم فيه هذه السمات. 

  ملاحظة على دعم المتصفح 
  في حين أن العديد من الأمثلة في هذه المقالة تبرز الميزات في iOS Safari ، فإن بعض النصائح تنطبق أيضًا على Android (اعتمادًا على إصدار المتصفح) ، بالإضافة إلى متصفحات الجوال الأخرى.  والشيء الجيد في ميزات نموذج HTML5 هو أنها تعزز بشكل تدريجي.  ستستفيد المتصفحات التي تدعم ميزة من ذلك ، في حين أن المتصفحات غير الداعمة ستتجاهلها بشكل عام. 
  هل تطلب مواقع الجوال أشكالًا متوافقة مع الجوّال؟  ما هي النصائح الأخرى التي تضيفها؟  اسمحوا لنا أن نعرف في التعليقات. 
  صورة مميزة / صورة مصغرة ،   صورة جهة الاتصال  عبر Shutterstock. 



        

                        سهولة الاستخدام 
                        التليفون المحمول 
                        CSS للجوال 
                        جعل النماذج تعمل على الهاتف المحمول 
                        أشكال المحمول ودية 
                        أشكال التصميم للجوال 
                        تصميم html5

OdWebDesign.Net