عمومی

ریسپانسیو چیست؟ با مزایا و معایب طراحی واکنشگرا آشنا شوید

طراحی ریسپانسیو (Responsive) یا واکنشگرا از جمله روشای طراحیه که این روزا محبوبیت بالایی به دست آورده؛ اما شما با این نوع از طراحی آشنایی دارین؟ با مطالعه این مطلبِ کوتاه و به درد بخور ببینین که طراحی ریسپانسیو چیه و با امتیازات و مشکلات اون آشنا شید.

مشکلات

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

موبایل

مقاله در رابطه: رابط کاربری چیه؛ با اصول و روند طراحی UI آشنا شید

راه حلی به نام طراحی ریسپانسیو

راه حل

طراحی وب از زمان رواج رو به رشد به کار گیری دستگاه های همراه همیشه واسه پاسخگویی به نیازای خاص کاربران این وسیله ها و تناسب طراحی با محیط، اندازه و رزولوشن اونا تحت فشار بوده. در اول به نظر می رسید که بهترین راه حل به کار گیری stylesheetای متفاوت واسه اندازه های جور واجور باشه؛ اما امروزه یه stylesheet می تونه پاسخگوی صفحات نمایشی باشه که اندازه های متفاوتی دارن. در نتیجه از این روش حجم کدهای سایت هم کاهش پیدا می کنه. این نوع از طراحی بازم از راه های استاندارد واسه تشخیص دستگاه مورد استفاده کاربر استفاده میکرد، اما نیاز به طراحی یه stylesheet واسه هر دستگاه رو برطرف کرده. این طراحی همون چیزیه که به اون طراحی «ریسپانسیو» (Responsive) یا طراحی واکنشگرا می بگیم.

طراحی ریسپانسیو چیه؟

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

در طراحی ریسپانسیو از ترکیبی از تصاویر، گریدها (Grid) و طرحای انعطاف پذیر در کنار کاربرد منطقی و زیرکانه CSS استفاده می شه. در این حالت با تغییر محیط کاربری از وضعیت لپ تاپ به گوشی هوشمند، سایت به سرعت با اندازه و رزولوشن صفحه و هم اینکه اندازه پشتیبانی دستگاه مورد نظر از اسکریپتای جور واجور تطبیق پیدا می کنه. طبیعتاً فناوری لازم واسه عکس العمل خودکار به درخواست کاربر باید در سایت و مرورگر کاربر وجود داشته باشه. در آخر، از راه این روش نیاز به طراحی و پیشرفت جدا از هم واسه دستگاه های مختلفی که در بازار وجود دارن یا در آینده عرضه می شن مرتفع می شه.

طراحی ریسپانسیو چه سبک و راه روشی داره؟

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

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

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

به زبون ساده، با به کار گیری طراحی ریسپانسیو، سایت شما با دستگاه مورد استفاده بازدیدکننده تطبیق پیدا می کنه.

طراحی ریسپانسیو چیجوری کار می کنه؟

در طراحی ریسپانسیو از fluid grid یا جدولای شناور استفاده می شه. در این حالت به جای تعیین اندازه مؤلفه های جور واجور سایت بر مبنای پیکسل، همه اندازه ها به طور نسبی تعیین می شه. پس اگه در طرح سایت خود سه ستون داشته باشین، به جای اینکه عرض هر یک رو به طور جدا از هم مشخص کنین مشخص می کنین که عرض هر کدوم نسبت به ستونای دیگه چقدر باید باشه. همین قضیه در مورد آیتمای رسانه ای و از جمله تصاویر سایت هم نمونه داره، طوری که تصاویر و نوعای جورواجور آیتمای چندرسانه ای سایت هم به صورت نسبی تغییر اندازه پیدا می کنن.

فرق طراحی ریسپانسیو با طراحی fluid (روان) و طراحی adaptive (برابری پذیر)

فرق کلی طراحی ریسپانسیو با طراحی fluid یا روان اینه که در طراحی روان، تمرکز طراحی روی نسبیت اندازه ها قرار داره تا همه مؤلفه ها درصد مشابهی رو در صفحات نمایش جور واجور اشغال کنن؛ اما در طراحی ریسپانسیو با به کار گیری Media Queryای خاصِ CSS، چگونگی نمایش مؤلفه های جور واجور براساس اندازه صفحه تعیین می شه. در طراحی adaptive یا برابری پذیر یا انطباقی، اندازه ها به صورت ثابت تعریف شده و طرحا و چینشای به طور کاملً مجزایی طراحی می شه که با در نظر گرفتن اندازه صفحه یا دستگاهی که کاربر ازش استفاده می کنه در اختیار ایشون قرار می گیرن.

• طراحی Fluid یا Liquid: هدف در این نوع طراحی، حفظ اندازه نسبی همه عناصر موجود در صفحه س؛ پس هر اون چیزی که تو یه نمایشگر ۲۴ اینچی مشاهده می کنین رو تو یه لپ تاپ ۱۲ اینچی هم می بینین. به کار گیری این روش واسه صفحات مشابهی که اندازه های متفاوتی دارن کارساز میشه. در عین حال، وقتی که پای گوشیای همراه به میان میاد، به دلیل اندازه کوچیک صفحه نمایش این دستگاه ها تجربه کاربری تحت اثر قرار می گیره.

• طراحی Adaptive: در این نوع از طراحی باید هدف و کاربران مورد نظر رو مشخص و پیش بینی کرد. مثلا میشه به کار گیری بعضی از مؤلفه های طراحی رو محدود کرد تا صفحه مورد نظر با در نظر گرفتن هدف گذاری انجام شده در گوشیای همراه با سرعت بیشتری بارگذاری شه؛ یا اینکه بر ویژگیای خاصی تمرکز کرد که بیشتر با نیازای کاربران این دستگاه ها سنخیت دارن.

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

امتیازات به کار گیری طراحی ریسپانسیو

تو یه دنیای ایدئال، هممون باید زمان و توان کافی واسه ایجاد و طراحی سایتای مجزایی که به طور کاملً واسه استفاده در موبایل بهینه سازی شدن رو داشته باشیم؛ اما معمولاً مناسب ترین شرایط موجود هم واسه ما به اندازه سایتای بزرگی مثل فیس بوک و توییتر (که نسخه موبایلی مخصوص خودشون رو دارن) ایدئال نیس. در نتیجه باید به دنبال روشی باشیم که بدون ایجاد دردسرهای اضافی بتونه بهترین تجربه کاربری رو واسه بازدیدکنندگانمان رقم بزنه. همونجوریکه می دونین این راه چیزی به جز به کار گیری طراحی ریسپانسیو نیس. اما به کار گیری این روش چه فایده هایی رو در بر داره؟

ایده

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

• به کار گیری طراحی ریسپانسیو واسه مسئولان سایت به این معنیه که فقط یه نسخه از سایت هست که باید به روزرسانی شه. پس هر محتوایی که هست تو یه مکان قرار میگیره و همه چیز ساده تر می شه.

• واسه طراحان و پیشرفت دهندگان سایت هم در مقایسه با ایجاد چندین stylesheet جور واجور کار ساده تر یا منظم تری در پیش میشه؛ البته نمیشه زمان و تلاش لازم واسه طراحی یه سایت ریسپانسیو مطمئن و بدون ایراد رو بی اهمیت و ناچیز دونست. در هر صورت، از این روش همه کدهای CSS تو یه جا قرار میگیره و واسه ایجاد هر تغییر کوچیکی نیاز به ویرایش چندین و چند فایل جور واجور دارین.

بیشتر بدونین: متا تگ چیه و چیجوری به سئوی سایت شما کمک می کنه؟

مشکلات طراحی ریسپانسیو

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

• به کار گیری طراحی ریسپانسیو هیچ مزیتی رو در سرعت بارگذاری سایت واسه کاربران موبایل ایجاد نمی کنه. به این موضوع دقت لازم رو به عمل بیارین که حتی اگه بعضی از مؤلفه های سایت واسه کاربری که از گوشی هوشمند خود استفاده می کنه ظاهر نشه به این معنی نیس که اون مؤلفه ها بارگذاری نشده ان؛ بلکه فقط از دید کاربر مخفی می شن تا ایرادی در طرح سایت در موبایل به وجود نیاد. شاید بشه بزرگ ترین مشکل طراحی ریسپانسیو رو مدت زمان و سرعت بارگذاری تصاویری دونست که باید با اندازه صفحه نمایش دستگاه مورد استفاده کاربر تطبیق پیدا کنن. حواستون باشه که روند تغییر اندازه تصاویر واسه نمایش در تبلت یا گوشیای هوشمند می تونه تحت اثر قدرت محدود دستگاه های موبایل قرار بگیره و دچار معطلی یا کندی شه.

• بعضی از مرورگرهای موبایل از مدیا کوئریا (media queries) پشتیبانی نمی کنن. مدیا کوئریا در واقع دستورالعملای CSS هستن و پشتیبانی مرورگر مورد استفاده کاربر واسه نمایش درست طراحی ریسپانسیو لازمه. البته این مشکل با به روزرسانیای منظم سیستمای عامل، اپا و دستگاه های موبایل و پشتیبانی رو به رشد اونا از طراحی ریسپانسیو به سرعت در حال برطرف شدنه؛ اما به هرحال مسئله ایه که باید به اون به این موضوع دقت لازم رو به عمل بیارین.

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

اگه ترافیک سایت خود رو به زیر ذره بین ببرین شایدً می بینین که بخش بزرگ بازدیدکنندگان شما واسه بازدید و به کار گیری سایتتون از موبایل و دستگاه های همراه استفاده می کنن. همین آمار تجربی واسه شما کافیه تا به اهمیت طراحی مناسب واسه کاربران مثل این دستگاه ها پی ببرین.

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

مقاله در رابطه: AMP چیه و چه تاثیری در سئوی سایت شما داره؟

حرف آخر

با در نظر گرفتن رشد رو به رشد به کار گیری موبایل و بقیه دستگاه های پرتابل یا همراه واسه مرور اینترنت، به کار گیری طراحی ریسپانسیو دیگه یه گزینه نیس؛ بلکه به یه ضرورت بلامنازع تبدیل شده. با همه اینا باید به این نکته هم به این موضوع دقت لازم رو به عمل بیارین که طراحی ریسپانسیو حلّال همه مشکلات نیس و نمی تونه از شما در برابر تغییرات دائمی دنیای موبایل مراقبت کنه. طراحی وب ریسپانسیو یه مفهومه که اگه به درستی اجرا و اجرا شه می تونه تجربه بهتری رو واسه کاربران رقم بزنه، اما نمی تونه همه مشکلاتی که کاربر با اون مواجه می شه رو به شکل خودکار حل و فصل کنه. به خاطر همین، همیشه باید در جریان جدیدترین فناوریا، دستگاه ها و رزولوشنا قرار داشته باشین تا بتونین همگام با تغییرات قدم وردارین و تجربه بهتری رو واسه بازدیدکنندگان وب سایتتون جفت و جور کنین.

مشاهده نسخه pdf مقاله:  ریسپانسیو چیه؟ با امتیازات و مشکلات طراحی  واکنشگرا آشنا شید