درخواست مشاوره رایگان

اصول طراحی سایت ریسپانسیو چیست؟

  1. صفحه اصلی
  2. >
  3. طراحی سایت
  4. >
  5. اصول طراحی سایت ریسپانسیو چیست؟
 --><!---->
Avatar

مبین میرزایی

فهرست مطالب
اصول طراحی سایت ریسپانسیو چیست؟
اصول طراحی سایت ریسپانسیو چیست؟

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

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

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

طراحی سایت ریسپانسیو چیست؟

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

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

این تغییر شامل تغییر سایز تصاویر و شکستن متن ها نیز می گردد. تنظیمات دیگر نیز قابل اعمال است برای مثال شما می توانید بگوید وقتی کاربر با گوشی خود و با استفاده از vpn ها متصل می شود نتواند سایت شما را ببیند .

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

ایده اصلی در طراحی سایت ریسپانسیو چیست؟

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

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

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

تنظیم رزولیشن صفحه

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

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

افزودن انعطاف به همه ی اجزای سایت است

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

انعطاف در تصاویر

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

این راه برد تا زمانی که اندازه تصویر از بیشینه عرض تعریف شده برای آن کمتر نشود راه گشاست

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

ساختار سفارشی سایت

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

Media queries

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

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

جاوا اسکریپت

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

نمایش دادن یا مخفی کردن محتوا

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

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

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

لازم به ذکر است همانطور که می توانیم برای صفحات کوچک محتوارا حذف کنیم برای صفحات بزرگ نیز این کار امکان پذیر است

صفحات لمسی و اشاره گر ماوس

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

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

طراحی سایت ریسپانسیو وردپرس

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

طراحی سایت ریسپانسیو وردپرس
طراحی سایت ریسپانسیو وردپرس

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

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

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

جمع بندی

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

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

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

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

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

نظر خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

اطلاعات تماس با وبلینو

تمامی حقوق مادی و معنوی این وب سایت متعلق به وبلینو می باشد.