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

shape
shape
shape
shape
shape
shape
shape
shape
طراحی سایت واکنش گرا
  • طراحی سایت واکنش گرا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    نکته:

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

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

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

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

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

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

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

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

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

    گردآوری: نایس کدرز

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای

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

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

    در حال بارگیری کپچا ...

    دانلود

    لطفا برای دریافت لینک دانلود اطلاعات خواسته شده را وارد نمایید