چگونه : کار با طراحی Responsive را شروع کنم؟

تبلیغات
کانال تلگرام فتولیا

در طراحی وب هیچ الگوی واحدی برای همه موقعیت ها وجود ندارد. هر پروژه ای تمرکز ,الزامات و مخاطبان خاص خودش را می طلبد. امیدوارم این مقاله به شما کمک کند بهترین تصمیم را با توجه به مزایا و معایب هر کدام از روش ها اتخاذ کنید . جفری ون می گوید : ” روز به روز به تعداد دستگاه ها , پلتفرم ها و مرورگرهایی که نیاز دارید با آنها کار کنید بیشتر می شوند . طراحی واکنش گرا (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" />

Screen-Shot-2013-01-20-at-15.06.05-1024x320

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


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

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

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

Screen-Shot-2013-01-20-at-17.12.41

شروع کار

کلید طراحی واکنش گرا , مدیا کوئری ها (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 و حتی بعضی از تلویزیون ها نیز وجود دارند. شاید فردا یک مرورگر وب را روی قهوه جوش دیدید .کی می دونه! اگر از طراحی واکنش گرا استفاده کرده باشیم و سایت مان را برای صفحات کوچک بهینه سازی کرده باشیم در آینده حتما مشکلات کمتری خواهیم داشت و کاربران می توانند به راحتی از آن استفاده کنند .

در همین رابطه :   چگونه از تگ "picture" در HTML5 برای تصاویر Responsive استفاده کنیم ؟

3 Comments

  1. سلام همکار گرامی
    مطالب ارزندهای دارید که از برخی از آنها در اتاق فکر تیم طراحی سایت وب یار استفاده کردم .
    متشکرم

پاسخ دهید

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

More in PHP
فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

سلام :) در این مبحث اگر موافق باشید می خواهیم روی یک فرم با شمایل فیبر کربن ! کار کنیم...

Close