شما اینجا هستید :

Home » مقالات » توسعه وب » سه مشکل رایج در طراحی صفحات واکنش گرا

سه مشکل رایج در طراحی صفحات واکنش گرا

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

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

مقیاس بندی، انعطاف پذیری یا واکنشگرایی

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

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

توی این تصویر مقایس بندی در دو دستگاه با نسبت تصویر متفاوت رو میبینید که در دستگاه کوچکتر خوانایی صفحه کمه

 

انعطاف پذیر با مقیاس تفاوت داره چون که معنی اون مقیاس همه عناصر نسبت به صفحه نمایش کاربره، برای همین منظور برای اندازه ها از واحد نسبی به نام em استفاده میشه که این مشکل حل بشه اما طرح اولیه کمی متفاوت میشه

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

 

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

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

 

مشکل اول – درهم ریختگی منوها

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

چندتا راه برای حل این مشکل وجود دار:

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

۲- راه دیگه کم کردن نقاط شکسته، نقطه شکست در حقیقت همون عددیه که زمانی که عرض صفحه به اون نقطه رسید آتیم های توی صفحه شروع به تغییر میکنن در media Query ها همون (max-width) محسوب میشه.

۳- و بهترین راه استفاده از منوهای کناری و یا همبرگری توی دستگاه های کوچکتره.

 

مشکل دوم – استفاده از تصاویر با عرض ثابت

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

 

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

شما میتونید این مشکل رو با استفاده از واحد های نسبیتی مثل درصد یا em حل کنید یا اینکه اگه از فریمورک های مثل Bootstrap استفاده میکنید میتونید به راحتی برای رسپانسیو شدن تصویرتون به تگ img کلاس img-responsive رو اضافه کنید.

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

 

مشکل سوم – اعوجاج یا دفرمه شدن عناصر

زمانی که اندازه صفحه نمایش کوچیکتر میشه ستون ها بدرستی کنترل نمیشن!

به سادگی با تنظیم Height یا Width یا padding برای یک عنصرخاص میتونید اون رو حرکت بدید و یا وادار کنید در محلی که  شما میخواید قرار بگیره

 

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

 

مــطالب مشـــابه

دانلود قالب شرکتی Made

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

ارسال شده در اردیبهشت ۱, ۱۳۹۸

۴ نکته در رابطه با ۵G (نسل پنجم شبکه تلفن همراه)

احتمالا مطالبی در مورد نسل پنجم شبکه های تلفن همراه یا شبکه ۵G و وتفاوت هایی که با ۴G و ۳G شنیده ‌باشید و دوست داشته باشید در این زمینه اطلاعات بیشتری کسب کنید. در این مقاله ۴ نکته درمورد نسل پنجم شبکه تلفن همراه…

ارسال شده در اردیبهشت ۱, ۱۳۹۸

دانلود قالب شرکتی Preevent

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

ارسال شده در فروردین ۳۱, ۱۳۹۸

دیدگاهتان را بنویسید

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