Gustavs Smitins’ Post

Hi! I will continue sharing #accessibility tips every week. Today will be #colorContrast. https://lnkd.in/geE4seQn This is important because many people can't see colors like red-green or blue-yellow, and some can only see gray (achromatopsia) The last webAIM report that checked one million home pages found that 81% have low-contrast text. You can check color contrast with some tools or websites. Some are: - https://lnkd.in/g_csxQrT Suggest accessible color palette - https://lnkd.in/gwPdmCKq Check the color contrast between 2 colors and suggest colors with the correct color contrast. - https://lnkd.in/gbqbbzsT Chrome extension that found accessibility bugs and for color contrast suggest colors with enough color contrast

💡 100 Days of Tech Tips No one likes a website that looks great on a laptop but breaks on a phone. Today is about ensuring your website fits on any device—whether a mobile screen or a large desktop monitor. You need to master media queries in CSS, grid system, and fluid images to create layouts that respond beautifully, no matter the screen size. Keep your design clean, and your users will thank you! #100DaysofTechTips #techtips #okemmanuel #codingtips

Learn how to customize the Brave browser look and appearance. You can change to dark mode, customize the font sizes, and enable or disable the options per need. 💡You can read here 👉 https://lnkd.in/dB9bMWPc

Exciting Update: New Feature Alert! I'm thrilled to announce a significant update to my Chrome extension, PixelPeek! What’s New? Display Dimensions Tooltip: Now, you can seamlessly see both the displayed and original pixel sizes of various elements on any webpage. Whether it's images, videos, SVGs, buttons, or even links - just hover over, and the magic happens! Optimized Performance: Leveraging IntersectionObserver and MutationObserver, the extension now dynamically handles and updates elements as you scroll, ensuring a smooth and responsive experience. Improved User Experience: Enhanced tooltips with clear, concise information about element dimensions, making web development and debugging more efficient and enjoyable. This update is all about making your web development journey easier and more intuitive. Happy coding! Check out the updated extension here: https://lnkd.in/gpJTjvaB

Day 25 of #100DaysOfCode 👉 I created a collection page that a displays the category of products that the user wants to check by using the collection name with useParams in react-router-dom. 👉 I have not created a array for each collection category yet but the collection name is displayed when the view collection link is clicked. 👉 I also made a latest items page that displays the new arrivals, hot items, and on sales items based on which the user mouse enters last. 👉 The latest items page can be viewed with the view all button beneath the hot items, new arrivals and on sales section, I have not made the styling of the page responsive on all devices yet. Link to project: https://lnkd.in/e-sP9jAa

Captivating design, urgent message! 🚨 White, grey, and a pop of red set the stage for this digital interface alert. Vertical layout for easy reading, announcing a new device sign-in on your account. Stay vigilant and secure your info. Modern, sleek, and attention-grabbing, this visual mix of YouTube and account safety is both unexpected and powerful. Are you ready to take control?

🛠️ Building Responsive Layouts: Media Queries + Flexbox Flexbox is a powerful layout tool, and when combined with media queries, you can create incredibly flexible and responsive designs. Imagine a navigation menu that reflows gracefully from a horizontal layout on desktop to a vertical one on mobile. Flexbox and media queries make it possible with just a few lines of code! 🧩 Here’s to building layouts that look great on any device! #CSS #Flexbox #ResponsiveDesign

“Accessibility” is a phrase that (hopefully) is being heard and used more than ever in design and communications today. There are many reasons for adopting accessible design into your work. Some of the reasons accessibility is important to consider are because it:    1. Promotes inclusivity: Everyone will be able to access your resources or information, regardless of their ability. 2. Avoids legal liability: Organizations can be sued if their websites aren't accessible. 3. Makes for better design: Websites designed for accessibility tend to be both more aesthetically pleasing and better suited for search engine optimization.    One excellent resource we use to check our designs for color combinations and text readability is the Accessible Web color contrast checker. It’s free, easy to use, and gives you two sets of compliance results. Put some of your designs to the test today: https://lnkd.in/ey_GVNaK

Implemented 4 new web safe fonts with a different style for: ✅ QR codes system ✅ Biolink pages ✅ Status pages ✅ Vcards ✅ QR Menus ✅ 66socialproof widgets

💥 Aaron Moore has been asking me to share some mobile Premium A+ examples. Most often I share only the desktop version because it’s easier to view on LinkedIn BUT over 60% of online shopping is done on mobile so of course we upload a separate set of mobile designs for all Premium A+ that we design. The designs are very similar but if you pay attention to this video you can see the mobile formatting has very different dimensions. Elements and fonts within the designs are optimized for these mobile dimensions. This one is for you Aaron! 🙌 🚨👉🏽AND don't miss our insane Conversion Increase Challenge coming soon 👉🏾👉🏾 https://lnkd.in/d4JuXFZ8