طراحی قالب وردپرس

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

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

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

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

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

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

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

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

دو روش استفاده شده در طراحی سایت ریسپانسیو

استفاده از ترکیبی از کوئری های CSS  و افکت های حرکتی

یک نظریه در مورد استفاده از ترکیبی از کوئری های CSS  و افکت های حرکتی CSS  ارائه داده اند که مضمون آن به این شرح است: شما برای طراحی یک سایت ریسپانسیو از کوئری های مدیا برای انطباق با عرض مروگر استفاده می کنید، و شما به صورت مداوم سایز مرورگر را تغییر می دهید تا واکنش سایت را مشاهده کنید، اما هر گاه یک کوئری وارد عمل می شود، استایل اول و دوم یک پرش فاحش است. پس چرا از افکت های حرکتی CSS برای جلوگیری از چنین  پرش هایی بهره نبریم؟ با استفاده از چنین افکت هایی تغییرات به صورت انیمیشنی انجام می گیرند.

 دراپ داون شدن منو

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

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

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

اگر زمانی که ۱۰ عکس کوچک بصورت عرضی به خوبی در کنار یکدیگر در صفحه نمایش یک مانیتور نمایش داده می شوند، این عکس ها زمانی که در یک دستگاه iPad یا iPhone نمایش دهده شوند شکل بدی به خود می گیرند.با استفاده از طراحی سایت ریسپانسیو می توانید این موضوع را حل کنید بدین صورت که اگر عرض صفحه نمایش دستگاه به کوچکی iPad باشد فقط ۷ عکس را در کنار هم نمایش دهد و به همین شکل برای iPhone که ۴ عکس در کنار هم نمایش دهده می شوند.

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

 

از سایت های بسیار حرفه ای در این زمینه Smashing Magazine  و john polacek  می باشد.

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

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

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

پرسش و پاسخ، نظر

سوال یا نظری دارید؟ بنویسید و ارسال کنید.

طراحی شده توسط تیم توسعه و طراحی آرنیکاوب - بروزرسانی در فروردین 1398