#أ_ب_تسويق_رقمي: (3) الموقع الخاص بشركتك "Your Website"

  #أ_ب_تسويق_رقمي: (3) الموقع الخاص بشركتك "Your Website"

 

لو قعدت أحكي من هنا للصبح عن أهمية إن يكون لشركتك موقع على الإنترنت مش هأخلص، حتى لو كان صفحة واحدة "Single-Page Website"، آه والله زيمبئولك كدة! xD ... كتير من الناس للأسف مش عارفين قيمة إن يبقى ليهم موقع على الانترنت، وأنا شخصيا عشت تجربة أكدت لي المعنى ده جداً، كانت باختصار إني حاولت أقنع واحد من ال Brands اللي كنت شغال عليها أكتر من 4 شهور بأهمية إنه يكون عندهم موقع، وهما مصممين إن الفيسبوك كفاية (مش كل السوشيال ميديا كمان :\)، وأنا أقولهم يا إخوانا طيب الناس اللي هتيجي من السوشيال ميديا دول أوديهم فين؟! -_- وطبعا هما مش فاهمين، لحاد لما عدا 6 شهور وللأسف مفيش ولا Lead جه من الفيسبوك ( على الرغم من إننا حققنا نجاح كبير ع الفيسبوك يكفي إن الصفحة بقت من أحسن 500 صفحة في مصر على موقع Social Baker من ناحية ال Engagement، بفضل الله تعالى ^_^ ) بس الحمد لله حاليا الشركة بقى ليها موقع مميز جدا وعليه تفاعل كويس جدا، ما شاء الله :) ...


إيه اللي يخللي الموقع بتاع شركتي مميز؟
تقدر تعتبر الموقع اللي إنت هتعمله لشركتك على الإنترنت ده كإنه مبنى الشركة بتاعتك نفسه بس أونلاين ;) ... وعشان تقول إن الويب سايت ده متميز وممكن يحقق النجاح المطلوب منه لازم يتوفر فيه الخصائص دي:
  • Credibility: لو إنت مش هتقدم في الموقع بتاعك معلومة موثوق منها، طيب منتظر إن الناس ترجع تزور موقعك تاني؟، وطبعا تقدر تبني مصداقية كويسة من خلال المحتوى اللي بتقدمه على موقعك، وده ليه موضوع كامل معانا
  • Usability: أي حد هيستخدم الويب سايت بتاعك معاه أقل من 5 ثوان يحدد فيها إذا كان هيكمل ولا لأ ... المفروض إنك تخليه يقعد أطول فترة في موقعك من خلال ال Design الحلو وال Navigation السهل وأكيد برده المحتوى المميز
  • Visibility / Searchability / Discoverability: لو موقعك تصميمه تحفة واستخدامه سهل جدا وبيوصل المعلومة بكل سلاسة، بس لو محدش سمع عنه لو مش بيظهر في محركات البحث "Search Engines" لو مش ظاهر على مواقع التواصل الاجتماعي، يبقى كل اللي بتعمله فيه ملهوش أي لازمة ... وإن شاء الله إحنا من خلال السلسلة دي هنعرف إزاي ممكن نحقق الهدف ده :)
  • Sellability: لازم الويب سايت بتاعك تقدر تبيع منه، ومش لازم تبيع منتج، ممكن تبيع منه خدمة أو حتى فكرة
  • Scalability: أكيد لازم يبقى موقعك قابل لإنه يكبر، زي ما انت حابب شركتك اللي على أرض الواقع تكبر، مش كدة ولا إيه؟ ;) ... يعني كمثال لو عندنا موقع e-Commerce ممكن يكون بيبيع حاليا منتج بعينه، لازم يبقى في قابلية للتوسع فيما بعد في منتجات تانية، وهكذا
إزاي طيب يبقى عندي موقع لشركتي؟ وإيه التقنيات اللي محتاجها؟ :)
عشان يبقى عندك ويب سايت إنت محتاج تعدي على 3 مراحل:
  • Planning: اللي قبلنا قالوا: "If you fail to plan, you plan to fail" ... وده معناه إن لو معاليك مش مخطط من البداية للموقع بتاعك يبقى إزاي منتظر إنه يحقق نجاح؟! ... ويمكن أهم حاجات لازم تاخد لبالك منها وانت بتخطط لموقك هي:
    • SiteMap / Site Hierarchy*: ودي اللي بنوضح فيها كل صفحات الموقع بتاعنا وإزاي هنوصل لصفحة بعينها فيه، ويمكن أهم صفحات لازم تكون موجودة في موقع أي شركة هي: Home - About Us - Services / Products - Portfolio - Contact Us (*لمعلوماتك، اللي مسئول عن الموضوع ده هو "Information Architect")
    • Site Wire-framing*: بمجرد ما تعرف الصفحات، هتبدأ تخطط لشكل الصفحات بتاعتك أو ال Layout بتاعها وده بيكون من خلال إنك تعمل Wire-Framing لكل صفحة على حدة تحدد فيها المكونات بتاعة الصفحة وأماكنها بالتحديد، وممكن تعمل كل ده باستخدام Tools زي Adobe FireWorks أو حتى تشخبطها على ورقة، المهم بس إنك لازم تعملها :D (*لمعلوماتك، اللي مسئول عن الموضوع ده هو UX Designer)
    • Site Components: الموقع بتاعك لازم يكون في مكونات كتير، يمكن أهمها إن يكون في إضافة لل Widgets بتاعة مواقع التواصل الاجتماعي، ويكون برده مربوط بال Blog بتاعتك (هنتعرف عليها بعدين)، ويكون فيه برده وسيلة للتواصل مع الجمهور بتاعك سواء من خلال الاشتراك في خدمة الرسائل "NewsLetters" وكمان Comment Plugins زي بتاعة الفيسبوك أو Disqus أو غيرهم، وهكذا :)
    • Selecting Domain Name: لازم تكون حريص جدا وإنت بتختار اسم الموقع بتاعك أو اللي بيسموه "Domain Name" ودي ليها تفاصيل كتيرة هنرجع لها بعدين في ال SEO إن شاء الله، بس خليك حريص إن الاسم اللي هتختاره يكون: سهل وممكن الناس تفتكره - بيوصف موقعك صح - اسم مميز خاص بشركتك (كمثال www.youm7.com)
    • Choosing Web Hosting: بعد ما اخترت اسم الموقع، هتحاول بقى دلوقتي تدور على شركة تقدم لك خدمة إنك ترفع الموقع بتاعك عندهم، ودول بيسموهم شركات خدمات استضافة المواقع "Web Hosting"... ويمكن أنا في مصر هنا اتعاملت مع شركتين كويسين كنت باحجز عندهم مساحة للموقع وكمان ال Domain بتاعي هما: NileWeb, NileYouth
    • Plan for a Browser / Device Compatibility: لازم تبقى عارف إن اللي هيزوروا موقعك النسبة الأكبر منهم جايين من ال Mobile Devices وبالتالي لازم يكون تصميم موقعك يناسب كل الأجهزة وكل الشاشات وده بيسموه "Responsive Design"، فتبقى عارف إيه التقنيات والأدوات اللي هتحتاجها من قبل ما تشتغل ;)
Site Map

Site Wireframing
  • Designing*: زي ما بيقولوا: "الإنطباع الأول يدوم"، وأول إنطباع هياخده اللي هيزور موقعك هو "شكله / تصميمه"، من الآخر لو الموقع ما شدوش شكله وتصميمه مش هيتردد أبداً إنه يسيبه، وإحنا مش عاوزين ده يحصل :) ... وبالتالي لازم تعتني جدا بتصميم الموقع بتاعك وشكله، ولازم تبقى متابع لآخر ال Trends الموجودة في السوق (زي مثلا فكرة ال Parallex Scrolling وال Floating وهكذا) ... (*لمعلوماتك، اللي مسئول عن الموضوع ده هو UI / Web Designer) ... تعالوا ناخد فكرة إجمالية عن التقنيات الأساسية اللي هتحتاجها لتصميم موقعك، ونبقى نسرد لهم كلام بالتفصيل بعدين إن شاء الله:
    • HTML: دي هي التقنية الأساسية اللي هتحتاجها عشان تبني بيها صفحات الموقع بتاعك، وهي عبارة عن لغة بتوصف شكل الموقع بتاعك للمتصفح "Browser" بيسموها "descriptive language" وهي اختصار لكلمة "Hyper Text Markup Language"، وآخر إصدارة منها هي HTML5
    • CSS: دلوقتي إنت عملت الويب سايت، لكن لسة شكله مش حلو زي ما انت عاوز ... هنا يجي دور ال CSS وهي برده لغة بتوصف للمتصفح الطريقة اللي يظهر بيها محتويات الموقع بتاعك، وهي اختصار لكلمة "Cascading Style Sheets" وآخر إصدارة منها هي CSS3
    • JavaScript / jQuery: دي لغة برمجة بتساعدك إنك تزود وظايف "Functions" لزوار الموقع بتاعك، وعشان كدة بيسموها "Client-Side Scripting" لإن البرمجة بتحصل عند جهاز الزائر نفسه (اللي هو في حالتنا اسمه العميل "Client") ... وكمثال لتوضيح العملية دي هو ال Verification اللي بيحصل لما تدخل قيمة غلط مثلا في الفورم اللي بتملاها وانت بتسجل ع الموقع ;)
    • Platform "CMS": نتخيل إنك مش عاوز تبني موقعك من البداية "From Scratch" لإن إنت ما عندكش الخلفية الكافية عن التقنيات دي، هنا يجي دور ال CMS أو ال "Content Management Systems" إختيار إنك تعتمد في بناء موقعك على Platforms جاهزة بيكون مناسب في بعض الأحيان في حالة إنك مش عارف تبني موقع أو معندكش الوقت أو الفلوس اللي هتجيب بيها Web Designer يعمل لك الموقع بتاعك :)
    • Editors: في Tools بتسهل على الواحد إنه يعمل الويب سايت بتاعه حتى لو معندوش خبرة كبيرة في كتابة الكود، ويمكن من أشهرهم برنامج Adobe Dreamweaver
  • Developing*: أكيد إنت حابب إن الموقع بتاعك يكون في فرصة لتفاعل زواره معاك، واللي إحنا عملناه لحد دلوقتي ممكن يكون مجرد موقع صامت "Static" مفيهوش أي تفاعل ... وعشان نخلليه تفاعلي "Dynamic" هنحتاج نضيف ال Functionality للمكونات بتاعته وده بيكون من خلال البرمجة "Programming" ... (*لمعلوماتك، اللي مسئول عن الموضوع ده هو Web Developer) ... ويمكن أهم تقنيات محتاج تعرفها هنا هي:
    • PHP: ودي لغة برمجة خاصة ببرمجة الأجهزة اللي هيكون عليها الموقع بتاعك واللي بيسموها الخوادم "Servers" وعشان كدة دايما بيسموها "Server-Side Scripting"... وبالمناسبة هي إختصار لكلمة "HyperText Pre-Processor"
    • MySQL: ودي تقنية مفيدة جدا لتخزين بيانات الزوار في قواعد بيانات "databases"
    • Frameworks: دي مجموعة أدوات ومكتبات أكواد "libraries" بيوفروا للمبرمج بيئة متكاملة بتساعده على إنه ينجز شغله بسهلة، ويمكن من أشهرهم حاليا laravel

طيب وبالنسبة لل Mobile، مش محتاجين حاجة ليه؟
لما تعرف إن نسبة كبيرة جدا من الناس بيستخدموا الموبايلات بتاعتهم عشان يدخلوا بيها على الإنترنت، أكيد ده يشجعك إن يكون لشركتك تواجد برده على الأجهزة دي، وهنا قدامك حل من إتنين:
  • Mobile Website: وهنا هنحاول نعدل في ال Design بتاع نفس الويب سايت عشان يتناسب مع حجم شاشات الموبايل، اللي هي فكرة ال Responsive Design اللي اتكلمنا عنها قبل كدة، ويمكن أفضل Technique تقدر تعمل بيه الحكاية دي دلوقتي هو ال Bootstarp بتاع Twitter.
  • Mobile Application: وفي الحالة دي إنت بتعمل تطبيق "Application" كامل من أول وجديد على نظام تشغيل للموبايل بعينه (سواء كان Android / iOS) ... وأنا أفضل الاختيار ده بصراحة إذا كان في إمكانية إنك تجيب Mobile Developer يعمل لك ال App ده، لإنه باختصار شديد لما تعمل App على نظام تشغيل بعينه ده هيبقى متوافق معاه تماما "Compatible" على عكس الموبايل ويب سايت اللي محتاج تخللي ال Design بتاعه Responsive ... وخد لبالك هنا لازم يبقى في تكامل "Integration" بين ال App وال Website، وكمثال عليها مثلا شوف ال App بتاع Google+ على الموبايل ومدى تكامله مع الويب سايت :)
Responsive Design

هنا شرح فيديو للدرس: http://youtu.be/W8gpUuxKMaU


الحمد لله خلصت!! xD ... باعتذر عن الإطالة المرة دي بس الموضوع فعلا ممتع، وفيه تفاصيل كتيرة هنرجع لها بعدين ما تقلقوش ;) ... بكدة نبقى أخدنا فكرة عامة عن أهم Channel عندك وهي الويب سايت بتاع شركتك، وخليك فاكر إن كل ال Channels الباقية لازم ترمي ع الموقع بتاعك، وإلا هيحصل لك زي ما حصل معايا فوق :D ... استونا الدرس الجاي عشان تعرفوا أكتر عن إزاي تعملوا محتوى مميز على موقعك وعلى باقي ال Channels، إوعى تغير المحطة ;)

تعليقات