1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

RWD Weekly #446 — the one about position: sticky

Read online

Hello again, welcome back to RWD Weekly #446.

The feature site this week has X-FRAME options set to deny, so you're just getting a banner version of the page.

I like this visual approach to navigating for images. You click on an image you like and will get a tonne of other visually similar images. How many clicks will it take you to find Kevin Bacon?  For the layout of images it actually uses flex over grid to create five columns, and then applies flex to the children of those five columns to create rows. In this style of layout it doesn't matter about the source order, but if it is an issue for you then don't use this approach (Grid will give you something).

 


Sponsor

Fuel your creativity: three days of learning on CSS, design, and more

Learn what’s next in web design by participating in An Event Apart Online Together: Spring Summit, a 3-day conference with an intense focus on digital design, UX, content, code, and more, packed with tips and insights into the future from 15+ industry shakers and shapers. Join us online April 19–21.

 

Save $100 any multi-day pass with promo code: AEARWD21


Don’t miss out—see our detailed three-day schedule and register today!
View details
Advertise your product, service, or job opportunity to 26,450 tuned in web designers and developers. Find out more.

Article

WordPress 5.7: Big ol' jQuery Update

This is a huge change from WordPress because it's a breaking change. If you're running a Wordpress site now is the time to start testing. Even if you don't use jQuery on the site yourself, some of the plugins you're using might be.
 

The web didn't change; you did

“it's that you made it harder and more complicated. You have the power of choice, so choose what you want to do - because the choices are overwhelming and there's enough regular world overwhelming for a lifetime right now.”

Sick burn there from Remy, but he's not wrong.
 

Front-end predictions for 2021 and beyond

Jay Freestone lays all his cards on the table to bring you what he see's as being the direction we are taking in 2021.
 

The Never-Ending Job of Selling Design Systems

The bottom line is that no one wants to pay for a design system, you've got to sell in the benefits to your clients. This article boils down the methods Ben Callahan, from SparkBox, has put into practice convincing executives not just to fund the initial push of design system work, but to keep funding it.


Tutorials

 

Fluid typography with CSS clamp

Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.
 

Font follows Function – A Checklist

A brief checklist what functional parts of a typeface to consider before picking it for your digital project.
 

Underline Hover Styles for Links

A collection of simple and subtle CSS-only line hover animations for links.
 

Using position: sticky to create persistent headers in long texts

For really long pages with scattered headings the position: sticky works really well by maintaining the context of the content for the user even while they scroll.


Resources, Releases & Tools

Page Transitions: Creative Examples, Resources and some Tips

These are some really great page transitions. A lot of the time when I work on websites they have very little continuity in the the moving from one page to another. That is fine for most sites, but sometimes you're looking to dazzle and amaze the user (and you don't care how fast their fan will spin).
 

Release Notes for Safari Technology Preview 120

Safari has released an update on their technology preview. They've fixed a bug with re-layout of Grid items as well as fixing the new aspect-ratio to work with percentage resolutions. If you use netflix/facebook stories on safari there are a few fixes for media playbacks too.
 

Datasette

Simon is super smart. This tweet has two things. First of all it covers a great talk he gave about a project he's been working on called Datasette. Secondly, it also links to a took that lets you build a sequence of slides/screenshots out as HTML.
 

eBay Launches Marko 5

Marko is the Javascript UI framework that eBay use to power their applications. It is a powerful, markup-based language that embraces the complexity of the client while being as easy to write as HTML templates. The idea is that it has been written so it's superfast on the server and works as a first class citizen in the browser too.
 

Finally


That's all for this week. Thanks for stopping by, if you found something useful please recommend us to a friend and help us continue to grow.

Cheers,

Justin.
Twitter
Facebook
Website
Copyright © 2021 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Simple Things LTD
Thame, Oxfordshire OX92EQ
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #445 — the one about GitHubs homepage

Friday, February 5, 2021

Pixelated art, CSS animated gradients, performant home pages and more. Read online Hello again, welcome back to RWD Weekly #445. Our feature site this week was suggested by Raquel Freitas because she

RWD Weekly #444 — the one about scroll-margins

Friday, January 29, 2021

Open Web Docs, Haptic effects in the browser, avoiding layout shifts and a tonne more. Read online Hello again, welcome back to RWD Weekly #444. This week we're taking a look at a classic website

RWD Weekly #443 — Open Web & Responsible Web Apps

Friday, January 22, 2021

This week we look at the serious side of the web and how it can be quickly switched off for some. Read online Hello again, welcome back to RWD Weekly #443. I'm happy to say that using TailwindCSS

RWD Weekly #442 - AVIF & Aspect Ratios

Friday, January 15, 2021

AVIF, Aspect Ratios & three hours worth of reading on a 2021 Website Check list Read online Hello again, welcome back to RWD Weekly #442. After a very slow start back to work last week it already

RWD Weekly #441 - the first for 2021

Friday, January 8, 2021

This is our FIRST weekly email for 2021, happy new years! 🎉 Read online Hey everyone and welcome to week #441 of the responsive design newsletter and the first one for 2021. I hope you were able to get

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏