آموزش طراحی سایت واکنشگرا از اهمیت بالایی برخورداره و در واقع یه تکنیکی است که شما به عنوان یه توسعه دهنده وب یا یه طراح وب باید کاملاً درباره‌ش آموزش ببینین. امروزه یه وبسایت نباید فقط روی دسکتاپ خوب به نظر برسه بلکه لازمه با تبلت، موبایل و هر وسیله دیگه‌ای هم سازگاری داشته باشه. ما به طراحی سایتی که تو هر صفحه‌ای با هر طول و عرضی قابل استفاده باشه، اصطلاحاً طراحی واکنش گرا یا Responsive Web Design میگیم.
هدف ما ایجاد یه سایت است که از همه نظر، تصاویر، ویدئو، صفحه و غیره ریسپانسیو باشه.
تو این پست قراره بهتون نشون بدم چطوری به راحتی و با روش‌های عالی طراحی سایت ریسپانسیو انجام بدین:
1. Layout صفحه آرایی
هنگام طراحی سایت واکنشگرا جدبد یا تبدیل یه سایت معمولی به سایت ریسپانسیو ، اولین چیزی که باید بهش توجه کنین Layout یا آرایش صفحه‌هاته!
من خودم وقتی آموزش طراحی سایت ریسپانسیو رو بر عهده میگیرم، همیشه آموزش رو با ایجاد یه طرح پیش فرض و ثابتی که non-responsive هست شروع میکنم مثلاً یه عرض ثابت 1100px در نظر میگیرم.
حالا اگه از این layout غیر ریسپانسیو که ساختم راضی بودم، شروع به اضافه کردن کوئری های مدیا و ایجاد تغییرات کم در CSS میکنم تا یه سایت واکنشگرا بسازم.
وقتی کارمون با non-responsive layout تموم شد، اولین کاری که باید انجام بدیم اینه که لاین های رو در تگ های HTML صفحه موردنظر قرار بدیم.
این کار باعث میشه تو همه صفحات نمایی با نسبت تصویر 1*1 داشته باشین و عملکرد پیش فرض رو از آیفون‌ها و بقیه گوشی‌های هوشمند که وب سایت ها رو به صورت کامل ارائه میدن، حذف میکنه و به کاربر امکان میده تا با ضربه روی صفحه بتونه زوم کنه!
Media Queries
حالا وقت اضافه کردن کوئری های مدیاست! طبق سایت W3C، کوئری های مدیا از نوع رسانه و صفر یا عبارات بیشتریه که شرایط رو برای یه سری ویژگی‌های خاص رسانه بررسی میکنن. با استفاده از کوئری مدیا، نمایش‌ها میتونن با یه طیف خاصی از دستگاه‌های خروجی بدون تغییر محتوا، متناسب بشن!
به عبارت دیگه مدیا کوئری به سایت شما اجازه میده تا تو هر نمایشگری از گوشی‌های هوشمند گرفته تا بزرگ‌ترین اسکرین‌ها خوب به نظر برسن. این همون چیزیه که ما بهش میگیم طراحی سایت واکنشگرا .
کد Media Queries
مدیا کوئری ها به صفحه آرایی یا همون Layout صفحه تون بستگی دارن! بنابراین یکم برام سخته که بخوام اسنیپت کد آماده بهتون تحویل بدم. البته کد زیر یه نقطه شروع خوبی برای اکثر وبسایت ها میتونه باشه. تو این مثال قسمت Primary منطقه محتوای اصلی و قسمت Secondary منطقه سایدبار به حساب میاد!
با یه نگاه کلی روی کد متوجه میشین که من دوتا سایز مختلف رو تعریف کردم: اولین سایز حداکثر عرضش 1060px است و برای صفحه نمایش تبلت‌های افقی طراحی شده.
و دومین سایز برای تبلت‌های معمولی و کوچیک‌تر طراحی شده، (با توجه به سایز صفحه کوچیکی که تلفن‌های هوشمند دارن).
همونطوری که قبلاً هم گفته بودم، احتمالاً شما باید این کد رو یکم تطبیق بدین تا نیازهای خاصی که سایت تون داره با اون هماهنگ و متناسب باشه. اون رو تو فایل .css الحاقش کنین.
/* Media Queries: Tablet Landscape */ @media screen and (max-width: 1060px) { #primary { width:67%; } #secondary { width:30%; margin-left:3%;} } /* Media Queries: Tabled Portrait */ @media screen and (max-width: 768px) { #primary { width:100%; } #secondary { width:100%; margin:0; border:none; } }
بعد از این که این کار تمام شد بهتره چک کنین و بینینین طرح شما چقدر ریسپانسیو بوده. برای انجام همچین کاری من از یه ابزار عالی که توسط Matt Kersley ساخته شده استفاده میکنم تا ببینم طراحی سایت واکنشگرا که انجام دادم موفقیت آمیز بوده یا نه. البته شما می‌تونین نتیجه رو دستگاه تلفن همراه خودتون هم مشاهده کنین.
2. مدیا
برای اولین قدم آموزش طراحی سایت ریسپانسیو ، بهتون طراحی صفحه ریسپانسیو رو توصیه کردم و یادتون دادم. اما الان دیگه باید توجهمون رو سمت جنبه‌های مهم و مدرن سایت واکنشگرا معطوف کنیم و ریسپانسیو کردن اون‌ها رو یاد بگیریم که شامل: رسانه‌ها، فیلم‌ها و تصاویر میشه.
من تو مقاله قبلی براتون درباره سایت ریسپانسیو و رتبه گرفتنش در گوگل توضیحات کاملی دادم و امیدوارم که شما با مطالعه اون متوجه شده باشین که وجود محتوای ریسپانسیو چقد تو طراحی سایت واکنشگرا به ما کمک میکنه!
تصاویر
کد CSS زیر بهتون اطمینان میده که تصاویر شما هرگز بزرگتر از کانتینر والد نخواهد بود. این کار خیلی ساده‌ست و برای اکثر وب سایت های ریسپانسیو هم جواب میده. برای عملکرد صحیح و مورد قبول، این کد باید تو استایل شیت CSS شما وارد بشه.
img { max-width: 100%; height: auto; }
درسته که کدی که در بالا براتون نوشتم بسیار کارآمده ولی شاید گاهی اوقات شما نیاز به کنترل بیشتری روی تصاویر داشته باشین و بخوایین یه تصویر خاصی که با اندازه نمایشگر مشتری منطبق هست نشون بدین.
این‌جا یه تکنیک توسعه یافته توسط Nicolas Gallagher براتون دارم، بیایین با html شروع کنیم.
همونطور که می‌بینین ما از ویژگی‌های داده استفاده کردیم تا URL های تصاویر جایگزین رو ذخیره کنیم. حالا اجازه بدین تا از قدرت کامل CSS3 برای جایگزینی تصویر پیش فرض با یکی از تصاویر جایگزین مشخص شده استفاده کنم، اگه شرایط Min-device-width مطابقت داشته باشه:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
فیلم‌ها
تا این جای کار آموزش طراحی سایت ریسپانسیو عالی بود مگه نه؟ حالا بهتره یه نگاهی به رسانه‌های مهم دیگه تو وبسایت های امروزی داشته باشیم،: فیلم‌ها!!
اکثر وبسایت های امروزی از فیلم‌های سایت های شخص ثالث مثل یوتیوب YouTube یا Vimeo استفاده میکنن، برای همین من هم تصمیم گرفتم تا روی تکنیک‌‌های ویدئویی انعطاف پذیر یا الاستیک تمرکز کنم، این تکنیک بهتون اجازه میده تا ویدئوهای کار گذاشته رو تبدیل به ویدئو ریسپانسیو کنین، کد CSS:
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
به محض این که این کد رو وارد سایت تون کنین، تمام ویدئوهای سایت تبدیل به ویدئو ریسپانسیو میشن!
3. تایپوگرافی
تایپوگرافی یا Typography آخرین مرحله از این آموزشه که قطعاً یه قسمت مهمه ولی متاسفانه توسعه دهندگان سایت های واکنشگرا معمولاً بهش بی‌توجهی میکنن و این مورد رو نادیده میگیرن. تا همین اواخر هم توسعه دهندگان محترم برای تعریف اندازه فونت از پیکسل‌ها استفاده میکردن. در حالی که پیکسل ها وقتی گزینه مناسبی هستند که وبسایت شما یه عرض ثابت داشته باشه، پس با این حساب من برای آموزش طراحی سایت واکنشگرا بهتون میگم که باید فونت ریسپانسیو هم داشته باشین.
سایز فونت وبسایت شما باید با عرض کانتینر والد مرتبط باشه.، پس میتونه با نمایشگر مشتری تنظیم بشه و خیلی راحت روی گوشی موبایل خونده بشه!
مشخصات CSS3 شامل یه بخش جدید به اسم rems است که تقریباً با واحد em بطور یکسان کار میکنن و تفاوت چندانی ندارن اما چیزی که مهمه اینه که این واحد rem ها به عناصر html هم مربوط هستند که همین ویژگی استفاده از اون‌ها رو خیلی راحت‌تر از استفاده از ems میکنه!
از اون‌جایی که rem ها با عناصر html مرتبط هستند، یادتون نره که سایز HTML ها رو مجدداً تعیین کنین:
html { font-size:100%; }
پس از انجام این کار، می‌تونین اندازه‌های فونت ریپسپانسیو سایت تون رو تعریف کنین، مثل نمونه زیر:
@media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
آموزش طراحی سایت واکنشگرا
برای ایجاد یه وبسایت خوب ریسپانسیو باید سه تا مرحله‌ای که در بالا براتون توضیح دادم به خوبی اجرا بشه، چه برای یه سایت جدید و چه اعمال تغییرات روی یه سایتی که از قبل موجوده، علاوه بر این چیزایی که تا الان گفتم، به طور خلاصه بهتره حواستون به موراد زیر هم باشه:
- هدفمند کردن محتوای حیاتی
- طراحی حداقل سه مدل صفحه: کوچک زیر 600 پیکسل، متوسط بین 600 تا 900 و بزرگ بیشتر از 900 پیکسل.
- متا تگ های ریسپانسیو رو در سند HTML وارد کنید.
- کوئری های مدیا رو در Layout اعمال کنین.
- تصاویر و ویدئوهایی که از قبل موجوده رو ریسپانسیو کنین.
- مطمئن بشین که تایپوگرافی شما تو تلفن های همراه قابل خوندنه!
- تجربه کاربری درجه یک.
- تصاویر انعطاف پذیر.
- ناوبری یا Navigation خوب.
طراحی یک سایت کاملاً ریسپانسیو چه ویژگی‌هایی داره؟
آموزش طراحی سایت ریسپانسیو یه تکنیکی است که باید توسط افراد متحخصص به شما یاد داده بشه و این نوع طراحی تضمین میکنه یه صفحه وب به راحتی روی هر دستگاهی نمایش داده میشه و تجربه کاربری با کیفیت و خوبی رو چه تو دستگاه‌های قدیمی و چه دستگاه‌های مدرن ارائه میده.
باتوجه به سهم زیادی که هر گوشی هوشمندی تو سرچ روزانه دراه، اجباریه که سایت شما بتونه تو هر اندازه‌ای به خوبی قابل نمایش باشه و مشکلی تو ارائه محتوا برای سایت پیش نیاد! این سازگاری باعث افزایش ترافیک و برتری شما نسبت به سایر سایت ها میشه.
در کل، برای آموزش طراحی سایت ریسپانسیو که روی تلفن همراه خوب جواب بده میتونم سه تا اصل مهم رو بهتون بگم:
- شبکه های روان: پایه و اسا طراحی سایت واکنشگرا، طرح بندی مبتنی بر شبکه‌های انعطاف پذیره. سعی کنین از اندازه‌های نسبی استفاده کنین تا سایت شما با همه دستگاه‌های خروجی متناسب باشه. ممکنه کلمه شبکه یکم گیج کننده باشه چون این‌جا لازم نیست که هر نوع چارچوب شبکه‌ای اجرا بشه و این رویکرد بر اساس درصد پیسکل‌های خروجیه. سایت واکنشگرا از رویکردهای مبتنی بر پیکسل دوری میکنه!
- مدیا کوئری ها: کوئری های رسانه میتونن تشخیص بدن که چه دستگاهی به سایت شما وصل شده و با توجه به اون، اندازه مرورگر رو تنظیم میکنن. برای دیدن چگونگی این عمل، پنجره مرورگر خودتون رو در ابعاد مختلف بکشین و ببینین که اون با صفحه تنظیم میشه (اگه تنظیم نشد یعنی سایت تون واکنشگرا نیست).
- تصاویر و رسانه‌های انعطاف پذیر: این ویژگی بهتون این امکان رو میده تا تصاویر و سایر رسانه‌ها رو به صورت متناسب با دستگاه با توجه به ویژگی‌های CSS استفاده کنین و باید بگم که مقیاس بندی تو CSS بسیار راحته. می‌تونی حداکثر عنصر رو 100 درصد در نظر بگیرین که در این صورت باتوجه به اندازه صفحه مرورگر، کوچک و بزرگ میشه.
چرا باید سایت واکنشگرا داشته باشیم؟
بدون داشتن سایت واکنشگرا شما باید هزینه زیادی رو برای ساختن دو تا سایت پرداخت کنین تازه علاوه بر این نداشتن یه سایت ریسپانسیو برای کاربران شما هم سخته چون این طوری نمی‌تونن رو هر دستگاهی که دلشون میخواد سایت رو باز کنن و هر دفعه که وارد سایت شما بشن با اسکرول کردن یا زوم کردن صفحه مشکل پیدا میکنن.
یه مورد مهمی که من بخاطرش تصمیم گرفتم مقاله‌ای درمورد آموزش طراحی سایت واکنشگرا بنویسم این بود که این جور سایت ها شانس زیادی برای دیده شدن تو موتورهای جستجو دارن و تازه گوگل سایت هایی که ریسپانسیو نباشه رو جریمه میکنه چون خیلی براش مهمه که کاربر یه تجربه کاربری خوبی داشته باشه پس اگه یه موقع وبسایت معمولی و ریسپانسیو نشده دارین باید بهتون بگم که سریعاً دست به کار شین وگرنه کاربر بیشتری از دست میدین و ممکنه موتورهای جستجو هم جریمه‌تون کنن.
چطوری یه سایت وردپرس واکنشگرا طراحی کنم؟
برای آموزش طراحی سایت ورد پرس واکنشگرا دقیقاً باید همین مراحل رو طی کنین و تو اصل کار هیچ تفاوتی وجود نداره و یا این که شما می‌تونین از قسمت خدمات و مشاوره سایت ما، با متخصصان و طراحان ما صحبت کنین و ازشون راهنمایی بگیرین!
