سایت واکنش گرا

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

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


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

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

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

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

√ استفاده از محتوای مفید و غیر تکراری:همانطور که قبلا گفته شد استفاده از متون مفید و غیرتکراری می تواند روی رنکینگ سایت موثر باشد.در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد.

با توجه به مواردی که ذکر شد می بینیم که داشتن سایت واکنش گرا می تواند در بهبود سئو سایت موثر باشد.بنابراین قبل از هرگونه اقدام جهت طراحی سایت به این نوع طراحی سایت توجه کنید.

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

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

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

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

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

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

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

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

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

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

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