نقطه شکست خیلی زود است

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

اگر من این را ببینم، فرض می‌کنم که شما یا اهمیتی نمی‌دهید یا مهارت‌های CSS برای ایجاد یک طراحی واکنش‌گرا که واقعاً واکنش‌گرا باشد را ندارید.

حتی “نقطه شکست خیلی زود” به چه معناست؟

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

در حالی که به نظر می رسد توسعه دهنده/طراحی که این را ایجاد کرده است به طراحی وب واکنشگرا اهمیت می دهد، به این معنی است که آنها چندان به جزئیات اهمیت نمی دهند.

ما می توانیم بهتر از این کار کنیم.

چرا وقتی فضای زیادی داریم تغییر کنیم؟ در این سناریو، می‌توانیم طرح را تغییر دهیم و سپس در زمانی که واقعاً نیاز داریم، به کوچک‌ترین طرحی که کل عرض را می‌پوشاند تغییر دهیم.

بیایید به چند نمونه نگاه کنیم.

نمونه هایی از سراسر وب

Time.com

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

ویدیوی زیر را ببینید:

ویدئوی نمایشی و واکنش تعاملی زیر را بررسی کنید. توجه داشته باشید که باید منتظر بمانید تا ویدیو در گوشه سمت راست پایین پخش شود تا به نقطه شکست بعدی بروید.

این خوب نیست، درست است؟ اگر می خواهید ببینید چگونه آن را از ابتدا بازسازی کردم، یک مقاله کامل در مورد آن دارم.

تعویض خیلی زود به دلایل زیادی خوب نیست.

TechCrunch

چیدمان TechCrunch تقریباً مشابه تایم است. ویدیوی زیر را ببینید:

شاید فکر می کنید این ممکن است عمدی باشد؟ من مطمئن نیستم، اما در هر صورت اشتباه است و می تواند بهتر باشد.

من در دوره آتی خود، The Layout Maestro، یک چیدمان خانه مانند TechCrunch را اصلاح کردم!

چرا این موارد شدید را بشماریم

من می توانم اندازه مرورگر را تغییر دهم

تغییر اندازه پنجره مرورگر برای انجام یک کار در رایانه، مانند یادداشت برداری یا شاید باز کردن یک سند یا هر چیز دیگری، معمول است.

در اینجا مثالی از تغییر اندازه پنجره مرورگر در macOS آورده شده است.

می تواند صفحه نمایش را تقسیم کند

کاربر می تواند صفحه را در نمای تقسیم شده باز کند. در اینجا یک مثال از Google Chrome آورده شده است.

می توانم در تبلت مرور کنم

من فقط می توانم وب سایت را در iPad باز کنم.

من می توانم از پیش نمایش لینک iOS استفاده کنم

در iOS می‌توانیم برای پیش‌نمایش پیوند ضربه بزنید و نگه دارید، این مورد استفاده‌ای است که در آن اندازه ویوپورت می‌تواند طراحی را عجیب به نظر برساند.

چگونه می توانیم بهتر عمل کنیم؟

• با طراح در مورد نقاط شکست بیشتر در این بین صحبت کنید
• طراحی با در نظر گرفتن درخواست های کانتینر
• طراحی را در هسته خود پویا کنید، به این معنی که بسته به تعداد عناصر می تواند تغییر کند
• از ویژگی های پشتیبانی شده مانند Grid و Flex استفاده کنید

در اینجا یک نمونه از چگونه Time.com را ایجاد کنم طرح برگه قهرمان

لطفا زود به کوچکترین طرح بندی نپرید، می توانید بهتر انجام دهید.

استاد چیدمان

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

می توانید در لینک زیر ثبت نام کنید.

این یک دوره کاملا تعاملی است که طرح CSS مدرن را توضیح می دهد. این مقاله ای که به تازگی خوانده اید تنها بخش کوچکی از آنچه این دوره ارائه می دهد است. اگر علاقه مند هستید، می توانید برای به روز رسانی در زیر ثبت نام کنید.

با تشکر از شما برای خواندن!