اصول طراحی سایت ریسپانسیو چیست؟ و هر آنچه که باید درباره طراحی ریسپانسیو بدانید.
تاریخچه طراحی سایت ریسپانسیو
شرکت خودرو سازی آئودی آلمانی اولین دارنده یک سایت ریسپانسیو بود. در اواخر سال 2001، اولین سایت به صورت واکنش گرا توسط شرکت RAZORFISH طراحی و آماده سازی شد تا بر روی وب برود.
طراحی به صورتی انجام پذیرفته بود که در هر حالت از نمایش در مرور گر های معروف آن زمان مانند اینترنت اکسپلورر، متناسب با آن ها از روی سرور به نمایش گذاشته می شد.
در سال های بعد به مرور استاندارد های متفاوتی برای ریسپانسیو بودن وب سایت تعریف شد، مانند "fluid"، "fexible" و "liquid" و. .
در این هنگام با ورود تکنیک های media query در استاندارد css3 اولین قدم های جدی برای ریسپانسیو شدن وب سایت ها به صورت جهانی، همه گیر شد.
| از عبارت "طراحی سایت ریسپانسیو" اولین بار Ethan Marcotte در مقاله خود استفاده کرد. در مقاله ارائه شده از اصطلاح طراحی سایت ریسپانسیو برای نمایش المان های مهم استفاده شد. از جمله این اصطلاحات، اشاره به ظاهر وب که شامل media query ها و عکس ها با سایز های انعطاف پذیر بود. در راستای گسترس طراحی ریسپانسیو، سال 2013 به عنوان سال طراحی سایت ریسپانسیو نام گرفت. ما در مطلب مراحل طراحی سایت به اهمیت ریسپانسیو بودن سایت پرداختیم، در این مطلب به طور کامل به بیان اصول طراحی سایت واکنشگرا خواهیم پرداخت. |
طراحی ریسپانسیو چیست؟
امروزه به زبان ساده به سایت هایی ریسپانسیو می گویند که در تمامی دستگاه ها بدون از بین رفتن یا عدم نمایش قسمت هایی از سایت، به راحتی قابل مشاهده باشد.
در اینجا منظور از دستگاها؛ وسیله هایی همچون گوشی، لپتاپ، کامپیوتر و می باشد. هرانچه که کاربر برای مشاهده صفحات در موتور های جستجو از آن استفاده می کند.
طراحی سایت به صورت ریسپانسیو، روشی است که نشان می دهد طراحی و توسعه باید بر اساس اندازه صفحه نمایش، پلتفرم و رفتار و محیط کاربر باشد.
این طراحی باید شامل ترکیبی از طرح های انعطاف پذیر، تصاویر و استفاده درست از کد های CSS باشد.
همانطور که کاربر از لپ تاپ خود به دستگاه دیگر تغییر مسیر می دهد، وب سایت نیز باید به طور خودکار تغییر کند تا از نظر وضوح، اندازه تصویر و قابلیت های برنامه نویسی مناسب و کاربر پسند باشد.
تنظیم وضوح صفحه در طراحی ریسپانسیو سایت، با وجود دستگاه های بیشتر برای نمایش یک صفحه از سایت، وضوح، تعاریف و جهت های مختلف از یک صفحه، با اهمیت می شوند.
دستگاه های جدید با اندازه صفحه نمایش جدید هر روز در حال توسعه هستند و هر یک از این دستگاه ها ممکن است بتوانند تغییرات در اندازه، عملکرد و حتی رنگ را مدیریت کنند.
حال با همه این توضیحات چگونه می توان برای شرایط ذکر شده، یک سایت ریسپانسیو طراحی کرد؟
تا اینجا متوجه شدیم که باید بر روی صفحه نمایش تمرکز کنیم، نه روی دستگاه های مختلف.
حال به سراغ دیگر گزینه های ریسپانسیو کردن می رویم.
برای طراحی سایت ریسپانسیو لازم است پیش نیاز هایی داشته باشید. در ادامه به صورت مختصر به این توانایی ها اشاره می کنیم.
|
برای ریسپانسیو کردن سایت چه فاکتور هایی دارای اهمیت است؟
1. تصاویر سایت خود را ریسپانسیو کنید.
یکی از گام های مهم در طراحی سایت ریسپانسیو، ریسپانسیو کردن تصاویر است. عکس ها نقش مهمی در ارتباط گرفتن با کاربران دارند.
تعدادی تکنیک برای تغییر اندازه تصاویر وجود دارد و بسیاری از آنها به راحتی انجام می شود. محبوب ترین این تکنیک ها، استفاده از حداکثر عرض CSS برای رفع مشکل است.
به بیان دیگر :
img { max-width: 100%; }2.Custom Layout Structure یاساختار قالب سفارشی
هنگامی که شما از یک قالب ریسپانسیو برای سایت خود استفاده می کنید، سرعت بارگذاری سایت نیز ارتقا پیدا می کند. در نتیجه به محبوبیت سایت شما می افزاید.
به عنوان مثال، می توانید یک شیوه اصلی (که به طور پیش فرض نیز وجود داشته باشد) داشته باشید که همه عناصر اصلی ساختاری مانند #wrapper ، #content ، #sidebar ، #nav ، به همراه رنگها ، پس زمینه و تایپوگرافی ها مشخص باشد. فقط سایز ها شناور و انعطاف پذیر تعریف شوند.
3.بهینه سازی تایپوگرافی سایت
مواردی مثل اندازه فونت و نوشته ها، نوع فونت، اندازه سربرگ ها، ارتفاع بین خطوط و. را تایپوگرافی در سایت می گوییم.
در یک سایت واکنش گرا اندازه هایی که مد نظر می گیرید بسیار مهم هستند. ایده آل ترین حالت ممکن برای نمایش متون در صفحات، نمایش سایز 16PX است.
4. استفاده از جاوا اسکریپت
از دیگر راه های ریسپانسیو کردن سایت، استفاده از جاوا اسکریپت است. استفاده از جاوا اسکریپت را خصوصا برای بعضی از دستگاه هایی که از CSS3 برای مدیا کوئری ها پشتیبانی نمیکنند، پیشنهاد می کنیم.
5.ریسپانسیو سازی سایت با استفاده از بوت استرپ و مدیا کوئری
در ایران نیز بسیاری از وی سایت ها به صورت ریسپانسیو طراحی و توسعه پیدا می کنند تا کاربر به راحتی بتواند در همه دستگاه ها از جمله انواع تبلت، انواع موبایل و. از سایت بازدید کند.
در سال 2011 نیز توسط توییتر یک فریمورک به نام بوت استرپ به صورت رایگان معرفی شد تا در جهت ریسپانسیو کردن سایت از آن استفاده کرد. شما می توانید نسخه فارسی این بوت استرپ را نیز دانلود کرده تا در فرآیند کار با چالش های کمتری مواجه شوید. امروزه طراحان زیادی برای طراحی وب سایت های خود از بوت استرپ و مدیا کوئری استفاده می کنند. بوت استرپ و مدیا کوئری ها با هم متفاوت هستند. برای مثال هنگامی که از بوت استرپ برای ریسپانسیو کردن سایت استفاده می کنیم باید آن را دانلود و در پوشه های سایت گذاشته و در فایل html به آن لینک دهیم تا هنگام اجرا فایل بوت استرپ هم اجرا شود، اما برای بوت استرپ این گونه نیست.
در هنگام استفاده از مدیا کوئری ها در فایا های css، اندازه مدیا ها و حالت های صفحه مشخص می شود اما در هنگام نوشتن کد های html باید صفحات را grid بندی کرد.
چگونه می توانیم ریسپانسیو بودن یک سایت را تست کنیم؟
به دلیل عدم دسترسی ما به همه نوع گوشی های موبایل یا تبلت و. در اندازه های مختلف، و سرچ های مردم در همه این دستگاه ها، لازم است از واکنش گرایی سایت خود اطمینان خاطر پیدا کنیم.
می توانیم با استفاده از ابزار های انلاین رایگان ریسپانسیو بودن سایت ها را تست کنیم. با استفاده از این دسترسی می توانید هم ریسپانسیو بودن سایت ها را بررسی کنید و هم مشکلات هنگام نمایش در صفحات مختلف را چک کنید.
1. یکی از این ابزارهای رایگان معروف به آزمایشگاه مجازی وب سایت است. XRESPOND ابزار رایگان تست ریسپانسیو بودن سایت است. با این ابزار به راحتی می توانید هر سایتی که مد نظر دارید را تست کنید. در این سایت هر دستگاه مورد نظر بررسی می شود.
2. از دیگر ابزار های تست رایگان ریسپانسیو بودن سایت، می توان به RESPONSINATOR اشاره کرد. از ویژگی های قابل توجه این سایت می توان به امکان تعویض URL از HTTP به HTTPS را می دهد.
3. از ابزار رایگان RESPONSIVE DESIGN CHECKER نیز برای تست ریسپانسیو بودن سایت خود می توانید استفاده کنید.در این سایت می توانید ارتفاع و عرض صفحه نمایش را به دلخواه انتخاب کنید. و در نوار وبسایت نیز نوع دستگاه خود را انتخاب کنید.
