دراین آموزش از مقالات آموزشی وردپرس سئو کنسول قصد داریم طراحی به صورت ریسپانسیو یا واکنش گرا را به شما آموزش دهیم.
Responsive
Responsive در لغت به معنای پاسخگو یا واکنشی می باشد. به معنای چیزی که به محرک و یا عامل پاسخ می دهد.
منظور از طراحی ریسپانسیو یا واکنشگرا چیست؟
منظور از طراحی ریسپانسیو یک سایت، ایجاد یک سایت به صورتی است که با توجه به نوع صفحه نمایش شما واکنش نشان داده و با آن تطبیق یابد.
طراحی سایت به گونه ای که در هر طول و عرض صفحه قابل استفاده باشد، اصطلاحا طراحی واکنش گرا یا Responsive web design نامیده می شود.
امروزه بیش از ۸۰ درصد از کاربران از موبایل و تبلت برای مشاهده سایت ها و وب گردی استفاده می کنند. به همین دلیل داشتن قالبی که نمایش درستی در موبایل و تبلت داشته باشد بسیار با اهمیت است.
در صورتی که قالب سایت شما نمایش درستی در موبایل و تبلت نداشته باشد،کاربران سایت شما را ترک می کنند و مخاطبان بسیاری را از دست خواهید داد.
بنابراین ریسپانسیو بودن سایت ها بسیار مهم است، چون گوگل هم برای سایت هایی که طراحی ریسپانسیو نداشته باشند یک امتیاز منفی برای سئو سایت در نظر می گیرد.
مزایای سایت های ریسپانسیو
سازگار بودن با همه ی سایزهای نمایشگر های مختلف مانند موبایل، تبلت و لپ تاپ و …
رتبه بالاتر در گوگل
بهینه سازی سئو سایت
افزایش بازدید کنندگان سایت
انعطاف پذیری بالا
و مزایایی دیگر…
پس با ما همراه باشید تا ریسپانسیو کردن یا همان واکنش گرایی صفحات سایت را یادبگیریم.
در مقاله طراحی سایت ریسپانسیو به چه معناست؟ از مجموعه مقالات سئو سایت سئو کنسول، راه هایی برای ریسپانسیو بودن یک سایت گفته شده است. در این مقاله راه های باقی مانده و جزییات بیشتری را توضیح می دهیم.
پیش نیاز های ساخت صفحات ریسپانسیو
برای ساخت صفحات ریسپانسیو باید پیش زمینه هایی در مورد Java Script، html5 و CSS 3 و استفاده از مدیا کوئری ها، کامپوننت ها و فریم ورک های خاصی داشته باشید.
مانند فریم ورک bootstrap، Foundation، Skeleton YAML.
بنابراین برای طراحی سایت ریسپانسیو احتیاج به استفاده از کتابخانه و کامپوننت های خاصی دارید.
آموزش طراحی سایت ریسپانسیو با فریم ورک بوت استرپ
برای یادگیری طراحی سایت ریسپانسیو با بوت استرپ نیاز به آشنایی با زبان های CSS و HTML دارید.
یک سایت ریسپانسیو شده باید به گونه ای باشد که در مانیتورها،تبلت ها و موبایل ها برای مشاهده محتوای آن ها نیازی به اسکرول افقی آن نباشد.
به کمک فریم ورک و کتابخانه بوت استرپ می توان عناصر مهم سایت مثل دکمه ها، تب ها، اسلایدرها، منوها و بخش های مهم دیگر سایت مانند هدر یا فوتر و … را به شکل ریسپانسیو برای نمایش در سایزهای مختلف طراحی کرد.
برای این کار باید سایز هر کدام از دستگاه ها را بدانید. فریم ورک محبوب بوت استرپ با بررسی این دستگاه ها ابعادشان را به صورت زیر دسته بندی کرده اند.
Phones: <768px
Tablets: ≥ ۷۶۸ px
Medium Desktops: ≥۹۹۲px
Large Desktops : ≥۱۲۰۰px
قالب ها و تم های زیادی با استفاده از بوت استرپ طراحی شده است. می توانید آن ها به صورت رایگان دانلود کنید و تغییرات دلخواه خود را در آن اعمال کنید.
مدیا کوئری (media query)
با استفاده از مدیا کوئری می توان تعیین کرد که صفحه سایت در هر دستگاهی با رزولوشن های مختلف چگونه نمایش داده شود.
با استفاده از تگ مدیا (media@) رزولوشن دستگاه را چک می کنیم و بر اساس آن از کدهای اختصاصی مربوط به آن شرایط استفاده می شود.
سایزهای استاندارد طراحی سایت ریسپانسیو
موبایل:
۳۶۰*۶۴۰پیکسل
۳۲۰*۴۸۰ پیکسل
تبلت:
۱۰۲۴*۷۶۸ پیکسل
دسکتاپ:
۱۲۹۰*۹۰۰ پیکسل
۱۲۸۰*۶۰۰ پیکسل
۹۸۰*۱۲۸۰ پیکسل
۸۰۰*۱۲۸۰ پیکسل
رندر شدن سایت
یکی از نیازمندی های صفحه واکنش گرا قابلیت رندر شدن در دستگاه های دیگر با رزلوشن های مختلف است.
تگ viewport سایت را قابل رندر شدن در سایزهای مختلف می کند.
تگ viewport چیست؟
این یک تگ مفید چه برای سایت های ریسپانسیوی و چه غیر ریسپانسیوی است.
اگر سایت های شما برای اندازه های بالاتر از ۹۰۰ پیکسل نوشته شده باشد، در هنگام نمایش در سایزهای کوچکتر دچار مشکل می شود.
کاربرد این متا تگ در رندر شدن سایت در سایز ۹۰۰ موبایل است و از به هم ریختگی سایت در موبایل جلوگیری می کند.
نحوه استفاده از تگ viewport
در بخش head سایت می توانید شرایط مختلفی را برای نمایش سایت تعیین کنید.
<head>
<"meta name= "view port" content="width=480>
<head/>در کد بالا عرض viewport برابر با ۴۸۰ پیکسل است.
۴۸۰ پیکسل کمترین مقداری است که می توان تعیین کرد. اگر عرض نمایشگر موبایل از ۴۸۰ پیکسل بیشتر شود،
عرض viewport هم افزایش خواهد یافت.
درصد بزرگنمایی پیکسل در مروگرها، دستگاه ها و سیستم عامل های مختلف متغیر و قابل تغییر است.
در سایت Screen Sizes اندازه واقعی و مجازی پیکسل را در ابزارهای مختلف می توانید مشاهده کنید.
Width=device-width چیست؟
این قسمت از کد به مرورگر دستور می دهد عرض صفحه سایت را با عرض گوشی یکسان کند.
یعنی هر سایزی که در گوشی موبایل داریم سایت هم به این اندازه واکنش نشان داده و عرض آن به همان مقدار تغییر کند.
()=intial-scale چیست؟
میزان زوم پیش فرض مرورگر را تعیین می کند.
اگر طراح سایت بخواهد با توجه به نوع سایت مقدارzoom آن را برای مثال دو برابر قرار دهد از این روش استفاده می کند.
در حالت پیش فرض زوم ۱ است.
user-scale=yes/no
حداکثر میزان زوم کاربر روی یک سایت
عرض حداقل و حداکثر در طراحی Responsive
برای آن که یک صفحه وب در همه جا به بهترین شکل ممکن نمایش داده شود، باید عرض حداقل و حداکثر برای عنصر body تعیین کنیم.
با توجه به جدول سایت Screen Sizes حداقل عرض می تواند ۳۲۰ و حداکثر ۱۰۰۰ پیکسل باشد.
نکات انتخاب یک تصویر مناسب
انتخاب اندازه مناسب تصویرها
تصویرها را طوری انتخاب کنید که کیفیت آن ها در هنگام نمایش کم نشود.
تغییر عرض خودکار تصویر
نکته بعدی تغییر عرض خودکار تصویر بر اساس عرض صفحه است. بهتر است اندازه تصویر مطابق با بزرگترین اندازه پیکسل های واقعی صفحه نمایشگر کامپیوتر در نظر گرفته شود.
برای مثل در نمایشگر های کوچکتر با اندازه درصدی عرض و تعیین نکردن ارتفاع و یا حتی قرار دادن مقدار auto برای آن می توانید یک تصویر با قابلیت واکنشگرا در اختیار داشت.
}img#header
Width:100%
Heigh: auto;
}اندازه فونت وب
برای مشخص کردن اندازه فونت وب، بهتر است از واحد های فیزیکی استفاده کنید.
استفاده از اندازه فونت پیش فرض صفحه با مقدار pt14 و تعیین اندازه عنصرهای داخلی بر اسای درصد بهترین راه حل مطمئن برای داشتن نوشته های واکنشگرا است.
جمع بندی
مواردی که در مقاله آموزش طراحی به صورت ریسپانسیو بیان شد تعدادی از اصول پایه درآموزش طراحی به صورت ریسپانسیو یک سایت هستند.
قطعا یک طراح سایت حرفه ای باید به مسائل و زبان های برنامه نویسی طراحی سایت تسلط لازم را داشته باشد تا بتواند یک سایت کاملا ریسپانسیو را طراحی کند.
امبدوارم با رعایت این اصول بهترین نتیجه برای شما حاصل شود.
