هدف از طراحی وب ریسپانسیو چیست؟
طراحی وب ریسپانسیو (RWD) و تجربه کاربری
تعریف طراحی ریسپانسیو
طراحی وب ریسپانسیو (RWD) یک رویکرد توسعه وب است که تغییر ظاهری وب سایت را تغییر می دهد، بسته به اندازه صفحه نمایش و جهت دستگاه مورد استفاده برای مشاهده آن. RWD یک رویکرد به مسئله طراحی برای بسیاری از دستگاه های موجود برای مشتری است، اعم از تلفن های کوچک و مانیتورهای دسکتاپ بزرگ.
RWD با استفاده از اصطلاحات نقطه توقف به منظور تعیین چگونگی ظاهر یک سایت ظاهر می شود: یکی از طرح ها در یک نقطه پایانی استفاده می شود و یک طراحی دیگر در زیر نقطه پایانی استفاده می شود. نقطه توقف معمولا بر اساس عرض مرورگر است.
همان HTML در همه دستگاه ها استفاده می شود، با استفاده از CSS (که تعیین می کند طرح صفحه وب) تغییر ظاهر صفحه. به جای ایجاد یک سایت جداگانه و پایگاه کد مربوطه برای مانیتورهای صفحه نمایش، دسکتاپ، لپ تاپ ها، تبلت ها و تلفن های دارای اندازه های مختلف، یک پایگاه داده تنها می تواند کاربرانی را با نمایشگر های مختلف اندازه گیری کند.
در طراحی ریسپانسیو ، عناصر صفحه تغییر حالت می دهند، زیرا نمایشگر رشد می کند یا کاهش می یابد. یک طراحی دسکتاپ سه ستون ممکن است به دو ستون برای یک قرص و یک ستون تک برای یک گوشی هوشمند تغییر وضعیت دهد. طراحی ریسپانسیو مبتنی بر شبکه های مبتنی بر نسبت به تنظیم مجدد محتوای و عناصر طراحی است.
در حالی که طراحی ریسپانسیو به عنوان راهی برای دسترسی برابر با اطلاعات بدون در نظر گرفتن دستگاه ظاهر شد، همچنین ممکن است موارد خاصی مانند تصاویر پس زمینه مانند مثال حمل و نقل لندن، محتوای ثانویه یا ناوبری تکمیلی را در صفحه های کوچکتر پنهان کنید. تصمیمات در مورد پنهان کردن محتوا و عملکرد و یا تغییر ظاهر برای انواع دستگاه های مختلف باید بر اساس دانش کاربران و نیازهای آنها باشد.
RWD دارای مزایای بالقوه ای نسبت به ایجاد سایت های جداگانه برای انواع دستگاه های مختلف است. استفاده از یک پایگاه داده تنها می تواند توسعه سریعتر را در مقایسه با توسعه 3 یا 4 سایت متمایز ایجاد کند و در طول زمان باعث راحتی تعمیر و نگهداری می شود، زیرا یک مجموعه از کد و محتویات باید به جای 3 یا 4 به روز شود. RWD نیز نسبتا "آینده است ضد "در آن است که می تواند نقطه توقف جدید مورد نیاز در هر زمان پشتیبانی می کند. اگر یک دستگاه 5 اینچی یا دستگاه 15 اینچی در بازار برود، کد میتواند از دستگاههای جدید پشتیبانی کند. RWD به یک دستگاه خاص متصل نیست.
از آنجایی که عناصر باید قادر به تغییر اندازه و زدن، اغلب ساده تر است که یک طراحی واکنش پذیر را در یک سایت که بر روی محتوا متمرکز شده است، به جای قابلیت اجرا، آسان تر کند. داده های مجتمع یا تعاملات می تواند سخت باشد به قطعات مدولار که به راحتی در اطراف یک صفحه حرکت می کنند، در حالی که حفظ وضوح و قابلیت.
ایجاد تجربیات قابل استفاده
از آنجاییکه طراحی ریسپانسیو به عناصر خرد شدن در اطراف صفحه متکی است، طراحی و توسعه نیاز به همکاری نزدیک برای اطمینان از تجربه قابل استفاده در دستگاهها دارد. طراحی ریسپانسیو اغلب به حل یک پازل تبدیل می شود چگونگی تغییر عناصر در صفحات بزرگتر را به صفحات کوتاه تر و طولانی و برعکس. با این حال، اطمینان از این که عناصر درون یک صفحه متناسب نیست، کافی نیست. برای طراحی ریسپانسیو برای موفقیت، طراحی باید در تمام وضوح و اندازه صفحه نمایش قابل استفاده باشد.
هنگامی که عناصر در اطراف صفحه حرکت می کنند، تجربه کاربر می تواند کاملا متفاوت از یک دیدگاه از سایت به بعد باشد. مهم است که تیم های طراحی و توسعه با یکدیگر همکاری نمی کنند تا فقط تعیین کنند که محتوای چگونه باید در اطراف قرار گیرد، بلکه باید دید که نتیجه نهایی این تغییر چه تاثیری بر تجربه کاربر دارد.
بسیاری از تیم ها به چارچوب طراحی محبوب ریسپانسیو مانند Bootstrap برای کمک به ایجاد طرح ها نگاه می کنند. چنین چارچوب ها می تواند کمک بزرگی در توسعه همراه باشد. با این حال، به دقت بررسی کنید که چگونه چارچوب با محتوا و عملکرد سایت خود کار خواهد کرد، نه اینکه چگونه به طور کلی کار می کند.
ما همیشه توصیه می کنیم تست قابلیت استفاده در طرح ها را انجام دهید. برای طرح های ریسپانسیو، توصیه می کنیم از طریق سیستم عامل ها تست کنید. این به اندازه کافی پیچیده است که یک وبسایت را طراحی کنید که روی دسکتاپ قابل استفاده باشد. حتی طراحی وب سایت که در بسیاری از تغییرات و تنظیمات عناصر آن، در بین اندازه ها و جهت های مختلف صفحه نمایش قابل استفاده است، بسیار پیچیده است. همان عنصر طراحی که ممکن است روی یک دسک تاپ کار کند، ممکن است به سختی روی یک تلفن هوشمند یا برعکس کار کند.
تمرکز بر محتوا
اولویت بندی محتوا یک جنبه کلیدی برای طراحی خوب ریسپانسیو است. محتوای بسیار بیشتر بدون پیمایش در یک مانیتور دسکتاپ بزرگ نمایش داده می شود از روی صفحه نمایش گوشی های هوشمند کوچک. اگر کاربران فورا آنچه را که بر روی یک مانیتور دسکتاپ می خواهند ببینند، به راحتی می توانند در اطراف صفحه آن را کشف کنند. در گوشی های هوشمند، ممکن است کاربران مجبور به بی نهایت برای کشف محتوای مورد علاقه حرکت کنند. اولویت بندی محتوا هوشمند به کاربران کمک می کند آنچه را که نیاز دارند به صورت موثر تر پیدا کنند.
اصلاحات
عملکرد همچنین می تواند یک موضوع با طراحی ریسپانسیو باشد. RWD همان کد را به تمام دستگاه ها ارائه می دهد، صرف نظر از اینکه قطعه کد مربوط به آن طرح یا نه. تغییرات در طراحی روی سمت سرویس گیرنده رخ می دهد، به این معنی که هر دستگاه - تلفن، رایانه یا رایانه کد کامل را برای همه دستگاه ها دریافت می کند و آنچه را که نیاز دارد، می گیرد.
گوشی هوشمند 4 اینچی همان کد را به عنوان مانیتور دسکتاپ 24 اینچی دریافت می کند. این باعث می شود که عملکرد گوشی های هوشمند کاهش یابد، که ممکن است با اتصال داده های آهسته تر، متمایز تر متصل شود. (به همین دلیل است که برخی از سایت ها به طراحی انطباقی تبدیل می شوند، جایی که سرور میزبانی وب سایت، دستگاهی را که درخواست را ایجاد می کند تشخیص می دهد و دسته های مختلفی از کد HTML را بر اساس آن دستگاه ارائه می دهد.)
برای ارزیابی تجربه کاربر از طراحی ریسپانسیو خود را فقط در راحتی دفتر خود، در سرعت بالا خود تست کنید. با استفاده از تلفن هوشمند خود، بین ساختمان های بلند در یک شهر، در اتاق های کنفرانس داخلی و یا زیرزمین، در مناطق دور افتاده با اتصال نقطه ضعف، در نقاط شناخته شده برای اتصال شبکه تلفن همراه خود، به وحشی می روید و ببینید که چگونه سایت شما در حال انجام است شرایط متنوع هدف بسیاری از طرح های ریسپانسیو، دسترسی معقول به اطلاعات بدون در نظر گرفتن دستگاه است. اگر بارکد بارگیری غیر قابل تحمل باشد، یک کاربر گوشی هوشمند تجربه مشابهی با کاربر دسکتاپ ندارد.
نتیجه
طراحی ریسپانسیو یک ابزار است، نه یک درمان همه. با استفاده از طراحی ریسپانسیو ، هنگام طراحی در میان دستگاهها، استفاده از این تکنیک ها بسیار زیاد است، با استفاده از تکنیک یک تجربه قابل استفاده را تضمین نمی کند (همانطور که استفاده از یک دستور غذای لذیذ سبب ایجاد یک غذای باشکوه نمی شود.) تیم ها باید بر روی جزئیات محتوای، طراحی، و عملکرد برای حمایت از کاربران در همه دستگاه ها.
