طراحی وب سایت واکنشی (ریسپانسیو)

طراحی ریسپانسیو : بهترین امتیاز شما برای کاربران سایت تان که با موبایل سایت شما را می بینند !

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

شما نمی توانید متن را بخوانید.

شما نمی توانید بر روی لینک درست ضربه بزنید.

تصاویر بسیار کوچک است. این سایت واقعا آشفته و بهم ریخته است!

شما نا امید شده و می روید !

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

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

طراحی وب سایت واکنشی (RWD) یک روش طراحی وب سایت با هدف ارائه ماهرانه ی سایت ها ، برای تجربه ای مطلوب در مشاهده و ناوبری با حداقل تغییر اندازه، سوژه متحرک از روبرو، و پیمایش درطیف گسترده ای از دستگاه ها (از طریق تلفن همراه به مانیتور کامپیوتر) است.

بعضی از مجلات طراحی متفاوت این تعریف را در مورد طراحی وب ریسپانسیو می دهند :

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

این عمل شامل ترکیبی از شبکه های انعطاف پذیر و طرح بندی و پوسته ها، تصاویر و استفاده ی هوشمندانه از نمایش رسانه های CSS است ."

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

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

بنابراین، به جای داشتن یک وب سایت، یک سایت ویژه تلفن همراه، یک سایت برای تبلت ، شما باید یک وب سایت طراحی کنید که برای تمام کاربران تنظیم باشد .

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

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

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

لحظه ی صفرم از حقیقت(The Zero Moment of Truth)

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

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

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

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

طراحی وب سایت پاسخگو و ZMOT

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

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

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

هنگامی که موبایلی تنها صفحه لمسی دارد

به خاطر فعالیت گسترده ی بازار در باره ی کاربران موبایل، به نظر می رسد شما نیاز به کسب اطلاعات بیشتری در مورد ZOMET داشته باشید . در مورد فرصت های بازاریابی تلفن همراه فکر کنید:

  • یک آگهی در یک مجله
  • کمپین بازاریابی ایمیل
  • تجارت نمایش غرفه
  • نمایش محصول

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

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

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

در طراحی واکنشی سایت استفاده از اندازه های نسبی برای عناصر صفحه مانند درصد برای طول و عرض می باشد یعنی از اندازه های واحد مانند پیکسل و نقطه استفاده نشود .تصاویر انعطاف پذیر نیز دارای اندازه های نسبی (درصد) هستند ، تا از نمایش تصاویر در خارج از عنصر مرتبط جلوگیری کند .دستگاه های مختلف نمایشی این امکان را می دهند که بتوان از استایل های مختلف Css ، براساس ویژگی های دستگاهی که سایت در آن نمایش داده می شود ، استفاده کرد . برای مثال عموما عرض مرورگرها در دستگاه های مختلف تغییر می کند و به همان نسبت نوع نمایش سایت با عرض مرورگر همخوانی پیدا می کند .عناصر سمت سرور (RESS) در ارتباط با عناصر سمت کاربر مانند رسانه های نمایش می توانند سایت هایی با بارگذاری سریعتر برای دسترسی شبکه های تلفن همراه تولید کنند و همچنین ارئه غنی تر عملکرد و قابلیت برای اجتناب از برخی مشکلاتی که از ناحیه ی دستگاه های مختلف روی می دهد را ، ممکن می سازد.

ابتدا تلفن همراه ، استفاده از جاوااسکریپت ، افزایش تصاعدی :

"Mobile first"، جاوا اسکریپت ساده و افزایش تصاعدی (استراتژی برای زمانی که سایت های جدید برای طراحی مورد بررسی قرار میگیرند ) مفاهیمی هستند که به RDW مربوط اند :

مرورگرهایی که از پایه برای تلفن همراه طراحی شده اند جاو اسکریپت یا مفهوم مدیا کوئری را متوجه نمی شوند بنابراین توصیه می شود طراحان در تلاش باشند تا سایت هایی برای عموم دستگاه ها طراحی کنند و قابلیت سایت را برای پشتیبانی از اسمارت فون و کامپیوتر ها بالا ببرند . و به جای این سعی کنند پیچیدگی مجموعه را کاهش دهند. سایت های دارای تصاویری با حجم بالا باید بیشتر در قسمت ریسپانسیو پایه ای تلفن همراه کار کنند .اگرچه این روش ها کاملا مورد اعتماد نیستند مگر اینکه سایت با پایگاه داده ای حاوی اطلاعات شامل ویژگی دستگاه ها در ارتباط باشد .برای ایجاد قابلیت های بیشتر برای تلفن های همراه و کامپیوتر ، فریم ورک های جاوا اسکریپت مانند Modernizr jQuery, و jQuery Mobile که مستقیما می توانند از لحاظ پشتیبانی ویژگی های HTML/CSS مرورگرها را تست کنند که از محبوبیت بالایی برخوردارند . Polyfills می تواند برای اضافه کردن ویژگی ها مورد استفاده قرار گیرد تا حتی ویژگی های مدیا کوئری را پشتیبانی کننئد (برای RDW ضروری است) و قابلیت پشتیبانی ازHtml5 را در اینترنت اکسپلورر بالا ببرد.

چه زمانی ممکن است روش تشخیص ویژگی ها کاملا قابل اعتماد نباشد :

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

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