آموزش طراحی سایت و کسب و کار اینترنتی
این وبلاگ با هدف ارائه مقالات کسب و کار اینترنتی راه اندازی شده استآموزش طراحی سایت و کسب و کار اینترنتی
این وبلاگ با هدف ارائه مقالات کسب و کار اینترنتی راه اندازی شده استچرا باید یک وب سایت ریسپانسیو داشته باشیم؟
در این مقاله، ما در مورد اینکه چه طراحی پاسخگو است، چرا شما به آن نیاز دارید و چگونه کار می کند، صحبت کنید.
آیا تا به حال یک وب سایت را در دستگاه تلفن همراه خود مشاهده کرده اید و صفحه درست نیست یا متن خیلی کم است؟ این به این دلیل است که وب سایت پاسخگو نبود طراحی وب پاسخگو می تواند کسب و کار شما را به خطر بیندازد. این اعتماد، قدرت و آگاهی از برند را فراهم می کند.
در این مقاله، ما در مورد اینکه چه طراحی پاسخگو است، چرا شما به آن نیاز دارید و چگونه کار می کند، صحبت کنید.
طراحی پاسخگو چیست؟
طراحی وب پاسخگو یک رویکرد برای ایجاد وب سایت است که اجازه می دهد تا آن را در هر دستگاه کار می کنند؛ آیا این یک تلفن همراه، رایانه لوحی، تلویزیون یا لپ تاپ است.
از آنجایی که مردم از طریق تلفن همراه خود قادر به دسترسی به اینترنت هستند، صاحبان وب سایت ها راه هایی برای کمک به کاربران برای حرکت بهتر وب سایت خود در هر دستگاه ایجاد کرده اند.
آیا می دانید که 62 درصد از شرکت هایی که یک وب سایت را به طور خاص برای تلفن همراه طراحی کرده اند، فروش را افزایش داده اند؟ (منبع: Econsultancy)
وب سایت پاسخگو نه تنها به کاربران تلفن همراه کمک می کند تا به وب سایت شما هدایت شوند؛ همچنین باعث افزایش تعامل و تبدیل می شود.
طراحی وب پاسخگو از HTML، CSS و گاهی جاوا اسکریپت برای حرکت، کوچک کردن، رشد، مخفی کردن و نمایش عناصر بر اساس دستگاه کاربر استفاده می کند.
3 قسمت اصلی برای پاسخ دادن به وب سایت شما وجود دارد:
چیدمان سیالات
تصاویر پاسخگو
داستان های رسانه
آیا من به طراحی وب پاسخگو نیاز دارم؟
کوتاه، پاسخ بله است. در روز و زمان امروز، بسیاری از مردم هنگام جستجوی یک کسب و کار یا خدمات به تلفن های همراه خود می آیند.
براساس یک مطالعه اخیر Tyton Media، 94 درصد از مردم به طراحی وب به عنوان دلیل بی اعتمادی یا رد وب سایت اشاره کردند. داشتن یک وبسایت که در هر دستگاه کار میکند، شانس بازدیدکنندگان را بیشتر و بیشتر جذب میکند. این نتیجه در رتبه بندی بهتر در گوگل و فروش بیشتر برای کسب و کار شما!
طراحی وب پاسخگو چگونه کار می کند؟
ساختن پاسخگوی وب سایت شما یک فرآیند ساده نیست. این به مهارت های پیشرفته HTML و CSS نیاز دارد، بنابراین اگر شما با این زبان آشنا هستید، پیشنهاد می کنم یک طراح وب حرفه ای را استخدام کنید.
برای ایجاد پاسخگوئی به وب سایت باید از تکنیک های زیر استفاده کند.
چیدمان سیالات
اولین گام برای ایجاد یک وب سایت پاسخگو است که از عرض ثابت به عرض مایع تغییر یابد. این اجازه می دهد تا صفحه وب گسترش و قرارداد با مرورگر از درصد مبتنی بر آن.
به عنوان مثال، اگر عرض وبسایت قدیمی شما 1024 پیکسل باشد، اکنون 100 درصد خواهد بود، بنابراین در عرض تمام صفحه وب بدون توجه به عرض مرورگر فاصله می گیرد.
طرح بندی ثابت وب سایت
در اینجا یک مثال از تبدیل از عرض ثابت به عرض مایع است. همانطور که می بینید ما تمام عرض را به درصد تبدیل می کنیم که به صفحات وب امکان می دهد تا مقیاس شوند.
طرح وب پاسخگو
تصاویر پاسخگو
قطعه دوم طراحی وب پاسخگو، تصاویر پاسخگو است. ساخت تصاویر شما پاسخگو گام بسیار مهمی است، زیرا می تواند سرعت وب سایت شما و سرعت موتورهای جستجو را افزایش دهد.
تصاویر پاسخگو رشد می کنند و با مرورگر کاربر به تناسب صفحه وب کوچک می شوند. اگر از یک تصویر بسیار بزرگ (هر دو در اندازه فایل و پیکسل ها) استفاده کنید، زمان زیادی برای بارگذاری بر روی یک دستگاه که به 3G متصل شده یا کندتر است، طول می کشد.
تصاویر سازگار
محبوب ترین راه برای ساخت عکس های شما پاسخگو است تا تصاویر تطبیقی داشته باشند. تصاویر انطباقی 100 درصد به تصاویر شما (درست مانند طرح مایع) را تنظیم می کنند که اجازه می دهد آن را با ظرفیت پدر و مادر خود سازگار کنیم.
اگر چه این محبوب ترین روش است، این 100٪ اثبات کامل نیست. مسئله ای با تصاویر سازگار است که شما تنها یک تصویر را نشان می دهید و تغییر اندازه آن را بر اساس عرض مرورگر انجام می دهید.
همانطور که قبلا اشاره کردیم، اگر تصاویر شما بیش از حد بزرگ باشد، این می تواند برخی مشکلات با سرعت سایت ایجاد کند.
HISRC
این روش از جاوا اسکریپت برای نشان دادن تصاویر با اندازه های مختلف بر اساس اتصال کاربر استفاده می کند. اگر کاربر در اتصال کند باشد، HISRC یک عکس با وضوح پایین تر نشان می دهد که سریعتر بارگذاری می شود.
داستان های رسانه
در کنار طرح های مایع و تصاویر پاسخگو، درخواست های رسانه ای برای داشتن یک وب سایت پاسخگو لازم است. پرس و جو رسانه ای به شما این امکان را می دهد که قوانین خاص دستگاه را برای مخفی کردن، رشد، انتقال یا نمایش محتویات به منظور بهبود تجربه کاربر فراهم کنید.
با استفاده از CSS، پرس و جو رسانه ها برای رابط کاربری مختلف برای هر دستگاه اجازه می دهد.
به عنوان مثال، بگذارید بگوییم شما یک دکمه در وب سایت خود دارید، اما می خواهید آن را زمانی که بازدید کننده در یک دستگاه تلفن همراه مشاهده می کنید، پنهان کنید. با یک تکه کوچکی از کد شما می توانید این کار را انجام دهید:
/ * گوشی های هوشمند (پرتره و چشم انداز) ----------- * /
media only screen and (min-device-width: 320px) و (max-device-width: 480px) {
/ * سبک * /
.button {display: none}
}
داشتن یک وب سایت پاسخگو ضروری است. بازدیدکنندگان بیشتر وب سایت ها را از طریق دستگاه های تلفن همراه مرور می کنند، بنابراین مهم است که وبسایت شما به نظر خوب یا از بین برود. تبدیل وب سایت به پاسخگویی می تواند یک کار بزرگ برای برخی از کسب و کارهای کوچک باشد، اما اگر شما این پست را دنبال کنید، می توانید یک وبسایت داشته باشید که در هر دستگاه کار کند.