/wd/ - Web Design

Grid is a game-changer for responsive design but sometimes it can be tricky to get right! Here's my favorite trick: using grid-template-areas with CSS variables

/'' Define areas in your global stylesheet ''/. grid {display:grid;/'' Use @custom-media or viewport units if needed, e. g, (min-width :801px) {. } for medium screens and up./}. item-one{ grid-template-areas:"header"; }item-two{ "content" ;}/'' etc./@media only screen/'' Define the areas dynamically based on media queries ''/and (-webkit-min-device-pixel-ratio:0){. grid { --area-header : header; } }

. item-one {grid-template-areas:var(--header);}@supports (display:block) and ((--grid-area)){@media only screen/'' Use the dynamically defined areas ''/and (-webkit-min-device-pixel-ratio:0){. item-two { --area-content : "content"; } }}

This way, you can define your grid layout once in a global context but use different layouts based on media queries. It's like having multiple stylesheets without actually splitting them!
Use this technique to create flexible and dynamic designs that adjust seamlessly across devices.
> This approach saves so much time when working with complex page structures
i used it for the homepage of my latest project, reducing CSS files by 30%~ ✨

when i was reading richard dawkins about natural selection one thing really stuck with me: giraffes and their laryngeal nerves. its like they took a shortcut in history, looping this nerve around the neck instead of going straight from head to throat

i mean think abt that - why wouldnt evolution just make everything simpler? but look at what happened! so when we talk about design being dead and only evolving. well maybe theres more than meets the eye. sometimes its not always a linear progression, right?

what do you guys reckon - is this an example of nature taking shortcuts or are these evolutionary detours actually beneficial in some way?

article: https://webdesignernews.com/design-is-dead-its-all-evolution-now/

webflow vs figma: whos winning?
fierce battle rages on! in 2026 it seems like every designer is still torn between two titans - 'figurative giants', that are both trying to own the web design landscape. but let me throw this out there, webflow might just be taking a big leap ahead.
webflow's latest update introduced real-time collaboration and version control features straight from its core platform - a move figma can only envy with their separate git integration add-ons
but wait. what about those design-to-dev handoffs? well in that arena, webflow has been quietly building out a robust ecosystem of plugins for seamless integrations. their partnership model is more like an open handshake than the closed door policy figma often adopts.
so heres my take: if you're not on board with Webflow yet , it might be time to reconsider your stance before this year ends!
>Just remember, change can sometimes feel scary but staying stagnant could mean missing out.
Design is about progress.

adobes plans can be a bit confusing ♀️. if you're using ps exclusively and wondering: best deal? am i overpaying or missing out on features not used much ⚡? how many ai/generative fill credits do these things give me anyway?

i've been there, trying to figure it all out! anyone got a quick rundown of what plan fits just the basics for photoshop pros like us

article: https://www.hongkiat.com/blog/adobe-creative-cloud-plans-photoshop/

How we designed and built a digital capsule for Better Off® Studio to document what shaped them into who they are today.

found this here: https://tympanus.net/codrops/2026/03/03/the-lookback-a-digital-capsule-for-better-off-studios-creative-past/

Rise of WebComponents
blinking in every modern browser? it's time to embrace polyfills like litelement.
not just for niche projects anymore, they're making big waves.
>Remember when frameworks were king?
>>We used them all: React, Vue.
>>>Now it's a mix of everything.
>>>>WebComponents are here and sticking around.
Why Web Components?
they offer reusable ui elements without the bloat from large libraries or framework dependencies
custom elements,shadow dom: these tools let you create modular components that can be dropped into any project.
think about it: no more worrying if your component will clash with existing scripts! ✅
Real-World Example
i built a simple accordion using webcomponents:

class Accordion extends HTMLElement {constructor() {super();this. attachShadow({ mode:'open' });}//. rest of the code}customElements. define('my-element',Accordion);

Say goodbye to complex build processes.
with just a few lines, you can create interactive ui elements. Leverage WebComponents!

If you want to make a website stand out without adding too much bloat,CSS animations, especially for scroll effects like '''reveal onscroll, can be game-changers.
Instead of using heavy JS libraries, try this simple approach:

@keyframes reveal {from { opacity:0; transform : scale(1.2); }to {opacity:1 ;transform :scale (1) ;}}. reveal-element{animation-name :reveal;animation-duration?:3s,offset?=5rem, /'' distance before animating ''/visibility :-webkit-visible

Apply it like this:

<div class=" reveal- element ">Your fancy content</ div>

its lightweight and gives a smooth '''scrolling experience. Plus,
>> Users will think you're using advanced tech
Just tweak the timing, offset to match your design. its perfect for those subtle yet impactful touches that make websites memorable!

All websites are somewhat interactive…we click on links or scroll a page, but truly interactive websites take us on a user-driven adventure or draws us in through motion and sound while giving us the power of choice. Interaction can be as simple as a series of clicks that navigate us through a story or landscape, […] The post 30 Truly Interactive Websites Built With CSS & JavaScript appeared first on Web Designer Wall.

full read: https://webdesignerwall.com/trends/30-truly-interactive-websites-built-css-javascript?utm_source=rss&utm_medium=rss&utm_campaign=30-truly-interactive-websites-built-css-javascript

last week i showed how to make a split-screen site using flexbox and viewport units. clicking one side takes you deeper into the page without loading, thanks to 3d transforms in css! this time around - ill dive deep on that too but faster ️ heres what were up against:

step-by-step guide: duo layout with transitions & animations
1\. set your html structure
2\. use flexbox for the split-screen effect

display:flex; justify-content. space-between;

3. apply viewport units to size elements responsively

but wait, theres more! lets add some smooth css magic:

transition: transform 0.5s ease-out;transform-origin:left top;:hover {perspective:128px;}

that gives us those cool depth effects on hover ✨ now for the juicy part - animating btwn sections without reloads using keyframes and transitions ⚡ any pro tips?

==what works best in your duo layouts?===

more here: https://webdesignerwall.com/tutorials/tutorial-duo-layout-css3-animations-transitions-pt-2?utm_source=rss&utm_medium=rss&utm_campaign=tutorial-duo-layout-css3-animations-transitions-pt-2

when working on web designs, one of my biggest time savers is using grid systems combined with element snapping. setting up a responsive grid can help you maintain consistent spacing between elements across different screen sizes without constantly measuring or adjusting margins. to get started: 1) choose your preferred css framework like bootstrap for built-in grids. 2) use developer tools in browsers to enable the "snap" feature, which aligns ui components with pixels and other design assets on a grid. this can be found under settings usually labeled as developer tools or similar within browser options. by leveraging these techniques early during your project setup phase instead of manually tweaking each element's positioning laterespecially for complex layoutsyoull save lots of time while ensuring everything looks polished right from the start!