طراحی ریسپانسیو ( Responsive ) از ایده تا اجرا !

با شنیدن نام ریپسپانسیو ( responsive ) یا واکنش گرا این تصویر برای ما تداعی میشود که وب سایتی که واکنش‌گراست از طریق موبایل و سایر دیوایس‌ها در دسترس است، ولی واقعا چند درصد از این وب سایتهای ریسپانسیو قابل استفاده هستند؟!

یکی از مشکلات عمده اشخاصی که در حوزه UI/UX و فرانت‌اند کار می‌کنند پیاده سازی وبسایتی ریسپانسیو و کارا مطابق نظر مشتری یا صاحب پروژه است که با وجود عدم آشنایی با این مفهوم قصد دارد همه موارد داخل وبسایت که از طریق دسکتاپ قابل دسترس است روی موبایل و تبلت هم وجود داشته باشد!

قبلا در مقاله نوشته بودم که همیشه حق با مشتری نیست!

نکته : پروژه‌ای که ما برای کارفرما پیاده‌سازی می‌کنیم قطعا باید مورد پسند کارفرما باشد ولی این به این معنا نیست که هر چیزی که کارفرما درخواست داشت درست است، باید این اعتماد را ایجاد کنیم که کاری که انجام می‌شود بر اساس تجربه و دانشی است که در نهایت به نفع کارفرما تمام می‌شود و رابطه‌ی کاری برد-برد را مدنظر داریم در واقع این هنر توسعه دهنده است که چطور کارفرما را قانع کند.

پرسش و پاسخ برای درک یک واقعیت!

بیایید با طرح دو سوال به سبکی بهتر به موضوع بپردازیم :

  • چرا هنگام چک کردن و یا انتقال وجه از حساب بانکی خود از  وب‌سایت اصلی بانک موردنظر استفاده نمی کنید؟
  • چرا اپلیکیشن بانک مورد نظر را دانلود و از آن برای بررسی موجودی و …. استفاده می‌کنید؟

پاسخ ۱ : به این‌خاطر که فقط اطلاعات کاربردی و موردنیاز نمایش داده میشود و کار کردن با آن بسیار راحتتر از وب سایت برروی موبایل است.

پاسخ ۲ : به این خاطر که وب‌سایت فونت ریزی داره و اطلاعات اضافی زیادی وجود دارد.

پاسخ ۳ : سرعت بارگذاری پایین است، امکان انتخاب منو‌ها و آیتم‌ها سخت است و….

در واقع در نسخه ریسپانسیو فقط و فقط اطلاعاتی که موردنیاز کاربر است بر اساس نیاز نه سلیقه شخصی به نمایش بذاریم.

لازم است تاکید کنم هر پروژه ای بر اساس ماهیتی که دارد سبک اجرای آن متفاوت است، برای مثال وقتی پروژه مورد نظر ما یک وبلاگ است که درآمد این وبلاگ از تبلیغ هایی است که قرار می‌دهد قطعا ساختار طرح ریسپانسیو آن متفاوت خواهد بود با پروژه‌‌های دیگر.

یک سوال که اینجا مطرح می‌شود این است که این نیاز کاربران را از کجا تشخیص دهیم؟

 

مهمترین و بهترین راه تشخیص این نیاز آنالیز و تحلیل است. آنالیز و تحلیل رفتار کاربران روی وب‌سایت به ما این کمک را میکند که تشخیص بدهیم کاربر کجا را می‌بیند، کجا کلیک می‌کند و چگونه بین صفحات تعامل دارد.

در واقع ما وب‌سایت و پروژه را باید برای مشتری طراحی کنیم نه کارفرما! چونکه مشتری کارفرما رو به هدفی که می‌خواهد می‌رساند که این هدف می‌تواند پول و درآمد بیشتر باشد.

برای مثال یکی از دوستان من که در یکی از شرکت‌های بزرگ فروشگاهی فعالیت داشت، اظهار داشت که فروش محصولات فروشگاهی نسبت به بازدید صفحات محصول کمتر از مقدار مورد انتظار بود. بعد از تحلیل و بررسی رفتار کاربران و تغییر رنگ دکمه خرید و مکان دکمه خرید فروش محصولات را به میزان ۲۰ درصد افزایش دادند و این یعنی موفقیت در پروژه.

در نهایت لازم است تاکید کنم راه تشخیص اینکه کدام مورد بهتر و بهینه‌تر است تست و تحلیل نتایج است، یکی از راههایی که خیلی میتواند کمک کند A/B Testing است که مثلا به صورت رندم برای برخی کاربران استایل به یک سبکی نمایش داده شود و نتایج بررسی شود. این مورد مخصوصا در ایمیل مارکتینگ بسیار کاربردی و تاثیرگذار است که با استفاده از ابزارهایی همچون میل چیمپ و میلرلایت و … میتوان این موارد را تست کرد.

معرفی ابزارهایی برای آنالیز و تحلیل وب‌سایت و رفتار کاربران :

شما می‌توانید از ابزارهایی که وب‌سایت‌های زیر ارائه می‌دهند استفاده نمائید تا روند بهبود و رشد وب‌سایت خود را فرآهم کنید.

۱. گوگل آنالیتیک –  Google Analytics

۲. هات‌جار – Hotjar

۳. کریزی اِگ – Crazy Egg

در صورت تمایل می‌توانید کلمه Heat Map را در گوگل جستجو نمائید تا در رابطه با این موارد بیشتر مطالعه کنید.

 

نمایش لیستی از مکان‌‌ها بر روی نقشه و نمایش اطلاعات آنها

توی یکی از کارهایی که انجام می‌دادم نیاز شد که لیستی از مکانهای انتخابی ادمین سایت را روی نقشه نمایش دهم ( نمایش لیست مکان‌ها بر روی گوگل مپ ) به طوری که اگر کاربر روی یکی از اون موارد کلیک کرد اطلاعاتی از ان مکان را نمایش دهد از طرف دیگر لیستی از اون مکانها علاوه بر اینکه باید روی نقشه باشد باید در کنار نقشه نمایش داده شود :/

قبلا در رابطه با سفارشی کردن نقشه گوگل مپ مطلبی نوشته بودم که اگر فقط به این مورد نیاز دارید اون مطلب رو مطالعه کنید کافیه، ولی اگر مواردی که بالاتر اشاره کردم براتون جذابه ادامه مطلب رو بخونید 🙂

با استفاده از گوگل عزیز گشت و گذاری داشتم و مطالب زیادی رو پیدا کردم که کاربران نمونه کدها رو توی JSFiddle گذاشته بودند :

همه این موارد کاربرد خودشون رو دارند و از مورد اول میشه برای چیزی که مد نظر دارم استفاده کنم، اما پلاگینی نظرم رو به خودش جلب کرد که ترجیح دادم از اون استفاده کنم.

پلاگین MAPBOX :

MAPBOX Plugin

Mapbox is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create.

We’re changing the way people move around cities and explore our world. Through the apps Mapbox powers, we reach more than 300 million people each month.

برای استفاده از این نقشه ابتدا باید توی وبسایت ثبت نام کنید و بعد Accrss Token  رو دریافت کنید تا بتونید توی پروژه از آن استفاده کنید.

ویژگی فوق العاده ای که داره می‌تونیم نقشه رو برای پروژه روی دیوایس‌های مختلف هم اینتگریت کنیم :

mapbox

قابلیت جالبی که داره می‌توانیم نقشه موردنظرمون رو به سبکی که دوست داریم دیزاین کنیم و کافیه توی کدها مسیر دیزاین مورد نظر را قرار دهیم تا از این دیزاین استفاده کنه.

design mapbox

همچنین میتوانید آمار بازدید نقشه‌هایی که ایجاد می‌کنید را مشاهده کنید.

mapbox statistics

استفاده از MapBox :

برای استفاده از این پلاگین مطابق مراحل این لینک پیش برید.

پس از قرار دادن کدهای کتابخانه mapbox از طریق کد زیر در صفحه پروژه میتونید نقشه mapbox رو فعال کنید.

mapboxgl.accessToken = 'کد توکن را اینجا قرار دهید.';
// This adds the map to your page
var map = new mapboxgl.Map({
  // container id specified in the HTML
  container: 'map',
  // style URL
  style: 'mapbox://styles/mapbox/light-v9',
  // initial position in [lon, lat] format
  center: [-77.034084, 38.909671],
  // initial zoom
  zoom: 14
});

نمایش لیست مکان‌ها :

برای نمایش لیست مکان‌ها به یک لیست با فرمت JSON نیاز داریم که داخل متغیری قرار گیرد تا این مقادیر را توی لایه قرار دهیم که روی نقشه قرار گیرند.

متغیری به نام stores تعریف میکنیم و لیست داده ها را داخل آن قرار میدهیم. ساختار آن به صورت تصویر زیر است که داخل لینکی که بالاتر قراردادم میتوانید لیست این داده ها را دانلود کنید و تست کنید.

JSON data list

بعد از تعریف متغیر و قرار دادن اطلاعات مکان‌ها با استفاده از کد زیر آنها را روی نقشه نمایش می‌دهیم.

map.on('load', function(e) {
  // Add the data to your map as a layer
  map.addLayer({
    id: 'locations',
    type: 'symbol',
    // Add a GeoJSON source containing place coordinates and information.
    source: {
      type: 'geojson',
      data: stores
    },
    layout: {
      'icon-image': 'restaurant-15',
      'icon-allow-overlap': true,
    }
  });
});

در صورتیکه تا اینجا قدم به قدم انجام داده باشید همچین دمویی دارید. دمو اولیه نقشه

first demo mapbox

قرار دادن لیست مکان‌ها در کنار نقشه :

در سایدبار کناری تگی با آی‌دی موردنظرمون ( listings ) قرار میدهیم. یعنی ساختار کدهای من تا به اینجای کار به صورت زیر است :

structure html code mapbox

تابع جاوااسکریپت زیر برای ایجاد لیست مکان‌ها را به کدهای اسکریپتی که نوشتیم اضافه میکنیم.

function buildLocationList(data) {
  // Iterate through the list of stores
  for (i = 0; i < data.features.length; i++) {
    var currentFeature = data.features[i];
    // Shorten data.feature.properties to just `prop` so we're not
    // writing this long form over and over again.
    var prop = currentFeature.properties;
    // Select the listing container in the HTML and append a div
    // with the class 'item' for each store
    var listings = document.getElementById('listings');
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = 'listing-' + i;

    // Create a new link with the class 'title' for each store
    // and fill it with the store address
    var link = listing.appendChild(document.createElement('a'));
    link.href = '#';
    link.className = 'title';
    link.dataPosition = i;
    link.innerHTML = prop.address;

    // Create a new div with the class 'details' for each store
    // and fill it with the city and phone number
    var details = listing.appendChild(document.createElement('div'));
    details.innerHTML = prop.city;
    if (prop.phone) {
      details.innerHTML += ' · ' + prop.phoneFormatted;
    }
  }
}

در واقع این فانکشن یک مقداری دریافت میکنه و با توجه به اون مقدار لیستی ایجاد میکنه و به تگ لیست ما اضافه میکنه. اگر متغیر stores رو یادتون باشه که داده‌ها رو به صورت JSON ذخیره کرده بود را باید به این فانکشن پاس بدیم. کافیه در کدهایی که ما لایه را ایجاد کردیم ( addLayer ) بعد از آن فانکشن را فراخوانی و مقدار sores را بهش پاس بدیم.

buildLocationList(stores);

تا به اینجای کار میتوانید دموی مورد نظرتون رو مشاهده کنید.

third demo mapbox - display list locations

نقشه را جذابتر و قابل تعاملتر کنیم!

کاری که میخواهیم انجام دهیم به این صورت است که وقتی بر روی لیست کناری نقشه کلیک شد، نقشه آن مکان را با فوکوس روی آن نمایش دهد.

دو تابع برای قابل تعامل کردن نقشه :

با کلیک کاربر بر روی لیست کنار نقشه ابتدا نقشه به مکان درست هدایت می‌شود و سپس یک پاپ آپ برای نمایش اطلاعات آن مکان نمایش داده می‌شود. هر دو تابع وقتی که کاربر بر روی یکی از مکانها کلیک میکند اجرا می‌شود.

function flyToStore(currentFeature) {
  map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });
}
function createPopUp(currentFeature) {
  var popUps = document.getElementsByClassName('mapboxgl-popup');
  // Check if there is already a popup on the map and if so, remove it
  if (popUps[0]) popUps[0].remove();
  var popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML('<h3>Sweetgreen</h3>' +
'<h4>' + currentFeature.properties.address + '</h4>')
 .addTo(map);
}

میتوانید به پاپ‌آپی که بر روی نقشه نمایش داده می‌شود استایل دهید. بر روی این لینک کلیک کنید تا کدهای آن را مشاهده نمائید.

برای اینکه نقشه به درستی روی مرورگرهای قدیمی نیز کار کنه لازمه کد زیر رو در ابتدای اسکریپت اضافه کنید تا تابع remove() به درستی کار کند.

// This will let you use the .remove() function later on
if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

نکته  :  توابعی که تا اینجا معرفی شدند برای اینکه متغیرهای map, link شناسایی شوند باید داخل تابع buildLocationList که بالاتر این تابع رو اضافه کرده بودیم اضافه شوند.

پس از اینکه توابع فوق را اضافه کردیم باید آنها را فراخوانی کنیم. در دو حالت این فراخوانی ایجاد میشود، در حالت اول وقتی روی لینک سایدبار کلیک میشود و در حالت دوم وقتی روی آیکون رو نقشه کلیک میشود. در هر دوحالت حرکت نقشه و نمایش پاپ‌آپ را خواهیم داشت. پس ‌‌ Event های زیر را به انتهای تابع buildLocationList اضافه میکنیم.

وقتی که روی لینک سایدبار کلیک می‌شود :

// Add an event listener for the links in the sidebar listing
link.addEventListener('click', function(e) {
  // Update the currentFeature to the store associated with the clicked link
  var clickedListing = data.features[this.dataPosition];
  // ۱. Fly to the point associated with the clicked link
  flyToStore(clickedListing);
  // ۲. Close all other popups and display popup for clicked store
  createPopUp(clickedListing);
  // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
  var activeItem = document.getElementsByClassName('active');
  if (activeItem[0]) {
    activeItem[0].classList.remove('active');
  }
  this.parentNode.classList.add('active');
});

وقتی روی آیکون روی نقشه کلیک می‌شود :

// Add an event listener for when a user clicks on the map
map.on('click', function(e) {
  // Query all the rendered points in the view
  var features = map.queryRenderedFeatures(e.point, { layers: ['locations'] });
  if (features.length) {
    var clickedPoint = features[0];
    // ۱. Fly to the point
    flyToStore(clickedPoint);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedPoint);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
      activeItem[0].classList.remove('active');
    }
    // Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
    var selectedFeature = clickedPoint.properties.address;

    for (var i = 0; i < stores.features.length; i++) {
      if (stores.features[i].properties.address === selectedFeature) {
        selectedFeatureIndex = i;
      }
    }
    // Select the correct list item using the found index and add the active class
    var listing = document.getElementById('listing-' + selectedFeatureIndex);
    listing.classList.add('active');
  }
});

نکته  :  addEventListenerی که خود داکیومنت سایت mapbox نوشته بود درست کار نمیکرد و با توجه به اینکه من توی پروژه از jQuery  استفاده کرده بودم به صورت زیر وقتی روی لینک کلیک میشود تابع را فراخوانی میکنم.

$('.item > a').on('click',function(){
                        
    // Update the currentFeature to the store associated with the clicked link
    var clickedListing = data.features[this.dataPosition];
    // ۱. Fly to the point associated with the clicked link
    flyToStore(clickedListing);
    // ۲. Close all other popups and display popup for clicked store
    createPopUp(clickedListing);
    // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
    var activeItem = document.getElementsByClassName('active');
    if (activeItem[0]) {
        activeItem[0].classList.remove('active');
    }
    this.parentNode.classList.add('active');
    
});

سفارش کردن نهایی و تغییر مارکر ( آیکون روی نقشه ) :

تاکنون ما بر اساس استایلهایی که داشتیم و فانکشن‌هایی که معرفی کردیم نقشه را ایجاد کردیم و تمام بخش های آن واضح و روشن است. اکنون برای اینکه ما مارکر سفارشی خود را قرار دهیم. لازم است تغییراتی در کدهای بالا ایجاد کنیم.

اولین مورد باید لایه ای که در ابتدا ساختیم ( map.addLayer ) و مارکر را مشخص کردیم حذف کنیم و کد زیر را جایگزین کنیم.

  // This adds the data to the map
 map.on('load', function (e) {
 // This is where your '.addLayer()' used to be, instead add only the source without styling a layer
 map.addSource("places", {
 "type": "geojson",
 "data": stores
 });
 // Initialize the list
 buildLocationList(stores);
 });

همچنین EventListenerهایی که برای دو فانکشن نوشتیم را حذف میکنیم و با استفاده از آبجکت mapboxgl.Marker() کار را انجام می‌دهیم. داخل کد جدیدی که مینویسیم کلاس marker به آن اختصاص میدهیم پس به کدهای css خود کد زیر را اضافه میکنیم و آدرس مارکر موردنظرمون رو مشخص میکنیم.

.marker {
  border: none;
  cursor: pointer;
  height: 56px;
  width: 56px;
  background-image: url(marker.png);
  background-color: rgba(0, 0, 0, 0);
}

در نهایت کد زیر را اضافه میکنیم  که Event Listner جدید را نیز در آن قرار داده ایم :

  // This is where your interactions with the symbol layer used to be
  // Now you have interactions with DOM markers instead
  stores.features.forEach(function(marker, i) {
      // Create an img element for the marker
      var el = document.createElement('div');
      el.id  = "marker-" + i;
      el.className = 'marker';
      // Add markers to the map at all points
      new mapboxgl.Marker(el, {offset: [0, -23]})
          .setLngLat(marker.geometry.coordinates)
          .addTo(map);

      el.addEventListener('click', function(e){
          // ۱. Fly to the point
          flyToStore(marker);

          // ۲. Close all other popups and display popup for clicked store
          createPopUp(marker);

          // ۳. Highlight listing in sidebar (and remove highlight for all other listings)
          var activeItem = document.getElementsByClassName('active');

          e.stopPropagation();
          if (activeItem[0]) {
              activeItem[0].classList.remove('active');
          }

          var listing = document.getElementById('listing-' + i);
          listing.classList.add('active');
      });

  });

مشاهده دموی نهایی نقشه mapbox.

شما میتوانید آخرین ادیت کدهای اسکریپت فوق ( بخش آخر سفارشی شده ) را دانلود و بررسی کنید.

در نهایت من کدهای بالا را بر اساس نیاز خودم تغییر دادم و به تصویر زیر رسیدم، تغییراتی که ایجاد کردم به این صورت بود که با کلیک بر روی هر کدام از مکان ها علاوه بر نمایش اطلاعات، اطلاعات آن لیست در بالاترین قسمت لیست قرار داده میشود.

custom mapbox demo

شما می‌توانید روی گیت‌هاب من دموی کامل را مشاهده نمائید.

در نهایت لینک‌های زیر را برای استفاده بیشتر و مطالعه پیشنهاد میکنم:

 

ویدئوی آماده سازی ساختار فایلهای یک پروژه

در این ویدئوی آموزشی مقدمات استارت یک پروژه رو توضیح دادم که چگونه از css preprocessor برای توسعه وب سایت استفاده کنیم.

قبلا مقاله ای در این رابطه منتشر کردم : استفاده از css preprocessor برای توسعه وب سایت

فایلهای پروژه رو روی گیت‌هاب به اشتراک گذاشتم که هر سری که پروژه ی جدیدی تعریف میشود طبق این ساختار پروژه را انجام دهم و به مرور این ساختار رو تکمیل تر کنم که پروژه ها با ساختار بهتری توسعه پیدا کنند تا امکان توسعه، راحتتر امکان پذیر باشد.

فایل ها در گیت‌هاب

 

چگونه سیستم مدیریت محتوای (CMS) مناسب را انتخاب کنیم؟

سیستم های مدیریت محتوا (CMS) از زمان به وجود آمدن زبان های برنامه نویسی همچون PHP تبدیل به یکی از قدرتمندترین ابزارهای توسعه وب در اینترنت شده اند.

در بازاری که وب سایتها بایستی سریع تر و آسانتر ساخته شوند، بسیاری از توسعه دهندگان وب در حال روی آوردن به CMSهای منبع باز (open source) هستند تا کار خود را پیش ببرند. متاسفانه، امروزه هزاران CMS در حوزۀ وب وجود دارد و یافتن مورد مناسب به کاری دشوار تبدیل شده است.

در این مقاله به این موضوع خواهیم پرداخت که چگونه می توانید CMS مناسب خود را برای هر پروژه پیدا کنید.

سیستم محتوا CMS چیست؟

سیستم مدیریت محتوا (CMS) یک برنامه تحت وب است که از یک پایگاه داده (معمولاً MySQL) یا روش های دیگر برای ایجاد، ویرایش و ذخیره محتوای HTML به شکلی قابل کنترل استفاده می کند.

محتوا در قسمت مدیریت برنامه تحت وب ایجاد و ویرایش می شود. سپس، محتوای تولید شده بر روی سایت برای مشاهده بازدیدکنندگان قرار می گیرد.

چرا باید از CMS استفاده کرد؟

چند دلیل احتمالی برای استفاده از سیستم مدیریت محتوا وجود دارد، اما دلیل اصلی استفاده از CMS این است که ایجاد و ویرایش محتوا ساده و آسان شود. توسعه دهندگان اغلب فراموش می کنند که این هدف اصلی CMS است و در جستجو برای قابلیت های بیشتر و بیشتر، باعث زمین گیر شدن خود یا مشتریان ‌شان می شوند.

محتوا فقط شامل متن نمی شود. گاهی اوقات، محتوایی که شما در یک سایت نیاز دارید ممکن است فرم تماس یا سیستم احراز هویت کاربر باشد. هنر این است که یک CMS در عین داشتن قابلیت، استفاده از آن برای شما یا مشتریانتان آسان باشد. یک CMS خوب به شما امکان می دهد که زمان بیشتری را برای طراحی ظاهر وب سایت و سپس پیاده سازی برنامه های افزودنی (extensions و یا plugin ) یا قابلیت ها اختصاص دهید.

اشتباهات رایج در انتخاب سیستم های مدیریت محتوا

اشتباه اول : انتخاب یک CMS برای افراد ناشی

قبل از هر چیز، توسعه دهندگانی که برای مشتریان خود، وب سایت می سازند باید به خاطر داشته باشند که همه افراد به اندازه شما در زمینه تکنولوژی تخصص ندارند. حتی اگر یک CMS پیدا کرده اید که دوستش دارید و به خوبی جواب می دهد، این مسئله تنها در صورتی اهمیت دارد که سایت را برای خودتان طراحی کنید.

مهم ترین ویژگی در وب سایت آن است که ببینید آیا مشتری می‌تواند همانطور که انتظار دارد از سایت استفاده کند. بنابراین، در دراز مدت، اگر یک CMS با واسط مدیریتی (admin interface) ساده  انتخاب کنید و حتی اگر مجبور باشید آن را برای تطابق با نیازهای مشتری شخصی سازی کنید، برای سلامتی خودتان بهتر خواهد بود.

اشتباه دوم : کامیونیتی و ارتباطات هرچه بزرگتر، بهتر!

مراقب CMS هایی باشید (خواه متن باز و خواه غیره) که تعداد زیاد کاربرانشان را دلیلی برای ترغیب شما به استفاده از سیستم خود می دانند. فریب وعده وجود یک جامعه کاربری بزرگ و کمک کننده و برنامه های افزودنی یا افزونه های زیبا را نخورید. این یک تله است!

اینکه تعداد زیادی از افراد از یک CMS استفاده می کنند دلیلی بر خوب بودن آن نیست. انتخاب یک CMS صرفاً به خاطر سیل عظیم کاربرانش، یک اشتباه خیلی بزرگ است. برای مثال سیل عظیمی از کاربران از ووکامرس وردپرس برای فروشگاه استفاده میکنند آیا انتخاب این فروشگاه ساز، برای هر نوع فروشگاهی، واقعا کار درستی است؟

دلیل دیگری که افراد اینگونه CMS ها را انتخاب می کنند این است که می بینند جامعۀ عظیمی از توسعه دهندگان یا حجم بزرگی پول در پشت یک برنامه تحت وب قرار دارد.

 اشتباه سوم : راه رفتن با یک کوتوله!

همواره مطمئن شوید که CMS انتخابی شما برنامه های افزودنی و قابلیت های مورد نیازتان را داراست. بسیاری از اوقات، ممکن است به یک CMS امیدوارکننده برخورد کنید اما تا موقعی که مطمئن نشده اید قابلیت های مورد نیازتان را دارد بر روی آن سرمایه گذاری نکنید. متاسفانه برخی از بهترین CMSهای موجود هنوز در حال توسعه هستند.

اشتباه چهارم : تحقیق نکردن

همیشه قبل از انتخاب CMS تحقیق کنید! به سایت هایی که CMS ها را به عنوان مثال معرفی کرده اند سر بزنید. به مدیران آن سایت ها ایمیل بفرستید و در مورد نقاط ضعف و قوت آن CMS از آن ها پرس و جو کنید. با توسعه دهندگان صحبت کنید و ذهن بازی داشته باشید.

با این حال، زمانی فرا می رسد که باید مقداری زمان صرف کنید تا سیستم را تست کرده و یک سایت بسازید. قبل از اینکه قولِ استفاده از این سیستم را به مشتری بدهید، این کار را برای خودتان بکنید. گاهی، برنامه ای افزودنی یا ماژولی را پیدا می کنید که فکر می کنید به خوبی جواب می دهد اما پس از آزمایش آن متوجه می شود که عیب هایی اساسی دارد. گاهی اوقات نیز متوجه می شوید که باید برای داشتن یک ماژول مناسب پول خرج کرده و آن را بخرید.

در یک CMS باید به دنبال چه چیزی بود؟

می توان ویژگی های زیادی را در یک سیستم مدیریت محتوا جستجو کرد. در اینجا برخی از مهم ترینِ آن ها ذکر شده اند

  • نصب سریع و آسان
  • واسط مدیریتی(کاربری) ساده
  • توسعه سریع و آسان قابلیت های اضافی در CMS
  • دستکاری سادۀ قالب
  • جامعه کاربران کمک کننده
  • مستندات مناسب

شاید این برخلاف انتظار باشد، اما شما باید به دنبال یک CMS باشید که بهترین جذابیت طراحی را برای شما دارد. داشتن یک طراحی جذاب یکی از بهترین شاخص هایی است که نشان می دهد واسط کاربرپسند است.

اما همواره به یاد داشته باشید که باید قبل از صرف وقت و انرژی بر روی یک سیستم در مورد آن تحقیق کنید.

توسعه سیستم های مدیریت محتوای منبع باز با سرعتی فزاینده در حال وقوع است. به طور پیوسته، سیستم های تازه ای پا به عرصۀ ظهور می گذارند و بسیاری از این سیستم ها امیدوارکننده به نظر می رسند. غول های دنیای CMS مانند WordPress ، Joomla و Drupal هر روز در حال تغییر و بروزرسانی هستند و با تغییرات زیادی که اعمال می شود روز به روز کاربرپسندتر می شوند.

نتیجه گیری :

همواره به خاطر داشته باشید که قبل از وقت گذاشتن روی یک CMS در مورد آن تحقیق کنید. فراموش نکنید که هدف اصلی یک CMS این است که خلق و ویرایش محتوا را ساده و آسان کند.

هرگز تجربۀ کاربر را فدای قابلیت نکنید. این موارد در بازاریابی اینترنتی از اهمیت ویژه ای برخوردار است. موارد عنوان شده را به خاطر داشته باشید تا تجربۀ بهتری در کار با سیستم های مدیریت محتوا داشته باشید.

پی نوشت :‌

این مقاله را قبلا در وب سایت بیلاود مارکتینگ منتشر کرده بودم.

دیباگ وب سایت روی گوشی موبایل

اگر یک فرانت اند دولوپر حرفه ای باشید، معمولا اولین اولویت یک طراحی خوب برای شما در نظر گرفتن حالت ریسپانسیو بودن آن پروژه ست که روی انواع گوشی های موبایل، تبلت ها و … قابلیت هماهنگی داشته باشه و صرف نظر از اینکه کاربر با چه دیوایسی وارد وب سایت میشه وبسایت قابل استفاده باشه.

چند لینک مفید :

در مورد مفاهیم واکنش گرا بودن وب سایت و اصول آن قبلا مقالاتی را در این زمینه نوشتم که می توانید آنها را مطالعه نمائید :

توصیه هایی برای ایجاد وب سایت های بهینه شده برای گوشی های هوشمند

طراحی سایت واکنش گرا : ۶ نکته برای ارتقای عملکرد

اصول نویگیشن واکنش‌گرا در وب سایت های پیچیده

در این مقاله قصد دارم ابزاری را معرفی کنم که برای خود من بسیار جذاب بود و مشکلات زیادی را برای من حل کرد.

البته لازم است تاکید کنم که این ابزار برای دیباگ نهایی که وب سایت شما روی هاسته و به صورت آنلاین قابل مشاهده است کاربرد داره، در غیر اینصورت من خودم شخصا با Inspector گوگل کروم همه حالتهای واکنش گرایی ( responsive ) وب سایت را انجام میدم.

Google Chrome Inspector Element

دیباگ وبسایت به صورت آنلاین با مرورگر سافاری :

در صورتیکه گوشی آیفون داشته باشید، در قسمت تنظیمات مرورگر سافاری امکانی برای دولوپرها وجود داره به نام Web Inspector که در قسمت Advanced میتوانید آن را فعال نمائید.

پس از فعال کردن آن روی مرورگر لپ تاپ و تنظیمات گوشی موبایلتون، با کابل گوشی خود را به لپ تاپ وصل کنید، در قسمت زیرمنوی تب Develop نام گوشی موبایل شما نمایش داده میشود وقتی ماوس را روی آن قراردهید وبسایتی که در حال حاضر روی گوشی شما باز است را نشان می دهد که با کلیک روی آن ، Inspector باز میشه و با تغییر روی آن میتوانید کلیه قسمت ها را دیباگ کنید و مستقیم روی گوشی شما هم نمایش داده میشه که کمک فوق العاده ای به دولوپرها میکنه.

بعد از وصل کردن گوشی موبایل به لپ تاپ، وب سایتهایی که روی گوشی موبایل باز هستند را میبینیم که یکی از انها را انتخاب میکنیم.

safari developer tools

بعد از انتخاب وب سایت ، اینسپکتور سافاری بر روی لپ تاپ باز میشه که با تغییر بر روی آن میتوان تغییرات را بر روی گوشی موبایل مشاهده کرد.

developer tools iphone

با تغییر ساده بالا، تغییرات را بر روی گوشی موبایل میبینیم :

safari inspector develop tools

نکته : من این امکان را روی لپ تاپ مک و گوشی آیفون چک کردم و نمیدونم برای اندروید در دسترس است یا خیر.

دیباگ وبسایت به صورت آنلاین بر روی گوشی اندروید

برای کسانی که از گوشی اندروید استفاده میکنند خبر خوب این است که موزیلا فایرفاکس همچین امکانی را فرآهم نموده است که می توانید آن را مشاهده نمائید.

Debugging Firefox for Android over USB

شاد باشید.

اشتباهی که شرکت های درحال توسعه B2B انجام می دهند!

طبق تجربه ی شخصی که سالهای قبل با برخی شرکت های تولیدکننده داشتم موضوعی که متوجه شدم بسیار برام جالب بود که اکثرا به خاطر عدم دانش کافی قصد دارند موضوعی را مدیریت کنند که از آن اطلاعی ندارند! این موضوع کمی مبهمه ولی در ادامه کامل موضوع و تجربه شخصی خودم رو توضیح خواهم داد .

طی سالهای گذشته من با چند شرکت تولیدکننده که در حال توسعه بودند همکاری هایی داشتم که این همکاری از پیاده سازی و طراحی وب سایت شرکت شروع شد تا اینکه وارد مسائل مهمتری همچون مارکتینگ، بهینه سازی و تولید محتوای مناسب و … شدیم.

حضور در فضای مجازی نیازمند برنامه ای حساب شده

همانطور که در مطلب قبل توضیح دادم ( همیشه حق با مشتری نیست! ) به این موضوع اشاره کردم که طراحی و پیاده سازی وب سایت در واقع قدم اول و پایه ی یک شرکت محسوب میشه و مهمتر از موضوع پیاده سازی، نحوه مدیریت و ارتباط با کلاینت ها و آنالیز رفتار و واکنش اونها نسبت به محصول و یا سرویس شماست.

قبل از طراحی و پیاده سازی وب سایت مدیرعامل شرکت باید هدف خود از طراحی و راه اندازی وب سایت رو مشخص کنه که در بیشتر اوقات خودشون هدف رو نمیدونن و تنها نکته ای که بیان میکنند حضور در فضای مجازی لازم و ضروریه! اما آیا واقعا شرکت های بزرگی همچون گلرنگ صرفا با حضور در فضای مجازی به هدفشون رسیدند ؟! به طور یقین خیر!

حضور در فضای مجازی وسیله ای است برای تاثیرکذاری بیشتر در راستای بیزینس پلنی که دارند و در واقع میشه گفت درصدی از موضوع موفقیت شرکته.

همه ما میدونیم که واقعا میشه وب سایتهای بسیار زیبایی طراحی کرد و یا فروشگاهی زیبا ساخت و وارد رقابت با سایر شرکتهای فروشگاهی در حوزه آنلاین شد اما وبسایت ما هرچقدر هم زیباتر و کاربرپسندتر باشد وقتی پلنی مناسب نداشته باشیم بدون شک موفق نخواهد بود.

حالا برگردیم به سراغ موضوع اصلی بحث و عملکرد مدیران شرکتهای در حال توسعه ای که B2B  هستند و مستقیم با مشتری در تماس نیستند، جالب اینجاست که من به طور همزمان با چند شرکت در ارتباط بودم که محصولات متفاوتی عرضه میکردند ولی نگرش مدیران شرکت بسیار شبیه بود و این باعث درجا زدن شرکت و عدم پیشرفت مناسب شرکت بود. هر یک از مدیرعاملان در حال گذار از یک فروشنده حرفه ای به یک مدیرعامل بودند و هنوز هم درک نکرده بودند که یک مدیرعامل چه وظایفی میتونه داشته باشه و چقدر میتونه فراتر از یک فروشنده تاثیرگذار باشه و نمیتونستن برخی کارها رو به بقیه و افراد متخصص در اون حوزه واگذار کنند و خودشون نظارت داشته باشند. اونها باور نداشتن که میشه بیشتر از اون چیزی که الان هستند موفقتر باشند و جمله ای که از یکی از مدیران شنیدم این بود که :

ما باید لقمه ای به اندازه دهن خودمون برداریم و توانایی رقابت با شرکت های بزرگ رو نداریم!

خرید سرویس و دریافت خدمات از سایر شرکت ها (outsourcing)

ضرب المثلی هست که میگه :

ما ثروتمند نیستیم که وسائل چینی بخریم!

قضیه به اینجا برمیگرده که متوجه شدم گاهی وقتها برای خرید سرویس هایی که شرکت نیاز داشت و استعلامی که گرفته میشد به خاطر اختلاف قیمتی در حدود یه تومن سرویس ارزان تر رو انتخاب میکردند با وجود اینکه مشخص بود که سرویسی که گرونتره مطمئن تره و تضمینی هم به شرکت داده میشد! ( البته بعد از بررسی به نتیجه رسیدم و همیشه به این صورت نیست )

و در نهایت یکی از بزرگترین مشکلاتی که من دیدم احساسی بودن در تصمیم گیری بود و همچنین حاضر به ریسک برای جهش رو به رشد شرکت نبودند.

نکته ی آخری که میتونم اشاره کنم در قالب یک سواله :

همانطور که در جریان هستید یکی از مهمترین بخش های رشد و پیشرفت یک وبسایت بخش تولید محتوای مناسب برای اون وبسایته، ولی برای شرکتی که فرضا ۳ محصول بیشتر نداره به چه میزان میشه در مورد محصولاتش نوشت تا  وبسایتش ارتقا پیدا کنه؟! ۱۰ مطلب، ۵۰ مطلب، چقدر؟ آیا اصلا امکان تولید همچین محتوایی برای این حجم کم از محصول وجود داره ؟ قطعا جواب منفیه و محدود هستیم.

پس راه اینکه شرکتها بیشتر شناخته بشن و بیشتر روی مصرف کننده تاثیر بذارند چیه ؟!

اینجاست که واجب و ضروریه مدیرعامل به نیروی متخصص باید رو بیاره و بخشی از کار رو واگذار کنه!

expert

پ.ن : مطالبی که نوشتم طبق تجربیاتی بودند که طی سالهای گذشته با برخی شرکت ها داشتم و از دید من این موضوع ها مانع رشدشون بود.

شاد باشید