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

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

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

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

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

 

 

آشنایی با طراحی سایت واکنش گرا

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

 

 

آموزش طراحی سایت ریسپانسیو

در ادامه آموزش ساخت سایت ریسپانسیو را برای شما شرح می دهیم  .

برای مطالعه این آموزش ، به این نکته دقت نمایید که نخست باید با برنامه نویسی قالب سایت ، زبان Html 5 و Css3 کاملا آشنا باشید و قبلا بر روی طراحی وب سایتی با این ویژگی ها کار کرده باشید .

 

در نظر می گیریم که هم اکنون شما سایت و قالب خود را به صورت  Div Tag  طراحی کرده اید و علاقه مند هستید این سایت را به 1 سایت ریسپانسیو ارتقاء دهید.

 

در مرحله نخست کد زیر را به تگ هدر خود اضافه کنید که به مرورگر دستور می دهد که صفحه را به اندازه  واقعی نمایش دهدبرای مثال در تبلتی با عرض 768 پیکسل در کلیه مرورگرها و رزولوشن ها در همین سایز نمایش داده می شود که باعث اسکرول افقی خوردن سایت در آن تبلت می شود:

<meta name="viewport" content="width=device-width">

سپس در نظر بگیرید که میخواهید سایت شما در 2 سایز مختلف واکنش نشان دهد  . برای مثال در سایز 1024 به بالا و همچنین نمایش گرهای زیر سایز 1024 پیکسل .برای این کار 2 فایل سی اس اس جداگانه تعریف می کنیم و به قالب Html اضافه میکنیم .

 

<link href="tem1.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />

<link href="tem2.css" rel="stylesheet" type=" only screen and (min-width: 0px) and (max-width: 1024px)/>

 

فایل CSS اول برای رزولیشن های 1024 به بالا است و دومی برای رزولیشن های پایین تر .

 

برای مثال در ساخت باکسی که در سی اس اس اول تعریف شده مثلا برای هدر سایت میتوانید عرض هدر برای جایگاه نمایش لوگو و ... را مثلا 980 پیکس تعریف کنید و در فایل دوم همان باکس را یا با درصد و یا با سایز مثلا 700 پیکسل تعریف نمایید .

 

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

 

همچنین این نکته را در نظر بگیرید که میتوان در ابعاد کوچکتر و با استفاده از خاصیت display:none در فایل CSS در ابعاد کوچکتر مانند موبایل و ... برخی باکس ها را حذف نمود تا تمرکز کاربر بر روی بخش های اصلی باشد و حتی الامکان اسکرول سایت به حداقل برسد .

 

 

سایزهای استاندارد طراحی سایت ریسپانسیو

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

ابعاد طراحی سایت موبایل

320*480 پیکسل

360*640 پیکسل

ابعاد طراحی سایت تبلت و دسکتاپ

1024*768 پیکسل

ابعاد طراحی سایت دسکتاپ

800*1280 پیکسل

980*1280 پیکسل

1280*600 پیکسل

1290*900 پیکسل

 

 

راه های دیگر ساخت سایت ریسپانسیو

روش آموزش داده شده برای طراحی سایت ریسپانسیو در این مقاله ، ساده ترین راه ساخت سایت ریسپانسیو است . برای ساخت و طراحی سایت ریسپانسیو کاملا حرفه ای ،روش های پیچیده تری وجود دارد که برای مثال می توان به تعریف کلیه سایزها برای هر باکس در ابعاد مختلف در 1 فایل Css واحد اشاره نمود .

در این روش 1 باکس بسته به سایز های مختلف در همان فایل سی اس اس دستوردهی واکنش های مختلف را می پذیرد . در صورت انجام درست و حرفه ای این روش ها ، ریسپانسیو سازی تنها به ابعاد استاندارد محدود نبوده و حتی می تواان در ابعادی که کمتر استفاده می شود نیز سایت را کاملا صحیح و بدون مشکل دید .

 

برای مثال دستور ذیر که در فایل سی اس اس قرار می گیرد را مشاهده نمایید :

@media (max-width: 1150px) { .resp{display:none;}}

 

در این دستور به مرورگر دستور داده می شود که در صورتی که عرض دستگاه نمایش دهنده سایت بیشتر از 1150 پیکسل باشد آیتمی که کلاس .resp را دارد حذف نماید ،اما در سایز هایی با عرض کوچکتر آیتم را نمایش دهد.

 

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

 

 

روش های تست و آزمایش سایت ریسپانسیو

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

برای مطالعه در این زمینه بر روی لینک ذیل کلیک کنید :

چگونه سایت ریسپانسیو را چک کنیم؟ 

 

 

سخن آخر با سفارش دهندگان طراحی سایت ریسپانسیو

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

 

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

انتشار این مطلب در Facebook انتشار این مطلب در Twitter انتشار این مطلب در گوگل پلاس

اطلاع رسانی

درخواست مشاوره و سفارش

مطالب مرتبط

طراحی سایت طراحی وب سایت سئو وب سایت بهینه سازی سایت طراحی مالتی مدیا طراحی سایت ریسپانسیو

تماس با ما

شماره های تماس ۴۴۸۵۲۸۲۳ ۰۲۱ و ۴۲۷۰۷۸۵ ۰۹۳۹
با کلیک بر روی دکمه های ذیل و پر کردن فرم میتوانید به صورت آنلاین پیغام خود را برای ما ارسال نمایید.

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

بالا