طراحی سایت با بوت استرپ

بوت استرپ (Bootstrap) چیست؟

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

1. استفاده از کد ها و امکاناتی که در فریم ورک وجود دارد باعث میشود طراح از جزئیات خارج شده و تمرکز خودش را روی زیبایی طرح بگذارد
2. فریم روک ها معمولا دارای امکانات ریسپانسیو و واکنشگرایی هستند که از مهمترین امکانات فریم ورک ها است
3. فریم ورک ها سرعت طراحی سایت را بالا میبرد
4. …

بوت استرپ شامل دستورات ، css ، html و تابع های جاوا اسکریپت برای نمایش div ها و دکمه ها و ستون ها و… است که مورد نیاز همه طراحان است.

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

امکانات بوت استرپ

این فریم ورک با تمام مرورگر های استانداری که وجوددارد کاملا همخوانی دارد و حتی با نسخه های قدیمی مثل اینترنت اکسپلورر۸ هم همخوانی دارد و ظاهر زیبایی دارد.

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

یکی از ویژگی های بوت استرپ همان طور که گفته شد متن باز بودن آن و قابلیت دانلود رایگان در github است. که باعث پیشرفت این فریم ورک در گذر زمان و همچنین راست چین کردن آن شده است تا مورد استفاده کشورهای عربی و فارسی باشد. زبان فارسی و یا عربی به دلیل اینکه نوع چیدمانش با انگلیسی خیلی متفاوت است نیاز به این دارد که کلا css و jquery آن تغییر کند و همین متن باز بودن باعث شده اسن نسخه های زیادی از فریم ورک بوت استرپ راستچین شده در اختیار باشد

نحوه عملکرد بوت استرپ

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

بوت استرپ دارای فایل های css و js است که برای طراحی سایتتان با کمک بوت استرپ باید آن ها را به فایل خودتان اضافه کنید. در سایت bootstrap.com میتوانید تمامی امکاناتی که این فریم ورک در اختیار شما قرار میدهد را مشاهده کنید و موقع استفاده از این امکانات فقط کافی است که کدها و کلاس های اختصاصی تعریف شده در این فریم ورک را در داخل کدهای خودتان استفاده کنید.

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

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

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

طراحی سایت با بوت استرپ

بوت استرپ (Bootstrap) چیست؟

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

1. استفاده از کد ها و امکاناتی که در فریم ورک وجود دارد باعث میشود طراح از جزئیات خارج شده و تمرکز خودش را روی زیبایی طرح بگذارد
2. فریم روک ها معمولا دارای امکانات ریسپانسیو و واکنشگرایی هستند که از مهمترین امکانات فریم ورک ها است
3. فریم ورک ها سرعت طراحی سایت را بالا میبرد
4. …

بوت استرپ شامل دستورات ، css ، html و تابع های جاوا اسکریپت برای نمایش div ها و دکمه ها و ستون ها و… است که مورد نیاز همه طراحان است.

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

امکانات بوت استرپ

این فریم ورک با تمام مرورگر های استانداری که وجوددارد کاملا همخوانی دارد و حتی با نسخه های قدیمی مثل اینترنت اکسپلورر۸ هم همخوانی دارد و ظاهر زیبایی دارد.

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

یکی از ویژگی های بوت استرپ همان طور که گفته شد متن باز بودن آن و قابلیت دانلود رایگان در github است. که باعث پیشرفت این فریم ورک در گذر زمان و همچنین راست چین کردن آن شده است تا مورد استفاده کشورهای عربی و فارسی باشد. زبان فارسی و یا عربی به دلیل اینکه نوع چیدمانش با انگلیسی خیلی متفاوت است نیاز به این دارد که کلا css و jquery آن تغییر کند و همین متن باز بودن باعث شده اسن نسخه های زیادی از فریم ورک بوت استرپ راستچین شده در اختیار باشد

نحوه عملکرد بوت استرپ

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

بوت استرپ دارای فایل های css و js است که برای طراحی سایتتان با کمک بوت استرپ باید آن ها را به فایل خودتان اضافه کنید. در سایت bootstrap.com میتوانید تمامی امکاناتی که این فریم ورک در اختیار شما قرار میدهد را مشاهده کنید و موقع استفاده از این امکانات فقط کافی است که کدها و کلاس های اختصاصی تعریف شده در این فریم ورک را در داخل کدهای خودتان استفاده کنید.

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

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

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

کمپین تبلیغاتی Advertising Campaign درطراحی وب سایت

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

کمپین تبلیغاتی

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

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

اهداف کمپین تبلیغاتی

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

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

مراحل طراحی و پیاده سازی کمپین

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

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

بودجه تعیین شده: در سومین مرحله بودجه مورد نظر را تعیین کنید تا بتوانید کمپین های تبلیغاتی خود را به نحو احسن انجام دهید و با بودجه نقش خود را در رسانه های اجتماعی به خوبی می توانید پیدا کنید.

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

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

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

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

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

شبکه تحویل یا توزیع محتوا یا CDN در واقع مختصر شده کلمات Content Delivery Network است که یک تعریف بین المللی در اتحادیه بین المللی مخابرات آورده شده است شبکه توزیع محتوا به هر شبکه که برای توزیع محتوا بهینه شده باشد را می گویند. این شبکه باید بهینه شده باشد تا سرعت انتقال دیتا باعث افزایش سرعت سایت شود. این شبکه ها دارای سرورهایی می باشند که در نقاط مختلف دنیا مستقر یافته اند.

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

برخی از این شبکه های توزیع محتوا هم در کشورهای خاصی متمرکز شده اند. و برخی دیگر براساس قراردادی که با وب سایت ها امضا می کنند به آنها سرویس افزایش سرعت دیتا و چهنای باند را در سایت ها فراهم می کنند و وب سایت هایی نظیر Google  ، Yahoo، Face Book و … که ترافیک بالایی دارند بسیار موثر بوده است.

CDN در طراحی سایت

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

مزیت های استفاده از CDN

شبکه توزیع محتوا از هاست های قدرتمند سرورها استفاده می کنند که دارای مزیت هایی هستند که در ذیل آنها را بررسی می کنیم:

1. افزایش سرعت در بارگذاری
2. افزایش سرعت برای بازدید کنندگان
3. افزایش امنیت در وب سایت ها
4. افزایش مقدار پهنای باند
5. کاهش هزینه ها در استفاده از چندین سرور
6. نصب بسیار آسان
7. نتایج خوب در موتورهای جستجوگر
8. استفاده از سرورهای اشتراکی

سرویس دهنده های فعال CDN

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

برای دسته های شبکه های توزیع محتوای رایگان می توانیم -Cloud Flare Coral CDN Speed Mirror – و … نام ببریم و برای دسته های شبکه های توزیع محتوای تجاری Azure ، Microsoft Windows و … را مثال بزنیم. این سیستم در تمامی دنیا سرورهایی را پوشش می دهد هنگامی که این سیستم برای وب سایت شما فعال می شود در سراسر دنیا اطلاعات وب سایت کپی و ذخیره سازی می شود. و در زمانی که بازدید کننده از وب سایت شما بازدید می کند محتوای و اطلاعات سایت شما از سروری که در نزدیک شما می باشد این اطلاعات را دریافت می کند.

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

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

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

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

ابزارهای رایگان و فری

با ۶ تا از ابزار در بهینه سازی وی سایت شما آشنا می شویم:

ابزار اول Google Analytics

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

ابزار دوم Insights

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

ابزار سوم  Google webmaster

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

ابزار چهارم MOZ

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

ابزار پنجم Google Trends

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

ابزار ششم Screaming Frog

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

نکات مهم در طراحی سایت افزایش سرعت سایت

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

المان های سایت مثل css  و Html  را فشرده سازی کنید.

منابع WYSIWYG  (what you see,what you get ، این ابزار یک جور شبیه ساز است .که به شما نزدیک ترین نتیجه را تخمین میزند. از این ابزار در طراحی سایت و به طور کلی در کارهای گرافیکی و متنی استفاده میشود.) .سایت یک صفحه ی سایت را بسیار آسان میکند، اما گاهی اوقات باعث به هم ریختن کد ها و در نتیجه طراحی سایت شما میشود. ):

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

دلایل مفید بودن کاهش حجم المان ها از نگاه گوگل :

برای کاهش حجم HTML میتوانید از PageSpeed Insights Chrome Extension استفاده کنید ،تا نسخه بهینه و کم حجم فایلان ساخته شود. فایل HTML خود را بررسی کنید و قواعد فشرده سازی HTML  را جست و جو کنید .

برای فشرده سازی css میتوانید از YUI Compressor    و   cssmin.js. استفاده کنید.

برای فشرده سازی جاوا  میتوانید از  Closure Compiler ، JSMin و همچنین YUI Compressor استفاده کنید.

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

در ضمن شما بهتر است زمانی به فشده سازی بپردازید که کار وبسایت شما ۱۰۰% تمام شده باشد در غیر این صورت باید پس از هر تغییر مجددا فشرده سازی کنید !

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

در قسمت بعد در خصوص فشرده سازی عکسا مطالبی گفته میشود !

آموزش استفاده از افزونه اسلاید ساز revslider در طراحی سایت (جلسه دوم)

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

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

چند مرحله اصلی برای تنظیمات اسلایدر وجود دارد که برای شما توضیح میدهیم:

• Content source

در این قسمت شما توانایی این را دارید که نحوه فراخوانی اسلاید ها را مشخص کنید که میتواند شامل حالت default که شما خودتان دستی تعیین میکنید مطالب اسلایدر چی باید. و حالت های post based و specific post که به شما این امکان را میدهد تا تعیین کنید از کدام یکی از پست ها مطالب اسلایدر شما فراخوانی شود. که به شما انتخاب دسته و برچسب و یا id خاصی از نوشته ها را میدهد

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

• Slider title & shortcode

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

• Select a slider type

در این بخش شما توانایی این را دارید که نوع اسلایدرتان را از لحاظ نمایش تعیین کنید. ۳ دسته اصلی standard و  hero و carousel وجود دارد که شما با زدن load a preset from this slider type میتونید حالت های ریزتری از این نوع های نمایش اصلی مشاهده کنید و آن ها را برای اسلایدر خدتان انتخاب کنید.

• Slider layout

در این بخش از تنظیمات به شما امکان این داده شده است که نحوه نمایش اسلایدر در رزولوشن های مختلف را تعیین کنید به عنوان مثال اگردر حالت tablet بیایید custom grid size را on کنید

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

• Customize

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

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

• تنظیمات جزئی تر اسلایدر

در اسلایدر سمت چپ یک سری تنظیمات ریزتری وجود دارد که به شما این امکان را میدهد تا جزئیات اسلایدرتان را تعیین کنید. تنظیماتی مثل نشان دادن navigation و یا فونت نوشته ها و یا امکان parallax سه بعدی…

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

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

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

بله، کلمات کلیدی در وب سایت شما ،چگالی دارد.

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

کلمات کلیدی در طراحی سایت

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

نحوه محاسبه کردن چگالی کلمات کلیدی

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

۱۰۰× تعدادکل کلمات در صفحه مورد نظر/ تعداد دفعات یک کلمه کلیدی

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

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

بهترین چگالی کلمات کلیدی 

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

کلمات کلیدی را در کجا قرار دهیم؟

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

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

منبع مقاله :

Keyword density

آموزش استفاده از افزونه اسلاید ساز revslider (جلسه اول)

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

درون ریزی در revslider

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

حالا فرض میکنیم شما به دمو یکی از اسلایدر ها دسترسی دارید و میخواهید از آن برای اسلایدر سایت خودتان استفاده کنید. این دمو ها به صورت فایل های زیپی هستند تا قابلیت import کردن داخل وردپرس را داشته باشند. درون این زیپ ها پوشه های img که عکس های اسلایدر داخل آن قرار دارد و  cssهای مخصوص اسلاید وهمچنین فایل txt تنظیمات اسلاید قرار دارد.

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

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

باز بستگی به نسخه ای که از آن استفاده میکنید گزینه های تنظیمات (آیکن چرخ دنده) و ادیت(آیکن مداد) ویا با باز کردن فلش رو به پایین امکان مشاهده و export و یا کپی کردن و … اسلایدری که دارید را میتوانید در همان صفحه اسلایدر ها انتخاب کنید.

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

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

برون ریزی اسلایدر ساخته شده

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

در آموزش های بعدی طراحی سایت اسپیناس نحوه کار کردن با صفحه تنظیمات و صفحه ادیت…را به شما آموزش میدهیم با ما همراه شوید

نکات مهم در طراحی سایت افزایش سرعت سایت(قسمت ۳ )

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

در این قسمت در خصوص کش کردن وبسایت نکاتی توضیخ داده میشود.

۴- کش مرورگر ها رو فعال کنید ! :

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

تنی تیوور ، کارمند سابق یاهو در این خصوص توضیحاتی ارائه میکند :

” زمانی که شخصی برای بار اول به وبسایت شما ورود میکند. مجبور میشود تمامی HTML ها ، استایل ها ، فایل های جاوا و عکس ها رو دانلود کند و قبل از آن نمیتواند سایت را ببیند.به طور متوسط ۳۰ المان وجود دارد و این کار حدود ۲٫۵ ثانیه طول میکشد” ( البته این مقدار با سرعت اینترنت اوناس برا ما حدود ۱۵ تا ۲۰ دقیقه طول میشکه

:: بازدید از این مطلب : 41

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

قالب آماده وب سایت

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

تفاوت قالب اختصاصی با قالب آماده

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

معایب قالب های آماده

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

ارزش وب سایت شما

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

با خرید دامنه ، طراحی سایت را شروع کنیم!

دامنه Domain

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

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

هر دامنه دارای دو بخش است که با نقطه جدا می شود دامنه های ایرانی با پسوند .ir شناخته شده هستند. برای کسب اطلاعات در مورد دامنه می توانید Whois  بگیرید. در مورد  Whois  توضیح کوتاهی می گوییم یک پایگاه داده است که برای ثبت دامنه است. با جستجوی یک دامنه در این پایگاه داده به راحتی اطلاعات مربوط به DNS ها ، مشخصات مالک دامنه، آدرس و شماره تماس و حتی ریجسترار هم می توانید به دست آورید.

معرفی پسوندها

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

.net به معنی شبکه است که مخفف Network می باشد این پسوند بیشتر برای شرکت هایی که ارائه دهنده خدماتی نظیر اینترنت یا شبکه هستند این پسوند را انتخاب می کنند

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

.irمخفف Iran می باشد که این پسوند نشان دهنده دامنه های داخل یک کشور است. دامنه هایی با پسوند کشورها با تابعیت همان کشور مورد استفاده قرار می گیرد.

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

.gov به معنی دولتی است مخفف Goverment می باشد برای نهادهای دولتی استفاده می شود .

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

.info به معنی اطلاعات است مخفف Information می باشد. برای پایگاه اطلاعاتی مورد استفاده می شود

DNS دامنه

DNS دامنه مخفف کلمات Domain Name System است برای هر دامنه یک هاست و فضای میزبانی باید وجود داشته باشد به عنوان مثال یک خانه را در نظر بگیرید DNS ها همان آجر های خانه هستند. برای تنظیم های DNS بر روی هاست اسپیناس باید به صورت زیر تغییر یابد.

ns1.espinasweb.com

ns2.espinasweb.com

Sub Domain

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

نکات مهم در طراحی سایت جهت افزایش سرعت سایت !

“چرا انقدر سرعت سایت پایینه ! ، مشکلی هست تو طراحی سایت ؟

”   تقریبا غیر ممکنه که سایت داشته باشید و اینو از یکی نپرسیده باشید :[

امروز ۱۰ تا نکته بسیار مهم رو در طراحی وبسایت میگم  که تو سرعت سایت شما بسیار حائز اهمیت هستند.

۱- کاهش دفعات درخواست HTTP :

طبق آمار یاهو تقریبا ۸۰ درصد زمان بارگذاری کامل صفحه وبسایت شما ، مربوط به دانلود قسمت های مختلف شامل تصاویر ، لود کردن استایل ها ، فلش ها ، اسکریپت ها و… میشود. برای دانلود هر کدام از المان های بالا یک درخواست HTTP  داده میشود.

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

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

المان های مختلف موجو در هر صفحه رو ساده سازی کنید ( کمتر کنید)

تا حدی که ممکن است از CSS  به جای تصاویر و محتویات گرافیکی استفاده کنید.

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

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

به یاد داشته باشید وقتی موضوع به وبسایت ها میرسه هرچی وبسیات لاغر تر (کم حجم تر ) باشه بهتره !

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

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

در قسمت بعدی در خصوص کاهش سرعت پاسخ سرور ها توضیحاتی میدم.

انتخاب رنگ مناسب برای طراحی سایت

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

تاثیر رنگ بندی صفحه بر جذب مخاطب

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

رنگ مناسب سایت شما چیست؟

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

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

اصول انتخاب رنگ مناسب برای طراحی سایت

• رعایت کنتراست رنگ ها

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

• شادابی رنگ بندی

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

• انتخاب طیف های رنگی مکمل

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

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

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

Favicon در طراحی سایت

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

استفاده از Favicon

در بیشتر وب سایت هایی که در مرورگر ها باز می کنید. در نوار مرورگر یک آیکون قرار دارد که در حدود ۹۰ درصد وب سایت ها این آیکون را دارا هستند. این آیکون Favicon نام دارد که اندازه بسیار کوچکی دارد که ۱۶ در ۱۶ پیکسل می باشد. کلمه Favicon از ادغام دو کلمه انگلیسی Favorite  و Icon است. همان تصویر در تب های مرورگر نمایش داده می شود. هر سایتی باید Favicon داشته باشد. اگر تصویر که می خواهید در اختیارتان نیست. ما پیشنهاد می کنیم که Favicon را خودتان بسازید. زمانی که Favicon را انتخاب کردید باید فرمت های ico – gif – png را انتخاب کنید . بیشتر مرورگر ها این فرمت را ساپورت می کنند.

Favicon در گوشی های موبایل

در طراحی سایت Favicon هم میتوان تنوع بالایی داشت ما می توانیم سایز های مختلفی برای گوشی ها و تبلت ها طراحی کنیم. به عنوان مثال در کدهای Favicon می توان مواردی را داشت که با گوشی های اپل سازگار باشد اندازه Favicon برای پشتیبانی شدن در دیوایس های مدرن امروزی باید در حد کیفیت ریتنا باشد. به عنوان مثال در زمانی که یک وب سایت دارای Favicon ریتنا است در گوشی باز می شود کاربر با انتخاب دکمه  add to home screen یک آیکون به صفحه گوشی اضافه می شود که همان Favicon سایت می باشد.

مزایای Favicon

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

لطفا وارد سایت http://www.favicon.cc/ شوید. می توانید با این سایت Favicon دلخواه خود را طراحی کنید.