آموزش سئو

ریسپانسیو (Responsive) یا طراحی واکنش گرا چیست؟

واکنش‌گرا بودن وب سایت (Responsive web design) برای انجام فرایند سئو دیگه اختیاری نیست یک الزام است اگر میخواهید در صفحات اول نتایج گوگل دیده شوید باید با فاکتور اصلی را حتما در سایت خود لحاظ کنید.

در ادامه با بلاگ مهدی عراقی همراه باشید تا بیشتر با طراحی ریسپانسیو آشنا شویم.

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

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

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

این روش شامل ترکیبی از شبکه ها و طرح های انعطاف‌پذیر ، تصاویر و استفاده هوشمندانه از پرس و جوهای رسانه به زبان CSS است.

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

علاوه بر آن شاید نیاز باشد تنظیمات دستگاه‌های آنها را در نظر بگیرید. به عنوان مثال اگر آنها از VPN برای iPad خود استفاده می‌کنند ، وب سایت نباید دسترسی کاربر به صفحه را مسدود کند.

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

چرا باید در طراحی پاسخگو سرمایه گذاری کنید؟

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

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

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

علاوه بر این، در اوایل سال 2015، گوگل اعلام کرد که Mobile friendly بودن تبدیل به یک عامل رتبه بندی در الگوریتم های موتور جستجو خود شده است.

این به این معنی بود که سایت هایی که Mobile friendly بودند، به طور بالقوه برخی از زمینه های برتری در نتایج موتور جستجو را نداشتند، زیرا آنها تجربه خوبی را برای جستجوی موبایل و بینندگان ارائه نمی دهند.

مزایای طراحی ریسپانسیو

  • اثربخشی هزینه
  • انعطاف پذیری
  • تجربه بهتری کاربر
  • دستاورد بهینه سازی موتور جستجو
  • سهولت مدیریت

بیایید نگاهی عمیق به هر یک از این 5 مزیت داشته باشیم تا بتوانید کمی بیشتر بدانید که چرا شما باید در یک وب سایت ریسپانسیو سرمایه گذاری کنید.

1. اثربخشی هزینه

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

شما برای این کار فقط نیاز به سرمایه گذاری در یک طرح سایت تنها برای تجدید نظر به تمام بازدید کنندگان و تمام دستگاه ها دارید.

2. انعطاف پذیری

هنگامی که شما یک وب سایت با طراحی ریسپانسیو دارید، می توانید به سرعت و به آسانی آن را تغییر دهید. شما نیازی به نگرانی در مورد تغییرات در وب سایت ندارید.

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

3. تجربه بهتر کاربر

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

هیچ کس نمی خواهد کسب و کار خود را با روش غیر حرفه ای انجام دهد. اما طراحی ریسپانسیو ، که ارائه دهنده تجربه کاربر بسیار بهتر است، می تواند کمک به متقاعد کردن مردم به امتحان کردن سایت خود باشد .

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

4. دستاوردهای بهینه سازی موتور جستجو

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

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

در ترکیب با سایر عوامل SEO، ریسپانسیو بودن می‌تواند به شما کمک کند تا در نتایج موتور جستجو افزایش رتبه کسب کنید.

5. سهولت مدیریت

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

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

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

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

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

1- طرح

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

سپس با کمی تحقیق و با در نظر داشتن هدف خود ، کم‌کم سایتتان ر ا ریسپانسیو کنید.

در ابتدایی‌ترین مراحل طراحی سایت خود باید برچسب های <head> و </ head> را بر روی صفحه HTML خود قرار دهید. این نمایش را در تمام صفحه نمایش ها در یک نسبت ابعاد 1 × 1 تنظیم می کند و قابلیت پیش فرض را از آیفون ها و سایر مرورگرهای گوشی های هوشمند حذف می کند.

با این کار  وبسایت ها را به صورت کامل ارائه می دهند و کاربران را قادر می سازد تا با کشیدن به قسمت بعد برسند.

2 – رسانه ها

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

این فوق‌العاده ساده است و برای اکثر وب سایت ها کار می کند. لطفا توجه داشته باشید که دستورالعمل Max-width توسط مرورگرهای قدیمی مانند IE6 شناخته نمی شود. به منظور کار، این قطعه کد باید به شیوه CSS شما وارد شود.

img {max-width: 100٪؛}

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

در اینجا یک تکنیک توسعه یافته توسط نیکولا گالاغور نوشته شده است. بیایید با HTML آن شروع کنیم:

1- ابتدا 

< img src = “image.jpg “

2- سپس

data-src-600px = “image-600px.jpg “

3- پس از آن

data-src-800px = “image-800px.jpg”

4- و اینوگونه تمام می‌شود

alt = “”>

همانطور که می بینید، ما از ویژگی داده ها استفاده کردیم تا URL های تصاویر جایگزین را ذخیره کنیم. اما اکنون بیایید از قدرت کامل CSS3 برای جایگزینی تصویر پیش فرض توسط یکی از تصاویر جایگزین مشخص شده استفاده کنیم. اگر شرایط Min-device-width مطابقت داشته باشد ، اینگونه پیش می‎رویم:

1- media (min-devic-width: 600px) {

2- img [data-src-600px] {

3- content: attr (data-src-600px، url)؛

4- }

5- }

6- miss

7- media (min-device-width: 800px) {

8- img [data-src-800px] {

9- content: attr (data-src-800px، url)؛

10- }

11- }

همانطور که اکثر وب سایت ها از فیلم های سایت هایی  مانند YouTube یا Vimeo استفاده می کنند، تصمیم بر این شد که روی تکنیک ویدیویی الاستیک با نیک‌لا تمرکز شود. این تکنیک به شما اجازه می دهد تا ویدیوهای جاسازی شده را پاسخ دهید.

 

HTML:

1 – <div class = “container video”>

2- <iframe src = “http://player.vimeo.com/video/6284199؟title=0&byline=0&portrait=0” width = “800” ارتفاع = “450” ​​frameborder = “0”> </ iframe>

3- </ div>

و در حال حاضر تکنیک CSS:

 

1- .Video-container {

2- Position: relative;

3- Padding-bottom: 56.25٪؛

4- Padding-top: 30px؛

5- Height 0;

6- Overflow: hidden;

7- }

8- Miss

9- .Video-container iframe،

10- .Video Container Object،

11- .Video Container Embed {

12- Position: Absolute;

13-top: 0;

14- left : 0;

15- Width: 100 ٪;

16- Height: 100%;

17- }

18- Miss

هنگامی که این کد را در وب سایت خود اعمال کردید، ویدیوهای جایگزین را نیز می‌توانید به اشتراک بگذارید.

3 – تایپوگرافی

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

تا کنون، اکثر توسعه دهندگان  از پیکسل ها برای تعریف اندازه فونت استفاده می کنند. یک وب سایت ریسپانسیو باید یک فونت ریسپانسیو هم داشته باشد.

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

مشخصات CSS3 شامل یک واحد جدید به نام REMS بود. آنها تقریبا یکسان مانند واحد EM کار می کنند، اما نسبت به عنصر HTML، که آنها را بسیار آسان تر از EMS استفاده می کنند بهتر هستند. بهبود اندازه و ریسپانسیو کردن فونت HTML .

 

1 – HTML {فونت اندازه: 100٪؛ }

پس از انجام این مرحله ، شما می توانید اندازه فونت ریسپانسیو را تعریف کنید، همانطور که در زیر نشان داده شده است:

 

1 – media (min-width: 640px) {body {font-size: 1rem؛}}

2 -media (min-width: 960px) {body {font-size: 1.2rem؛}}

3 -media (min-width: 1100px) {body {font-size: 1.5rem؛}}

چگونه تصاویر ریسپانسیو ایجاد  کنیم؟

تصاویر ریسپانسیو

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

شما باید توجه داشته باشید که ما بر روی HTML <IMG> S تمرکز خواهیم کرد . CSS مسلما دارای ابزار بهتری برای طراحی ریسپانسیو از HTML است و ما در مورد  ماژول CSS صحبت می‌کنیم.

 

تغییر اندازه های مختلف

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

فضا

عرض ذاتی تصویر در پیکسل ها (480 W) است. توجه داشته باشید که برای این تصاویر از  واحد W استفاده می کند، نه PX . اندازه ها مجموعه ای از شرایط رسانه ای را تعریف می کنند و نشان می دهند که چه اندازه تصویر و برای چه زمانی بهتر است.

شرایط رسانه ای باید حداکثر عرض: 600 پیکسل را داشته باشد. با مطالعه حول محور CSS مطالب بیشتری را خواهید آموخت. عرض اسلات تصویر هنگامی که شرایط رسانه درست باشد ، 480 پیکسل است.

نکته: برای عرض اسلات، شما ممکن است طول مطلق (PX، EM) یا طول را نسبت به Viewport (VW) ارائه دهید. پس در اینجا درصد ملاک نیست.

ممکن است متوجه شوید که آخرین عرض اسلات هیچ شرایط رسانه ای ندارد (این پیش فرض آن است که هیچ یک شرایط رسانه ای ندارند). مرورگر همه چیز را پس از اولین شرط تطبیق نادیده می گیرد، بنابراین مراقب باشید که شرایط رسانه‌ای بودن را داشته باشید .

 

Flexbox چیست؟

شاید برایتان جالب باشد که flexbox چه کاری انجام می دهد؟ سوال بهتر این است که ” Flexbox چه کاری نمی تواند انجام دهد؟ ماژول Flexbox (جعبه انعطاف پذیر) یک راه کارآمد تر برای ارائه، هماهنگ کردن و توزیع فضای بین اقلام در یک قسمت را فراهم می کند .در مثال زیر ما پرس و جوهای رسانه ای را برای ایجاد یک شبکه پاسخگو ترکیب می کنیم.

 

مثال CSS Flexbox

<style>
main {<br /> background: #d9d7d5;<br /> display: flex;<br /> flex-wrap: wrap;<br /> justify-content: space-between;<br /> }</p>
<p> div {<br /> background: #767775;<br /> flex-basis: 100%;<br /> height: 100px;<br /> margin-bottom: 0.5rem;<br /> }</p>
<p> @media (min-width: 600px) {<br /> main {<br /> flex-wrap: nowrap;<br /> }</p>
<p> div {<br /> flex-basis: 33%;<br /> }<br /> }<br /></style>

 

ما با این موارد کدهای زیر را بررسی می‌کنیم:

طرح بندی Flexbox را با صفحه نمایش ایجاد کنید: Flex در عنصر اصلی کانتینر ما.
سبک برای تلفن همراه است. ما عنصر اصلی را به Flex-Wrap تنظیم می کنیم: بسته بندی که اجازه می دهد عناصر در طرح FlexBox به صورت زیر نشان داده شوند.

سبک برای دستگاه های بزرگتر مانند تبلت‌هاو Pc است. ما از پرس و جو رسانه ای شبیه به مثال در بخش قبلی استفاده می کنیم تا عنصر اصلی کانتینر را به Flex-Wrap: NowRap تنظیم کنیم.

این باعث می شود اطمینان حاصل شود که عناصر کودک بسته بندی نمی کنند و ستون را در یک نوع ردیف قرار می دهند. با تنظیم div به flex-base: 33٪ در پرس و جو رسانه ها – ما ستون هایی را ایجاد می کنیم که 33٪ عرض دارند.

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

پرس و جو رسانه ها به صورت Flex basis: 33٪ است و نمایش ارثی: قوانین فلکس به ما یک طرح انعطاف‌پذیر قابل تشخیص را نشان می دهد.

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

پیمایش افقی با پیمایش سرریز

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

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

مثال منوی اسکرول افقی

<style>
menu {<br />
background: #d9d7d5;<br />
padding: 0.25rem;<br />
overflow-y: scroll;<br />
white-space: nowrap;<br />
}</p>
<p> span {<br />
background: #767775;<br />
color: #ffffff;<br />
display: inline-block;<br />
margin: 0.25rem;<br />
padding: 0.5rem;<br />
}<br />
</style>

Responsive Web Design
RWD
Responsive menu
Overflow scroll example
This is a lot of content!
Yes
we
have
another
item

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

Overflow-Y: اسکرول عنصر اصلی این دستور و کد است. با مشخص کردن عناصر کودک، محور افقی را با رفتار پیمایش سرریز می کند.
شما فکر کنید که Overflow-Y اندازه کافی است.

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

ابزار برای شبیه سازی و نظارت بر وب سایت های ریسپانسیو

ابزار برسی ریسپانسیو سایت

انواع ابزارهای مفید برای کمک به ایجاد وب سایت ها با طراحی وب ریسپانسیو وجود دارد. در زیر این ابزار‌ها را بررسی خواهیم کرد .

شبیه‌ساز موبایل کروم DeVTools

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

چطور ریسپانسیو بودن سایت را تشخیص دهیم ؟

برای آزمایش ریسپانسیو بودن سایت اول باید سایت را در حالت کوچک قرار دهید یعنی minimize. اگر همچنان خوانا بود و مشکلی نداشت، سپس اسکرول کنید و مجددا سایت را بزرگنمایی کنید . منظور حالت Maximize است . با انجام این کار می‌توان به ریسپانسیو بودن سایت پی برد.

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

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

گوگل با این کار امتیاز و اعتبار بسیار بالایی را به سایت‌های ریسپانسیو می‌دهد و این دسته سایت‌ها در رنکینگ‌های به مراتب بهتری قرار می‌گیرند.

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

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

نظارت بر عملکرد وب سایت تلفن همراه با Foo

Lighthouse یک ابزار منبع باز است که راهی برای تجزیه و تحلیل عملکرد وب سایت خاص به دستگاه را فراهم می کند. Foo با استفاده از Lighthouse در پشت صحنه برای نظارت بر عملکرد وب سایت و ارائه بازخورد برای تجزیه و تحلیل است.

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

 

جمع‌بندی و نتیجه گیری

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

این روش شامل ترکیبی از شبکه ها و طرح های انعطاف‌پذیر همانند تصاویر ، ویدیو‌ها و استفاده هوشمندانه از پرس و جوهای رسانه‌ای به زبان CSS است.

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

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

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

نوشته های مشابه

‫2 دیدگاه ها

  1. الان برای سئو و پیاده سازی فرایند بهینه سازی سایت آیا ریسپانسیو بودن سایت واجب است؟ و چطوری از ریسپانسیو بودن سایت مطمئن بشیم البته سایت ما با بوت استرپ کد نویسی شده؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا