تبلیغات
طراحی وب سایت - ریساپانسیو یا ادابتیو؟

ریساپانسیو یا ادابتیو؟

یکشنبه 7 آذر 1395 09:04 ب.ظنویسنده : نوین رسانه

 

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


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

  • طراحی واکنش گرا / responsive

طراحی واکنش گرا از یه نام دامنه برای محتوای موبایل و دسکتاپ استفاده می کنه و روی دستگاه های مختلف HTML یکسانی رو نشون میده. اما برای تغییر قالب صفحه از CSS استفاده می کنه (CSS یه زبان برنامه نویسیِ که برای نمایش اطلاعاتی که به زبان نشانه نوشته شدند از الگوهای آبشاری استفاده می کنه). مزیت اصلی این طراحی اینه که مدیر سایت فقط باید یه سایت رو مدیریت کنه – ویرایش اطلاعات برای تمام کاربرها از یه قسمت انجام میشه و در نتیجه هزینه توسعه اولیه سایت پایین میاد و مدیریت محتوا راحتتره.
با طراحی واکنش گرا خیالتون راحته که با تمام دستگاه ها محتوای یکسانی نشون داده میشه (البته با قالب های مختلف). اندازه تمام صفحه های نمایش به خوبی مدیریت میشن و اندازه صفحه متناسب با صفحه نمایشگر کاربر تغییر می کنه (حتی وقتی کاربر تبلت رو از حالت افقی میچرخونه به حالت عمودی). معمولا اجراش برای توسعه دهنده ها راحتتره، به خصوص روی وردپرس.
نکته منفی طراحی واکنش گرا اینه که منابعی که به کاربر فرستاده میشن باید برای همه دستگاه ها قابل عرضه باشن. به عبارت دیگه، بدون توجه به اندازه صفحه نمایشگر کاربر همه محتوا براش فرستاده میشن. مثلا معمولا دستگاه های تلفن همراه وضوح بالایی لازم ندارن، اما مجبورن گرافیک هایی رو که بزرگتر از حد نیازشونه و برای کاربر نمایش داده نمیشه رو هم دانلود کنن.
بیشتر سایت هایی که ما تو گروه دارکوب طراحی می کنیم واکنش گرا هستند. برای اینکه با طراحی تطبیقی و مزایا و معایبش آشنا بشید با ما همراه باشید:

  • طراحی تطبیقی / adaptive

 به طراحی تطبیقی، "واکنشگرا 2.0" هم میگن. این مدل طراحی به کمک جاوااسکریپت و کشف سرور سایت، دستگاه کاربر رو هدف میگیره. بهش "میزبانی پویا یا دینامیک" هم میگن. میزبانی پویا به هر دستگاهی کدها و رسانه های مختلفی میفرسته (البته این هم خودش کار رو پیچیده میکنه و برای همین هزینه توسعه اولیه سایت بالا میره).
با همه این ها، حتی گوگل هم میگه این روش هدف گیری دستگاه ها مستعد خطا و اشتباهه و نگهداری سخت و هزینه بری داره. 
بنابر این به نظر میرسه حتی با وجود اینکه تکنولوژیش خیلی پیشرفته تره، اما اجراش نشدنیه.
گوگل ادعا کرده که راه حل این مشکل رو داره: پروژه AMP.
AMP یه قالبِ بازه که گوگل از فناوری های موجود ساخته. یه طراحی تطبیقی که فقط اونطوری که گوگل میخواد خودشو مطابقت میده. گوگل همیشه به فناوری های پیشرفته اهمیت میداده و الآن هم شما رو با  جاوااسکریپت و HTML ساختاربندی شده تو فناوری گیر میندازه. ضمنا برای اینکه استفاده از این پروژه رو همه گیر کنه، تصمیم داره سرورهای کش رو باز کنه تا به طور رایگان در دسترس همه قرار بگیره.
صفحه های AMP فوق العاده سریعند و از نظر اجرایی ارتقا یافته اند. معمولا Google Built-in به کاربرها توصیه می کنه از این فناوری استفاده کنن. اگه میخواهید عملکرد AMP رو در عمل ببینید، میتونید به Amp By Example مراجعه کنید. 
ما هم تصمیم داریم فناوری AMP رو به خدمات دارکوب اضافه کنیم تا سریعترین تجربه کاربری رو به کاربرهای سایت شما هدیه کنیم. به محض اینکه این فناوری از طرف گوگل رایگان ارائه بشه همه گیر میشه و برای همه سایت ها به عنوان یه استاندارد در نظر گرفته میشه.
فعلا به نظر میرسه که AMP مطمئن ترین روشیه که میشه با خیال راحت برای بارگذاری صفحات روی گوشی استفاده کرد تا هم سرعت لود رو بالا ببریم و هم خودی به گوگل نشون بدیم. از اونجایی که گوگل همیشه به چیزی که میخواد میرسه، پس بهتره در آینده به محض اینکه امکان استفاده از این فناوری بوجود اومد، شما هم برای سایتتون بکار ببریدش.


برچسب ها: آموزش طراحی وب سایت با فتوشاپ ، آموزش طراحی وب سایت pdf ، آموزش طراحی وب سایت با php ، آموزش طراحی وب سایت با جوملا ، آموزش طراحی وب سایت با وردپرس ، آموزش طراحی وب سایت با dreamweaver ،
آخرین ویرایش: یکشنبه 7 آذر 1395 09:06 ب.ظ

 
چهارشنبه 7 تیر 1396 06:29 ب.ظ
You can definitely see your expertise in the work you
write. The sector hopes for even more passionate writers like you who are not afraid to say
how they believe. At all times follow your heart.
دوشنبه 5 تیر 1396 02:35 ق.ظ
You can definitely see your enthusiasm in the work you write.
The sector hopes for even more passionate writers such as you who aren't afraid to mention how they believe.
All the time go after your heart.
سه شنبه 2 خرداد 1396 12:47 ب.ظ
I'm curious to find out what blog platform you have been utilizing?
I'm having some small security issues with my latest blog and I'd like to
find something more safe. Do you have any recommendations?
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر