نقاط انقطاع (Breakpoint) منطقی برای طراحی ریسپانسیو (Responsive Design)، قسمت اول
مقدمه
چندین تاکتیک مختلف برای تصمیم گیری در مورد ایجاد محل مناسب برای Breakpoint ، در طراحی ریسپانسیو وجود دارد . یک ایده از رده خارج وجود دارد که می گوید ، محل Breakpoint ها باید بر اساس سایز صفحات نمایش متداول ایجاد شود ، اما این ایده مزخرف است . سایز متداولی برای صفحات نمایش وجود ندارد . تاکتیک متداول دیگر طراحی Breakpoint ها بر اساس نقاط شکست پیکربندی صفحه (Layout) است .
خب ، این ایده کمی منطقی تر است . اما یک پرسش جدید ایجاد می کند ، چطور تعیین می کنید که نقاط شکست Layout کجاست ؟ یک جواب منطقی به این سوال با نگاهی به تئوری کلاسیک قابلیت خوانایی (Readability) بدست می آید .
کتاب ها در این مورد چه می گویند ؟
بر اساس گفته Robert Bringhurst ، " معمولا در هر صفحه با یک ستون مطلب ، یک خط ، باید حاوی 45 تا 75 کاراکتر باشد ." و Josef Muller Brockmann در کتابش می نویسد :
" بطور متوسط ، اگر یک ستون نوشته ، حاوی خط هایی با 10 کلمه باشد ، خواندنش آسان است ." چندین متغییر برای تعیین تعداد دقیق کلمات و کاراکترها در هر خط وجود دارد ، اما یک تئوری پایه وجود دارد :
معیارهای تعیین طول خط
متغیرهای زیادی هستند که معیاری برای مشخصات Breakpoint ها هستند . مثلا ، طول کلمات در زبان آلمانی از زبان انگلیسی بیشتر است ، که طبیعتا برای سایت هایی با زبان آلمانی طول خط بلندتر ایده آل تر است . بله ، درست خواندید : در سایت های چندزبانه ، می توانید Grid هایی با طول های متفاوت داشته باشید . همچنین نوع فونت ، اندازه فونت ، نسبت کنتراست با Background ، فاصله بین عمودی بین خطوط نوشته ها (Leading) ، فاصله بین حروف در کلمه ها (Kerning) ، نوع متن و ... می تواند در تعیین طول بهینه خط تاثیرگذار باشند .
از تمام این ها مهمتر ، بینش و تجربه طراح وب سایت ، بیشترین تاثیر را بر روی تصمیم بر روی اندازه Grid دارد . ممکن است شما بر اساس تجربه تان به این نتیجه برسید که طول Grid هایتان باید بین 75 تا 90 کاراکتر باشد . اما من طراح نیستم ، من همچنین حروف چین هم نیستم ، بنابراین ، طول خطوط نوشته هایم را بر اساس تئوری مرسوم انتخاب می کنم . اما طراحان باتجربه آزادند که محدودیت های تئوری را بشکنند .
برای اینکه تاثیر زبان و نوع فونت ، بر روی طول خط را ببینید مثالی میزنم ; زبان آلمانی یا لهستانی را با انگلیسی مقایسه کنید ، یا حتی دقیقتر ، نوشته به زبان آلمانی که با فونت Verdana نوشته شده را با نوشته انگلیسی که با فونت Georgia نوشته شده را مقایسه کنید . تفاوت فاحش است : 10 کلمه آلمانی با فونت Verdana تقریبا 38.5 ems است ، اما 10 کلمه انگلیسی با فونت Georgia حدود 22 ems است . با احتساب تنظیمات متداول مرورگرها ، عرض خط اولی حدود 616 پیکسل و دومی 352 پیکسل است ! می بینید ، این دو عامل ساده تاثیر بزرگی بر روی اندازه Grid ها می گذارند .
وجود یک معیار درست و منطقی برای اندازه Grid ها ، حیاتی است . می دانم که تمام صفحات وب حاوی محتوا نوشتاری نخواهد بود . ممکن است app هایی طراحی کنید که متن های نوشتاری کمی داشته باشند ، اما حتی در آن صورت نیز یک معیار برای تعیین اندازه Breakpoint ها ، خیلی مفید خواهد بود .
مثال
بعنوان نمونه ، من از یک نوشته معمولی استفاده می کنم . این نوشته دارای ساختار سمانتیکی است اما ساده . استفاده از متن ها برای تعیین Breakpoint ها ضروری نیست ، اما من فکر می کنم میتواند مفید باشد ; متن ها می توانند نقطه شروع منطقی برای تعیین Breakpoint ها باشند . در این مثال از Header و Logo صرف نظر کردم ، بهتر است ابتدا بر روی محتوا تمرکز کنیم .
لازم به تذکر نیست که اگر این صفحه ساده را در مرورگرتان باز کنید ، زیاد جذاب نخواهد بود . در این صفحه غیر از تگ های خود مرورگرها ، از هیچ Style استفاده نشده است . عرض خط متن به اندازه عرض صفحه مرورگر است ، که معمولا در لپ تاپ ها خیلی زیاد است .
با اضافه کردن چند استایل ساده تایپوگرافی و یک خاصیت max-width ، این مقاله زیباتر می شود . حالا از این صفحه می توانید به عنوان نقطه شروعی برای تعیین Grid های ریسپانسیو وب سایتتان استفاده کنید ، نحوه استفاده از این صفحه برای نمایشگرهای مختلف در ادامه آمده است . این ستون (Column) ساده ، احتمالا نیاز به کمی دستکاری برای نمایشگرهای کوچک دارد و برای نمایشگرهای خیلی بزرگ باید چند ستون دیگر نیز اضافه کرد . ستون هایی مانند بنرهای کناری یا navigation .
! توجه : این صفحه ، کاملا به عنوان نمونه و به زبان انگلیسی ایجاد شده ، بهتر است طراحان سایت ایرانی ، بر اساس زبان پارسی و محتوا خود Breakpoint ها را ایجاد کنند .
Breakpoint های معمول
من از زمان دبیرستان تا بحال ، خیلی با ریاضیات سر و کار نداشته ام ، بنابراین با Grid هایی کار میکنم که زیاد پیچیده نباشند ! افراد باهوشی مانند شما احتمالا از این الگوها برای ایجاد Grid های پیچیده تر استفاده می کنند . در این مقاله من فقط مقادیر منطقی Breakpoint ها را بیان می کنم ، استفاده و یا تغییر آنها بر عهده شماست .
نمایشگرهای کوچک
با نمایشگرهای کوچک شروع می کنم . Oliver Reichenstein معتقد است که اندازه فونت ، هیچ ارتباطی به اندازه نمایشگر ندارد ; بلکه فقط به فاصله چشمان ما از نمایشگر مرتبط است . ما معمولا تلفن همراه خود را به نسبت لپ تاپ به چشمانمان نزدیکتر می گیریم ، پس طبیعتا فونت ها در موبایل باید کوچکتر باشد .تئوری دیگر که در بالا ذکر شد می گوید طول خط نباید از 45 کاراکتر کمتر باشد . بر اساس این دو تئوری ، اندازه فونت ها باید در نمایشگر های کوچک ، کمتر باشد . حالا به سراغ صفحه تست که در قسمت بالا ایجاد کردیم می رویم این نوشته ها بر اساس فونت Georgia با اندازه 16 پیکسل ایجاد شده ، تمام آن چیزی که برای بهینه کردن صفحه مان برای نمایشگر های کوچک نیاز داریم ، چند خط کد ساده زیر است :
این کدها به مرورگر می گوید که ، هرگاه اندازه خط از 45 کاراکتر ( بر اساس فونت 16 پیکسل Georgia ) کمتر شد ، اندازه فونت را کوچکتر کند . همچنین با این کد ، کمی از اندازه padding کم کردم که جای بیشتری برای محتوا ایجاد شود . برای دیدن این مثال اینجا را کلیک کنید .
! توجه : نوع فونت بر اساس نگارش متداول زبان انگلیسی انتخاب شده ، بدیهی است که برای وب سایت های پارسی باید از فونت ها و اندازه های متداول زبان پارسی استفاده کرد .
ادامه مقاله قسمت دوم
