www.smashingmagazine.com

• charset: utf-8
• name: viewport content: width=device-width,initial-scale=1
• name: description content: Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.
• name: robots content: noodp
• property: og:locale content: en_US
• property: og:type content: article
• property: og:title content: Smashing Magazine — For Web Designers And Developers
• property: og:description content: Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.
• property: og:url content: https://www.smashingmagazine.com/
• property: og:site_name content: Smashing Magazine
• property: article:publisher content: https://www.facebook.com/smashmag
• property: article:section content: General
• property: article:published_time content: 2026-02-25 07:30:00 +0000 UTC
• property: article:modified_time content: 2026-02-25 07:30:00 +0000 UTC
• property: og:updated_time content: 2026-02-25 07:30:00 +0000 UTC
• property: og:image content: https://smashingmagazine.com/images/smashing-homepage.png
• name: twitter:card content: summary_large_image
• name: twitter:description content: Smashing Magazine — front-end, UX and design for front-end engineers and designers
• name: twitter:title content: Smashing Magazine — For Web Designers And Developers
• name: twitter:site content: @smashingmag
• name: twitter:image content: https://smashingmagazine.com/images/smashing-homepage.png
• property: DC.date.issued content: 2026-02-25 07:30:00 +0000 UTC
• name: theme-color content: #d33a2c
• property: fb:pages content: 45576747489
• name: google-site-verification content: X5sd8PEDJqYLSR98RKgSozn-0RNpknXFlGoA-UXe5K0
• name: p:domain_verify content: 40d67b22ec16f115be9bb71c7405d527

• Skip to main content
• http://www.smashingmagazine.com/articles/
• Jump to all topics
• http://www.smashingmagazine.com/
• Jump to books ↬
• Events
• Jump to Membership ↬
• Jump to Newsletter ↬
• Write for us
• Advertise
• Accessibility
• UX
• CSS
• JavaScript
• Performance
• Design
• Figma
• Wallpapers
• React
• Vue
• Round-Ups
• Web Design
• See All Guides
• Business
• Career
• Privacy
• http://www.smashingmagazine.com/author/carrie-webster
• Carrie Webster
• Continue reading ↬
• User Experience
• Design
• Optimization
• http://www.smashingmagazine.com/author/victor-ayomipo
• Victor Ayomipo
• UX
• Psychology
• Designing A Streak System: The UX And Psychology Of Streaks
• http://www.smashingmagazine.com/author/kat-homan
• Kat Homan
• Frameworks
• Mental Health
• Building Digital Trust: An Empathy-Centred UX Framework For Mental Health Apps
• front-end & UX
• Explore Accessible Components
• Explore CSS Generators
• Explore Front-End Boilerplates
• Victor Yocco
• Designing For Agentic AI: Practical UX Patterns For Control, Consent, And Accountability
• AI
• Blake Lundquist
• CSS
• CSS
• Techniques
• Tools
• Vitaly Friedman
• Combobox vs. Multiselect vs. Listbox: How To Choose The Right One
• UI
• Cosima Mielke
• Short Month, Big Ideas (February 2026 Wallpapers Edition)
• Wallpapers
• Membership login
• Stefan Kaltenegger
• Practical Use Of AI Coding Tools For The Responsible Developer
• Coding
• Gabriel Shoyombo
• Unstacking CSS Stacking Contexts
• Beyond Generative: The Rise Of Agentic AI And User-Centric Design
• Amit Sheen
• Rethinking “Pixel Perfect” Web Design
• Web Design
• Responsive Design
• Design Systems
• See More Latest Articles
• http://www.smashingmagazine.com/person-of-the-week/marie-van-driessche/
• Accessibility
• Best practices
• Business
• Career
• Checklists
• CSS
• Data Visualization
• Design
• Design Patterns
• Design Systems
• E-Commerce
• Figma
• Freebies
• HTML
• Illustrator
• Inspiration
• JavaScript
• Mobile
• Performance
• Privacy
• React
• Responsive Design
• Round-Ups
• SEO
• Typography
• Tools
• UI
• Usability
• UX
• Vue
• Wallpapers
• Web Design
• Workflow
• Contact us
• About us (Impressum)
• Privacy policy
• Delivery times
• Job Board
• http://www.smashingmagazine.com/#top
• '+a.url+'

• Design Patterns For AI Interfaces
• https://smashingconf.com/online-workshops/
• Ness Grixti
• Design System Tactics
• Kate Moran
• content-focused usability test
• Josh W. Comeau
• shows how it works
• Stefan Bauer
• how it works
• Mark Eddleston
• New Ways Of Working Playbook
• Mads Stoumann
• fully interactive color fan deck
• More links on Twitter
• Vitaly Friedman
• Sven Lennartz
• Netlify
• TinaCMS
• Swell
• Latinotype
• Podcasts
• https://mastodon.social/@smashingmag

            Domain Name: SMASHINGMAGAZINE.COM
Registrar: eNom, LLC
Domain Status: client transfer prohibited
Creation Date: 2006-08-25T12:56:49Z
Registry Expiry Date: 2026-08-25T12:56:49Z
Updated Date: 2025-07-31T09:01:11Z
Name Server: DNS1.P06.NSONE.NET
Name Server: DNS2.P06.NSONE.NET
Name Server: DNS3.P06.NSONE.NET
Name Server: DNS4.P06.NSONE.NET
REGISTRAR Contact: eNom, LLC
>>> Last update of RDAP database: 2026-07-16T19:53:47Z         

			User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
disallow: /wp-content/uploads/demos/BarGraph/index.html
disallow: /wp-content/uploads/demos/HoverPost/index.html
disallow: /wp-content/uploads/demos/ColorCategories/index.html
disallow: /wp-content/uploads/demos/ImageCaptions/index.html
disallow: /wp-content/uploads/2014/inaccessible.html
disallow: /wp-content/uploads/2014/accessible.html
disallow: /images/progressive-enhancement/navigation-1.html
disallow: /images/progressive-enhancement/navigation-2.html
disallow: /images/progressive-enhancement/navigation-3.html
disallow: /wp-content/uploads/2011/07/email_template.html
disallow: /wp-content/uploads/2015/05/splash-svg.html
disallow: /wp-content/uploads/2015/05/extruded-svg.html
disallow: /wp-content/uploads/2015/05/3dneon-svg.html
disallow: /wp-content/uploads/2015/05/copperplate-svg.html
disallow: /wp-content/uploads/2015/05/sketchy-svg.html
disallow: /wp-content/uploads/2015/05/pop-svg.html
disallow: /wp-content/uploads/2015/05/weathered-svg.html
disallow: /wp-content/uploads/2015/05/pop-safari.html
disallow: /wp-content/uploads/2015/05/copperplate-html.html
disallow: /wp-content/uploads/2015/05/extruded-html.html
disallow: /wp-content/uploads/2015/05/3dneon-html.html
disallow: /wp-content/uploads/2015/05/weathered-html.html
disallow: /wp-content/uploads/2015/05/splash-html.html
disallow: /wp-content/uploads/2015/05/pop-html.html
disallow: /wp-content/uploads/2015/05/sketchy-html.html
disallow: /wp-content/uploads/images/smashing-html5/files/index.html
disallow: /wp-content/uploads/images/smashing-html5/files/block-level-links.html
disallow: /wp-content/uploads/2012/02/image_replace1.html
disallow: /wp-content/uploads/2012/02/image_background.html
disallow: /wp-content/uploads/2012/02/class_no_image.html
disallow: /wp-content/uploads/2012/02/first_letter_firefox.html
disallow: /wp-content/uploads/2012/02/first_letter_ie.html
disallow: /wp-content/uploads/2012/02/class_no_image_letterspace.html
disallow: /wp-content/uploads/2012/02/image_replace_no_background.html
disallow: /wp-content/uploads/2012/02/span_class_jquery.html
disallow: //provide.smashingmagazine.com/group1.html
disallow: //provide.smashingmagazine.com/group2.html
disallow: //provide.smashingmagazine.com/group3.html
disallow: //provide.smashingmagazine.com/group4.html
disallow: /images/web-form-design-patterns/urls.html
disallow: //provide.smashingmagazine.com/create-demo-extension-examples/demo1/
disallow: //provide.smashingmagazine.com/create-demo-extension-examples/demo2/
disallow: //provide.smashingmagazine.com/create-demo-extension-examples/demo3/
disallow: //provide.smashingmagazine.com/create-demo-extension-examples/smashing/
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/contact.htm
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/
disallow: /wp-content/uploads/2012/07/letterpress-effect.html
disallow: /wp-content/uploads/2011/09/sinejump.html
disallow: /wp-content/uploads/2011/09/growingsinejump.html
disallow: /wp-content/uploads/2011/09/offsetissue1.html
disallow: /wp-content/uploads/2011/09/offsetissue.html
disallow: /wp-content/uploads/2011/09/simplecircle.html
disallow: /wp-content/uploads/2011/09/tancircle.html
disallow: /wp-content/uploads/2011/09/rotatingcircle.html
disallow: /wp-content/uploads/2011/09/rotatingmessage.html
disallow: /wp-content/uploads/2011/09/growrotatingmessage.html
disallow: /wp-content/uploads/2011/09/rotaterotatingmessage.html
disallow: /wp-content/uploads/2011/09/boxedrotatingmessage.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-charts/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-rubiks-cube/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3d/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-monsters-blob/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-a-rift-in-time/html/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-jewelcase/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-vicero/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-time-machine/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-css-effects/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-book/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-rocket-man/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-wii-ish-idea/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-video-css/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-megans-radius-font/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-imac/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-a-book-full/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-camera/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-under-the-sea-in-css3/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-90s/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-magazine/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-lightsaber/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-smashing-magazine-logo/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-expert-cook/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-pseudo-3d-radial-buttons/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-moving-stick-figure/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-image-less-warp-shadows/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-rabbit/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-the-future-is-here/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-rainbow-template/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-totally-fresh/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-nav-trick/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-cant-skate-dont-care/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-3d-tribute/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-loading-bar/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-personal-portfolio/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-taped-off-coming-soon/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-smashing-css3-effects/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-this-menu-item/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-call-of-duty-style/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-image-less-3d-menu/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-dreamer-blog/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-alien-menu/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-osx-like-dock/index.html
disallow: /wp-content/uploads/uploader/images/css3-designs/css3-automato/index.html
disallow: //provide.smashingmagazine.com/smashingmag-3d/example1.html
disallow: //provide.smashingmagazine.com/smashingmag-3d/example2.html
disallow: //provide.smashingmagazine.com/smashingmag-3d/example3.html
disallow: //provide.smashingmagazine.com/smashingmag-3d/example4.html
disallow: //provide.smashingmagazine.com/smashingmag-3d/example5.html
disallow: /wp-content/uploads/2012/07/final.html
disallow: /wp-content/uploads/demos/demo-1/step-4.html
disallow: /wp-content/uploads/demos/demo-1/step-1.html
disallow: /wp-content/uploads/demos/demo-1/step-2.html
disallow: /wp-content/uploads/demos/demo-1/step-3.html
disallow: /wp-content/uploads/demos/demo-2/step-3.html
disallow: /wp-content/uploads/demos/demo-2/step-1.html
disallow: /wp-content/uploads/demos/demo-2/step-2.html
disallow: /wp-content/uploads/demos/demo-3/step-5.html
disallow: /wp-content/uploads/demos/demo-3/step-1.html
disallow: /wp-content/uploads/demos/demo-3/step-2.html
disallow: /wp-content/uploads/demos/demo-3/step-3.html
disallow: /wp-content/uploads/demos/demo-3/step-4.html
disallow: /wp-content/uploads/2010/06/cross-browser-testing-table.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/1-mangled.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/2-getting-somewhere.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/3-first-test.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/4-qunit-test.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/5-qunit-test-refactored.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/6-qunit-dom.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/7-qunit-dom-refactored.html
disallow: //provide.smashingmagazine.com/introduction-to-js-unit-testing-code/8-endstate.html
disallow: /wp-content/uploads/images/png-optimization-guide/tips/index.html
disallow: /wp-content/uploads/images/type-layouts/t20/index.html
disallow: /wp-content/uploads/images/type-layouts/extreme-georgia/index.html
disallow: /wp-content/uploads/images/type-layouts/experimental/index.html
disallow: /wp-content/uploads/images/type-layouts/o-no-typography/index.html
disallow: /wp-content/uploads/images/type-layouts/typographic-times/index.html
disallow: /wp-content/uploads/images/type-layouts/geotypisch-template/index.html
disallow: /wp-content/uploads/images/type-layouts/megan/index.html
disallow: /wp-content/uploads/images/type-layouts/maintenance/index.html
disallow: /wp-content/uploads/images/type-layouts/the-art-of-type/index.html
disallow: /wp-content/uploads/images/type-layouts/davidkruger/index.html
disallow: /wp-content/uploads/images/type-layouts/top-notch/index.html
disallow: /wp-content/uploads/images/type-layouts/simple-type/index.html
disallow: /wp-content/uploads/images/type-layouts/anticipated/index.html
disallow: /wp-content/uploads/images/type-layouts/bio/index.html
disallow: /wp-content/uploads/images/type-layouts/typo-e-mag/index.html
disallow: /wp-content/uploads/images/type-layouts/luvbold/index.html
disallow: /wp-content/uploads/images/type-layouts/happy-go-try/index.html
disallow: /wp-content/uploads/images/type-layouts/paivi-k/index.html
disallow: /wp-content/uploads/images/type-layouts/better-web-readability/index.html
disallow: /wp-content/uploads/images/type-layouts/cmykolors/index.html
disallow: /wp-content/uploads/images/type-layouts/goliath/index.html
disallow: /wp-content/uploads/images/type-layouts/cornballs-template/index.html
disallow: /wp-content/uploads/images/type-layouts/vicard/index.html
disallow: /wp-content/uploads/images/type-layouts/typo-today/index.html
disallow: /wp-content/uploads/images/type-layouts/javascript-tricks/index.html
disallow: /wp-content/uploads/images/type-layouts/ihsanrama-says/index.html
disallow: /wp-content/uploads/images/type-layouts/blue-inc/index.html
disallow: /wp-content/uploads/images/type-layouts/worldlines/index.html
disallow: /wp-content/uploads/images/type-layouts/hot-box/index.html
disallow: /wp-content/uploads/images/type-layouts/safe-as-houses/index.html
disallow: /wp-content/uploads/images/type-layouts/i-luv-type/index.html
disallow: /wp-content/uploads/images/type-layouts/pink-elephant/index.html
disallow: /wp-content/uploads/images/type-layouts/smash-my-typo/index.html
disallow: /wp-content/uploads/images/type-layouts/binaryd-goldenrod/index.html
disallow: /wp-content/uploads/images/type-layouts/an-ordered-aesthetic/index.html
disallow: /wp-content/uploads/images/type-layouts/dynamic-fresh/index.html
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/index.htm
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/products.htm
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/shop.htm
disallow: //provide.smashingmagazine.com/fw-interactive-prototypes/html/support.htm
disallow: /content-pages/
disallow: /community-highlights/*
disallow: /community-highlights/
disallow: /panels/*
disallow: /provide/*
disallow: /provide/eBooks/*
disallow: /transcripts/*
disallow: /tags/
disallow: /tags/*
disallow: /meets/*
disallow: /feature-pages/
allow: /membership/spendings/
disallow: /membership/*
disallow: /provide/*
disallow: /provide/eBooks/*
disallow: //provide.smashingmagazine.com/eBooks/*
disallow: /api/ball/
disallow: /api/ball
Sitemap: https://www.smashingmagazine.com/sitemap.xml        

SEO técnico

SEO na página

Conteúdo e experiência do usuário