توسط عارفه عسکری | آبان ۶, ۱۳۹۹ | آموزش طراحی سایت
با دسترسی روز افزون به اینترنت از طریق دستگاه های تلفن همراه، داشتن یک طراحی وب ایستا که فقط در صفحه‌ی کامپیوتر خوب به نظر می رسد دیگر کافی نیست.ناگفته نماند، شما همچنین باید در هنگام ارائه یک طرح، تبلت ها و مدل های مختلف تلفن های هوشمند با ابعاد صفحه نمایش متفاوت را نیز در نظر بگیرید.با طراحی وب پاسخگو ، می توانید مطمئن شوید که وب سایت شما در تلفن های همراه، تبلت ها، لپ تاپ ها و صفحه های دسکتاپ بهترین عملکرد را داشته باشد. و این بهبود در تجربۀ کاربر به معنای تعاملات بیشتر و رشد تجارتتان میباشد.
یک طراحی وب پاسخگو چیست؟
یک طراحی پاسخگو رویکردی برای طراحی وبی است که باعث شود محتوای وب شما با اندازه های مختلف صفحه و انواع دستگاه ها سازگار باشد.
به عنوان مثال، محتوای شما ممکن است در صفحۀ دسکتاپ به ستونهای مختلف تفکیک شود، زیرا آنها به اندازه کافی بزرگ و متناسب با آن طراحی هستند.
اگر محتوای خود را در یک دستگاه تلفن همراه به چندین ستون تفکیک کنید، خواندن و تعامل برای کاربران شما دشوارتر می شود.
یک طراحی پاسخگو این امکان را فراهم می کند که بسته به اندازۀ صفحه، چندین طرح جداگانه از مطالب و طرح خود را به دستگاه های مختلف ارائه دهید.
طراحی وب پاسخگو
مقایسه طراحی وب پاسخگو با طراحی انطباقی (Adaptive design)
تفاوت بین طراحی پاسخگو و طراحی تطبیقی این است که طراحی پاسخگو ارائه یک نسخه از یک صفحه را متناسب صفحه‌ی مورد نظر می کند. اما در طراحی انطباقی چندین نسخۀ کاملاً متفاوت از همان صفحه ارائه داده می شود.
هر دوی آنها در طراحی وب امری ضروری هستند که به مدیران وب سایت کمک می کنند تا سایت خود را در صفحه های مختلف کنترل کنند، اما روش آنها متفاوت است.
با طراحی پاسخگو، کاربران بدون در نظر گرفتن دستگاه از طریق مرورگر خود به همان فایل اصلی دسترسی پیدا می کنند، اما کد CSS طرح آن را کنترل می کند و بر اساس اندازه، صفحه‌ی متفاوتی ارائه می دهد. با طراحی تطبیقی، اسکریپتی وجود دارد که اندازه صفحه را بررسی می کند و سپس به الگویی که برای آن دستگاه از قبل طراحی شده است دسترسی پیدا می کند.
مقایسه طراحی وب پاسخگو با طراحی انطباقی (Adaptive design)
چرا طراحی پاسخگو حائز اهمیت است؟
اگر شما در زمینه طراحی و توسعه وب سایت یا وبلاگ نویسی تازه وارد هستید، ممکن است تعجب کنید که چرا طراحی پاسخگو اینقدر اهمیت دارد.
پاسخ ساده است. طراحی کردن برای تنها یک دستگاه دیگر کافی نیست. امروزه ترافیک وب حاصل از موبایل از دسکتاپ پیشی گرفته است و هم اکنون بیشترین بازدید وب سایت با بیش از ۵۱% بازدیدها را تشکیل می دهد.
دلیل اهمیت طراحی وب پاسخگو
وقتی که بیش از نیمی از بازدیدکنندگان احتمالی شما از دستگاه تلفن همراه برای مرور در اینترنت استفاده می کنند، شما نمی توانید فقط یک صفحه‌ای که برای دسکتاپ طراحی شده را به آنها ارائه دهید. چرا که در این صورت خواندن و استفاده از آنها دشوار و منجر به تجربه بد کاربر می شود.
آیا سایت های وردپرس پاسخگو هستند؟
پاسخگو بودن یا نبودن سایت های وردپرس به تم سایت وردپرس شما بستگی دارد. تم وردپرس معادل یک الگو برای یک وب سایت ثابت است و طراحی و قالب مطالب شما را کنترل می کند.
برای اینکه ببینید تم وردپرس شما پاسگو است یا خیر، می توانید نحوه نمایش آن را در دستگاه های مختلف یا با استفاده از Chrome Developer Tools تست کنید.
بلوک های ساختاری یک طراحی وب پاسخگو
در این بخش، ما پایه و اساس طراحی یک وب سایت پاسخگو و بلوک های مختلف ساخت آن را پوشش خواهیم داد.
CSS و HTML
بلوک های ساختاری یک طراحی وب پاسخگو
اساس طراحی پاسخگو ترکیبی از HTML و CSS است، دو زبانی که محتوا و طرح صفحه را در هر مرورگر وب کنترل می کنند.
HTML به طور عمده ساختار، عناصر و محتوای یک صفحه وب را کنترل می کند. به عنوان مثال، برای افزودن تصویر به وب سایت، باید از کد HTML مانند زیر استفاده کنید:
<img src=”image.gif” alt=”image” class=”full-width-img”>
می توانید یک “class” یا “id”نیز به آن اضافه کنید که بعداً بتوانید با کد CSS بر روی آن تغییر ایجاد کنید.
همچنین می توانید اتریبیوت های اصلی مانند ارتفاع و عرض را در کد HTML خود کنترل کنید، اما این دیگر بهترین روش محسوب نمی شود.
در عوض، از CSS برای ویرایش طرح و الگوی عناصری که در صفحه ای با HTML قرار داده‌اید استفاده می شود. کد CSS را می توان در بخش <style> یک متن HTML یا به عنوان یک فایل صفحه جداگانه قرار داد.
به عنوان مثال، ما می توانیم عرض تمام تصاویر HTML را در سطح یک عنصر ویرایش کنیم:
img {
width: 100%;
}
یا می توانیم کلاس خاص “full-width-img” را با اضافه کردن یک نقطه در ابتدای آن هدف قرار دهیم.
.full-width-img {
width: 100%;
}
همچنین می توانید طراحی را فراتر از تنها ارتفاع، عرض و رنگ کنترل کنید. استفادۀ اینگونه از CSS، نحوۀ ایجاد پاسخگویی در طراحی است که شما آن را با روشی به نام media query ترکیب می کنید.
Media Queries
یک media query بخشی اساسی از CSS3 است که به شما امکان می دهد محتوا را به گونه‌ای ارائه دهید تا با عوامل مختلف مانند اندازه صفحه نمایش یا وضوح تصویر سازگار شود.
Media Queries
این کار چیزی شبیه به به روش “if{}” در برخی از زبان های برنامه نویسی کار می کند، این اساساً قبل از اجرای کد بررسی می کند که نمای دید(viewport) صفحه به اندازه کافی گسترده یا خیلی گسترده باشد.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}
با توجه به کد بالا، اگر صفحه حداقل ۷۸۰ پیکسل عرض داشته باشد، تصاویر کلاس “full-width-img ” 90٪ از صفحه را اشغال می کنند و به طور خودکار با حاشیه هایی هرکدام به اندازۀ ۵% صفحه (۵% در راست و ۵% در چپ که در مجموع ۱۰% از صفحه جزو حاشیه محسوب می شود) در مرکز قرار میگیرند.
Fluid Layouts
یک fluid layout بخشی اساسی در طراحی وب پاسخگوی مدرن است. در زمان های قدیم، شما برای هر عنصر HTML یک مقدار ثابت مانند ۶۰۰ پیکسل تعیین می کردید.
Fluid Layouts
این طرح در عوض بر مقادیر پویا مانند درصد عرض نمای دید متکی است. این روش به طور پویا اندازه های مختلف عناصر را بر اساس اندازه صفحه نمایش افزایش یا کاهش می دهد.
تصاویر پاسخگو
ساده ترین نوع تصاویر پاسخگو همان مفهوم fluid layout را دنبال می کند که از یک واحد پویا برای کنترل عرض یا ارتفاع استفاده می کند. این نمونه کد CSS این امر را محقق میکند:
img {
width: 100%;
}
واحد ٪ تقریباً به یک درصد از عرض یا ارتفاع نمای دید نزدیک می شود و اطمینان حاصل می کند که تصویر متناسب با صفحه باقی بماند.
مشکلی که در این رویکرد وجود دارد این است که هر کاربر مجبور است تصویر را بطور کامل، حتی در تلفن همراه، دانلود کند.
برای ارائه نسخه های مختلف که برای دستگاه های با اندازه‌ی مختلف استفاده می شود، باید از اتربیوت HTML srcset در تگ های img خود استفاده کنید تا بیش از یک اندازه برای تصویر را انتخاب کنید. اینگونه بسته به اندازه‌ی صفحه عکس ها مطابق اندازه‌ی مشخص شده نشان داده می شوند.
<img srcset=”large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w”
src=”small.jpg”
/>
وردپرس به طور خودکار از این قابلیت برای تصاویر موجود در پست ها یا صفحات خود استفاده می کند.
پایان
امیدواریم مطالب این مقاله به شما در یادگیری دربارۀ طراحی وب سایت های پاسخگو کمک کرده باشد.
معرفی برترین افزونه های طراحی وب برای سایت وردپرس + لینک دانلود افزونه ها
توسط آقای نجفی | بهمن ۳۰, ۱۳۹۸ | آموزش سئو
سرعت سایت به مسائل مختلفی بستگی دارد و صرفا حجم محتوا نمی تواند بیانگر سرعت خوب سایت باشد، حتی اگر حجم صفحه شما ۱۰ مگابایت باشد می توان سرعت لود ان را تا ۲ ثانیه کاهش داد، از طرفی دیگر ممکن است حجم سایت شما ۳۰۰ کیلوبایت باشد اما سرعت لود آن بالاتر از ۱۰ ثانیه برود. پس دانستن تمام جزئیات کاهش سرعت سایت می تواند به شما کمک کند تا در gtmetrix و google insight رتبه ی مطلوبی داشته باشید.
توجه فرمایید که این آموزش بصورت بومی تهیه شده است و ممکن است با آموزش های بین المللی متفاوت باشد، برخی از پلاگین ها و سیستم ها یا به دلیل تحریم ها و یا به دلیل فیلترینگ به خوبی کار نمی کنند لذا توجه فرمایید که استفاده از ابزار های مفید جهت کاهش سرعت سایت نیازمند دانش کافی از اینگونه مسائل نیز هست و نباید صرفا به مقالات خارجی اکتفا کرد.
سرعت سایت به چه مسائلی بستگی دارد؟
۱.پلاگین ها و اسکریپت های بکار برده شده
درحال حاضر مهم ترین عامل تاثیرگذار در سرعت وبسایت پلاگین ها هستند، با توجه به اینکه اغلب سایت ها بر پایه وردپرس راه اندازی می شوند دانستن اینکه از چه پلاگینی استفاده می کنیم و چه تاثیری بر سرعت دارد بسیار ضروری است.
۲.قالب و المان های بکار برده شده در سایت
قالب سایت شما، عکس ها، جاوا اسکریپت ها بسیار می توانند روی سرعت سایت شما اثرگذار باشند، بطور مثال اگر شما لینک عکسی را در سایت قرار دهید و آن عکس به هر دلیل از سرور حذف شود سرعت سایت شما ۳ تا ۶ ثانیه افزایش خواهد یافت، همین مساله در مورد سایر فایل ها نیز صادق است، از طرفی اگر سایز اصلی عکس ها با آنچه در سایت نمایش داده می شود متفاوت باشد در سرعت لود سایت اثر می گذارد، همچنین حجم قالب و پیکربندی آن بسیار مهم است، مثلا اگر جاوا اسکریپت های غیر ضروری مانند آمار، پاپ آپ، جاوا اسکریپت های مربوط به دکمه ورود و … درون فوتر نباشد سرعت سایت شما بی جهت افزایش میابد، پس بسیار مهم است که فایل های شما اصطلاحا” minifi شده باشند.
۳. سرور یا هاست مورد استفاده شده
گاهی ممکن است کیفیت سرور باعث افزایش سرعت سایت شود، با توجه به اینکه امروزه دیگر مشکلی بابت سرعت سرور به چشم نمیخورد و اغلب سرورها سرعت مطلوبی دارند این موضوع اولویت چندانی ندارد اما لوکیشن سرور بسیار مهم است، بطور مثال اگر شما در ایرا نهستید برای سرعت بهتر لازم است که از سرور های ایران استفاده کنید و یا اگر سرور شما در خارج قرار دارد از سرویس های CDN یا ابری استفاده کنید تا سرعت بهتری را تجربه کنید.
۴. نوع گواهینامه SSL و تنظیمات مربوط به ریدایرکت های دامنه
یکی از مشکلات شایع در بالا بردن سرعت لود سایت استفاده از گواهینامه های نامعتبر است که ممکن است چند میلی ثانیه روی سرعت اثرگذار باشد، مششکل رایج دیگر عدم ریدایرکت صحیح سایت به www یا https://www است که با بهینه کردن سایت می توانید این مشکلات را از بین ببرید.
چطور می توان سرعت سایت را سنجید؟
گاهی ممکن است که علت کند بودن سایت از جانب شما باشد پس برای اینکه بتوان بصورت دقیق سرعت عمومی سایت را سنجید ابزار هایی وجود دارند که می توانند به شما کمک کنند، مهم ترین ابزار های سنجش سرعت سایت GTmetrix و Google insight هستند، و یکی از ابزار های مشابه ایرانی نیز سایت wakav.ir می باشد.
GTmetrix چیست و چگونه از آن استفاده کنیم؟
این سرویس بصورت دقیق تمامی محتوای سایت و سیستم های بهینه سازی سایت را بررسی می کند و هر کجا که ایرادی باشد به شما نمایش می دهد، در ادامه ویدئویی در خصوص کار با این سایت مشاهده می کنید.
ابزار سنجش سرعت سایت Google Insight چیست؟
این ابزار که بتازگی توسط گوگل منتشر شده است سایت را در دو نسخه موبایل و دسکتاپ ارزیابی می کند، گوگل اینسایت یکی از سخت گیر ترین ابزار آنالیز سرعت است و اگر سایت شما در این ابزار بهینه باشد می توان گفت خیالتان کاملا راحت خواهد شد.
ابزار ایرانی واکاو wakav چیست
واکاو یک سیستم ایرانی سنجش سرعت سایت مشابه gtmetrix است.
معرفی پلاگین های مناسب سئو
سئو کردن و بهینه کردن سایت و رسیدن به سرعت لود عالی در وردپرس
معرفی روش ها و ابزار هایی که می تواند به سرعت سایت شما کمک شایانی نماید.
افزونه Really Simple SSL
این افزونه به شما کمک می کند که تنظیمات SSL یا همان https را در سایتتان بهینه کنید، توجه فرمایید که اگر از هاستینگ کلاته استفاده کنید نیازی به خرید و تنظیم خاصی برای اس اس ال نیست و فقط کافیست این پلاگین را نصب کنید، بیشتر هاستینگ ها هم به همین صورت هستند اما اگر هاستینگ شما به شما اس اس ال رایگان اعطا نکرده میبایست ابتدا نسبت به خرید ان اقدام کنید. تنظیمات ssl را می توانید بصورت دستی نیز وارد نمایید اما به دلیل نیاز به دانش فنی با این پلاگین براحتی می توانید تنظیمات را اعمال نمایید. مشاهده پلاگین Really simple ssl در مخزن وردپرس.
افزونه wp fastest cache premium
این افزونه می تواند با قدرت بسیار بالا سایت شما را بهینه سازی کند بطوری که حتی اگر صرفا همین افزونه را روی وردپرس خود نصب کنید می توانید بدون نیاز به هر روش دیگر سایت خود را بهینه کنید. مشاهده نسخه رایگان در مخزن وردپرس.
دانلود نسخه پریمیوم
افزونه auto optimize
افزونه auto optimize یک افزونه قدرتمند در زمینه کش و یکپارچه سازی وبسایت است و نیاز ضروری یک سایت وردپرسی محصوب می شود، معمولا نباید افوزنه های بهینه سازی در کنار هم نصب شوند چون باعث بروز اختلال در سایت می شوند اما این افزنه بخوبی با wp fastest cache همخوانی دارد و می توان این دو را در کنار هم نصب کرد. مشاهده صفحه این افزونه در مخزن وردپرس.
افزونه Smush PRO
افزونه اسموش جهت کاهش حجم عکس ها و بهینه سازی آنها مورد استفاده قرار میگیرد و یکی از بهترین پلاگین های وردپرس برای مدیریت و بهینه سازی عکس ها است، نسخه رایگان این افزونه در این صفحه موجود است و شما می توانید نسخه پرو این افزونه را از سایت کلاته دانلود کنید. دانلود نسخه Smush pro.
افزونه Disable google Fonts
این افزونه بیشتر مناسب سایت های ایرانی است به این دلیل که فونت های گوگل زبان فارسی را پشتیبانی نمی کنند و اگر سایت شما به زمان فارسی باید نیازی به فونت های گوگل ندارید اما این فونت ها برای شما لود می شوند در نتیجه با غیر فعال کردن آن ریکوئست های سایت شما کاهی میابد. مشاهده صفحه افزونه disable google fonts.
افزونه Disable Cart Fragments
این پلاگین مخصوص سایت هایی است که از ووکامرس استفاده می کنند، پس اگر شما از ووکامرس استفاده نمیکنید ازین پلاگین صرف نظر کنید، کارید این پلاگین این است که برخی قسمت های غیر ضروری برای افزودن به کارت را غیرفعال نماید تا سرعت لود سایت افزایش یابد. مشاهده صفحه این پلاگین در مخزن وردپرس.
ویدئو اول آموزش کاهش سرعت سایت
استفاده از cookie-free domain
define(“WP_CONTENT_URL”, “http://static.yourwebsite.com”); define(“COOKIE_DOMAIN”, “www.yourwebsite.com”);
کد بالا و کد زیر را طبق ویدئو زیر اجرا کنید.
UPDATE wp_posts SET post_content = REPLACE(post_content, ‘http://www.domainname.com/wp-content/uploads/’,’http://static.domainname.com/’)
توسط احمد کلاته | مهر ۶, ۱۳۹۶ | آموزش سئو, بازاریابی اینترنتی
در این مطلب قصد دارم آموزش بهینه سازی سایت را بصورت مختصر و به زبان ساده خدمت شما ارائه کنم.
با دانشجویان مدرسه بازاریابی اینترنتی که صحبت می‌کنم، متوجه می‌شوم آموزش بهینه سازی سایت را به درستی فرا نگرفته‌اند. به همین دلیل یا از انجام آن ترس دارند یا به روش‌های اشتباهی به سئو سایتشان می‌پردازند.
آموزش بهینه سازی سایت شامل ۳ نوع است:
آموزش بهینه سازی سایت به روش کلاه سفید، سیاه و خاکستری.
سئو کلاه سفید یعنی از روش‌ها و تکنیک‌های کاملا درست و استاندارد گوگل برای بهینه سازی سایت استفاه شود.
سئو کلاه سیاه یعنی از روش‌های کاملا غیر متعارف و غیر استاندارد استفاده شود. این روش پر ریسک است و اگر گوگل متوجه آن شود بی رحمانه جریمه میکند. اما در حال حاضر در ایران کسانی هستند که بهینه سازی سایتشان را به این روش انجام می‌دهند و نتیجه هم گرفته‌اند.
حال چه زمانی گوگل آنها شناسایی و جریمه کند معلوم نیست.
سئو کلاه خاکستری روشی است بین سیاه و سفید. در این روش از روش‌های متنوع نه چندان استاندارد اما بسیار تاثیرگذار استفاده می‌شود.
در ایران اغلب افراد به این روش روی آورده‌اند.
روال کلی آموزش بهینه سازی سایت
روال کلی سئو سایت به دو روش انجام می‌شود. سئو داخی سایت. سئو خارجی سایت.
سئو داخلی سایت
سئو داخلی تمام فعالیت‌هایی است که ما برای سئو کردن محتوای داخل سایتمان انجام می‌دهیم.
منظور از از سئو و بهینه سازی محتوای داخل سایت چیست؟
از همان ابتدایی که سایتتان را راه اندازی کرده‌اید و می‌خواهید در آن محتوا قرار دهید باید این موراد را رعایت کنید:
اول از همه عنوان سایت و معرفی کوتاه سایتتان را بهینه کنید. برای این کار اگر سایتتان وردپرس است به آدرس تنظیمات>همگانی رفته و سایتتان را با مهمتری کلمات کلیدی مربوط به کسب وکارتان تعریف کنید.
مطالب و محصولات سایتتان را با توجه به کلمات کلیدی دسته بندی کنید.
اگر می‌خواهید در سایتتان محتوا تولید کنید آن را بطور منظم و طی زمان‌های مساوی تولید کنید.
حدالمقدور محتوایی که تولید می‌کنید حول یک کلمه کلیدی باشد.
کلمات کلیدی را از طریق google keyword planner یا keywordtool یا uber suggest یا kwfinder بدست آورید.
چگالی کلمات کلیدی باید در حد مجاز باشد. نه بیشتر و نه کمتر (۲ درصد مناسب است که از این درصد اگر سایتتان با وردپرس است توسط افزونه یواست سئو می‌توانید آگاه شوید)
تیتر مطلب سایتتان باید شامل کلمه کلیدی باشد.
حتما در متن، کلماتی که به محتواهای دیگر سایتتان مرتبط است، به آن مطالب لینک دهید.
مطالب مرتبط را حتما داخل متن قرار دهید که کاربر در هنگام خواندن آن در صورت تمایل روی آن کلیک کند. این باعث بالارفتن time on page و کاهش بونس ریت سایت می‌شود.
۱۱. داخل متن، عکس‌های جذاب قرار دهید. همچنین فراموش نکنید که متن جایگزین عکس را کلمه کلیدی قرار دهید. (خاصیت alt)
۱۲. حدالمقدور همان متنی که تولید می‌کنید فیلمش را هم ضبط کنید (حتما نیاز نیست خودتان جلو دوربین باشید) و در بین متن قرار دهید. برای این کار ابتدا فیلم را در یوتیو آپلود کنید سپس لینک فیلم یوتیوب را در آپارات قرار دهید (که مجبور نباشید دوباره آپلود کنید). آپارات برای هر فیلم یک کد مخصوص قرار می‌دهد که اگر آن را هر جایی از متن قرار دهید، قابل مشاهده خواهد بود.
۱۳. فکر نکنید که اگر در محتوا به سایت‌های رقیب یا هر سایت دیگر لینک دهید متضرر می‌شوید. به هیچ وجه اینطور نیست.
این کار علاوه بر اینکه حرفه‌ای بودن شما و سخاوت شما را نشان می‌دهد، باعث افزایش اعتبار نوشته شما نیز خواهد شد.
البته این نکته را فراموش نکنید که سایتی که می‌خواهید به آن لینک دهید حتما باید دارای اعتبار دامنه بالایی باشد.
آموزش بهینه سازی سایت که در بالا خدمتتان ارائه شد چکیده‌ای از مهمترین نکاتی بود که باید در سئو داخلی سایتتان رعایت کنید.
لطفا برای مطالب بالا ارزش زیادی قائل شوید. این مواردی که خدمتتان ارائه شد بسیار ارزشمند است چراکه بعضی از موارد طی تحقیقات و تجربیات بسیار بدست آمده است.
