Responsive Web Desgin نوعی از تفکر در طراحی وب است که نسبت به طرح دیدی فراگیر دارد که کاربر با هر نوع دستگاهی وبسایت را متناسب با نیاز و اندازه صفحه نمایش دستگاه ببیند.
برای روشن شدن مسله به معنی کلمه Responsive در فرهنگ لغت Longman نگاهی می‌اندازیم:
کلمه Responsive را به معنی عکس العمل سریع در جهت مثبت معرفی می‌کند، Responsive Web Design که از آن در نسخه جدید ووردپرس فارسی به عنوان “واکنشگرا” نام برده، به مفهوم جابجایی، نمایش و یا عدم نمایش عناصر صفحه است که نسبت به رزولوشن دستگاه بر اساس اولویت نمایش داده شوند.
این نوع از طراحی موضوعی است که از سال‌ها پیش با عناوینی چون “Progressive enhancement”, “Adaptive web design”, “Graceful degradation” کم و بیش مطرح شده بود اما اصطلاح Responsive Web Design توسط Erhan Marcotte با ظهور CSS3 و قابلیت Media Queries آن به سرعت توسعه یافت و مورد توجه قرار گرفت.
با گسترش روزافزون موبایل و تبلت‌ها و وجود بیش از ۴ میلیارد موبایل در سراسر جهان دیگر نمی‌توانیم فرض کنیم سایت ما بر روی یک مونیتور با رزولوشن متوسط دیده خواهیم شد. RWD تفاوت‌های مهمی با ساخت نسخه مجزا برای موبایل دارد:
مشکلات طراحی نسخه مجزا برای موبایل:
- ایجاد URL مجزا برای نسخه موبایل و وب: که در هنگام اشتراک گذاری یک لینک شما ممکن است لینک نسحه موبایل را به اشتراک بگذارید اما کاربری دیگر با کامیپوتر دسکتاپ لینک شما را باز کند-یا بر عکس-.
- ایجاد قالب‌های مختلف برای هر نسخه و استفاده از فناوری‌ها و طراحی‌های متفاوت باعث بوجود آمدن سربار و افزایش کار طراحی و پیاده‌سازی وبسایت می‌شود.
- کاهش توجه به کاربران: اگر عده‌ایی روی نسخه موبایل و عده‌ایی روی نسخه دسکتاپ کار کنند، چه کسی دارای یک چشم انداز واحد و یکپارچه از تجربه کاربری بر روی همه‌ی کاربران شما خواهد داشت؟
- کاربران موبایل شناسایی می‌شوند و نسخه موبایل نمایش داده می‌شود حال اگر کاربری با تبلت یا دستگاهی با اندازه نامتعارف وارد سایت شود، آیا نسخه‌ایی مناسب آن وجود دارد؟
- توجه به نسخه موبایل از ابتدا با رویکر معروف “Mobile First” به این معنی که شما اولویت کار را به تمرکز بر نیاز کاربر میگذارید.
- پیاده‌سازی یک وبسایت که پاسخگو موبایل، تبلت، کامپیوتر دسکتاپ و ایده آل برای هر نوع دستگاهی که در آینده ممکن است وارد بازار شود.
- وجود یک URL مشخص که در هر دستگاهی نمایش متناسبی خواهد داشت.
مبحث RWD را به دو بخش تقسیم میکنم که در آینده بر همین اساس این موضوع را دنبال کنیم:
۱- تفکر Responsive:
برای روشن شدن این مسله به مثال زیر توجه کنید:
مثال خوبی که در این زمینه می‌توان پیدا کرد، وب‌سایت‌های رستوران است. معمولا کاربران کامپیوترهای دسکتاپ برای دیدن منو رستوران، دیدن عکس‌هایی از رستوران و غذاها و حتی دیدن یک تور ویدیویی وارد وبسایت می‌شوند اما کاربری که با تلفن همراه وارد سایت می‌شود به احتمال زیاد برای پیدا کردن آدرس، تلفن و یا فرم رزور وارد شده.
یکی از موارد مهم در طراحی اینگونه سایت‌ها، داشتن تفکر Responsive است-که بسیار نزدیک به مباحث تجارب کاربری(UX) می‌شود-. با توجه به معنی کلمه responsive: عکس العمل سریع در جهت مثبت: عکس العمل سریع استفاده درست از ابزار RWD است و جهت مثبت درواقع تفکر برای چیدمان درست اجزا در صفحه می‌باشد.
۲- ابزار Responsive:
- تکنیک‌های طراحی واکنشگرا
- تصاویر و ویدیو
- خبرنامه‌ها(ایمیل)
- الگو‌ها
- Frameworks
- JavaScript & jQuery
- اشکال زدایی و آزمایش طرح واکنشگرا
نمونه‌های طراحی وب واکنشگرا:
برای درک بهتر این موضوع پیشنهاد میکنم از سایت‌های زیر دیدن کنید و با تغییر اندازه صفحه به چیدمان جدید سایت توجه کنید :
پی‌نوشت:
- در مطالب آینده به معرفی ابزار و تکنیک‌های طراحی واکنشگرا می‌پردازیم.
- در حال آماده سازی یک قالب Responsive برای وبلاگ خودم هستم که در آینده برای استفاده کاربران ووردپرس خواهم گذاشت.
قبل از اینکه بخونم، خواستم واسه نفر اول بودن سک سک کنم بعد نظرمو میگم!
خیلی جالب بود.
به شدت منتظر آموزشش هستم
این روش نیاز به تفکر واکنشگرا هم میخواهد . من خودم چند کتاب در این مورد خوندم . و کم کم دارم کامل درکش میکنم . البته میشه از خود پوسته ی twenty eleven وردپرس هم واسه شروع کار استفاده کرد.
بله مهمترین مسله تفکر واکنشگراست و در واقع همون موضوع Mobile First که در مطالب بعدی بیشتر در موردش مینویسم.
نیازی به تم ووردپرس نیست. اصول و ابزاری داره که میشه برای Responsive از آن استفاده کرد
نه منظورم این نبود که از وردپرس استفاده کنیم . منظورم اینکه اگه به این پوسته هم نگاهی بندازیم برای یادگیری خوبه.
راستی من هم یه مقاله در این مورد نوشتم . هرچند کوتاهه و کامل نیست ولی برای شروع کار خوبه. لطفا اگه میشه بهش نگاهی بندازید و نظرتون رو در موردش به من بگین
http://copity.com/%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4%DA%AF%D8%B1%D8%A7/
پرهام جان ممنون.
نوشته‌ی خلاصه و گویات میتونه ورود به RWD باشه.
منتظر نوشته بعدی هستم.
ضمنا این لینک رو توی نوشته‌ات چک کن:
“تجارب کاربری(UX)”
من قصد داشتم یه نسخخه موبایل برای وب سایتم بنویسم ولی با دیدن این مقاله متوجه شدم که کار سختی رو قراره شروع کنم. قبلا قصد داشتم که با کمی کد نویسی در هدر صفحه اطلاعات دستگاه کاربر رو بگیرم و بر اساس اون یک در صورتی که رزولوشن صفحه از یه حدی پائینتر بود یه فایل css مختص به اون device رو لود کنم.
سلام و تشکر بابت این مطلب واقعا آموزنده
فکر می کنم که اینک کار رو باید با php انجام داد یا با ajax که اول نوع سیستم کاربر و وضح توصیرش تخیص داده بشه و برا اساس اون کد استایل صفحه که متناسب با اون دستگاه هست فراخونی بشه و سایت بر اساس اون صفحه بندی بشه ، خلاصه ایده و راهکار خیلی خوبی بود ، حتما سعی می کنم توی سایت خودم این کار رو انجام بدم …
خواهش میکنم
اصل این موضوع با css media query انجام میشه اما برای بعضی کارهای و لود کردن عکس ها از جاوا اسکریپت و PHP هم در طراحی واکنشگرا استفاده میشه
در مطالب بعدی بیشتر توضیح میدم تا بتونید به صورت عملی به کار ببرید
موفق باشید
مطلب عالی بود. مخصوصا قسمت تفکر واکنش گرا. فقط مشکل اینه به شرطی که کاربران سایت هم همراهی کنند و حداقل از دست این IE ملعون خلاص بشن و به کروم و فایرفاکس رو بیارن
فکر نکنم ربطی به کاربران داشته باشه، به هر حال یک قسمتی از کاربران خواه ناخواه از ie استفاده خواهند کرد چرا که خود رو به کاربرا تحمیل کرده…
البته فق زک نفرمی تونست این کار رو بکنه که اون هم مایکروسافت هست که بادادن نسخه های جدید این مشکلات رو برطرف کنه
درسته. ولی خب به نظرم تا یه سال دیگه همه مجبورن بیان نسخه بالاتر.چون جی کوئری نسخه ۲ دیگه از مرورگرهای قدیمی ie پشتیبانی نمیکنه و سایتی هم نیستش که جی کوئری نداشته باشه پس دیگه بقیه مجبورن تغییر سلیقه بدن و بیان به مرورگرهای مدرن. Jquery فعلا به عنوان اولین نفر برای زور کردن کاربران پیشقدم شده انگار d:)
سلام
طرح گرافیکی باید قابلیت واکنشگرا شدن را داشته باشد و خوب این تازه اول داستان است جون اغلب کارفرمایان وب سلایق شخصی خودشان را بروی طرح اعمال می کنند و خوب اکثرشان طراحی های وب ۲ را نمی پسندند (تجربه شخصی) ، چه کنیم که در این بین مجبوریم همه این تناقضات را با هم جمع کنیم .
پیش به سوی واکنشگرا شدن :)
ممنونم
دقیقا همینطوره یکی از بحث های مهمی که در طراحی Responsive وجود دارد تفکر Responsive است. که در مطلب های بعدی روی این موضوع بیشتر بحث خواهیم کرد.
واقعا عالی بود، فقط ای کاش چند تا منبع و یا خودتون چگونگی طراحی رو یاد میدادین