RWD Weekly #369

Headline

Frontend Design, React, and a Bridge over the Great Divide

Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products’ user interfaces. Brad see’s frontend design as a helpful mortar that bridges the gap between design and development.

Article

Thorne: The Frontier Within

The agency Active Theory have delivered an amazing piece of design using a range of inputs like biometrics and cameras and bringing it to life both physically and across digital. I’m really excited about how web design can move into these spaces… moving beyond the screen.

Inspired Design Decisions: Pressing Matters

Andy Clarke takes a look at the Pressing Matters print magazine and draws inspiration for website layouts using overlapping grids. This is something I looked at through Josef Müller-Brockmann’s Grid book when I first got started with Grid and I highly recommend using it as a guide to get creative

Tutorial

Position Sticky and Table Headers

It’s a little known (CSS) trick(s) but you can use position sticky against the <th> element in a table which can be incredibly helpful.

Reduced Motion Auto-Play Video

For a long time, and still every now and then, I get the creative team wanting autoplay video in the header of every site. After a lot of “no” they are now happy to have a silent clip, but I don’t like auto–playing video. This is a great way to put the control in the users hands.

Debugging CSS Grid with Firefox Dev Tools

Chris takes you through how you can use the Firefox Dev tools to debug and test out your CSS Grid layouts. Firefox has come a long way with its dev tools.

Everything You Need To Know About CSS Margins

Rachel covers off the use of Margins in CSS and how it should/can/could be applied across our different layout methods these days.

Recreating the Fool’s Mate

Using animations to recreate moves across a chess board

Tools and Resources

Variable Fonts | Compressa

This is a nice implementation of an interactive variable font. As you move across the text the font variations change, allowing you to control the look. There are other checkbox options to switch things on and off, go ahead and had a play!

Is my host fast yet?

Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web.

Sponsorship

Get Your Free .design Domain Name!

A .design domain name is like .com and .net, but it’s more relevant to what you do as a designer. Your free .design domain name lets potential clients and employers know what you do before they even arrive to your website. And it helps with your branding. It looks great on resumes, business cards & as a professional email address. Claim yours today!