طراحی ریسپانسیو

این روز ها داشتن ورژن تلفن همراه برای اکثریت قریب به اتفاق وبسایت‌ها و به‌خصوص وب سایت‌های کسب‌وکار به یک ضرورت تبدیل گردیده است.

در واقع شرایط به گونه‌ای گردیده که انگار بایستی برای هر دستگاهی یک طراحی مجزای مطلوب داشته باشید:

یک طرح برای آیفون، طراحی‌های گوناگون برای دستگاه‌های مختلف اندرویدی، طراحی مناسب برای تبلت‌ها و مثلا آیپد و … .

در نهایت، وبسایت شما می بایست با تمامی دستگاه‌های مختلف و رزولوشن‌های متنوع آنها سازگار باشد.

علاوه بر این‌ها، بدون تردید در سال‌های آینده ابداعات متنوع‌تری را نیز شاهد خوا‌هیم بود

که بایستی ‌وب سایت خویش را با آن ها نیز تطبیق بدهید.

ولی این شرایط تا چه وقتی ادامه خواهد داشت؟

البته که تا همیشه!

در واقع بالاخره به جایی می‌رسیم

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

البته حتی در حال حاضر نیز پیاده سازی ورژن‌های متعدد برای هر رزولوشن و دستگاه برای اغلب ‌وب سایت‌ها امکان‌پذیر وجود ندارد.

در چنین شرایطی چه بایستی کرد؟

آیا بایستی از خیر برخی از دستگاه‌ها بگذریم

و صرفا روی تعدادی موردی تمرکز کنیم

که بیشترین بازدیدکننده و مشتری را برای ما جذب می‌نمایند؟

در‌این‌حالت‌ باز هم بازار بزرگی را از دست خوا‌هیم داد،

به این دلیل که تمام کاربرانی که از دستگاه‌های گوناگون نامتناسب با ‌وب سایت ما به کارگیری می‌نمایند معدود نخواهد بود.

ولی آیا آیتم دیگری هم داریم؟

راهکاری به اسم پیاده سازی ریسپانسیو

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

در بالا به نظر میرسید که بهترین راه‌حل استفاده از stylesheet های مختلف برای اندازه‌های متعدد باشد؛

ولی امروزه یک stylesheet می تواند پاسخگوی صفحه های نمایشی باشد که اندازه‌های متفاوتی دارا هستند.

در نتیجه از این شیوه حجم کدهای ‌وبسایت نیز کاهش پیدا خواهد کرد.

این نوع از طراحی همچنان از طریق‌های استاندارد برای تشخیص دستگاه مورد استفاده مخاطب سود می برد،

البته نیاز به طراحی یک stylesheet برای هر دستگاه را برطرف نموده است.

این طراحی به عبارتی چیزی میباشد

که به آن طراحی «ریسپانسیو» (Responsive) یا این که طراحی واکنشگرا میگوییم.

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

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

که طراح بر مبنای آن صفحه را به طوری طراحی می‌نماید

که با دستگاهی که در آن نمایش داده می شود تطبیق پیدا می‌نماید.

در‌این شیوه، طراحی و پیشرفت به گونه‌ای اعمال می گیرد

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

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

به طور طبیعیً فناوری موردنیاز برای واکنش اتوماتیک به درخواست استفاده کننده می بایست در وب سایت و مرورگر مخاطب وجود داشته باشد.

در نهایت، از طریق این شیوه نیاز به طراحی و توسعه مجزا برای دستگاه‌های مختلفی که در بازار وجود دارند

یا این که در آینده عرضه خواهند شد مرتفع می‌گردد.

 

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

یا این که استفاده از طراحی ریسپانسیو یک ‌وبسایت خواهید داشت که مؤلفه‌هایی مختلفی در آن وجود دارد.

وقتی که ‌وبسایت شما در دستگاه‌های مختلفی به نمایش در می آید،

بنا به تنظیماتی که برای طراحی تعریف گردیده،

این مؤلفه‌ها عکس العمل‌های متفاوتی را از خویش نشان می دهند.

یک ‌وبسایت با طراحی سنتی را در نظر بگیرید؛

معمولاً اینگونه وب سایت‌هایی کاربران تلفن همراه یا تبلت را ناچار می‌نمایند تا به سمت چپ یا راست صفحه اسکرول کرده،

یا این که برای مشاهده متن‌های ریز به ناچار بر روی آنان زوم نمایند.

به عبارت دیگر مخاطب مجبور به انجام کارهایی می شود

که علاقه‌ای به انجامشان ندارد.

طبیعتاً ایجاد طرح مناسبی که پاسخگوی نیاز همگی کاربران باشد راحت نخواهد بود.

به علاوه، قابلیت و امکان چرخش اتوماتیک صفحه موبایل‌ها و تبلت‌ها نیز مزید بر علت میشود

و فعالیت را برای طراحان دشوارتر می‌نماید.

برخی از دستگاه‌ها نیز صفحه های بسیار کوچکی دارا هستند،

که طراحی برای آنها را به دردسر بزرگ‌تری تبدیل خواهد کرد.

به علاوه، حفظ طرح صفحه و نمایش صحیح وبسایت برای ‌وبسایت‌هایی که تصویر محور می‌باشند

یا این که از مورد‌های گرافیکی فراوانی استفاده می‌نمایند دشوارتر میباشد.

در اینگونه شرایطی طراحی ریسپانسیو به یاری طراحان، صاحبان وبسایت و همینطور کاربران می آید.

از جمله با به کار گیری از این نوع از طراحی می‌توان ورژن تبلت را به گونه ای تهیه و تنظیم کرد

که در موقعیت دو ستونه نمایش داده خواهد شد.

از این روش، در خوانایی محتوا و حرکت در وبسایت اختلالی به وجود نمی‌آید.

در تلفن همراه‌های هوشمند می‌توان محتوا را به طور عمودی در یک ردیف مرتب کرد

یا این که قابلیت جابجایی میان چندین ردیف را با تکان لمسی سوایپ برای استفاده کننده مهیا کرد

و از نمایش عناصر مزاحم خودداری نمود.

تصاویر نیز به جای آنکه ریز یا بزرگ به نظر برسند،

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

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

در پیاده سازی ریسپانسیو از fluid grid یا جدول‌های شناور به کارگیری میشود.

در این صورت به جای انتخاب اندازه مؤلفه‌های گوناگون وب سایت بر مبنای پیکسل، همگی اندازه‌ها به صورت نسبی انتخاب می شود.

به این ترتیب در‌حالتی که در طرح وبسایت خویش سه ردیف داشته باشید،

به جای آنکه عرض هر کدام را به صورت جدا از هم تعیین فرمایید،

مشخص و معلوم میکنید که عرض هرکدام نسبت به ردیف‌های دیگر چقدر می بایست باشد.

همین زمینه در خصوص گزینه‌های رسانه‌ای و مثلا تصاویر وب سایت نیز مصداق دارد،

به گونه ای که تصاویر و اشکال گوناگون گزینه‌های چندرسانه‌ای وب سایت هم به طور نسبی تغییر اندازه پیدا می‌نمایند.

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

تفاوت عمده طراحی ریسپانسیو با طراحی fluid یا روان این میباشد

که در پیاده سازی روان، تمرکز طراحی بر روی نسبیت اندازه‌ها قراردارد

تا تمامی مؤلفه‌ها درصد مشابهی را در صفحه های نمایش مختلف اشغال نمایند؛

البته در طراحی ریسپانسیو با به کار گیری از Media Query های خاصِ CSS، طرز نمایش مؤلفه‌های متعدد مبتنی بر اندازه صفحه انتخاب میشود.

در طراحی adaptive یا انطباق پذیر یا انطباقی، اندازه‌ها به طور ثابت تعریف گردیده

و طرح‌ها و چیدمان‌های کاملاً مجزایی طراحی می‌گردد

که با توجه به اندازه صفحه یا دستگاهی که استفاده کننده از آن به کار گیری می‌نماید در اختیار او قرار خواهند گرفت.

• طراحی Fluid یا Liquid: 

هدف از این نوع طراحی، حفظ اندازه نسبی کلیه عناصر موجود در صفحه میباشد؛

براین اساس هر آنچه که در یک مانیتور ۲۴ اینچی مشاهده میکنید را در یک لپ‌تاپ ۱۲ اینچی نیز خواهید مشاهده کرد.

به کار گیری از این شیوه برای صفحه های مشابهی که اندازه‌های متفاوتی دارا‌هستند، کارساز خواهد بود.

در عین حال، وقتی که پای تلفن همراه‌ به در میان می آید،

به جهت اندازه کوچک صفحه نمایش این دستگاه‌ها تجربیات کاربری تحت تأثیر قرار خواهد گرفت.

• طراحی Adaptive:

در‌این نوع از طراحی بایستی هدف و کاربران مورد نظر را معلوم و پیش‌بینی کرد.

به عنوان مثال می‌توان به کار گیری از برخی از مؤلفه‌های طراحی را محدود کرد،

تا صفحه مورد نظر با توجه به هدف‌گذاری صورت گرفته در تلفن همراه با سرعت بیشتری لود خواهد شد؛

یااینکه بر ویژگی‌های خاصی تمرکز کرد

که بیشتر با نیازهای کاربران این دستگاه‌ها سنخیت دارا هستند.

• طراحی ریسپانسیو:

طراحی ریسپانسیو با عنایت ویژه به مقیاس پذیری (Scalability) آغاز میشود.

دراین‌صورت، طرح صفحه به شکلی در میاید

که برای صفحه نمایش مورد نظر تعریف شد‌ه‌است.

از جمله، در حالتی که یک وب سایت را در تلفن همراه خویش گشوده نمائید،

تمام طرح به حالت یک ستونه در خواهد آمد

تا با اندازه صفحه تلفن همراه شما تناسب پیدا نماید.

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

در یک دنیای ایدئال، تمامی ما بایستی زمان و توان کافی برای ایجاد و ساخت وب سایت‌های مجزایی که تماماً برای به کارگیری در گوشی بهینه‌سازی گردیده‌اند را داشته باشیم؛

ولی معمولاً مطلوب‌ترین وضعیت مو جود نیز برای ما به اندازه وبسایت‌های بزرگی مثل فیس‌بوک و توییتر (که ورژن موبایلی منحصر به فرد خودشان را دارا هستند) ایدئال وجود ندارد.

در نتیجه می بایست در‌پی روشی باشیم که بدون ایجاد دردسرهای اضافی بتواند بهترین تجربه کاربری را برای بازدیدکنندگانمان رقم بزند.

همان‌طور که می دانید این‌شیوه چیزی به جز استفاده از طراحی ریسپانسیو وجود ندارد.

البته استفاده از این شیوه چه مزایایی را در بر دارد؟

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

که به منظور طراحی برای دستگاه‌های متفاوت لازم میباشد.
• استفاده از طراحی ریسپانسیو برای مسئولان وب سایت بدین مفهوم میباشد

که صرفا یک ورژن از وبسایت وجود دارد که بایستی به‌روزرسانی گردد.

به این ترتیب هر محتوایی که وجود دارد،

در یک جای قرار میگیرد

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

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

در هر صورت، از این شیوه تمامی کدهای CSS در یک جا قرار می گیرد

و برای ایجاد هر تغییر کوچکی نیاز به بازنویسی چندین و چند پوشه متفاوت نخواهید داشت.

معایب طراحی ریسپانسیو

هر چیز خوبی معایبی هم داراست

و به طور طبیعیً طراحی ریسپانسیو نیز از این قاعده مستثنا وجود ندارد.

در واقع، درصورتی که غیر از این بود،

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

توجه داشته باشید که حتی اگر برخی از مؤلفه‌های وب سایت برای کاربری که از تلفن همراه هوشمند خویش استفاده می‌نماید ظاهر نشود،

به‌این معنی نخواهد بود که آن مؤلفه‌ها بار گذاری نشده‌اند؛

بلکه تنها از لحاظ مخاطب مخفی می شوند

تا ایرادی در طرح ‌وبسایت در تلفن همراه به وجود نیاید.

شاید بتوان بزرگ‌ترین معضل طراحی ریسپانسیو را مدت زمان و سرعت بار گذاری تصاویری دانست

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

دقت داشته باشید که مراحل تغییر اندازه تصاویر برای نمایش در تبلت یا موبایل‌های هوشمند قادر است

تحت تأثیر توان محدود دستگاه‌های تلفن همراه قرار بگیرد

و دچار وقفه یا کندی خواهد شد.
• برخی از مرورگرهای گوشی از مدیا کوئری‌ها (media queries) پشتیبانی نمی کنند.

مدیا کوئری‌ها در واقع دستورالعمل‌های CSS میباشند

و پشتیبانی مرورگر آیتم به کارگیری کاربر برای نمایش درست طراحی ریسپانسیو ضروری میباشد.

ولی این مشکل با به‌روزرسانی‌های منظم سیستم‌های عامل، نرم‌افزار‌ها و دستگاه‌های گوشی و پشتیبانی روزافزون آنان از پیاده سازی ریسپانسیو به سرعت در حال برطرف شدن میباشد؛

البته به‌هرحال موضوع‌ای میباشد که می بایست به آن دقت داشته باشید.

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

درصورتی که ترافیک ‌وب سایت خویش را به زیر ذره‌بین ببرید احتمالاً خواهید مشاهده کرد که بخش اعظم بازدیدکنندگان شما برای بازدید و استفاده از سایتتان از گوشی و دستگاه‌های همراه استفاده می‌نمایند.

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

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

در واقع، از این روش دیگر محدودیت خاصی در به کارگیری از‌وبسایت شما وجود نخواهد داشت؛

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

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

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