طراحی سایت ریسپانسیو چیست؟ چطور می‌توان سایت را برای تمامی دستگاه‌ها متناسب کرد؟ این‌ها تنها برخی از سوالاتی است که در این مقاله مورد توجه قرار می‌دهیم. در ادامه نیز آموزش طراحی ریسپانسیو (Responsive Web Design) نیز گفته می‌شود. پس با من همراه باشید.
تقریباً همه مشتریان جدید این روزها خواهان نسخه موبایلی وب سایت خود است. به هر حال این موضوع بسیار ضروری است. برای بسیاری از وب سایت‌ها، ایجاد یک نسخه برای هر دستگاه جدید غیرممکن یا حداقل غیرعملی است. برای همین طرای ریسپانسیو بسیار مهم است. اول باید بدانیم طراحی ریسپانسیو چیست؟
طراحی سایت ریسپانسیو چیست؟
طراحی سایت ریسپانسیو در حقیقت یعنی استفاده از HTML و CSS برای تغییر اندازه خودکار، پنهان کردن، کوچک کردن یا بزرگ‌نمایی یک وب‌سایت و المان‌های آن به منظور نمایش درست در همه دستگاه‌ها (کامپیوتر، تبلت و تلفن). طراحی وب ریسپانسیو رویکردی است که نشان می‌دهد طراحی و توسعه سایت باید به رفتار و محیط کاربر بر اساس اندازه صفحه نمایش، پلتفرم و نیازش متناسب باشد.
این کار شامل ترکیبی از شبکه‌ها و طرح‌بندی‌های انعطاف‌پذیر، تصاویر و استفاده هوشمندانه از CSS است. همانطور که کاربر از لپ تاپ خود به آیپد مراجعه می‌کند، وب سایت باید به طور خودکار تغییر کند. وب سایت نباید دسترسی کاربر به صفحه را مسدود کند. به عبارت دیگر، وب سایت باید از فناوری‌هایی استفاده کنید تا به طور خودکار به نیازهای کاربر پاسخ دهد.
چرا طراحی واکنشگرا (ریسپانسیو) مهم است؟
اگر در زمینه طراحی وب، توسعه یا وبلاگ نویسی تازه کار هستید، ممکن است تعجب کنید که چرا طراحی ریسپانسیو در وهله اول اهمیت قرار دارد. پاسخ ساده است. دیگر طراحی برای یک دستگاه کافی نیست. ترافیک سایت در نسخه موبایل از ترافیک دسکتاپ پیشی گرفته است و در حال حاضر اکثر ترافیک وب سایت را تشکیل می‌دهد.
وقتی بیش از نیمی از بازدیدکنندگان شما از یک دستگاه موبایل برای مرور اینترنت استفاده می‌کنند، نمی‌توانید فقط صفحه‌ای را که برای دسکتاپ طراحی شده را به آنها ارائه دهید. خواندن و استفاده از سایت شما برای چنین کاربرانی سخت شده و تجربه کاربری بدی خواهند داشت. اما این همه چیز نیست. کاربران دستگاههای تلفن همراه اکثر بازدیدکنندگان موتورهای جستجو را تشکیل می‌دهند. این موضوع باعث شده تا طراحی ریسپانسیو سایت بخش مهمی از سئو نیز باشد.
آیا سایتهای وردپرس ریسپانسیو هستند؟
ریسپانسیو بودن یا نبودن سایتهای وردپرس به قالب شما بستگی دارد. اگر از یک پوسته (قالب) پیشفرض وردپرس استفاده میکنید، طراحی واکنشگرا است، اما از آنجایی که یک طرح تک ستونی و ساده است است، ممکن است هنگام مشاهده آن در صفحههای مختلف متوجه این موضوع نشوید. اگر از قالب وردپرس دیگری استفاده میکنید، میتوانید با مقایسه نحوه ظاهر آن در دستگاههای مختلف یا استفاده از ابزارهای توسعهدهنده کروم، ریسپانسیو بودن یا نبودن آن را بررسی کنید. اگر از قالبهای دیگر وردپرس استفاده میکنید، میتوانید از توضیحات فروشنده یا تولید کننده قالب از این موضوع مطلع شوید.
اجزای طراحی سایت ریسپانسیو
در این بخش، پایه و اساس طراحی وب سایت واکنشگرا (Responsive) را مورد بررسی قرار خواهیم داد.
- CSS و HTML
- Media Queries
- طراحی سیال
- Flexbox Layout
- تصاویر ریسپانسیو
- سرعت
CSS و HTML
اساس طراحی ریسپانسیو ترکیبی از HTML و CSS است، دو زبان کد نویسی که محتوا و طرح صفحه را در هر مرورگر وب کنترل می‌کنند.
HTML عمدتا ساختار، عناصر و محتوای یک صفحه وب را کنترل می‌کند. به عنوان مثال، برای افزودن یک تصویر به یک وب سایت، باید از کد HTML مانند زیر استفاده کنید:
<img src="/image.gif" alt="image" class=”full-width-img”>
میتوانید برای آن یک «Class» یا «id» تنظیم کنید که بعدا با کد CSS تنظیمات بیشتری روی آن انجام دهید.
شما همچنین میتوانید ویژگی‌های اولیه مانند ارتفاع و عرض را در HTML خود کنترل کنید، اما این کار روش چندان درستی و بهینه‌ای نیست.
بهتر است از CSS برای ویرایش طرح و چیدمان عناصری که در یک صفحه با HTML قرار می‌دهید استفاده کنید. کد CSS می‌تواند در بخش <style> یک فایل HTML یا به عنوان یک فایل جداگانه به صفحه شما اضافه شود.
به عنوان مثال، می‌توانیم عرض تمام تصاویر HTML را به صورت زیر در CSS ویرایش کنیم:
img {
width: 100%;
}
همچنین میتوانید در CSS طراحی را فراتر از ارتفاع، عرض و رنگ کنترل کنید. استفاده از CSS به این صورت است که وقتی یک طراحی را با تکنیکی به نام Media Query ترکیب میکنید، ریسپانسیو می‌شود.
Media Query
Media Query امکانی در CSS3 است که به شما این قابلیت را می‌دهد که محتوا را برای انطباق با عوامل مختلف مانند اندازه صفحه یا رزولوشن تنظیم کنید.
Media Query مشابه با یک «بند اگر» در زبان‌های برنامه‌نویسی کار می‌کند. این تگ قبل از اجرای موارد درونی خود بررسی می‌کند که آیا اندازه و رزولوشن صفحه با آنچه کد می‌خواهد همخوانی دارد یا خیر.
برای روشن شدن موضوع کد زیر را در نظر بگیرید:
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}
این Media Query ابتدا بررسی می‌کند آیا صفحه حداقل ۷۸۰ پیکسل عرض دارد یا خیر. اگر داشته باشد کدهای درونی خوانده می‌شوند و در غیر اینصورت این کدها بی تاثیر خواهند بود.
طراحی و چیدمان سیال (Fluid layout)
چیدمان سیال بخش مهمی از طراحی ریسپانسیو مدرن است. در گذشته، شما برای هر عنصر HTML یک مقدار ثابت پیکسلی تعیین می‌کردید. یک چیدمان سیال به جای اینکار بر مقادیر پویا مانند درصدی از عرض صفحه متکی است.
این روش به صورت پویا اندازه‌های مختلف عناصر را بر اساس اندازه صفحه افزایش یا کاهش می‌دهد. مثلا مشخص می‌کند یک المان باید ۶۰ درصد عرض صفحه را بپوشاند. حالا با توجه به ابعاد صفحه این المان ۶۰ درصد عرض آن را پوشش می‌دهد.
طرح بندی فلکس باکس (Flexbox Layout)
در حالی که یک طراحی مبتنی بر درصد بسیار کاربردی است اما بسیاری از طراحان و توسعه دهندگان وب احساس کردند که به اندازه کافی پویا یا انعطاف پذیر نیست. فلکس باکس یک ماژول CSS است که به عنوان یک روش کارآمدتر برای چیدمان چندین عنصر طراحی شده است.
یک کانتینر فلکس باکس، عناصر را برای پر کردن فضای خالی گسترش می‌دهد یا برای جلوگیری از رفتن آنها به خط بعدی آنها را کوچک می‌کند. این کانتینرهای فلکس باکس دارای تعدادی ویژگی منحصر به فرد هستند، که نمی‌توانید آنها را با یک عنصر HTML معمولی ویرایش کنید.
تصاویر ریسپانسیو در طراحی سایت
تصاویر ریسپانسیو به صورت عمومی از همان روشی که در طراحی سیال صحبت کردیم پیروی می‌کنند. به عنوان مثال کد زیر را مورد توجه قرار دهید:
img {
width: 100%;
}
واحد ٪ تقریبا به یک درصد از عرض یا ارتفاع محدوده مورد نظر را تشکیل می‌دهد. اما مشکل این روش این است که هر کاربر مجبور است تصویر در اندازه کامل (حتی در موبایل دانلود) را کند.
برای جلوگیری از این کد، روش‌های دیگری وجود دارد. مثلا کد زیر نشان می‌دهد که بنا به چه ابعادی، کدام فایل تصویر لود شود. این کار کمک می‌کند تا مثلا در نسخه موبایل، یک فایل کوچکتررا لود کنید.
<img srcset="/large-img.jpg 1024w,/
/middle-img.jpg 640w,/
/small-img.jpg / 320w"
src="/small.jpg"
/>
سرعت و طراحی ریسپانسیو سایت
هنگامی که می‌خواهید یک سایت ریسپانسیو طراحی کنید، سرعت بارگذاری صفحه باید در اولویت شما باشد.
صفحاتی که در ۲ ثانیه لود می‌شوند، میانگین نرخ پرش ۹ درصدی دارند، در حالی که صفحاتی که ۵ ثانیه لود شدن آنها طول می‌کشد به نرخ پرش ۳۸ درصدی روبرو می‌شوند.
اگر درمورد نرخ پرش اطلاع ندارید، خواندن مقاله زیر را توصیه می‌کنیم: ۱۴ روش برای کاهش نرخ پرش (bounce rate)
اهمیت ریسپانسیو بودن نباید بیش از حد نیاز، اولین رندر صفحه شما را مسدود کرده یا به تاخیر بیندازد.
چندین راه وجود دارد که میتوانید صفحات خود را سریعتر کنید. بهینه‌سازی تصاویر، پیاده‌سازی کش، کاهش حجم فایل، استفاده از یک چیدمان CSS کارآمدتر، اجتناب از مسدود کردن رندر JS و بهبود مسیر رندر، همگی روش‌های خوبی هستند که باید در نظر بگیرید.
میتوانید برای کاربران موبایل نسخه AMP را هم راه‌اندازی کنید. اگر در مورد این تکنولوژی اطلاع ندارید، مطلب زیر را حتما بخوانید:
تایپوگرافی ریسپانسیو در طراحی سایت
تمرکز اصلی طراحی سایت ریسپانسیو بر روی واکنش‌گرایی بلوک‌ها، عناصر و رسانه است. متن اغلب به عنوان یک موضوع در درجه بعدی در نظر گرفته می‌شود.
اما برای طراحی واکنش گرا کامل، باید اندازه فونت خود را نیز متناسب با اندازه صفحه تنظیم کنید. ساده ترین راه برای انجام این کار، تنظیم یک مقدار ثابت برای اندازه فونت، مانند ۲۲ پیکسل، و تطبیق آن برای صفحه نمایش‌های گوناگون است.
اندازه‌های مهم در طراحی ریسپانسیو
برای طراحی ریسپانسیو بهتر است برخی ابعاد را بدانید.
اندازه های رایج صفحه نمایش:
- موبایل: ۳۶۰ – ۶۴۰ پیکسل
- موبایل: ۳۷۵ – ۶۶۷ پیکسل
- موبایل: ۳۶۰ – ۷۲۰ پیکسل
- آیفون ایکس: ۳۷۵ – ۸۱۲ پیکسل
- تبلت: ۷۶۸ – ۱۰۲۴ پیکسل
- لپتاپ: ۱۳۶۶ – ۷۶۸ پیکسل
- لپتاپ: ۱۹۲۰ – ۱۰۸۰ پیکسل
اعداد بالا عرض و ارتفاع صفحه نمایش بر اساس دستگاههای مختلف است.
اگر رویکرد «اول موبایل» را برای طراحی انتخاب میکنید، با یک طراحی تک ستونی و اندازه‌های فونت کوچک‌تر به عنوان پایه، نیازی نیست نقاط شکست موبایل را اضافه کنید. مگر اینکه بخواهید طراحی را برای مدل‌های خاصی بهینه کنید.
واحدها و مقادیر CSS برای طراحی ریسپانسیو
CSS دارای واحدهای اندازه‌گیری مطلق و نسبی است. نمونه‌ای از واحد مطلق طول سانتی متر یا پیکسل است. واحدهای نسبی یا مقادیر پویا به اندازه و وضوح صفحه یا اندازه فونت عنصر بالاتر بستگی دارد.
آشنایی با واحدها در طراحی ریسپانسیو:
PX: یک پیکسل
EM: واحدی نسبی بر اساس اندازه فونت عنصر CSS.
REM: واحدی نسبی بر اساس اندازه فونت عنصر CSS.
VH و VW: درصد ارتفاع یا عرض صفحه.
٪: درصد عنصر والد.
یک طراح یا توسعهدهنده وب جدید احتمالا از پیکسل‌ها برای متن استفاده می‌کند، زیرا آنها ساده‌ترین واحد طول در CSS هستند.
اما هنگام تنظیم عرض و حداکثر عرض تصاویر و سایر عناصر، استفاده از ٪ بهترین راه حل است. این رویکرد اطمینان می‌دهد که اجزا با اندازه صفحه نمایش هر دستگاه تنظیم می‌شوند.
طراحی سایت ریسپانسیو و هزینه و نمونه کار
همانطور که متوجه شدید، طراحی سایت ریسپانیو بخش‌های مختلفی دارد. با توجه به اینکه ما در اینجا در یک مقاله واکنشگرا بودن سایت را بررسی کردیم، بسیاری نکات آموزشی دیگر باقی می‌ماند. توجه کنید که طراحی ریسپانسیو نیاز به تجربه فراوانی دارد. اشتباهاتی که می‌تواند منجر شود سایت شما برای بسیاری از کاربران به درستی نمایش داده نشود بسیار ناگوار هستند.
اما راهکاری برای رسیدن به یک سایت ریسپانسیو وجود دارد که بسیار ساده‌تر است. طراحی را به یک متخصص بسپارید. توجه کنید که یک وب سایت موفق فقط در طراحی خلاصه نمی‌شود. طراحی سایت امروز یک تخصص است و باید برای آن دانش زیادی داشت. برای این منظور ما خدمات طراحی سایت حرفه‌ای را در اختیار مشتریان قرار می‌دهیم. اما با توجه به موضوعیت وب سایت‌ها، خدمات لولسا به چند دسته کلی تقسیم می‌شود.
طراحی سایت فروشگاهی: اگر می‌خواهید در سایت خود محصول یا خدمات بفروشید، نیازمند یک سایت فروشگاهی هستید. در لینک زیر می‌تواند با خدمات طراحی سایت فروشگاهی لولسا، هزینه‌ها و نمونه‌کارها بیشتر آشنا شوید:
طراحی سایت شرکتی: بسیاری از وب سایت‌ها با هدف فروش محصول و خدمات راه‌اندازی نمی‌شوند. هدف آنها بیشتر معرفی یک شرکت است. به همین منظور خدمات طراحی سایت شرکتی برای این دسته افراد مناسب خواهد بود. در لینک زیر میتوانید با این خدمات بیشتر آشنا شوید:
طراحی سایت شخصی: اگر قصد دارید یک سایت شخصی برای خود راه‌اندازی کنید، دو راه‌کار بالا چندان مناسب نیست. برای همین طراحی سایت شخصی نیز به لیست خدمات لولسا اضافه شده است. برای آشنایی با این خدمات به لینک زیر مراجعه کنید:
تمامی خدمات طراحی سایت لولسا به صورت ریسپانیو است. اگر به دنبال سایتی پر سرعت، ریسپانیو، یونیک، حرفه‌ای و موفق هستید، خدمات ما را تجربه کنید. پیش از ثبت سفارش میتوانید از یک مشاوره تلفنی رایگان نیز بهره‌مند شوید. برای دریافت وقت مشاوره، فرم زیر را تکمیل کنید:
