⁣⁣⁣⁣⁣⁣🔥 تغییر اندازه تصاویر تاثیر مثبتی در سرعت بارگذاری آن ها به خصوص در صفحات سنگین دارد. البته منظور تغییر اندازه با #HTML یا #CSS نیست.

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

#UI #UX #frontend

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 پیشنهاد می شود پسوردها را در موبایل مخفی نکنید.

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

#UI #UX #frontend

⁣✅ @coderszone

🔥نمونه #طرح الهام بخش صفحه مقایسه محصول

#UI #frontend

✅@coderszone

🔥وقتی یه کارآموز در مورد پروژه و کد ها اظهار نظر می کنه 😂😂😂

#gif

✅@coderszone

⁠⁣🔥یکی از ویژگی های حیاتی برای فروشگاه های اینترنتی نمایش ارزیابی مشتریان از یک محصول (#product_reveiws) است.

بر طبق مطالعات، 63% از مشتریان، احتمال بیشتری در خرید از سایت هایی که "ارزیابی محصول" دارند انجام می دهند.

در مجموع، #product_review ها موجب افزایش 18درصدی فروش می شوند. دلیل آن نیز ساده است : "مشتریان به ارزیابی ها بیشتر از توضیحات خود محصول، اعتماد می کنند".

#marketing

✅@coderszone

⁣⁣🔥 عنصر dialog که در ⁣HTML5.2 معرفی شده است برای ساخت ⁣pop-up ها و modal ها استفاده می شود. صفتی بولین به نام open دارد که برای نمایش دادن یا مخفی کردن آن کاربرد دارد.


⁣✅@coderszone

⁣🔥 استفاده از رنگ متن تیره بر روی رنگ پس زمینه لایت، از دسترسی پذیری بالاتری برخورد دار بوده و غالبا بهتر به نظر می آید.

#tips #UI #UX #frontend

⁣✅@coderszone

⁠⁣🔥 بر طبق مطالعات #⁣GoDaddy حدود 74% از هک سایت ها با اهداف #SEO انجام می گیرد.

#هکرها با افزودن یک لینک یا یک صفحه جدید، می توانند یک سایت جدید را به جای سایت هک شده به #گوگل قالب کنند!

در نهایت هک شدن وبسایت می تواند بر روی رتبه آن تاثیر گذاشته و حتی آن را در blacklist گوگل نیز قراردهد.


⁣✅@coderszone

⁣⁣🔥 فریم ورک ⁣⁣Pyramid: فریمورکی به منظور طراحی سریع وب #اپلیکیشن ها با زبان #Python

⁣👇⁣👇👇⁣👇⁣👇
⁣🌐⁣⁣https://goo.gl/pMPaQk

⁣✅@coderszone

⁣🔥 نمونه #طرح الهام بخش عملیات جستجو در #اپ های #اندروید

#android #UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 همه چیز را در یک #صفحه قرار ندهید.

🌟 گنجاندن تمامی عناصر شامل منوها، قابلیت ها و #دکمه ها در یک صفحه یکی از اشتباهات رایج از نظر #UX است که در بسیاری از #اپ ها مشاهده می شود.

مطالعات نشان می دهد مغز انسان در بهترین حالت، فقط 9 گزینه را می تواند به صورت همزمان درک کند و معمولا 90% از کاربران نیازی به استفاده از همه دکمه ها ندارند.

#UI #frontend

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 بررسی ها نشان می دهند در صورتی که زمان بارگذاری صفحات #وب از 1 به 5 ثانیه برسد، احتمال ترک صفحات توسط کاربران تا 90% افزایش می یابد.

#SEO #UI #frontend

✅ @coderszone

⁠⁣⁣🔥 یکی از پارامترهایی که میتواند بر روی رتبه شما در #موتورهای_جستجو تاثیر مستقیم داشته باشد استفاده از HTTPS است. #HTTPS ورژن امن شده HTTP است که بر پایه SSL بنا شده است و با رمزگذاری اطلاعاتی که رد و بدل می شوند از آسیب دیدن یا تغییر یافتن آن در حین انتقال جلوگیری می کند.

#گوگل، HTTPS را بر HTTP ترجیح می دهد. به علاوه از آنجایی که اخیرا مرورگر #chrome نیز کاربران را از عدم پشتیبانی یک سایت (صفحه) از این پروتکل آگاه می سازد این امر ممکن است موجب شود بازدیدکنندگان قبل از هر چیز، از مشاهده سایت شما صرفنظر کنند.

اخیرا گوگل پشتیبانی از HTTPS را به عنوان یکی از فاکتور های رتبه بندی در الگوریتم های خود منظور کرده است چرا که موتورهای جستجو می خواهند امن ترین تجربه برای کاربر را رقم بزنند.



#tips #SEO

⁣✅@coderszone

🔥نمونه #طرح خلاقانه نظرسنجی در #اپ های #اندروید

#inspiration #UI #frontend

✅@coderszone

⁠⁣⁣⁣🔥 همان طور که می دانید از تگ #main برای نمایش محتوای یکتا و اصلی در هر صفحه وب استفاده می شود. تا قبل از نسخه #HTML_5.2، می بایست تنها از یک تگ #main در صفحه استفاده می شد.

اما با ظهور و همه گیری صفحات #SPA پایبندی به این قاعده کمی دشوار به نظر می رسد.

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

#UI #UX #frontend

⁣✅@coderszone

⁠⁣⁣⁣🔥 غالبا دو مکان برای نمایش خطاهای رخ داده در #فرم وجود دارد. نمایش در بالای فرم و نمایش به صورت #inline .

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

در عوض نمایش inline پیام ها در جلوی فیلدها، سبب می شود کاربر بهتر و سریع تر به خطاهای خود پی ببرد.

در روش inline نیز بهترین مکان برای نمایش پیغام، در سمت راست(چپ) فیلدها در فرم های چپ چین(راست چین) می باشد.

#UI #UX #frontend

⁣✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 طبق آمار، #React، #jQuery ، #Angular و #Vue چهار کتابخانه محبوب #frontend بوده اند که بیشترین دانلودها در #npm در سال 2018 را به خود اختصاص داده اند.

#UI #frontend

⁣✅ @coderszone

⁠⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥 7 اصل اساسی در #SEO که نباید از آن ها غافل شوید:

💡مطمئن شوید که نقشه #XML سایت شما کاملا به روز است.
⁣💡از #کلمات_کلیدی طولانی استفاده کنید.
⁣💡محتوای منحصر به فردی که حاوی کلمات کلیدی مختلف است تولید کنید.
⁣💡از سایت های دیگر #backlink بگیرید.
⁣💡از مقداردهی صفت alt تصاویر غافل نشوید.
⁣💡از #mobile_friendly بودن وبسایت خود اطمینان حاصل کنید.
⁣💡سایت خود را همواره تست کنید تا از سرعت بارگذاری آن مطمئن شوید.


⁣✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 در طراحی صفحات 404 تنها به نمایش یک پیغام ساده که هیچ کمکی به #کاربر نمی کند اکتفا نکنید.

5 آیتم زیر باید در یک صفحه 404 گنجانده شود:

💡 مطالب و محتواهای دیگری به کاربر پیشنهاد کنید.

💡 یک #search_bar در اختیار او قرار دهید.

💡 منوی اصلی #سایت در دسترس باشد.

💡 لینک صفحات محبوب و پربازدید را قرار دهید.

💡 لینک به صفحه اصلی فراموش نشود.

#UI #frontend #UX

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 هیچ گاه برای نمایش متون در صفحات #وب از سایزهای کوچکتر از 16px استفاده نکنید. 16px تقریبا هم اندازه متون چاپی کتاب ها و مجلات است که چشم کاربران بهترین سازگاری را با آن ها دارد.

#UX #UI #frontend

✅ @coderszone