برای کسانی که کارشون مدیریت رسانه های اجتماعی و خدمات آنلاین هست، وبلاگ های سئو و مقاله ها بسیار اهمیت دارد. در شرکت های تولید محتوا، ما هر هفته چیزی حدود 40 مقاله ی سئو، برای مشتریان می نوشتیم. و خب هر کدوم از این مقاله ها به ترافیک وب سایتهای آنها کمک می کرد. اگر محتوای جدید را به صورت منظم بر روی سایت خود ارسال کنید، می توانید به راحتی برند خود را به مشتریان و کاربران معرفی کنید. در واقع این راحتترین کار برای جذب مشتری ست.
خب البته شما نمی توانید یک سری کلمات را روی هم سوار کنید و بر روی صفحه قرار دهید، و بعد انتظار داشته باشید که کاربران به سایت شما آمده و ترافیک سایت را بالا ببرند. مقاله نویسان حرفه ای در زمینه ی سئو، می دانند که فقط در یک صورت می توانند مشتریان را جذب کنند. و آن تنها، نوشتن به صورت درست و صحیح است.
اینجا من می خواهم 7 راز نویسندگان حرفه ای در زمینه ی سئو را بیان کنم:
اگر می خواهید که محتوایی را در سایت خودتون قراردهید، باید بدونید که آیا اصلا گوگل به مقاله ی شما توجه می کند یا نه. ابتدا کلمات و عبارات کلیدی را که به وسیله ی مردم سرچ می شود را پیدا کنید، و یک صفحه ی گسترده بسازید. به تعداد دفعاتی که از کلمات کلیدی استفاده می کنید، توجه داشته باشید.
استفاده 2-3% از کلمات کلیدی در کل صفحه، اصلا کافی نیست. کلمات کلیدی را در تایتل مقاله یا وبلاگ خود قرار دهید. همچنین یکی دیگر از جاهایی که باید از این کلمات استفاده کنید، در اولین و آخرین جمله است. با انجام این کار، کلمات کلیدی در برنامه های موتور جستجو و همچنین در برابر چشمان خوانندگان، باقی خواهد ماند. به یاد داشته باشید که مردم با استفاده از موتورهای جستجو، به دنبال عبارت خاصی می گردند. آنها می خواهند اطلاعات خودشون را در مورد مساله ی خاصی بالا ببرند. بنابراین منطقی ست که چیزی رو به آنها بدهید که واقعا به دنبال آن هستند. در این صورت شما کلیک های زیادی را دریافت خواهید کرد.
هیچ کسی اطلاعاتی که شما در مورد کار و حرفه ی خود دارید، ندارد. پس بنابراین چه نصایح یا نکاتی را می خواهید با بقیه در میان بگذارید؟ حداقل می توانید اخبار مربوط به کار خود را نشر دهید. اگر مطمئن نیستید، به لیست کلمات و عبارات کلیدی خودتون نگاه کنید و ببینید که به چه طریقی می توانید از آنها استفاده کنید. اصلا از اینکه با یک متخصص مصاحبه کنید، نترسید. ( اگر شما از آنها نقل قول کنید و تخصص آنها را در پستی که گذاشته اید، بیان کنید، آنها احتمالا محتوای سایت شما را از طریق کانال های اجتماعی شخصی خودشان پخش می کنند. به این طریق شما می توانید ارتباط سایت تون را افزایش دهید)
خب البته یک محتوای جدید 100 کلمه ای بهتر از هیچی ست. اما هنوز موتورهای جستجو، وبلاگ ها و مقالات طولانی تر را ترجیح می دهند. سعی کنید مقالات شما حداقل 300 کلمه داشته باشند، اما اگر می توانید آن را به 500 کلمه یا حتی بیشتر هم بسط بدهید. تحقیقات زیادی نشان می دهد که موتورهای جستجو به مقالات 2000 کلمه ای تمایل دارند.
اگر برای پلت فرم وبلاگتون، از وردپرس استفاده می کنید، تعداد زیادی ابزار PR در افزونه ها وجود دارد، که شما می توانید از آنها بهره بگیرید. در شرکت تولید محتوا، ما از YoastوShareaholicاستفاده می کردیم.
تنها تفاوت یک مقاله نویس حرفه ای با عادی، همین ویرایش کردن است. یک نویسنده ی حرفه ای باید بتواند که خود را تصحیح کند. برنامه هایی مثل OpenOffice، Google Docs، و Microsoft Word این کار را آسان کرده اند، حتما وقتی که تایپ می کنید متوجه ی خطوط منحنی و مارپیچ با رنگهای سبز و قرمز شده اید، که وقتی اشتباهی تایپ می کنید به شما اخطار می دهند. از عناصر زیبایی شناسی در پاراگراف بندی و ظاهر متن خود استفاده کنید. مثلا اندازه ی پاراگراف ها متناسب باشند. از پاراگراف های خیلی طولانی به شدت بپرهیزید.
وقتی که یک مقاله ی جدید می نویسید و پست می کنید، کار را نصفه انجام دادید. آخرین قدم در نوشتن مقاله های وب این هست که مثل یک آژانس روابط عمومی عمل کنید_ یعنی به تمامی محتوای خود لینک دهید. در وبلاگ ها نظر دهید و بعد به سایت خودتون لینک دهید.
اینجا متخصص های طراحی سایت، نکات حرفه ایشونو در مورد ساخت سایت مؤثر رو میکنند.
برای هر کسی، یه سایت بهتر یعنی یه تجربه بهتر. کاربرها باید بتونن بدون مشکل و نگرانی به اطلاعات مورد نیازشون دسترسی داشته باشند. توسعه دهنده ها و طراح ها باید سایتهایی بسازند که بروزرسانی و نگهداریش راحت باشه. یه سایت بهتر باید خیلی بالاتر از "مؤثر" باشه، باید بتونه روی مشتریها و کسایی که ساختنش"اثر خوبی بذاره".
یه سایت بهتر یعنی یه سایت مؤثرتر. تأثیرگذاری قلب پروژه های ماست، حالا این تأثیرگذاری میتونه به صورت در دسترس بودن ظاهر بشه یا واکنشگرا بودن یا استراتژی محتوا یا عملکرد بهتر بارگذاری صفحات. از انتخاب CSS درست تا جواب دادن به سوالات مهمی که به پروژه زندگی میبخشه، همه رو شامل میشه. اثرگذاری به معنی سریعتر شدن نیست، به معنی بهتر شدنه، به معنی همراه شدن و درک دیگرانه.
تو این مقاله نکاتی از متخصصهای مختلف جمع شده، برای همین توصیه هایی که اینجا نوشته شده موضوعات متنوعی رو در بر میگیره که همه در نهایت به دنبال تأثیرگذاری بهتر هستند. هر کدوم از این توصیه ها فقط اشاره کوچیکیه که دعوتتون میکنیم بیشتر در مورد تک تکشون تحقیق کنید و برای طراحی سایتهاتون بکار بگیرید.
ما هرچی بیشتر اطلاعاتمونو با دیگران در میون بذاریم، بیشتر هم بدست خواهیم آورد. امیدواریم مطالب این مقاله به دردتون بخوره.
باید ببینید این سایتو قراره برای کی میسازید. این افراد چرا همچین سایتی لازم دارن؟ کجا قراره ازش استفاده کنند؟ از چه دستگاههایی (موبایل، کامپیوتر، تبلت) استفاده میکنند؟ شما خودتون باهاشون صحبت کردید؟ اگه نکردید، کی صحبت کرده؟ چطوری میخواهید از خوبی سایت مطمئن بشید؟ برنامه ای برای امتحانش دارید؟ قراره برای هر گروه از مشتریها یه شخصیت نمادین درست کنید؟ میدونید دقیقا ازتون میخوان چی طراحی کنید؟ جوابی برای این سوالها دارید؟ نه؟ پس بهتره قبل از شروع ساخت سایت، براشون جواب پیدا کنید.
سایتتون دقیقا همون شکلی میشه که کدهای HTML تون بگن، موتورهای جستجو هم دقیقا همونها رو میخونن و سایتتونو همونطور میبینن. وقتی HTML رو با توجه به معنیش بنویسید میتونید تجربه بهتری برای کاربر و موتورهای جستجو رقم بزنید و به علاوه، مزایای دیگه ای هم برای خودتون بوجود بیارید.
حتما کیفیت صفحاتتونو روی نمایشگر چک کنید. اگه صفحه ای در دسترس نبود یا خراب بود، کدهاتونو اصلاح کنید. نمایشگرها در واقع فراتر از یه صفحه ساده برای نمایش سایت هستند. ازشون در طراحی تمیزتر، معناگراتر و حفظ راحتتر مارک آپ استفاده کنید.
میگیم، وب یه محیط دسترس پذیره. یه سند HTML باید بتونه در دسترس هر کسی، با هر وسیله ای، روی کندترین اتصالات اینترنتی قرار بگیره. هر تصمیمی که شما به عنوان طراح یا توسعه دهنده اتخاذ کنید ممکنه از این دسترس پذیری ذاتی حفاظت کنه یا باعث تخریبش بشه. میبینید چه قدرتی دارید؟ ازش هوشمندانه استفاده کنید.
هر صفحه وب شامل یه چیز مفید و یه مشت چیزهای دیگه است که هدف اصلی کاربر از باز کردن صفحه نبوده. بارگذاری مشروط یه ابزاره که میشه باهاش تجربه ای فول امکانات بسازید و سرعت بارگذاری صفحاتتونو با دادن اولویت به محتوای اصلی بالا ببرید. چیزهایی مثل دکمه های اشتراک گذاری مطلب، بخش نظرات، پست های مرتبط و غیره حواشی هستند.
ترجمه CSS با انیمیشن راحتتره، اما اگه همونو با عملکردهای زمانبندی سفارشی کنید خیلی عالی میشه.
عملکرد زمانبندی انتقال: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear easing */
اگه فکر میکنید نوشتن تابع Cubic-bezier با دست کار شما نیست، نگران نباشید. میتونید با ابزار Ceaser خیلی سریع یکی از معادلات رو بکار بگیرید یا خودتون معادله بنویسید.
وقتی ارتفاع صفحه ای که باز میشه کم باشه، تجربه کاربری بهتری در اختیار بیننده ها قرار میده. برای اینکار میتونید با توجه به طراحی سایتتون از انواع مختلفی استفاده کنید، اما اگه نوع درستی رو انتخاب کنید که هماهنگی خوبی بوجود بیاد دیگه نیاز به اسکرول کردن زیاد صفحه نیست و خوانایی صفحه بهتر میشه. اگه سایت بخشهایی داره که مثل نوتیفیکیشن جدا باز میشن، ارتفاع اونها رو هم کم کنید.
قبل از شناخت تمام مشکلاتی که قراره حل کنید، تصیم های تخصصی نگیرید. اگه خیلی زود بخواهید راه حل ارائه کنید، یعنی تجربه رو کنار گذاشتید و فقط از دانش بهره میبرید. بهتره کمی عقب برید و نمای کلی پروژه رو تو ذهن بیارید.
خیلی از فناوری ها میتونن هر کاری بکنید، اما به نظرتون واقعا نیازی هست؟ باید ببینید هر کدوم روی مردم، فرایندها، فناوری و تجربه چه اثری دارند؟
طبقه بندی اسامی فایلهای 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.
یه فناوری جدید اومده که اثر کار ما رو افزایش میده و میتونیم تعلقات بیشتری رو بکار بگیریم. چند نفر به طور منظم از Sass برای مدیریت مدلهاشون استفاده میکنند؟ یا از ابزارهایی مثل JSLint برای جاوااسکریپت؟ ابزارهایی که برای یکی کردن، فشرده کردن و کش کردن متعلقاتتون بکار گرفته میشن؟
ما همیشه ناخواسته فراموش میکنیم که یه سری دستورات و فایلهای قدیمی رو حذف یا درست کنیم. با استفاده از Git commit hooks دیگه هیچوقت یادمون نمیره. فقط باید یه چندتا تله از قبل مشخص کنیم و بعد همه این دستورات هر زمان که ما تغییری اعمال میکنیم اجرا میشن.
هر چقدرم که برنامه تونو تست کرده باشید و از دستگاه های مختلفی استفاده کرده باشید، باز هم ممکنه مسائل پیش بینی نشده ای اتفاق بیفتن. شما هیچ وقت نمیتونید برنامه ای راه بندازید که باگ نداشته باشه، پس بیایید به کاربرهاتون درباره مشکلاتی که موقع کار با سایتتون روبرو میشن توضیح بدید و کارشونو راحت کنید.
با استفاده از یه فرم ساده از سایت خودتون از قدرت GitHub API بهره مند بشید. خطاهای سرور رو گزارش و آنالیز کنید و از یه چیزی مثل window.onerror برای حفظ خطاهای جاوااسکریپت استفاده کنید (یا اول کدتون از {} catch(e) {} استفاده کنید). یه نفس عمیق بکشید و با هوشیاریتون کارتونو عالی کنید.
عملکرد سایتتون باید از آبشارها هم جلو بزنه. میتونید با سایت Webpagetest.org از نحوه لود سایتتون در طول زمان فیلم بگیرید، فقط کافیه تو بخش تنظیمات پیشرفته، گزینه "فیلم گرفتن" رو تیک بزنید. اینطوری میتونید سرعت سایتتونو از موقعیت های مکانی مختلف و روی دستگاه های متفاوت حس کنید و ببینید کاربرهاتون چه تجربه ای دارند.
دیگه برای تاریخ تولید از نوارهای انتخاب استفاده نکنید. خیلی از سایتها همچین قسمتی دارن. دیگه رایج شده که روی سایتها باید یه نوار انتخاب برای تاریخ تولد باشه اما نتایج تحقیقات نشون میده فهرستهای بلند بالا برای نوارهای انتخاب کار رو برای کسایی که خیلی با فناوری میونه خوبی ندارند سخت میکنه. به جاش یه کادر بذارید که خودشون متن رو وارد کنند. اینطوری حتی کسایی که زیاد از کامپیوتر استفاده نمیکنند هم میتونن همون فرم کاغذی رو روی وب وارد کنند.
اگه از قابلیت background-image برای افزودن عکس به آیکون استفاده میکنید، یه گزینه دیگه برای اینکار استقاده از background-image: cover; است. تو تئوری، اگه تصویر آیکون گوشه های گردی داشته باشه هم میتونید از background-image: cover; استفاده کنید، اما ممکنه بخشی از عکس آیکون حذف بشه. این کار باعث میشه اندازه تصویر متناسب بشه.
تو ایمیلها و کدهای دستوری خلاصه وار عمل کنید. اگه میخواهید تو نوشتن هم مختصر و مفید عمل کنید میتونید به جامعه توئیتر بپیوندید.
یه زمانی اگه میخواستید برای افزایش رتبه سایتتون سئو کنید، فقط کافی بود کل سایتتونو از کلیدواژه هاتون پر کنید. بعضی طراح ها هم که زیاد اهمیتی به درستی و غلطی کارشون نمیدادند، سایتشونو پر میکردند از کلیدواژه های بی ربط اما محبوب که مردم بیشتر سرچ میکردند. البته این کار فقط برای سایتهای تبلیغاتی جواب میداد که قصد جذب کاربر نداشتند
امروزه دیگه نمیشه با سئو مردمو فریب داد. کسب و کارهای پایبند اخلاقیات میخوان با سئو کاری کنند تا کسایی که محصولات و خدماتشونو سرچ میکنند بتونن پیداشون کنند. یعنی دیگه اینکه فقط یه نفر همینطوری تصادفا وارد سایت بشه فایده نداره، بلکه باید کاری کرد که کاربرها دوباره برگردند، برای همین محتوا انقدر مهم شده.
وبمسترها و متخصص های سئو یه جمله معروفی دارند که احتمالا تو مقاله های دارکوب هم زیاد دیده باشید: "محتوا پادشاه است". این جمله خیلی درسته. محتوای سایت حتی از خود محصولات سایت مهمتره. محتواست که بازدیدکننده ها رو جذب میکنه. اگه فکر میکنید خودتون نمیتونید محتوای خوبی بنویسید، دارکوب میتونه کمکتون کنه و نوشتن مطالبتونو به یه نویسنده آشنا با بهینه سازی-سئو بسپره.
محتوای وب دو وجه مهم داره که برای راحتی ما بهشون میگیم کیفیت و کمیت.
کیفیت یعنی محتوا باید خوب نوشته بشه و اشتباهات تایپی و علمی نداشته باشه وگرنه خواننده به صحت کل سایتتون شک میکنه. با توجه به هدفی که ما داریم، محتوا باید کلیدواژه ها رو هم زیاد بکار برده باشه و مطالب جالب و مفید باشند تا کاربر حس کنه یه چیزی بدست آورده. این میشه قدرت محتوای با کیفیت.
از طرف دیگه کمیت یعنی سایتتون باید به طور منظم با افزودن محتوای جدید بروزرسانی بشه. شاید کاربر از محتوای سایتتون خوشش بیاد و یکی دو، سه باری بهش مراجعه کنه و متوجه بشه که سایتتون هیچ وقت تغییر نمیکنه، در نتیجه دیگه دلیلی نمیبینه که باز هم به سایتتون برگرده.
به نظرتون باید هر چند وقت یه بار محتوای جدید به سایت اضافه کرد؟ در جواب این سوال متخصص ها با هم اختلاف نظر دارند. بعضی ها میگن هفته ای یکبار کافیه. بعضی ها میگن حداقل روزی دوبار. بستگی به ماهیت سایتتون داره. وبلاگ تبلیغاتی سایت باید روزی یه بار و حتی دو بار بروز بشه، اما محتوای ثابت میتونه هفته ای یکی دوبار اضافه بشه. سعی کنید فواصل زمانی رو رعایت کنید. اینطور نباشه که چند هفته هیچ مطلبی روی سایت نذارید و بعد یه دفعه ده تا مقاله بذارید.
اگه میخواهید طراح وب خوبی باشید نباید به ضروریات تخصصتون اکتفا کنید و باید مهارتهای خیلی بیشتری کسب کنید. یکی از چیزهایی که میتونه باعث موفقییتون بشه، بروز بودن و آگاهی از آخرین نکات و مدهای طراحی سایت در جهان آنلاینه.
اگه دکمه توقف رو فشار بدید و یکم به خودتون فرصت بدید، میتونید با طراحی ها و مدلهای جدید و نوظهر آشنا بشید. در عوض میتونید پروژه هاتونو، چه مال خودتون، چه مال مشتریها، تحویل بدید. اینطوری میتونید مهارتهاتونو تو این پروژه ها نمایش بدید. همین مقاله با نکات طراحی میتونه تجهیزتون کنه، بعد از خوندنش وقت مناسبی برای انجام پروژه ها و سرعت بخشیدن به جریان کاریتونه.
حتی اگه از اون آدمایی باشن که دوست ندارن از دیگران تبعیت کنند و تک رو هستید، باز هم اگه از مدهای جدید و نکات طراحی خبر داشته باشید، مزیت های خودشو داره. مثلا یکی از این مزایا اینه که وقتی با مشتریهاتون درباره سایتی که میخوان داشته باشن حرف میزنید و اونها یه چیزی یه جایی دیدند که میخوان سایتشون اونطوری باشه، بهتر میتونید متوجه حرفشون بشید و خواست و نیازشونو درک کنید.
موفقیت تو طراحی سایت براحتی به دست نمیاد. نیازی به گفتن نیست که اگه میخواهید مفید باشید و مدرن و جدید به نظر بیایید، باید برای موتورهای جستجو و نرخ تبدیل بهینه سازی انجام بدید و حتما تا جایی که میشه همیشه در حال یادگیری نکات و روشهای جدید باشید.
این مقاله نکات طراحی سایت مفیدی براتون ارائه میده که میتونید برای سایتهای وردپرسی و پروژه های مشتریهایی که روی سایتشون کار میکنید اجراش کنید یا اگر هم دوست نداشتید فقط ازشون با اطلاع باشید و از روشهای خودتون استفاده کنید.
تو دنیای نشر، راهنمای مدلها رواج زیادی دارند. گاهی تو کتابها و مستندات بزرگی هستند که رسانه ها برای متحدالشکل بودن محتواشون، قوانینشو به کار میبرن. این راهنماها از نحوه نشون دادن و برچسب گذاری کشورها گرفته تا نحوه نوشتن اعداد، همه چیز رو توضیح دادند.
طراحان سایت میتونن راهنمای مدل خودشونو درست کنند تا همه سایتها یکپارچه بشن. این جور راهنماها به خصوص خیلی به درد طراح هایی میخوره که با آزادکارها کار میکنند. اگه راهنما خوب نوشته بشه میتونه کمک کنه اعضای گروه هر کدوم وظیفه خودشونو روی صفحه بدونند و همرمان روی یه صفحه کار کنند.
گوگل یه راهنما برای طراحی مادیگرا (متریال) بیرون داده که میتونه مثال خوبی باشه.
ستونهای کناری صفحه رو شلوغ میکنند. این ستونها با هدف افزایش کارایی سایت، از طریق نمایش عناصر جهتیابی، بوجود اومده بودند. با گذشت زمان بازاریابهای تازه کار، که میخواستن به یه طریقی فرم دریافت ایمیل و محتواهای تبلیغاتی دیگه ای رو تو سایتهاشون جا بدن، یه جورایی دزدیدنش. این محتواهای تبلیغاتی و فرمهای ایمیلی همیشه هم به نفع تجربه کاربری عمل نمیکنند. در حالی که در تئوری، این ستونهای کناری باید لینکها و محتوای مفید رو نمایش بدن تا تجربه کاربری از این طریق بالا بره. اما در عمل میبینیم که بازدیدکننده های خیلی کمی ازشون استفاده میکنند. بنابراین استفاده از این ستونها تو طراحی چندان به نفعتون نخواهد بود.
البته میشه از ستونهای کناری سایتهای وردپرسی استفاده های هوشمندانه تری هم برد.
شما هم از اون دسته آدمایی هستید که با سرعت نور کد مینویسن و طراحی میکنن، و چون میدونن بعدا ویرایش و صفحه رو مرتب میکنند، اهمیت نمیدن این چیزها روی نمایشگر چطوری به چشم میان؟ اگه هستید، این مورد میتونه یه تنوعی تو نحوه کارتون بوجود بیاره.
به جای اینکه سریع بپرید سر کدنویسی و طراحی، چطوره اول با یه مداد و کاغذ یا با وایت برد ظاهر سایتتونو بکشید. با این کار میتونید جای عناصر رو مشخص کنید، مثل همون کاری که معمارها برای نقشه کشی انجام میدن و جای پنجره ها و درها و اتاقها رو مشخص میکنند.
اگه زیاد خوشتون نمیاد با مداد و کاغذ کار کنید، از ابزارهای وایرفریم سازی و طراحی سایت کمک بگیرید و قبل از اینکه شروع به توسعه محیط سایت کنید، اول هر چی سریعتر ایده هاتونو یه جا پیاده کنید.
البته تایپوگرافی بزرگ مد نشده و کاری به طراحی نداره اما چیز خوبیه. چون خیلی خوب میتونه توجه خواننده رو جلب کنه و حواسها رو به سمت محتوای سایت بکشونه.
روی نمایشگرهای کوچیکتر، مثل صفحه موبایل، خوانایی نقش مهمی تو محبوبیت سایت داره، به علاوه اینکه با طراحی های فلت و مینیمالیستی که طرفدارهای زیادی هم دارند جور درمیاد.
هرجا که جور درمیومد، حداقل اندازه 18 برای فونت نوشته هاتون انتخاب کنید تا بزرگی نوشته ها به چشم بیاد. این سایز رو برای متونی که تو تصاویر هدر هستن یا حتی متن روی صفحه اصلی و عکسها اعمال کنید. اما حواستون باشه از فونتهای مناسب وب استفاده کنید تا اندازه ها با نمایشگر خوب دربیان، تا دیگه لازم نباشه خودتون برای انتخاب اندازه فونت عذاب بدید.
اگه سایت خیلی درهم و شلوغ باشه، فضای سایت رو پیچیده نشون میده و خواننده رو گیج میکنه. اصلا بخاطر همین گفتیم ستونهای کناری رو حذف کنید. اما علاوه بر این، باید سعی کنید به جای گذاشتن عناصر زیادی روی صفحات، فضای بیشتری روی سایتتون ایجاد کنید. این کار هم در عین ایجاد ظاهر بهتری برای طراحی، در جهت کشوندن توجه خواننده به محتوای اصلی و چیزهای مهمتره.
به این فضا معمولا فضای سفید یا فضای منفی میگن، اما لزوما همیشه هم سفید نیست، به خصوص اگه سایتتون تصاویر بزرگی روی هدرها و صفحه اصلیش داشته باشه.
سعی کنید تو طراحیتون شلوغی رو به حداثل برسونید و اطراف و بین عناصر فضای خالی بیشتری داشته باشید تا کاربر رو روی سایت هدایت کنید. فضای سفید مشخص میکنه که کاربر باید به کجا توجه کنه.
استفاده از موبایل برای اتصال به اینترنت رو به افزایشه. یعنی الآن سازگار کردن سایتها با موبایل از هر زمان دیگه ای مهمتره.
برای همین هم یکی از نکات طراحی سایت، استفاده از طراحی واکنشگراست. قبلا واکنشگرا کردن سایت خیلی ساده بود، اما الآن با پیشرفت فناوری باید چیزهای بیشتری رو موقع واکنشگرا کردن سایتتون در نظر بگیرید. مثل بهینه کردن تصاویر، استفاده از فهرست های همبرگری و خیلی چیزهای دیگه.
شاید هم بخواهید از طراحی سایت موبایل-اول استفاده کنید.
گوگل طراحی موادگرا (متریال) رو سال 1393 معرفی کرد و طراح های دیجیتال هم به سرعت پیروی کردند.
اگه از طرحی فلت استفاده کرده اید، شاید وقتش باشه که مدل طراحیتونو بروز کنید و این بار طراحی موادگرا رو بکار بگیرید. نکته اصلی تو این فریم ورک طراحی استفاده از لایه های مختلف برای ایجاد سایه های زیبا در گوشه عناصره که باعث میشه عمق بیشتری به طراحی فلت مینیمال بده.
اگه میخواهید این کارو شروع کنید میتونید به مقاله هایی که دارکوب درباره طراحی متریال منتشر کرده مراجعه کنید.
اگر حس میکنید کارهایی که قراره انجام بدید میتونه مؤثرتر یا حداقل لذت بخش تر باشن، میتونید با یکم سرچ ببینید آیا ابزار جدیدی برای این نیازهاتون هست یا نه.
همونطور که نکات طراحی سایت داره هر لحظه به روز میشه و مرتبا نکات جدیدتری رو کار میان، ابزارهای طراحی هم مدام اضافه میشن و ابزارهای تازه ظهور میکنن. از برنامه های رایگانی مثل Pixate گرفته تا آپدیت هایی مثل Adobe CC apps for web designers. بد نیست همیشه یه نیم نگاهی هم به چیزای جدید داشته باشید تا کارتونو بهتر کنید و بیشتر ازش لذت ببرید.
شاید فکر کنید اگه کلی لینک روی فهرست جهتیابی، ستونهای کناری، میون پستها و حتی روی صفحه اصلی سایتتون بذارید میتونید مردم رو بهتر روی سایتتون نگهدارید، اما شاید نتیجه عکس بده. سیستم های جهتیابی پیچیده، چون حق انتخاب های زیادی به مردم میده، نتونن تصمیم بگیرن و کلا از سایتتون خارج بشن.
وقتی موارد کمتری تو فهرستهای جهتیابی و ستونهای کناری میذارید شلوغی سایتتون هم کممیشه. اینطوری ظاهر طراحی سایتتون بهتر میشه و به تجربه کاربری و نرخ تبدیل آسیب نمیزنه و حتی بهینه اش میکنه.
کیفیت عکسهایی که روی سایت استفاده میکنید رو ارتقا بدید. به جای اینکه خودتونو راحت کنید و برید سراغ تصاویر رایگان دانلودی که هر کسی میتونه با یه سرچ روی سایتهای دیگه ببینه، یکم وقت و هزینه بذارید و حداقل از سایتهایی که عکس های خاص میفروشن، عکس بخرید.
از اون بهتر اینه که خودتون عکس تهیه کنید، حالا چه خودتون عکسها رو بگیرید چه بدید عکاس براتون این کارو بکنه. میتونید هم از ترکیبی از هر دو استفاده کنید. اگه با عکسهاتون تایپوگرافی هم ترکیب کنید دیگه میزان اثرگذاری رو بیشتر خواهید کرد و بهتر میتونید پیامتونو به مخاطب منتقل کنید.
استفاده از تصاویر خوب میتونه بهتون در رسیدن به نتایج دلخواه کمک بزرگی کنه و محتواتونو از بین محتوای سایتهای دیگه خاص تر و بیادماندنی تر جلوه بده.
استفاده یا عدم استفاده از اسلایدها موضوع خیلی بحث برانگیریه.
در اکثر موارد واقعا باید از طراحی ها حذف بشن، به خصوص وقتی میخواهید عناصر حواس پرتی رو کم کنید تا کاربرها راحتتر بتونن رو سایت بچرخن. اسلایدر هم حواس کاربر رو پرت میکنه و هم نمیذاره راحت رو سایت بچرخه. از این نظر شباهت زیادی به ستونهای کناری داره، چون گزینه های زیادی پیش روی بازدیدکننده ها میذاره و حتی تعداد خیلی کمی از کاربرها ازشون استفاده میکنند.
اگه نگران صفحه اصلی سایتتون هستید، فاضی بیشتری به هدر اختصاص بدید که طراحی استاتیک خاصی داشته باشه و بتونه شفافانه برندتونو برای مشتری تعریف کنه. تکرار میکنم، از تایپوگرافی بزرگ استفاده کنید تا تصاویر استاتیک جذابیت بصری بیشتری بدید و طراحی ای بهتر از اسلایدرها نمایش بدید.
خیلی از این نکاتی که برای طراحی سایت تا اینجا گفتیم کلی و بر اساس مدهایی بودند که تو فضای دیجتالی ظهور کردند، اما تضمینی نیست که رو سایت شما اثر کنند.
ضمنا فکر نکنید مجبورید از این نکات تو طراحی سایتتتون استفاده کنید و روشهای قبلیتون یا مدهای قدیمی رو کنار بذارید.
شاید شما یا مشتریتون بخواهید روی سایت اسلایدر داشته باشید یا یه ستون شلوغ بذارید کنار سایتتون و توجهی به از مد افتاده و بی اثر بودنشون نکنید. ولی اگه بخواهید میتونید یه طراحی جدید بکار ببرید و با تست A/B مقدار اثرشو امتحان کنید. میتونید این تستو بین پیشنهاد خودتون و چیزی که مشتری ازتون میخواد انجام بدید تقسیم کنید تا برای برتری پیشنهاداتتون شاهد و دلیل هم داشته باشید.
میتونید برای نحوه بکارگیری تست A/B به مقاله دارکوب مراجعه کنید.
سیستم مدیریت محتوا، یک نرم افزار کاربردی، یا مجموعه ای از برنامه های مرتبط ست که برای تشکیل و مدیریت متن دیجیتال به کار می رود.
CMSها برای مدیریت محتوای سازمانی (ٍECM) و مدیریت محتوای وب ( WCM)استفاده می شوند. یک ECM همکاری در محل کار را، به وسیله ی ادغام مدیریت اسناد، مدیریت دارایی های دیجیتال و ثبت ویژگی ها، آسان می کند. یک WCM همکاری در نوشتن را برای وب سایت ها راحت می کند. نرم افزار ECM دارای قابلیت چاپ و نشر WCM است، اما صفحات وب ECM غالبا در پشت فایروال هستند.
مدیریت محتوای سازمانی و مدیریت محتوای وب، هر دو، دارای دو جز هستند: برنامه های مدیریت محتوا(CMA) و برنامه های تحویل محتوا(CDA). CMAها یک واسط کاربری گرافیکی (GUI) هستند، این واسط های کاربری گرافیکی اجازه می دهند که کاربر، ساخت، اصلاح، و حذف محتوا از وب سایت را، بدون نیاز به دانش در مورد HTML انجام دهد. CDA دارای سرویس back-end است که امکان پشتیبانی مدیریت و تحویل محتوایی که در CMA تولید شده است را دارا ست.
ویژگی های CMS
خدمات CMS بسیار گوناگون است، اما وظایف اصلی، فهرست کردن، جستجو و بازیابی، مدیریت قالب بندی، کنترل نسخه و چاپ آن می باشد.
ویژگی های جستجو و بازیابی، تمام داده ها را برای دست یابی سریع و آسان فهرست می کند. و اجازه می دهد که کاربران با استفاده از صفاتی مثل تاریخ انتشار، کلمات کلیدی یا نویسنده به جستجو بپردازند.
مدیریت قالب بندی، اسناد اسکن شده و داده های الکترونیکی را به HTML یا داده هایPDF تبدیل می کند.
ویژگی بازبینی و تجدیدنظر این امکان را برای محتوای اولیه ایجاد می کند که به روز و اصلاح شود. همچنین هرگونه تغییر در فایل ها را کنترل و دنبال می کند.
قابلیت انتشار این امکان را ایجاد می کند که افراد حقیقی از قالب هایی که توسط سازمان تایید شده، استفاده کرده و همانند wizardها یا هر وسیله ی دیگری، محتوا را تولید و اصلاح کنند.
یک CMS وسایل برای one to one marketing را آماده می کند. One to one marketing یک توانایی ست که محتوا و تبلیغات را بر اساس ویژگی های خاص کاربر ایجاد می کند. این محتوا و تبلیغات بر اساس اطلاعاتی ست که از کاربر به دست آمده یا به وسیله ی سایت جمع آوری شده است. برای مثال، اگر کاربر در یک موتور جستجو به دنبال دوربین دیجیتال باشد، آگهی های مربوط به فروش دوربین دیجیتال ظاهر می شود.
دلایلی دیگر از محبوبیت CMSها
URLهای سازگار با سئو
کمک رسانی آنلاین، شامل قسمت نظرات
سیستم مبتنی بر گروه
قابلیت حمایت کامل و تنظیم قالب ها
نصب آسان و مبتنی بر wizard
پنل مدیریتی چند زبانه
مرتب کردن محتوای نامحدود
حداقل کردن نیاز به سرور
مدیریت فایل
پیگیری logها
انتخاب یک CMS
بی اندازه فاکتور وجود دارد که برای سرمایه گذاری در یک CMS باید در نظر گرفته شود. همیشه ویژگی های ابتدایی آن مثل ویرایش آسان و توانایی جستجوی هوشمند در نظر گرفته می شود. اما، برای بعضی از سازمان ها، نرم افزاری که استفاده می کنند به نیاز های اساسی و مهم وابسته است.
برای مثال، مدیر CMS باید بداند چه تعداد افرادی از برنامه استفاده می کنند، که آیا CMS به پشتیبانی چندزبانه احتیاج دارد یا نه واینکه چه مقدار تیم پشتیبانی نیازست. گوناگونی در فرم داده های الکترونیکی نیز باید مورد بررسی قرار گیرد. تمامی محتواهای دیجیتال باید فهرست شده باشند.
کمپانی های فروش نرم افزار CMS
CMSهای زیادی در دونوع رایگان و پرداختی-اشتراکی، برای استفاده ی شخصی و شرکتی وجود دارد. در ادامه فقط تعداد محدودی از تولیدکننده های پلت فرم CMS را معرفی می کنیم:
SharePoint: یک مجموعه از ابرها و تکنولوژی مبتنی بر وب است که امکان ذخیره، پخش و مدیریت داده های دیجیتالی در یک سازمان را آسان می کند.
Documentum: آماده کردن وسایل برای ذخیره و بازیابی سریع محتوا، و همچنین Documentum برای دسترسی به ریز دانه ها معروف است.
M-Files: از Metatag برای مدیریت داده های الکترونیک استفاده می کند.
Joomla: یکWCMS رایگان و open source است. جوملا به زبان PHP نوشته شده است و امکاناتی نظیر caching، خوراک RSS، بلاگ ها، جستجو و پشتیبانی برای زبان های بین المللی را دارد.
WordPress: یکی دیگر از WCMSهای رایگان و open source مبتنی برPHP و MySQL است. وردپرس می تواند به عنوان بخشی از سرویس هاستینگ اینترنت استفاده شود. یا می تواند روی یک کامپیوتر محلی اجرا شود. وردپرس در جامعه وبلاگ نویسی بسیار محبوب است.
DNN: بازاریابان را با وسایل مدیریت محتوایی مجهز می کند که بدون در نظر گرفتن محل ذخیره ی داده ها، بتوانند به آسانی به داده های دیجیتالی دسترسی پیدا کنند. همچنین بتوانند محتوا را بر روی هر کانال آنلاینی قرار دهند و آن را برای هر بازدیدکننده ای شخصی کنند.
Oracle WebCenter: سه محصول اصلی، مجموعه ی اوراکل را می سازد: محتوا ی oracle webcenter، سایت های oracle webcenter، و پرتال oracle webcenter. یکی از ویژگی های اصلی oracle محتوایی ست که می تواند به صورت مرکزی در یک محل مدیریت شود و از طریق برنامه های متعدد قابل اشتراک گذاری است.
Pulse CMS: یک نرم افزار اختصاصی طراحی شده برای وب سایت های کوچک است که یک توسعه دهنده می تواند محتوا را به سایت اضافه کرده و آن را سریع و راحت کنترل کند. به دیتابیس احتیاج ندارد. و از Apache به همراه PHP5استفاده می کند.
Terminalfour: مهمترین محصول این شرکت، مدیریت سایت است. این یک نرم افزار اختصاصی مبتنی بر CMS است.
OpenText: opentext برای مدیریت محتوای زیاد، هماهنگی با ملزومات قانونی، و مدیریت محتوای آنلاین و سیار برای استفاده ی سازمانی، اختصاص یافته است.
Backdrop CMS: یک CMS رایگان و منبع باز است که به عنوان بخشی از پروژه ی Drupal به حساب می آید و تمرکز آن بر روی آماده کردن یک CMS مقرون به صرفه برای سازمان های کوچک و متوسط است. Backdrop فقط ابتدایی ترین گونه ی مدیریت محتوای وب را ارائه می دهد، اما به کمک ماژول ها قابل گسترش است.
تو طراحی تجربه کاربری یکسری عوامل پنهانی هستند که اونها تعیین میکنند آیا شما یه مشکل رو حل کردید یا باعث بروز یه مشکل جدید شدید.
چند روز پیش داشتم یه مقاله در مورد تجربه کاربری میخوندم، نویسنده میگفت کورتانا (یه برنامه ویندوز 10 که کارهای افراد رو به صورت صوتی بهشون یادآوری میکنه)، برخلاف قصدی که مایکروسافت از طراحیش داشته، سرِ کار کارایی خیلی کمتری داره و این هم بخاطره شرایطه. قسمتی از متن رو براتون عینا ترجمه کردم:
"اول اینکه کورتانا سرِ کار باعث میشه کارمندها بیشتر از اطرافیانشون فاصله بگیرند و مرزهای بزرگتری برای محدوده شخصیشون بذارن. از اونجا که همه میخوان زندگی خصوصیشون خصوصی بمونه، اونوقت سر کار هم باید فضاشون خصوصی بمونه. تحقیقات اخیر نشون میده که تلاش برای خصوصی نگهداشتن کار و زندگی به ذهن فشار زیادی میاره. وقتی مردم کورتانا رو بخوان اونطوری استفاده کنند که مایکروسافت تو اهدافش در نظر گرفته، اوضاع بدتر هم میشه.
دوم اینکه وقتی کارمندها از دستیار مجازی کورتانا استفاده میکنند، بنا به شرایطی که کورتانا بوجود میاره، طوری رفتار میکنند که انگار پادشاه یا ملکه محل کارشون هستن، نه حقوق بگیری که باید کار کنه. چون تعاملات صوتی این برنامه ایجاب میکنه که کارمندها یه محل شخصی برای خودشون داشته باشن، در حالی که چنین چیزی ندارند. عموما کارمندهای عادی همه با هم در یک محل مشترک کار میکنند، به علاوه چون ما حیوانات اجتماعی هستیم به تبعیت از قوانین نانوشته محل کارمون متمایلیم."
خلاصه اینکه اکثر ما زیاد راحت نیستیم که از یه روبات روی میزمون دستور بگیریم.