• زیبایی در سادگی است

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

• اهمیت طراحی

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

• جهتیابی باید قابل درک باشه

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

• اهمیت ثبات طراحی

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

• اهمیت رنگ

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

• سایتتونو واکنشگرا کنید

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

• سایتتونو برای مرورگرهای مختلف توسعه بدید

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

• خطاهای سایتتونو پیدا کنید

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

• کدهای خودتونو بنویسید

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

• محتوا رو فراموش نکنید

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

اگه شما محصولاتتونو تو مغازه میفروشید اما برای فروش آنلاین برنامه ای ندارید، باید بگم سود زیادی رو دارید از دست میدید. فروش آنلاین میتونه موقعیت های زیادی براتون ایجاد کنه. امریکا با توسعه فروشهای آنلاین تونست با فروش 176/2 میلیارد دلار تو سال 1388، فروشش رو 12/6 درصد افزایش بده و قصد داشت تا آخر امسال این مقدار رو به 278/9 میلیارد دلار برسونه.
حالا نظرتون چیه؟ آماده اید که چند تا از این فروشگاه های آنلاین رو با هم بررسی کنیم؟ چون برای بعضی از کسب و کارهای کوچیک بدلایلی مثل کمبود وقت، بودجه و کارمند، طراحی وب سایت فروشگاه آنلاین ممکنه سخت باشه و بهتره دست پر به سراغش برید.
تو این مقاله به 10 سوال مهمی که قبل از ساخت فروشگاه آنلاین برای هر کسی پیش میاد جواب داده میشه. با استفاده از نکاتی که اینجا از فروشنده های آنلاین براتون ارائه میشه، میتونید فروشگاهتونو نسبتا ساده و با هزینه های کمتر راه بندازید.

• ساخت فروشگاه آنلاینمو از کجا شروع کنم؟

اگه از پس هزینه های طراح سایت برنمیایید نگران نباشید. خیلی از فروشنده های آنلاین هستن که میتونن تو ساختش کمکتون کنن. یکی از این فروشنده ها مشکلات کدنویسی، میزبانی، نگهداری سایت روی سرور شخصی رو از جمله مشکلاتی میدونست که اول کار باهاشون روبرو شده بود.
برای طراحی ظاهر کلی سایتتون و ایجاد حس و حال مناسب و تعیین عملکردهای فروشگاه آنلاینتون میتونید از سایتهایی مثل شاپیفای، Bigcommerce، Goodsie، Jumpseller و Volusion استفاده کنید. این سایتها امکان آپلود فایل، ایجاد سبد خرید فروشگاهی و تأمین امنیت پرداختها رو روی سرور خودشون فراهم میکنند. میتونید از سایت اصلی شرکتتون به فروشگاه آنلاینتون لینک بدید.
برای ارائه خدمات فروشگاهی از طریق این سایتها که معرفی کردیم، باید یه سری تنظیمات اولیه ای انجام بدید. مثلا تو شاپیفای باید از بین یه سری قالبها یکی رو برای خودتون انتخاب و بعد، با تغییر فونت، رنگ و اندازه تصاویر محصولات به صورت دلخواه، شخصی سازیش کنید. کاربرهای شاپیفای میتونن تصویر پس زمینه و لوگوی برند خودشونو روی شاپیفای آپلود کنند.
قیمت این جور خدمات میتونه از ماهی 35000 تومن تا 2450000 تومن متغیر باشه و به شدت به تعداد محصولات و نوع خدماتی که ارائه میدید بستگی داره.

• چطور میتونم ظاهر فروشگاه آنلاینمو بهتر شخصی سازی کنم؟

در اغلب موارد میگیم اگه در حال حاضر برای شرکتتون سایت دارید، سایت فروشگاهیتون باید از نظر ظاهری (مثل لوگوها و تم رنگی) بتونه سایت شرکتتونو انعکاس بده. اما اگه سایت شرکتی ندارید، پس زمینه و رنگی انتخاب کنید که مکمل لوگوتون باشه.
بیشتر فروشنده های آنلاین تم هایی برای فروشگاهشون انتخاب میکنند که برای شخصی سازی نیازی به دانش HTML و CSS نداشته باشند. در این صورت آپلود لوگو و تصاویر محصولاتتون و گذاشتن بنر و اسلایدر و غیره براتون ساده میشه.

• چه نوع سیستم پرداختی انتخاب کنم؟

از سیستم های مشهورتر و شناخته شده برای بخش پرداخت سایت فروشگاهتون استفاده کنید تا از نظر امنیتی مشکلی براتون پیش نیاد.
بعضی هاشون نیازی به پرداخت های ماهیانه و عضویت هم ندارند، بلکه به جای اینکه مجبور باشید یه مبلغ ثابتی رو در ماه پرداخت کنید باید درصدی از پولی رو که انتقال داده میشه بپردازید و شاید یه مقدار کمی هم به ازای هر انتقال.
یکی از شرکتهای ایرانی که خدمات درگاه پرداخت به سایتها و وبلاگها ارائه میده، سایت payplus.ir هست که با ثبت نام رایگان، امکان ایجاد درگاه های پرداخت بانکی نامحدودی رو در اختیارتون قرار میده.
Pay.ir هم علاوه بر کیف پول آنلاین، خدمات اتصال سایت به سیستم پرداخت شتاب کشور و تهیه فرم پرداخت ارائه میده. هزینه خدمات این سایت طبق گفته خودشون از 0 تا حداکثر 2500 تومن متغیره.
البته ما فقط بهتون این سایتها رو معرفی کردیم ولی خودتون بیشتر تحقیق کنید و با سرچ گوگلی سایتهای بیشتر و سوال از فروشنده های دیگه بهترینشونو انتخاب کنید.

• چطور خدمات مشتری رو مدیریت کنم؟

برای اینکه بتونید بطوری شایسته به نگرانی های مشتریهاتون جواب بدید، میتونید از ابزارهای قابل اعتمادی که برای مدیریت روابط مشتری (CRM) در دسترس فروشنده ها قرار گرفتند استفاده کنید. برای این ابزار باید یه مبلغی هم ماهیانه پرداخت کنید.
ابزار CRM ساختار و روش همه روشهای ارتباط تجاری با مشتری (از جمله اطلاعات تماس، خریدهای اخیر، نقدها و سفارشات در حال انتظار) رو یه جا جمع میکنه.
یکی از بنیان گذاران شرکت Girl Charlee Inc بعنوان یه فروشنده آنلاین به فروشنده هایی که میخوان وارد عرصه آنلاین بشن پیشنهاد کرده یه شماره تلفن رایگان به خدمات مشتریهاشون اختصاص بدن. یه کار دیگه اینه که چت زنده روی سایت فروشگاهتون راه بندازید، اما دقت کنید در صورتی این کارو انجام بدید که بتونید به صورت شبانه روزی قادر به پاسخگویی مشتریها باشید چون وقتی چت آنلاین میذارید مشتریها اینطور توقع دارند.

• چطور هزینه ارسال رو تعیین کنم؟

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

• چطور تصاویر و توصیفات خوبی از محصولاتم داشته باشم؟

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

• جایی برای نقدهای مشتری ها و به اشتراک گذاری روی شبکه های اجتماعی هم بذارم؟

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

• چطوری میتونم خریدار جمع کنم؟

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

• کالاهای مرجوعی رو چطور مدیریت کنم؟

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

• چطور میتونم موفقیت فروشگاهمو ارزیابی کنم؟

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

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

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

اینجا من می خواهم 7 راز نویسندگان حرفه ای در زمینه ی سئو را بیان کنم:

1. کلمات کلیدی خود را مشخص کنید.

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

2. از کلمات کلیدی استفاده کنید.

استفاده 2-3% از کلمات کلیدی در کل صفحه، اصلا کافی نیست. کلمات کلیدی را در تایتل مقاله یا وبلاگ خود قرار دهید. همچنین یکی دیگر از جاهایی که باید از این کلمات استفاده کنید، در اولین و آخرین جمله است. با انجام این کار، کلمات کلیدی در برنامه های موتور جستجو و همچنین در برابر چشمان خوانندگان، باقی خواهد ماند. به یاد داشته باشید که مردم با استفاده از موتورهای جستجو، به دنبال عبارت خاصی می گردند. آنها می خواهند اطلاعات خودشون را در مورد مساله ی خاصی بالا ببرند. بنابراین منطقی ست که چیزی رو به آنها بدهید که واقعا به دنبال آن هستند. در این صورت شما کلیک های زیادی را دریافت خواهید کرد.

3. در مورد چیزی بنویسید که مردم به آن اهمیت بدهند.

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

4. آن را به اندازه ی کافی بلند بنویسید که به چشم بیاید.

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

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

اگر برای پلت فرم وبلاگتون، از وردپرس استفاده می کنید، تعداد زیادی ابزار PR در افزونه ها وجود دارد، که شما می توانید از آنها بهره بگیرید. در شرکت تولید محتوا، ما از YoastوShareaholicاستفاده می کردیم.

6. حتما مقاله ی خود را ویرایش کنید.

تنها تفاوت یک مقاله نویس حرفه ای با عادی، همین ویرایش کردن است. یک نویسنده ی حرفه ای باید بتواند که خود را تصحیح کند. برنامه هایی مثل OpenOffice، Google Docs، و Microsoft Word این کار را آسان کرده اند، حتما وقتی که تایپ می کنید متوجه ی خطوط منحنی و مارپیچ با رنگهای سبز و قرمز شده اید، که وقتی اشتباهی تایپ می کنید به شما اخطار می دهند. از عناصر زیبایی شناسی در پاراگراف بندی و ظاهر متن خود استفاده کنید. مثلا اندازه ی پاراگراف ها متناسب باشند. از پاراگراف های خیلی طولانی به شدت بپرهیزید.

7. یک آژانس آنلاین PR خودگردان شوید.

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

اینجا متخصص های طراحی سایت، نکات حرفه ایشونو در مورد ساخت سایت مؤثر رو میکنند.
برای هر کسی، یه سایت بهتر یعنی یه تجربه بهتر. کاربرها باید بتونن بدون مشکل و نگرانی به اطلاعات مورد نیازشون دسترسی داشته باشند. توسعه دهنده ها و طراح ها باید سایتهایی بسازند که بروزرسانی و نگهداریش راحت باشه. یه سایت بهتر باید خیلی بالاتر از "مؤثر" باشه، باید بتونه روی مشتریها و کسایی که ساختنش"اثر خوبی بذاره".
یه سایت بهتر یعنی یه سایت مؤثرتر. تأثیرگذاری قلب پروژه های ماست، حالا این تأثیرگذاری میتونه به صورت در دسترس بودن ظاهر بشه یا واکنشگرا بودن یا استراتژی محتوا یا عملکرد بهتر بارگذاری صفحات. از انتخاب CSS درست تا جواب دادن به سوالات مهمی که به پروژه زندگی میبخشه، همه رو شامل میشه. اثرگذاری به معنی سریعتر شدن نیست، به معنی بهتر شدنه، به معنی همراه شدن و درک دیگرانه.
تو این مقاله نکاتی از متخصصهای مختلف جمع شده، برای همین توصیه هایی که اینجا نوشته شده موضوعات متنوعی رو در بر میگیره که همه در نهایت به دنبال تأثیرگذاری بهتر هستند. هر کدوم از این توصیه ها فقط اشاره کوچیکیه که دعوتتون میکنیم بیشتر در مورد تک تکشون تحقیق کنید و برای طراحی سایتهاتون بکار بگیرید.
ما هرچی بیشتر اطلاعاتمونو با دیگران در میون بذاریم، بیشتر هم بدست خواهیم آورد. امیدواریم مطالب این مقاله به دردتون بخوره.

• سوال بپرسید

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

• به کدهاتون گوش کنید

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

• از دسترس پذیری ذاتی حفاظت کنید

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

• از مزایای بارگذاری مشروط استفاده کنید

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

• برای نوشتن از تابع Cubic-bezier استفاده کنید

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

عملکرد زمانبندی انتقال: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear easing */

اگه فکر میکنید نوشتن تابع Cubic-bezier با دست کار شما نیست، نگران نباشید. میتونید با ابزار Ceaser خیلی سریع یکی از معادلات رو بکار بگیرید یا خودتون معادله بنویسید.

• از عبارتهایی که بیشتر سرچ میشن استفاده کنید

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

• از دور به نمای کلی نگاه کنید

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

• فایلهای CSS تون رو طبقه بندی کنید

طبقه بندی اسامی فایلهای CSS باعث میشه راحتتر به محتواشون پی ببرید. اینطوری هر وقت بخشی از سایت خروجی نمیداد، بذارید .config.scss، و اگه فایلی بخشهای دیگه رو وارد میکرد .manifest.scss..

• از ذخیره آسان تصاویر کمک بگیرید

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

picture>

    <source type="image/webp" srcset="image.webp">

    <img src="image.png" alt="A rad wolf.">

</picture>

WebP برای مرورگرهاییه که از WebP پشتیبانی میکنند و برای تصاویری که نمیکنند فقط یه ol' PNG ساده بذارید، در هر دو صورت فقط یک درخواست نمایش داده میشه.

• استاد رفع عیب در جاوااسکریپت بشید

هیچ وقت قدرت console.log رو دست کم نگیرید. هر وقت میخواهید یه خط خاص رو بفهمید، با یه اطلاعات مفیدی تگش کنید. یه چیزی مثل console. log('foo; a=', a) کمک میکنه اونو در ارتباط با عملکرد foo بشناسید. وقتی میخواهید یه مشکلی رو رفع کنید، هر جایی رو که به نظرتون ارتباط میتونه داشته باشه رو با console. log('boom1')، console.log('boom2') و ... لاگ کنید تا بتونید ببینید دقیقا کجای کدتون مشکل داره.

• تصاویر پس زمینه رو واکنشگرا کنید.

برای داشتن تصاویر پس زمینه واکنشگرا (ریسپانسیو)، صرف نظر از عرض نمایشگر، باید تصاویر رو واکنشگرا کنید. استفاده از  کد CSS زیر برای ساخت تصاویر پس زمینه واکنشگرا بکار میره:
background-size:cover;
علاوه بر مقیاس پذیر شدن تصویر با اندازه نمایشگر، نسبت پیکسهای تصویر هم بدون نیاز به مارک آپ یا قوانین دیگه خودکار میشه.

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

با بهره گیری از Sass mixin میشه سیستمهای شبکه ای خیلی خوبی ساخت.
سیستم شبکه ای میونه هر تعداد که بخواهید ستون داشته باشه، اما خود mixin تعداد کل ستونها و با تعداد کل شیارها رو مشخص میکنه (یه شیار کمتر از تعداد ستونهاست).
بعد ستونهای شناور رو از سمت راست (برای متون انگلیسی) منظم میکنه. میکسین وابسته به متغیره به خصوص وابسته به عرض ستون و شیار. در آخر هم یه :last-of-type  حاشیه همه رو تا آخرین ستون همه ردیفها منظم میکنه.

• به مبحث ها فکر کنید نه به صفحات

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

• از صفحه کلید پشتیبانی کنید

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

• سریع روی مرورگر طراحی کنید

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

• کدهاتونو ساده کنید

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

if (user.isAdmin()) {

    return password;

} else {

    return false;

}

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

return user.isAdmin() && password;

• عرضها رو به صورت درصدی بنویسید

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

• برای عنوان ها حوزه تعیین کنید

با نوشتن فیلد عنوان برای مطالبتون میتونید همه رو روی پشت صحنه سایت (بک-اند) طبقه بندی کنید و ظاهر سایت رو شفاف و مرتب جلوه بدید. اینطوری برای ویرایشگرها هم کار راحتتره چون مشخصه هر عنوان مربوط به چه حوزه ای میشه. یکیش باید برای جهتیابی باشه، یکیش باید عنوان صفحات رو مشخص کنه که معمولا با <title> مشخص میشه. و یکیش هم باید در سیستم مدیریت محتوا استفاده شه تا همه چیز رو به ترتیب نمایش بده. اینها رو هر طور که سازمانتون میخواد ترکیب و هماهنگ کنید.

• استفاده از گیت

با بکارگیری گیت در وقتتون صرفه جویی کنید. یه فایل جهانی برای فایلهایی که هیچ وقت نمیخواهید اجرا بشن بکار بگیرید. یه فایل gitignore در gitignore بذارید و بعد میتونید $ git config--global core.excludesfile ~/.gitignore.

• از Git hooks استفاده کنید

یه فناوری جدید اومده که اثر کار ما رو افزایش میده و میتونیم تعلقات بیشتری رو بکار بگیریم. چند نفر به طور منظم از Sass برای مدیریت مدلهاشون استفاده میکنند؟ یا از ابزارهایی مثل JSLint برای جاوااسکریپت؟ ابزارهایی که برای یکی کردن، فشرده کردن و کش کردن متعلقاتتون بکار گرفته میشن؟
ما همیشه ناخواسته فراموش میکنیم که یه سری دستورات و فایلهای قدیمی رو حذف یا درست کنیم. با استفاده از Git commit hooks دیگه هیچوقت یادمون نمیره. فقط باید یه چندتا تله از قبل مشخص کنیم و بعد همه این دستورات هر زمان که ما تغییری اعمال میکنیم اجرا میشن.

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

هر چقدرم که برنامه تونو تست کرده باشید و از دستگاه های مختلفی استفاده کرده باشید، باز هم ممکنه مسائل پیش بینی نشده ای اتفاق بیفتن. شما هیچ وقت نمیتونید برنامه ای راه بندازید که باگ نداشته باشه، پس بیایید به کاربرهاتون درباره مشکلاتی که موقع کار با سایتتون روبرو میشن توضیح بدید و کارشونو راحت کنید.
با استفاده از یه فرم ساده از سایت خودتون از قدرت GitHub API بهره مند بشید. خطاهای سرور رو گزارش و آنالیز کنید و از یه چیزی مثل window.onerror برای حفظ خطاهای جاوااسکریپت استفاده کنید (یا اول کدتون از {} catch(e) {} استفاده کنید). یه نفس عمیق بکشید و با هوشیاریتون کارتونو عالی کنید.

• سرعت سایتتونو حس کنید

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

• از نوارهای طولانی برای انتخاب استفاده نکنید

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

• اندازه آیکونها رو با background-image: cover; مشخص کنید

اگه از قابلیت background-image برای افزودن عکس به آیکون استفاده میکنید، یه گزینه دیگه برای اینکار استقاده از background-image: cover; است. تو تئوری، اگه تصویر آیکون گوشه های گردی داشته باشه هم میتونید از background-image: cover;  استفاده کنید، اما ممکنه بخشی از عکس آیکون حذف بشه. این کار باعث میشه اندازه تصویر متناسب بشه.

• مختصر و مفید باشید

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

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