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

ریسپانسیو، از لغت Responsive، به معنای پاسخگو و مسئولیت پذیر گرفته شده است. در حوزه وب و طراحی وب سایت، ریسپانسیو (Responsive) یا واکنش گرا، اصطلاحا به وب سایتی گفته می شود که قادر است بر حسب اینکه چه دستگاهی را کاربر در حال استفاده از آن است، از خود واکنش نشان دهد. به عنوان مثال، سایتی که قادر است روی تمام نمایشگرها از خود واکنش نشان دهد و به خوبی نمایش داده شود را اصطلاحا ریسپانسیو گویند. سایت های ریسپانسیو قادرند به طول و عرض صفحه نمایش هر کاربر، نوع دستگاه استفاده شده توسط کاربر (دسکتاپ، موبایل، تبلت) و یا انواع مختلف سیستم عامل ها (Windows، Linux، Android، و iOs) از خود واکنش نشان داده و به خوبی نمایش داده شود.

انعطاف پذیری در طراحی ریسپانسیو

طراحی واکنشگرا یک رویکرد طراحی برای رابط کاربری گرافیکی (GUI) است که برای ایجاد محتوایی که به راحتی با اندازه های مختلف صفحه نمایش تنظیم شود، استفاده می شود. طراحان، عناصر را در واحدهای نسبی (%) تعریف می کنند و برای سایزهای مختلف از صفحه نمایش، نسبت های متفاوتی را تعریف می کنند، بنابراین قالب می تواند به طور خودکار با فضای مرورگر تطبیق داده شود تا از سازگاری محتوا در دستگاه‌های مختلف اطمینان حاصل شود.

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

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

سازمان ها و طراحان مزایای طراحی واکنشگرا را به سختی نادیده گرفته بودند. به‌جای کار با واحدهای مطلق (مثلا پیکسل‌ها) در نسخه‌های جداگانه، طراحان می توانستند فقط بر روی یک طرح تمرکز کنند و اجازه دهند مانند مایعی جریان یابد تا همه «ظروف» را پر کند. طراحی واکنشگرا بی عیب و نقص هم نیست. با این وجود، مزایای قابل توجهی دارد و جذابیت آن به طور پیوسته در حال افزایش است. همچنین تعداد فریمورک های رایگان متناسب با آن وجود دارد. طراحی ریسپانسیو به یکی از ویژگی های اجباری چندین سازمان (به عنوان مثال، گوگل) تبدیل شده است.

طراحی پاسخگو – تکنیک ها

طراحی ریسپانسیو دارای سه اصل اصلی است:

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

اگر از CSS (برگ‌های سبک آبشاری) برای پایه طراحی خود استفاده کنید، کار شما بسیار راحت ‌تر است (برخی از فریم ورک ها نیز نظیر بوت استرپ ها برای این منظور به صورت رایگان در دسترس هستند). شما باید اندازه هدف را تقسیم بر زمینه، به عنوان درصد، محاسبه کنید. این حداکثر عرض ویژگی طراحی شما تقسیم بر حداکثر عرض مرورگر کاربران است. وقتی این درصد از ویژگی‌ها را روی ویژگی‌های مورد نیاز در اسکریپت CSS اعمال می‌کنید، یک طرح واحد خواهید داشت که بر اساس اندازه صفحه‌نمایش کاربران بزرگ یا کوچک می‌شود.

2. استفاده از تصاویر روان – برخلاف متن، تصاویر به طور طبیعی سیال نیستند. این بدان معناست که آنها به طور پیش‌فرض از در همه صفحات و دستگاه ها به یک اندازه نمایش داده می شوند. این آشکارا ایراد دارد چرا که تصاویر در طراحی شما در همه دستگاه‌ها به یک اندازه و ناسازگار با اندازه صفحه نمایش، به نظر می‌رسند، و بنابراین نامتناسب با عناصر دیگر نیز نشان داده می‌شوند. در نتیجه، باید یک دستور CSS را اعمال کنید—: img {max-width: 100%;}—تا از کوچک شدن تصویر برای نمایشگرهای کوچکتر اطمینان حاصل کنید. برای گنجاندن بسیاری از تصاویر، از دستور CSS دیگری استفاده می کنید.

3. پرسش‌های رسانه‌ای (Media Query) - فیلترهایی هستند که برای تشخیص ابعاد دستگاه مرورگر استفاده می شوند تا طراحی شما را به‌طور مناسب نمایش ‌دهد. با استفاده از آنها، می‌توانید تعیین کنید که کاربر در چه اندازه صفحه‌ای، طراحی شما را مشاهده می‌کند. اینها چیدمان سایت را برای برآوردن شرایط خاصی تغییر می دهند. شما همچنین این موارد را از طریق CSS وارد می‌کنید، و پرکاربردترین آن‌ها، حداقل عرض، حداکثر عرض، حداقل ارتفاع و حداکثر ارتفاع هستند. بنابراین، بر اساس عرض، ارتفاع، جهت صفحه نمایش و غیره، می‌توانید به دقت مشخص کنید که طراحی شما چگونه برای کاربران مختلف نمایش داده می‌شود.

شما می توانید از ابزارهای مختلفی مانند Bootstrap، H5P، Gomo و Elucidat استفاده کنید. بنابراین، شما همیشه نیازی به داشتن تخصص برنامه نویسی ندارید.

بهترین تمرین و نکات ضروری برای طراحی ریسپانسیو (پاسخگو)

با طراحی واکنشگرا، شما برای انعطاف پذیری در هر دستگاهی، طراحی می کنید - تصاویر، متن و طرح بندی. بنابراین باید موارد زیر را در نظر داشته باشید:

• 1. در استفاده از رویکرد «اول تلفن همراه» به موارد زیر توجه کنید:
  • طرح‌های نسخه موبایل را متناسب با صفحه‌نمایش بزرگ‌تر تغییر دهید.
    
    
  • همیشه به یاد داشته باشید که کاربران تلفن همراه به دکمه های بزرگتری (بیش از 40 پیکسل) نسبت به نسخه های دسکتاپ نیاز دارند. همچنین، طراحی شما باید دو برابر وضوح بیشتری نسبت به نسخه معادل دسکتاپ داشته باشد، چرا که نیاز به عناصر با اندازه بزرگ در صفحه‌نمایش‌های کوچک‌تر می‌تواند باعث در هم رفتگی المان ها در یکدیگر شود.
    
    
• 2. از شبکه ها و تصاویر سیال استفاده کنید:
  • تصاویر را در ابعاد اصلی خود استفاده کنید. اما اگر فضای کافی ندارید یا نا واضح می شوند، آنها را برش دهید تا وضوح تصاویر را به حداکثر برسانید.
    
    
• 3. فقط از گرافیک های برداری مقیاس پذیر (SVG) استفاده کنید. این فرمت فایل، مبتنی بر XML برای گرافیک های دو بعدی است که از تعامل و انیمیشن ها پشتیبانی می کند.
  
  
• 4. شامل سه یا چند نقطه شکست (یعنی طراحی برای بیش از 3 دستگاه).
  
  
• 5. محتوا را متناسب با درجه اهمیت برای کاربران، اولویت بندی و پنهان کنید. سلسله مراتب بصری خود را بررسی کنید و از کشوهای باز و بسته شو عمودی برای بهینه سازی فضا استفاده کنید تا ابتدا فقط موارد مورد نیاز کاربران را ارائه دهید. اقلام غیر ضروری را در درجه دوم قرار دهید.
  
  
• 6. مینیمالیسم را هدف قرار دهید
  
  
• 7. استفاده از الگوهای طراحی – برای به حداکثر رساندن سهولت استفاده کاربران از موضوعات مورد علایق شان و سرعت بخشیدن به آشنایی آن‌ها با سایت، برخی از ستون ها را بسته به عرض صفحه نمایش حذف کنید.
  
  
• 8. با اندازه‌ها و سبک‌های فونت، دسترسی را هدف قرار دهید.از کنتراست و پس‌زمینه به طور موثر استفاده کنید. تیترها را حداقل 1.6 برابر بزرگتر از متن اصلی قرار دهید. تمام متن را ریسپانسیو کنید تا در این نسبت ها ظاهر شود. از آنجایی که برخی از کاربران به صفحه‌خوان‌ها متکی هستند، از توصیفات برای تصاویر خود استفاده کنید.

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

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

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

به عنوان مثال، شما می توانید با دانستن این موضوع که عرض های کوچکتر از 600 پیکسل، به عنوان نسخه موبایل وب سایت در نظر گرفته می شود، برخی از CSS های خود را برای نسخه موبایل، طراحی نمایید و یا برای عرض های بین 1024 پیکسل و 720 پیکسل، که به عنوان نسخه تبلت در نظر گرفته می شود و همچنین برای عرض های بزرگتر از 1024 پیکسل، که به عنوان نسخه دسکتاپ در نظر گرفته خواهد شد.

آیا داشتن نسخه موبایل یا داشتن طراحی سایت ریسپانسیو، لازم است؟

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

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

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

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

انواع سایت های ریسپانسیو

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

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

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

اهمیت طراحی سایت واکنش گرا

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

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

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

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

- فونتی را انتخاب نمایید که به اندازه کافی بر روی گوشی های هوشمند و موبایل ها و یا تبلت ها خوانا و بزرگ باشد به طوری که چشم را اذیت نکند.

- فاصله مناسبی میان المان ها، دکمه های فشاری، و تکست باکس ها در نظر بگیرید به گونه ای که کاربران برای فشار دادن دکمه ها یا انتخاب تکست باکس ها مورد آزار قرار نگیرند.

• از پنجره های پاپ آپ با امکان غیر فعال کردن پس زمینه استفاده نمایید. این کار برای سایت ها و اپلیکیشن های تحت وب، روشی مرسوم می باشد و حس خوشآیندی را به کاربران خواهد داد.
  
  
• حتما در تمام صفحات سایت از تگ viewport استفاده نمایید. حتی اگر سایت شما بگونه ای طراحی شده است که نیاز به وجود این تگ ندارد ولی وجود این تگ، به موتورهای جستجوگر اعلام خواهد کرد که  صفحه طراحی شده شما، یک صفحه اینترنتی ریسپانسیو است.
  
  
• از منوهای آبشاری و یا تو در تو استفاده نکنید. استفاده از این منوها بر روی دستگاه های موبایل و تبلت ها به سختی قابل استفاده خواهد بود و در بعضی از موارد غیر قابل استفاده خواهد بود.
  
  
• از event های mouseenter, mousehover و mouseout استفاده نکنید و یا اگر استفاده می کنید حتما به خوبی کارآیی برنامه خود را بر روی دستگاه های هوشمند تست کنید. این موارد معمولا بر روی گوشی ها بلا استفاده خواهند بود و تنها بر روی نسخه دسکتاپ قابل استفاده هستند.
  
  
• پس از طراحی، حتما مراقب باشید تا صفحه طراحی شده شما، اسکرول افقی نداشته باشد. در برخی از موارد، وجود یک اسکرول افقی حتی کوچک، می تواند لرزشی آزار دهنده را در صفحه شما پس از هر بار اسکرول عمودی به وجود آورد که متعاقبا بر روی رضایت کاربران از سایت تاثیر مستقیم خواهد گذاشت.

و نکته آخر اینکه، حتما پس از طراحی نهایی یک سایت ریسپانسیو، آن را بر روی نسخه های مختلفی از اندروید با ورژن های مختلف، مرورگرهای مختلف، و نیز سیستم عامل های دیگر نظیر آی او اس تست نمایید. همچنین قدری زمان صرف کنید تا ایرادات فنی طرح خود را برای دستگاه های دیگر نظیر تبلت ها (چه اندرویدی چه IOS) بر طرف نمایید.