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

1- ضع أيقونة مفضلة Favicon لموقعك

ايقونة المفضلة تميز موقعك بشكل كبير، كما تساهم في بناء هوية مميزة لك مختلفه عن المواقع الأخرى، فهي تعرض بجانب أسم الموقع المفتوح في المتصفح، وتخزن بجوار أسم الموقع في قائمة المفضلة Bookmarks الخاصة بالمستخدم، وهي تفيد في:-

• أولا : تساعد المستخدم أن يصل سريعاً للموقع لو كان هناك أكثر من موقع مفتوح في المتصفح، سينظر المستخدم للأيقونة بدلاً من قراءة اسم الموقع.
• ثانياً : الوصول السريع للموقع من قائمة المفضلة لنفس السبب أيضاً، سينظر المستخدم للأيقونة بدلاً من قراءة أسم الموقع.

كيف تضع أيقونة مفضلة لموقعك؟

المتصفحات تتعرف على أيقونة المفضلة الخاصة بالموقع المفتوح من خلال أسمها ومسارها الافتراضي، فتبحث في مجلد Root عن الصورة Favicon.ico ثم يقم المتصفح بعرضها تلقائياً، ولكي تتأكد من عرضها على كل المتصفحات، أكتب هذا الكود مصحوباً بمسار الايقونة في الوسم Head داخل رئيسية الموقع.

1
 

كيف تصمم أيقونة مفضلة لموقعك؟

اذا لم يحن الوقت لإستثمار أموالك في تصميم أيقونة مفضلة لموقعك أو أن ميزانية الموقع لا تسمح، يمكن أن تستخدم أحد هذه الأدوات لتساعدك في تصميم أيقونة أو أن ترفع شعار موقعك ليحولها لأيقونة مفضلة:-

•  Favicon CC، ارسم أو ارفع صورة لتحويلها لأيقونة مفضلة.
• Favicon Generator، أداة اخرى لتصميم أيقونة مفضلة.
•  Favicon Canter، حول شعار موقعك لأيقونة مفضلة.

2- تأكد من عناوين الصفحات ووصفها

تأكد من وضع عناوين لكل صفحة من صفحات الموقع، ضع العناوين داخل وسوم <title> وتأكد أن كل عنوان صفحة مرتبط بمحتواها، تأكد من ادراج وصف لكل صفحة داخل الوسم <meta> فهي التي يستخدمها جوجل لوصف نتائج البحث، اذا لم يكن موقعك يدار ببرمجية إدارة محتوى (الووردبريس-جوملا- … الخ) فأنت غالباً لن تحتاج إلى التأكد من هذه الخطوة.

 3- إختبر عرض الموقع على متصفحات وأنظمة مختلفة

اعتقد انك بدأت تؤمن بقيمة زوار موقعك، وعليه فأنه لزاماً عليك أن تحترم زوار موقعك وتوفر لهم طريقة لتصفح الموقع بنجاح أياً كان نوع المتصفح أو نظام التشغيل المستخدم لديهم، يجب أن تختبر الموقع على الثلاث متصفحات الشهيرة على الأقل Firefox – Google Chrome – Internet Explorer بنسخهم الأكثر ثباتاً وتحديثاً، يجب أن تطبق مفهوم التصميم التجاوبى Responsive Design والذى يعنى أن يكون الموقع سليم العرض على كافة المتصفحات دون مشاكل، لا تجعل الموقع يبدوا ١٠٠٪ صحيح على كل المتصفحات فربما يكون هذا الهدف صعب المنال، ولكن على الأقل يجب أن تكون جميع وظائف ومحتوى الموقع معروضه بشكل صحيح.

كيف تختبر الموقع على المتصفحات والأنظمة المختلفة؟

استخدم أحد هذه المواقع لتعرف كيف يبدوا موقعك على المتصفحات والانظمة المختلفة:-

• Browser Shots، شاهد كيف يبدوا موقعك على عدد كبير من المتصفحات وأنظمة التشغيل بإصداراتها المختلفة
• Responsive.is، هل موقعك يطبق مفهوم التصميم التجاوبي؟
• The Responsinator، كيف يبدو موقعك على أجهزة العرض المختلفة (آيباد، آيفون، لاب توب، … الخ)

4- المراجعة اللغوية للمحتوى

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

نصائح لكتابة محتوى أفضل يصلح للعرض على الويب

• ضع المحتوى المرتبط بهدف وفكرة موقعك فقط!
• ضع خلاصة كل فقرة من فقرات المحتوى في أول جمله منها.
• كل فقرة أجعلها تدور حول فكرة واحدة واضحة وجيدة الصياغة.
• استخدام أفعال تحث القاريء على القيام بمهمة محددة لتطبيق الفكرة! مثال: اقرأ كل محتوى الموقع كلمة كلمة.
• اختصر واختصر ثم اختصر محتوى الموقع قدر الإمكان، فزائر الويب لا يحب القراءة، فلا تضع غير المحتوى المهم فقط.
• قسم الكتل النصية الكبيرة إلى فقرات وضع لها عناوين موجزة ومختصرة تصف كل فقرة.
• حول الفقرات إلى نقاط Lists، فهى أسهل واسرع في القراءة.
• اختصر في الجمل، اجعل كل جملة لا تزيد عن ١٤٠ حرف، مثل تغريدات موقع تويتر.

بعض روابط لمقالات تساعدك على الإلمام بالأخطاء اللغوية الشائعة، وعلامات الترقيم

• أخطاء شائعة في اللغة وتركيب الجملة.
• ديوان العرب، أخطاء لغوية شائعة.
• تعرف على علامات الترقيم.

5- اختبار عمل الروابط الخارجية والداخلية

اختبركل رابط تضعه في الموقع، وبخاصة روابط الصفحات الخارجية عن موقعك، في بعض الأحيان قد تنسى كتابة “http://” فيجعل الرابط معطوب، لا تتوقع أن يكون كل زوار موقعك على نفس مستوى الخبرة التي تمتلك فسيضيفون تلك الحروف المنسية، كما لا تفترض أن زائر الموقع سيصحح الأخطاء التى يجدها بالموقع، عزيزى كل هذه أوهام، لا تنسى أن أبعد منافسيك هو على بعد بضعة نقرات بالماوس! كما أن المستخدم سيصل لما يريد سواء كان هذا المحتوى بموقعك أو موقع آخر.

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

1. Link، رابط لم يفتحه المستخدم بعد / لم ينقر عليه المستخدم بعد.
2. Alink، رابط يزوره المستخدم.
3. Vlink، رابط تم زيارته / نقر عليه المستخدم.

أداة مساعدة

أداة W3C Link Checker، تساعدك في التحقق من الروابط الموجودة في موقعك.

 6- اختبار عمل وظائف الموقع

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

أداة مساعدة

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

7- اختبر رشاقة الموقع!

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

8- تحقق من معيارية الموقع/ مطابقة الموقع للمعاير القياسية العالمية

نعم، اعلم انه لن يموت موقعك لو كان غير مطابق للمعايير القياسية لـ W3C ولكن من الأفضل ان تقوم بذلك، من الممكن أن تجد بعض الأخطاء السهلة التصحيح، أو ربما تكون نسيت اضافة بعض الوسوم الهامة والتي توفر تجربة أفضل للمستخدم مثل الوسم Alt، اجعل كود الموقع نظيفاً ومطابق للمعيارية قدر المستطاع.

أداة مساعدة

استخدم اداة W3C Validator للتحقق من معيارية موقعك

9- اضافة خدمة تلقيمات/خلاصات الموقع RSS

لو كان موقعك عبارة عن مدونة أو موقعاً إخبارياً، وفر للمستخدمين خدمة RSS لخلاصات الموقع وجديد ما يعرض به، إستخدم خدمة Feed Burner لتولد لك رابط لخلاصات المدونة أو الموقع، مع إحصائيات عن المستخدمين المشتركين بالموقع أولاً بأول.

10- تنصيب خدمة لمعرفة إحصائيات الموقع Analytics

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

بعض الأدوات التي تقدم احصائيات للمواقع بشكل مجاني:-

• Google Analytics
• Mint
• Get Clicky
• Stat Counter

11- خريطة الموقع SiteMap

اضافة صفحة sitemap.xml تساعد محركات البحث في أرشفة الموقع بشكل صحيح، فمن المفترض أن يحتوي هذا الملف على محتوى الموقع بشكل كامل.

أدوات تساعدك في عمل صفحة خريطة الموقع SiteMap

• Xml Sitemaps، موقع يساعدك في عمل ملف خريطة لموقعك.
• Google Xml Sitemaps Generator، إضافة للوردبريس تولد ملف خريطة للمدونة، والتي تحدث ملف خريطة الموقع دورياً عند إضافتك لمقالة جديدة، بعد توليد هذا الملف ارفعه على Google WebMaster Tool، لتخبر جوجل أن موقعك يمتلك ملف SiteMap.

12- التصميم لأخطاء المستخدمين/ التصميم الوقائي Defensive Design

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

• صفحة الخطأ 404
• تنويهات الموقع في حالات خطأ المستخدم في مليء حقل ضروري في التسجيل مثلاً.

أمثلة لتلهمك لتصميم صفحة  404 Error Page:-

• أجمل صفحات الخطأ 404 في المواقع العربية
• 404 Error Pages: Reloaded
•  Best 404 Pages Designs gallery

 13- اختبر سرعة الموقع 

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

نعلم أهمية الوقت بالنسبة إليك، لذا عندما تريد الحصول على إجابات عبر الويب، فإنك تريدها بشكل فوري -وهذا ما نسعى لتحقيقه. -فلسفة جوجل

نصائح لتقليل حجم الموقع

• قلل حجم الصور المعروضة في الموقع قدر الإمكان، إستخدم أداة ياهوو Smush.it
• اضغط حجم ملفات ال CSS، استخدم CSS Compressor
• اضغط حجم ملفات ال Java Script، استخدم JavaScript Optimizer
• 17 خدمة مجانية لضغط وتصحيح ملفات CSS

14- خذ نسخة إحتياطية من الموقع

هل قمت بكل الخطوات السابقة، الآن حان موعد أخذ نسخة احتياطية للموقع، جدول طريقة لآخذ نسخة إحتياطية من الموقع بشكل دوري، إذا كنت تستخدم الووردبريس استخدم BackWPup فهي تجدول عملية نسخ دورية للمدونة كما يمكنك ربط حسابك على Dropbox ليحفظ النسخة دورياً عليه.

15- صمم استايل CSS مخصص لطباعة صفحات الموقع

بعض المستخدمين ربما يرغبون في قراءة محتوى الموقع بالطريقة الكلاسيكية، على ورق مطبوع، عندما يقومون بطباعة صفحة الموقع فإنه سيُطبع بكل محتواه من هيدر وفوتر واعلانات … إلخ، كل هذا لا يريده المستخدم فهو يريد المحتوى فقط، لذا وفر استايل سي اس اس مخصص للطباعة Print CSS Style بحيث يطبع المحتوى بشكل مناسب للقراءة.

أدوات مساعدة

• طرق تطويع موقعك للطباعة.
• Print.CSS موقع يساعدك في تنفيذ استايل سي اس اس مخصص لطباعة محتوى موقعك بشكل صحيح.

المراجع

• The Ultimate Website Launch CheckList
• Quick Usability Checklist
• Essential Checks Before Launching Your Website

هل تعتقد ان هناك خطوات أخرى ضرورية قبل إطلاق الموقع؟