در مقاله‌ی کوتاه در مورد تفاوت طراحی Responsive و Adaptive من باب طراحی واکنشگرا ( Responsive ) صحبت کردم.
امکان برنامه‌نویسی همزمان برای تمامی ابزارهای هوشمند (از ساعت گرفته تا تلویزیون) طراحی واکنشگرا را عقلانی و اقتصادی‌تر کرده است.
متاسفانه تنوع زیاد ابعاد نمایشگر ابزارهای هوشمند متصل به وب، طراحی واکنشگرا را بسیار سخت کرده است و نمی‌توان تنها به طراحی برای موبایل و دسکتاپ اکتفا کرد و لازم است برای تناسب بیشتر با این تنوع بسیار زیاد برای حالات بیشتری طراحی کرد.
این ابعاد مرجع با مرزهایی از هم جدا می‌شوند که به آنها Breakpoint گفته می‌شود.
در مقاله‌ی اسکرول بینهایت در مقابل صفحه‌بندی گفتم که پیمایش عمودی معمول‌تر است. لذا در قالب‌بندی صفحات عرض صفحه پارامتر مهمتری نسبت به ارتفاع است و برای در نظر گرفتن Breakpoints تنها به عرض صفحه توجه می‌کنیم.
منابع مختلف پیشنهادات متفاوتی برای این موضوع ارائه می‌دهند.
به عنوان مثال تصویر بالا نقاط شکست طراحی بر اساس طراحی متریال اندروید است که در گسسته‌ترین حالت 13 حالت و در کمترین حالت 4 مدل طراحی را پیشنهاد می‌دهد.
سایت UXPin هم با ارائه‌ی تصویر بالا بین 4 تا 9 حالت را پیشنهاد می‌دهد.
جهانس هول هم با انتشار این عکس 5 نقطه شکست را برای طراحی معرفی کرده است.
با این توضیحات، من برای یک پروژه‌ی VOD و با توجه به فراونی ابزارهای هوشمند موجود در ایران و تحلیل‌های در ادامه به مدل 5تایی زیر رسیدم.
همچنین رویکرد دیگر طراحی واکنشگرا استفاده از Variable breakpoints برای هر قسمت سایت است.
در این روش برای هر بخش سایت، breakpoints مجزا در نظر گرفته می‌شود که کار را تا حدود زیاده راحتتر کرده اما برای ترازبندی بین اشیا صفحه را ممکن است خراب کند.
در این ویدئوی یوتیوب توضیحاتی تکمیلی در مورد گریدبندی و ریسپانسیو ارائه کردم که پیشنهاد می‌کنم در ادامه ببینید.
از این دست کوتاه مقاله‌ها:
