stefan, to fediverse
@stefan@stefanbohacek.online avatar
inautilo, to design
@inautilo@mastodon.social avatar


The power of beauty in communicating complex ideas · What we often overlook in visualizations and infographics https://ilo.im/15z2oh


mobileatom, to random
@mobileatom@flipboard.com avatar

What is visual hierarchy, and why do you need it?

https://www.noupe.com/design/what-is-visual-hierarchy-and-why-do-you-need-it.html?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

WebAxe, to random
@WebAxe@a11y.info avatar

Understanding the 'Why' Around Neurodivergent Inclusive Web Design https://yougotthis.io/library/understanding-the-why-around-neurodivergent-inclusive-web-design/

tommi, to CSS
@tommi@pan.rent avatar

Hey @piccalilli!

I found https://buildexcellentwebsit.es extremely insightful and inspiring! It pushed me to finally completely restructure my personal website’s #CSS, after many years of mess.

I used the awesome https://utopia.fyi to generate the vars, (actually, I am using the SCSS library).

Unfortunately, though, I find the massive use of all those calc() and clamp() functions to be quite heavy in terms of performance… #Lighthouse gave the website a very bad performance score (see screenshot). It even seems that while scrolling the page it lags (😳) even if it’s super simple and built with pure #HTML and CSS!

Do you have any ideas or suggestions? 🤔

Thank you so much for all the interesting things you share! ❤️🚀

(The current unstable development version of my website is at https://dev.tommi.space/, I am using the homepage as reference)

Cc: @j98 + @trys

#WebDesign #WebDev #browser #BuildExcellentWebsites #PersonalWebsite #CSSGrid #PageSpeed

laura_carlson, to accessibility
@laura_carlson@mastodon.social avatar
ryantownsend, to webdev
@ryantownsend@webperf.social avatar

Oliver Lingberg just published an interview with me about the industry and my upcoming talk at his conference Pixel Pioneers on June 14th: https://pixelpioneers.co/blog/speaker-spotlight-ryan-townsend

If you're considering coming you can get 10% off with the code 'Friends10', making the price just ~£140 ex VAT. Student tickets are also available for £60 – exceptional value! Full details 👉 https://pixelpioneers.co/

A talking-head video with Ryan Townsend sat at a desk.

javedAB, to javascript

want fast-loading pages

one way to achieve this is by loading only the necessary initially

load the rest on hover or button click for a smoother experience

inautilo, to design
@inautilo@mastodon.social avatar
kubikpixel, to rust German
@kubikpixel@chaos.social avatar

»Transforming website images into WebP with Rust for faster loading times«

Wait what? Cool image solution for a web app or site.

⚙️ https://tduyng.dev/blog/rust-webp-transform/


kubikpixel,
@kubikpixel@chaos.social avatar

🧵 …as already mentioned above, images on websites are no longer "only" GIF and JPEG but modern data-size sparing high quality images 📸

WebP: https://caniuse.com/webp
AVIF: https://caniuse.com/avif


#webdev #web #homepage #webpages #jpeg #gif #webp #avif #webdesign #images #webimages #FileFormats

mobileatom, to webdev
@mobileatom@flipboard.com avatar

Best Practices For Naming Design Tokens, Components, Variables, And More. #WebDesign #WebDev

https://www.smashingmagazine.com/2024/05/naming-best-practices/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

kubikpixel, to webdev German
@kubikpixel@chaos.social avatar

«CSS :has(), the God Selector»
– by @brucelawson

Yes CSS is more then only a design and colors and have today cool functions to select specific HTML components and pleace web designer think in different screen spaces.

🖌️ https://brucelawson.co.uk/2024/css-has-the-god-selector/


#webdev #css #webdesign #selectors #web #design #modernweb

jkjustjoshing, to CSS
@jkjustjoshing@fosstodon.org avatar

Is there ever a time when this

width: 100%;
max-width: 480px;

behaves differently than this?

width: 480px;
max-width: 100%;

#css #html #WebDesign #webdev

stefan, (edited ) to design
@stefan@stefanbohacek.online avatar

I'm trying to get my personal site more organized, let me know what you think!

https://stefanbohacek.com/projects

emmanuelc, to CSS French
@emmanuelc@mamot.fr avatar

Dites, développeuses z'et développeurs, régulièrement, dans mon cercle professionnel direct, j'entends dire que vous n'aimez pas (voire ).
Question sérieuse et qui n'appelle pas à réveiller quelconque troll ou débat sans fin : pourquoi n'aimez-vous pas ce langage ?
Qu'est-ce qui vous chiffonne, vous rebute ?
D'où vient votre éventuel manque d'intérêt ?
J'ai déjà des éléments de réponse proches de moi, mais je suis curieux d'élargir la question ici.

laura_carlson, to accessibility
@laura_carlson@mastodon.social avatar
Luke, to Blog
@Luke@typo.social avatar
stefan, (edited ) to fediverse
@stefan@stefanbohacek.online avatar

Hey everyone! I recently posted about my latest project, a universal fediverse sharing button: https://stefanbohacek.com/project/fediverse-sharing-button/

Is this something that you'd find useful for your website or blog?

EDIT: Thanks everyone for sharing and trying this out! I fixed an issue on iOS some of you might have run into, just FYI.

skry, to webdev
@skry@mastodon.social avatar

“hello! i am currently seeking new employment opportunities in art, design and/or web development, ux & marketing consultation
resume :: ‪https://encipherdesign.com‬”

—> @brentpruitt

stefan, (edited ) to fediverse
@stefan@stefanbohacek.online avatar

I'm prototyping a fediverse sharing button. Anyone interested in giving it a try?

Feature highlights:

  • shows a logo of supported fediverse software
  • lets you share selected text
  • remembers the last fediverse domain used

Demo: https://fediverse-share-button.stefanbohacek.dev/
Download: https://github.com/stefanbohacek/fediverse-share-button/

stefan,
@stefan@stefanbohacek.online avatar

Very easy to customize to fit your site, too!

#UXUI #WebDesign

mawkler, to web
@mawkler@fosstodon.org avatar

Can we please stop making custom dropdown menus that aren't keyboard searchable? It takes eons having to manually scroll through three separate lists of date/month/year instead of just typing out the numbers on my keyboard and pressing "Tab" to switch between the three menus.

mobileatom, to random
@mobileatom@flipboard.com avatar

Transforming The Relationship Between Designers And Developers. #WebDesign

https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/?utm_source=flipboard&utm_medium=activitypub

Posted into Responsive Design, UX, UI, and more @responsive

colin, to SmallWeb
@colin@colincogle.name avatar

How do you make a modern website? Like this. No JavaScript, no databases, no frameworks. Just plain, simple, accessible, and fast HTML. You’d be surprised what you can get for $5/month.

From: @jpmens
https://mastodon.social/@jpmens/112444460638321766

#WebDesign #SmallWeb #StandardEBooks

laura_carlson, to accessibility
@laura_carlson@mastodon.social avatar
adamsdesk, to webdev
@adamsdesk@fosstodon.org avatar

The Importance of a Thoughtful Website Footer

Take a deep dive in learning about a website footer in this comprehensive guide covering what one is, key design points, ideas, the purpose, and more.

https://www.adamsdesk.com/posts/website-footer-explained/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • anitta
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • megavids
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • provamag3
  • tester
  • Leos
  • JUstTest
  • All magazines