#responsivedesign

Rethinking Responsive Grids With a Content-Aware Approach, by @webdesignerdepot.bsky.social:

https://webdesignerdepot.com/rethinking-responsive-grids-with-a-content-aware-approach/

#responsivedesign #content #grids #layout

Use “shape()” for Responsive Clipping, by @nomster (@developers):

https://developer.chrome.com/blog/css-shape

#css #functions #shapes #clipping #responsivedesign

Announcement: FluxCSS Beta 0.1.0 is Live!

I'm thrilled to announce that the beta 0.1.0 version of **[FluxCSS](https://fluxcss.org)** is now available! FluxCSS is a responsive CSS framework, inspired by Bulma and Bootstrap, designed to significantly speed up the web design process.

Thank you and happy testing!

#FluxCSS #CSSFramework #WebDesign #WebDevelopment #ResponsiveDesign #FrontendDevelopment #OpenSource #BetaRelease #WebDevTools #DeveloperLife #FeedbackWelcome

Revisiting Fluid Type, by @Richr and @stacy and others (@OddBird):

https://www.youtube.com/watch?v=py41Ys-iRvk

#videos #interviews #typography #fonts #responsivedesign

depending on the number of extensions the user has installed, the #Extensions button in the #Addressbar coupled with a #responsivedesign design may extend to a width such that display limitations may prevent difficulty with using some buttons.

However, the extensions button itself can be moved from the address bar.

@jon @Vivaldi

Vivaldi always works nicely once configured to my liking (which can be done).
Thank you!

:take-the-floor:
:groove-on-it:
:skat-diddle-skat:
:groove-on-out:

Matt’s Cup of Tea

Matt’s Cup of Tea is an idea I had for a single-page website. Every time you load the page it shows you something different. There’s also a survey about tea and a donation/tip thing to “buy me a cup of tea”. That last one is mostly meant in fun.

Here it is: https://cupoftea.lordmatt.co.uk

I’ve tried to make Matt’s Cup of Tea look good in all screen sizes. CSS experts, if you have any feedback, let me know.

#CSS #responsiveDesign #tea #websites

Elevate your car rental business with the Dreams Rent Car Rental Booking Template! Sleek, modern, and user-friendly, it’s the perfect solution to create a standout online presence.

Check it out on ThemeForest: https://shorturl.at/GGLwK

#CarRental #WebDesign #OpenSource #DreamsRentCar #ThemeForest #HTMLTemplates #ResponsiveDesign #Mastodon #TechInnovation

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

Yes! Just added my last portfolio project to my website. It showcases my recent work in JavaScript, web accessibility and responsive design. Now if only I could figure out how to make the logo bigger... People keep telling me it's too small on mobile, but I don't know how to fix it. Any tips from fellow developers?
#WordPress #GeneratePress #tech #technology #WebDevelopment #WebDesign #accessibility #a11y #PortfolioWebsite #ResponsiveDesign #WebsiteLogo

As of last night, my first two books — RESPONSIVE WEB DESIGN, and RESPONSIVE DESIGN: PATTERNS AND PRINCIPLES — are available to read online, for free.

I had some emotions about it: https://ethanmarcotte.com/wrote/books-no-longer-apart/

#blogging #bookstodon #ResponsiveDesign

Milestone day. @beep’s incredible books on responsive design are now free!

Responsive Design: Patterns & Principles
https://ethanmarcotte.com/books/responsive-design-patterns-and-principles/

Responsive Web Design
https://ethanmarcotte.com/books/responsive-web-design/

#books #webdesign #webdev #responsivedesign #free

Do you use #TailwindCSS in #production?

#WebDevelopment #WebDev #CSSFramework #Frontend #FrontendDev #Tailwind #WebDesign #ResponsiveDesign #UIUX #Coding #DevTools #Tech

#CSS media queries are worth the time and effort to remove. Modern responsiveness doesn't require specific pixel values. Why did no one's code sense start tingling a warning that Media Queries were never a good idea? #ResponsiveDesign #DRY

#Design #Explainers
Why UI designers should understand CSS Grid/Flexbox · Modern CSS layout techniques visually explained https://ilo.im/15yafz

_____
#Layout #Typography #FluidDesign #ResponsiveDesign #ProductDesign #UiDesign #WebDesign #Development #WebDev #CSS

My colleague Nils wrote about Responsive SVGs:

https://12daysofweb.dev/2023/responsive-svgs/

#responsivedesign #design #svg

We continue redesigning and improving the CoffeeGeek website for 2024. At the top of our list:

- Setting up to have our community features back (we had to design around WP's "multi-site" to get there

- Nothing less than a 95% accessibility rate will be acceptable to me. The current live site is in the 60s and 70s on some pages.

- Entirely responsive design, top to bottom. That means the site works, is fully functional, and looks beautiful whether on a mobile phone, a table, a normal desktop computer, or even a super widescreen.

- Making the site faster, top to bottom. We score in the 50-60s with the live site. I want 90+ scores for site speed on the new build.

The most complex "responsive" page on the entire website will be the dynamically-fed front page. We've spent all week making it feature rich, unique, but also fast. Here's how the lead in elements load and respond to browser size changes. I'm pretty happy with it.

#webdesign #responsivedesign #accessibledesign

I want to build a breakpoint-simulator.

That is, a small webpage that displays responsive frontend components, maybe embedded in a div which can be resized to show the component's behaviour at different breakpoints.

Is this possible with divs or only with iframes?

If iframes are necessary, is it possible to wrap an iframe around existing code on that HTML file or do I need to load an external file?

#responsiveDesign #webdev #css #javascript

Now... THIS is what you call a responsive design

Best part is, with no server caching and optimizations done yet, the speedtest response for this page is 88. We should get it past 92 on the live site.

#webdesign #responsivedesign #coffeegeek

I've mentioned text-only zoom (separate from browser zoom) in my last two articles, so I wanted to share a bookmarklet I created that helps me test text size!

https://ashleemboyer.com/blog/an-accessibility-bookmarklet-for-testing-200-percent-text-size

This little tool can help you when checking for WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow conformance.

#Accessibility #WebAccessibility #ResponsiveDesign #CSS #WCAG #WCAG21 #WCAG22

When you're building an accessible & responsive website, do you find yourself reaching for rem or em units with margin and padding?

Let me show you why you should use px units instead with a real world example of what goes wrong on a sandwich site.

https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques

#Accessibility #WebAccessibility #ResponsiveDesign #CSS