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

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

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

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

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

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

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

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

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

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

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

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

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

• Foundation
• Gumby
• Skeleton

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

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

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

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

بخش بالای روزنامه

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

سایت های تک صفحه ای

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

سایت های تک صفحه ای از نظر موتورهای جستجو نیز مزیت دارند زیر کاربر مدت زمان بیشتری را در صفحه اصلی سایت زمان صرف می نماید و این باعث بالا رفتن اعتبار صفحه می شود. امروز مدت زمانی که کاربر در صفحات سایت صرف می نماید جزو یکی از مهترین رنکینگ های موتورهای جستجو می باشد.

نمونه ای از سایت های تک صفحه ای سایت http://sitedar.com می باشد که به تازگی توسط دارکوب طراحی گردیده است. این سایت تک صفحه ای ریسپانسیو ( سازگار با موبایل ) می باشد و در صورتی که با موبایل و یا تبلت سایت مشاهده شود صفحه بندی آن برای مرورگر موبایل تغییر پیدا می نماید. سایت های تک صفحه ای ریسپانسیو ارزش بسیاری در موتورهای جستجو دارند و در صورتی که بهینه سازی سایت تک صفحه ای به درستی انجام شود سایت به سرعت در موتورهای جستجو رنک می گیرد. زیرا کاربران بسیاری از موبایل و تبلت برای رویت سایت استفاده می نمایند و با توجه به ظاهر مناسب سایت ریسپانسیو در این مرورگرها کاربران به مرور سایت ادامه می دهند.

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

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

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

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

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

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

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

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

* دقت نمایید هر کدی که در برای هر سایزی در فایل CSS مورد نظر درج می نمایید برای سایر سایزها مورد استفاده قرار نمی گیرد.

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

معمولا مشکل برای نمایش سایت بین عرض 327 و 1024 می باشد که می توانید آن محدوده را نیز به چند فایل مختلف CSS اختصاص دهید به عنوان مثال از 327 تا 500، از 500 تا 700، از 700 تا 900 و از 900 تا 1024.

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

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

طبق گزارش های جدید 47 درصد از کاربرانی که در اینترنت از موبایل برای مرور وب استفاده می نمایند از Apple's iOS برای این کار استفاده می نمایند. وردپرس زمانی که برنامه های موبایل خود را بروز نمود کاملا سازگار با ابزارهای iOS شد و با iOS7 شرکت Apple سازگاری کامل دارد. انجام به روز رسانی های جدید موبایل به مدیران سایت این امکان را داده که به راحتی سایت خود را برای مرورگرهای موبایل طراحی نمایند که این امکانات جانبی شامل:

• سیستم ورود بهینه سازی شده و پیغام ها
• ظاهر تب بیس آسان
• سیستم نظرات و پیغام های بهینه سازی شده
• سیستم های نظر دهی داخلی
• سیستم نمایش مطالب بهینه سازی شده
• امکان لینک دهی از توئیتر
• و سایر رفع عیب ها

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

ساخت سایت موبایل

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

استفاده از پلاگین

وردپرس به دلیل پلاگین ها و امکانات جانبی بسیار آن تا این حد محبوب شده است. اضافه کردن امکانات جدید به پایه اصلی وردپرس بسیار ساده است و همه می توانند پلاگین ها را به راحتی نصب نمایند. برای نسخه موبایل سایت نیز پلاگین ها بسیاری وجود دارد. WPTouch یکی از پلاگین ها می باشد. این پلاگین به کاربر این امکان را می دهد که بخش های مورد نظر خود را برای سایزهای مختلف مرورگر حذف و اضافه نماید. سایت هایی از پلاگین ها برای نسخه موبایل خود استفاده می نمایند در iOS7 به خوبی نمایش داده نمی شوند. در صورتی که از این پلاگین ها استفاده می نمایید سایت خود را به صورت کامل در موبایل بررسی نمایید.

یک برنامه برای آن

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

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

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

مزایایی سایت وردپرس ریسپانسیو:

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

همیشه طراحی نسخه iOS7 را جزو برنامه های خود قرار دهید زیرا بسیاری از کاربران از آن برای مرور وب استفاده می نمایندو شما با انجام این کار کاربران بسیاری بدست خواهید آورد.