طراحی سایت واکنش گرا قابلیتی ست که از با توجه با استفاده از تبلت ها و موبایل ها برای بازدید از سایت ها امروزه در علم طراحی سایت وارد شده است.
توسط این قابلیت که آن را رسپانسیو (Responsive) نیز می نامند، وب سایت ما دارای قالبی می باشد که در هنگام بازدید با هر ابزاری از قبیل کامپیوتر شخصی و لبتاپ و تبلت و موبایل، نسبت به اندازه صفحه و حتی رزولوشن صفحه ی نمایش کاربر واکنش نشان داده، و اندازه خود را تغییر داده و هنگام نمایش اطلاعات برای کاربر جلوه خوشایندی را خواهد داشت. همچنین ما می توانیم ترتیب نمایش اطلاعات را در صفحه های کوچک مثل موبایل برای کاربران مشخص نماییم.
از طریق این قابلیت سایت ما دارای امکانات متنوعی می شود و برای سایت ما مزایایی به وجود خواهد آورد، که از نظر کاربران نیز بسیار جذاب خواهد بود.
مزیت هایی سایت های واکنش گرا را در ذیل مطالعه می نماییم:
- صرفه جویی در وقت کاربران برای مشاهده
- نمایش مناسب و اصطلاحا تمیز محتوا
- جلوگیری از نمایش محتوای تکراری
- واکنش گرایی نسبت به چرخش ابزار مختلف مثل موبایل و تبلت
شرکت طراحی سایت مبنا با استفاده از این متد جدید و اصول جدید و حرفه ای طراحی سایت ، اقدام به طراحی سایت واکنش گرا نموده که در بازدید با هر ابزاری نسبت به صفحه نمایش آن تغییر نموده و با اندازه آن ابزار آماده نمایش به کاربر باشد.
همچنین نکاتی که در ارتباط با بهینه سازی سایت باید رعایت شود نیز توسط شرکت طراحی سایت مبنا رعایت شده تا سایت شما توسط موتور های جست و جو نیز دیده شوند و در لیست جوست و جوی آنها در ابتدای لیست قرار گیرد.
مقوله واکنش گرایی متدی ست که حتما در دنیای امروز که تمام مردم جهان به سمت استفاده از موبایل برای بازدید از وب سایت ها و حتی چک کردن ایمیل های شخصی خود می روند، باید توسط شرکت های طراحی سایت رعایت شود.
شرکت طراحی سایت مبنا با رعایت اصول واکنش گرایی و همچنین رعایت اصول طراحی سایت ، و همچنین اصول بهینه سازی سایت اقدام به طراحی سایت نموده و باعث جذابیت قالب شما و گرافیک شما شده و همچنین در جذب مخاطبان و مشتریان زیاد برای شما تاثیر گذار خواهد بود.
هدف ما پیشرفت نام تجاری و اعتبار تجاری شما ست.
اگر میخواهید یک قالب واکنش گرا طراحی کنید باید بر متا تگ viewport و مدیا کوئری مسلط باشید.
برای طراحی سایت به روش ریسپانسیو لازم است در ابتدا سرویس متا تگ viewport را به سرویس سایت افزوده و سپس مدیا کوئری را به فایل CSS بیافزایید.
همانطور که میدانید در طراحی سایت به شکل ریسپانسیو، سایت باید در همه ی مانیتور ها، موبایل ها و تبلت ها به صورتی نمایش داده شود که کاربر احتیاجی به اسکرول کردن افقی نداشته باشد. برای این منظور لازم است سایز این دستگاه ها را داشته باشیم.
حتما لازم نیست خودتان برای این کار وقت صرف کنید و می توانید از فریم ورک های مطرح استفاده کنید در این صورت یک مرحله جلو تر خواهید افتاد.
در فریم ورک بوت استرپ دستگاه ها را به صورت زیر بخش بندی کرده است:
موبایل : کوچیکتر از 768 پیکسل
تبلت: بزرگتر از 768 پیکسل
مانیتور رومیزی متوسط: بزرگتر از 992 پیکسل
مانیتور رو میزی بزرگ: بزرگتر از 1200 پیکسل
اجزای مختلف سایت را چگونه در این دستگاه ها نمایش دهیم؟
برای کنترل عرض اجزای مختلف سایت باید از max-width و min-width استفاده کرد.
فرض کنید یک تگ با ID: mabnasitedesign در سورس کد سایت وجود داشته باشد. باید آن را به گونه ای قرار دهید که در هر شرایطی در مرکز صفحه نمایش قرار گیرد و در موبایل هایی که سایز کوچیکتر از 767 پیکسل دارند تگ mabnasitedesign متناسب با ابعاد موبایل تغییر کند. برای این منظور میتوانید از کد زیر استفاده کنید:
} (media screen and (max-width: 767px@
{ ;mabnasitedesign { width: 100%; margin:0 auto#
{
حال این کد را برای تبلت باز نویسی میکنیم با این تفاوت که میخواهیم فقط در سمت راست صفحه نمایش داده شود:
} (media screen and (min-width: 768px) and (max-width: 991px@
{ ;mabnasitedesign {width: 150px; float: right#
{
اکثر کسانی که در حوزه طراحی وب سایت فعالیت می کنند در ساید بار سایت از ID: right استفاده می کنند، شما نیز میتوانید از کد های بالا برای ساید بار استفاد کنید کافیست mabnasitedesign را به right تغییر دهید.
همانطور که در مقاله ی چند نکته انکار ناپذیر در طراحی سایت گفته شد امروزه استفاده از نمایشگرهای بزرگ رونق پیدا کرده است،بنابراین برنامه نویسان باید به این نکته توجه نمایند تا بتوانند تجهیزات مختلف را کنترل نمایند.در اینجا می خواهیم تا به معرفی طراحی سایت از نوع واکنش گرا یا همان ریسپانسیو (Responsive) بپردازیم. طراحی سایت واکنش گرا طراحان وب را قادر می سازد تا به طراحی سایت انعطاف پذیر،نسبت به تغییر دستگاه کاربران واکنش دهد.
با طراحی سایت واکنش گرا دیگر نیازی نیست که برای هر گجت موجود در بازار یک سایت اختصاصی طراحی کرد.
طراحی سایت با روش پارالاکس
این تکنولوژی به تازکی در ایران رایج شده است و ما به درخواست کاربران در این مقاله پارالاکس را معرفی و بررسی می کنیم.
پارالاکس چیست؟
پارالاکس یا parallax یعنی اختلاف دید در عین هماهنگی. در طراحی سایت به تکنیکی که کاربر با اسکرول یا حرکت نشانگر موس اتفاق خاصی مانند جابجایی، تغییر میدان دید، حرکت پس زمینه و افکت های دیگر مشاهده می کند را پارالاکس گویند.
از افکت های دیگری که ممکن است در این شیوه پیاده سازی شود تغییر میدان دید با حرکت دادن موس است به نحوی که از سمت راست به سمت چپ و یا بالا پایین بردن موس روی صفحه زوم و به حالت عادی برمیگردد. به این ترتیب میدان دید کاربر دارای گستره درجه 180 می شود. کاربر این احساس را می کند که یک دوربین در دست گرفته و در حال تماشا کردن یک منظره است.
دراین طراحی وب سایت سایت ها اغلب از یک صفحه تشکیل شده اند که با اسکرول و یا حرکت موس افکتی از افکت های ذکر شده رخ می دهد. این افکت ها برگشت پذیر هستند به زبان ساده تر یعنی اگر با برگش اسکرول انجام شده و یا برگش موس به محل قبلی صفحه سایت به حالت قبلی خود بر می گردد و همه چیز در سر جای خود قرار می گیرد.
در نوع دیگر طراحی سایت با روش پارالاکس چندین لایه را با افکت های جداگانه که هرکدام با سرعت خاصی اجرا می شوند با هم ترکیب می کنند که کاربرا را به خود جذب می کند.
شما می توانید با استفاده از ابزار ها HTML 5 ، CSS3 و Jquery با همکاری یک گرافیست که با تکنیک پارالاکس آشنایی دارد به تولید و طراحی سایت پارالاکس بپردازید.
اسکرول پارالاکس نیز در سال 2016 به عنوان یکی از روند های طراحی سایت معرفی شده است. همانطور که می دانید، استفاده از روندها در طراحی سایت ، به نظر مشتری بستگی دارد. علاوه بر این روندها همیشه برای طراحی سایت مناسب نیست و تنها به دلیل زیبایی مورد استفاده قرار می گیرند.
اسکرول پارالاکس به معنی پیمایش با اختلاف منظر است. بدین معنی که می توان با استفاده از این روند در طراحی سایت یک تصویر برای پیش زمینه و یک تصویر برای پس زمینه تعریف کرد به گونه ای که سرعت اسکرول آنها با یکدیگر متفاوت باشد. در واقع پارالاکس در طراحی سایت، موجب ایجاد یک عمق خیالی می شود.
استفاده از این روند در طراحی سایت، برای سئو سایت توصیه نمی شود. زیرا این روند نیز مانند ایجاد نمایش چرخشی تصاویر، موجب کاهش محتوا می شود که برای سئو مضر است.
کاهش عملکرد و سرعت بارگذاری صفحه نیز از دلایل عدم استفاده از این روند در طراحی سایت است. در طراحی سایت پارالاکس، معمولا از گرافیک و جاوا اسکریپت های سنگین استفاده می شود که برای طراحی سایت و سئو توصیه نمی شود. زیرا زمان زیاد بارگذاری صفحه سایت موجب می شود تا کاربر از ورود به سایت شما اجتناب کند. با این حال این روند، زیبایی طراحی سایت را تا حد زیادی افزایش می شود.
ممکن استفاده از این ویژگی در طراحی سایت سرگرم کننده به نظر برسد اما برخی از کاربران آن را نمی پسندند و در واقع تاثیر منفی بر روی کاربر می گذارد. با این وجود شما می توانید بسته به نیاز خود از پارالاکس در طراحی سایت استفاده کنید اما توجه داشته باید که اگر نیاز به طراحی سایت واکنش گرا دارید، نباید از این روند در طراحی سایت استفاده کنید.
معرفی کتاب طراحی سایت واکنش گرا و تطبیقی
برای طراحی سایت ، کتاب ها و راهنما های جامع متعددی وجود دارند که علاقه مندان به طراحی سایت می توانند با مطالعه این مراجع با صرف کمی زمان ، روش های مختلف طراحی سایت را بیاموزند. در این مقاله از شرکت طراحی سایت مبنا ، قصد ما بر این است تا کتاب طراحی سایت واکنش گرا و تطبیقی را برای شما کاربران عزیز معرفی نماییم. انتشار این کتاب به دست UPXin صورت گرفته است و نام لاتین آن responsive and adaptive web design می باشد.
آن دسته ز افرادی که علاقه مند به یادگیری طراحی سایت رسپانسیو و واکنش گرا هستند می توانند از این کتاب استفاده نمایند. در کتاب مذکور نحوه طراحی سایت برای دستگاه های با اندازه های مختلف نظیر تبلت ، تلفن هوشمند ، دسکتاپ و غیره به طور کامل و با جزییات توضیح داده شده است. علاوه بر این برای یادگیری ساده تر این نوع طراحی سایت ، مثال هایی نیز ارائه شده است.
این کتاب به ویژه اخیرا بسیار پرطرفدار شده است زیرا امروزه تنها انواع طراحی سایت سازگار با دستگاه های مختلف هستند که می توانند به حیات خود ادامه دهند و سایر وب سایت های غیر رسپانسیو سئو خود را از دست می دهند و رتبه آنها در نتایج جستجوی گوگل به شدت کاهش پیدا می کند.
به عبارت دیگر می توان چنین گفت که امروزه موفق ترین وب سایت ها ، آن دسته از سایت هایی هستند که دارای طراحی سایت رسپانسیو و پاسخگو می باشند. این ویژگی در طراحی سایت موجب می شود تا سایت شما در تمام دستگاه ها اعم از دسکتاپ ، تبلت و تلفن های هوشمند به یک شکل و به صورت استاندارد نمایش داده شود.
این کتاب طراحی سایت دارای فصول مختلفی است و مباحث زیر در آن به طور مفصل شرح داده شده اند:
- آنالیز کامل طراحی سایت واکنش گرا و رسپانسیو و ارائه 10 قالب رسپانسیو به عنوان نمونه کار
- شرح کامل طراحی سایت موبایل
- شرح تمام عناصر مورد استفاده در طراحی سایت واکنش گرا UX
- ارائه نقاط قوت و ضعف این نوع طراحی سایت
- معرفی بهترین روش ها برای طراحی سایت واکنش گرا و تطبیقی
طراحی سایت واکنش گرا مزایایی دارد که در زیر به توضیح آن ها می پردازیم:
√ صرفه جویی در هزینه:تا چند سال پیش شرکت ها برای ابزارهایی که با پیشرفت تکنولوژی وارد بازار می شدند قالب خاصی طراحی می کردند به عبارتی برای هر وسیله ای هزینه ی جدا پرداخت می کردند اما با توجه به ویژگی سایت های واکنش گرا،نیازی به طراحی قالب دوباره برای سایت نیست و با طراحی یک قالب می توان سایت خود را در تمامی ابزارها استفاده کرد. این یکی از ویژگی های مهم در این نوع طراحی سایت است. البته باید اصول بهینه سازی سایت و سئو را نیز رعایت نماییم.
√ افزایش ترافیک وب سایت:با توجه به دسترسی سایت توسط همه ی ابزارها مسلما ترافیک سایت شما افزایش پیدا خواهد کرد و احتمال کسب درآمد برای شما بیشتر می شود، که نکته مهم در طراحی سایت می باشد.
√ سبقت از رقیبان:با توجه به اینکه طراحی سایت واکنش گرا هنوز در ابتدای راه است احتمال اینکه رقیبان شما از این ویژگی استفاده کنند کم است.استفاده از طراحی سایت واکنش گرا می تواند نماینده ی حرفه ای بودن کار شما باشد و باعث سبقت شما از رقیبانتان شود.
√ استفاده از محتوای مفید و غیر تکراری:همانطور که قبلا گفته شد استفاده از متون مفید و غیرتکراری می تواند روی رنکینگ سایت موثر باشد.در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد.
با توجه به مواردی که ذکر شد می بینیم که داشتن سایت واکنش گرا می تواند در بهبود سئو سایت و بهینه سازی سایت موثر باشد.بنابراین قبل از هرگونه اقدام جهت طراحی سایت به این نوع طراحی سایت توجه کنید.
علائمی که به شما نشان می دهد که نیاز به طراحی سایت جدید دارید
پس از چند سال که از طراحی سایت اولیه شما می گذرد ممکن است بخواهید آن را تغییر دهید و سایت جدیدی را طراحی کنید. طراحی سایت لازم نیز هر سال انجام شود اما پس از چند سال شما باید با توجه به نیاز کاربران خود وب سایت خود را تغییر دهید یا طراحی سایت جدید انجام دهید. در این مقاله قصد داریم به نشانه هایی اشاره کنیم که بیانگر نیاز به طراحی سایت جدید هستند.
یکی از علائمی که نشان دهنده نیاز شما به طراحی سایت جدید است ، ظاهر قدیمی وب سایت شما است. اگر ظاهر وب سایت شما قدیمی شده است و دیگر برای کاربران و مشتریان شما جذابیت ندارد، باید بدانید که زمان طراحی سایت جدید رسیده است. در واقع یکی از اصلی ترین ویژگی هایی که می تواند در جلب رضایت کاربر نقش داشته باشد، ظاهر مدرن و جذاب سایت است. علاوه بر این دسترسی آسان نیز در این امر بسیار موثر است. با توجه به این نکته اگر سایت شما جز آن دسته از وب سایت هایی است که بر پایه فلش طراحی شده است و دسترسی به بخش های مختلف آن بسیار دشوار است ، توصیه می کنیم به فکر طراحی سایت جدید باشید تا کاربران خود را از دست ندهید.
نکته بعدی که شما را به فکر طراحی سایت جدید می اندازد، ویژگی واکنش گرایی در سایت است. امروزه وب سایت های طراحی شده باید به گونه ای باشند که در صفحه نمایش های مختلف قابلیت نمایش صحیح را داشته باشند. در واقع طراحی سایت واکنش گرا یکی از جدید ترین روش های طراحی سایت است که اخیرا از نظر گوگل و موتور های جستجو نیز بسیار مورد توجه قرار گفته است و بر روی سئو و بهینه سازی سایت نیز بسیار تاثیر گذار است. اگر سایت شما ریسپانسیو نیست ، نشان دهنده این است که شما نیاز به طراحی سایت جدید با قابلیت واکنش گرایی دارید.
اگر سایت شما پس از گذشت چند سال از طراحی آن ، هنوز هم قابلیت جذب کاربر به صورت کاربر دائمی را ندارد و نمی توانید از طریق آن فروش انجام دهید، بنابراین باید به فکر طراحی سایت جدید با قابلیت ها و امکانات بیشتر باشید تا بتواند نیاز کاربر را بر طرف نماید. به عبارت دیگر کاربر پسند بودن در طراحی سایت بسیار مهم است و به عنوان یک هدف اصلی در طراحی سایت باید به آن توجه کرد. طراحی سایت کاربر پسند موفقیت شما را چندین و چند برابر می کند. بنابراین اگر سایت شما این قابلیت را ندارد که نظر کاربر را به خود جلب کند باید با طراحی سایت جدید در صدد رفع این مشکل بر بیایید.
و در نهایت یکی دیگر از نشانه های نیاز به طراحی سایت جدید ، عدم دستیاب به رتبه خوب در موتور های جستجو است. امروزه طراحی سایت بسیار توسعه پیدا کرده است و تقریبا در تمام حوزه ها افراد به طراحی سایت روی آورده اند از این رو رقابت در زمینه های مختلف بین وب سایت ها افزایش پیدا کرده است از این رو آن دسته از وب سایت هایی که دارای رتبه بالاتری در نتایج جستجو هستند و به عبارت دیگر از سئو قوی تری برخوردار هستند می تواند در این رقابت موفق تر باشند و زودتر به هدف خود دست پیدا کنند. اگر با گذشت زمان سایت شما هنوز رتبه ای در گوگل و نتایج جستجو کسب نکرده است ، باید به فکر طراحی سایت جدید باشید که به صورت استاندارد و سئو بیس انجام شده باشد.
این روز ها مشاهده میکنیم که بسیاری از شرکت ها رو به نرم افزارهای موبایل افتاده اند و یا برخی از وب سایت ها مانند نت برگ، شیپور و... هر کدام برای سایتشان نرم افزار مخصوص به خود را دارند علت هم کاملا مشخص است فراوانی گوشی های هوشمند.
حال این سوال پیش میآید که آیا نرم افراز موبایل بهتر است یا سایت ریسپانسیو؟ اصلا کدام یک از این ها مناسب حرفه و بیزینس شماست؟ آیا بهتر است شما به فکر طراحی سایت خود باشید یا طرحی نرم افزار خود تا بتوانید فروش خود را افزایش دهید؟
تفاوت نرم افزار موبایل و سایت ریسپانسیو
حتی خود گوگل نیز معتقد است که طراحی وب سایت به صورت ریسپانسیو بهترین گزینه ممکن برای انتخاب است. زیرا شما با طراحی سایت به شکل ریسپانسیو میتوانید محتوای جدید خود را به سادگی در دسترس کاربران قرار دهید و فقط یکبار هزینه میکنید. اما در برنامه موبایل شما باید بیشتر هزینه کنید و با یک برنامه نویسی انتخاب نمایید که هم بر IOS و یک هم بر Android مسلط باشد اما باز هم همه ی گوشی های هوشمند را ساپورت نکرده اید (بلک بری، نوکیا و..). نرم افزار موبایل نیز خالی از لطف نیست از جمله مزایای نرم افزار موبایل این است که کاربر حتی بدون اتصال به اینترنت میتواند از محتوای شما استفاده کنند. همچنین در نرم افزار های موبایل باید مرتبا ورژن جدید برنامه ی خود را در دسترس کاربران قرار دهید.