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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

کد امنیتی: