لزوم استفاده از طراحی ریسپانسیو در طراحی وب سایت
توسط مجید احدی
در سال های اخیر و سال جاری، خیلی سخت است تا شرکتی را بیابید که تمایل نداشته باشد که طراحی سایت خود را ریسپانسیو نماید. در حالی که ما خود نیز آن ها را به این امر تشویق می کنیم، اما متوجه شده ایم که آن ها در این مسیر استراتژی خاصی به همراه ندارند.
چرا واکنش گرا (Responsive)
صرفه جویی در هزینه
قبل از اینکه ویژگی ریسپانسیو بودن به صورت گسترده مورد استفاده قرار گیرد (گرچه هنوز هم این اتفاق نیفتاده)، شرکت ها اگر می خواستند نسخه موبایل برای سایت خود طراحی کنند برای هر نوع ابزار یک قالب خاص طراحی می کردند. تصور کنید اگر می خواستید مثلا برای ۳ ابزار آی پد، آی فون و کامپیوتر های معمولی قالب طراحی شود چه هزینه ای می بایست پرداخت می کردید. نکته جالب اینجاست که اگر روزی وسیله جدید به بازار معرفی و به سرعت فراگیر شود، باز دوباره باید هزینه جدید صرف شود تا برای این ابزار جدید، قالب طراحی گردد.
زیبایی قالب ریسپانسیو آنجا خود را نشان می دهد که شما سایتتان برای هر ابزاری که در بازار وجود دارد، خود را هماهنگ کرده و نیازی به طراحی دوباره قالب نیست. به عبارتی یک قالب برای تمام ابزارها…
صرفه جویی در زمان
با توجه به تجربه ای که در زمینه طراحی سایت کسب کرده ایم می دانیم که همیشه “وقت” یکی از الویت های مشتریان است. زمانی که فقط با یک پروژه (در یک نوبت)، قالبی طراحی می شود که در تمام ابزارها با سایزهای مختلف به خوبی نمایش داده می شود، زمان به شدت کاهش خواهد یافت.
سبقت از رقیبان
از آنجایی که طراحی ریسپانسیو هنوز در ابتدای راه است، احتمال اینکه رقیبان شما از این ویژگی بهرمند باشند کم است. داشتن این ویژگی به بازدیدکنندگان شما می گوید کار شما در همه زمینه ها حرفه ایست و همچنین بسیار جلوتر از رقیبان خود حرکت می کنید. در نظر داشته باشید که شما سایتی در اختیار دارید که نه تنها در تمام مانیتورها بلکه در همه ابزارهای موجود در بازار به زیبایی و بدون مشکل به نمایش درمی آید. همین مساله باعث سبقت شما از رقیبان می شود.
افزایش ترافیک سایت
اکنون بیش از ۴۵ درصد از کاربران اینترنت، با موبایل خود به وب گردی می پردازند. شما تصور کنید اگر سایتی در اختیار نداشته باشید که در ابزارهای موبایل به خوبی به نمایش در بیاید، تعداد زیادی از کاربرانی که می توانید داشته باشید را از دست می دهید. پس شما می توانید هم اکنون که قصد سفارش یک سایت را دارید با کمی هزینه بیشتر، کاری کنید که تمام افرادی (با هر ابزاری) که وارد دنیای نت می شوند سایت شما را نیز بتوانند به بهترین شکل ممکن مشاهده کنند. چه از این بهتر؟!
جلوگیری از ایجاد محتوای تکراری (DUPLICATE CONTENT)
تصور کنید که دو نسخه سایت، یکی برای کامپیوترهای معمولی و یکی هم برای موبایل، در اختیار دارید. با توجه به اینکه این دو سایت، یک سایت هستند اما برای نقاط مختلف مطالبشان هم یکی است. روبات گوگل که هر چند وقت یک بار سری به سایت شما می زند پس از ایندکس کردن نسخه ابتدایی به سراغ نسخه موبایل می رود و مطالب نسخه دوم را به عنوان “تکراری” یا “Duplicate” می شناسد که در صورت اتفاق افتادن این موضوع رنکینگ سایت شما بسیار نزول خواهد کرد. اما در صورتی که شما یک سایت واکنش گرا برای تمام ابزارها در اختیار داشته باشید تمام مطالبتان در همین یک سایت قرار خواهد گرفت و از ایجاد محتوای تکراری (Duplicate Content) جلوگیری خواهد شد. پس می بینید که داشتن قالب واکنش گرا شما را در امر SEO نیز یاری خواهد کرد.
به طور خلاصه میتوان از مزایای طراحی ریسپانسیو به موارد زیر اشاره داشت:
نیاز به راه‌اندازی نسخه موبایل جداگانه برای سایت شما نیست و هزینه‌های توسعه و نگهداری وبسایت کاهش خواهد یافت. در طراحی سایت یک نگاه واحد وجود دارد و دیگر شاهد چند پارگی نسخه های مختلف سایت خود نیستید.
تمامی صفحات شما یک آدرس (URL) دارند. تا به حال به این فکر کرده اید که اگر نسخه موبایل جداگانه‌ای برای یک سایت داشته باشید و کاربری از طریق موبایل وارد سایت شده و لینکی را با دوست خود که با لپ‌تاپ کار میکند به اشتراک بگذارد چه خواهد شد؟ با طراحی واکنش‌گرا دیگر نگران نوع دستگاه کاربر سایت خود نیستید. لپ‌تاپ؟ تبلت؟ موبایل؟ یا حتی دستگاهی که هنوز وارد بازار نشده؟ مهم نیست شما همه را پشتیبانی می‌کنید!
تاکتیک های اصلی
تقریبا تمام مواردی که درباره طراحی سایت ریسپانسیو می خوانید با تاکتیک های اصلی شروع می شود- عوامل پایه که وب سایت ها را به حالت ریسپانسیو در می آورد. شما نمی توانید از این تاکتیک ها چشم پوشی کنید، زیرا آن ها پایه های استراتژی کلی طراحی ریسپانسیو را شکل می دهند.
تاکتیک اصلی در این زمینه این است که نوع ترکیب بندی و عوامل طراحی سایت خود را بشناسیم. این عرض صفحه نمایش است که ترتیب عوامل طراحی سایت را مشخص می کند. در این میان، اندازه آیتم ها تغییر می کند و شما تغییراتی را در ترتیب عوامل سایت مشاهده می کنید.
یک طراحی وب سایت ریسپانسیو می تواند نقاط متغیری داشته باشد که ممکن است در هر یک از گوشی های همراه هوشمند، دسک تاپ، تبلت، لپ تاپ و غیره متفاوت باشد. تمامی این عوامل متغیر بر اساس اندازه صفحه نمایش می باشند و بر حسب آن تغییر می نمایند.
در هر صورت، باید روی چگونگی نمایش محتوا و جستجویابی ها تمرکز کنیم. با فهمیدن این موضوع می توانیم تغییر اندازه محتوا و جستجو یابی ها و یا به طور کلی عوامل طراحی سایت را در صفحه نمایش های مختلف درک کنیم. برای مثال، صفحه نمایش آی پد رتینا با کیفیت و وضوح بالا به راحتی همان عواملی را که در صفحه نمایش لب تاپ دیده می شود را به نمایش می گذارد، این در حالی است که صفحه کم کیفیت تبلت ها نیاز به تطابق پذیری بیشتری در این زمینه دارد تا عوامل وب سایت را همانند آن ها در معرض نمایش بگذارد.
دومین تاکتیک اصلی، کوتاه کردن زمان بارگیری وب سایت ها می باشد. اغلب اوقات در طراحی سایت ریسپانسیو، تیم طراحی سایت کشف می کنند که CSS که ساخته اند، می تواند سرعت بارگیری سایت را در هر ابزاری کاهش دهد.
مکان متناسب و هوشمند MEDIA QUERY و افزایش روز افزون آن ها می تواند به طور مستقیم سرعت اجرای CSS را در ابزارهای کوچک تر و کند تر کاهش دهد که به همین مقدار کاربردی بودن سایت نیز افزایش می یابد. اگر این کار را در مراحل اولیه طراحی وب سایت ریسپانسیو اعمال کنیم، تیم طراحی سایت دیگر نیازی ندارد تا در آینده و در طول پروسه طراحی به رفع اشکال بپردازد، هم چنین در نتیجه متوجه کاهش سرعت بارگیری سایت خود نیز می شوند.
سومین تاکتیک به بهینه سازی اندازه تصاویر باز می گردد. نظارت و مدیریت بر این تاکتیک، می تواند بسیار سخت باشد، زیرا اصول خاص و ثابتی برای این امر وجود ندارد. رتینا و دیگر تکنولوژی های با وضوح بالا، می توانند مشکلاتی را برای تمامی طراحی سایت ها به وجود بیاورند، زیرا این صفحه نمایش ها نیاز دارند تا تصویر در اندازه بزرگ و با کیفیت بالایی نمایش داده شود و این امر باعث کند بارگیری شدن این تصاویر می شود.
بحث های زیادی برای استاندارهای نظارت بر این مسائل وجود دارد. متاسفانه، هیچ کدام یک از این مباحث به تیم طراحی سایت کمک نکرده است تا درک کنند که چه کاری باید در این زمینه انجام دهند و بهترین عملکردهای ممکن چیست. زمانی که این موارد واضح و مشخص شوند، نظارت بر این موضوع آسان تر می گردد.
استدلال های نیاز به استراتژی طراحی ریسپانسیو وب سایت
زمانی که تیم طراحی سایت از این تاکتیک ها استفاده می نمایند، با استدلال هایی موجود در طراحی سایت ریسپانسیو رو به رو می شوند. اولین استدلال قابل توجه این است که دریابند چه مواردی را باید انجام دهند تا صفحه نمایش دسک تاپ در صفحه نمایش های کوچک نیز متناسب و مطابقت داده شود.
زمان زیادی طول نمی کشد تا متوجه شوند که تمامی عوامل در دسک تاپ نمی تواند در صفحه نمایش های کوچک متناسب شود. در این جا است که نیاز به یک استراتژی را حس می کنند.
ابتدا گوشی های همراه
در چند سال گذشته، LUKE WROBLEWSKI متوجه شد که تیم های طراحی وب سایت با این مشکل مواجه هستند. او شروع به ارائه ایده ای که “ابتدا گوشی همراه” می نامید، نمود. این ایده به این ترتیب است که تیم طراحی سایت با پیش طراحی شروع کنند و این سوال را از خود بپرسند “حداقل میزان محتوا و جستجویابی که طراحی سایت را کاربردی می سازد، چیست؟” و سپس باید شروع به یافتن حداقل ترکیب بندی های وب سایت کنند و روی آن ها کار می کنند و سپس باید این ترکیب بندی را ارتقاء داده و و به بهترین شکل ممکن در صفحه نمایش های کوچک و بزرگ نمایش دهند.
اصول اصلی این ایده به این ترتیب می باشد که افزودن مواردی به ترکیب بندی سایت راحت تر از حذف کردن آن می باشد. با شروع کردن حداقل ترین ترکیب بندی وب سایت، می توانید زمانی که فضای بیشتری در صفحه نمایش های بزرگ تر و با کیفیت تر در اختیار شما قرار گرفت، مواردی را بی افزاید.
LUKE پیشنهاد می کند که موارد مورد نظر را به ترکیب بندی وب سایت با دقت و به آرامی بی افزاید. احتمال دارد که مواردی در طراحی سایت کنونی تان باشد که در طراحی وب سایت ریسپانسیو نیاز نباشد.
ابتدا تحقیق کردن
آیا تیم طراحی وب سایت مشخص کرده است که با چه کاربرانی پیش رو هستند؟ چه تیم طراحی سایت روی طراحی ریسپانسیو کار کند و یا روی طراحی کنونی و معمولی، فرقی ندارد، در هر صورت آن ها متوجه می شوند که نمی توانند به برخی سوالات در این زمینه پاسخ دهند. آن ها باید ابتدا وظایف خود را به جا بیاورند.
به این صورت، تیم طراحی وب سایت شروع به تحقیقات، آنالیزها و دیگر متدهای تحقیقاتی می کنند تا دریابند کدام عملکرد ها مهم و برای اجرا در طراحی سایت متناسب می باشند.
بدون این تحقیقات، تیم طراحی سایت در هر تصمیم گیری و ارائه نظریات خود با مشکل مواجه می شوند. این تحقیقات یک روش کم هزینه و کوتاه مدتی است که در دراز مدت می تواند نتایج عالی برای تیم طراحی وب سایت داشته باشد.
ساخت یک پروسه برای انتخاب محتوا طراحی سایت
تمام تصاویر و کلماتی که در طراحی کنونی سایت وجود دارد، می تواند مشکلی در صفحه نمایش های کوچک باشد. برخی تیم ها از محتوای کنونی استفاده می کنند و برخی به دنبال محتوای متفاوت در صفحه نمایش های متفاوت می باشند.
البته این محتوا نباید به طور کامل در صفحه نمایش های کوچک متفاوت باشد. برای مثال، یک تیتر که در لب تاپ با کیفیت نمایش داده می شود، ممکن است به خوبی در صفحه نمایش های موبایل عملی نشود.
استراتژی محتوا باید با استراتژی طراحی ریسپانسیو مطابقت می یابد. زمانی که این استراتژی درک شود، تیم طراحی وب سایت می تواند از پروسه و ابزارهای مدیریت محتوا پشتیبانی کند و به درستی آن ها را در سایت خود به کار ببندد.
تغییر اطلاعات به تعاملات
تیم طراحی سایت برای طراحی ریسپانسیو سایت نیازمند به استراتژی برای ساخت تعاملات در جایی که اطلاعات سایت قرار دارد، می باشد. با استفاده از رابط کاربری تعاملی، کاربران وب سایت می توانند به طور مستقیم با سایت در ارتباط باشند و داده هایی که به دنبال آن بودند را بیابند.
حتی جستجویابی ها که از پیش در وب سایت توسط منوهایی تنظیم شده بود، حالا نیاز است تا به صورت تعاملی تغییر یابد. صفحه نمایش های کوچک تمایل دارد تا داده ها به صورت تعاملی باشند و انجام عملکردها و فعالیت ها در وب سایت برای کاربران سایت آسان باشد.
باید با تصاویر چه کاری انجام دهیم
هر چیزی در این استراتژی با تصاویر در ارتباط است. یک استراتژی طراحی وب سایت ریسپانسیو می داند که باید با هر تصویر چه کاری انجام دهد.
می توانید مقاله هایی درباره تصاویر و نمودار ها در وب سایت را بررسی کنید. برای هر تصویر، تیم طراحی وب سایت نیاز دارد تا تصمیم گیری کنند که چه عملی در چه زمانی مناسب است تا روی آن ها اعمال کنند. آیا تصاویر را در صفحه نمایش های کم کیفیت بهینه سای کرده اید؟ آیا تصاویر را کراپ کرده اید؟ آیا درباره تغییر اندازه و کراپ کردن تصاویر چیزی می دانید؟ آیا تصاویر به راحتی بزرگنمایی می شوند؟
اگر روی وب سایت جدیدی کار می کنید، باید بدانید که داشتن یک استراتژی برای تطابق تصاویر در وب سایت ها می تواند به طور چشمگیری کمک کننده باشد. این موضوع به معنی دانستن تیم طراحی از چگونه تصمیم گیری برای هر تصویر می باشد تا بتوانند به بهترین وجه طراحی خود را نمایان کنند. وب سایت هایی که به تصاویر ارج می نهند، نیاز به استفاده از استراتژی مشابه خواهند داشت.
این استراتژی شما را راهنمایی می کند که چگونه به هدف خود برسید
قبول داشتن طراحی سایت ریسپانسیو، نیازمند ایجاد تغییراتی در پروسه طراحی دارد که به طراحی بصری و تعاملی وب سایت نیز باز می گردد و البته روی این موضوع تمرکز دارد که اهداف شما چیست و کاربران سایت مورد نظرتان چه کسانی هستند. آماده بودن برای استفاده از این استراتژی می تواند تغییرات را برای طراحی ریسپانسیو وب سایتش آسان کند.
مجید احدی
مجید احدی هستم، تولید کننده محتوا برای سایت، قبلا در زمینه تعمیرات موبایل و مدتی هم در زمینه دوربین های مداربسته فعالیت داشتم. در حال حاضر مدتی هست که به حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان تولید کننده محتوا و ویرایشگر سایت فعالیت می کنم.
مطالب پیشنهادی
روش هایی جهت حفظ رتبه در موتورهای جستجو
25 مهر 1396