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

طراحی ریسپانسیو در طی سال های گذشته تغییرات زیادی کرده است. طراحی وب به صورت Responsive تکنیکی برای ایجاد وب سایت هایی است که بر روی گوشی های موبایل، تبلت ها و صفحه نمایش های دسکتاپ کار می کنند. در گذشته ای نه چندان دور وب سایت ها معمولا مختص رزولوشن های صفحات لپ تاپ و کامپیوتر های رومیزی ایجاد می شدند. این کار تا زمان ظهور گوشی های هوشمند و تبلت هایی با قابلیت دسترسی به وب خوب بود. طراحان وب با چالش جدیدی رو به رو شده بودند که هزاران راه حل داشت اما برنده ی این ماجرا Ethan Marcotte بود که مقاله ای را در زمینه ی طراحی ریسپانسیو در سال ۲۰۱۰ منتشر کرد.

طراحی responsive

طراحی responsive

طراحی ریسپانسیو (طراحی واکنشگرا) از آن زمان تا کنون تغییرات زیادی داشته است و حتی از دو سال پیش تحولات خیلی زیادی داشته است. خواه تازه با طراحی ریسپانسیو آشنا شده باشید و خواه بخواهید اطلاعات جدیدی را در این زمینه به دست آورید، این مقاله را از دست ندهید.

طراحی ریسپانسیو چیست؟

به دلیل تغییرات زیادی که داشته است، طراحی ریسپانسیو (Responsive) اکنون یکی از بهترین تکنیک های موجود است. طراحی Responsive مشکل استفاده از یک کد را در رزولوشن های مختلف حل کرد. بسیاری از وب سایت های مدرن از ویژگی ریسپانسیو (همان پاسخگو) برخوردار هستند و در واقع وب سایت Summit هم یکی از آنهاست. اگر پنجره ی مرورگر خود را کوچک و بزرگ کنید خواهید دید که المان های صفحه هم به همان نسبت تغییر سایز می دهند. یک نمونه از طراحی ریسپانسیو را در زیر می بیند:

طراحی ریسپانسیو

طراحی ریسپانسیو

 

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

“ذهنت را خالی کن، بی شکل باش – مانند آب. حال آب را در یک فنجان بریز، شکل فنجان را به خود می گیرد؛ آب را در بطری بریز، شکل بطری را به خودش می گیرد؛ آن را در قوری بریز، شکل قوری را به خود می گیرد. حال آب می تواند یا در آن جریان داشته باشد یا آن را در هم شکند. مانند آب باش دوست من”.

این نقل قول، سه اصل مهم که تشکیل دهنده ی طراحی واکنش گرا است را شامل می شود:

  1.  Grid های شناور
  2.  تصاویر شناور
  3.  مدیا کوئری ها

در زیر به صورت مفصل به هر یک از آنها می پردازیم.

Grid های شناور

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

اگر عادت دارید که سایت ها را با پیکسل طراحی کنید، یک فرمول ساده ی ریاضی وجود دارد که می تواند به شما کمک کند که به استفاده از مقادیر درصدی روی آورید. فرمول به این صورت است: target / context = result

برای توضیح باید بگوییم که فرض کنید وبسایتی دارید که قابی آن را در بر گرفته است و عرض آن ۹۶۰ پیکسل است و شما این قاب را در پنجره ی ماکسیمم شده ی مرورگری بر روی صفحه نمایشی با عرض ۱۹۲۰ پیکسل مشاهده می کنید. در این حالت عرض پنجره ی مرورگر همان context و عرض قاب هم target شماست. برای این که وب سایت به یک شکل نمایش یابد می توانید target را بر context تقسیم کنید و یک مقدار درصدی به دست آورید.

۹۶۰px / 1920px = 50%

حال چه اتفاقی برای المان های فرزند که در المان قاب لانه بندی شده اند می افتد؟ همین قانون برای آنها هم صدق می کند. به عنوان یک مثال دیگر، فرض کنید که آرایشی دو ستونی را در وب سایت ۹۶۰ پیکسلی خود دارید. ستون سمت چپ یک ساید بار است که عرض آن ۳۰۰ پیکسل بوده و ستون سمت راست هم محیط محتوای اصلی با عرض ۶۴۰ پیکسل می باشد. شما ۲۰ پیکسل هم حاشیه بین دو ستون می خواهید. تصویر زیر این مثال را نشان می دهد:

طراحی واکنشگرا

طراحی واکنشگرا

با استفاده از فرمول بالا، هر بخش از سایت دارای مقادیر زیر خواهد بود:

ساید بار: ۳۰۰px / 960px = 31.25%

محتوای اصلی: ۶۴۰px / 960px = 66.66667%

حاشیه: ۲۰px / 960px = 2.08334%

سپس می توان این مقادیر درصدی را با اعمال آنها بر عرض، حاشیه و خصوصیات padding به صورت CSS به کار برد.




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

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