۳ مشکل رایج در طراحی رسپانسیو و چگونگی اجتناب از آنها
طراحی رسپانسیو برای طراحان وب بسیار مفیده زیرا اون‌ها با استفاده از این متد به کاربران اجازه میدن که به محتوای وب‌سایت‌ها با استفاده از طیف وسیعی از دستگاه‌ها و بدون نیاز به نسخه‌های متفاوت از یک سایت و همچنین به دور از مشکلاتی همچون پیمایش سخت و انعطاف‌پذیری کم دسترسی داشته باشن!
در این مقاله ۳ مشکل رایج در طراحی رسپانسیو را می‌گیم و همینطور استراتژی‌های لازم برای اجتباب از این اشتباهات رو توضیح می‌دیم.
مقیاس بندی vs. انعطاف پذیری vs. رسپانسیو
سردرگمی‌های زیادی در این رابطه وجود داره و اغلب طراح‌ها، تغییرپذیری سایت‌ها رو به صورت نادرستی انجام میدن. در حقیقت هر یک از این مراحل، تکاملی مجزا در طی گذشت زمان رو طی کردن و با پیشرفت تکنولوژی پدید اومدن.
مقیاس‌بندی صفحات به معنی تعریف اندازه برای هر بخش نسبت به بخش‌های دیگر است. مقیاس‌بندی در طراحی رسپانسیو مثل یه حس که وقتی اندازه صفحه رو تغییر می‌دید کد های نوشته شده اینو حس می‌کنه و مقایسی به نسبت اندازه صفحه رو براتون به نمایش میزاره. صفحه خودش پایداره، فقط زمانی که اندازه صفحه تغییر می‌کنه برای حفظ ظاهر سایت اندازه هر بخش در صفحه هم تغییر می کنه!
در بالا: شما مقیاس‌بندی رو در دو رزولوشن مختلف می‌بینید: خوانایی سایت فدای طراحی سایت شده است .
انعطاف‌پذیری با مقیاس‌بندی متفاوته؛ چرا که به معنی مقیاس همه بخش‌ها نسبت به صفحه نمایشی برای کاربر است. به همین دلیل برای رفع مشکل از یه واحد نسبی مثل درصد یا em استفاده می‌کنن. اینطور طراحی‌ها می‌تونه به راحتی توسط کاربر شکست بخوره.
در بالا: انعطاف‌پذیری در دو رزولوشن مختلف: طراحی فدایی خوانایی می‌شه.
رسپانسیو هیچگونه مقیاس‌بندی نداره. در عوض، به این صورته که با توجه به اندازه صفحه کل سایت به نمایش در میاد.
در بالا: رسپانسیو در دو رزولوشن مختلف
مشکل اول) بهم ریختگی منوها
در صورت استفاده از نوار پیمایش در بالای صفحه سایت‌تون، طراحی رسپانسیو قراره، زمانی که اندازه صفحه‌تون تغییر می‌کنه به نسبت اندازه صفحه اجزائی توی صفحه فشرده‌تر بشه یا برعکس. اما این همیشه کاملاً کار نمی‌کنه مثلا وقتی اندازه صفحه‌تون گسترده‌تر از قبل بشه طراحی صفحه‌تون شکسته می‌شه و به یه شکل بدی در میاد! یا زمانی که اندازه صفحه‌تون کوچیک می‌شه آتیم منوهاتون که در یک خط قرار داشتن بصورت در هم ریخته یا به اصطلاح پیچ خورده تبدیل می‌شن .
چند راه برای حل این مشکل وجود داره. اول کاهش تعداد مواردی که در منو به صورت افقی در نوارپیمایش نمایش داده می‌شه. این کار می‌تونه با مرتب‌سازی به صورت دسته‌ها یا زیردسته‌ها انجام بشه و بعد از اون شما می‌تونید از drop-down (کشویی) برای نمایش شاخه‌ها زمانی که یه دسته‌بندی رو انتخاب کردین استفاده کنید!
راه دوم کاهش نقطه شکسته، نقطه شکست در واقع همون عددی که زمانی که عرض صفحه به اون نقطه رسید آیتم‌های توی صفحه شروع به تغییر می‌کنن. در media Queryها همون (max-width) محسوب می‌شه. برای هر ابزار خاصی نقطه شکست تعیین نکنیم.
و راه سوم استفاده از منوهای مختلف برای دستگاه‌ها. مثل منوهای کشویی در کنار صفحه‌ها استفاده کنیم.
مشکل دوم) استفاده از تصاویری با عرض ثابت
محتوا معمولا نسبت به اندازه صفحه به راحتی تغییر می‌کنه بنابراین وقتی که برای تصاویر درون محتوا از عرض ثابت استفاده می‌کنیم بعد از تغییر صفحه تصویر به صورت تکه شده نمایش داده می‌شه.
در بالا: مثالی از نمایش بد در استفاده از تصاویر با عرض ثابت در دو رزولوشن می‌بینید. در نسخه کامل صفحه مشکلی برای عکس وجود ندارد ولی همین که از یه صفحه نمایش کوچیکتر، همون صفحه رو ببینم عکس توی صفحه تکه می‌شه و برای دیدن قسمت‌های دیگش باید اسکرول کنیم .
شما می‌تونید این مشکل رو با استفاده از واحد های نسبیتی مثل درصد یا em رفع کنید یا می‌تونید از فریمورک‌هایی استفاده کنید که این کار رو پشتیبانی می‌کنن (مثل بوت استراپ) شما می‌تونید به راحتی برای رسپانسیو شدن تصویرتون از یه کلاس استفاده کنید.
class=”img-responsive”
در بالا: عنصری که در اون از کلاس رسپانسیو استفاده شده می‌بینید که نوار اسکرولش رفته و به خوبی تصویر نمایش داده می‌شه.
مشکل سوم) اعوجاج عنصر
این یکی کمی مبهم تر هست. چه اتفاقی برای طرح می‌افته زمانی که اندازه صفحه نمایش کوچیک می‌شه؟ ستون‌ها بدرستی کنترل نمیشن درست مثل سطرها! خب این یه مشکله.
در بالا: ستون تبدیل به یک ردیف می‌شود، اعوجاج محتوا.
خب راه حل مشخصه و هنوز جای تعجبه که چطور خیلی‌ها تو این مورد اشتباه می‌کنن: به سادگی تنظیم Height یا Width یا padding برای یک بخش خاص. اون بخش رو از جاش حرکت می‌دید و بخش‌های دیگه رو پوشش می‌ده. شما می‌تونید اون‌ها رو وادار کنید در جایی که شما می‌خوایین قرار بگیرین با استفاده از div ها یا margin ها.
برنامه‌ریزی کمک می‌کنه تا از اشتباهات ریز و درشت اجتناب کنید.
در این مقاله ۳ مشکل رایج در طراحی رسپانسیو که طراحان با اون مواجه هستن رو مورد بحث قرار دادیم. اما راه‌های زیادی وجود داره که در اون طراح‌های خوب هم دچار اشتباه می‌شن. جلوگیری از اشتباهات کار سختی نیست.مرورگرها پیشرفته‌تر شدن و می‌شه با اون‌ها تست‌هایی روی طرح‌های مختلف‌تون انجام بدید.
با تشکر از شما که تا اینجای مقاله با ما بودید. منتظر نظر و پیشنهاداتون هستیم.
منبع: راکت