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

به خصوص اینکه طبق آخرین آمار در حال حاضر 58.26 درصد کاربران اینترنت از موبایل برای سرچ و سایر کارهای روزانه اینترنتی استفاده می کنند.

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

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

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

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

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

اولین اقدام این است که تگ viewport را به ساییتان اضافه کنید منظور از ویو پورت فضای قابل مشاهده برای کاربران است

این فضا برای صفحه نمایش دسکتاپ بیشتر از نمایش موبایل است.

برای استفاده از تگ viewport کافیست در head سایت این کد را وارد کنید.

<"meta name="viewport" content="width=device-width,initial-scale="1.0>

قسمت width=device-width: برای تعیین عرض صفحه است و با این ویژگی عرض صفحات سایت با توجه به عرض صفحه نمایش یکی می شود.

قسمت initial-scale: میزان زوم اولیه را هنگام بارگذاری صفحه را مشخص می کند. این مقدار را برابر یک قرار دهید.

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

کوئری های media کاملاً به نوع چیدمان سایت بستگی دارد، بنابراین مشخص کردن یک مقدار ثابت برای آن کاری غیر ممکن است .

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

مرحله سوم طراحی سایت واکنشگرا: تصاویر

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

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

برای ریسپانسیو کردن عکس ها از کد زیر استفاده کنید با پروپرتی max-width عرض عکس بیشتر از کلاس والد نمی شود

و با قرار دادن بر روی 100 درصد در تمامی سایزهای صفحه نمایش ریسپانسیو نمایش داده می شود.

مرحله چهارم طراحی سایت واکنشگرا: تایپوگرافی

قبلا فونت ها بر اساس پیکسل بود اما در حال حاضر که دستگاه های مختلفی وجود دارد فونت ها بر اساس سایز دستگاه باید تغییر کنند؛

برای ریسپانسیو شدن فونت ها از font-sizeکه همان مخفف viewport width است استفاده می شود.

برای واکنشگرا شدن فونت ها font-size را بر اساس vw قرار دهید.

vw برابر با 1 درصد ویو پورت است به عنوان مقال اگر ویو پورت 1000 پیکسل باشد سایز فونت برابر با 10 پیکسل می شود

و اگر ویوپورت 400 پیکسل باشد سایز فونت 4 پیکسل می شود.

اهمیت داشتن سایت واکنشگرا

در سال 2012 بیشترین سرچ برای کاربران دسکتاپ بوده و فقط 10 درصد مربوط به موبایل بود بنابراین سایت ها برای کاربران دسکتاپ طراحی می شوند

و یا برای کاربران موبایل طراحان مجبور بودند دو نسخه برای سایت طراحی کنند

و علاوه بر نسخه دسکتاپ یک نسخه موبایل طراحی کنند.

در حال حاضر که درصد استفاده کنندگان موبایل از دسکتاپ پیشی گرفته لزوم نمایش موبایلی سایت بیشتر حس می شود

و با توجه به امکانات HTML5 و CSS3 نیاز به طراحی دو نسخه نیست به راجتی می توانید سایت را ریسپانسیو کنید.

اگر سایتی که دارید به همان صورت که برای کاربران دسکتاپ نمایش داده شود برای کاربران موبایل نمایش داده می شود،

امکان انتخاب منوها و یا دکمه ها برای کاربران سخت می شود

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

و از نظر تجربه کاربری تاثیر منفی دارد.

اگر سایتتان در حالت موبایلی نمایش درستی داشته باشد کاربران دوباره به سایت شما برگردند.

ریسپانسیو بودن سایت علاوه بر تجربه کاربران یکی از فاکتورهای مهم گوگل در سایت است و برای سئو بسیار اهمیت دارد

و اگر سایتتان ریسپانسیو نباشد تاثیر منفی بر روی سئو سایت دارد.

نکته:

با توجه به این که دستگاه ها با سایزهای مختلف وجود دارد

نیازی نیست که برای تک تک دستگاه ها بهینه سازی انجام دهید به عنوان مثال سهم استفاده کنندگاه تبلت 3.5 درصد است

و کاربران موبایل و دسکتاپ بیشترین تقاضا را دارند.

نحوه بررسی ریسپانسیو بودن سایت

برای بررسی ریسپانسیو بودن سایت کافیست سایزهای مختلف نمایش سایتتان را در با تغییر اندازه صفحه مرورگر یا با زدن دکمه F12 ویا راست کلیک کردن بر روی صفحه و inspect گرفتن درحالت های مختلف مشاهده کنید

که این کار دقت کافی را ندارد چون ممکن است همه سایزها تست نشود.

یک روش دیگر برای بررسی ریسپانسیو بودن سایت دیگر هم استفاده از از سایت هایی است

که به صورت رایگان این کار را برای شما انجام می دهند

مثل سایت ami.responsivedesign.is که حالت های مختلف نمایش سایتتان را در دستگاه های مختلف نمایش می دهد.