ریسپانسیو کردن وبسایت
اگر شما به دنبال ریسپانسیو کردن وب سایت خود هستید با همراهی کردن این مقاله میتوانید در کمتر از نیم ساعت نحوه ریسپانسیو کردن سایت
خود را آموزش ببینید و از اتلاف وقت هم جلوگیری کنید.
برای طراحی سایت و ریسپانسیوکردن وب سایت در واقع باید به نکات بسیاری دقت نمایید در نتیجه بهترین روش های ممکن را در این وب سایت برایتان مشخص نمودیم .
معنی ریسپانسیو کردن وب سایت
ریسپانسیو به معنی پاسخ گرا یا واکنش است. سایتی که به صورت ریسپانسیو طراحی شده باشد، قابلیت اینکه سایت روی هر نوع دستگاه و سیستم و موبایلی بدون مشکل نمایش داده شود را دارد. طراحی و عملکرد سایت متناسب با موبایل یا سیستم های مختلف، متنوع میشود.
سایتی که به صورت ریسپانسیو طراحی شده باشد اندازه صفحه و فونت نوشتاری متن خود را با اندازه مانیتور دستگاه شما تطابق میدهد. به این ترتیب طراحی صفحه ای که در لپ تاپ آن را باز کرده باشید با موبایل متفاوت میشود.
فریم ورک
یکی از راه هایی که با طی کردن آن میتوانید سایت خود را ریسپانسیو کنید دانلود و نصب فریم ورک است. در واقع فریم ورک به برنامه نویسان کمک میکند تا با ایجاد ساختار مشترک کار خود را سریع تر و با صرف زمان کمتر انجام دهند. بعد از دانلود، باید فایل را آنزیپ و سپس آن را در یک فولدر بگذارید.
مرحله اول:
ابتدا باید ساختار موردنظر خود را به زبانHTML تبدیل کنید، برای انجام این کار باید صفحه را چیدمان کنید. شما میتوانید پهنای سطرها را در کدها مشخص کنید. در خط اول کد سطر درون صفحه و در خط دوم کد پهنای سطر را تعیین میکند. تمام پهنای صفحه در سطر دوم است و سپس در سطر سوم و چهارم به نسبت سطر دوم کوچکتر میشود.
مرحله دوم:
در این گام پایه و اساس ریسپانسیو شدن سایت شما مهیا میشود و با استفاده از این کدها سایت بر روی موبایل نیز بارگذاری میشود. ابتدا ویرایشگر متن را باز کرده و کدهای موردنظر را در آن کپی کنید. با این کار صفحه شما راحت تر بر روی اکسپلور نمایش داده میشود. برای چیدمان صفحه باید مانند مرحله اول عمل کنید و ساختار مشابه ایجاد کنید. پس از گذراندن همه این مراحل شما چیدمان اصلی یک وب سایت ریسپانسیو را انجام دادید.
مرحله سوم:
در این مرحله شما باید متن و عکسی روی سایت بارگذاری کنید تا متوجه شوید وقتی که با سیستم و یا موبایل وارد سایت میشوید ساختار محتوای بارگذاری شده به چه شکل است و چه تفاوت هایی با هم دارند. برای انجام این کار باید محتوای خود را در قسمت Body کپی پیس کنید.با مراجعه به تنظیمات subtlepatterns میتوانید پس زمینه صفحه خود را مانند زمینه ای که در ابتدا برای شما نمایش داده شده بود قرار دهید.
در اینجا کار شما به پایان میرسد و یک وب سایت ریسپانسیو شده در اختیار دارید. برای اطمینان صفحه موردنظر خود را بر روی موبایل و کامپیوتر چک کنید تا متوجه ریسپانسیو شدن وب سایت شوید. اگر تمام مراحل ذکر شده را بادقت انجام دادید اما نتیجه نگرفتید و سایت شما ریسپانسیو نشد باید راه دیگری را امتحان کنید.
ریسپانسیو با قالب وردپرس
برای امتحان کردن این راه برای ریسپانسیو کردن وب سایت باید موارد زیر را در دسترس داشته باشید:
- ویرایشگر متن یا کد
- برای اجرا وردپرس محلی میتوانید از PHP و MySQL استفاده کرده و با وردپرس به شکل محلی کار را انجام دهید.
- اگر قصد توسعه از راه دور را دارید، میتوانید از کلاینت FileZilla استفاده کنید.
- به یک وردپرس محلی نیاز دارید.
گام اول: طرح تم ابتدایی
از یک طرح ساده برای تم شروع استفاده کنید. وقتی در این مرحله سایت را با گوشی همراه باز کنید در پهنای 960 پیکسل نشان داده میشود، و این اتفاق به این دلیل که پهنایی برای آن انتخاب نکردید نیست بلکه باید تنظیماتی اعمال کنید تا سایت در صفحات کوچک نیز به اندازه واقعی خود نمایش داده شود.
گام دوم: پهنای صفحه
برای اینکه سایت در تلفن همراه نیز به اندازه واقعی خود نشان داده شود، باید قسمت head در header.php اضافه کنید. با انجام این کار میتوانید صفحه سایت را در عرض صفحه نمایش تلفن همراه مشاهده کنید.
گام سوم: طراحی بلوک های قالب اصلی برای صفحه های کوچک تر
طراحی بلوک های قالب اصلی برای صفحه های کوچک تر از لپ تاپ مانند تلفن همراه ابتدا چند پهنا و شناور به عناصر اصلی اضافه کنید، برای اطمینان از اینکه در صفحه نمایش کشیده شده باشند. باید یک bothclear و چند width به عنصرهای مربوطه بیفزایید. با افزودن padding به عنصر مربوطه از فشرده نشان داده شدن طرح در صفحه کوچک تلفن همراه جلوگیری میکنید. این موضوع را مورد توجه قرار دهید که باید این مقادیر را بعدا در پیکسل تعریف کنید تا با بزرگ شدن سایز صفحه padding زیادی بزرگ نشود.
مرحله چهارم: اضافه کردن استایل اضافه
برای داشتن یک منوی هوشمندانه و قراردادن آیتم های منو در مرکز باید چند استایل جدید مانند استایل های قبل به منو اضافه کنید. وقتی به این مرحله از کار برسید مشاهده میکنید که چقدر مناطق ویجت نزدیک به هم میباشند و به سختی نقطه شروع و پایان آنها را میتوان تشخیص داد پس برای حل این مشکل باید چند padding و borders را به آدرس اضافه کنید. همچنین برای ویجت های پاورقی نیز باید همین کار را انجام دهید. در این مرحله شما یک طرح ساده تم و چند رنگ و padding برای نمایش روی صفحه های کوچک تلفن همراه دراختیار دارید.
مرحله پنجم: افزودن کوئری رسانه ای
با پشت سر گذاشتن این مرحله شما سه سایز صفحه به سایت خود اضافه میکنید:
- عرض 600 پیکسل که مناسب برای تبلت های لند اسکیپ و پرتره یا دسکتاپ هستند.
- عرض 800 پیکسل که برای تبلت های عرضی و دسکتاپ کاربرد دارند.
- عرض و طول 1025 پیکسلی که مناسب تبلت دسکتاپ(کوچکترین سایز صفحه نمایش) است.
این کوئری ها مطابق یک دستگاه خاص طراحی نمیشود به این دلیل که هرچه دامنه و عرض صفحه دستگاه ها زیاد شوند تنظیم کوئری های رسانه سودبخش در برابر قراردادن یک دستگاه موردنظر و خاص دارای اعتماد کمتری میشود. به این موضوع توجه کافی داشته باشید که در این مرحله از کار از min-width استفاده کردیم و نه از max-width به این دلیل که احتمال دارد قصد طراحی استایل دستکتاپ را داشته باشید و این کوئری های رسانه ای را مناسب صفحه کوچکتری بنویسید.
امیدواریم این مقاله برای شما مخاطب عزیز مفید بوده باشد و با استفاده از این نکات ذکر شده بتوانید به راحتی و بدون وجود هیچ مشکلی وب سایت خود را ریسپانسیو کنید. ریسپانسیو کردن وب سایت یک امر بسیار مهمی می باشد پس در نتیجه بدون داشتن اطلاعات به هیچ عنوان برای انجام آن فعالیتی را انجام ندهید.