در طراحی وب هیچ الگوی واحدی برای همه موقعیت ها وجود ندارد. هر پروژه ای تمرکز ,الزامات و مخاطبان خاص خودش را می طلبد. امیدوارم این مقاله به شما کمک کند بهترین تصمیم را با توجه به مزایا و معایب هر کدام از روش ها اتخاذ کنید . جفری ون می گوید : ” روز به روز به تعداد دستگاه ها , پلتفرم ها و مرورگرهایی که نیاز دارید با آنها کار کنید بیشتر می شوند . طراحی واکنش گرا (Responsive) یک تغییر اساسی در نحوه ساخت وب سایت ها برای دهه های آینده است”.
روز به روز به تعداد کسانی که از ابزارهای قابل حمل برای دسترسی به اینترنت استفاده می‌کنند شامل تبلت و گوشی های لمسی مدل بالا افزوده می‌شود. ریسپانسیو به معنای پاسخ گرا یا واکنشی می باشد. به این معنا که طراحی وب سایت به گونه ای می باشد که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده می شود. طراحی سایت به گونه‌ای که در هر عرض و طول صفحه قابل استفاده باشد اصطلاحا طراحی واکنش گرا یا Responsive web design نامیده می‌شود. برای ایجاد یک طرح واکنش گرا داشتن چند نکته ضروری است که در این مطلب به آنها اشاره ای خواهیم کرد. پس با ما باشید.
طراحی واکنش گرا (RESPONSIVE WEBDESIGN) چیست ؟
طراحی واکنش گرا به نوعی از طراحی می گویند که خود را با هر تعداد از دستگاه های کاربران انتطباق دهد و به هم نریزد .از زمان ارایه CSS همواره تطابق با انواع رسانه ها بخش جدایی ناپذیر آن بوده اند . اگر قبلا شیوه نامه ای مخصوص چاپ نوشته باشید حتما با این مفهوم آشنایی دارید
Viewport :
مرورگرهای موبایل برای سازگاری با سایت هایی که در زمان گذشته طراحی شده انداز مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد و مرورگر موبایل یا تبلت سایت را در این فضای مجازی نمایش می‌دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می‌دهد.
<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 ببینید
۴ فریم ورک آماده برای طراحی ریسپانسیو
طراحی انطباقی (Adaptive) بر پایه یک ایده ساده استوار است .به جای استفاده از اندازه درصدی از اندازه های ثابت (مثلا پیکسلی) بر اساس طول مرورگر برای اجزای صفحه تعریف می کنیم و نکات شکست (Breakpoint) در نظر می گیریم که اگر عرض مرورگر از این نقاط شکست کمتر یا بیشتر شد صفحه خود را منطبق کند . طراحی ریسپانسیو ترکیبی از طراحی سیال (Fluid) و طراحی انطباقی (Adapt) است یعنی از واحد های اندازه گیری نسبی (relative) طراحی سیال و از نقاط شکست طراحی انطباقی استفاده می کند.
شروع آموزش
- نخستین گام
اطلاع رسانی به مرورگر برای تغییر اندازه Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش فرض فضای مورد نظر برنامه نویس را به Viewport اختصاص دهد. تغییر اندازهی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می رسد.
<head> <meta name="viewport" content="width=480"> </head>
در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شد. این مقدار حداقل مقدار ممکن است و چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد عرض Viewport هم افزایش خواهد یافت.
راه کاری دیگر در تعیین مقدار Viewport تعیین آن با عرض فیزیکی نمایشگر است که برای این کار از کد زیر استفاده می شود :
<head> <meta name="viewport" content="width=device-width"> </head>
اندازه مجازی :
به دلیل تراکم بیشتر پیکسلی در موبایل و تبلت های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ تاپ و کامپیوترهای شخصی مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش داده شود.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه های مختلف و در سیستم‌عامل های مختلف متغیر و قابل تغییر می باشد. بنابراین یکی از مهم ترین نکات در طراحی واکنش گرا عدم اعتماد به اندازهی پیکسل ها می باشد. در سایت Screen Sizes می‌توانید اندازه واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد. بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point , cm , و … می باشد.
بزرگنمایی :
مرورگرهای موبایل ممکن است به صورت پیش فرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازه بزرگ نمایی و کوچک نمایی هست.
<head> <meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2"> </head>
ر کد بالا بیشترین اندازه بزرگ نمایی ۲ برابر و اندازه پیش فرض آن ۱ تعیین شده است.
عملکرد خاص مرورگر Safari ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحه موبایل گردانده شود تا از حالت عمودی به افقی درآید صفحه را بار دیگر پردازش نمی کند و همان صفحه عمودی را بزرگنمایی میکند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به 1 این عملکرد Safari اصلاح می‌شود و البته این کار سبب می شود تا کاربران دیگر قادر به بزرگ نمایی صفحه نباشند که خود یک اشکال به حساب می‌آید.
عرض حداقل و حداکثر :
برای آنکه صفحات وب در همه جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ تاپ و کامپیوترحداکثر عرض مناسب ۱۰۰۰ پیکسل است و البته ممکن است با توجه به تقسیم پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.
دید جعبه ای یا بر پایه ماژول :
در طراحی واکنش گرا لازم است تا محتوای ما در جعبه های مجزا قرار بگیرند تا امکان جابجایی یا حذف آنها در صورت نیاز فراهم شود. استفاده از تصویرهای بزرگ یا محتوای جدولی که قابلیت تغییر شکل و حذف را به سادگی ندارند، یک مانع در برابر طراحی واکنش گرا به حساب می‌آیند.
ویژگی‌های خاص شیوه‌نامه‌های CSS برای پیاده‌سازی طرح واکنش گرا :
مهم‌ترین ویژگی CSS برای پشتیبانی طراحی واکنش گرا دستور media است. این دستور به ما کمک میکند تا بر اساس عرض صفحه ویژگی‌های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد.
کلید طراحی واکنش گرا , مدیا کوئری ها (Media queries) هستند که ما را قادر می سازند استایل های مختلفی طبق نسبت ها , طول و عرض, نوع صفحه نمایش و … اعمال کنیم ولی معمولا از min-width و max-width استفاده می شود.
@media ( min-width: 1000px ) {
footer {
width: 1000px;
}
}
@media ( min-width: 401px ) {
footer {
display: block;
}
}
@media ( max-width: 400px ) {
footer {
display: none;
}
img { max-width: 100% }
یا
img#header {
width: 100%;
height: auto;
}
تغییر اندازهی تصاویر پس‌زمینه هم در css به شکل زیر انجام می‌شود.
div#header {
width: 100%;
padding-top: 50%;
background-image: url( "01.jpg" );
background-repeat: no-repeat;
background-size: 100% auto;
}
نکته قابل توجه در قطعه کد بالا استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می‌توان ارتفاع یک عنصر را به صورت Responsive تعیین کرد.
اندازه فونت وب :
بهترین واحد برای مشخص کردن اندازه فونت وب واحد های فیزیکی هستند. برای مثال تعیین اندازه فونت پیش فرض صفحه با مقدار “14pt” به جای “14px” و تعیین اندازه عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته های واکنش گرا است.
رورگر های وب این روزها روی XBOX, PlayStation و حتی بعضی از تلویزیون ها نیز وجود دارند. شاید فردا یک مرورگر وب را روی قهوه جوش دیدید .کی می دونه! اگر از طراحی واکنش گرا استفاده کرده باشیم و سایت مان را برای صفحات کوچک بهینه سازی کرده باشیم در آینده حتما مشکلات کمتری خواهیم داشت و کاربران می توانند به راحتی از آن استفاده کنند .
