عنوان مطلب امروز:
درک طراحی Retina-Ready برای وب سایت ها و برنامه های موبایل
سرفصل های آموزش امروز:
- مبانی رتینا
- جایگزینی آیکون ها با فونت ها
- گرافیک برداری مقیاس پذیر
- تصاویر CSS3 Retina BG
- پیاده سازی جاوا اسکریپت
مقدمه:
اپل اولین شرکت بزرگی بود که صفحه نمایش های استاندارد Retina-Ready را روی بسیاری از دستگاه ها معرفی کرد.
کامپیوترهای مک بوک پرو جدیدتر همراه با اکثر دستگاه های iOS با مانیتور رتینا عرضه شده اند. این بدان معنی
است که یک بازار مصرف بزرگتر در حال رشد است و طراحان باید با تغییرات هماهنگ باشند.
در این راهنما می‌خواهم ایده‌هایی درباره نمایشگرهای Retina-Ready و هدف آنها به اشتراک بگذارم. ساخت یک
برنامه بومی برای اندروید یا iOS بسیار ساده تر از یک وب سایت آماده رتینا است. اگر طراحی Retina برای شما ناآشنا
باشد، کمی تمرین می طلبد. اما زمانی که محصول نهایی شما در تمام رزولوشن‌های مانیتور فوق‌العاده به نظر برسد،
ارزش تلاش را دارد.
مبانی رتینا
وقتی به تراکم صفحه فکر می کنید، واحدها سعی می کنند پیکسل های دیجیتال را با اینچ های فیزیکی مقایسه کنند.
PPI (پیکسل در هر اینچ) واحد اندازه گیری رایج است و برای هر دستگاه تغییر می کند. صفحه نمایش های با چگالی
معمولی دارای تعداد مشخصی پیکسل هستند که در یک بلوک 1×1 اینچی یافت می شوند.
این مقدار در نمایشگر Retina-Ready دو برابر می شود. اپل تعداد پیکسل های دیجیتالی دو برابری را در همان صفحه
فیزیکی قرار می دهد. قرار است این فناوری به اندازه‌ای متراکم باشد که چشم انسان نتواند تشخیص دهد که تک تک
پیکسل‌ها کجا ظاهر میشوند.
میتوانید در بسیاری از طرح‌های مدرن به همراه مدل‌های دستگاه آیفون مشاهده کنید که اندازه فایلهای PSD دو
برابر شده است تا با این وضوح بالاتر مطابقت داشته باشد.
دانلود رایگان:
اشیاء صفحه مقیاس پذیر مانند متن، ظروف CSS و گرافیک های SVG به طور طبیعی می توانند با این وضوح دوگانه
(و گاهی اوقات سه گانه) سازگار شوند.
تصاویر bitmap و اشیاء با عرض ثابت تمایل دارند ثابت بمانند در حالی که سعی می کنند پیکسل ها را به طور
یکنواخت تر پخش کنند. هدف از طراحی برای رتینا این است که بیشتر وب سایت خود را با استفاده از محتوای
انعطاف پذیر ایجاد کنید. در صورت امکان، تصاویر باید SVG باشند، یا می توانید تصاویر تکراری برای هر دو وضوح
ارائه دهید.
در مورد تکنیک‌های طراحی و اینکه چگونه میتوانید یک وبسایت HTML/CSS را برای سازگاری طبیعی کدنویسی
کنید، به عمق بیشتری می‌پردازد. همچنین با گذشت زمان می توانید این روش ها را در پروژه های جدیدتر شروع
کنید.
جایگزینی آیکون ها با فونت ها
برخی از طراحانی که با CSS3 آشنایی دارند، فونت های سفارشی را می دانند. شما می توانید یک پیوند محلی یا راه
دور به فایل های فونت اضافه کنید، و این تبدیل به یک خانواده جدید در CSS می شود. به غیر از حروف و اعداد،
میتوانید فونت‌های مبتنی بر نماد را نیز اضافه کنید.
این می تواند بسیار بهتر از ساخت آیکون های برداری یا ایجاد یک مجموعه دوتایی برای هر تصویر کار کند. نمادهای
فونت به طور طبیعی بر اساس اندازه صفحه نمایش بزرگ می شوند. استفاده از درصد یا ems برای واحدها اطمینان
حاصل می کند که فونت در اندازه مناسب برای وضوح نمایشگر باقی می ماند. و می توانید آیکون ها را در کد HTML
خود بدون نیاز به ارجاع درخواست HTTP به یک فایل تصویری بنویسید.
بیشتر بدانید:
بزرگترین ایراد:
داشتن آیکون هایی است که براق، رنگارنگ به نظر می رسند و از سبک های گرافیکی دقیق استفاده می کنند. اکثر
آیکون ها دقیقاً مانند یک فونت با استفاده از یک رنگ و شاید برخی جلوه های متنی نمایش داده می شوند. اگر این
می تواند برای بخش هایی از وب سایت شما کار کند، من آن را به شدت توصیه می کنم. در غیر این صورت ممکن
است لازم باشد تفاوت را با استفاده از برخی تصاویر واقعی به همراه برخی فونت ها تقسیم کنید.
اگر به‌دنبال مجموعه‌ای از فونت‌های زیبا هستید، شروع به مرور فهرست راهنمای We Love Icon Fonts کنید. بسیاری
از طراحان فایل های خود را در Github میزبانی می کنند اما همیشه در جستجوهای Google ظاهر نمی شوند. شما می
توانید از این ابزار برای مکان یابی فونت های آیکون جدید برای گنجاندن پروژه های خود استفاده کنید.
گرافیک برداری مقیاس پذیر
وکتورها معمولاً برای لوگوها و نمادهایی ساخته می شوند که نیاز به مقیاس بندی برای وضوح های مختلف دارند.
اما این گرافیک‌ها از نمایش طبیعی در مرورگر وب پشتیبانی نمی‌کنند . تا اینکه SVG اخیراً با پشتیبانی فوق‌العاده به
اجرا درآمد. اینها گرافیک های برداری ساده ای هستند که نقاط داده را در یک نحو کلید-مقدار تعریف می کنند.
خود گرافیک شامل داده‌هایی درباره نحوه نمایش رنگ‌ها، منحنی‌ها، بخش‌های خط، سایه‌ها و سایر ویژگی‌های
معمولی است. مرورگرهای وب قدیمی‌تر نمی‌توانند این گرافیک‌ها را هنگام رندر صفحه پشتیبانی کنند، اما میتوانید
اسکریپتی مانند SVGeezy برای مدیریت روش‌های بازگشتی اضافه کنید.
نشستن برای طراحی یک گرافیک کامل به مطالعه و به احتمال زیاد مجموعه طراحی وکتور نیاز دارد. اگر طراح ماهری
نیستید، برای دانلود و کار کردن، سعی کنید گوگل را برای دانلود و کار با منبع باز بررسی کنید. من همچنین این پرایمر را
برای هک کردن SVG برای توسعه دهندگان وب بسیار توصیه می کنم.
تعریف اصطلاحات :(وکتورها )
در مورد فایل های وکتور نیاز به توضیح مختصری برای کسانیکه با این دسته ازفایلهای برخورد میکنند دیدم .
فایلهای وکتور را بافرمت های AI , EPS , WMF و… خواهید یافت ، معمولا برای استفاده از این گونه فرمت ها
شما میتوانید از نرم افزارهای از قبیل Adobe Illustrator , Corel , Photoshop و… استفاده نمایید.
خصوصیاتی که این دسته از فایلها با این فرمت ها دارا هستند:
- زوم بر روی این گونه فایلها بدون افت کیفیت یا باصطلاحی بدون رنجه شدن تصویر
- همچنین بزرگ کردن فایل بدون افت کیفیت
- قابلیت تغییر دراین گونه فایلها با این فرمت ، یعنی اینکه شما میتوانید مثلا فایلی با فرمت EPS را در داخل برنامه
- کرل وارد کرده و آنرا تیکه تیکه کنید
- و تغییراتی از نظرظاهر به آنها بدهید و شکل و یا …. جدیدی ایجاد نمایید.
- فایلهای وکتور به تصاویر raster شده نیز تبدیل میگردند ، که گاها bitmap نیز نامیده میشوند.
تصاویر CSS3 Retina BG
دو راه حل رایج برای مدیریت گرافیک جایگزین Retina از طریق پرس و جوهای رسانه ای CSS3 یا کتابخانه های
جاوا اسکریپت هستند. CSS3 در مرورگرهای قدیمی کمتر پشتیبانی می شود، در حالی که جاوا اسکریپت هنوز
می تواند توسط هر کسی غیرفعال شود. هر کدام می توانند خوب کار کنند، فقط به هدف شما و نحوه کدنویسی
وب سایت ها بستگی دارد.
برای مطالعه:
جایگزینی تصاویر با CSS3 از فرضیه پرس و جوهای رسانه ای پیروی می کند تا بررسی شود که کاربر در صفحه رتینا
چه زمانی قرار دارد. سپس می‌توانیم تصویر را از طریق تنظیمات URL پس‌زمینه جایگزین کنیم، که فقط برای کاربر
شبکیه نمایش داده می‌شود. کد زیر را که در این مقاله Sitepoint یافت می شود، بررسی کنید.
بررسی هر دستگاه صفحه نمایش برای مقدار min-device-pixel-ratio همیشه چیزی را برمی گرداند. مرورگرهای مدرنی
که از CSS3 پشتیبانی میکنند معمولاً به سرعت واکنش نشان می‌دهند و برای بازدیدکننده تقریباً آنی به نظر می‌رسد.
و مطمئناً می خواهید نگاهی به این مقاله در مورد پیشوندهای فروشنده بیندازید که نام خاصیت مخالف را برای
min-moz-device-pixel-ratio در مرورگرهای Mozilla Gecko بیان می کند.
پرسش‌های رسانه‌ای امروزه بر اساس مشخصات جدیدتر CSS3 ساخته شده‌اند. این بسیار محبوب است، اما
همچنان در بین طراحان جدیدتری که این تکنیک ها را امتحان نکرده اند، مورد توجه قرار می گیرد. فقط تمرین خود را
ادامه دهید و هر زمان که با مشکل کد مواجه شدید، از طریق Stack Overflow جستجو کنید.
پیاده سازی جاوا اسکریپت
همه مرورگرها نمی توانند جلوه های CSS3 را پشتیبانی کنند، اگرچه اکثر مرورگرهای روی صفحه نمایش رتینا مطمئناً این کار را انجام می دهند. اما در هر صورت من همچنان راه حل های جاوا اسکریپت را در صورت لزوم توصیه می کنم.
گوشی‌های هوشمند و تبلت‌ها با پشتیبانی از JS به صورت پیش‌فرض عرضه میشوند.
من می خواهم دو کتابخانه را به اشتراک بگذارم که قطعا ارزش بررسی را دارند. اولین مورد Foresight.js نام دارد که
تشخیص می دهد آیا دستگاه دارای صفحه نمایش Retina است یا خیر. سپس به طور خودکار بر اساس تنظیمات شما
تصویر صحیح را می کشد. به برخی از دموهای زنده همراه با نمونه کد منبع نگاهی بیاندازید.
کتابخانه دیگری که من از آن لذت برده ام Retina.js است. این یک پلاگین منبع باز jQuery است که بسیاری از وظایف
مشابه Foresight را انجام می دهد. مشخص می کند که صفحه نمایش کاربر دارای ویژگی هایRetina است یا خیر، و
سپس تصاویر معمولی را با همتای @2x جایگزین می کند. فقط در صورت وجود یک نسخه بر روی سرور کشیده می
شود، در غیر این صورت همه چیز را به حال خود رها می کند. یک اسکریپت بسیار کوچک و کار با آن بسیار ساده است.
سخن پایانی
امیدوارم این نکات بتواند شما را در مسیر ایجاد طرح‌بندی وب‌سایت‌های انعطاف‌پذیر آماده Retina شروع کند. برنامه
ریزی یک طرح اولین گام است و استفاده از این دانش واقعاً می تواند روند را تسریع کند. ظاهر سایت در سبک
واکنش گرا چگونه خواهد بود؟ عاقلانه است که برنامه ریزی کنید به کدام تکنیک ها (در صورت وجود) برای مدیریت
نمایشگرهای متوسط Retina نیاز دارید.
اگر سوالی دارید یا پیشنهادی مرتبط دارید در قسمت بحث پست به اشتراک بگذارید.
برگرفته از :
webdesignledger.com
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر میکنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact