تکنیک های ضروری  طراحی ریسپانسیو

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

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

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

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

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

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

تاریخچه

اولین سایتی که طرحی داشت که عرض سایت با عرض مرورگر همسان و سازگار می شد، Audi.Com بود که در اواخر سال 2001 توسط تیمی به نام razorfish متشکل از یورگن اسپانگل (Jurgen Spangl)، جیم کالباچ (Jim Kalbach) که متخصص معماری اطلاعات بودند، کن اولینگ (Ken Olling) طراح، و جان هافمن (Jan Hoffmann) توسعه دهنده رابط کاربری، تشکیل شد.

از سال 2008 نام های مختلفی روی این سبک از سایت همانند انعطاف پذیر، مایع، ارتجاعی و کش سان، و سیال گذاشته شد اما سرانجام در سال 2010 Ethan Marcotte اصطلاح طراحی وب پاسخگو یا همان Responsive Web design  را برای این سبک نامگذاری کرد.او همچنین در سال  2011 در کتابی با همین عنوان به توضیح تئوری و تکنیک های این سبک پرداخت که در سال 2012 در یکی از مجلات معتبر حوزه آی تی و طراحی سایت رتبه دوم را کسب کرد.

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

بهترین تکنیک های طراحی ریسپانسیو

نکاتی برای ایجاد یک وبسایت ریسپانسیو قدرتمند

تکنیک های Responsive Web Design یکی از جذاب ترین ویژگی های یک وبسایت خوب می باشد که می تواند تجربه کاربری و UX بسیار خوبی از سایت را به کاربران دستگاه های مختلف بدهد.این یک ویژگی ضروری است که تمامی وبسایت ها باید داشته باشند، چرا که اتفاق کاملا غیرمنطقی و غیرممکنی است که انتظار داشته باشیم تمامی دستگاه ها و صفحه های نمایشی که کاربران با آنها برای دسترسی به سایت ما استفاده می کنند یک اندازه و یک مدل است.داشتن یک سایت ریسپانسیو به این معنی می باشد که "یک وبسایت برای همه دستگاه ها داشته باشیم".دیگر هیچ نیازی به داشتن یک وبسایت دیگر برای موبایلتان نخواهید داشت و این اتفاق منجر به صرفه جویی در هزینه های شما می شود.

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

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

اولین رویکرد طراحی ریسپانسیو موبایل است

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

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

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

بهینه سازی تصاویر

برخی افراد، پهنای باند خود را با قرار دادن و فرستادن عکس های با رزولوشن و وضوح بالا به تمامی دستگاه ها، هدر می دهند.بعضی دیگر هم تصاویری با رزولوشن عادی به تمامی دستگاه ها می فرستند؛ تصاویری معمولی با وضوح پایین برای دستگاه هایی با رزولوشن بالا!برای پرهیز از این اشکال شما می توانید گرافیک بُرداری مقیاس پذیر (Scalable) بر فرض برای لوگو سایت به کار بگیرید؛ برای موارد دیگر شما به تصاویر کوچکتر و بزرگتر بسته به دستگاه نیاز دارید.

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

فشرده سازی عناصر وبسایت

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

حذف محتوای غیرضروری

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

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

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

حداقل ها را در نظر بگیرید

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

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

صفحه بندی

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

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

استفاده از CSS Sprites

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

این نکته را به یاد داشته باشید که CSS Sprites بدون کمک خارجی نمی تواند خیلی مقیاس پذیر باشد، به این منظور می توانید از CSS 3 استفاده کنید که با اکثر مرورگرها هم سازگار است استفاده کنید.

تصاویر بُرداری و مقیاس پذیر

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

برای مقیاس پذیری، ویژگی های ارتفاع و عرض را که به صورت خودکار روی تصاویر قرار دارد، حذف کنید.

دلایل اهمیت طراحی ریسپانسیو

1-گسترش و انفجار استفاده از موبایل

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

• همانطور که در بالاتر هم اشاره شد بسیاری از جستجوها در گوگل از طریق موبایل، و به صورت جستجوی متنی یا صوتی صورت می گیرد.
• در سال 2012، بیش از نیمی از جستجوهای محلی از طریق دستگاه های موبایلی انجام شد.
• در کشور ایالات متحده آمریکا، 25% از کاربران اینترنت تنها از طریق موبایل به اینترنت دسترسی دارند.
• 61 درصد از مردم دید و نظر بهتری در مورد سایتی که تجربه استفاده خوبی از موبایل به آنها بدهد دارند.
• آمار ایمیل هایی که در دستگاه های همراه باز می شوند، نزدیک به 26درصد در موبایل و 10 درصد در تبلت می باشد.

2- وبلاگ نویسی و فعالیت در شبکه های اجتماعی منجر به ورود کاربران موبایلی می شود

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

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

3- طراحی ریسپانسیو برای سئو بسیار مطلوب است

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

4- سرعت وبسایت ریسپانسیو یک ویژگی کلیدی است

بر طبق توصیه Google PageSpeed Developers و استانداردهایی که معرفی کرده است، اطلاعات سایت در دستگاه های موبایلی باید در کمتر از 1 ثانیه و کل صفحه سایت در کمتر از 2 ثانیه بارگزاری شود.حال اینکه به طور عمومی، بارگزاری سایت های دسکتاپی در موبایل در این زمان تقریبا غیرممکن است.زمانی که کاربر برای بازشدن هر صفحه از سایت زمان زیادی بگذارد، احتمال اینکه سایت را ترک کند و حتی دیگر برنگردد بسیار بالا است.

5- Responsive با دستگاه ها و پلتفرم ها در آینده همسان تر است

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

پس در آینده، ورود دستگاه های جدید (تلویزیون ها، ساعت ها، عینک ها، انواع موبایل ها و...) میتوانند به راحتی این دسته از سایت ها را پشتیبانی کنند، و سایت شما هنوز هم شکیل و زیبا به نظر می آید.

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

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