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

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

آیا سایت وردپرس شما نیاز به ریسپانسیو بودن دارد؟

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

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

⭕  موارد استفاده از سایت شما چیست؟ آیا مصرف موبایل مهم خواهد بود؟ شانس این است که پاسخ این سوال بله است و هر ساله در حال افزایش است. استثناهایی وجود خواهد داشت، اما زیاد نیستند.

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

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

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

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

 ایجاد یک طراحی وب ریسپانسیو وردپرس

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

📌  بزرگنمایی پیش فرض مرورگر

📌  عرض و ارتفاع عناصر سیال

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

📌  نقاط شکست ویژه طراحی

📌  منوهای ریسپانسیو مجزا برای دستگاه های تلفن همراه

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

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

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

اگر از انواع ویژگی هایی که می خواهید جستجو کنید مطمئن نیستید، دو خط اساسی وجود دارد که می توانید تقاضا کنید که به شما در محدود کردن موارد کمک کنند: بهینه سازی موتور جستجو (SEO) و زمان بارگیری سریع صفحه (بدون در نظر گرفتن دستگاه) که هر موضوعی باید این دو مورد را داشته باشد. با وجود اینکه بسیاری از تم های وردپرس وجود دارند که این قابلیت داخلی را ندارند، اما کاربرد موضوعی که هر دو ویژگی را داشته باشد، تجربه کاربر نهایی در سایت شما را بسیار بهتر می کند.

 

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

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

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

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

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

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

یک طراحی ریسپانسیو بر عملکرد کلی سایت شما تأثیر می گذارد. بارگیری تعداد زیادی CSS و اندازه های مختلف عکس به منظور ریسپانسیوسازی در اندازه های دستگاه از نظر پردازش درونمایه، گران است. به عنوان بخشی از ارزیابی طراحی ریسپانسیو، اولویت بندی عملکرد به عنوان یک ویژگی حائز اهمیت است. کاربران هنوز انتظار دارند که یک سایت موبایل کمی کندتر باشد، اما اگر بخواهند سایت شما را برای نشان دادن دوست یا تاریخ خود نشان دهند، بخشنده نیستند و باید بیش از چند ثانیه صبر کنند.

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

از نظر فنی، هنگام تحویل سایت خود به یک دستگاه تلفن همراه که از داده های تلفن همراه استفاده می کند، به شما به اندازه 5/0 ثانیه از شروع کار فرجه می دهد. به عنوان مثال، برای گرفتن 40KB  در 4G ، 700 میلی ثانیه در شرایط مطلوب طول می کشد. تأخیر شبکه و تغییرات موقعیتی نیز به زمان بارگذاری شما اضافه می کنند. شما قادر نیستید متغیرهای شبکه تلفن همراه را کنترل کنید، بنابراین بسیار مهم است که از همان ابتدا سایت ریسپانسیو خود را همراه با عملکرد به عنوان یک ویژگی بسازید.

به منظور اطمینان از بهینه سازی سایت خود برای تلفن همراه، اطمینان حاصل کنید که موارد زیر را انجام می دهید:

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

📢️ درخواست های HTTP خود را کاهش دهید: مقدار CSS و JavaScript مورد نیاز خود را به حداقل برسانید و سپس سایر موارد را در حافظه پنهان نمایید.

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

📢️ Lazy Loading (لود تنبل): اگر می توانید با بارگیری دارایی های خاص، به ویژه JavaScript ، پس از مهمترین عناصر صفحه از پس آن برآیید، این کار را انجام دهید. تا زمانی که کاربران شما محتوای مورد نظر خود را مصرف کنند، سایر دارایی ها بارگیری می شوند.