في إحدى المرات ، على بعد ساعة تقريبًا من المكان الذي أعيش فيه حاليًا ، عمل مصمم ويب أحبَّت تصميمًا له في Photoshop وتخطيطات ذات عرض ثابت. حسناً ، لا أريد أن أفسد النهاية ، لكن هذا المصمم كان أنا.
بعد ذلك ، وبينما كنت أمارس نشاطي التجاري الخاص ، تحول المجتمع الإبداعي القائم على الويب إلى هياج على هذا المفهوم الجديد المعروف باسم "التصميم المتجاوب". بما أنّ أيّ شاب ، ذو عينان ، خطيء ذيل مهنيّ سيفعل ، تحرّيت أنا. بعد كل شيء ، ينبغي أن تعطى دائما أحدث وأحدث شيء على الأقل لمحة عابرة.
لكن ما اكتشفته تركني مستاءً. العقل المدبر الشرير المسمى إيثان ماركوت أطلق العنان ل خطة خسيسة لجعل مصممي الويب تعمل بجد! ترك كتابه الناس يصرخون ويهتفون حول كيف نحتاج إلى "النظر في مستخدمي المحمول" و "جعل مواقعنا تعمل على أكبر عدد ممكن من المنصات" ... الوثنيين.
بالطبع ، قاومت ما أمكنني. حاربت بقوة وشجاعة ضد هذا المد للحس السليم والأعمال الذكية. لكنه كان كل شيء من أجل لا شيء. ثم عادت إلى الذرائع: "لكن ليس لدي أي أجهزة جوال لاختبارها!" اتضح أنك لا تحتاج على الإطلاق.
مع مرور الوقت ، توصلت إلى بعض الإرشادات الأساسية التي ، إذا وجدت نفسك بدون هاتف جوال أو جهاز لوحي ، ستساعدك على تصميم مواقع الويب التي تجعل الأشياء تبدو جيدة على معظم متصفحات الجوال على أي حال.
... أنت تبني أي شيء أكبر من موقع ويب صغير يستند إلى المحتوى. يجب بالتأكيد اختبار مواقع الويب الكبيرة والمواقع التي تعتمد على التطبيقات على الأنظمة الأساسية الفعلية للجوّال. أعني ، بالتأكيد ، ربما يمكنك أن تزييفها ، لكنني لن أنصح بذلك.
عندما تعمل مع متغيرات غير معروفة ، فإن أفضل خيار هو إبقاء الأمور بسيطة بغباء. نعم ، أنا أستحضر حكم "كيلش" تقريبًا ، لأنه يعمل.
بدون رف كامل من الهواتف الذكية وما إلى ذلك ، تحتاج إلى الاعتماد على ما يعرفه الآخرون. لحسن الحظ ، تم إنفاق الكثير من الوقت والطاقة لفحص إمكانات متصفحات الجوال الأكثر شعبية هناك ، وكيف يقارنون مع بعضهم البعض.
تعرف على جمهورك المستهدف ، ثم تعرف على نوع المتصفحات التي يستخدمها. وكما هو الحال دائمًا ، فإن Google هي صديقك. ثم ، كل ما عليك القيام به هو تصميم للإحصاءات.
إذا كان معظم السوق المستهدف للجوّال يستخدم Android / iOS بشكل أو بآخر ، فأنت محظوظ! المتصفحات الافتراضية (والبدائل الأكثر شيوعًا ، مثل Firefox) حديثة للجزء الأكبر. تقنيات التخطيط المتقدمة ، تأثيرات CSS3 الأساسية ، jQuery… من المرجح جداً أن تكون هذه الأشياء جيدة.
إذا كان جمهورك المستهدف يستخدم منصات أخرى ، ومع ذلك ، ستحتاج إلى إجراء المزيد من البحوث المحددة عنها ، ومعرفة ما يمكن وما لا يمكن القيام به.
الآن ، ماذا تفعل إذا كان لديك معلومات قليلة أو معدومة عن المستخدمين لديك؟ حاول على الأقل معرفة أين هم. معظم المواقع لديها ، على أقل تقدير ، منطقة عامة ينحدر منها معظم مستخدميها. الحصول على احصائيات لتلك المنطقة.
فشل كل ذلك ، تصميم لأسوأ سيناريو.
لجعل عملك أسهل قليلاً ، عثرت على موقع ويب به مقارنة تفصيلية إلى حدٍ ما لما تفعله متصفحات الجوال الأكثر شيوعًا ولا تدعمها. التحقق من ذلك في mobilehtml5.org .
وبطبيعة الحال ، هناك دائما شعبية caniuse.com
أعلم أن بعض المصممين يقسمون عن طريق إنشاء كود مخصص لكل مشروع ، ولكن عندما تعمل عمياء ، إذا جاز التعبير ، فإن إعادة اختراع العجلة ليس خيارًا عمليًا. تستهلك الأطر التي تم اختبارها بالفعل على منصات الجوّال الكثير من التخمين للخروج من العملية.
التخمين هو سيء. تجنبه.
الآن ، من الواضح أنني لم أجرب شخصياً أو اختبرت كل إطار هناك ، لذلك عليك أن تجد واحدًا يفعل ما تريد أن تفعله ، وأن تبحث عنه ، ومقارنته بقدرات منصة الهاتف المحمول الخاصة بك. ومع ذلك ، هناك عدد قليل يمكنك البدء به:
هذه هي تلك التي يمكن أن تسميها على رأس رأسك. فهي تتميز بتعقيدها المطلق. فهي توفر أنظمة تخطيط وعناصر واجهة المستخدم ومكونات jQuery الإضافية في حزمة واحدة قوية.
الاكثر شهرة من هذه التمهيد و المؤسسة . لن أزعجهم بمقارنتها هنا ، لذا تفضل "Google Bootstrap vs. Foundation" إذا كنت بحاجة إلى مزيد من التفاصيل. كل ما تحتاج إلى معرفته في الوقت الحالي هو أنه في كل إطار ، تم اختبار كل مكون على نطاق واسع من قبل قاعدة كبيرة من المروحة ، وهي جاهزة للاستخدام على الجوّال.
هذه لا تحاول أن تفعل كل شيء من أجلك ، ولكن فقط أعطيك ما يكفي للبدء. وهذا يجعل تخصيص الأشياء أسهل قليلاً ، ولكن إنشاء و / أو تصميم عناصر واجهة المستخدم الأكثر تعقيدًا أمر متروك لك.
تشمل هذه الفئة هيكل عظمي ، إطار LESS 4 وما إلى ذلك وهلم جرا…
هذا هو في الواقع الفئة المفضلة الشخصية. أفضّل البدء بشاشة فارغة ونظام تخطيط جاهز ، يسمح لي بإنشاء نوع موقع الويب الذي أريده دون الحاجة إلى الكتابة فوق الكثير من CSS ، أو محاولة استخراج أجزاء محددة من أي إطار محدد.
لا يبدو أن هذه الأطر ، بالنسبة للجزء الأكبر ، تهتم بالتخطيط أو بنية الصفحة. وهي مصممة لتوفير طريقة سهلة لإضافة عناصر واجهة التطبيق المتوافقة والمتنقلة (اقرأ: widgets).
لقد قمت باختبار واحد فقط ، ولكن بحثي يقول أن أفضل ثلاثة (أو على الأقل ، الأكثر شعبية) في هذه الفئة هي jQuery موبايل ، KendoUI و Wijmo .
اتضح أن إمكانية الوصول ليست فقط بالنسبة إلى المكفوفين أو المكفوفين تمامًا. إن الكثير من متصفحات الجوال القديمة محدودة للغاية في الإمكانات التي تشبه إلى حد كبير التصفح مع كل CSS و Javascript متوقف.
أفضل رهان ، في هذه الحالة ، هو التأكد تمامًا من أن موقعك الإلكتروني قابل للاستخدام في ظل هذه الظروف. قم بإيقاف كل تلك الأشياء الجميلة ، وتأكد من أنه لا يزال بإمكان المستخدمين تحقيق أهداف موقع الويب بدونهم.
عادة لا تكون محاكيات الأجهزة دقيقة بنسبة مائة بالمائة ، ولكن يمكنك اختبار أهم الأشياء ، مثل التخطيط وما إلى ذلك. البق التي واجهتها هي في الغالب أشياء أصغر ، مثل خطوط الويب لا يتم عرضها. لا تقلق ، يجب أن تعمل على ما يرام على الأجهزة الفعلية.
لكن أي من المحاكاة يجب أن تستخدم؟
هذا يعمل ببطء ، لكنه يعمل مثل السحر. يجب عليك تنزيل مجموعة أدوات تطوير البرامج بالكامل ، ولكن من الجيد أن يكون لديك برنامج يماثل بشكل كبير ليس فقط متصفح Android الافتراضي ، بل نظام التشغيل بأكمله. بالإضافة إلى ذلك ، يمكنك اختبار موقعك على مجموعة متنوعة من "الأجهزة" الافتراضية.
واحدة أخرى يعمل بشكل أساسي كما هو معلن. يمكنك تنزيله واختيار "الجهاز" والانتقال.
يحتوي Firefox على العديد من الخيارات لاختبار محتوى الجوال الخاص بك. الأول هو محاكي بسيط يحاكي وظيفة تقديم برنامج Mobile Firefox من Mozilla ، فنك.
ليس الأمر معقدًا بشكل كبير ، مما يوفر لك نافذة بسيطة قابلة لتغيير الحجم ، لذا فالأمر يرجع إليك في تعيين حجم الشاشة الذي تريد اختباره يدويًا.
ال الخيار الثاني هو إضافة لإصدار سطح المكتب من Firefox. يطلق على Firefox OS Simulator ، ويوفر لك منصة كاملة للعب بها ، وليس فقط المتصفح (يشبه إلى حد كبير Android SDK).
لم أتمكن من الاختبار هذا المحاكي ، لأنه يتطلب تثبيت حزمة SDK كبيرة جدًا ، وتم التنصت على التنصيب ، على الأقل بالنسبة لي. لا يزال ، هناك لاختبار لك حسب تقديرك الخاص.
بلاك بيري يقدم عددا من محاكاة ل BB10. ربما هذا أنا ، لكنني لم أحقق أي نجاح في تشغيل أي منهم. أحب أن أسمع من أي شخص يدير لجعلها تعمل.
وأخيرا ، ولكن بالتأكيد ليس آخرا ، توفر شركة آبل محاكاة مجانية لنظام التشغيل iOS التي يمكن استخدامها لاختبار أجهزة Apple كجزء من Xcode. لسوء الحظ ، لأنه جزء من Xcode ، إنه جهاز Mac فقط.
إذا كنت قد حصلت على الميزانية (أو يمكنك الاختبار بسرعة ، نظرًا لأن وقت فراغها محدود) ، لا يمكنك الذهاب إلى حد بعيد BrowserStack . ستسمح لك بإجراء اختبار على العديد من أجهزة الكمبيوتر المكتبية ومجموعة كبيرة ومتنوعة من الهواتف المحمولة. ليس مستجيبًا مثل الشيء الحقيقي ، سيعرض لك مشكلات في أمور مثل التخطيط.
تميل متصفحات الجوّال إلى تشغيل إعدادات التكبير والتصغير ، أو هكذا كانت تجربتي. إذا كنت تريد أن يبدو موقعك على الويب بالطريقة التي يعمل بها عند تقليص نافذة المتصفح إلى أحجام الجوّال ، فاستخدم جزء HTML الجميل هذا في رأس المستند:
دعني أعيد صياغتي: الصخور البسيطة على الهاتف المحمول. تتكيف الجمالية الحد الأدنى بشكل جيد مع أحجام الشاشة الصغيرة مع عدد أقل من التعديلات والتعديلات ، مما يوفر لي الكثير من الوقت. ربما هذا يبدو وكأنه لا يفكر في بعضكم ، لكنني لا أستطيع أن أؤكد ذلك بما فيه الكفاية.
هذه المجموعة من المعلومات ليست سوى غيض من فيض ، بالطبع ، ولا يوجد تطابق لاختبار مواقع الويب الخاصة بك فعليًا على أجهزة متنقلة حقيقية ، ولكن يجب أن تسمح لك ببدء العمل ، ونأمل أن تكسب ما يكفي من تصميم الجوال لتوفر لك هذا الجهاز يستحقها بكثرة.
صورة مميزة / صورة مصغرة ، صورة الجهاز المحمول عبر Shutterstock.