چگونه سایت خود را ریسپانسیو کنیم؟
امروزه نه تنها یک سایت باید در صفحه‌ی دسکتاپ به خوبی نمایش داده شود، بلکه امکانات آن باید در صفحه‌ی موبایل و تبلت نیز، به راحتی در دسترس باشند. طراحی یک سایت زمانی ریسپانسیو است که بتواند با صفحه نمایش تمام دستگاه‌ها، سازگار شود. به این معنی، که اِلمان‌های سایت در صفحه نمایش موبایل، تبلت و دسکتاپ به راحتی در دسترس باشند. در ادامه به شما نشان خواهیم داد که چگونه می‌توانید سایت خود را در سه مرحله ریسپانسیو کنید.
چیدمان (Layout)
اولین المان برای ساخت یک سایت ریسپانسیو، چیدمان آن است. در ابتدا شما می‌توانید یک سایت غیر ریسپانسیو با ویژگی‌های پیشفرض طراحی کنید. سپس آن را دستکاری کنید تا چیدمان سایت مورد پسند شما قرار گیرد. بعد از این مرحله می‌توانید با ایجاد تغییراتی مختصر در کد نویسی، نسخه‌ی ریسپانسیو را نیز طراحی کنید.
اولین کار برای ایجاد یک سایت ریسپانسیو، این است که کدهای زیر را در تگ هد (<Head>) سایت قرار دهید. با قرار دادن این کدها، تنظیمات صفحه نمایش در تمام مرورگرها، حذف خواهد شد. سپس ابعاد صفحه نمایش، در تمام دستگاه‌ها، در مقیاس 1*1 تنظیم خواهد شد. وقتی این کدها کپی شوند، کاربران به راحتی می‌توانند، بزرگنمایی صفحه را تغییر دهند.کد ریسپانسیو مربوط به layoutکد ریسپانسیو مربوط به layout
بعد از این مرحله باید کدهای مربوط به Media Query را به سایت خود اضافه کنید. Media Query ویژگی‌های مربوط به نمایش صفحه در دستگاه‌های مختلف را بررسی می‌کند. در واقع با استفاده از Media Query، نمایش صفحه می‌تواند برای طیف وسیعی از دستگاه‌ها، تنظیم شود. البته این تنظیمات، به گونه‌ای است که تغییری در محتوای صفحه ایجاد نخواهد شد.
تنظیمات کدهای Media Query، کاملا به نوع چیدمان صفحه نمایش وابسته هستند. بنابراین استفاده از یک تکه کد یکسان، برای تمام وبسایت‌ها امکان پذیر نیست. با این حال در ادامه بخشی از کدهای مربوط به تنظیمات تبلت را قرار داده‌ایم. صفحه نمایش تبلت، می‌تواند در دو حالت عمودی و افقی قرار گیرد. بنابراین تنظیمات صفحه نمایش نیز می‌تواند با چرخش تبلت عوض شود. همانطور که مشاهده می‌کنید، کدهای مربوط به تنظیمات صفحه نمایش، در حالت افقی و عمودی قرار داده شده‌اند.کد ریسپانسیو مربوط به Media queryکد ریسپانسیو مربوط به Media query
ویدئو و عکس
در این مرحله باید روی تنظیمات پیشرفته‌ای برای عکس و ویدئو متمرکز شوید. این تنظیمات، در اکثر سایت‌های حرفه‌ای استفاده می‌شوند. تکه کد CSS که در ادامه آمده است، موجب می‌شود تا عکس‌های سایت، از عنصر والد خود بزرگتر نباشد. این کار را می‌توان برای اکثر سایت‌ها انجام داد. البته باید به خاطر داشته باشید که Max-Width که در کد قبل آمده است، توسط مرورگرهای قدیمی، تشخیص داده نمی‌شود. به همین دلیل، باید تکه کد زیر در استایل شیت CSS قرار داده شود.
برخی اوقات، وقتی سایز صفحه نمایش تغییر می‌کند، باید عکسی متفاوت از سایت نمایش داده شود. در ادامه تکنیکی از کدنویسی آمده است که می‌تواند کار را برای شما آسان کند.کد ریسپانسیو مربوط به عکسکد ریسپانسیو مربوط به عکس
همانطور که در کدهای بالا قابل مشاهده است، می‌توان از * – date برای ذخیره‌سازی آدرس عکس جایگزین استفاده کرد. سپس با استفاده از کدهایی که در ادامه آمده‌اند، می‌توان عکس‌های اولیه را با عکس‌های جایگزین، عوض کرد.
بخش دیگری از رسانه‌ها که تاثیر بسیاری در ریسپانسیو بودن سایت دارند، تنظیمات مربوط به ویدئو است. تکنیک‌های ارائه شده در کدهای زیر، می‌تواند ویدئوهای نمایش داده شده در سایت را ریسپانسیو کند.
کدهای HTML
کد ریسپاسیو HTMl مربوط به ویدئوکد ریسپاسیو HTMl مربوط به ویدئو
کدهای CSS
کد ریسپاسیو CSS مربوط به ویدئوکد ریسپاسیو CSS مربوط به ویدئو
وقتی کدهای مربوطه را در سایت خود قرار دادید، ویدئوها به حالت ریسپانسیو نمایش داده خواهد شد.
تایپوگرافی (Typography)
اگرچه تایپوگرافی بخش مهمی برای ساخت یک سایت ریسپانسیو به حساب می‌آید، اما طراحان در اکثر موارد، اهمیتی به آن نمی‌دهند. اکثر توسعه دهندگان سایت از پیکسل برای تعریف سایز فونت استفاده می‌کنند. در حالیکه برای یک سایت ریسپانسیو، باید فونت ریسپانسیو در نظر گرفت. در ادامه روشی را برای ریسپانسیو کردن تایپوگرافی معرفی خواهیم کرد.
بخش جدیدی در CSS3 با نام rems وجود دارد. وقتی rems در کدهای html استفاده می‌شوند، کارایی آن‌ها بسیار افزایش می‌یابد. قبل از قرارگیری کدها در سایت، باید سایز فونت متن در مرورگر، به مقیاس 100% تبدیل شود. تکه کد پایین این کار را برای شما انجام خواهد داد.کد html مربوط به تغییر سایز فونت مرورگرکد html مربوط به تغییر سایز فونت مرورگر
وقتی تکه کد پایین در تگ هد سایت استفاده می‌شود، سایز فونت‌ها به صورت ریسپانسیو نمایش داده می‌شوند.کد ریسپانسیو مربوط به Typographyکد ریسپانسیو مربوط به Typography
ساختن چیدمان صفحه، ویدئو و عکس و تایپوگرافی، مواردی مهم هستند که، باید در ساخت یک سایت ریسپانسیو، مورد توجه قرار گیرند. با استفاده از کدهای ذکر شده در هر بخش، می‌توانید گامی بزرگ، برای ریسپانسیو کردن سایت خود بردارید.
دیدگاهتان را بنویسید