نقاط انقطاع (Breakpoint) منطقی برای طراحی ریسپانسیو (Responsive Design) قسمت دوم
در قسمت اول مقاله با مفهوم breakpoint و مقادیر آن در طراحی ریسپانسیو آشنا شدیم و مبانی بهینه سازی وب سایت را برای نمایشگرهای کوچک توضیح دادیم در این قسمت به نمایشگرهای بزرگتر و تنظیمات مربوط به ایجاد طراحی ریسپانسیو موثر برای آنها می پردازیم.
نمایشگرهای بزرگ
بعضی اوقات ، یک ستون (Column) برای وب سایت کافی است . وب سایت های محتوا محور مانند بلاگ ها ، با Layout تک ستونی ، کارایی بیشتری دارند . اما برای نمایشگرهای بزرگ ، معمولا نیاز به چندین ستون داریم . می توانید از این ستون های جانبی برای تعبیه navigation و یا Widget های متناسب استفاده کنید . این ستون ها جانبی یک موهبت برای شما خواهد بود .
البته در این موارد کارهای بیشتری نیز باید انجام دهید . مثلا ، دقیقا در نقطه ای که فضا برای یک ستون اضافه ایجاد می شود ، می توانیم layout را دستکاری کنیم . برای مثال ، من یک ستون با عرض 33%به قسمت چپ ستون اصلی اضافه کردم که در زیر heading و پاراگراف اول قرار می گیرد . دیگر المان ها ، مانند تصاویر و نقل قول ها می توانند در این ستون قرار گیرند .
کد مورد نیاز برای ایجاد این تغییرات کمی پیچیده تر از قبلی است . و مسلما این کد تنها روش برای ایجاد چنین ساختاری (layout) نیست .
وقتی که سایز نمایشگر از 34 ems بیشتر باشد ( 30 ems برای محتوا و 4 ems برای مارجین ) مقدار ماکزیمم عرض body به 51 ems افزایش پیدا می کند ( 34 + 17 ) . محتوا اصلی ، دو سوم عرض صفحه را اشغال می کند و ستون جدید که به قسمت چپ اضافه شده یک سوم عرض صفحه را . تگ های h1 و p باید مارجین منفی به اندازه نصف عرض محتوا داشته باشند . اینجاست که من خودم را برای دقت نداشتن سر کلاسهای ریاضی لعنت می کنم.
نمایشگرهای بزرگتر از معمول
میتوانیم در صورت لزوم ، ستون های سوم و چهارم و پنجم هم اضافه کنیم . همچنین می توانیم تصمیم بگیریم که کار را با 2 ستون به پایان برسانیم . می توانیم از این فضاهای ایجاد شده برای تعبیه تصاویر و یا محتوا مرتبط استفاده کنیم . معیار تصمیم گیری ، تفکرات شما و وب سایتی است که می سازید . در مورد مثال ما ، می توانیم footnote را به قسمت سمت راست ستون اصلی اضافه کنیم . خب ، لطفا نخندید ! من که گفتم طراح نیستم .
کد زیر ، مربوط به شاهکار تصویر بالاست.
در این حالت ، ستون اصلی 50% عرض صفحه نمایش را در بر می گیرد و 25% مارجین دو طرفش قرار دارد . Side note به اندازه 50% به سمت راست کشیده شده و به خارج از ستون اصلی انتقال پیدا کرده . عرض این side note به اندازه 50% ستون اصلی است که 2 ems برای خوانایی از آن کم کرده ام . توجه داشته باشید که calc در تمامی مرورگرها پشتیبانی نمی شود . پس بهتر است برای تعیین عرض side note از کدهای زیر استفاده کنید.
بله ، خودم می دانم که تمامی این prefix ها ضروری نیست ، اما همیشه ترجیح می دهم که از تمامی آنها استفاده کنم . گزینه دیگر اینست که همیشه به خاطر داشته باشیم که کدام CSS feature توسط کدام مرورگر پشتیبانی می شود ، چه با prefix چه بدون آن . اگر اصول CSS را درست بخاطر داشته باشم ، این کار بی ضرر است . علاوه بر این نمای زیبایی هم به کدها می دهد .
خب ، تمام شد . حالا ما یک وب سایت ریسپانسیو بر اساس اندازه فونت و نوع آن داریم . Breakpoint ها بر اساس واحدهای منطقی ایجاد شده اند نه بر اساس مقادیری تصادفی مانند اندازه نمایشگر که امروزه بر سر زبان ها افتاده است. خوبی این معیار اینست که بر اساس اندازه فونت ایجاد شده و حتی زمانی که کاربر ، فونت پیش فرض را در مرورگر خود تغییر دهد ، layout صفحه واکنش نشان خواهد داد و زمانی که کاربر اندازه فونت مرورگر را افزایش دهد ، صفحه به هم نمی ریزد .
ادامه در قسمت سوم
