Tag Archives: Responsive Design

Apple Watch Favors Text Version and Breaks Links

The next generation of responsive emails: make the text version easy to read on Apple Watches

 

From the article: “When Apple Watch detects remote or linked images in an email, the plain text version will be displayed–but only after a lengthy warning: “This message contains elements Apple Watch can’t display. You can read a text version below.” This message is reminiscent of the warning that Outlook displays before ALT text on images and takes up a full screen of Watch real estate before displaying the plain text part of the message.”

Read more from the source: litmus.com

The Web’s Grain – A View on Designing for the Web

Step back from web design, art, and visual beauty and journey with Frank Chimero to explore what makes responsive design so unique and powerful

 

Think about it. A web site must look good on many different screen sizes. A simple description of the web as a design medium:

“an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment”

Frank Chimero continues: “The size of what we’re making is unknown until we know what we’re putting there. So, it’s better to come up with an arrangement of elements and assign them to a size, rather than the other way around. We need to start drawing, then put the box around it.”

Read more from the source: frankchimero.com

9 basic principles of responsive web design

A cool illustration of responsive design using animations. A must see for product managers.

 

Sandijs Ruluks writes “Responsive web design is a great solution to our multi-screen problem, but getting into it from the print perspective is difficult. No fixed page size, no millimetres or inches, no physical constraints to fight against. Designing in pixels for Desktop and Mobile only is also the past, as more and more gadgets can open up a website. Therefore, let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it.”

Read more from the source: Design the open web

Everybody Scrolls.

Don’t worry about “the fold”. Research shows that 91% to 100% of users scroll, regardless of visual cues to encourage scrolling

 

From the article:

UX designers are divided about how essential above-the-fold placement – that is, positioning so that users can see content without scrolling down – really is. Chartbeat found that “66% of attention on a normal media page is spent below the fold.” In contrast, the Nielsen Norman Group showed that “users spend 80% of their time looking above the fold.”

We wanted to know how page design impacts these user behaviors and to what extent visual cues help users scroll below the fold.

We learned that participants almost always scrolled, regardless of how they are cued to do so – and that’s liberating. While it’s hard to make universal recommendations, we’d suggest that designers use the cue that works best in its context.

Designers should choose cues for scrolling based on the content, the business category and the overall design. Does the content feature block text, images or video? Is the site for ecommerce, editorial or news? How do visual cues integrate with existing design elements? All of these variables will affect the optimum placement and effectiveness of scrolling cues.

Read full article at HUGEINC

Viewport units: vw, vh, vmin, vmax

New CSS viewport units allow setting vertical height much simpler than using percentages

 

The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as mentioned earlier, or JavaScript.

Read more from the source: Web Design Weekly