News Archives | Page 2 of 34 | Responsive Web Design

Augmented reality with Python and OpenCV (part 1)

I’m really interested in how we can expand our traditional content and our concepts of the browser with VR and AR. My commute this week has been filled mostly with getting a really simple AR going to show the Earth rotating when using the Hiro marker, so this tutorial really interested me with the ability […]

Read more

Introducing the New Firefox: Firefox Quantum

One of the biggest releases occurred this week with Firefox releasing v57 better known as Firefox Quantum. It is twice as fast as it was 6 months ago and Mozilla believes it will be on target to be twice as fast again in 2018. So why such a big deal? Well for the first time […]

Read more

A Responsive Accessible Table

This is such an amazing deep dive into how to create a responsive accessible table from Adrian Roselli. I’ve been using Filament Groups Table Saw for as long as I can remember but this is perfect for building one out yourself and understanding the things you’ve got to think about.

Read more

Designing PWA for eCommerce

A nice little project that will be made available on github once complete that will be building a VUE based PWA that connects to Magento. With BackPocket Notebooks being one of my non-digital side projects I’m really keen for an offline/PWA however at the moment I’m bound by what Shopify offers.

Read more

Rebuilding slack.com

I’m pretty sure you’ve heard of this communication tool called Slack, right? Well, it’s kinda popular. Check out how they rebuilt it and managed to shave 53% off their pricing page load time!

Read more

Expo: Towards Rapid VR Prototyping

Sketching out and prototyping interfaces in VR can be hard in a 2D world, see how Shopify are breaking down the barriers.

Read more

The meaning of AMP

I’m trying my best to be as even minded as I can but I find myself siding with the ideas of both Jeremy and Ethan. I want a faster web, but not one that relies on AMP.

Read more

Media Queries Based on Element Width with MutationObserver

This article explores a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver.

Read more

Can You Afford It?: Real-world Web Performance Budgets

Performance is an incredibly important part of the budget for any project… and I’m not talking about the money the client is paying you from their budget

Read more

Responsive speech search

This is a little demo that I put together for the talk last week. It only works in Chrome but once you approve it to use the microphone it will allow you to perform a voice search for any resources on the RWD site. This was really valuable when I was testing the RWD.is site […]

Read more

CSS Grid: Bringing true two-dimensional layout to the web

This is a great talk from Melanie Richards from Microsoft around the CSS Grid. It’s one of my favourite talks in terms of covering off the most important elements of the specification and it is somewhat of a nice story to hear on how the whole Grid Spec started with Microsoft and should be shipping […]

Read more

CSS Round Display Level 1

CSS Round Display tells the web pages how to behave on a non rectangular screen – or like it is literally called – on a round display

Read more

A Rube Goldberg Machine

Ada takes us through the approach of CSS Grids, CSS Custom Properties and Web Animations.

Read more

Chrome to force .dev domains to HTTPS via preloaded HSTS

If you, like me, are using *.dev as your local TLD then you’re going to be affected by an Chrome update in the next release. The next release will force the browser to switch to https automatically on the .dev domains. Annoying, yes, but let’s face it…. if you’re doing local dev and pushing to […]

Read more

Breaking Down a CSS Grid Layout

A really specific review of the repeat(auto-fit, 200px) for grid-template-columns that allows you to build responsive flexible grid columns without having to worry about declaring any media queries

Read more

APIs First

By thinking in an API first way you can make your design process a lot easier down the line.

Read more

Remove Unused CSS Rules

If you’re anything like me you’ve probably added a lot of CSS to your site over the years without ‘pruning’ back the bits that no longer exist. While this isn’t the end of the world, it means that your CSS file continues to grow and send un-needed styles down the pipes. This explains how you […]

Read more

I made a style guide for my personal web site and you should too

Zach has put together a small style guide for his personal site to keep a watch on future updates to the CSS.

Read more

The average web page is 3MB. How much should we care?

A great blog post from Tammy that looks at the increasing size of the average web page.

Read more

Changes to the Grid Spec and taking on Multi-Column layout

The properties for defining the grid gap is going to be changed and will be dropping the prefix ‘grid-‘ and just have column-gap, row-gap and gap.

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.