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



زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون زمان آن می باشد که قالب سایت سازگار با رزولوشن های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم:
 <meta name="viewport" content="width=device-width">

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

سپس کافی است سه فایل 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">

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

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

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

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

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

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

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

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

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



امروزه با توجه به تعداد بالای استفاده کنندگان از موبایل برای مرور و جستجو در وب طراحی سایت سازگار با موبایل به امری ضروری تبدیل شده است. با توجه به تعداد بالای این گروه از کاربران موتورهای جستجو نظیر گوگل دائم کاربران را تشویق به راه اندازی نسخه موبایلی وب سایت می نمایند و حتی در پی آن هستند که سازگاری وب سایت در موبایل را به یکی از فاکتورهای رنک دهی در نتایج جستجو اضافه نمایند. به عنوان مثال در صورتی که از موبایل برای جستجو در گوگل استفاده نمایید در صورتی که سایتی نسخه سازگار شده با موبایل داشته باشد در کنار آن عنوان Mobile-friendly را نمایش می داد و حتی گوگل اخیرا اعلام نموده از تاریخ April 21 سال 2015 سازگاری وب سایت با موبایل را به یکی از فاکتورهای رنک دهی خود اضافه خواهد نمود.

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

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

برای آنکه وب سایت خود را از نظر سازگاری با موبایل بررسی نمایید می توانید از Google Mobile-Friendly Test استفاده نمایید و البته همچنین بهتر است علاوه بر آنکه سرعت وب سایت برای کامپیوتر بررسی می گردد برای موبایل نیز به صورت جداگانه بررسی گردد که این کار را می توانید در Google Page speed test انجام دهید.

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

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

آخرین نمونه کارها

    • جشنواره بین المللی تئاتر دانشگاهی
    • طراحی پوسته اختصاصی ، سبک سازی و سئو
    • http://iifut.kanoonha.ir
    • ثبت نام و ارسال اثار کشوری
    • مشاهده سایت
    • شبکه مجازی کانون های دانشگاه ها
    • طراحی اختصاصی و سامانه های تخصصی
    • http://kanoonha.net
    • شبکه اجتماعی و ملزومات آن
    • مشاهده سایت
    • موسسه فرهنگی آموزشی نصیر
    • طراحی شاد و متنوع
    • http://nasirhs.ir
    • تالار گفتمان و اطلاع رسانی موسسه
    • مشاهده سایت
    • پایگاه آموزش مجازی
    • طراحی اختصاصی
    • http://amuzesh.net
    • مدیریت آموزش مجازی
    • مشاهده سایت
Go to top