روز به روز بر تعداد کسانی که از ابزارهای قابل حمل برای دسترسی به اینترنت استفاده می‌کنند افزوده می‌شود. طراحی سایت به گونه‌ای که در هر عرض و طول صفحه قابل استفاده باشد اصطلاحا «طراحی سایت واکنش گرا» یا «Responsive webdesign» نامیده می‌شود.
برای آشنایی بیشتر در مورد طراحی سایت واکنش گرا اینجا کلیک کنید
برای ایجاد یک وبسایت واکنش گرا دانستن چند نکته ضروری است که در این نوشته به اختصار آن‌ها را مرور میکنیم.
Viewport
مرورگرهای موبایل برای سازگاری با سایت‌هایی که در گذشته طراحی شده‌اند، از مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد. مرورگر موبایل سایت را در این فضای مجازی نمایش می‌دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می‌دهد که اگر از عرض صفحه ی نمایش موبایل بزرگتر باشد، کاربر می‌بایست صفحه را به راست و چپ حرکت دهد تا تمام محتوای سایت را مشاهده کند.
نخستین گام در طراحی سایت واکنش گرا، اطلاع رسانی به مرورگر برای تغییر اندازهی Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش‌فرض، فضای مورد نظر برنامه‌نویس را به Viewport اختصاص دهد.
تغییر اندازهی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می‌رسد.
<head> <meta name="viewport" content="width=480"> </head> |
همان‌گونه که مشاهده می‌کنید، در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شده است. در این روش، عرض Viewport در دستگاه‌های مختلف ثابت خواهد بود و ممکن است در تبلت‌ها که عرض بیشتری دارند، متن‌ها و تصویرها بیش از اندازه بزرگ باشند.
شیوه‌ی دیگر در تغیین مقدار Viewport، تعیین آن با عرض فیزیکی نمایشگر است. برای این کار از کد زیر استفاده می‌شود:
<meta name="viewport" content="width=device-width"> |
با انجام این کار عرض Viewport مطابق عرض صفحه‌ی موبایل یا تبلت تغییر خواهد کرد.
اندازهی مجازی
به دلیل تراکم بیشتر پیکسلی در موبایل‌های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ‌تاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود، ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش درآید.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه‌های مختلف و در سیستم‌عامل‌های مختلف، متغیر است. بنابراین یکی از مهم‌ترین نکات در طراحی سایت واکنش گرا، عدم اعتماد به اندازهی پیکسل‌ها است.
در سایت Screen Sizes میتوانید اندازهی واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد.
بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point، cm، و … است
بزرگنمایی
مرورگرهای موبایل ممکن است به صورت پیش‌فرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازهی بزرگنمایی و کوچکنمایی است.
<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2"> |
در کد بالا بیشترین اندازهی بزرگنمایی ۲ برابر و اندازهی پیش‌فرض آن ۱ تعیین شده است.
عملکرد خاص مرورگر سافاری ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحه‌ی موبایل گردانده شود تا از حالت عمودی به افقی درآید، صفحه را بار دیگر پردازش نمی‌کند و همان صفحه‌ی عمودی را بزرگنمایی می‌کند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به ۱، این عملکرد سافاری اصلاح می‌شود. البته این کار سبب می‌شود تا کاربران دیگر قادر به بزرگنمایی صفحه نباشند که خود یک اشکال به حساب می‌آید.
عرض حداقل و حداکثر
برای آنکه صفحات وب در همه‌جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید، حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ‌تاپ و کامپیوتر، حداکثر عرض مناسب، ۱۰۰۰ پیکسل است. البته ممکن است با توجه به تقسیم‌پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.
دید جعبه‌ای یا بر پایه‌ی ماژول
در طراحی سایت واکنش گرا، لازم است تا محتوای ما در جعبه‌های مجزا قرار بگیرند تا امکان جابجایی یا حذف آن‌ها در صورت نیاز فراهم شود. استفاده از تصویرهای بزرگ یا محتوای جدولی که قابلیت تغییر شکل و حذف را به سادگی ندارند، یک مانع در برابر طراحی سایت واکنش گرا به حساب می‌آیند.
ویژگی‌های خاص شیوه‌نامه‌های CSS برای پیاده‌سازی طرح واکنش گرا
مهم‌ترین ویژگی CSS برای پشتیبانی طراحی سایت واکنش گرا، دستور media است. این دستور به ما کمک می‌کند تا بر اساس عرض صفحه، ویژگی‌های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد:
@media ( min-width: 1000px ) { footer { width: 1000px; } } @media ( min-width: 401px ) { footer { display: block; } } @media ( max-width: 400px ) { footer { display: none; } } |
همان گونه که مشاهده می‌کنید، شاید لازم شود به ازای هر عنصر، چندین حالت مختلف از نمایش طراحی شود و گاهی لازم شود تا یک عنصر به صورت کامل از دید مخفی شود.
تصویرها
دانستن دو نکته در مورد تصویرها الزامی است. نخست انتخاب اندازهی مناسب برای تصویرها طوری که کیفیت آن‌ها در هنگام نمایش کم نشود و حجم آن‌ها هم متناسب با محدودیت‌های ارتباطی شبکه‌های موبایل باشد و نکته‌ی دوم تغییر عرض خودکار تصویر بر اساس عرض صفحه است.
بهتر است اندازهی تصویر مساوی بزرگترین اندازهی پیکسل‌های واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ می‌تواند مقدار مناسبی باشد.
در نمایشگرهای کوچکتر، با تعیین اندازهی درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن می‌توان یک تصویر واکنش گرا در اختیار داشت
img#header { width: 100%; height: auto; } |
تغییر اندازهی تصاویر پس‌زمینه هم در css به شکل زیر انجام می‌شود:
div#header { width: 100%; padding-top: 50%; background-image: url( "01.jpg" ); background-repeat: no-repeat; background-size: 100% auto; } |
نکته‌ی قابل توجه در قطعه کد بالا، استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می‌توان، ارتفاع یک عنصر را به صورت Responsive تعیین کرد.
اندازهی فونت‌ها
بهترین واحد برای مشخص کردن، اندازهی فونت‌ها واحدهای فیزیکی هستند. برای مثال تعیین اندازهی فونت پیش‌فرض صفحه با مقدار “14pt” به جای “14px” و تعیین اندازهی عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته‌های واکنش گرا است.
برای آشنایی با واحدهای اندازه‌گیری در طراحی وب میتوانید این نوشته را مطالعه کنید
لطفا هرگونه پیشنهاد یا اشکال مرتبط با مطالب این صفحه را برایم بفرستید تا در بازبینی‌های بعدی اصلاح شوند
مطلب فوق العاده مفیدی بود.
ممنون امیر جان
مطلب خوبی بود، ممنون
عالی بود دمت گرم فقط من یه سوال دارم با رعایت نکاتی که بالا توضیح دادید می شه مطمئن بود که یه طراحی واکنش گرا انجام دادیم؟
با سلام و تشکر
مطالبی که بنده در مورد طراحی واکنشگرا نوشتم، در حقیقت پیش‌نیازهای این کار هستند
مسلط شدن به طراحی واکنش گرا علاوه بر دانستن این نکته‌ها به خلاقیت و مهارت در طراحی نیازمند است
مثل اینکه دانستن روش استفاده از نخ و سوزن به تنهایی برای خیاط شدن کافی نیست
اقای امیر مسعود در مورد طراحی ریسپانسیو بیشتر بنویسید ممنون
با سلام
به روی چشم. هر موقع فرصت کنم مطالب بیشتری خواهم نوشت
با تشکر
سلام و خسته نباشید خدمت شما مسعود عزیز.
یک سایت را طراحی کردم و میخواهم آن را responsive بسازم
آموزش responsive را در اینترنت هر چی جستجو کردم نتوانستم پیدا کنم.
اگر کتاب آموزشresponsive را به زبان فارسی در دسترس دارید لطف نموده به
ایمیل آدرس:r.alizada@kpu.edu.af ارسال نموده ممنون سازید.
با سلام و تشکر
همان طور که در نوشته عرض کردم طراحی واکنشگرا یا ریسپانسیو به تجربه نیاز داره
اولین گام طراحی یک سایت واکنشگرا طراحی اون در ذهن خودتون هست
یعنی بررسی کنید که اگر صفحه در عرض کمتری نمایش داده شد، چه تغییری باید در محتوا به وجود بیاد و چه عنصرهایی چه تفاوت‌هایی خواهند داشت
بعد از طراحی ذهنی، نوبت به پیاده‌سازی گرافیکی و فنی می‌رسه که این مقاله به این بخش پرداخته
بدون در نظر گرفتن بخش ذهنی، داشتن اطلاعات فنی کمک زیادی نخواهد بود
سلام و تشکر بابت مطلبتون…یه سوال داشتم….من این طور متوجه شدم که در طراحی ریسپانسیو ما باید چند بار کد سی اس اس رو برای هر دیو و عناصر داخل صفحه استفاده کنیم که مثلا توی عرض صفحه کمتر از ۷۲۰پیکسل این دیو من عرضش چقدر باشه و همون دیو توی عرض صفحه کمتر از ۴۰۰ عرض چقدر باشه…..درست متوجه شدم(اگر درست متوجه شدم یه سوال دیگه اینکه من برای تمام عناصر باید مقدار قرار بدم یعنی این که چند مدل سی اس اس دارم ؟)
با سلام
در هنگام طراحی واکنشگرا، لازم نیست برای تک تک عنصرها، چند شیوه‌نامه تعریف کنید
معمولا عنصرهای اصلی صفحه یا همان بلاک‌ها به این صورت طراحی می‌شوند
عنصرهای دیگر صفحه مثل تصویرها، متن‌ها و منوها ممکن است به شکل دیگری واکنشگرا شوند
مثلا ممکن است یک تصویر همیشه کل عرض صفحه را اشغال کند.
در این صورت تنها یک شیوه‌نامه برایش تعریف خواهد شد.
برای هر عنصر ابتدا باید فکر کنید که چه اتفاقی باید بیفتد. بعد بسته به نیاز با یک شیوه‌نامه یا چند شیوه‌نامه به هدف خود برسید
سلام. سایت من در بازدید اول روی مانیتورم، صفحه رو کامل نشون نمی‌ده! وقتی که کنترل منها یا با کنترل ماوس صفحه رو کوچکتر میکنیم سایدبار راست رو نمایش میده! اینطوری سایتم خیلی ناقص میشه! چه کدی رو باید حذف کنم که سایتم ریسپانسیو نباشه؟ یا باید چیکار کنم که در بازدید اول صفحه‌ی کامل بیاد اما ریسپانسیو هم باشه؟ ممنون
با سلام
بدون دیدن کد نمی‌شه در مورد اشکال سایت شما نظری داد.
تغییر دادن کدها هم ممکنه زمان زیادی نیاز داشته باشه
پیشنهاد میکنم اگر در انجام این کار تجربه‌ی کافی رو ندارید از یک نفر که در این مورد بیشتر کار کرده باشه کمک بگیرید تا اشکال‌های ریسپانسیو سایت شما را برطرف کنه
با تشکر
بسیار عالی
بنظر شما برای اجرای سایت واکنشگرا روی اینترنت اکسپلور های ۷و۸ باید چه کار کرد لطفا راهنمایی کنید.
با سلام
برای انجام این کار لازم است تا از جاوااسکریپت کمک بگیرید
البته با توجه به سهم ناچیز این دو مرورگر در بازار هزینه کردن در این مورد به صرفه نیست
امیر مسعود جان ممنون از نوشته خوبت
یه خواهش ازت داشتم لطفا اگر میشه نحوه استفاده از جاوا اسکریپت هارا هم آموزش بده همچنین اگر بگی چگونه باید به سیستم بفهمونیم اگر اینترنت اکسپلور بود از جاوا اسکریپت و اگر مرور گر دیگری بود از مدیا ها استفاده کن
ممنون شاد باشی
با سلام
برای استفاده از جاوااسکریپت لازمه که تا حدودی با اون آشنایی قبلی داشته باشید
رویدادهایی برای تغییر اندازهی صفحه وجود داره و همچنین امکاناتی برای تشخیص مرورگر
اگر با این مفاهیم آشنا نیستید، آموزش دادن اونها زمان زیادی می‌بره و مطلبی نیست که در یک مقاله بشه اونا رو پوشش داد
اگر در اینترنت جستجو کنید مطمئنم نمونه کدهایی برای انجام این کار پیدا میشه که ممکنه لازم بشه بخش‌هایی را مطابق نیازهای خودتون ویرایش کنید.
یک بار دیگه عرض میکنم با توجه به درصد ناچیز سهم اینترنت اکسپلورر از بازار مرورگرها، طراحی یک سایت واکنشگرا برای این مرورگر کار منطقی نیست
بسیارعالی بود باتشکر
مطالب بسیار مفید و کامل بود بسیار ممنون
سلام
من فکر می کنم این همه آدمی که اینجا از شما تشکر کردند یک بار هم مطلب شما رو استفاده نکردند.اونها هم استفاده نکردند که هیچ شما خودتون هم یه بار اونو تست نکردین و فقط این مطلب رو از سطح وب کپی کردین.
سلام
در اینکه افراد مختلف این مطلب رو استفاده کردند یا خیر نظری ندارم و خود افراد باید پاسخ بدهند.
ولی در مورد خودم، حرف شما نادرسته و علاوه بر اینکه از این نوشته استفاده شده، مطلب دست اول هست و حتی ترجمه از مطالب انگلیسی هم نیست.
این مطلب و اغلب مطالبی که در وبلاگم درج میکنم، با پیش‌فرض‌هایی هست که خواننده باید تا حدودی اطلاعات پیش‌نیاز رو داشته باشه.
قطعا اگر پیش‌نیازهای لازم وجود نداشته باشه، مطالب غیرقابل استفاده خواهند بود.
مدیر عزیز نمیخام شما رو ناراحت کنم.اگر مطلب شمااگر درست بود سایت شما هم الان ریپانسیو بود
دلیلی برای ناراحتی وجود نداره
البته من نتونستم ارتباط منطقی بین نوشتن یک مقاله در مورد ریسپانسیو و ریسپانسیو بودن وبلاگم پیدا کنم.
ممنون از زحمتتان
لطفا بفرمایید سایتم که البته خودم با دریم ویور طراحی کردم را چگونه موبایل فرندلی کنم؟
با سلام
تبدیل یک سایت به Mobile Friendly یا Responsive همون طور که در نوشته‌ی بالا توضیح داده شده، به مراحل زیادی نیاز داره
و اولین قدم اینه که در ذهن خودتون تصور کنید اگر عرض صفحه کمتر باشه، مشتری چه محتوایی رو باید ببینه، چه محتوایی رو نباید ببینه و محتوایی که باید ببینه به چه شکلی باشه.
و مرحله‌ی بعد اینه که مطالعه‌ی خودتون رو در مورد طراحی سایت واکنشگرا افزایش بدید و تغییراتی که در مرحله‌ی قبل طراحی شده رو روی سایتتون پیاده کنید
اگر در این زمینه تجربه‌ای ندارید، و کسب و کار شما هم چیز دیگری است، شاید بهتر باشه که از یک نفر متخصص این کار کمک بگیرید
با تشکر
با سلام و خسته نباشید این مطلبتون خیلی خوب بود و خیلی استفاده کردم
با سلام و عرض ادب
خواستم تشکر کنم بابت مطالب خوب شما
لطفا به این رویه ادامه بدید و بیشتر مطالب بذارید.
تشکر
با سلام و تشکر از لطفا شما
در ضمن جهت اینکه شائبه‌ای پیش نیاید که خواسته باشید با درج کامنت،
تبلیغ سایت خودتان را بکنید، اسم سایتتان را به example.com تغییر دادم
مطالب شما خیلی مفید بود.
من در حال حاضر یک جدول بزرگ دارم ولی نمیدانم چگونه واکنش گرا باید کرد?
شما میتوانید من را راهنمایی کنید?
مرسی برای زحمتهایتان
با سلام
یکی از مشکلات اصلی در واکنشگرا کردن صفحات وب، جدول‌ها هستند. جدول‌ها به صورت پیش‌فرض امکان جابجایی را ندارند و در نتیجه شما باید از روش‌های جایگزین برای این کار استفاده کنید.
یکی از روش‌های مدرن، استفاده از سیستم flex به جای جدول است. در این روش هم امکان نمایش به صورت جدولی فراهم است و هم امکان تغییر ترتیب نمایش ستون‌ها از حالت افقی به عمودی فراهم است.
در حالت flexbox هنگام کم شدن عرض صفحه میتوانید علاوه بر تغییر حالت نمایش ستون‌ها، برخی از ستون‌ها را که اهمیت کمتری دارند، مخفی کنید.
در حالت نمایش جدولی هم با استفاده از جاوااسکریپت میتوانید برخی از ستون‌ها را از دید مخفی کنید تا جدول در عرض محدود مرورگر موبایل قابل نمایش باشد.
با تشکر
سلام و ممنون از مطالب مفید شما
من سایتم رو ریسپانسیو کردم و در همه مرورگرها درست عمل می کنه به جز IE که در اون اصلا ریسپانسیو نیست.خواستم ببینم ایراد از طراحی منه یا مرورگر IE؟
سلام و تشکر
نگارش‌های قدیمی IE از media پشتیبانی نمی‌کنند. برای در اختیار داشتن یک سایت responsive تنها با CSS باید پشتیبانی از مرورگرها را محدود کنید. درصد استفاده از نگارش‌های قدیمی IE بسیار کم شده است و کسانی که از این مرورگر استفاده می‌کنند با بسیاری از سایت‌های دیگر هم مشکل دارند بنابراین جای نگرانی وجود ندارد
اما بعضی از سایت ها هستند که در همین ورژن های قدیمی IE هم ریسپانسیو هستند. اونها از چه روشی استفاده می کنند؟
برای ریسپانسیو بودن در نسخه‌های قدیمی IE باید از جاوااسکریپت استفاده بشه که کار سخت‌تر خواهد شد و با توجه به مطالب گفته شده در قبل به صرفه نیست.
اگر سایت شما در نگارش‌های جدید IE هم به درستی ریسپانسیو نشده، حتما جایی کدها رو اشتباه نوشتید یا کدی نوشتید که برای IE قابل استفاده نیست
بدون دیدن کدها، پیدا کردن محل اشکال ممکن نیست
بسیار عالی. استفاده کردم
باسلام و احترام
مقاله جنابعالی هم به لحاظ اهمیت موضوعی وهم به لحاظ محتوایی دارای ارزش فوق العاده است لذا ضمن تشکر امیدوارم بیش از پیش تجربیات خودتان را در اختیار دیگران قرار دهید.لطف عالی مستدام.
با سلام و تشکر
جای خوشحالی است که مطلب مورد پسند شما بوده است
سلام
مطلب قوی بود – خدا خیرتون بده
با سلام برای تبدیل سایت به واکنش گرا غیر از مطالب فوق دیگه چه کارهایی باید انجام داد . با تشکر
با سلام
تمام مطالب کلی لازم در نوشته‌ی بالا وجود دارند ولی در هنگام اجرا همان طور که گفته شده به خلاقیت و تمرین و تجربه نیاز هست
سلام
با دریم ویور ccمیخوام سایت واکنش گرا درس کنم اما فقط ایکون pcوجود داره ایکون های تبلت و موبایل نیست میگه اینترنت و روشن کن روشنم میکنم میگه شما دسترسی نداری
مشکل کجاست؟
با سلام
سوال شما مربوط به طراحی سایت ریسپانسیو نیست و مشکلی است که در این نرم‌افزار خاص با آن مواجه هستید. متاسفانه در این مورد هم اطلاعی ندارم
با تشکر
با سلام برای سایت ورپرسی بهتره دستی این کار انجام شه یا با افزونه ممنون می شم پاسخ بدید
با سلام
ریسپانسیو کردن قالب وردپرس با افزونه امکان‌پذیر نیست و باید در طراحی قالب به انجام برسه
در ضمن به دلیل اینکه اسمتون رو اشتباه تایپ کرده بودید، نشانی سایتتون حذف شد
واقعا ممنون بابت اطلاعات جالبی که دادین من درباره viewport و موبایل زیاد چیزی نمیدونستم اما الان کاملا متوجه شدم که نقش اینها تو طراحی سایت چیه
واقعا باعث تاسفه که شرکت وب کندو در مورد viewport و موبایل چیزی نمی‌دونه و بدتر از اون اینکه برای تبلیغات اینترنتی کامنت‌های اسپم توی وبلاگ دیگران ارسال می‌کنه
باسلام
ممنون از پست خوبتون.
ممنون از توضیحات مفید و کاملتون