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

طراحی واکنش گرا (Responsive Webdesign) چیست ؟

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

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

مثال های بیشتر را درhttp://mediaqueri.es ببینید

4 فریم ورک آماده برای طراحی ریسپانسیو

1. Bootstrap
2. Goldilocks
3. Foundation
4. Skeleton

طراحی انطباقی (Adaptive) بر پایه یک ایده ساده استوار است .به جای استفاده از اندازه درصدی از اندازه های ثابت (مثلا پیکسلی) بر اساس طول مرورگر برای اجزای صفحه تعریف می کنیم و نکات شکست (Breakpoint) در نظر می گیریم که اگر عرض مرورگر از این نقاط شکست کمتر یا بیشتر شد صفحه خود را منطبق کند . طراحی ریسپانسیو ترکیبی از طراحی سیال (Fluid) و طراحی انطباقی (Adapt) است یعنی از واحد های اندازه گیری نسبی (relative) طراحی سیال و از نقاط شکست طراحی انطباقی استفاده می کند.

شروع کار

کلید طراحی واکنش گرا , مدیا کوئری ها (Media queries) هستند که ما را قادر می سازند استایل های مختلفی طبق نسبت ها , طول و عرض, نوع صفحه نمایش و … اعمال کنیم ولی معمولا از min-width و max-width استفاده می شود.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

تصاویر منعطف

برای نمایش صحیح تصاویر در طراحی واکنش گرا راه های مختلفی وجود دارد که یکی از آنها استفاده از کد زیر است تا همه تصاویر صفحه که با تگ Img اضافه شده اند به صورت مناسب نمایش داده شوند

img { max-width: 100% }

مرورگر های وب این روزها روی XBOX, PlayStation و حتی بعضی از تلویزیون ها نیز وجود دارند. شاید فردا یک مرورگر وب را روی قهوه جوش دیدید .کی می دونه! اگر از طراحی واکنش گرا استفاده کرده باشیم و سایت مان را برای صفحات کوچک بهینه سازی کرده باشیم در آینده حتما مشکلات کمتری خواهیم داشت و کاربران می توانند به راحتی از آن استفاده کنند .