طراحی سایت آسان طراحی سایت آسان با هدف سفار ش طراحی سایت حرفه ای ارائه خدمات میکند
طراحی واکنش گرا به کاربران اجازه می‌دهد با استفاده از طیف وسیعی و بدون نیاز به نسخه‌های متفاوت از یک سایت به محتوای وبسایت ها دسترسی داشته باشند. در این مقاله سه اشتباه رایج طراح‌ها در طراحی واکنش گرا را معرفی می‌کنیم و استراتژهای لازم برای اجتناب از این اشتباهات را توضیح می‌دهیم.
– مقیاس بندی، انعطاف پذیری، واکنش گرایی
مقیاس بندی صفحات به معنای تعریف اندازه برای هر المان نسبت به المان‌های دیگر است. این المان‌ها به طور داینامیک اندازه محتوا را بنا بر اندازه صفحه تغییر می‌دهند. این المان‌ها خود به صورت استاتیک باقی می‌مانند. انعطاف پذیری با مقیاس بندی متفاوت است و به معنی مقیاس همه المان‌ها نسبت به صفحه نمایشی برای کاربر است. برای این کار از یک واحد نسبی مانند درصد یا em استفاده می‌شود. اینطور طراحی معمولاً کاربر پسند نیستند. در طراحی واکنش گرا مقیاس بندی معنا ندارد و المان‌ها با توجه به اندازه صفحه کل سایت به نمایش در میایند.
۱- بهم ریختگی منوها
در صورت استفاده از نوار در بالای صفحه سایت، در هنگام تغییر اندازه صفحه نمایش، این منوها می‌بایست نسبت به اندازه صفحه انها را به صورت فشرده‌تر نمایش دهند. اما این موضوع همیشه درست کار نمی‌کند و زمانی که تعداد منوها به نسبت اندازه صفحه نمایش بیشتر باشد در نتیجه انها را می‌شکند و دیگر در یک خط قرار نخواهند داشت.
چند راه برای حل این مشکل وجود دارد. اولین راه حل، کاهش تعداد مواردی است که در منو بصورت افقی در نوار نمایش داده می‌شود. این کار را می‌توان با مرتب سازی آنها بصورت دسته‌ها یا زیردسته ها و نمایش انها به صورت منوهای کشویی انجام داد.
راه حل دوم کاهش نقطه شکست است. نقطه شکست در واقع همان عددی است که آیتم‌های موجود در صفحه با رسیدن به ان مقدار شروع به تغییر می‌کنند. این عدد در قسمت max-width در media Query ها قابل تغییر هستند.
۲- استفاده از تصاویری با عرض ثابت
محتوا در طراحی ریسپانسیو نسبت به اندازه صفحه تغییر میکند، زمانی که از عرض ثابت برای تصاویر درون محتوا استفاده می‌کنیم، بعد از تغییر صفحه، این تصاویر ناقص نمایش داده می‌شوند. درست است که در نسخه کامل صفحه مشکلی برای عکس وجود ندارد اما این عکس در صفحه نمایش کوچیکتر، ناقص دیده می‌شود و برای دیدن مابقی آن باید صفحه را اسکرول کنیم.
این مشکل با استفاده از واحدهای نسبیتی مثل درصد یا em رفع می‌شود. راه حل دیگر برای رفع این مشکل استفاده از فریمورک های ریسپانسیو مانند بوت استرپ و استفاده از کلاس‌های واکنش گراست.
class=”img-responsive”
۳- اعوجاج عنصر
این مشکل زمانی اتفاق می افتد که ستون‌ها در طراحی به درستی کنترل نشده‌اند و پس از تغییر اندازه صفحه نمایش به صورت سطر دیده می‌شوند. با تنظیم Height یا Width یا padding برای این المان خاص این مشکل قابل حل است.
