Stephen Hay – Structured Content and Responsive Workflows

Sean Carmichael

February 20th, 2015


[ Transcript Available ]

Stephen Hay

Responsive web design’s combination of fluid grids and media queries has really changed the design and development process. It’s an elegant way to ensure that one set of code can display appropriately across devices. It is, however, a bit of a problem with large legacy products and waterfall strategies.

Having individual deliverables, getting signoff, and passing it down the line isn’t exactly efficient when dealing with responsive design. Working in photoshop results in the unwieldy task of providing a mockup for every breakpoint. If anything, such as a header size, needs to be changed, every comp needs to be changed, including the spacing of all the elements. This also leads to design or development issues being found much later in the process.

Stephen Hay has been designing with fluid grids since before the term “responsive web design” was coined. He’s seen that many of the problems stem from not putting a premium on the content and how it will be displayed. Too often organizations are starting with the visual design or interaction design and things start breaking once the content is introduced. When working as a solo practitioner, it is a very iterative process and a natural way to work. Though there are obstacles to introducing this way of working to a larger organization, it results in a workflow more suited for the responsive environment.

Stephen will be presenting one of 6 daylong workshops at UX Immersion Mobile, April 13-15 in Salt Lake City. For more information, visit

Recorded: January, 2015
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIETips: Rethinking Mobile Tutorials: Which Patterns Really Work?

Jared Spool

February 17th, 2015

In this week’s UIEtips, we offer an article from Theresa Neil and Rich Malley. In it they look at what mobile tutorial patterns work the best.

Here’s an excerpt from the article:

So, why don’t these patterns work? I turned to the field of game design for answers. Game designers have always known that you can’t drop new players into the middle of a firefight and expect them to enjoy the experience. Most players would be dead before figuring out how to fire their weapons and fight back.

Read the article: Rethinking Mobile Tutorials: Which Patterns Really Work?

What mobile tutorial patterns, do your users find most effective? Tell us about it below.

Dispel Your Fears of Responsive Design with Jason Grigsby

Lauren Cramer

February 13th, 2015

When Responsive Web Design Meets the Real World

Dive deep into media queries, image optimization, and multi-device design. See how fast and freeing mobile-first, responsive web design can be right now.

Responsive Design Allows for

Improving sluggish performance
Enhancing the communication of your design across devices
Delighting mobile audiences with more content and better user experiences
Luke Wroblewski

With Jason Grigsby’s help, you’ll collaborate to convert a fixed-width desktop design to a responsive layout. You’ll learn to find natural breakpoints, and test its performance. And there’s so much more you’ll learn in his full-day workshop Responsive Web Design Meets the Real World at the UX Immersion Mobile Conference in Salt Lake City.

In Jason’s workshop, you’ll learn to:

Use fluid layouts, media queries, and flexible images
Pick breakpoints by resizing your browser
Reorder CSS from a baseline experience to larger screens
Learn the new standards for responsive images and when to use them

Jason has built a renowned career championing mobile design. He co-founded Cloud Four, a mobile design and development agency, and founded Mobile Portland to educate and support Portland’s mobile community. He’s also the co-author of Head First Mobile Web.

Get the details on Jason’s workshop

Use this letter to tell your boss you need to be at the 2015 UX Immersion Mobile Conference

Lauren Cramer

February 12th, 2015

So you’ve explored the UX Immersion Mobile Conference in Salt Lake City, April 13-15, 2015 and realize that attending this conference will help move your mobile initiative forward. But how do you convince your boss? Use the below letter to provide an overview of the game-changing material you’ll get from the conference.


I found a conference that I’d really like to go to that will bring us to the next stage of our mobile UX journey. The UX Immersion Mobile Conference in Salt Lake City, April 13-15, 2015 is built around two daylong workshops and a day of talks that provide intensive, game-changing material. This conference will provide clear, concrete takeaways challenging how we think about and design for mobile.

I can choose from these workshops.

Responsive Web Design – Dive deep into media queries, image optimization, and multi-device design—dispel your fears of responsive design.

Designing for Native Apps – Use interaction design patterns and ambient data to create 5-star native apps that attract, convert, and retain customers.

Mapping the User Experience – Learn where customers connect with your product or service—and map a strong understanding of your customer’s journey.

Adaptive Design – Understand how browser types, accessibility, device compatibility and responsive or adaptive design can make a design less complicated

Responsive Interfaces Using Atomic Design – A soup-to-nuts exploration of the principles and processes of establishing and using pattern libraries to create future-friendly experiences.

Responsive Workflows – A content-driven, interactive design process that boosts collaboration, reduces confusion, and delivers instant feedback.

The middle day of the conference focuses on talks from all the presenters plus to keynotes so we can get a higher level overview on topics outside of the workshops we’re attending.

Cost Analysis

Conference Fee $1,475*
Hotel Cost (3 nights and tax) $520
Flight (average) $300 -$600
T ride to and from the airport $5 – $40
Food $100
Total $2,400 – $2,735

Use the promotion code UXIMBEN by March 12 and get $350 off the current registration fee.

I realize it’s time out of the office and places our projects on hold a few days. But I’ll bring back and happily share the information we need to move at a much quicker pace on the project and save weeks in the long run.

So what do you say? Can I register? Could we send the team?

Looking forward to going to the UXIM Mobile Conference.

UIETips:The Curse of a Mobile Strategy

Jared Spool

February 11th, 2015

In this week’s UIEtips, we offer an original article from me, Jared Spool. In it I look at the reasons to go with either a mobile–friendly web site or a native app. 

Here’s an excerpt from the article:

However the idea of a mobile strategy has always struck me as a bit odd. After all, an airline doesn’t usually have a kiosk strategy or a customer service desk strategy. The kiosk and customer service desk are also places where customers want to get boarding passes, change flight arrangements, learn the status of flights, and all the other things a mobile experience would provide. Yet there’s no “strategy” around those options for the customer.

Read the article: The Curse of a Mobile Strategy

What are you building to provide the best experience for your customer? Tell us about it below.

Lean UX for Enterprise, with Josh Seiden on Feb 19

Adam Churchill

February 5th, 2015

In Lean UX for Enterprise, Josh Seiden will show you that Lean UX does scale, and can be just as effective in larger organizations. Attend this seminar and be sure your work is making a difference.

  • Recognize when Lean UX can help
  • Set expectations and get started
  • Construct productive teams
  • Prepare for obstacles

Josh Seiden will show you how to apply Lean UX in organizations of any size. Save your team’s spot today.

Make Design Less Complicated Regardless of the Device

Lauren Cramer

February 4th, 2015

Adaptive Designs Across Devices

Progressive Enhancement, the heart of Adaptive Design, makes the life of a design less complicated. Aaron and Jenn will show you how to create a solid core and build out to craft amazing user experiences that work regardless of devices, capabilities, or deficiencies.

Adaptive Design Allows for

  • Better experiences in all browsers
  • Consistency with your content across all screen sizes
  • Identifying which pattern library is right for you and when to create your own

In Aaron and Jenn’s workshop, you’ll learn to:

  • Phase out device-focused thinking
  • Strategize with the content strategy team
  • Better inform development on implementation
  • Give form to user experiences with an interface experience map
Luke Wroblewski

If you’re trying to create a better web and you’re open to rethinking your approach to designing for any interface, then Aaron and Jenn’s full-day workshop Adaptive Designs Across Devices at the UX Immersion Mobile Conference in Salt Lake City has your name on it.

Aaron is a progressive enhancement evangelist, the founder of Easy Designs, and the author of Adaptive Web Design. Jenn is a standards-lovin’, independent, front-end developer based in Philadelphia.

Use promotion code UIEBLOG for $300 off the full conference price.

Get the details on Aaron and Jenn’s workshop

UIEtips: Why Lean UX

Jared Spool

February 4th, 2015

In this week’s UIEtips, we reprint an article from Jeff Gothelf and Josh Seiden. They show us why Lean UX is important

Here’s an excerpt from the article:

Lean UX is deeply collaborative and cross-functional, because we no longer have the luxury of working in isolation from the rest of the product team. We can’t continue to ask our teams to wait for us to figure it all out.

Read the article: “Why Lean UX”

How do you implement Lean UX? Tell us about it below

Jason Grigsby – Real World Responsive Web Design

Sean Carmichael

February 2nd, 2015


[ Transcript Available ]

Jason Grigsby

Media queries shape and form a web page to display on multiple screen sizes. That’s the core of responsive web design. Users can maintain the same level of experience that they get on the desktop even when they switch to a smaller device. The theory of responsive web design is great, but it’s not a silver bullet. When real world constraints and use cases arise it makes responsive design a bit trickier.

One of the biggest issues that arises is page weight. As Jason Grigsby has said, “we’ve remade the Internet in our own image, which, in the United States, is obese.” Having traditionally relied on the connectivity that ethernet on desktop computers provides, you could sneak by with these bulked up pages. Once you try to send these large pages through the tiny pipes to the tinier screens, page load becomes a major issue for mobile users.

Performance improvements can be made across the spectrum of design and development. The way responsive design is implemented fundamentally changes traditional design and development practices. Since you can’t comp or wireframe every breakpoint, it causes designers and developers to work more closely together. Even working in tandem in some instances to test and evaluate how the design will adapt as it’s resized.

Jason will be presenting one of 6 daylong workshops at UX Immersion Mobile, April 13-15 in Salt Lake City. For more information visit,

Recorded: January, 2015
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Read the rest of this entry »

UIETips: Some Thoughts on “Designing in the Browser”

Jared Spool

January 28th, 2015

In this week’s UIEtips, we print an article from Stephen Hay. He shows what “designing in the browser” really means and how he implements it.

Here’s an excerpt from the article:

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders. It’s not the only deliverable, but it’s the one that’s most important to show in the browser. Before that, I sketch. On paper. Other people I know who “design in the browser” actually use Photoshop. For sketching. But when we say “designing in the browser”, we mean the comp is in the browser.

Read the article: Some Thoughts on “Designing in the Browser

Do you design in the browser? Tell us about it below