نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید

رتبه این آیتم
نکاتی که شما می بایست در مورد طراحی وبسایت های ریسپانسیو بدانید
رتبه 4 در 3 رای از 1 تا 5

تاریخچه طراحی وب سایت ریسپانسیو به سال 2010 بر می گردد که از آن زمان این نوع سایت ها پا به عرصه ظهور نهاد. اما در طول این سه سال تغییراتی در طراحی سایتهای ریسپانسیو که توسط طراحان وب انجام میگرفت به وجود آمد. در بخش زیر می توانید مقاله به زبان اصلی را ار سایت ویکی پدیا در خصوص این نوع سایت ها مطالعه نمایید.

طراحی ریسپانسیو امروزه بسیار گسترش پیدا کرده که به دلیل استفاده بسیار و در حال افزایش کاربران از موبایل و تبلت برای رویت وب سایت می باشد. طبق این منبع در سال 2012 55% از کاربران در سال 2012 از موبایل برای مرور وب استفاده می کرده اند و 31 درصد از کاربران اذعان داشتند که وسیله پیش فرض مرور وبشان موبایل می باشد. پس در صورتی که در مورد طراحی وب سایت ریسپانسیو سوالی دارید ادامه دهید.

طراحی ریسپانسیو چیست؟

قبل از همه باید بدانید وب سایت ریسپانسیو و یا واکنش گرا چیست. وب سایت واکنش گرا وب سایتی است که خود را سازگار با سایز صفحه نمایش کاربر می سازد. به دلیل استفاده بسیار از تبلت و مرورگرهای موبایل برای مرور وب طراحان وب مجبور شدند سایت را به گونه ای طراحی نمایند که در صفحه کوچک موبایل به خوبی نمایش داده شود. به همین دلیل از media queries استفاده شد تا سایر دستگاه کاربر را مشخص نماید و از تصاویر و صفحه بندی انعطاف پذیر در سایزهای مختلف استفاده شد.

طراحی ریسپانسیو به معنی سایت نسخه موبایل نیست

برای برخی سایت ها به صورت جداگانه نسخه ای برای موبایل طراحی می گردد و زمانی که کاربر با موبایل سایت را مشاهده می نماید به آدرس دیگری هدایت می شود که نسخه مخصوص موبایل وب سایت می باشد. ولی در طراحی ریسپانسیو کاربر سایت را در همان آدرس و با ترکیب مناسب موبایل مشاهده می نماید و کاربر به آدرس دیگری ارجاع داده نمی شود. که بر طبق نظر گوگل طراحی ریسپانسیو بهترین نوع برای ایجاد نسخه سازگار با موبایل وب سایت است.

جعبه های شناور

جعبه ها و یا باکس های شناور به پیاده سازی سایت ریسپانسیو کمک می نماید. به این صورت که صفحه به ستون های مختلف شناوری تقسیم می گردد و زمانی که عرض صفحه کوچک شده ستون ها بر روی هم حرکت می نمایند و کاربر کافی است در صفحه اسکرول عمودی نماید تا کلیه مطالب را مطالع نماید. المان هایی از صفحه که در حالت عادی عرض بیشتری دارند با توجه به تغییر عرض صفحه تغییر سایز می کنند تا در عرض مورد نظر بدون نیاز به اسکرول افقی یه خوبی نمایش داده شوند.

تصاویر و فونت ها نیز می بایست ریسپانسیو باشند

استفاده از تصاویر در سایت ریسپانسیو به خودی خود آنها را ریسپانسیو نمی نماید. توسط برخی از کتابخانه ها نظیر Bootstrap می توان این کار را به صورت اتوماتیک انجام داد. برای فونت ها نیز می توان از rems  به جای px استفاده نمود. با تعیین سایز فونت صفحه به صد درصد

html {font-size: 100%;}

می توانید از استفاده نمایید تا سایز فونت ها را مطابق با عرض صفحه تعیین نماید.

@media (max-width: 640px) {body {font-size: 1.2rem} } @media (max-width: 1100px) {body {font-size: 1.5rem} }

استفاده از فریم ورک ها همه چیز را ساده می سازد

در دنیای ریسپانسیو فریم ورک هایی وجود دارند که با استفاده از آنها می توانید لایه بندی و قالب سایت خود را طراحی نماید. در حقیقت قالب هایی هستند که موارد پیش فرض در آنها رعایت گردیده و شما مطمئن خواید بود که سایت شما با مرورگرهای مختلف سازگاری کامل دارد. برخی از این فریم ورک ها به وصورت کامل طراحی شده اند و می توانید با تغییرات کوچکی در آن قالب مورد نظر خود را پیاده سازی نمایید. در زیر چند نمونه را برای شما آورده ام:

ایمیل ها نیز می توانند ریسپانسیو باشند

با توجه به افزایش استفاده از موبایل برای چک کردن و بررسی ایمیل، ایمیل های ارسالی نیز می بایست در موبایل ظاهر مناسبی داشته باشند. می توان با استفاده از استفاده از المان های خاصی ایمیل را نیز ریسپانسیو و سازگار با عرض صفحه نمود. همچنین می توان با استفاده از امکان جعبه های شناور و بدون استفاده از کتابخانه خارجی ایمیل های ریسپانسیو طراحی نمود.

جهت هر گونه مشاوره در زمینه طراحی و ساخت وب سایت ریسپانسیو و سازگار با موبایل با دارکوب تماس حاصل فرمایید.


نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

1 نظر

  • طراحی وبسایت یکشنبه, 01 آذر 1394 10:00 پست شده توسط طراحی وبسایت

    mofid bud merc

يک نظر بدهيد

موارد ستاره دار الزامی هستند

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد