Mahdi Askari
مدير فنی
سلام
امیدوارم حالتون خوب باشه
احتمالا شاید به این موضوع بر خورده باشید و یا قالب هایی رو دیده باشید که در جزئیات قالب، طراح با ذکر جزئیات قالب در قسمتی کلمه آماده رتینا (retina ready) رو هم قرار داده.
اما صفحه های رتینا صفحه هایی هستند که شرکت اپل آمها رو میسازد و ادعا دارد تراکم پیکسلی در این صفحه به قدری بالاست کهچشم انسان برخلاف صفحات امروزی که قابل تفکیک هستند، پیکسل ها رو نمیتونه از هم جدا ببینه و همه رو متصل میبینه.
این فناوری چی هست و چگونه کار میکنه؟
اگر چشماتون تیز بین باشه پیکسل های صفحه مانیتور رو جدا از هم میبینید و یا عکس هایی که گوشه آنها را گرد کردیم رو ببینید پیکسل ها مشاهده میکنید. این پیکسل پیکسل شدن از زیبایی کار یک طراح کم میکنه و باعث میشه کار به دل نشینه.
اما این موضوع هنگامی به مشکل تبدیل شد که طراحی واکنش گرا پاشو وارد عرصه طراحی سایت کرد. تا اون موقع که طراحی واکنش گرا وجود نداشت طرح ها ثابت و در یک قالب مشخص اجرا میشدند. اما پس از اون سایت برای دیوایس های مختلف با طرز نمایش مختلف باز میشد. تصویر مطلبی رو فرض کنید با اندازه ۲۰۰px که در یک دیوایس به اندازه ۱۵۰px و در کنار پست قرار میگیره و در دیوایس دیگه بالای مطلب و به اندازه ۴۵۰px . اینجاست که عکس در سایز بزرگتر از سایز خودش اجرا میشه و پیکسل پیکسل میشه. حالا فرض کنید سایت شما میخواد در یک صفحه نمایش خاصی بزرگ بشه اینجاست که سایت پیکسل پیکسل میشه.
تصویر زیر گویای این مطلب هست:
صفحه نمایش رتینا
اما قالب های آماده رتینا چجوری از این کار جلوگیری میکنن؟
وب سایت هایی که آماده retina نیستند، زمانی که صفحه بر روی یک نمایشگر خاص بزرگ می شود پیکسل پیسکل و تار می شود. اما وب سایت های به اصطلاح retina ready هستند، در هر حالت نمایشی اجازه می دهند که در هر مربع یک اینچی تعداد بیشتری پیکسل قرار بگیرد. بنابراین صفحات با کیفیت و صاف می شوند.رتینا ردی کردن به کمک css و جاوا اسکریپت انجام می شود.علاوه بر این، تصاویر نیز باید حداقل دو برابر اندازه ای باشند که قرار است به صورت آنلاین نمایش داده شوند.
اما چجوری این مورد رو روی سایتمون پیاده سازیش کنیم؟
این کار با ۴ مرحله صورت میگیره و بسیار کار ساده ای هست:
یادآور بشم برای این کار لازم هست عکس هایی که در وبتون استفاده میکنید رو با سایز دوبرابر ( تصویری با ابعاد ۱۰۰*۲۰۰ لازم هست همین تصویر با اندازه ۲۰۰*۴۰۰) هم درون سرور قرار بگیره به نحوی که در زیر ذکر خواهد شد.
۱- نصب فایل جاوای مخصوص این کار« Retina.js »
به سایت زیر مراجعه کنید و فایل جاوا رو دریافت کنید و در درون قالب خود قبل از بسته شدن تگ <body/> استفاده کنید.
http://imulus.github.io/retinajs
با نصب کردن این فایل ۸۰ درصد راه رو طی کردیم! این فایل چک میکنه اگر کاربری با صفحه رتینا وارد سایت شد اگر تصاویر مورد استفاده ما درون سرور با سایز دوبرابر هم وجود داشت تصاویر رو با این تصاویر بزرگ جایگزین کنه.
اما این تصاویر دوبرابر به چه اسمی باید ذخیره بشه؟
کافی هست با همون اسم اما با یک پسوند ذخیره کنیم به عنوان مثال :
تنها تفاوت ذخیره سازی در همین گذاشتن پسوند بود.
۲- اضافه کردن css مخصوص برای تصاویر با سایز دو برابر
فایل جاوایی که نصب کردیم فقط برای تصاویری کار میکرد که با تگ <img> فراخوانی میشدن. اگر تصاویر شما توسط css فراخوانی بشن این فایل کارایی نداره و تصاویر با سایز معمولی رو براتون نمایش میذاره. اما این مورد هم راهکار داره شما میتونید با اضافه کردن کد های زیر به css خودتون تصاویری رو که از css فراخوانی میشن رو هم تغییر سایز بدید. نمونه کدهاشو براتون میذارم.
۳- آیکن ها و دکمه ها
اگر از تصاویر برای دکمه هاتون استفاده میکنید باید بگم که بهتره همشونو عوض کنید. فایل بالا همه این تصاویر رو بزرگ میکنه و آیکت ها و دکمه هاتون رو خراب میکنه. اگر میخواید زیبایی دکمه هاتون حفظ بشه از دکمه های css یا اصطلاحا از CSS buttons استفاده کنید.
اگر هم نیاز به قرار دادن عکس در دکمه هستید بهتره از فونت آیکن Font Awesome استفاده کنید که برای این کار مناسب هست.
۴- فاوآیکن
فاوآیکن ها در اندازه ۱۶*۱۶ طراحی میشن پس بهتره برای نمایش درست در صفحه های رتینا سایز ۳۲*۳۲ هم از آنها تهیه کنید.
جمع بندی
همونطور که ذکر کردم رتینا فناوری هست که اپل داره از اون استفاده میکنه و طراح های ما شاید با خودشون بگن کار کردن و یادگیری این روش برای ایجاد سایت لازم نباشه، مگه چند نفر تو ایران دستگاه اپل دارند که بخوایم برای اونها اینهمه اضافه تلاش کنیم؟
در پاسخ به این دوستان باید گفت صفحه های با رزولوشن در اینچ بالا رو الان اپل با نام رتینا داره عرضه میکنه و ممکنه در آینده ای نه چندان دور دیگر شرکت ها هم صفحه هایی با تراکم پیکسلی بالا عرضه کنند با اسم هایی متفاوت!
اما هنوز آینده این نوع طراحی مشخص نیست و آغاز راه اون هست. اما به هر حال اگر طراحان عزیز با این روش آشنا باشند بد نیست.
موفق باشید
امیدوارم حالتون خوب باشه
احتمالا شاید به این موضوع بر خورده باشید و یا قالب هایی رو دیده باشید که در جزئیات قالب، طراح با ذکر جزئیات قالب در قسمتی کلمه آماده رتینا (retina ready) رو هم قرار داده.
اما صفحه های رتینا صفحه هایی هستند که شرکت اپل آمها رو میسازد و ادعا دارد تراکم پیکسلی در این صفحه به قدری بالاست کهچشم انسان برخلاف صفحات امروزی که قابل تفکیک هستند، پیکسل ها رو نمیتونه از هم جدا ببینه و همه رو متصل میبینه.
این فناوری چی هست و چگونه کار میکنه؟
اگر چشماتون تیز بین باشه پیکسل های صفحه مانیتور رو جدا از هم میبینید و یا عکس هایی که گوشه آنها را گرد کردیم رو ببینید پیکسل ها مشاهده میکنید. این پیکسل پیکسل شدن از زیبایی کار یک طراح کم میکنه و باعث میشه کار به دل نشینه.
اما این موضوع هنگامی به مشکل تبدیل شد که طراحی واکنش گرا پاشو وارد عرصه طراحی سایت کرد. تا اون موقع که طراحی واکنش گرا وجود نداشت طرح ها ثابت و در یک قالب مشخص اجرا میشدند. اما پس از اون سایت برای دیوایس های مختلف با طرز نمایش مختلف باز میشد. تصویر مطلبی رو فرض کنید با اندازه ۲۰۰px که در یک دیوایس به اندازه ۱۵۰px و در کنار پست قرار میگیره و در دیوایس دیگه بالای مطلب و به اندازه ۴۵۰px . اینجاست که عکس در سایز بزرگتر از سایز خودش اجرا میشه و پیکسل پیکسل میشه. حالا فرض کنید سایت شما میخواد در یک صفحه نمایش خاصی بزرگ بشه اینجاست که سایت پیکسل پیکسل میشه.
تصویر زیر گویای این مطلب هست:
صفحه نمایش رتینااما قالب های آماده رتینا چجوری از این کار جلوگیری میکنن؟
وب سایت هایی که آماده retina نیستند، زمانی که صفحه بر روی یک نمایشگر خاص بزرگ می شود پیکسل پیسکل و تار می شود. اما وب سایت های به اصطلاح retina ready هستند، در هر حالت نمایشی اجازه می دهند که در هر مربع یک اینچی تعداد بیشتری پیکسل قرار بگیرد. بنابراین صفحات با کیفیت و صاف می شوند.رتینا ردی کردن به کمک css و جاوا اسکریپت انجام می شود.علاوه بر این، تصاویر نیز باید حداقل دو برابر اندازه ای باشند که قرار است به صورت آنلاین نمایش داده شوند.
اما چجوری این مورد رو روی سایتمون پیاده سازیش کنیم؟
این کار با ۴ مرحله صورت میگیره و بسیار کار ساده ای هست:
یادآور بشم برای این کار لازم هست عکس هایی که در وبتون استفاده میکنید رو با سایز دوبرابر ( تصویری با ابعاد ۱۰۰*۲۰۰ لازم هست همین تصویر با اندازه ۲۰۰*۴۰۰) هم درون سرور قرار بگیره به نحوی که در زیر ذکر خواهد شد.
۱- نصب فایل جاوای مخصوص این کار« Retina.js »
به سایت زیر مراجعه کنید و فایل جاوا رو دریافت کنید و در درون قالب خود قبل از بسته شدن تگ <body/> استفاده کنید.
http://imulus.github.io/retinajs
با نصب کردن این فایل ۸۰ درصد راه رو طی کردیم! این فایل چک میکنه اگر کاربری با صفحه رتینا وارد سایت شد اگر تصاویر مورد استفاده ما درون سرور با سایز دوبرابر هم وجود داشت تصاویر رو با این تصاویر بزرگ جایگزین کنه.
اما این تصاویر دوبرابر به چه اسمی باید ذخیره بشه؟
کافی هست با همون اسم اما با یک پسوند ذخیره کنیم به عنوان مثال :
کد:
تصویر به کار رفته -> mahdi.png
تصویر بزرگ -> mahdi@2x.png۲- اضافه کردن css مخصوص برای تصاویر با سایز دو برابر
فایل جاوایی که نصب کردیم فقط برای تصاویری کار میکرد که با تگ <img> فراخوانی میشدن. اگر تصاویر شما توسط css فراخوانی بشن این فایل کارایی نداره و تصاویر با سایز معمولی رو براتون نمایش میذاره. اما این مورد هم راهکار داره شما میتونید با اضافه کردن کد های زیر به css خودتون تصاویری رو که از css فراخوانی میشن رو هم تغییر سایز بدید. نمونه کدهاشو براتون میذارم.
کد:
.icon {
background-image: url(example.png);
background-size: 200px 300px;
height: 300px;
width: 200px;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icon {
background-image: url(example@2x.png);
}
}۳- آیکن ها و دکمه ها
اگر از تصاویر برای دکمه هاتون استفاده میکنید باید بگم که بهتره همشونو عوض کنید. فایل بالا همه این تصاویر رو بزرگ میکنه و آیکت ها و دکمه هاتون رو خراب میکنه. اگر میخواید زیبایی دکمه هاتون حفظ بشه از دکمه های css یا اصطلاحا از CSS buttons استفاده کنید.
اگر هم نیاز به قرار دادن عکس در دکمه هستید بهتره از فونت آیکن Font Awesome استفاده کنید که برای این کار مناسب هست.
۴- فاوآیکن
فاوآیکن ها در اندازه ۱۶*۱۶ طراحی میشن پس بهتره برای نمایش درست در صفحه های رتینا سایز ۳۲*۳۲ هم از آنها تهیه کنید.
جمع بندی
همونطور که ذکر کردم رتینا فناوری هست که اپل داره از اون استفاده میکنه و طراح های ما شاید با خودشون بگن کار کردن و یادگیری این روش برای ایجاد سایت لازم نباشه، مگه چند نفر تو ایران دستگاه اپل دارند که بخوایم برای اونها اینهمه اضافه تلاش کنیم؟
در پاسخ به این دوستان باید گفت صفحه های با رزولوشن در اینچ بالا رو الان اپل با نام رتینا داره عرضه میکنه و ممکنه در آینده ای نه چندان دور دیگر شرکت ها هم صفحه هایی با تراکم پیکسلی بالا عرضه کنند با اسم هایی متفاوت!
اما هنوز آینده این نوع طراحی مشخص نیست و آغاز راه اون هست. اما به هر حال اگر طراحان عزیز با این روش آشنا باشند بد نیست.
موفق باشید