کتاب آموزش برنامه نویسی Ext JS
برای اولین بار در ایران
Ext JS
در مورد Ext JS بیشتر بدانید
خرید کتاب
راهنمای ۲۰۱۴ برای طراحی ریسپانسیو (Responsive) – قسمت دوم
دسته بندی ها :Html و Css
۴ شهریور ۱۳۹۳
1060 بازدید

تصاویر شناور

پیشرفت های زیادی در تصاویر ریسپانسیو به وجود آمده است اما ایده ی اصلی این است که تصاویر باید بتوانند در محدوده های یک grid شناور جای گیرند. این کار به راحتی از طریق یک خط کد CSS قابل اجرا می باشد:

img { max-width: 100%; }

 این کد به مرورگر می گوید که هر تصویر باید تنها به اندازه ی پیکسل هایش بزرگ شود تا مطمئن شویم که تصویر هرگز کش نیامده یا پیکسله نمی شود. البته اگر آنها در یک container والد لانه بندی شده باشند که از مقدار پیکسل آنها کوچک تر باشد، تصویر باید جمع و کوچک شود. بنابراین برای مثال اگر تصویری با عرض ۸۰۰ پیکسل در یک container با عرض تنها ۶۰۰ پیکسل قرار بگیرد، تصویر باید به اندازه ی عرض ۶۰۰ پیکسل جمع شود. ارتفاع هم به صورت خودکار محاسبه شده و نسبت های اصلی حفظ خواهد شد.

مدیا کوئری

اگر آرایش دو ستونی را در نظر بگیریم و آن را برای نمایش در یک گوشی موبایل کوچک کنیم، این کار کمی چالش برانگیز است. معمولا گوشی های هوشمند در حالت پورتره به کار می روند؛ به این معنی که طول صفحه نمایش آنها بلندتر از عرض آنها است. این کار برای وب سایت هایی مفید است که به صورت عمودی scroll می شوند اما برای آرایش های گسترده با ستون های متعدد مناسب نیست. در اینجاست که مدیا کوئری به کمک می آید. مدیا کوئری ها یک تکنولوژی CSS است که اکنون چندین سال است که در مرورگر ها قرار داده شده است و کامپوننت اصلی طراحی ریسپانسیو هستند. مدیا کوئری ها به CSS این امکان را می دهند که تنها زمانی اعمال شود که شرایط خاصی وجود داشته باشد. برای مثال شما می توانید یک مدیا کوئری بنویسید که تنها زمانی CSS را اعمال کند که مرورگر عرض مشخصی داشته باشد. به عبارت دیگر هنگامی که یک طرح خیلی بزرگ یا خیلی کوچک باشد، می توان از مدیا کوئری برای مشخص نمودن عرض سایت و ارائه دادن CSS مناسبی که محتوای سایت را بر آن اساس مجددا تدوین می کند، استفاده کرد. به عنوان مثال، در مورد آرایش دو ستونی قبل، فرض میکنیم که می خواهیم ساید بار را بر اساس اندازه های صفحه نمایش گوشی موبایل، به قسمت بالا انتقال دهیم. در واقع روش بهتر این است که ابتدا استایل های موبایل را ایجاد کرده (رویکرد mobile first) و سپس از مدیا کوئری برای اعمال استایل ها برای سایزهای بزرگتر استفاده کنیم. مدیا کوئری مورد استفاده برای این کار به صورت زیر است:

@media screen and (min-width: 600px) { /* ...desktop styles here... */ }

مطمئنا آرایش هر grid شناوری شروع به شکستن کرده و دیگر ظاهر خوبی نخواهد داشت. برای مثال اگر آرایش مخصوص موبایل که ۱۰۰ درصد عرض مرورگر را می گیرد به اندازه ی صفحه نمایش دسکتاپی کشیده شود، این فضا خیلی خوب به کار برده نمی شود. نقطه ای که آرایش در آن دیگر خوب به نظر نمی رسد را breakpoint می نامند. سایت های ریسپانسیو breakpoint های خود را از طریق یک سری از مدیا کوئری ها تعریف می کنند. به طور کلی، کد ریسپانسیو به شکل زیر خواهد بود:

/* ...mobile styles here... */
@media screen and (min-width: 600px) { /* ...tablet styles here... */ }
@media screen and (min-width: 900px) { /* ...desktop styles here... */ }

این تنها یک مثال کوچک است. در عمل شما می توانید مدیا کوئری های فراوانی در سایزهای مختلف داشته باشید که مناسب محتوای شما باشند. در حالی که پیشنهاد می شود محتوای سایت خود را به عنوان راهنمایی برای این breakpoint ها در نظر بگیرید، وب سایت screensiz.es بهترین فهرست را برای رزولوشن های مختلف تهیه کرده است که در صورت نیاز می توانید به آن نیز مراجعه کنید.

روش Mobile First

حتی قبل از شروع تحول طراحی ریسپانسیو، ایده ی استفاده از یک روش mobile first به وجود آمد. Mobile first ایده ای طراحی اولیه ی یک وب سایت در سایز موبایل و سپس توسعه ی آن برای تبلت ها، دسکتاپ ها و غیره است. دلایل مختلفی برای این ایده وجود دارد:

– استفاده از مرورگرهای وب در موبایل ها رو به رشد سریع است و احتمالا جای مرورگرهای دسکتاپی را می گیرد (اگر تا کنون این اتفاق نیافتاده باشد).

– اندازه های کوچک صفحه نمایش های موبایل، طراحان را وادار به تمرکز می کنند زیرا هیچ جایی برای قرار دادن ساید بار ها، تبلیغات، دکمه های مربوط به شبکه های اجتماعی و دیگر محتوای متفرقه وجود ندارد.

– گوشی های موبایل معمولا قابلیت های بیشتری از هم طرازان دسکتاپی خود دارند که شامل صفحات لمسی، GPS، داده های شتاب سنجی و غیره

طراحی یک وب سایت ریسپانسیو با رویکرد mobile first، تحولی طبیعی از هر دو ایده بود. همانطور که در مثال قبلی نشان داده شد، جای دادن آرایشی چند ستونی در فضای یک صفحه نمایش کوچک مستلزم مهارت زیادی باشد. در عوض خیلی بهتر است که ساده شروع کنیم و سپس کار را ارتقا داده و طراحی های پیچیده بر آن اعمال کنیم. در واقع ایجاد اولیه ی وب سایت برای موبایل می تواند برای آرایش های دسکتاپی هم مفید باشد، زیرا تجربه ی کاربری بیشتر مورد تمرکز قرار می گیرد.




نظراتتان را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *