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

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

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

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

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

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

گام اول : طراحی با پهنای ثابت

تا این چند سـال پیش، (و به علـت محبوبیت windows ایکس پی) رزولوشن صفحه نمایش اکثر کاربران روی 800×600 تنظیم بود و سایتها نیز برای مطابقت با این حد طراحی می شدند. کسانی هم که مانیتور  بزرگتری داشتند، می توانستند سایت را به درستی مشاهده نمایـند و تنها کمی فضای خالی در کناره های سایت می‌دیدند. کمی گذشت و با گسترش ویندوز7 که رزولوشن مانیتورها افزوده شدن پیدا کرد، سایز 1024×768 به سایز استاندارد برای طراحی رابط کاربری صفحات وب مبدل شد. در این زمان اغلب پهنای صفحات وب، سایز ثابتی داشت.

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

گام دوم : طراحی شناور (fluid)

کم کم طراحان برای سازگار کردن سایز سایت با سایز صفحه به شیوه شناور  (fluid) روی آوردند. در این شیوه width ستون های سایت بجای واحد پیکسل با واحد درصد معیـن میشد و هرچه کاربر عرض مرورگرش بزرگتر بود، ستون های سایت را نیز با پهنای زیادتری مشاهده می کرد. (طراحی شناور در اصل کوشش ی بود برای هماهنگ سازی سایت با پهنای مرورگر کاربر و احتمالا بتوان ریشه طراحی ریسپانسیو را، طراحی شناور عنوان کرد.) با گسترش سخت افزارها و روند رو به پیشرفت لپ تاپ ها کم کم سایز 1366×768 جای سایز قبلی را گرفت. ولی هنوز میشد با بهره گیری از طراحی شناور، سایتهای قابل قبولی برای پهنای صفحه 800 پیکسل تا 1366 پیکسل طراحی کرد.

گام سوم: ظهور موبایلها و صفحات کوچک

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

این شیوه هنوز هم در بعضـی مسائـل بهره گیری می شود و کاربردی می باشد. در این شیوه ، دو استـایل مجزا برای سایت طراحی میگردد. برای راهنـمای کاربر هم از user-agent مرورگر کمک گرفته می شود . برای مثال چنان چه سیستم علت کاربر سیمبیان یا آی وی اس یا اندروید بود، کاربر را به صفحه تلفن همراه منتقل می کنیم و چنان چه سیستم علت windows یا مک یا لینوکس بود، وی را به صفحه معمولی سایت می فرستیم. مزیت این شیوه این است که در ورژن تلفن همراه سایت، می توان اکثر قسمـت هایی را که ضـروری نداریم پاک کنیم تا صفحه سبک تر شود. ضمناً مدیریـت زیادتری در طراحی ورژن تلفن همراه داریم . چون از پایه کلیه المان ها را چیدمان می کنیم. ولی هزینه طراحی دو قالب، برای کمپانـی های کوچک به صرفه نیست.

کمپانـی های اینترنتی بزرگ (مثل گوگل، یاهو، فیسبوک) اغلب به این علـت ش بهره گیری مینمایـند . چون تعداد کاربر آنان روی هر ورژن سایت، آنقدر زیاد است که طراحی دو یا سه استـایل مجزا برای دستگاه های گوناگون، اصلا هزینه قابل توجهی به حساب نمی آید و ارزش دارا بودن رابط کاربری اختصاصی و مناسب را دارد.

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

گام چهارم: طراحی سایت ریسپانسیو، انقلابی در طراحی رابط کاربری

با افزوده شدن سرعت دسترسی تلفن همراه و ظهور تکنولوژی 3G و 4G ، اکثر کاربران بجای کامپیوتر ، از تلفن همراه یا تبلت خود برای گشت و گذار در وب بهره گیری مینمایـند . و متعاقبا دارندگان سایتها نیز ترجیح میدهند سایت آنان در تلفن همراه و تبلت هم قابل بهره گیری باشد. در این وقـت (حول و حوش 2010) اکثر کاربران نیز از مرورگرهای مدرن بهره گیری مینمایـند که تا میزانی CSS را حمایت می کند . ضمناً در تلفن همراه و تبلت ها، به علـت ظهور دیروقت آنان در عرصه وبگردی، اکثرا مرورگرهای جدیدی وجود دارد که از مدیاکوئری های CSS به خوبی حمایت می کند . اینگونه شد که طراحان تصمیم گرفتند تا بجای تعریف یک CSS برای چیدمان هر صفحه، از چندین فایل CSS کمک بگیرند تا بتوانند جای المان ها را در سایزهای مختلـف صفحات و مرورگرها تغییر دهند.

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

طراحی ریسپانسیو آنقدر پرطرفدار شد که در سـال 2012 رتبه دوم در میـان روشهای پرطرفدار طراحی را به خود اختصاص داد و در سـال 2013 مجله محبوب ماشابل، سـال 2013 را سـال طراحی واکنشگرا نامید.

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

گام پنچم: ظهور فریم ورک های ریسپانسیو

با گسترش طراحی ریسپانسیو، شرکتها و تیـم های نرم افزاری، ابزارها یا فریم‌ورک هایی برای تسریع طراحی ریسپانسیو عرضه کردند. از آنجایی که اکثر طرح های ریسپانسیو می بایست در سه سایز دسکتاپ، تبلت و تلفن همراه اجرا شوند، این فریم‌ورک‌ها نیز روی این سه سایز زوم کرده اند. یک فریمورک اغلب حاوی یکسری CSS از پیش تعریف شده است زمان طراحی، شما بجای تعریف class های جدید، از نام های کلاس های این فریمورک ها بهره گیری مینمایید . محبوب ترین فریمورک های موجود بوت استرپ و فاندیشین می باشند .

گام ششم : زبان اسکریپت نویسی در CSS

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

گاهی در طراحی المان های شناور صفحه یا در طراحی سایت ریسپانسیو، ما نیازمند این هستیم که حد یک المان را با جمع و تفریق از حد یک المان دیگر به دست بیاوریم یا یک شماره رنگ را بصورت متغیر تعریف کنیم و سپس آنرا در جاهای مختلـف فایل CSS به کار بریم. یکـی از مـوارد CSS این است که توانایی تعریف متغیر و انجام عملیات ریاضی میـان المانها ندارد. اینگونه بود که زبان اسکریپتی SASS  و ضمناً LESS برای تغییر حد المانها و تعریف متغیر و با امکانات محدود برنامه نویسی به CSS اضافه شد. حالا دست طراحان برای کدنویسی بازتر است و قالبهای واکنشگرای قدرتمندتری را می توانند تهیه نمایـند .

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