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

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

طراحي سايت ريسپانسيو

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • از منوهای آبشاری و یا تو در تو استفاده نکنید. استفاده از این منوها بر روی دستگاه های موبایل و تبلت ها به سختی قابل استفاده خواهد بود و در بعضی از موارد غیر قابل استفاده خواهد بود.

  • از event های mouseenter, mousehover و mouseout استفاده نکنید و یا اگر استفاده می کنید حتما به خوبی کارآیی برنامه خود را بر روی دستگاه های هوشمند تست کنید. این موارد معمولا بر روی گوشی ها بلا استفاده خواهند بود و تنها بر روی نسخه دسکتاپ قابل استفاده هستند.

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

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

هنوز نظری ثبت نشده است.

یک نظر بگذارید

کد امنیتی: