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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

 

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

تفاوت میان برنامه‌نویسی شئ‌گرا و تابعی

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

ارسال شده در شهریور ۷, ۱۳۹۷

جوملا چیه؟

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

ارسال شده در شهریور ۶, ۱۳۹۷

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

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

ارسال شده در شهریور ۴, ۱۳۹۷

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

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