تاريخ نشر : 12‏/05‏/2012

5 طرق سريعة لجعل موقعك أكثر المحمول ودية


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

استخدام تخطيط السائل

لقطة للشاشة
وكانت تخطيطات السائل حول لسنوات حتى الآن. قبل وقت طويل من تصميم تستجيب كما نعرفه اليوم جاء على طول، بدا العديد من مصممي المواقع ومطوري البرامج لهذه التقنية هو الحل لمشكلة الأحجام المعاينة متعددة.
  . someColumn {
    عرض: 30٪؛
 } 
إنشاء تخطيطات السائل من السهل إلى حد ما، كل ما عليك القيام به هو ترك بعرض ثابت لصالح بعرض مقرها في المئة في CSS الخاص بك. وذلك بدلا من عمود مع عرض وأعرب من 350px، قد تعيينها إلى 30٪. وهذا الإعداد عرض تتخذ تلقائيا حجم منفذ العرض في الاعتبار وتعيين العرض إلى 30٪ من هذا المجموع. لذلك سوف إذا نافذة المتصفح هو 900px واسعة، وعرض العمود يكون 270px.
إذا كيف يمكنك سحب هذا في البرية؟ هو خدعة لفهم الرياضيات المطلوبة. تعلمون كنت بدأت مع 100٪، وذلك لسحب من يقول، تخطيط العمود 5، قد يكون إغراء لك تعيين كل عمود لعرض 20٪ (20 * 5 = 100). ومع ذلك، هذا من شأنه أن يؤدي إلى ملء الأعمدة الخاصة بك على كامل عرض متاح مع أي في الفضاء بينهما. سترغب عادة إلى إضافة في بعض الهوامش، والتي سوف تلتهم بعض من ذلك العرض.
ما عليك القيام به هو معرفة مدى هامش تريد تطبيقها لك كل عمود، ثم تتضاعف مرات أن عدد الأعمدة لاكتشاف الهامش الإجمالي. أخيرا تقوم بتقسيم الأعمدة في كل ما هو خلفها. أحدد عادة شيء حتى على Instacalc لمعرفة جميع الأرقام بالنسبة لي.
لقطة للشاشة
هنا يمكنك ان ترى ان قمت بإعداد تخطيط العمود 5 مع هامش 4٪ في كل عمود (2 على اليسار، 2 على اليمين). انقر على الصورة أعلاه للذهاب إلى هذه الآلة الحاسبة، حيث يمكنك قرص هذه الأرقام نفسك. مرة يتم إدخال هذه القيمتين، وتصدرت بقية خارج بالنسبة لنا.
أربع مرات في المئة هامش خمسة أعمدة يساوي 20 في المئة من العرض لدينا للهوامش، وترك 80 في المئة متبقية للأعمدة. ثمانون في المئة عرض مقسوما على خمسة أعمدة ما يعادل 16 في المئة في عرض العمود.
لقطة للشاشة
بغض النظر عن حجم و، نافذة المتصفح وهذه النسب يمكن الحفاظ عليها.

تفعل ذلك مع ساس

لقطة للشاشة
إذا كنت تريد وسيلة لوضع هذا الأمر بسهولة في CSS الخاص بك، يمكنك استخدام ساس لمعرفة جميع الرياضيات بالنسبة لك. وإليك mixin التي تنفذ جميع العمليات اللازمة، الذي يمر ببساطة على عدد من الأعمدة والهامش لكل عمود.
  @ mixin columnFix ($ الأعمدة، $ هامش) {
   $ totalMargin: $ الأعمدة * $ الهامش؛
   $ totalContent: 100 - $ totalMargin؛
   عرض: $ totalContent / $ الأعمدة؛
   هامش اليسار: $ هامش / 
   هامش يمين: $ هامش / 
 } 
لتنفيذ هذا mixin، يمكنك استخدام عبارة تشمل يليه اسم mixin والمعلمات ذكرنا للتو. إليك مثال على ذلك أن توزع تلقائيا أربعة أعمدة مع هامش 4٪ في كل عمود.
  . عمود {
   @ تشمل columnFix (4، 4٪)؛
   تعويم: غادر؛
 } 
المغلق جمعت يضع بعرض 21٪ على كل عمود مع هامش 2٪ على الجانبين الأيسر والأيمن. وهذا يدل في الواقع قبالة فائدة preprocessors مثل ساس وأقل.
  . عمود {
   عرض: 21٪؛
   هامش اليسار: 2٪؛
   هامش يمين: 2٪؛
   تعويم: غادر؛
 } 

استخدام الإطار

لقطة للشاشة

إرم في استعلام العمود وسائل الإعلام واحدة

في هذه الأيام، توصيتي للمواقع صديقة المحمول هو أن يذهب تستجيب تماما. هذا يسمح لك لإنشاء تصميم واحد أن تنثني وتتكيف مع مختلف viewports، والتي تضمن أن موقعك يبدو جيدا على أي جهاز تقريبا. هذا الحل هو أنيقة وبسيطة لتنفيذ مما قد يتصور.
أن يقال، وكنت لا تزال جارية لتصل إلى العديد من التحديات عند محاولة تصميم تستجيب تماما. لديك لانهاء عقلك حول طريقة جديدة تماما للنظر في تصميم المواقع وتحسين موقعك في نقاط عدة.
في العالم الحقيقي، قد لا يكون لديك دائما الوقت والميزانية للتركيز على اصلاح 1 استجابة كاملة. ربما حتى في المدى البعيد كنت تخطط لتصميم العلامة التجارية الجديدة استجابة لكنك تريد على الأقل إعطاء موقعك الحالي دفعة سريعة لجعل الامر يبدو أفضل على أصغر viewports.
حل واحد هو خدمة استعلام عن وسائل الاعلام واحد ان يضع اساسا العرض بنسبة 100٪ على الأعمدة الخاصة بك والحاويات. تقليل حجم نافذة المتصفح الخاص بك والعثور على تلك النقطة حيث التصميم الخاص بك لم يعد مفيدا للغاية، ثم إرم في بعض الأنماط الأساسية لإصلاحه:
  @ وسائل الإعلام الشاشة فقط، و(حد أقصى العرض: 700px)
 فقط الشاشة و(حد أقصى، جهاز العرض: 700px) {
  ... حاوية، mainColumn، footerColumn، {عرض: 100٪؛ هامش اليسار: 0؛}
  ف {هامش القاع: 20px؛}
  {IMG ماكس العرض: 100٪؛}
 } 
 
كما فعلت هنا، سيكون لديك على الأرجح لتعديل عدد قليل من الأشياء الأخرى بالإضافة إلى تحديد عرض الأعمدة إلى 100٪ فقط للتأكد من كل شيء يبدو لطيفا مع هذا التصميم الجديد. باستخدام هذه التقنية، سوف يتم عمل تخطيط الافتراضي الخاص بك حتى الشاشات الكبيرة والإرادة. إنحسر إلى عمود واحد عندما يصبح منفذ العرض للمشاريع الصغيرة لاستيعاب التصميم الأصلي (700px في مثالنا أعلاه) 
 
لقطة للشاشة
على الأجهزة الأصغر نحن لا تهتم مع طن من التغييرات ولكن ببساطة بدلا من استخدام التعليمات البرمجية المتكررة أعلاه لإنشاء عمود واحد من المحتوى.
لقطة للشاشة

إضافة أيقونات اللمس أبل

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

كيفية تنفيذ الأيقونات

وهناك حاليا ثلاث شاشات مختلفة لحساب مع أجهزة أبل: تطلب الشركة، اي فون 4 وغيرها من كبار السن فون. أحجام مناسبة لهذه مربع 57px لفون القديمة، مربع 72px للاب توب (النسخة الأولى والثانية) ومربع 114px لفون 4 وأحدث. نضع في اعتبارنا أن ال 3 باد سيتطلب على الأرجح رمز 144px مربع إذا ما يشاع عن قرار مضاعفة إثبات صحيح.
هنا هو رمز التي ستحتاج إلى أن تدرج في هذا الباب رئيس ملف HTML.
  <ربط REL = "التفاح لمس رمز" أ href = "لمس أيقونة-iphone.png" />
 <ربط REL = "التفاح لمس أيقونة" أحجام = "72x72" أ href = "لمس أيقونة-ipad.png" />
 <ربط REL = "التفاح لمس أيقونة" أحجام = "114x114" أ href = "لمس أيقونة-iphone4.png" /> 
يمكنك إضافة إلى شاشة بدء تشغيل التطبيق الويب الخاص بك باستخدام أسلوب مشابه جدا. تحقق من وثائق رسمية لمزيد من المعلومات.

مؤثرات خاصة

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

مشاهدة Hovers

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

استخدام التكنولوجيا الصديقة للموبايل

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

اختتام

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

هل يعجبك هذا؟

إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

إشترك في النشرة البريدية للحصول على آخر المواضيع


تابعنا في اليوتيوب

تابعنا على الفيس بوك