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

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

تاریخچه سایت‌های واکنش گرا - ریسپانسیو

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

همیشه طراحی وب یک اصول ثابتی داشته است و تکنولوژی های طراحی وب هم زیاد نبودند چون کاربر های وب اکثرا دکستاپ های رو میزی داشتند اما در سال های بین ۲۰۰۵ تا ۲۰۰۸ قضیه فرق کرد در این سالها موبایل ها تقریبا هوشمند که امکان مرورگری وب داشتند وارد دنیای ما شدند و کمک بزرگی رو به پیشرفت و اقتصاد جهان کردند موبایل ها قابلیت اتصال به اینترنت و مرور صفحات وب را داشتند اما مشکلی که وجود داشت این بود که صفحات وب در موبایل ها به درستی نمایش داده نمی شدند و گاهی اوقات بعضی از وب سایت ها صفحات انها در موبایل ها بهم ریخته بود چون طراحان وب همیشه برای طراحی وب اندازه خاصی را در نظر نمیگرفتند و از انجایی که تمام کاربران دکستاپ های رو میزی داشتند طراحان هم بیشتر برای مشاهده مانیتور های رو میزی طراحی وب میکردند .

تا اینکه در سال های بعد ویژگی به اسم Mobile Mod وارد وب شد و کاربرانی که از موبایل برای مرور صفحات وب استفاده میکردند میتوانستند با انتخاب گزینه حال موبایل نسخه موبایل استایل مخصوص موبایل را بارگذاری کنند اما باز هم این ترفند مشکلاتی همچون خوانا نبودن و بهم ریختگی شکل اصلی سایت را در بر داشت و صاحبان وب سایت ها میخواستند سایتشان به همان شکل و استایلی که هست برای موبایل ها به نمایش در بیاید.

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

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

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

  اندازه‌ مجازی :

به دلیل تراکم بیشتر پیکسلی در موبایل‌ و تبلت های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ‌ تاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل نمایش دهند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود ممکن است این مقدار مساوی ۴۰۰ پیکسل نمایش داده شود.

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

برای مثال اگر یک گوشی  دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی باشد، به این معنی است که اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد. بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point , cm , و … می باشد.

مزایای طراحی سایت ریسپانسیو (واکنش گرا)

• افزایش تجربه کاربری با طراحی سایت واکنش گرا
• نیاز نداشتن به اپ اندروید و یا IOS
• افزایش قدرت سئو سایت(به دلیل پوشش همه کاربران)
• افزایش بازدیدکنندگان سایت
• محبوبیت بیشتر در بین موتور های جستجو
• جلوگیری از ایجاد محتوای تکراری (Duplicate Content): تصور کنید که دو نسخه سایت، یکی برای کامپیوترهای معمولی و یکی هم برای موبایل، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایند نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان تکراری یا Duplicate شناخته و تاثیر بدی بر روی سئو سایت شما می گذارد.

برخی از قوانین طراحی واکنش گرا

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