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

سلام
قالبی که با همه ی مرورگرها هماهنگ باشه، هم برای موبال ، هم برای تبلت !

موفق باشید

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

نقل قول: مهمترین نکته و بحثی که ما را به بحث قالب واکنش گرا یا ریسپانسیو (responsive) می کشاند عرض صفحه ی نمایش دستگاه های مختلی است که توسط آن به وسیله ی یک مرورگر اینترنتی به مشاهده ی یک وبسایت می پردازیم.
بحث اصلی در قالب واکنش گرا بر سر “عرض” صفحه نمایش است
در اینجا (بحث قالب واکنش گرا) ارتفاع صفحه ی نمایش اهمیت چندانی ندارد و باز هم تاکید می کنم که “عرض” صفحه ی نمایش از اهمیت بالایی برخوردار است زیرا امروزه با ورود دستگاه های همراه مانند گوشی های تلفن همراه و تبلت ها به دنیای دستگاههای پیشمایش صفحات اینترنتی تنوع “عرض” این دستگاه ها بسیار زیاد شده است.

این تنوع عرض از دستگاههای موبایل کوچک با کمتر از چند صد پیکسل شروع می شود و تا کامپیوترهای رو میزی که گاه عرض مانیتور آنها به چند هزار پیکسل میرسد را شامل می شود.
در گذشته سایت ها به گونه ای طراحی می شدند که از یک عرض پرکاربرد به بالا را پاسخ دهند (مثال ده سال پیش عرض 800 در ارتفاع 600 پیکسل به بالا و پنج سال پیش عرض 1024 در ارتفاع 768 اهمیت بیشتری برای طراحان قالب داشت) و بدیهی است که زمانی که یک عرض به عنوان عرض پایه برای طراحی در نظر گرفته می شود آن قالب نباید برای عرض های بزرگتر مشکلی داشته باشد اما مشکل از زمانی شروع می شود که قصد داشته باشیم در یک دستگاه با عرض کمتر سایت را مشاهده کنیم. در این زمان برای استفاده از صفحه اسکرول افقی در صفحه به وجود خواهد آمد که به دلیل دشوار نمودن پیمایش صفحات اینترنتی برای کاربر یک نکته ی بسیار منفی در طراحی محسوب می شود.
طراحی ریسپانسیو یا واکنش گرا آمده است که این مشکل را برطرف نماید به این معنی که شما به همان راحتی که در کامپیوتر رومیزی یا به اصطلاح دسکتاپ صفحات اینترنتی را مشاهده و پیمایش می کنید بتوانید در دستگاه کوچک و قابل حمل خود نیز این کار را به وسیله امکان لمس (تاچ) انجام دهید.
مهمترین دستور Css مرتبط با این موضوع min-width می باشد که اگر با اچ تی ام ال آشنایی داشته باشید موضوع به سرعت دست گیرتان می شود اما بنده قصد ندارم در اینجا وارد مباحث طراحی سایت شوم بنابراین از توضیح بیشتر در این خصوص خودداری می کنم.
از مباحث مهم دیگر در مورد طراحی و قالب واکنش گرا این است که غیر از مبحث عرض دستگاههای مختلف مبحث لمس یا همان tuch از ویژگی های اصلی دستگاههای جدید است که در طراحی بحث استفاده از جاوااسکریپت را در طراحی پر رنگتر می کند زیرا به طور معمول در اچ تی ام ال و سی اس اس این امکان جایگاه چندان خاصی ندارد.

با سلام شاید ساده ترین پاسخی که بتونیم به این سوال بدیم این باشه
درصد قابل توجهی از بازدیدکنندگان اینترنت با موبایل و تبلت سایت شما رو می بینند . طراحی واکنش گرا باعث می شود وب سایت شما در موبایل و تبلت ها با کیفیت و ظاهر بهتری هماهنگ و دیده شوند
این عکس رو هم ببینید تو درک بهتر کمکتون میکنه :

اگر کمی بخواهیم تخصصی تر در مورد روند واکنش گرا یا ریسپانسیو بودن قالب توضیح دهیم قالب پس از لود شدن به کمک دستوراتی که در CSS قرار داده می شود تغییر حالت داده و براساس مقادیر تعریف شده در هر رزولوشن قالب نیز تغییر حالت می دهد برای تعریف رزولوشن در CSS از کد زیر استفاده می کنند

در کد بالا تمامی رزولوشن ها تا 768px تنظیم می شود البته در صورتی که سی اس اس های شما زیاد و قادر به انجام این کار نباشید می توانید با فراخوانی فریم ورک هایی نظیر Bootstrap , Foundation و با کمترین زمان قالب را ریسپانسیو کنید همچنین در این فرم ورک ها تمام خصوصیات مرتبط با ریسپانسیو و حتی منوها , باکس ها و.. که بصورت کامل تعریف شده استفاده نمایید.

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

http://responsive.is
http://responsify.it
http://www.browserstack.com/responsive


برای تست ریسپانسیو بودن قالب نیز می توانید با استفاده از مرورگر فایر فاکس و فشردن دکمه های زیر حالت ریسپانسیو مرورگر را فعال نمایید
CTRL+SHIFT+M

البته راه ساده تر واسه تشخیص رسپانسیو اینه که
Ctrl رو بگیری بعد قرقره ی موس رو دور بدی
ببخشید یه سوال مثلا من که با دیوایس با رزولوشن760 وارد یک سایت با قالب واکنش گرا میشم
تمامی استایل ها لود و بارگیری میشه یا فقط سی اس اس مربوط به دیوایس من؟

(93-7-9، 01:14 عصر)xboy نوشته است: البته راه ساده تر واسه تشخیص رسپانسیو اینه که
Ctrl رو بگیری بعد قرقره ی موس رو دور بدی
ببخشید یه سوال مثلا من که با دیوایس با رزولوشن760 وارد یک سایت با قالب واکنش گرا میشم
تمامی استایل ها لود و بارگیری میشه یا فقط سی اس اس مربوط به دیوایس من؟

یکی از مشکلاتی که نگه داشتن CTRL و حرکت دادن اسکرول میشه اینکه که تمام اشیا صفحه بزرگ میشن و در همین زمان حالت ریسپانسیو نیز رخ می دهد که این روش کمی مشکل دارد ولی یکی از گزینه های خوب کوچک کردن مرورگر یا Restore down کردن آن است که می توانید مانند حالت ریسپانسیو مرورگر دربیاورید.
تمامی حالت ها لود می شوند ولی چون شما با دیوایس خاص وارد می شوید تنها اشیا یا بصورت display:none در می آیند یا دارای مقادیر خاص می شوند برای اینکه قالب به حالت ریسپانسیو دربیاد بجز @media باید متا تگ زیر را در Head سایت خود قرار دهید
این متا تگ به این معنی است که دیوایس مربوطه تا چه میزان باید زوم داده شود یا بزرگ شود و با استفاده از @media خصوصیات مربوطه به آن رزولوشن داده می شود.

در شرایطی که ویژگی های ریسپانسیو سیل عظیمی از طراحان را مسحور خود کرده است و فناوری های دیگر تقریبا فراموش شده است من از آن دسته طرفداران اندک اما وفادار " نسخه موبایل " بر پایه تشخیص اتوماتیک هستم و اعتقاد بسیار زیادی به استفاده از این روش دارم حتی اگر از نظر خیلی ها منسوخ شده باشد.


اما یک ویژگی بارز نسخه موبایل نسبت به ریسپانسیو :







موفق باشید

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

ممنون از شما ... فقط یک سوال دیگه میشه نقش طراح پی اس دی و کد نویس را در طراحی این نوع قالب توضیح بفرمایید....
یا اصلا طراح نقشی داره یا همه به عهده کد نویس است؟!