عنوان مقاله :

3 مشکل رایج در طراحی رسپانسیو و چگونگی اجتناب از آنها

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 10 اردیبهشت 1394
دسته بندی ها : رسپانسیو , طراحی وب

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

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

مقیاس بندی vs. انعطاف پذیری vs. رسپانسیو

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

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

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

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

در بالا : انعطاف پذیری در دو رزولوشن مختلف : طراحی فدایی خوانایی میشه

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

در بالا : رسپانسیو در دو رزولوشن مختلف

 

مشکل اول ) بهم ریختگی منو ها 

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

چند راه برای حل این مشکل وجود داره . اول کاهش تعداد مواردی که در منو بصورت افقی در نوارپیمایش نمایش داده میشه این کار می تونه با مرتب سازی بصورت دسته ها یا زیردسته ها انجام بشه  و بعد از اون شما میتونید از drop-down (کشویی)  برای نمایش شاخه ها زمانی که یه دسته بندی رو انتخاب کردین استفاده کنید !

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

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

 

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

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

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

شما میتونید این مشکل رو با استفاده از واحد های نسبیتی مثل درصد یا em رفع کنید یا شما میتونید از فریمورک های استفاده کنید که این کار رو پشتیبانی میکنن (مثل بوت استراپ) شما میتونید به راحتی برای رسپانسیو شدن تصویرتون از یه کلاس استفاده کنید 

class=”img-responsive”

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

 

مشکل سوم ) اعوجاج عنصر 

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

در بالا : ستون تبدیل به یک ردیف می شود، اعوجاج محتوا.

خب راه حل مشخصه و هنوز جای تعجبه که چطور خیلیا تو این مورد اشتباه میکنن : به سادگی تنظیم Height یا Width یا padding برای یک المنت خاص . اون المنت رو از جاش حرکت میدید و المنت های دیگه رو پوشش میده . شما میتونید اونها رو وادار کنید در جایی که شما میخوایین قرار بگیرین با استفاده از div ها یا margin ها 

برنامه ریزی کمک میکنه تا از اشتباهات ریزو درشت اجتناب کنید 

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

با تشکر از شما که تا اینجایی مقاله با ما بودید . منتظر نظر و پیشنهاداتون هستیم !

مقالات پیشنهادی

نقش طرح بندی fluid در طراحی وب سایت های مدرن 

طراحی fluid فوق العاده سازگار است، کاربر پسند است،  در سراسر دستگاه همکاری می‌کند و یک پایه طراحی لازم برای کاربر وب مدرن است. با این حال، جالب است بد...

50 منابع تازه برای طراحان وب - خرداد 95

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

10 قانون طلایی ساده برای طراحی شفاف

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

ساخت و متحرک سازی آیکون های همبرگری تنها با css

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

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
عباس | 1 ماه پیش

سلام و خسته نباشید

ما رسپانسیو کردیم رو مرورگر وقتی کوچک می کنیم نشون میده ولی رو گوشی همون سایت نشون میده بدون رسپانسیو؟

حسام موسوی | 1 ماه پیش

با سلام
اگر درست رسپانسیو کرده باشید حالا با flexbox و media query ها باید نمایش بده سایت رو بصورت رسپانیسو در تلفن همراه که این مورد جای بررسی داره برای شما حتما جای رو اشتباهی انجام دادید

jahanbakhsh | 2 سال پیش

بسیار مفید بود.
ممنونم

مهسا | 2 سال پیش

تشکر

علی | 2 سال پیش

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

admin | 2 سال پیش

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

مرتضی فاریابی | 2 سال پیش

جالبه!
ممنون مفید بود

سامان | 2 سال پیش

ممنون ، عالی بود ، از ریسپانسیو بازهم مطلب بگذارید