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

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

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

اذا كان موقعك غير مهيئ ومحسن للأجهزة المحمولة سوف تخسر زوار كثيرين وحتى ممكن ان تخسر العمل لديك قريبا لذلك اجعلها من اولويات العمل لديك .طبقا لدراسة اجراها  internetretailer.com , السرعة في تحميل الصفحات هو الاكثر تفضيلا لدى متصفحين الانترنت باستخدام الهواتف الذكية 16% من المتصفحين عن طريق الهواتف لا يرجعون الى الموقع اذا كان بطيء .

قبل الخوض في هذه النصائح انصح المبرمجين بقراءة هذا المرجع من جوجل

نصائح لجعل موقعك متطابق مع الهواتف الذكية :

  • تبسيط التصميم وجعله متناسب

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

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

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

  • اجعل التنقل اسهل

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

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

استخدام القائمة المتحركة ( كما هي موجودة في عالم التقنية )  اذا كان يوجد الكثير من الاقسام تريد اظهاره للزائر.

  • اجعل موقعك اسرع

اذا كنت عملت النقطة الاولى بنجاح ( تبسيط التصميم ) هذا فعلا سوف يفي بالغرض وسوف يعمل على التسهيل و تسريع التصفح ,طبعا الفلاش انا انصح بعدم استخدامه بالإضافة الى انه غير متوافق مع الـ SEO  لموقعك فانه ايضا يسبب لك مشاكل في التصفح عن طريق الهاتف وسوف يبطء التصفح بشكل عام,لا تكثر من استخدام الجافا سكربت ايضا , بديل لذلك هو استخدام الـHTML 5 المحببة للجميع.

الصور كبيرة الحجم والوضوح عالي تسبب ايضا بطء في التصفح , فكر هل هذه الصور مهمة جدا , اذا كانت غير كذلك كم بتصغيرها او حتى الغاءها ان لم تكن مهمة.استخدم الPage speed  الذي تحدثت عنه في مقالة سابقة لي لعمل Optimized images.

  • اجعل اسم الموقع او الاسم التجاري ظاهرا

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

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

  • charaf1431

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

    • من عيوني اخي انا اتاسف لكم سوف يتم تعديل المقال فورا , وشكرا على التنبيه

  • fouad

    السلام عليم ورحمة الله وبركته

    جزاك الله خيرا يا أخي عل الطرح الرائع واصل و بإذن الله تعالى موفق يا أخي

    صحيح ان تصفح الأنترنت أصبح يتم من خلال الهواتف و الألواح الذكية (تابلت) ,,, لذلك أحببت أن أنوه إلى أن اللغات الجديدة و المطورة

    مثل HTML 5 , CSS3 , ASP.ET 4.5 أصبحت تراعي هذا الجانب بإتقان

    و ظهرت تقنية ما تسمى ب media queries

    و لمن يريد التجربة يمكن أن يصغر صفحة موقع عالم التقنية في متصفحه على الكمبيوتر ليلاحظ تغير الموقع وفق مقياس شاشة عرض المتصفح

    و هو نفس الشئ مع الهاتف أو اللوحي الذكي

    إذن أحببت أن أضيف هذه المعلومات البسيطة

    media Queries , opt group

    جزاكم الله خيرا

  • MajeDroid

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

  • 2012reeem .

    أخي العزيز ليه التعب !!

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

    http://www.mubarak.in/index.php?p=1_8

  • kamel magdy

    ماستر للتوريدات الطبية ومستحضرات التجميل
    http://www.mastermasr.com/

تعليقات عبر الفيسبوك