[vc_row][vc_column][vc_column_text][vc_row][vc_column][vc_column_text]

طراحی یک سایت واکنشگرا ، مهم تر از آنچه تصور می کنید

 

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

اهمیت آن چقدر است ؟

چگونه سایت ریسپانسیو داشته باشیم ؟

پاسخ تمامی سوالات بالا را به خوبی پاسخگو خواهیم بود . با سایتخور همراه باشید .

 

 

تعریف سایت واکنشگرا ( ریسپانسیو ) :

 

به سایتی واکنشگرا یا ریسپانسیو گفته میشود که آن سایت بتواند در رزولوشن های مختلف با آرایش مربوط به آن به نمایش گذاشته شود . به نوعی بتواند در رزولوشن های بزرگ مانند 900×1290 پیکسل که مخصوص دسکتاپ است ، تا رزولوشن های کوچک مانند 320×480 پیکسل که مخصوص گوشی های موبایل است ، به خوبی نشان داده شود .

 

 

 

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

• خالی بودن قسمتی از سایت و لزوم به اسکرول کردن

• بیش از اندازه کوچک بودن مطالب و ناتوانی در دیدن و خواندن آنها و لزوم به بزرگنمایی تصویر

• بهم ریختگی سایز فونت ها و جابجایی متون و تصاویر به نوعی که قسمتی از آن قابل مشاهده نباشد

 

 

اهمیت ریسپانسیو بودن سایت :

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

 

 

مزایای ریسپانسیو بودن سایت :

• گرفتن امتیاز خوب از گوگل

• پیشروری از رقیبان

• طراحی زیبا در انواع دستگاه ها

• بهینه سازی موتور های جستجو ( SEO )

[/vc_column_text][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_message message_box_style=”solid-icon” style=”round” message_box_color=”peacoc” icon_fontawesome=”fas fa-laptop” css_animation=”bounce”]

برای مشاهده ی مقاله کاربردی SEO به اینجا بروید

[/vc_message][vc_empty_space height=”50px”][vc_column_text]

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

روش اول :

روش اول نوشتن تگ های متخلف است .در این روش نیازمند این هستیم که راجب قسمت توسعه رابط کاربری فرانت اند دانشی کسب کنیم تا توانایی ساختن یک سایت واکنشگرا را به خوبی داشته باشیم . قسمت توسعه رابط کاربری فرانت اند شامل HTML , CSS و JavaScript میشود .

 

[/vc_column_text][vc_message message_box_style=”solid-icon” style=”round” message_box_color=”peacoc” icon_fontawesome=”fas fa-file-code” css_animation=”bounce”]

برای مشاهده ی مقاله کاربردی فرانت اند به اینجا بروید

[/vc_message][vc_empty_space][vc_column_text]

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

تگ media@ :

h3 { font–size: 32px; } @media (max–width: 480px) { h3 { font–size: 20px; } }

 

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

 

تگ viewport :

< meta name = ” viewport ” content = ” width = device-width ” >

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

 

روش دوم :

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

• Wptouch

• Jetpack

• WordPress Mobile Pack

 

پیشنهاد ما افزونه “Wptouch” است که شما میتوانید آخرین نسخه منتشر شده آن را از اینجا دانلود کنید .

[/vc_column_text][vc_empty_space height=”20px”][vc_column_text]

سایز های استاندارد برای طراحی سایت واکنشگرا در دستگاه های مختلف :

[/vc_column_text][/vc_column][/vc_row][vc_column][vc_empty_space][/vc_column][vc_row][vc_column width=”1/3″][ultimate_info_table design_style=”design02″ color_scheme=”red” package_heading=”دسکتاپ” heading_tag=”h2″]800×1280  پیکسل
980×1280  پیکسل
600×1280  پیکسل
900×1290  پیکسل[/ultimate_info_table][/vc_column][vc_column width=”1/3″][ultimate_info_table design_style=”design02″ color_scheme=”red” package_heading=”موبایل”]320×480  پیکسل
360×640  پیکسل[/ultimate_info_table][/vc_column][vc_column width=”1/3″][ultimate_info_table design_style=”design02″ color_scheme=”red” package_heading=”تبلت”]768×1024  پیکسل[/ultimate_info_table][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

اکنون میخواهیم به شما سایت هایی معرفی کنیم که به خوبی می توانید با وارد کردن URL سایت خود ، آن را از نظر ریسپانسیو بودن یا نبودن بسنجید .

 

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][ult_buttons btn_title=”سایت سوم” btn_link=”url:http%3A%2F%2Fami.responsivedesign.is%2F|title:responsivetesttool|target:_blank|rel:nofollow” btn_align=”ubtn-center” btn_title_color=”#0a0000″ btn_bg_color=”#f9cf27″ btn_anim_effect=”ulta-push” btn_bg_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#0e267f” btn_border_size=”3″ btn_radius=”4″][/vc_column][vc_column width=”1/3″][ult_buttons btn_title=”سایت دوم” btn_link=”url:https%3A%2F%2Fresponsivedesignchecker.com%2F|title:responsivetesttool|target:_blank|rel:nofollow” btn_align=”ubtn-center” btn_title_color=”#0a0a0a” btn_bg_color=”#f9cf27″ btn_anim_effect=”ulta-push” btn_bg_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#0e267f” btn_border_size=”3″ btn_radius=”4″][/vc_column][vc_column width=”1/3″][ult_buttons btn_title=”سایت اول” btn_link=”url:http%3A%2F%2Fresponsivetesttool.com%2F|title:responsivetesttool|target:_blank|rel:nofollow” btn_align=”ubtn-center” btn_title_color=”#0c0000″ btn_bg_color=”#f9cf27″ btn_anim_effect=”ulta-push” btn_bg_color_hover=”#ffffff” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#0e267f” btn_border_size=”3″ btn_radius=”4″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

ممنون از شما همراهان گرامی سایتخور

امیدواریم توانسته باشیم به خوبی محتوای این مقاله را به سمع و نظر شما  رسانده باشید

 

برای شفارش سایت مورد نظر خود به قسمت فروشگاه ما بروید

 

[/vc_column_text][ult_buttons btn_title=”سفارش سایت” btn_link=”url:https%3A%2F%2Fsitekhor.ir%2Fshop%2F|title:%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87%20%D9%85%D8%A7|target:_blank” btn_align=”ubtn-center” btn_title_color=”#0c0000″ btn_bg_color=”#7cfff1″ btn_anim_effect=”ulta-push” btn_bg_color_hover=”#ffffff” icon=”fas fa-shopping-cart” icon_size=”0″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#0e267f” btn_border_size=”3″ btn_radius=”4″ btn_font_style=”text-decoration:underline;” btn_font_size=”desktop:18px;”][/vc_column][/vc_row][vc_column][/vc_column]