طراحی سایت
ساناتک
پنجشنبه 15 مرداد 1394
1
سایت ریسپانسیو چیست؟

 

سایت های ریسپانسیو

 

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

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


ویژگی های سایت های ریسپانسیو:

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


چرا باید از سایت ریسپانسیو استفاده کنیم؟

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


چگونه می توان سایت واکنش گرا را از غیر واکنش گرا تشخیص داد؟

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


آیا طراحی سایت به صورت واکنشگرا تاثیری در نتایج گوگل دارد؟

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

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

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


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

از عوامل مهم ریسپانسیو بودن سایت ها تنوع سیستم های عامل و مرورگرهها و هم چنین تنوع در استفاده از زبان ها، ابزارها و فوت و فن های مختلف برنامه نویسی می باشد. برای طراحی سایت های ریسپانسیو می توان از ویژگی های مختلف CSS مثل Float یا شناور سازی عناصر سایت استفاده کرد. البته که شناور سازی به تنهایی برای ریسپانسیو کرده سایت کافی نیست و باید با کمک کدهای Java script آن ها را کامل کرد. به این ترتیب شما می توانید به شکل دستی کدنویسی کرده و تعیین کنید که در هر حالت صفحه ی سایت با چه رزولوشنی به نمایش در آید.

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

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

برای شروع کار، کد زیر را بین دو تگ head اضافه کنید:

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

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

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

 

<link href="template.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" />
<link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 327px)" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-width:328px) and (max-width: 768px)" href="templates/template/tablet.css">

 

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

فایل دوم برای موبایل ها با رزولوشن 327 به پائین و فایل سوم برای گجت های میان سایز مثل تبلت ها با رزولوشن بین 327 و 1024 پیکسل است.

هر عرضی که دارید مهم نیست، فقط عرض مرورگر را در محدوده سایز مد نظر خود قرار داده و کدهای CSS آن را به فایل اضافه کنید. در مورد سایت هایی با عرض بین 327 و 1024 نگران نباشید. بهتر است محدوده ها را کوچک تر کرده و فایل CSS را برای هر کدام اضافه کنید.
فریم ورک های طراحی سایت واکنش گرا (responsive)

اگر به اندازه ی کافی با زبان Java scipt آشنا نیستید و یا صرفا می خواهید کلیشه وار به طراحی سایت های ریسپانسیو روی بیاورید، بهتر است به سراغ فریم ورک های آماده بروید. فریم ورک هایی مثل Bootstrapt، Gumby و یا Foundation web که در عین کمی پیچیدگی امکانات بسیاری را در اختیار طراحان سایت قرار می دهند.

تعداد بازدید: 786
مطالب دیگر وبلاگ
پاک کردن history مرورگر برای مشاهده تغییرات سایتپرمالینک یا پیوند یکتا چیست؟از چه فریم ورکی برای کد نویسی با php استفاده می کنیدمباحث متفرقه در طراحی وب سایت:قسمت اولمقدمه ای بر CSS
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید