Responsive Design News

Keep up with the latest news and developments around responsive design and the new direcitons that web designa and development are taking.

Reverse Knockout Text Mask Effect with SVG

Using design tricks on headings allows you to make more of the typography choices that you make and can have some interesting design outcomes. This approach will work with both custom headers (like a homepage that you set and forget) but also with a blog/CMS that has variable heading lengths/sizes

Read more

Dark mode

Jeremy applies a dark mode to his site during a recent indie web camp. The thing that I quite like about it, aside from the use of CSS Custom Properties, is the approach to darken your images with CSS as part of the update. I never would have thought of that.

Read more

A Guide To New And Experimental CSS DevTools In Firefox

As I’ve mentioned (a lot) before, I’ve switched over to Firefox as my primary browser. At first, the only downside was my lack off familiarity with the dev tools, but now I prefer it over Chrome’s. In this tutorial, you can see how the Grid Inspector, Fonts editor, Shape Path Editor and more work (seven […]

Read more

Building a Scrapbook Layout with CSS Grid

A compound grid is when you have two grids, like a 5 column and a 4 column, and you overlay them together. What does that have to do with Scrapbook layouts? Well, this is the grid that Michelle used to build the scrapbook and she even built this little tool on code pen that will […]

Read more

A Modern CSS Reset

I remember when Eric Meyer created the first CSS reset back in 2008 (or at least that was the first time I really started using it). I think this version from Andy is a modern approach and something which is worth considering. If you’re using any reset please make sure you understand what the declarations […]

Read more

Blog service workers and the chicken and the egg

Remy continues to tweak his implementation of his service worker. In this iteration he ensures that if you land directly on a blog post for the first visit (when the service worker is first activated) that the current page is added to the list of cached items (it doesn’t by default because when the page […]

Read more

Making Instagram.com faster: Part 1

Instagram started as an app and that is where they focussed most of their efforts for a long time. Now things are changing and Instgram have been spending more time improving the capabilities of the instagram.com site. In this first of many posts, the engineering team go through the steps they’ve taken to help improve […]

Read more

Using the DOM like a Pro

Jquery was a great way to make traversing and manipulating the DOM a lot easier than it was with vanilla javascript, especially seeing as at the time each browser had their own quirks. Nowadays JS has developed further to provide the same simple hooks that jQuery once afforded us. This tutorial takes you through key […]

Read more

The Browser Monopoly

Blair looks at the current stronghold that Chrome (Google) has over the browser market, how they got there, and why they’re such a tough force to disrupt. I especially like the ideas around what Firefox could be doing to help challenge this, and I for one will be happy to pay some money for the […]

Read more

Making Your Wait a Little More Great: New Loading Indicators in AMP

I still don’t like AMP, but I do like the approach of showing the user that something is happening rather than just showing them a blank page while things are still loading. (I have nothing against the people working on AMP and their goal of making a faster web, I’m just against the use of […]

Read more

10 best CSS frameworks in 2019

In 2019 I would encourage you to (I thought that demanding would come on a little too strong) to use both Flexbox and CSS Grid for your layouts in any project, be it a side project or working on a production site. What these frameworks can still offer is a series of common modules that […]

Read more

Less Data Doesn’t Mean a Lesser Experience

Another wonderful article from Tim where he takes a look at the save-data header. Someone was worried that when people enabled save data that they’ll get a worse experience, but this shows ways that you can still maintain a great experience while still honouring your brand and you user’s preferences.

Read more

How Web Content Can Affect Power Usage

Great web performance doesn’t stop with how quick your first paint is or how slim the weight of your page can be. This post goes through some of the key battery drains and shows you tools you can use in-browser to check if your site is underperforming and killing your user’s battery life

Read more

Google tightens its grip on your content

Owen Williams covers off all the current problems with AMP, the main one being that Google are continuing to systematically taking more control over the content on the web. By all means, make the web a faster place, but reward sites that are doing it on their own without using Google’s proprietary markup and servers […]

Read more

The Simplest Way to Load CSS Asynchronously

For a very long time Filament Group (and in particular Scott Jehl) has been coming up with ways to ensure that we have tools to ensure that our websites appear as quickly as possible for our users. A long-time approach was preloading CSS, and they’ve come up with a new approach for you to check […]

Read more

Every Layout Is Released: Some Facts

Every layout is now available for purchase ($100) and free for those who can not afford it. I think this is a bargain considering that most people will be charging out at least $50 per hour. This resource will _easily_ save you more than two hours work which will break you even.

Read more

Multi-column manipulation

Another post from the very clever Heydon Pickering on the Every Layout site, this time all about adding multi-columns to your layout. I’ve looked at multicolumn in the past, specifically around constraining the height of the item to 100vh and letting the number of columns span off on the horizontal. I used it as an […]

Read more

Foundational Ideas for Responsive Augmented Reality Content

By now you will likely have a good idea of the basic concepts of responsive design, looking at the viewport size and changing the layout of the content based on the constraints. This is fine for two dimensions, but what about when we look at three? This article looks at the start of how we […]

Read more

Leggo My Pattern Library Analogy

I used to use the lego analogy as part of my explanation about the CMS we used to use when working with clients. It provided you with a box of 30 or so types of assets which when carefully linked together could build the death star, and while the CMS was free you had to […]

Read more

A Beginner’s Journey to Launching a Website

The first time I built a website from scratch was in 1999 where I charged the client $1500 for the project. I knew how to build the HTML and CSS, but I had _no_ idea how to get hosting, buy a domain, or put that content up there. It’s _super_ daunting to be at that […]

Read more

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.