IntroJs ابزاری برای ساخت راهنمای وب‌سایت

حالا وقت یک معرفی یک پروزه ایرانی است که این روزها سر و صدا کرده است.

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

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

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

پروژه IntroJs همان کار را انجام می‌دهد. راهنماهای گام به گام یا آموزش برای سایت است. با استفاده از IntroJs هر کسی می‌تواند در سه مرحله بسیار ساده آن را روی وب‌سایتش پیاده کند.

برای مثال می‌توانید نگاهی به دموی اصلی پروژه بیاندازید.

پس از رونمایی از این پروژه متن‌باز و رایگان سایت‌هایی چون هکرنیوز، reddit، گیت‌هاب و چند وب‌سایت دیگر به آن پرداختند. ضمناً این پروژه جزو بهترین پروژه‌های روز، هفته و ماه گیت‌هاب شده و در کنار پروژه شرکت‌هایی مثل توییتر قرار گرفته است.

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

به هر حال از این ابزار مفید که کار خوب گروه usabli.ca است استفاده کرده و لذت ببرید.

سایت شما روی چی، چه شکلیه؟

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

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

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

اولین سایت اسمش هست Browser Shots که نشون می‌ده وب‌سایتتون در مرورگرهای مختلف چطور دیده می‌شه. مثلاً سایت من اوضاعش این شکلیه. می‌تونید روی هر کدوم از عکس‌های کوچیک کلیک کنید و بزرگ‌ترش رو ببینید.

امابه نظرم گل سرسبد سرویس‌های این‌چنینی Screenfly هست. این سرویس اوضاع سایتتون رو در انواع موبایل‌ها، تبلت‌ها، تلویزیون‌ها و لپ‌الپ‌ها با رزلوشن‌های مختلف خواهید دید.

ادامه

هدف از طراحی صفحه خطای ۴۰۴ چیست؟

دوست عزیزم مهدی رودکی بعد از اتمام مسابقه‌ای که گذشت، مواردی رو درباره صفحه ۴۰۴ سایت برام ارسال کرده، که به نظرم باید خوندش:

در رابطه با ایده جالب مسابقه ۴۰۴ چندتا نکته از دید «کاربردی بودن سایت» می‌گم. شاید بد نباشه با خوانندگان سایتت در میان بذاری. البته ظاهراً دیر رسیدم اما چیزی که می‌خوام بگم از دید سئو (بهینه‌سازی برای موتور جست‌وجو) خیلی مهمه.
اصولاً هدف از تعبیه صفحه ۴۰۴ در سایت، کمک به کاربرانی است که به اشتباه وارد سایت شده‌اند یا دنبال آدرسی بوده‌اند که حالا وجود ندارد. بنابراین این صفحه طراحی نمی‌شود که بیننده را عمداً به آن بکشانیم. لذا اصولاً جذابیت گرافیکی در این صفحه در اولویت اول قرار ندارد و این صفحه پیش از همه چیز باید نقش خود را به عنوان راهنما به خوبی ایفا کند.
دو گروه بیننده وجود دارند: بینندگانی واقعی سایت یعنی آدم‌ها و بینندگان نرم‌افزاری سایت مانند موتورهای جستجو و ….
آدم‌ها می‌آیند پس باید بتوانند راهی به مطالبی که دنبالش بوده‌اند بیابند و همینطور با صفحه‌ای خشک و بی‌روح مواجه نشوند که از سایت متواری شوند.
موتورهای جست‌وجو هم می‌آیند و آنها هم نباید از سایت متواری شوند. راه نگهداشتن آنها لینک‌های ساده به بخش‌های دیگر سایت است. زیرا آنها علاوه بر حذف آدرسی که دیگر وجود ندارد در همان مراجعه، آدرس درست و آدرس صفحه‌های جدید را نیز باید بیابند.
اگر هدف از طراحی صفحه ۴۰۴ این است که کاربران واقعی سایت به آن مراجعه نکنند مگر در زمان نبود صفحه‌ای یا تغییر آدرس آن، لازم است که به فکر موتورهای جست‌وجو در طراحی این صفحه باشیم. به عبارت دیگر لینک‌هایی کمکی در اختیارش قرار دهیم که بتواند به بخش‌های دیگر سایت یا آدرس جدید صفحه پیدا نشده، مراجعه کند. این کار کمک می‌کند که در جست‌وجوهای بعد موتور جست‌وجو دوباره کاربران را به صفحه «پیدا نشد» ارجاع ندهد.
با این دیدگاه اصولی، به نظر من سایت‌هایی مانند موارد زیر، نباید جایگاه بالایی در مسابقه داشته باشند هر چند که ایده‌های جذاب و خلاقانه‌ای را ارائه کرده‌اند: رادیکال دو، موسویان، دامینه.

مسابقه طراحی صفحه خطای ۴۰۴ عصیانی

Error 404!صفحه خطای ۴۰۴ یکی از معروف‌ترین صفحاتیه که بیشتر وقت‌ها باهاش مواجه می‌شیم. قبلاً در این مورد مطالبی نوشتم که ته همین نوشته دوباره می‌تونین بخونینشون. خیلی‌ها نمی‌دونن که می‌شه صفحه خطای ۴۰۴ دلخواه خودشون رو طراحی کنن. خب حالا اونایی هم که نمی‌دونن قاعدتاً باید با خوندن این نوشته، بدونن!
درباره لزوم داشتن یک صفحه خطای ۴۰۴ مناسب و درست و درمون هم باز ارجاعتون می دم به همون نوشته‌های قبلی اما هدفم از نوشتن این پست اینه که یه چیزی شبیه به مسابقه خطای ۴۰۴ راه بندازم.
شروط شرکت در این مسابقه پیچیده نیست. در واقع کسایی که وبلاگشون روی هوست شخصی میزبانی می‌شه و از سرویس‌های وبلاگ‌نویسی رایگان که به صورت زیردامنه یا ساب‌دومین استفاده نمی‌کنن، می‌تونن در این مسابقه شرکت کنن. محدودیت‌های فنی اجازه نمی‌ده که مثلاً بلاگفایی‌ها بتونن صفحه خطای ۴۰۴ خودشون رو بسازن. بنابراین همین امروز برین و صفحه ۴۰۴ خودتون رو بسازین و لینکش رو زیر همین پست بذارین. امروز پنجشنبه هست و تا پنجشنبه دیگه ۴ شهریور وقت ارسال لینک هست. و البته اگه لینکتون رو ارسال کردین، یک نسخه هم از اسکرین‌شاتش رو برام ایمیل کنین که بعدش دیگه تغییرش ندین تا بقیه اعتراض کنن (niimaa ات جی‌میل دات کام). خودم هم یکی برای خودم درست کردم که البته هنوز کامل نشده و وقتی تمومش کردم خودم هم لینکم رو توی نظرسنجی می‌ذارم. اینجا ببینینش.
بعد از اون همین‌جا یک نظرسنجی انجام می‌دیم و ملت رأی می‌دن تا ببینیم کدوم صفحه خطای ۴۰۴ بهتره. مسلماً انواع ژانگولر و ابتکار می‌تونه باعث بشه تا صفحه ۴۰۴ شما بانمک‌تر و کاربردی‌تر از آب دربیاد. برای گرفتن ایده هم می‌تونین از این سایت‌ها کمک بگیرین که مجموعه‌ای از صفحات ۴۰۴ بامزه رو جمع‌آوری کردن.

ادامه