CSS, CSS

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

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

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

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

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

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 استفاده می شود.

تصاویر منعطف

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

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

2 Comments

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

پاسخ دهید

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

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید