طراحی سایت ریسپانسیو چیست؟
طراحی سایت ریسپانسیو چیست؟
شاید کلمه طراحی وب سایت ریسپانسیو (Responsive web design) را شنیده باشید و حتما می خواهید بدانید معنای آن چیست؟ به عبارت دیگر ریسپانسیو بودن یک وب سایت یا همان “واکنشگرا بودن” یعنی چه؟
همان طور که می دانید استانداردهای طراحی وب سایت های اینترنتی هر چند سال یکبار به روز میشوند و تکنیک ها و روش های جدیدی ارائه می شوند که هر کدام به نوعی به دنیای طراحی سایت کمک شایانی می کنند. وب سایت های اینترنتی از اوایل دهه 1990 که طراحی و برای استفاده جهانی در اختیار مردم قرار گرفتند، در ابتدا صرفا برای دیده شدن از طریق کامپیوتر بودند.
چرا طراحی سایت ریسپانسیو بوجود آمد؟
یعنی شما هنگام کار با کامپیوتر و زمانی که از طریق مودم (Modem) ، به شبکه اینترنت وصل می شدید، از طریق نرم افزارهای “مرورگر” (web browser) می توانستید به وب سایت های اینترنتی و امکانات آنها دسترسی داشته باشید. در آن زمان دسترسی به شبکه اینترنت فقط از طریق کامپیوتر امکان پذیر بود. اما به مرور زمان و عرضه موبایل های جدیدتر و پیشرفته تر و همچنین ورود سخت افزارها و دستگاه های جدیدی مانند “تبلت” (Tablet) به بازارها، کم کم بسیاری از مردم از آنها استفاده و خوشبختانه این ابزارها به مرور تکنولوژی های بکار رفته در آنها قویتر و بهتر شد تا جایی که شما از طریق آنها می توانستید بدون نیاز به استفاده از کامپیوتر و لپ تاپ، به اینترنت و وب سایت ها، دسترسی داشته باشید.
اما مشکلی در این میان وجود داشت، آن هم اندازه قاب وب سایت ها بود. بطور سنتی، تکنیک ها و روش های طراحی وب سایت از دهه 1990 صرفا برای نمایش آنها بر روی صفحه مانیتور کامپیوترها بود. ولی به مرور زمان که امکان دیدن وب سایتها از طریق تبلت و موبایل هم فراهم شد، وضعیت عوض شد و با توجه به اینکه طول و عرض صفحه نمایش این وسایل از مختصات طول و عرض مانیتور لپ تاپ و کامپیوتر بسیار کمتر است، برای اینکه بتوان یک سایت را براحتی در آنها دید باید طراحی سایت برای این دستگاه ها هم صورت بگیرد.
تست ریسپانسیو بودن سایت چگونه انجام می شود؟
به این دلیل روش های طراحی سایت ریسپانسیو استاندارد شده و سپس عرضه شدند تا طراحان وب بتوانند به بهترین نحو ممکن طراحی برای این دستگاه ها و گجت ها هم انجام بدهند. به این ترتیب یک وب سایت، یک بار طراحی می شود ولی شما براحتی می توانید آنرا هم زمان بر روی لپ تاپ، تبلت، موبایل و یا سایر گجت ها، ببینید و جالب اینجاست که بر روی هر یک از آنها، هم متناسب با سایز صفحه نمایش آن دستگاه به نمایش در می آید.
برای اینکه بدانید وب سایت شما ریسپانسیو است یا به معنای دیگر در هر اندازه صفحه نمایش به درستی نمایش داده می شود می توانید مقاله تست ریسپانسیو بودن سایت را مطالعه نمایید.ضمنا لازم به ذکر است ریسپانسیو بودن سایت با موبایل دوست بودن سایت – Mobile Friendly – متفاوت است
خوب تا اینجا فهمیدیم که حالت ریسپانسیو چیست ولی بد نیست در زمینه تاریخچه آن هم بدانید:
تاریخچه طراحی سایت ریسپانسیو:
گفته می شود نخستین وب سایتی که به صورت ریسپانسیو طراحی شده و بر روی وب رفت، سایت شرکت خودروسازی آئودی آلمان بود Audi.com که در اواخر سال 2001 ، توسط شرکت Razorfish طراحی و آماده شد. در آن زمان طراحی این سایت به گونه ای انجام شد تا در هر یک از حالت های نمایش توسط مرورگرهای معروف و پر کاربرد آن زمان مانند اینترنت اکسپلورر و یا نت اسکیپ، متناسب با آن از روی Server ، حالت طراحی شده به نمایش گذاشته شود.
طی دهه سالهای 2000 میلادی به مرور استانداردها و اصطلاحات رایج ریسپانسیو مانند “flexible” ، “liquid” ، “fluid” ، “elastic” کم کم مورد استفاده قرار گرفتند و از طرف دیگر با ورود تکنیک های Media query در استاندارد CSS3 در سالهای 2008 و 2009 اولین گامهای جدی برای ریسپانسیو شدن وب سایت ها در سرتاسر جهان برداشته شد.
سپس برای نخستین بار عبارت “طراحی سایت رسپانسیو” (responsive web design) توسط “Ethan Marcotte” در مقاله ای در سال 2010 ، بکار گرفته شد. در مقاله فوق از این اصطلاح جهت نمایش برخی از المان های مهم وب سایت استفاده شد.از جمله مربوط به ظاهر وب (Layout) در این حالت شامل media query ها و عکس های انعطاف پذیر در سایزهای مختلف نمایش (flexible images) و نمایش گریدها بصورت گسترده (fluid grid). وی درسال 2011 کتابی تحت همین عنوان نوشت که بسیار معروف شد و مورد توجه کارشناسان و طراحان وب قرار گرفت.
کم کم طراحی ریسپانسیو آنقدر گسترش پیدا کرد که در سال 2013 ، از طرف وب سایت معروف “Mashable ” این سال به عنوان “سال طراحی سایت ریسپانسیو” (the Year of Responsive Web Design) لقب گرفت.
ریسپانسیو کردن سایت با استفاده از بوت استرپ و مدیا کوئری
امروزه بسیاری از وب سایت های ایرانی هم بصورت ریسپانسیو طراحی می شوند و شما می توانید حتی بر روی تبلت و یا انواع موبایل ها، از این وب سایت ها بازدید کنید.
از طرف دیگر در سال 2011 یک فریمورک (framework) به نام “بوت استرپ” (Bootstrap ) توسط Twitterعرضه شد که بصورت رایگان می توان آنرا دانلود و جهت ریسپانسیو کردن وب سایت، استفاده کرد. در سالهای اخیر نسخه های فارسی شده “بوت استرپ” هم ارائه شده که موجب تسهیل کار طراحان وب در این زمینه شده است.
امروزه بسیاری از طراحان وب در ایران و کشورهای دیگر جهان، جهت طراحی وب (front-end development) از بوت استرپ و مدیا کوئری (Media Query) استفاده می کنند.
البته این دو با یکدیگر فرق دارند و برای مثال برای استفاده از “بوت استرپ” یک طراح وب باید فایل آنرا دانلود و در فولدر (پوشه) های وب سایتش گذاشته و حتما باید در فایل Html به آن لینک دهد تا هنگام اجرای فایل های آن وب سایت، بوت استرپ هم اجرا شود ولی برای مدیاکوئری چنین کاری لازم نیست. همچنین هنگام نوشتن کدهای Html باید صفحات وب را اصطلاحا Grid بندی کرد ولی برای استفاده از مدیا کوئری، در فایل های CSS ، حالت ها و اندازه های مدیا صفحات (یعنی اینکه به تناسب مختصات صفحات نمایش گجت ها و دستگاه ها هر بخش چگونه نمایش داده شود) تعریف می شوند.
با استفاده از این روش ها زمانی که در یک سایت یک عکس بزرگ و کاملا پهن در بالای آن گذاشته شده، این عکس مسلما در قاب تبلت و یا موبایل جا نمی شود و اگر هم نصفه و یا ناقص نشان داده شود، شکل Layout نهایی سایت بر روی آن دستگاه زشت دیده خواهد شد. به همین دلیل می توان با استفاده از بوت استرپ و یا مدیاکوئری طوری کدنویسی کنیم که عکس فوق در هر کدام از حالت های این گجت ها، متناسب با عرض صفحه نمایش آن، کوچک تر به نشان داده شده و یا اصلا حذف شود.
