هر وب سایت باید حداقل یه فراخوان (Call to action) داشته باشه. فراخوان کاریه که مایلید کاربر انجامش بده. اما شما چطور کاربر رو به این کار تشویق می کنید؟ شما چطور یه فراخوان اثرگذار طراحی می کنید؟

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

گاهی می بینم که در مورد اهمیت فراخوان ها صحبت می کنی، اما هیچ وقت توضیح کاملی نمی دی. من به اهمیت فراخوان ها پی بردم، اما چطور باید مخاطب رو به انجامشون تشویق کنم ؟

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

یه فراخوان چند تا دستاورد داره ...

• جلب توجه برای وب سایت شما
• راهی برای اندازه گیری میزان موفقیت شما
• جهت دهی به کاربرانتون

حالا به معرفی 10 تکنیک متعارف برای ساختن یه فراخوان اثرگذار می پردازیم. من توی سایتهای فارسی خیلی گشتم ولی نمونه های مورد نظرم رو پیدا نکردم. برای همین مثال ها رو از سایت های انگلیسی انتخاب کردم.

1. بستر رو مهیا کنید

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

شما باید مزایای پاسخ دادن به درخواستتون رو توضیح بدید. چیزی باعث می شه که کاربر بدون پاسخ دادن به فراخوان از سایت خارج نشه. برای مثال یه نگاهی به وب سایت Skype میندازیم که بالای فراخوان (دکمه دانلود) این متن رو نوشتن :

<span class="ltr">Make calls from your computer — free to other people on Skype and cheap to phones and mobiles around the world.</span>

از کامپیوتر خودتون در سراسر جهان با کسانی که Skype دارن بصورت رایگان و ارزان برای ارتباط با تلفن و موبایل، تماس بگیرید (یه همچین چیزی).

خیلی شفاف توضیح دادن که با دانلود کردن Skype چی نصیب کاربرا می شه.

Skype به وضوح مزایای دانلود نرم افزارشون رو توضیح می ده

2. یکم بیشتر پیشنهاد بدید

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

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

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

3. فراخوان ها کم، اما مشخص باشن

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

وقتی گزینه ها کمتر باشه مخاطب شما برای انتخاب به تلاش ذهنی (بار شناختی) کمتری نیاز داره. این یعنی شما کاربر رو راهنمایی می کنید که قدم به قدم به تمام قسمت های وب سایت مراجعه کنه و این خیلی موثرتره.

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

این تنها موردی بود که تونستم توسایت های فارسی براش مثالی پیدا کنم اما ترجیح می دم اسمی ازش نبرم. تو این سایت سه تا فراخوان بود :

• خرید پستی
• بازدید از نمونه ها
• دریافت محصول

گذشته از اینکه تعداد فراخوان ها غیر قابل قبوله، هیچ تفاوت مهمی هم بین "خرید پستی" و "دریافت محصول" وجود نداره. من کدوم کار رو باید اول انجام بدم؟ خرید پستی یا دریافت محصول!؟ کمی گیج شدم.

4. از زبان رایج کاربرا استفاده کنید

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

• خرید یا سفارش
• ثبت نام
• اشتراک
• تماس

تمام این موارد کاربر رو تشویق می کنه که یه کاری انجام بده. برای اینکه ضرورت انجام کار رو به کاربران نشون بدیم، می تونیم ایی کلمات رو در کنار چنین جمله هایی استفاده کنیم :

• فقط تا 15 اسفند فرصت دارید
• به مناسبت عید نوروز
• الان سفارش بدید و یه هدیه نوروزی از ما بگیرید

Carsonified از یه همچین چیزی برای فروش ورک شاپ هاش استفاده می کنه. خیلی خوب هم می تونه فوریت موضوع رو به کاربراش منتقل کنه که سریع تر ثبت نام کنن.

وب سایت Carsonified فوریت مسئله رو کاربراش نشون می ده و همین باعث می شه سریع تر ثبت نام کنن.

5. محل مناسبی رو انتخاب کنید

این واقعا خیلی مهمه که شما بتونید فراخوان رو در جای مناسب قرار بدید. ایده آل اینه که بالا و وسط صفحه قرار بگیره. مثل کاری که توی سایت picsengine.com انجام شده و دقیقا در یه همچین موقیعیتی قرار گرفته.

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

6. از فضاهای خالی استفاده کنید

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

PlanHQ با تعیین فضای خالی خیلی خوب دور فراخوان، واقعا یکی از بهترین نمونه هاست. این کار باعث شده در نگاه اول اولین چیزی که دیده می شه همین فراخوان باشه.

PlanHQ با فضای خالی زیادی که دور فراخوان گذاشته، تمرکز رو به اون سمت افزایش داده

7. از رنگ های متفاوت استفاده کنید

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

رنگ دکمه ثبت نام طوریه که واقعا متفاوته و توجه رو به خودش جلب می کنه.

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

8. فراخوان رو بزرگ کنید

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

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

موزیلا از سایز بزرگ برای جلب توجه استفاده می کنه

9. تو هر صفحه یه فراخوان داشته باشید

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

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

توسعه دهنده های PHP احتمالا با Basecamp آشنا هستن. این سایت پایین هر صفحه یه فراخوان گذاشته که به کاربرا برای ثبت نام تو وب سایت و یا استفاده از راهنما سیگنال می ده.

Basecamp پایین هر صفحه یه فراخوان گذاشته

10. فراخوان رو آماده کنید

در نهایت تصور کنید که اگر کاربر به فراخوان شما جواب داد چه اتفاقی قراره بیفته. بقیه ماجرا به این مربوط می شه که حالا خود فراخوان باید چه شکلی باشه.

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

من اولین باری که خواستم یه بلاگ تو WordPress.com بسازم رو یادمه چون فرم ثبت نام خیلی مختصر و مفید بود. اونها یه سری اطلاعات محدود رو برای ایجاد یه بلاگ می پرسن.

Wordpress اطلاعاتی رو که برای ساختن یه وبلاگ لازمه خیلی مختصر کرده.

نتیجه گیری

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

با تشکر از امین کرمی و سرکارخانوم داداشی که زحمت پیدا کردن نمونه ها رو کشیدن.

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

اخیر توی یکی از شبکه های اجتماعی با گروهی برخورد کردم که عنوان جالبی داشت. جالب بودن عنوان برای من به دلیل نگاه عمل گرای اون به مسئله بود. یعنی علاوه بر اینکه شکل متداول انفعال گونه نداشت بلکه می تونه به مرور تبدیل به یه Start-up برای مخاطبانش بشه. به نظر میرسه اعضای این گروه در پی پاسخ دادن به این سوال اساسی تمام علاقه مندان به برنامه نویسی هستن که:

<aside>من می خوام برنامه نویس بشم ! از کجا باید شروع کنم ؟ </aside>## قدم اول : تصمیم بگیرید و ثابت قدم باشید

این سوال خیلی رایجه و بارها از خود من پرسیده شده. بگذارید چند تا نکته مهم و کلیدی رو براتون مشخص کنم که می تونه در تصمصم گیری موثر باشه.

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

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

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

قدم دوم : چه شاخه ایی از برنامه نویسی ؟

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

<aside>شاید تا بحال بارها به نظر سنجی و یا تحلیل های زیادی درخصوص مقایسه زبان ها برخورد کرده باشید ! که البته به ندرت هم به نتیجه مشخصی می رسند.</aside>از مطرح ترین شاخه ها می شه برنامه نویسی __ویندوز__، __لینوکس__، __موبایل__، __شبکه__، __بازی__، __وب__ و __میکرو پروسسور__رو نام برد. که البته بازی، میکرو پروسسور و زیر شاخه هاش با ضعف منابع روبر هستن و پیشنهاد نمی کنم فعلا سراغشون برید.

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

قدم سوم: چه زبان برنامه نویسی ؟

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

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

قدم چهارم: مسئله های زیادی رو حل کنید

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

<aside>برای پیشرفت، هیچ چیز بهتر از نوشتن یه برنامه و بارها بازنویسی مجدد همون برنامه نیست </aside>بد نیست که یه تکنیک شخصی رو هم در این مورد بهتون معرفی کنم. می تونید به سایت های بزرگ و مطرح برنامه نویسی مراجعه کنید. روزانه مسائل زیادی در این وب سایت ها مطرح می شه که ممکنه در آینده باهاش برخورد داشته باشید. سعی کنید اون مسئله ها رو مسئله خودتون بدونید و براشون راه حلی پیدا کنید.

قدم پنجم : زبان های بیشتری رو یاد بگیرید

وقتی که در کارتون خبره شدید دیگه وقت زیادی برای یاد گرفتن زبان های مختلف (به صورت همزمان) ندارید، مگر اینکه خیلی خوش شانس باشید. بنابر این سعنی کنید چند زبان مختلف دیگه رو هم در شاخه کاریتون یاد بگیرید. تلاش کنید که بفهمید چه وجه تمایزی با هم دارن و ضعف های همدیگرو چطور پوشش می دن؟

یه زبان کاربردی رو هم یاد بگیرید. معمولا پیشنهاد می کنم چیزی مثل C رو یاد بگیرید چون خیلی کاربردیه و تقریبا اکثر زبان های کارآمد امروزی از این خانواده مشتق شدند.

نهایتا یک زبان اعلانی رو هم یاد بگیرید. خوب در این بین SQL معمولا خیلی قدرت نمایی می کنه و اجازه نمی ده به چیز دیگه ایی فکر کنید اما من پیشنهاد می کنم به همین محدود نشید و تمرین کنید که زبان هایی مثل XAML, XSLT و XQuery رو هم بلد باشید.

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

لازم نیست یه زبان خیلی پیچیده، ساختار یافته و یا حتی بروز باشه. حتی لازم نیست که چیز جدید و خاص خودتون هم باشه. می تونید یک زبان متن باز رو توسعه بدید و یا حداقل براش یه فریم وورک بنویسید. من خودم راه ساده تر رو انتخاب کردم و یه فریم وورک برای PHP نوشتم که بعدا منجر به تولید پلتفرم و سیستم مدیریت محتوای Gexek شد.

<aside>من وب سایتم رو با همین سیستم راه اندازی کردم، هرچند که یه کم گرونه اما خوب برای خودم می تونستم یه تحفیف خوب بگیرم ;) </aside>## قدم هفتم: یه چیزی یاد بگیرید که هیچ کس بلد نیست

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

زمانش رسیده که قدم در راهی بگذارید که دیگران نگذاشتند. اما اشتباه نکنید، این چیزی نیست که شما تا قبل از اتمام سال دهم از تجربه کاریتون بهشون فکر کنید. علتش اینه که به دلیل ضعف دانشی بیشتر می تونید بازآفرینی کنید تا ابداع. چیزی مثل اینکه دوباره تلاش کنید که چرخ رو اختراع کنید.

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

تبریک می گم، شما الان یه برنامه نویس خوب هستید

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

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

در نهایت مثل همیشه منتظر نظرات شما هستم، امیدوارم من و مخاطبان این بلاگ رو در بهبود این توصیه ها کمک کنید.

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

1. از بازنشانی های سراسری استفاده نکنید

بازنشانی کردن حاشیه های (padding و margin) عناصر HTML به صورت سراسری، اصلا کار خوبی نیست. علت اینه که هم خیلی کنده و هم باعث می شه مجبور بشید برای عناصری که به این حاشیه ها نیاز دارند، مجددا اونها رو تعریف کنید. بجاش می تونید از بازنشانی های زیر مجموعه و مشخص استفاده کنید. مثل کاری که Eric Meyer انجام داده.

این روش خوب نیست :

<pre class="brush: css; fontsize: 100; first-line: 1; ">*{ margin:0; padding:0; }این بهتره :

<pre class="brush: css; fontsize: 100; first-line: 1; ">html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. از هک های اینترنت اکسپلورر استفاده نکنید

<pre class="brush: applescript; fontsize: 100; first-line: 1; html-script: true; ">``<pre class="brush: css; fontsize: 100; first-line: 1; ">هرچند که هک های CSS می تونن برای مدیریت نحوه نمایش وب سایت روی مرورگر های قدیمی (مثل IE6) کارآمد باشن، اما باعث بروز مشکلاتی هم در نسخه های جدید تر می شن. مثلا به بدلیل اینکه IE8 استاندارد های CSS رو در سطح مطلوبی پشتیبانی نمی کنه، استفاده از این هک ها باعث اختلال در طراحی شما می شه.

بجاش می تونید از دستور های شرطی برای هدف قرار دادن مرورگر های مختلف استفاده کنید. به عنوان مثال استفاده از دستور زیر باعث بارگذاری فایل <span style="background-color: #eeeeee; font-family: andale mono,times;">ie-styles.css</span> در اینترنت اکسپلورر 6 و یا نسخه های قدیمی تر می شه.

<pre class="brush: css; fontsize: 100; first-line: 1; ">برای کسب اطلاعات بیشتر در خصوص این دستورات شرطی به سایت quirksmode مراجعه کنید.

3. از شناسه و کلاس های معنادار استفاده کنید

فرض کنید برای پنل کناری وب سایت کلاس <span class="gxui-ltr-text" style="background-color: #eeeeee; font-family: andale mono,times;">.rightbox</span>رو انتخاب کردید. حالا به هر دلیل لازم شده این پنل رو به سمت چپ شناور کنید. در این صورت استفاده از کلاس ``<span class="gxui-ltr-text" style="background-color: #eeeeee; font-family: andale mono,times;">.rightbox</span>  کمی گیج کننده است. بهتره قبل از انتخاب شناسه و کلاس ها کمی در مورد نام اونها فکر کنید و نامی رو انتخاب کنید که در آینده به خوانایی بیشتر برنامه کمک کنه.<br></br>

4. وارثت رو در CSS به کار بگیرید

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

این روش خوب نیست:

<pre class="brush: css; fontsize: 100; first-line: 1; ">#container li{ font-family: IranianSans, serif; }
#container p{ font-family: IranianSans, serif; }
#container h1{ font-family: IranianSans, serif; }

این بهتره:

<pre class="brush: css; fontsize: 100; first-line: 1; ">#container{ font-family: IranianSans, serif; }## 5. گزینشگر های چندگانه رو ادغام کنید

گاها پیش میاد که یه گروه خاص از گزینش گر ها (Selectors) از یه استایل مشابه استفاده می کنن. اینجا هم ادغام کردن اونها صرفه جویی در زمان و فضا رو به همراه داره.

این روش خوب نیست:

<pre class="brush: css; fontsize: 100; first-line: 1; ">h1{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }

این بهتره :

<pre class="brush: css; fontsize: 100; first-line: 1; ">h1, h2, h3{ font-family: Tahoma, Helvetica, sans-serif; font-weight:normal; }## 6. تا حد امکان خلاصه نویسی کنید

خیلی از خصیصه های CSS مثل <span style="font-family: andale mono,times;">margin, padding, border, font, background </span>و همینطور رنگ ها رو می شه به صورت خلاصه نوشت.<br></br>

این روش خوب نیست :

<pre class="brush: css; fontsize: 100; first-line: 1; ">li{ 
	font-family: Tahoma, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}

این بهتره :

<pre class="brush: css; fontsize: 100; first-line: 1; ">li{ 
	font: 1.2em/1.4em Tahoma, sans-serif; 
	padding: 5px 0 10px 5px;
}

می تونید یه راهنمای خوب رو هم درباره خصیصه های کوتاه و مختصر CSS بخونید.

7. کدهای CSS رو سازماندهی کنید

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

<pre class="brush: css; fontsize: 100; first-line: 1; ">/*-------------------------
	بازنشانی ها
-------------------------*/

/*-------------------------
	کلاس های عمومی
-------------------------*/

/*-------------------------
	استایل های قالب
-------------------------*/

/*-------------------------
	بعضی کلاس های خاص
-------------------------*/

8. خوانا بنویسید

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

<pre class="brush: css; fontsize: 100; first-line: 1; ">/*------------------------
هر خصیصه در یک سطر
---------------------*/
div{ 
	background-color: #3399cc;	
	color: #666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
	height: 300px;
	margin: 10px 5px;
	padding: 5px 0 10px 5px;
	width: 30%;
	z-index: 10;
}

/*------------------------
ترکیبی
---------------------*/
div{ 
         background-color: #3399cc; color: #666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
         height: 300px; margin: 10px 5px; padding: 5px 0 10px 5px; width: 30%; z-index: 10; 
}

9. خصیصه ها رو بر اساس الفبا مرتب نگه دارید

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

<pre class="brush: css; fontsize: 100; first-line: 1; ">div{ 
	background-color: #3399cc;	
	color: #666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
	height: 300px;
	margin: 10px 5px;
	padding: 5px 0 10px 5px;
	width: 30%;
	z-index: 10;
}

10. فایل های CSS رو تا حد امکان تقسیم کنید

اگر روی یه پروژه بزرگ با ماژول های مختلف کار می کنید و هر ماژول استایل های متفاوتی داره، بهتره فایل های CSS رو تا جایی که می تونید به فایل های بیشتری تقسیم کنید. معمولا بر اساس کاربرد استایل ها می تونیم اونها رو توی فایل مجزایی قرار بدیم. مثلا یه فایل برای بازنشانی، یکی برای چهارچوب قالب و یکی هم برای نوشتار.

البته در پروژه های بزرگ تعداد در خواست های HTTP اهمیت زیادی داره و طبعا زیاد شدن تعداد فایل ها یعنی زیادتر شدن درخواست ها. برای همین می تونیم از یه فایل برای Import کردن بقیه فایل ها استفاده کنیم. به عنوان مثال من اینجا یه فایل <span style="font-family: andale mono,times; background-color: #eeeeee;">import.css</span> ایجاد کردم که محتواش به این شکله :

<pre class="brush: css; fontsize: 100; first-line: 1; ">@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

11. فایل ها رو فشرده کنید

ابزار های زیادی وجود داره که فایل های CSS شما رو فشرده می کنن. این کار باعث کوچک تر شدن فایل و در نتیجه افزایش سرعت وب سایت می شه. بخصوص توی پروژه های بزرگ سعی کنید از ابزاری مثل CSS Compressor برای فشرده سازی استفاده کنید.

12. در سبک کاری ثابت قدم باشید

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

<aside>خوب این اولین مطلب تکنیکی در مورد CSS بود و امیدوارم تونسته باشه در نحوه نوشتن کد ها به شما کمک کنه. </aside>اگر مایل هستید که نکات مورد نظر خودتون رو هم با ما و سایر خوانندگان این مطلب به اشتراک بگذارید، در بیان دیدگاهتون توی کادر پایین تردید نکنید.

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

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

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

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

ما بیشتر به احساسمون اعتماد می کنیم و تشخیص میدیم که چه محتوایی رو باید انتخاب کنیم. اما داشتن چند تا عدد آماری می تونه خیلی کمک کننده باشه. من خودم معمولا 4 تا معیار رو در نظر می گیرم که اینها هستن :

• واکنش های اجتماعی
• نظر دهی مخاطبان
• تحقق یه هدف
• جستجو های داخلی

اجازه بدید هر کدوم رو یه بررسی بکنیم.

واکنش های اجتماعی

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

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

سرویس AddThis یکی از گزینه های خوب و سبک برای هر وبلاگه. این سرویس علاوه بر امکان اشتراک گذاری بهتون یه اطلاعات آماری هم در مورد واکنش های اجتماعی می ده.## نظر دهی مخاطبان

به طور کلی هرچه یه مطلب نظرات و یا دیدگاه های بیشتری رو دریافت می کنه به این معنیه که کاربرا بیشتر باهاش ارتباط برقرار کردن و اون موضوع پرطرفداره. البته با این پیشفرض که همه یا اکثریت نظرات ارسال شده منفی نباشن.

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

دست یابی به هدف

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

برای بررسی این موارد باید تنظیماتی رو در Google Analytics انجام بدید. البته یکمی کار مشقت باریه اما در نهایت به زحمتش می ارزه.

قدم اول: ایجاد یه رویداد

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

قدم دوم: ایجاد یک تقسیم بندی پیشرفته (Advanced segmentation)

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

بنابر این توی Google Analytics این مراحل رو طی کنید :

• توی نوار ابزار اصلی Admin رو انتخاب کنید
• روی دامنه ایی که می خوایید مدیریتش کنید کلیک کنید
• روی Advanced segmentation کلیک کنید
• با کلیک روی New Segment یه تقسیم بندی جدید ایجاد کنید
• رویدادی رو که می خوایید پیگیری کنید انتخاب کنید

یه تقسیم بندی جدید باعث می شه بتونید کاربرانی که به درخواست شما پاسخ دادن رو ایزوله کنید

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

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

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

جستجو های داخلی

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

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

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

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

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

برای همینه که اکثر وب سایت ها انسجام لازم برای ارتباط با مخاطب رو ندارن. اما اگر قراره وبی سایتی موفق بشه، این وضعیت باید تغییر کنه.

حل کردن مشکل

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

لازمه یه سری سیاست ها برای کنترل روی نوشته ها و خط مشی کلی باشه. همچنین مهمه که وب سایت خالی از تصمیمات هوس بازانه بعضی مدیران بخش ها باشه.

گرفتن کمک خارجی

من می دونم که تعیین و اثبات چنین سیاست های می تونه سخت باشه، اما اینجاست که معمولا یه کمک خارجی اغلب می تونه نتیجه متفاوتی ایجاد کنه. معرفی یک مشاور بی طرف برای مدیریت این رویکرد، با توجه به بی طرفی اون می تونه نفوذ بیشتری رو نسبت به درخواست مستقیم نفوذ داشته باشه.

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