Responsive Web Design articles

A Little Surprise Is Waiting For You Here.




 


 

Smashing Magazine is changing: a new design, a new layout, a new technical stack, a new printed magazine, a new Smashing Membership, and the same good ol’ obsession with quality content. Here’s a sneak preview of what’s coming up.

A Little Surprise Is Waiting For You Here — Meet The Next Smashing Magazine

Today marks an important milestone in Smashing Magazine’s life, and this very page is an early preview of what’s coming up next: many experiments, new challenges, but still a good ol’ obsession with quality content. A complete overhaul, both visually and technically, a fine new printed magazine, and a shiny new Smashing Membership, with nifty features and goodies for you, our lovely community. Curious? Well, fasten your seatbelt and browse around — it’s going to be quite a journey!

The post A Little Surprise Is Waiting For You Here. appeared first on Smashing Magazine.

World Wide Web, Not Wealthy Western Web (Part 1)




 


 

“There are more things in heaven and earth, Horatio, than are dreamt of in your philosophy,” said Shakespeare’s Hamlet, in the famous scene in which Hamlet teaches Horatio to be a web designer.

World Wide Web, Not Wealthy Western Web (Part 1)

Horatio, as every schoolchild knows, is a designer from Berlin (or sometimes London or Silicon Valley) who has a top-of-the-line MacBook, the latest iPhone and an unlimited data plan over the fastest, most reliable network. But, as Hamlet points out to him, this is not the experience of most of the world’s web visitors.

The post World Wide Web, Not Wealthy Western Web (Part 1) appeared first on Smashing Magazine.

Where Are The World’s Best Open Device Labs?




 


 

Every developer knows that just because a website looks like and does what it’s meant to on the latest iPhone, doesn’t mean it will work across every mobile device. In this article, we’ll highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.

Open device labs (ODLs) are a response to the myriad of operating systems, browsers and devices that litter our technical landscape. They offer developers a (usually) free space to go to test their web systems, websites and apps on a range of software and hardware. This premise forms the core of the OpenDeviceLab.com initiative, which is a community movement to help people locate the right ODL for the job and to drum up further support for these testing centers.

The post Where Are The World’s Best Open Device Labs? appeared first on Smashing Magazine.

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!

The post Automating Art Direction With The Responsive Image Breakpoints Generator appeared first on Smashing Magazine.

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.

The post Building Social: A Case Study On Progressive Enhancement appeared first on Smashing Magazine.

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.

The post Redesigning SGS’ Seven-Level Navigation System: A Case Study appeared first on Smashing Magazine.

Responsive Images In WordPress 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.

The post Responsive Images In WordPress With Art Direction appeared first on Smashing Magazine.

Top