Responsive WebDesign

With container queries, you’ll be able to consider the breakpoints of just the component you’re designing. As a result, you end up specifying less code and the components you develop have fewer dependencies on the things around them.

In this article, I’m going to take a look at the common features of our new layout systems, along with a couple of examples which serve to highlight the differences between them.

I think there’s huge potential for a new variable font format to become a key part of the designer’s tool belt. It would greatly improve the reading experience of general users of the web, too.

As the transitionary phase that brings form to ideas, mockups hold a lot of weight in the design process. This piece reviews the most common mockup mistakes when designing in RWD, so you can make sure your step to responsive is a step forward, not back.

If there’s only one thing you take away from this article, make sure it’s this: you need to think about your designs.

Now, we usually wouldn’t recommend overthinking anything. But with design work, a meticulous thought process leads to great responsive designs.

Mobile navigation must be discoverable, accessible, and take little screen space. Exposing the navigation and hiding it in a hamburger both have pros and cons, and different types of sites have different preferred solutions to the mobile-navigation quandary.

Designing with multiple screen sizes in mind becomes speedy and more effective when considering content in the wireframing process. By blocking out areas for the content or splitting it into different categories, designers can create movable parts to adapt to any screen size.

With the introduction of media queries, designers are able to specify breakpoints a website will adapt to and target specific devices and viewport sizes. Basic media queries are usually for a phone, tablet, and desktop. But there’s generally no consideration for the Very Big Desktop.

What’s fascinating about Netflix’s rebrand is the way it embraces, and refines responsive design; this is responsive design beyond viewports, it’s responsive design for mobile, the web, print, social media, and of course TV.

The most important element in any website is of course, its content. The most important part of any content is its text. Make it visible. That’s it. That’s what the whole article was about.

Whether you’re designing a small company website or reworking an ecommerce platform, let’s explore some mistakes you definitely want to avoid on your next responsive Web design project.

It’s certainly possible to approach the sun without melting our waxen wings. So follow along and let’s see how far we can push towards perfection in our pursuit of the ideal responsive design.

Typography is not one-size-fits all, yet that’s often how we approach it on the web. We understand the value of responsive design but seldom do we design responsive typography.

On the surface, it appears that adaptive requires more work as you have to design layouts for a minimum of six widths. However, responsive can be more complex as improper use of media queries (or indeed not using them at all) can make for display and performance issues.

As a workflow, designing responsive sites can seem daunting, especially if you are new to the process. Designing for multiple screen sizes, the constraints of small screens, and considering touch, all add complexity into the mix that takes us beyond creating fixed width sites.

I went on a personal quest to find the best way to use the powers of CSS preprocessors to manage breakpoints and write media queries in my projects. The outcome was include-media, a library that promises "simple, elegant and maintainable" media queries in Sass

All in the name of responsive web design.

And to put them in action, we have a veritable army of tools. Here’s a list of our 10 favorites, an absolute must for any designer going ‘mobile-friendly’.

An important part of a responsive website are responsive images. In this article, we’ll learn more about responsive images on the web and see how to build them.

It stands to reason that responsive web design requires responsive typography to suit. Font size, spacing and layout should work together to create an elegant, legible text setting in each viewport. But how? We asked seven leading web designers.

In fact recent studies show that over 80% of the population search for local businesses on their mobile phones. This article outlines why responsive web design is a small business must have.

Tabbed layouts are a great way to house a lot of related content in a small, compact area. In this tutorial, we're going to build a responsive tabbed layout using CSS and JavaScript, and implement a basic no-js fallback.