Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Responsive Web Design’.

We are pleased to present below all posts tagged with ‘Responsive Web Design’.

Smashing Book #5, A Review

When Smashing Magazine first came out I ran a web design blog that was more popular than it. Out of nowhere this site about design came and started to pump out content at a ridiculous rate. A lot of the content was simple list posts, but it made sense back then because people loved inspiration. In 2009, I wrote an opinion piece talking about how Smashing Magazine had killed the design community. It really didn’t, but it did help to breed some copycats that copied everything, but the soul of Smashing Magazine. Since I wrote that piece, Smashing Magazine has... Read more...

Automating Art Direction With The Responsive Image Breakpoints Generator

Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive image breakpoints? A year later, he had an answer: Ideally, we’d set responsive image performance budgets to achieve "sensible jumps in file size."

Automating Art Direction With The Responsive Image Breakpoints Generator

Cloudinary built a tool that implements this idea, and the response from the community was universal: "Great! Now, what else can it do?" Today, we have an answer: art direction!

Read more...

Building Social: A Case Study On Progressive Enhancement

We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience, it can be difficult to determine what can be implemented purely using HTML and CSS and what absolutely requires JavaScript.

Building Social: A Case Study On Progressive Enhancement

Through this case study on redesigning the Building Social website, we’ll share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too.

Read more...

Redesigning SGS’ Seven-Level Navigation System: A Case Study

SGS (formerly Société Générale de Surveillance) is a global service organization and provider of inspection, verification, testing and certification services across 14 industries. SGS’ website (along with 60 localized websites) primarily promotes the organization’s core services, as well as provides access to a multitude of useful services, supplementary content and tools. Our goal was to transform sgs.com from being desktop-only to being responsive.

Redesigning SGS’ Seven-Level Navigation System: A Case Study

This presented a unique set of challenges, especially around the legacy navigation system, which in areas was up to seven levels deep (divided into two parts) and which consisted of some 12,000 individual navigable items.

Read more...

WordPress Responsive Images With Art Direction

Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.

Responsive Images In WordPress With Art Direction

Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters. With a few additions, WordPress websites can accommodate another responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints.

Read more...

Photoshop Etiquette For Responsive Web Design

It’s been almost five years since Photoshop Etiquette launched, which officially makes it a relic on the web. A lot can happen on the web in a few years, and these past five have illustrated that better than most.

Photoshop Etiquette For Responsive Web Design

In 2011, everyone was just getting their feet wet with responsive web design. The traditional comp-to-HTML workflow was only beginning to be critiqued, and since then, we’ve seen a myriad of alternatives. With a shift from page-based design to building a design system, it’s truly an exciting time.

Read more...

Smart Responsive Design Patterns, Or When Off-Canvas Isn’t Good Enough

Design patterns often have a bad reputation. They are often considered to be quick, lazy, off-the-shelf solutions that are applied blindly without consideration of the context of a problem. Solutions such as the almighty off-canvas navigation, the floating label pattern or carousels for featured products are some of the prominent ones.

Smart Responsive Design Patterns, Or When Off-Canvas Isn't Good Enough

This article isn’t about these patterns, though. This article features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction. Please note that this article isn’t technical; it explores interesting UX patterns out in the wild, rather than code samples. Beware: You will not be able to unsee what you are about to see, and that’s probably a good thing.

Read more...

Responsive Font Size And Fluid Typography With vh And vw Units

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.

Fluid Typography

Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques.

Read more...

Quick Tips On Design Systems: Sell The Output, Not The Workflow

So how do you sell a design system to the client? How do you establish a shared commitment within the company to put a pattern library on the roadmap? As designers and developers, we often know and see the benefits of an overarching system that radiates consistency throughout the different experiences of a company. But sometimes it's seen as a very unpredictable investment, and the value isn't necessarily visible right away.

You can illustrate how fractured an organization is by printing out its different presences online and putting them on a large board. Credit: Dan Mall

In his article on Selling Design Systems, Dan Mall suggests to illustrate how fractured an organization is by printing out its different presences online and putting them on a large board as an example of all the wasted money and effort that goes into making sites from scratch, one-by-one, needlessly reinventing the wheel every time.

Read more...

↑ Back to top