اولین همایش
استانداردهای وب و بستر وب باز
۲۹ تیر ۱۳۹۱، دانشگاه علم و فرهنگ تهران
طراحی Responsive یا واکنش گرا
Amir Sorouri
UI/UX Designer | Blogger | SEO Expert
sorouriamir[@]gmail.com
@AmirSorouri
WEBTARGET.IR
Google+
طراحی Responsive یا واکنش گرا چرا به یک وب سایت واکنشگرا نیاز داریم ؟ STEP I اصول طراحی واکنشگرا STEP II چالش ها / مقایسه ها / نمونه ها STEP III
STEP I چرا به یک وب سایت واکنشگرا نیاز داریم ؟
گسترش تولید ، استفاده و تنوع دستگاه های هوشمند هر روز 1.4 میلیون دستگاه هوشمند در برابر 317,124 نوزاد وارد دنیا میشوند
  • گسترش استفاده از دستگاه های هوشمند
  • تنوع در اندازه صفحات نمایش
  • تنوع سیستم عامل و نوع مرورگر
lukew.com | en.wikipedia.org STEP I
بازارهای آینده و اکنون گستردگی استفاده از دستگاه های هوشمند و نقش مهم آنها در زندگی و تجارت امروز قابل چشم پوشی نخواهد بود . STEP I
STEP II اصول طراحی Responsive یا واکنش گرا
طراحی واکنش گرا چیست ؟ یک وب سایت با لایه هایی انعطاف پذیر - fluid layout - و تصاویر انعطاف پذیر - flexeble images - که از تکنولوژی مدیا کوئری - media query - برای پاسخ گویی به وضعیت های گوناگون صفحات نمایش استفاده می کند . STEP II
چه ابزارهایی برای یک طراحی واکنش گرا نیاز داریم !
  • Fluid Layout - ساختار شناور
  • Flexible Image - تصاویر انعطاف پذیر
  • Media Query
STEP II
STEP II / Fluid Layout - ساختار شناور STEP II / Fluid Layout - ساختار شناور
Fluid Layout - ساختار شناور ساختار شناور می تواند با تغییر اندازه صفحه نمایش منطبق شود . در این ساختار از " % " برای تعیین اندازه استفاده میشود . STEP II / Fluid Layout - ساختار شناور
طراحی شناور به تنهایی ! چرا طراحی شناور نمیتواند به تنهایی یک طرح واکنش گرا - با خصوصیات استاندارد - را بسازد ؟
با استفاده از یک ساختار شناور شما فقط می توانید یک وب سایت انطباق پذیر با صفحات نمایش متفاوت داشته باشید ! اما آیا این کافیست ؟

در یک طراحی استاندارد واکنش گرا ، با توجه به خصوصیات دستگاه ها و صفحات نمایش ، ساختار چینش وب سایت و حتی نوع نمایش آنها با استفاده از استایل های متفاوت برای حالت های متفاوت تغییر خواهد کرد .
STEP II / Fluid Layout - ساختار شناور
با ساختار صفحات وب بیشتر آشنا شویم !
  • به صورت عمومی بسیاری از طراحان وب از ساختار ثابت - Fixed layout - برای طراحی استفاده می کنند . معمولا این ساختار بر اساس رزولوشن - 1024x768 - ساخته می شود .
  • ترکیبی از طراحی شناور و ثابت بسیار مورد استفاده قرار می گیرد. .
  • ساختار شناور نمی تواند به تنهایی نیاز های یک طرح ریسپانسیو را برطرف نماید .
STEP II / Fluid Layout - ساختار شناور
ساختار های متداول در طراحی واکنشگرا چگونه اند ؟ با توجه به اندازه صفحات نمایش ، مهمترین نکته در یک طراحی ریسپانسیو در دسترس قرار دادن مطالب و قسمت های مهم وب سایت به صورت کاملا ساده ، در دستگاه ها و اندازه صفحات نمایش متفاوت است .
مسلماً نمیتوان یک ساید بار با دو ستون از تبلیغات را در یک نسخه موبایل به کاربر نمایش داد !
وب سایت با تغییر عرض صفحات ساده تر و ساده تر خواهد شد و با توجه به درجه اهمیت عناصر در صفحه به ترتیب از نمایش آنها چشم پوشی می شود و ساختار به یک ساختار خطی عمودی تبدیل خواهد شد .
STEP II / Fluid Layout - ساختار شناور
ساختار عمومی Example STEP II / Fluid Layout - ساختار شناور
ساختار ریزشی Example STEP II / Fluid Layout - ساختار شناور
ساختار انتقالی Example STEP II / Fluid Layout - ساختار شناور
ساختار ساده Example STEP II / Fluid Layout - ساختار شناور
لایه های پنهان Example STEP II / Fluid Layout - ساختار شناور
STEP II / Flexible Image - تصاویر انعطاف پذیر STEP II / Flexible Image - تصاویر انعطاف پذیر
Flexible Image - تصاویر انعطاف پذیر تصاویر بخش عمده ای از محتوای وب سایت را تشکیل میدهند . در طراحی شناور یکی از مهمترین چالش ها ، تغییر اندازه تصویر همراه با تغییر اندازه صفحه نمایش است .
این چالش در هنگام استفاده از ویدئو و فلش نیز وجود خواهد داشت !
اگر اندازه صفحه نمایش کوچکتر از اندازه طبیعی یا تعیین شده این عناصر شود ، مشکل شروع خواهد شد !
هیچ کس یک تصویر بسیار بزرگ یا یک ویدئوی بزرگ را در یک صفحه نمایش کوچک نمی پسندد !
STEP II / Flexible Image - تصاویر انعطاف پذیر
نکته کلیدی ! نگران نباشید راه حل بسیار ساده است img {
max-width: 100%;
}
و مقداری تغییر برای پوشش مدیا های دیگر img, embed, object, video {
max-width: 100%;
}
STEP II / Flexible Image - تصاویر انعطاف پذیر
باز هم مشکل مرورگرهای قدیمی ! باز هم مرورگرهای قدیم و سر دسته آنها IE
در نسخه های قدیمی تر اینترنت اکسپلورر شما نمیتوانید از max-width استفاده کنید . اما نگران نباشید برای این باگ راه حل وجود دارد . img, embed, object, video {
width: 100%;
}
فراموش نکنید برای هدف قرار دادن مرورگرهای IE از کامنت های شرطی - IE conditional comments - استفاده کنید .
STEP II / Flexible Image - تصاویر انعطاف پذیر
STEP II / Media Query STEP II / Flexible Image - تصاویر انعطاف پذیر
Media Types قبل از اینکه به تعریف Media Qyery بپردازیم .
احتمالا از نسخه های قبلی CSS با media types آشنا بوده اید ؟
<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />
یکی از پرکاربردترین استفاده ها از media types ، طراحی نسخه پرینت به کمک CSS است .
STEP II / Media Query
Media Types با استفاده از media types ها میتوانید ، نسخه های متفاوتی از یک سند سی اس اس را به صورت اختصاصی ، برای دستگاه های متفاوت ، به صفحه وب اضافه کنید .
all , braille , embossed , handheld , print , projection , screen , speech ,tty ,tv
www.w3.org STEP II / Media Query
Media Query - مدیا کوئری با تشگر فراوان از W3C برای معرفی Media Query در CSS3 !
مدیا کوئری این توانایی جادوئی را به طراحان وب خواهد داد تا علاوه بر نوع دستگاه خاص ، ویژگی های فیزیکی دیگری نیز از دستگاه را مورد هدف قرار داده و شرطی سازی انجام دهند .
با کمک Media Query میتوانید استایل های خود را برای بسیاری از خصوصیات فیزیکی دستگاه شرطی سازی نمائید .
width , height , device-width , device-height , orientation , aspect-ratio , device-aspect-ratio , color , color-index , monochrome , resolution , scan , grid
www.w3.org STEP II / Media Query
چگونه از Media Query استفاده کنیم ؟ نحوه استفاده internal و external media query به دو روش می تواند مورد استفاده قرار گیرد
وارد کردن در یک style sheet و وارد کردن به عنوان یک style sheet مجزا
در ابتدا نحوه وارد کردن و سپس مزایا و معایب هر یک را بررسی خواهیم کرد
STEP II / Media Query
نحوه استفاده internal یا داخلی body {
background: blue;
}
@media screen and (min-width:501px) {
body {
background: gray;
}
}
ترجمه فارسی ! اگر شرط برقرار باشد و اندازه دستگاه بزرگتر از 501px شود ، رنگ پس زمینه به خاکستری تغییر پیدا خواهد کرد .
STEP II / Media Query
media query syntax - تعیین عرض حداکثر body {
background: gray;
}
@media screen and (max-width:500px) {
body {
background: blue;
}
}
ترجمه فارسی ! اگر شرط برقرار باشد و اندازه دستگاه کوچکتر از 500px شود ، رنگ پس زمینه به آبی تغییر پیدا خواهد کرد .
STEP II / Media Query
media query syntax - تعیین یک بازه از عرض body {
background: gray;
}
@media screen and (min-width:500px) and (max-width:699px) {
body {
background: blue;
}
}
ترجمه فارسی ! اگر شرط برقرار باشد و اندازه دستگاه بزرگتر از 500px و کمتر از 699px شود ، رنگ پس زمینه به آبی تغییر پیدا خواهد کرد .
STEP II / Media Query
نحوه استفاده external یا خارجی استفاده از link و ‎@import برای وارد نمودن استایل خارجی
<link href="narrow.css" rel="stylesheet" 
media="only screen and (max-width:500px)">
OR
@import url(narrow.css) only screen and (max-width:500px);
STEP II / Media Query
Embedded vs External media queries
خصوصیات منفی  Embedded خصوصیات مثبت  External
بارگذاری حجم زیادی از فایل در صورت پشتیبانی یا عدم پشتیبانی از این تکنولوژی برای تمام مرورگر ها حجم کم فایل استایل اصلی در صورت عدم پشتیبانی از این تکنولوژی
استفاده از جاوااسکریپت برای هماهنگ سازی با نسخه های 8 و پایین تر اینترنت اکسپلورر* توانایی خصوصی سازی برای مرورگرهای اینترنت اکسپلورر به وسیله کامنت های شرطی*
سخت تر بودن کنترل و سازماندهی در صورت گسترش استایل ها آسان تر بودن کنترل و سازماندهی در صورت گسترش استایل ها
STEP II / Media Query
Embedded vs External media queries
خصوصیات مثبت  Embedded خصوصیات منفی  External
‎HTTP request های کمتر ‎HTTP request های بیشتر
بیشتر جلوی چشم است ، بنابر این سخت تر فراموش میشود کمتر جلوی چشم است ، بنابراین بیشتر فراموش میشود
STEP II / Media Query
Embedded vs External media queries با توجه به جداول
در اکثر موارد تجربه ثابت کرده است که Embedded style sheet می تواند مفید تر باشد
ویرایش نسخه داخلی راحت تر است و کمتر فراموش خواهد شد . تنها نکته مثبت در نسخه خارجی حجم کمتر فایلها در نسخه هایی است که از این تکنولوژی پشتیبانی نمی کنند که البته برای این موارد نیز راه حل های زیادی وجود دارد . برای نسخه هایی که پشتیبانی می کنند نیز تعداد کمتر HTTP request مفید تر از تعداد بیشتر و حجم کمتر در نسخه های خارجی خواهد بود .
در نهایت انتخاب با شماست !
STEP II / Media Query
اما همه چیز تمام نشده است !
Media Query تمام کارها را برای شما انجام نخواهد داد
تغییرات طرح وابسته به عرض تغییرات طرح وابسته به عرض صفحه نمایش می تواند دو حالت کلی داشته باشند

Responsive web design :
Media queries + fluid layouts + fluid media

Adaptive layouts:
Media queries + fixed-width layouts
STEP II
نقاط بحرانی یا شکست - breakpoints نوع طراحی وب سایت عامل تعیین کننده ای در انتخاب نقاط بحرانی است .
ممکن است نقاط بحرانی با روش آزمون و خطا تعیین شوند

بیشترین رزولوشن های مورد استفاده در صفحات نمایش
اندازه های زیر نشان دهنده عرض حداقل - min-widths - هستند 320px
480px
600px
768px
900px
1200px
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density STEP II
STEP II
پشتیبانی مرورگرها
media query توسط 70 تا 80% از مرورگرهای کنونی پشتیبانی می شود .
caniuse.com/css-mediaqueries STEP II
پشتیبانی مرورگرهای موبایل
media query توسط 90% از مهمترین مرورگرهای موبایل پشتیبانی میشود !

Opera Mobile ,Opera Mini ,iPhone ,Android ,Symbian ,S40 ,Dolfin ,BlackBerry ,Palm ,Phantom ,Obigo ,Bolt ,Firefox ,MicroB Android, iPhone, Opera, Blackberry, etc
quirksmode.org STEP II
هماهنگ سازی با مرورگرهای قدیمی با استفاده از پلاگین های ساخته شده با استفاده از جاوااسکریپت امکان پشتیبانی از مدیا کوئری توسط مرورگرهای قدیمی امکان پذیر شده است .

  • Respond.js
  • CSS3-Mediaqueries.js
  • Adapt.js
netmagazine.com STEP II
طراحی واکنشگرا و موتورهای جستجو طراحی واکنشگرا مستقیما توسط گوگل پیشنهاد شده است .
یکسان بودن آدرس اینترنتی به کاربران شما کمک خواهد کرد تا راحت تر آدرس وب سایت شما را به خاطر بسپارند ، راحت تر صفحات شما را به اشتراک بگذارند ویا لینک کنند و همچنین به الگورتیم گوگل برای شناسایی بهتر صفحات کمک خواهد کرد
در صورت استفاده از نسخه واکنش گرا نیازی به بررسی مجدد نسخه موبایل وب سایت توسط ربات های موتورهای جستجو نخواهد بود . استفاده از نسخه ریسپانسیو کمک خواهد کرد از درجات کسب شده توسط وب سایت ، در دنیای دستگاه های هوشمند نیز استفاده شود.
googlewebmastercentral.blogspot.com STEP II
STEP III چالش ها / مقایسه ها / نمونه ها
چالش های طراحی واکنشگرا
  • قدرت پردازش و حجم حافظه
  • پهنای باند
  • تبلیغات متفاوت برای دستگاه های دستی
  • استفاده از توانایی های دستگاه های دستی - GPS -
  • پیش آمدهای - events - صفحات لمسی
  • غیر فعال شدن تصاویر توسط کاربران
  • پشتیبانی از تکنولوژی های وب - jquery - css3 - ..
  • تلویزیون های هوشمند
STEP III
آیا طراحی واکنش گرا تمامی مشکلات را برطرف خواهد کرد ؟ یک وب سایت ریسپانسیو به ما کمک خواهد کرد تا وب سایتی قابل استفاده ، تقریبا در تمامی دستگاه های هوشمد با اندازه صفحات متفاوت و مرورگرهای متفاوت داشته باشیم .
STEP III
طراحی ریسپانسیو /اپلیکیشن / نسخه اختصاصی ! طراحی ریسانسیو ، نسخمه موبایل اختصاصی و یک اپلیکیشن همگی با توجه به نوع نیاز کاربران به وجود خواهند آمد .
نوع تبادل اطلاعات ، اهمیت حضور در محیط دستگاه های هوشمند ، نوع سرویس های ارائه شده ، تعداد مخاطبان و .. در انتخاب هر کدام از این تکنولوژی ها موثر خواهند بود .
STEP III
MOBILE FIRST با توجه به اهمیت تجارت و بازرایابی توسظ موبایل ها و دیوایس های متنوع و متفاوت بحث های بسیاری جدی در مورد شروع طراحی برای نسخه های موبایل مطرح می شود
این نوع از تفکر کاملا به نوع تجارت وابسته است
STEP III
نسخه عریض webtarget.ir STEP III
نسخه تبلت webtarget.ir STEP III
نسخه موبایل webtarget.ir STEP III

از کلیدهای space و چپ و راست کیبورد برای حرکت اسلاید ها استفاده نمائید

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.