Kaptain Kitty
دسته ها :Html و Css
انتشار :۴ شهریور ۱۳۹۳
بازدید :1080 بار

طراحی ریسپانسیو در طی سال های گذشته تغییرات زیادی کرده است. طراحی وب به صورت 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 به کار برد.

برچسب‌ها, , , , , ,

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

در این مقاله می خواهیم نگاهی داشته باشیم به مبحث JavaScript Templating یا همان مدیریت و ایجاد تمپلیت در وبسایت توسط جاوااسکریپت. در وحله ی اول بهتر است ببینیم تمپلیت های جاوااسکریپت چه معنایی دارند، چه زمانی باید از آنها استفاده کنیم و اینکه چگونه می توان آنها را پیاده سازی نمود. خوب است بدانید که موتورهای […]

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه