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

#UI #frontend

✅ @coderszone

🔥همپوشانی تصاویر روشی جذاب برای عمق دادن به طرح شماست. استفاده از یک border هم رنگ با پس زمینه نیز می تواند به تمایز آن ها از هم کمک کند.

#UI #UX #frontend

✅@coderszone

🔥برای سایت خود از کلمات کلیدی طولانی (#long_tail_keywords)استفاده کنید.

کلیمات کلیدی طولانی، کلمات و عباراتی هستند که از حد معمول (که غالبا یکی دو کلمه هستند) بیشتر بوده و موجب می شوند ترافیک هدفمندتری به سایت شما هدایت شوند.

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

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

https://goo.gl/Xqc9Hn

#seo

✅@coderszone

⁣⁣⁣⁣⁣⁣🔥 مرورگر #chrome در نسخه اخیر خود ابزاری برای تنظیم سایه ها اضافه کرده است.

#browsers

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥اجرای #بازی Gran Turismo Sport با رزولوشن 8K و 120 فریم بر ثانیه !

#game

⁣✅ @coderszone

از border ها کمتر استفاده کنید:

استفاده بیش از حد از border ها برای جدا سازی عناصر، باعث شلوغی و به هم ریختگی طرح شما می شود.
#UI #UX #frontEnd

✅@coderszone

⁣⁣⁣⁣⁣⁣🔥#گوگل رسما از طرح جدید صفحه جستجوی خود که دارای یک هدر #sticky حاوی نوار جستجویی با گوشه های گرد است رونمایی کرده است.

#google #search_engine

⁣✅ @coderszone

وقتی مدیر پروژه اولین پروژه اختصاصی رو به کارآموز میده

#gif

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥اگر نیاز دارید که چارچوب عناصری که صفحه شما را ساخته اند ببینید، کافی است دستور زیر را در کدهای CSS خود بگنجانید:

* { outline: 1px solid red; }

#UI #frontend #css #tip #trick

✅ @coderszone

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

✅@coderszone

🔥 در بسیاری از اپلیکشین های موبایل، دکمه ها بسیار کوچک هستند و این منجر می شود که کاربران نتوانند به راحتی آن ها را لمس کنند.

مطالعات موسسه MIT Touch Lab نشان می دهد که اندازه میانگین برای سر انگشت 10-14 میلی متر و برای نوک انگشتان 8-10 میلی متر است.

💥 در نتیجه باید حداقل اندازه 10x10 میلی متر را برای عناصر قابل لمس در نظر گرفت.

https://goo.gl/SYLn9b

#tips #UI #UX #android

✅@coderszone

🔥 نمونه از کاربرد #effect ها در پیاده سازی #tab_bar یک app #موبایل

#UI #frontend #android #iOS

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 با اینکه گنجاندن تصاویر #gif در صفحات وب ساده تر از #video هاست اما پیشنهاد می شود جهت نمایش محتوای متحرک، حتی الامکان از ویدیوها به جای gif استفاده کنید. چرا که معمولا ویدیوها حجم کمتری نسبت به تصاویر gif دارند.

برای تبدیل gif به ویدیو می توانید از سرویس آنلاین زیر استفاده کنید:

🌐 https://ezgif.com/gif-to-mp4

#UI #frontend #tip #trick

✅ @coderszone

🔥یکی از اشتباهات رایج در #فروشگاه های اینترنتی، عدم تمرکز بر روی یک موضوع خاص است. در واقع بسیاری از آن ها می خواهند همه کاره باشند.

مثلا اگر شما یک #فروشگاه_آنلاین با موضوع پوشاک دارید، اما در عین حال به فروش مبلمان و فرش نیز می پردازید، مشتریان نمی توانند به شما اعتماد کنند و شما را به عنوان یک متخصص در آن زمینه نمی دانند.

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

https://goo.gl/GXgcwB

#digital_marketing

✅@coderszone

🔥هر چند که تصاویر برداری طوری طراحی شده اند که در هر اندازه ای
کیفیت خود را حفظ می کنند، اما همیشه سعی کنید #آیکون هایی را که
برای اندازه های 16-24 پیکسل طراحی شده اند را به 3 یا 4 برابر
کوچکتر از اندازه اصلیشان نمایش ندهید چرا که جزئیات آن ها مشخص
نبوده و غیر حرفه ای به نظر خواهند رسید.

اگر آیکن های کوچکی در اختیار دارید میتوانید آن ها را داخل shape
های دیگری قرار داده و به آن رنگ پس زمینه بدهید.

https://goo.gl/1g8jUe

#tips #frondend #UI #UX

✅ @coderszone

🔥شواهد بسیاری وجود دارد که نشان می دهد #گوگل وبسایت ها را بر اساس میزان اقبال کاربر به آن ها #آنالیز می کند. هر چه کاربر مدت زمان بیشتری در سایت شما باشد گوگل نیز امتیاز بیشتری به شما خواهد داد.

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

از طرف دیگر، نرخ پرش(#bounce_rate) کاربران نیز تاثیر مستقیمی در رتبه شما دارد. هر چه کاربران زودتر سایت شما را ترک کنند، امتیاز کمتری از گوگل خواهید گرفت.
https://goo.gl/XeQcye

#seo

✅@coderszone

🔥زمان و سرعت اجرای انیمیشن ها

زمانی که قرار است عناصر تغییر وضعیت یا مکان بدهند، مدت زمان اجرای #انیمیشن آنها باید به قدری باشد که کاربر متوجه تغییرات بشود.نه خیلی سریع و نه خیلی آهسته که کاربر را خسته کند.

تحقیقات بسیاری نشان داده است که سرعت بهینه برای اجرای انیمیشن ها، بین 200 تا 500 ms می باشد. سرعت های کمتر از 100ms اصلا تشخیص داده نمی شوند و سرعت های بیشتر از 1 ثانیه نیز برای کاربران خسته کننده است.

https://goo.gl/XkFVyn

#UI #UX #frontend

✅@coderszone

⁠⁠⁣🔥پروژه #AMP (Accelerated Mobile Pages)، پروژه ای متن باز است که به منظور بهبود سرعت و عملکرد صفحات وب ایجاد شده است. این پروژه توسط #گوگل پشتیبانی می شود و #Bing ، #Twitter و #Pinterest نیز از آن حمایت کرده اند.

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

این پروژه، افزایش سرعت سایت ها، تجربه بهتر کاربران، بیشتر و بهتر دیده شدن نتایج را به ارمغان می آورد.

🌐 https://goo.gl/7Y2kFN

#AMP #technology

✅@coderszone

⁠⁣⁣⁣⁣⁣⁣🔥⁣ با استفاده از خاصیت ⁣scroll-behavior در #CSS می توان سبک اجرای scrolling در عناصری که قابل اسکرول هستند را کنترل کرد. این خاصیت از مقداری به نام smooth پشتیبانی می کند که باعث می شود عمل اسکرول به جای پرش یکباره به صورت انیمیشنی انجام شود.

استفاده از این خاصیت برای عنصر root صفحه، آن را به viewport #مرورگر اعمال خواهد کرد.

🌐⁣⁣https://goo.gl/Jb4P8A

✅@coderszone

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

✅@coderszone