قالب هاي رايگان وردپرس

قالب هاي رايگان وردپرس

“قالب هاي رايگان وردپرس”

سلام به وب سايت ميلاد وردپرس خيلي خوش آمديد. در اين سري از مقاله هاي جامع دنياي وردپرس، شما را به مطالعه اين مقاله با عنوان قالب هاي رايگان وردپرس دعوت مي نمايم.

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

پس تا انتهاي اين مقاله با کامل ترين مرجع وردپرس در ايران همراه باشيد.

قالب رايگان وردپرس

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

“قالب رایگان وردپرس” با امکاناتی که در اختیار شما قرار می‌‌دهد، شما را از برنامه‌‌نویسی نجات خواهد داد.
پوسته‌‌های موجود در دنیای وردپرس به دو صورت رایگان و غیر رایگان وجود دارند.

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

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

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

چرا که در مخزن وردپرس ثبت شده‌اند و برای سایت شما مشکلات امنیتی ایجاد نخواهند کرد.

نکاتی درمورد انتخاب قالب وردپرس:

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

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

قبل از انتخاب قالب، ما زمان و نیاز های خود را در نظر میگیریم.

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

با جستجوی عبارت قالب وردپرس، گوگل 12.900.000 نتیجه به شما نشان می دهد.

قطعاً معرفی بهترین و مناسب ترین قالب برای کسب و کار شما کار دشواری است ولی بهتر است در انتخاب قالب وردپرس به چند مورد دقت کنید :

  • ویژگی های کلیدی و قابلیت های اصلی قالب
  • بررسی های ظاهری و امتیاز کاربران به قالب
  • پشتیبانی تیم برنامه نویس و به روز رسانی مداوم قالب

قالب هاي رايگان در وردپرس

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

تا انتها مارا دنبال نمایید.

قالب فروشگاهی Shapely

قالب فروشگاهی Shapely

قالب فروشگاهی Shapely

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

  • تغییر جعبه ی متنی
  • تغییر در اطلاعات فوتر و تنظیم بخش های مختلف آن
  • تغییر رنگ بندی ها
  • و…

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

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

دانلود قالب به صورت رایگان

قالب چند منظوره Illdy

قالب چند منظوره Illdy

قالب چند منظوره Illdy

قالب illdy در ميلاد وردپرس یک قالب وردپرس Bootstrap قدرتمند و مدرن است که با تکنیک های منعطف و سفارشی شده ای ایجاد شده است.

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

پیش نمایش  دانلود قالب

قالب وبلاگی Sparkling

قالب وبلاگی Sparkling

قالب وبلاگی Sparkling

قالب Sparkling در ميلاد وردپرس که یک قالب وردپرس Bootstrap می باشد با ظرافت خاصی طراحی شده و از همه مهم تر اینکه با آخرین تکنولوژی بوت استرپ پیاده سازی شده است.

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

قالب Sparkling از گرویتی فرم، فرم تماس 7، افزونه ی سئو و… پشتیبانی می کند.

پیش نمایش  دانلود

قالب چند منظوره Activello

قالب چند منظوره Activello

قالب چند منظوره Activello

این قالب در ميلاد وردپرس کاملا امکان شخصی سازی شدن را دارد و با جدیدترین تکنولوژی روز بوت استرپ پیاده سازی شده است.

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

همچنین نقطه ی قوتی که دارد چند منظوره بودنش است.

پیش نمایش  دانلود

قالب شرکتی Dazzling

قالب شرکتی Dazzling

قالب شرکتی Dazzling

قالب در ميلاد وردپرس با عنوان Dazzling یکی از زیباترین قالب ها بر پایه ی بوت استرپ 3 می باشد که کاملا واکنش گرا و موبایل دوست است!

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

در واقع اساس طراحی این پوسته ی وردپرسی بر پایه ی طراحی فلت است و همچنین از افزونه های سئوی وردپرس، جت پک، فرم تماس 7 و… پشتیبانی می کند.

پیش نمایش  دانلود

قالب وبلاگی Unite

قالب وبلاگی Unite

قالب وبلاگی Unite

قالب وبلاگی unit در ميلاد وردپرس یکی از قالب های وردپرس Bootstrap است که با طراحی زیبای فلت و کاملا ریسپانسیو به صورت رایگان موجود است.

تمام بخش های این قالب قابلیت شخصی سازی را دارند.

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

پیش نمایش  دانلود

قالب تک صفحه ای Zerif Lite

قالب تک صفحه ای Zerif Lite

قالب تک صفحه ای Zerif Lite

قالب تک صفحه ای Zerif Lite که براساس وردپرس در ميلاد وردپرسایجاد شده است برای فعالیت های آژانس ها، استادیوهای دیجیتال، شرکت ها، نمایش محصولات، سایت های شخصی و نمونه کارها مناسب است.
این قالب وردپرس Bootstrap از بسیازی افزونه های عمومی نظیر ووکامرس پشتیبانی می کند.

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

پیش نمایش  دانلود

قالب چند منظوره Inkness

قالب چند منظوره Inkness

قالب چند منظوره Inkness

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

همچنین طراحی آن کاملا واکنش گرا و منعطف است.

برای تمامی دستگاه های اندرویدی و iOS مناسب است و از تمامی افزونه ها نیز پشتیبانی می کند.

قالب خبری Fullby

قالب خبری Fullby

قالب خبری Fullby

آیا ظاهر این قالب برای شما آشنا نیست؟

این قالب در ميلاد وردپرسبعد از قالب Twenty Fourteen طراحی شده است.

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

دانلود

قالب تکنولوژی WP Knowledge Base

قالب تکنولوژی WP Knowledge Base

قالب تکنولوژی WP Knowledge Base

یک قالبدر ميلاد وردپرس است که به صورت اپن سورس طراحی شده و برای وبسایت های تکنولوژی مناسب است.

این قالب با بوت استرپ 3 و با توجه به رابط کاربری ساخته شده است.

با این قالب می توانید آیکون ها را انتخاب کنید و یک سایت خاصی را ایجاد کنید.

پیش نمایشدانلود

قالب وبلاگی Arcade Basic

قالب وبلاگی Arcade Basic

قالب وبلاگی Arcade Basic

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

کاملا واکنش گراست و بر پایه ی HTML5 و CSS3 نوشته شده و به شما امکان تنظیم کردن لایه های برگه ها، تصویر هدر و… را دارد.
این این قالب وردپرس Bootstrap از انجمن سازهای BBpress و Buddypress نیز پشتیبانی می کند.

پیش نمایشدانلود

 

 

بهترين مطالب وب سايت ميلاد وردپرس در اين ماه را از دست ندهيد:

قالب وبلاگی StanleyWP

قالب وبلاگی StanleyWP

قالب وبلاگی StanleyWP

قالب StanleyWP یک قالبدر ميلاد وردپرس می باشد که برای نمایش محصولات و نمونه کارها مناسب است.

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

پیش نمایشدانلود

قالب عکاسی Rokophoto Lite

قالب عکاسی Rokophoto Lite

قالب عکاسی Rokophoto Lite

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

این قالب از نظر سئو برای موتورهای جستجو بهینه شده است.

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

پیش نمایش  دانلود

قالب وبلاگی GovPress

قالب وبلاگی GovPress

قالب وبلاگی GovPress

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

پیش نمایش  دانلود

قالب وبلاگی Adament

قالب وبلاگی Adament

قالب وبلاگی Adament

قالب Adament نوعی قالب در ميلاد وردپرس می باشد که کاملا واکنش گراست.

این قالب برای وبسایت های عکاسی مناسب است.

دارای اسلایدر تمام صفحه است.

پیش نمایش  دانلود

قالب شرکتی Revera

قالب شرکتی Revera

قالب شرکتی Revera

قالب شرکتی Revera در ميلاد وردپرس دارای یک اسلایدر بسیار بزرگ تمام صفحه در صفحه ی اصلی می باشد که هر کدام از بنرهای آن قابل تنظیم هستند.

بعلاوه این قالب دارای بخش نمونه کارها برای وبسایت های شرکتی نیز می باشد.

پیش نمایش  دانلود

قالب شرکتی Flat Theme

قالب شرکتی Flat Theme

قالب شرکتی Flat Theme

این قالب بر مبنای وردپرس Bootstrap و با جدیدترین تکنولوژی در ميلاد وردپرس طراحی شده است که با کمک شورت کدها بسیار قدرتمند فعالیت میکند. دارای صفحه نمونه کارها می باشد و صفحات اضافی برای طراحی شامل جداول قیمت گذاری، صفحه ارتباط با ما ، خدمات و… دارد.

پیش نمایش  دانلود

قالب شرکتی Virtu

قالب شرکتی Virtu

قالب شرکتی Virtu

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

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

فرقی نمیکند وبلاگ نویس، بازاریاب و یا صاحب آژانس هستید با virtue به راحتی می توانید سایت مورد نیازتان را بسازید.

Virtue قابلیت تبدیل به یک فروشگاه اینترنتی را البته با چند افزونه مرتبط به شما می دهد یا شاید بخواهید فقط روی نوشتن مطالب تمرکز کنید یا پروژه های اخیر خئود را به نمایش بگزارید.

پیش نمایش  دانلود

قالب شرکتی Sidney

قالب شرکتی Sidney

قالب شرکتی Sidney

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

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

ویژگی های اضافی شامل واکنشگرا بودن، ادغام آیکون های اجتماعی و قابلیت های ترجمه کامل است.

اساسا همه چیزهایی که از یک قالب حرفه ای برای کسب و کار انتظار می رود را داراست.

پیش نمایش  دانلود

قالب چند منظوره Flash

قالب چند منظوره Flash

قالب چند منظوره Flash

اگر به دنبال قالبی در ميلاد وردپرس با ویژگی های کاربردی صفحه ساز آسان بخش نمونه کاری و البته رایگان میگردید قالب فلش بهترین گزینه است. دارای چند دمو آماده که به راحتی با افزونه ThemeGrill Demo Importer میتوانید هر یک را نصب کنید.

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

گاهی ممکن است بی توجه به ویژگی های برجسته یک قالب، سادگی ویژگی مد نظرتان باشد.قالب استرایکر برای صاحبین کسب و کار تازه وارد و وبلاگ نویسان مناسب است.

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

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

پیش نمایش  دانلود قالب

قالب فروشگاهی ShopIsle

قالب فروشگاهی ShopIsle

قالب فروشگاهی ShopIsle

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

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

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

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

نتیجه گیری

اغلب قالب های رایگان وردپرس ویژگی هایی مشابه نسخه پولی آنها دارند و گاها ابزارهایی بیشتر از نیاز شما ارائه می کنند.

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

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

برای مشاهده قالب های بیشتر به دایرکتوری تم وردپرس مراجعه کنید.

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

منبع: Best Free WordPress Themes

 

 

ميلاد وردپرس

کامل ترين مرجع وردپرس در ايران 

استفاده از ویز در وردپرس

استفاده از ویز در وردپرس

در این مقاله از دنیای مهراکت به بررسی استفاده از ویز در وردپرس  می پردازیم.پس تا انتها با تیم ما همراه باشید.

 

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

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

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

 

افزونه وردپرس جایگزین نقشه گوگل

چرا به جایگزین نقشه گوگل نیازمندیم؟

همانطور که حتماً در خبرها خوانده یا شنیده‌اید چندی پیش گوگل تغییرات بنیادی را در سیاست‌های خود در قبال سرویس‌های نقشه اعمال کرده و تا ۲۶ تیرماه ۹۷ به توسعه‌دهندگان برای ثبت اطلاعات کارت اعتباری خود فرصت داده بود .

این تغییر سیاست گوگل از یک طرف و تحریم دامنه‌های ir. از سوی گوگل از طرف دیگر باعث شده‌است تا تمامی افزونه‌هایی که قبلاً با مپ گوگل (Google Maps) کار می‌کرده‌اند برای کاربران ایرانی غیرقابل استفاده شوند.

از همین رو مدیران وب‌سایت‌های مبتنی بر WordPress نیازمند یافتن جایگزین مناسبی برای سرویس نقشه‌ی گوگل در وب‌سایت خود هستند.

بیشتر بدانید:

کاربردهای افزونه نقشه وردپرس

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

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

سایت‌های تخصصی دیگری نیز بر پایه‌ی وردپرس وجود دارند که نیازمند نمایش نقشه در سایت خود هستند.

از چه افزونه‌ای به عنوان جایگزین نقشه‌ی گوگل استفاده کنیم؟

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

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

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

آموزش ثبت مکان در اپلیکیشن ویز | Waze

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

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

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

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

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

در ادامه با ما همراه باشید تا آموزشی را در خصوص نحوه ثبت موقعیت در ویز و اضافه کردن لوکیشن مکانی در آن را به شما علاقه مندان، ارائه دهیم.

 

آموزش ثبت مکان در اپلیکیشن ویز | Waze

آموزش ثبت مکان در اپلیکیشن ویز | Waze

آموزش ثبت موقعیت در ویز
  1. پس از ثبت تصویر، گزینه Forward را که به شکل  می باشد، انتخاب کنید.
  2. در بخش بعدی می توانید مکان مورد نظر خود را به عنوان یک مکان تجاری یا یک مکان مسکونی، ذخیره کنید. گزینه Residential place به معنای مکان مسکونی و گزینه Business به معنای مکان تجاری است.
  3. در مرحله بعدی باید یک سری اطلاعات از قبیل نام مکان، شماره تلفن، ساعات آغاز به کار و غیره را در محل های مربوطه وارد کنید.
  4. پس از پایان گزینه Done را انتخاب کنید

به این ترتیب، شما خواهید توانست مکان مورد نظر خود را در ویز ثبت کنید و از این پس سایر کاربران ویز نیز می توانند مکانی که شما در نقشه ثبت کرده اید را با جزئیات مشاهده کنند.

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

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

 

 

ممنون که تا انتها با مهراکت همراه شدید.

 

 

تبدیل سایت وردپرس به اپلیکیشن موبایل

تبدیل سایت وردپرس به اپلیکیشن موبایل

با سلام به وب سایت مهراکت خیلی خوش آمدید.میخواهید بدانید چگونه تبدیل سایت وردپرس به اپلیکیشن موبایل انجام می شود؟

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

تبدیل سایت وردپرس به اپلیکیشن موبایل

تبدیل سایت وردپرس به اپلیکیشن موبایل

 

تبدیل وبسایت وردپرسی به اپلیکیشن موبایل‌

طبق مطالعات انجام شده در سال 2015، سرانه‌ی مصرف تکنولوژی‌های دیجیتال، مربوط به دستگاه‌های موبایل بوده‌است.

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

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

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

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

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

مزایا و معایب ایجاد اپلیکیشن موبایل برای وبسایت

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

بحث هزینه در همه‌ی حوزه‌ها حرف اول را می‌زند. بالغ بر 5,000 دلار صرف ساختن اپلیکیشن برای یک وبسایت می‌شود که البته مقدار خیلی زیادیست و معمولاً صاحبان وبسایت قادر به پرداخت چنین هزینه‌ای نیستند.

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

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

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

آمارها نشان داده‌است که کاربران، وبسایت‌ها را در 86% اوقات در اپلیکیشن موبایل بررسی می‌کنند و تنها 14% زمان خود را در خودِ وبسایت می‌گذرانند.

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

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

طراحی رابط کاربری مناسب برای اپلیکیشن، کار بسیار دشواریست که به زمان زیادی نیز احتیاج دارد ولی پلاگین‌هایی که طراحی شده‌اند به شما پیشنهادهای زیادی را برای طراحی ظاهر و رابط کاربری (UI) خود می‌دهند که این کار را بسیار ساده‌تر می‌کنند.

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

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

بیشتر بخوانید:

 

تبدیل سایت وردپرس به اپلیکیشن موبایل

تبدیل سایت وردپرس به اپلیکیشن موبایل

11 ابزار برتری که می‌توان به‌وسیله‌ی آن‌ها، وبسایت وردپرسی را به اپلیکیشنی برای موبایل تبدیل کرد:
🔨AppPresser
🔨Reactor
🔨MobiLoud
🔨WiziApp
🔨Worona
🔨WappPress
🔨WordApp
🔨WordPress Mobile Pack
🔨Androapp
🔨Blappsta
🔨Appful

اکنون هر کدام از این پلاگین‌ها را بررسی می‌کنیم:

1. AppPresser
AppPresser

AppPresser

 

این پلاگین که به‌صورت رایگان در اختیار همگان قرار گرفته‌است به عنوان فریم‌ورکی برای توسعه دادن برنامه‌های iOS و اندروید بر پایه‌ی phoneGap که خود پلاگینی برای ساخت اپلیکیشن است ساخته شد که وردپرس را بطور کامل با اپلیکیشن همگام می‌کند.

این موضوع به این معنیست که تمام مواردی که در وبسایت قادر به کنترل کردن آن‌ها هستید از جمله آپلود کردن تصاویر و … نیز در اپلیکیشن نهایی قابل کنترل هستند.
AppPresser – پلاگین اپساز وردپرس شما را قادر به ایجاد فروشگاه‌های پیشرفته‌ی آنلاین می‌کند و بسته به قابلیت‌های خود، برنامه‌های قیمت‌گذاری چندگانه را ارائه می‌دهد.

همچنین از طریق آن امکان ارسال اعلان یا Notification به گوشی‌های موبایل مقدور می‌باشد.

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

2. Reactor
Reactor

Reactor

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

برای دریافت این پلاگین باید مبلغی را پرداخت کنید اما برای آزمایش کردن اپلیکیشن، فضایی به‌صورت رایگان در اختیار شما قرار می‌گیرد.

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

به‌طور کلی Reactor راهی سریع و راحت را برای ایجاد کردن اپلیکیشن به شما پیشنهاد می‌کند.

3. MobiLoud

این سرویس امکان ساخت اپلیکیشن native اندروید و iSO را به کاربران خود می‌دهد و از این طریق کاربران می‌توانند اپلیکیشن‌های خود را در گوگل استور و اپل استور به‌راحتی منتشر کنند.

MobiLoud

MobiLoud

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

4. WiziApp
 WiziApp

WiziApp

این پلاگین حدوداً از سال 2010 ایجاد شده‌است.

چه از پوسته‌های از پیش طراحی شده‌ی خودِ وردپرس استفاده کنید و چه از پوسته‌ی واکنش‌گرا شده‌ی خودتان، می‌توانید هرگونه وبسایت وردپرسی را به اپلیکیشنی native برای موبایل تبدیل نمایید.

پس از نصب WiziApp نیز شما قادر خواهید بود تا وبسایت‌هایتان را که بر پایه‌ی HTML5 نیز نوشته شده‌است به اپلیکیشن تبدیل نمایید.

برای ایجاد اپلیکیشن native برای اندروید و iOS توسط این پلاگین لازم است بطور سالیانه هزینه‌ای را بپردازید که به‌صورت مجزا برای هر سیستم‌عامل مبلغ 299 دلار و برای هردو باهم مبلغ 499 دلار نیاز است.
گزینه‌های این پلاگین بسیار ساده و روشن هستند. توسط آن‌ها می‌توان موارد ظاهری اپلیکیشن، ظاهر پست‌ها، منو، تنظیمات و … را به صورت دلخواه تغییر داد.

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

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

نمایی از پنل ادمین

نمایی از پنل ادمین

تعدادی از پوسته‌های WizziApp با BuddyPress و WooCommerce نیز سازگارند.

5. Worona

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

اینجاست که اتفاقاتی جالبی می‌افتد.

پس از نصب این پلاگین بر روی وردپرس خود، محتوای وبسایت شما از طریق REST API آن توسط سرویس Worana در قالب اپلیکیشنی برای موبایل دراختیار شما قرار گیرد.

Worona

Worona

پوسته‌ی اصلی این پلاگین را می‌توانید به‌صورت رایگان دانلود کنید اما برای دانلود دیگر پوسته‌های آن باید مبلغی حدود 79 سنت را فقط یک بار پرداخت کنید.
همچنین برای دریافت برخی ویژگی‌های اپلیکیشن مانند push notification و همچنین دریافت پشتیبانی از Google Analytic نیاز به پرداخت 59 سنت فقط برای یک بار است و تا همیشه می‌توانید بصورت رایگان از این امکانات استفاده کنید.

از معایب این سرویس این بود که اپلیکیشن ایجاد شده قابلیت اجرا شدن بر روی سیستم‌عامل iOS را نداشت که ظاهراً هم‌اکنون این قابلیت به صورت پایدار به آن افزوده شده است.

6. WappPress
WappPress

WappPress

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

7. WordApp
WordApp

WordApp

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

8. WordPress Mobile Pack
WordPress Mobile Pack

WordPress Mobile Pack

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

WordPress Mobile Pack

WordPress Mobile Pack

9. AndroApp
AndroApp

AndroApp

اندرو اپ، پلاگینی قابل انعطاف برای ایجاد اپلیکیشن‌های موبایل با سیستم‌عامل‌های Android و IOS است که نسبت به دیگر پلاگین‌ها، سریع‌تر و راحت‌تر موجب بارگذاری شدن اپلیکیشن می‌شود. در کنار این ویژگی، موارد دیگری از جمله امکان اسکرول بی‌نهایت، تنظیمات پویا و ذخیره‌سازی کَش را در اختیار شما می‌گذارد و البته می‌توانید از امکانات White label نیز استفاده کنید. با نصب پلاگین White label بر روی وردپرس خود می‌توانید تمام تنظیمات پیش‌فرض داشبورد را به تنظیمات دلخواه خود تغییر دهید. به این ترتیب از این امکان نیز می‌توانید در اپلیکیشن ایجاد شده توسط پلاگین Androapp استفاده کنید.

10. Blappsta

پلاگین Blappsta پلاگینی مناسب برای وبلاگ وردپرسی شماست. به‌وسیله‌ی آن می‌توانید وبسایت خود را به اپلیکیشنی برای سیستم‌عامل‌های اندروید و iOS تبدیل کنید. این پلاگین نیز مانند برخی دیگر از پلاگین‌ها، امکان مشاهده‌ی پیش‌نمایشی از اپلیکیشن نهایی را در اختیار شما می‌گذارد. توسط این اپلیکیشن می‌توانید متون و ویدیوهای خود را نیز انتشار دهید.

نمونه‌ای از صفحه تنظیمات پلاگین

نمونه‌ای از صفحه تنظیمات پلاگین

11. Appful
 Appful

Appful

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

نمونه‌ای از اپلیکیشن‌های ایجاد شده

نمونه‌ای از اپلیکیشن‌های ایجاد شده

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

منبع: HiSupport

 

تبدیل سایت وردپرس به اپلیکیشن موبایل,تبدیل سایت وردپرس به اپلیکیشن موبایل,تبدیل سایت وردپرس به اپلیکیشن اندروید,افزونه تبدیل سایت وردپرس به اپلیکیشن موبایل

در طراحی وبسایت واکنش گرا چه نکاتی باید رعایت شود

در طراحی وبسایت واکنش گرا چه نکاتی باید رعایت شود

 

در این مقاله به این سوال می پردازیم که در طراحی وبسایت واکنش گرا چه نکاتی باید رعایت شود ؟

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

 

بیشتر بخوانید:

 

لزوم طراحی قالب وب‌سایت بصورت ریسپانسیو:

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

نحوه پیاده سازی یک قالب ریسپانسیو:

در طراحی وبسایت واکنش گرا چه نکاتی باید رعایت شود

ترفندها و نکاتی که در بخش زیر بیان می کنیم به شما کمک می کند که هم سایت خود را بصورت ریسپانسیو طراحی کنید و هم موبایل-پسند (mobile-friendly).
این نکات، بهترین و کاربردی ترین نکات در این زمینه می باشند:

1- یاد بگیرید کاربران چگونه وب سایت شما را در موبایل مشاهده می کنند:

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

بعنوان مثال اگر کاربران بدنبال لینک تماس با ما در سایت تان می گردند، آیا می توانند در موبایل، این لینک را براحتی پیدا کنند؟

2- ابتدا طرح قالب سایت خود را برنامه ریزی کنید:

توصیه می شود ابتدا طرح (Layout) قالب وب سایت خود را طرح ریزی کنید.
در واقع غالب طراحان وب، ابتدا طرح خود را با وایر فریم (wire frame) شروع می کنند و سپس طرح بصری (visual design) آنرا آماده می کنند،
قبل از اینکه وارد مراحل کدنویسی آن شوند.
رعایت این قضیه، نه تنها باعث می شود متوجه شوید که قالب شما از لحاظ ظاهری به چه شکل می باشد،
بلکه باعث می شود که طراح وب سایت ساده تر بتواند تمپلیت سایت را ویرایش و شخصی سازی کند و مطابق برند کسب و کار آنرا آپدیت کند.

ابزارهای ایجاد نمونه اولیه واکنش‌گرا (Responsive Prototype):

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

  • Adobe Edge Reflow: این ابزار شرکت ادوبی (Adobe) امکان طراحی ویژوال قالب یک وب سایت را به شما خواهد داد بطوریکه می توان فایل psd فتوشاپ قالب سایت را به کدهای html-css تبدیل کرد و از نقاط شکست (break-point) اسکرین های مختلف مانند موبایل نیز پشتیبانی می کند.
  • InVision: به لطف این نرم افزار شما می توانید نمونه اولیه (prototype) طرح یک وب سایت را بصورت تعاملی (interactive) ایجاد کنید. پس از ایجاد پروتوتایپ، کاربران قادرند همانند یک سایت واقعی با آن رفتار کنند
    مانند: اسکرول، کلیک روی لینک، دکمه (button)، منو (navigation) و… InVision ابزاری مفید است برای اینکه متوجه شویم وب سایت ما در محیط ها و بسترهای مختلف چگونه رفتار می کند.
ابزارهای ایجاد نمونه اولیه واکنش‌گرا (Responsive Prototype):

ابزارهای ایجاد نمونه اولیه واکنش‌گرا (Responsive Prototype):

  • Wirefy: ابزار wirefy این امکان را به شما می دهد که طرح اولیه قالب سایت خود را بر اساس محتوا (content) پیاده سازی کنید. بطوریکه امکان استفاده از گریدهای واکنش گرا (responsive grid) و وایرفریم (wireframe) را به شما خواهد داد. بدون اینکه نیاز باشد بصورت دستی طول و اندازه بخش ها را تعیین کنید.

 

3- مراقب منو (Navigation) باشید:

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

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

4- بهینه‌سازی تصاویر وب‌سایت:

تصاویر نقش مهمی در طراحی یک وب سایت ایفا می کنند.
از طریق تصاویر شما می توانید با کاربران سایت تان ارتباط عاطفی (emotional connection) برقرار کنید و محصول یا سرویسی که می خواهید از طریق سایت در معرض دید کاربران قرار دهید را از لحاظ بصری زیباتر ارائه کنید.
بنابراین بهینه سازی (optimization) تصاویر وب سایت یک الزام می باشد.

بهینه‌سازی تصاویر وب‌سایت

بهینه‌سازی تصاویر وب‌سایت

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

5- در نظر گرفتن متد mobile-first:

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

6- یادگیری نحوه استفاده از مدیا کوئری (Media-Query):

مدیا کوئری‌ها از ابتدا در CSS تعریف شده بودند و تنها بصورت تئوری وجود داشتند اما از سال 2012 که مرورگرها از Media Query ها پشتیبانی کردند بصورت عملیاتی و کاربردی در CSS مطرح شدند و مورد استفاده قرار گرفتند.
هدف و وظیفه اصلی مدیا کوئری بهینه سازی قالب وب سایت در اسکرین ها و دسنگاه های مختلف می باشد.
وقتی از مدیا کوئری ها در CSS سایت خود بهره می برید،
محتوای سایت تان نسبت به تغییر سایز اسکرین در دستگاه های مختلف واکنش نشان می دهد.

مدیا کوئری (media-query) وضوح (Resolution)، عرض (Width) و جهت (Orientation) دستگاه را تشخیص داده و به نسبت این اطلاعات، استایلهای CSS مناسب آنها را اعمال می کند.

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

@media screen and (min-width:500px) {

    your CSS rules here

}

7- نمایش صفحه کلید مناسب هر فیلد در فرم های سایت:

منظور اینست که بعنوان مثال اگر فیلدی که کاربر باید وارد کند شماره تماس است،
صفحه کلید کاربر در موبایل بصورت عددی (numerical) نمایش داده شود.
اگر آدرس ایمیل است، صفحه کلید کاربر دارای علامت @ و .com باشد و…

8- توجه به قابلیت آسان کلیک شدن دکمه ها در موبایل:

به اندازه دکمه ها (buttons) در دستگاه های موبایل دقت ویژه ای داشته باشید.
سعی شود دکمه ها در اسکرین های کوچک مانند موبایل بقدری بزرگ و مشخص باشند که کاربر بتواند براحتی و بدون زحمت روی آنها کلیک کند. رنگ دکمه ها نیز از اهمیت ویژه ای برخوردار است و توصیه می شود دکمه ها به نسبت سایر المان های صفحه واضح تر باشند.

9- بهینه سازی تایپوگرافی (Typography Optimization):

وقتی درباره متون صفحات وب صحبت می کنیم باید اطمینان پیدا کنیم که محتوای سایت تان در اسکرین های کوچک مانند موبایل براحتی خوانده می شود و کاربران مشکلی با خواندن متن مقالات و یا صفحات سایت شما ندارند.
بهترین سایز فونت برای متون یک وب سایت 16 پیکسل (یا 1em) می باشد.
تیترهای هدینگ (H1,H2,H3,…) را متناسب با این سایز تعیین کنید.
توصیه می شود ارتفاع خطوط (line height) را برابر 1.5em در نظر بگیرید تا مطمئن شوید پاراگراف ها فضای کافی برای نفس کشیدن دارند!

نکته دیگری که باید در مورد متون وب سایت خود در موبایل رعایت کنید استفاده از فونت خوانا (legible font) و اجتناب از فونت های فانتزی و ناخوانا می باشد.
زیرا اینگونه فونت ها در اسکرین های کوچک مانند موبایل بسیار ناخوانا خواهند بود.

10- استفاده از فریم‌ورک‌های ریسپانسیو:

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

 استفاده از فریم‌ورک‌های ریسپانسیو

استفاده از فریم‌ورک‌های ریسپانسیو

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

11- استفاده از طراحی مینیمال:

در سالهای اخیر، طراحی مینیمال (Minimalist Design) محبوب تر شده است و استفاده از اینگونه طرح ها رشد روزافزونی دارد.
در طراحی مینیمال شلوغی و بهم ریختگی وجود ندارد و کاربر می تواند سریع تر محتوای وب سایت را بخواند در نهایت منتج به تولید Lead بیشتر خواهد شد
و سرعت لود سایت نیز افزایش می یابد زیرا از المان های کمتری در قالب های مینیمال استفاده می شود.

12- استفاده صحیح از دکمه‌های اشتراک‌گذاری در شبکه های اجتماعی (Share Buttons):

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

بررسی ریسپانسیو بودن وب سایت:

در طراحی وبسایت واکنش گرا چه نکاتی باید رعایت شود

هنگامیکه نکات طراحی قالب واکنش گرا را رعایت کردید،
وقت آنست که چک کنید آیا الان وب سایت شما ریسپانسیو (واکنش گرا:Responsive) می باشد یا خیر.

ابزارهای آنلاین و رایگان متعددی برای بررسی واکنش گرایی (responsiveness) وب سایت ها وجود دارد
که ما در اینجا به بهترین ابزارها در این زمینه اشاره می کنیم:

1- تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل:

سایت گوگل ابزار mobile friendly test را معرفی و پیشنهاد می کند.
مطابق تصویر زیر، URL سایت خود را در باکس مربوطه وارد کنید و دکمه Run Test را بزنید.

تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل

تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل

پس از اجرای تست واکنش گرایی، اگر وب سایت شما ریسپانسیو باشد، یک پیغام سبزرنگ (مطابق تصویر زیر) نمایش داده می شود:

تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل

تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل

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

2- Screenfly:

ابزار اسکرین‌فلای (ScreenFly) که وب سایت quirktools ارائه می دهد،
به شما این امکان را می دهد که وب سایت خود را در اندازه های مختلف اسکرین مشاهده کنید.

Screenfly

Screenfly

برخلاف ابزاری در مورد 1 معرفی کردیم (ابزار تست ریسپانسیو گوگل)، ابزار screenfly نکات و مشکلات ریسپانسیو نبودن سایت را به شما اعلام نمی کند
اما نحوه نمایش وب سایت را در دستگاه های مختلف مانند انواع موبایل، کامپیوترهای دسکتاپ و حتی تلویزیون های بزرگ را ارائه می دهد.

3- MobileTest.me

وب سایت mobiletest.me این امکان را به طراحان وب سایت می دهد که با ورود آدرس سایت خود، نحوه نمایش و تعامل سایت را در دستگاه های مختلف تست کنند.
مانند نحوه نمایش وب سایت در مدل خاصی از موبایل یا تبلت.
شما می توانید با وب سایت تان در دستگاه های مختلف تعامل (interact) کنید.
مانند پر کردن فرم و زدن دکمه آن و تست تجربه کاربری وب سایت (UX: User Experience)

MobileTest.me

MobileTest.me

نتیجه گیری:

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