UIEtips: Responsive Design for Apps

In this week’s UIEtips article, Jason Grigsby tackles the concept of responsive design for mobile apps. He looks at widgets for desktop and mobile and explores the idea if phones are really different platforms than tablets. When it comes to incorporating and understanding mobile first responsive design, Jason Grigsby is one of the UX superstars to turn to. That’s why we’ve asked him to do a full-day workshop at this year’s UX Immersion Mobile Conference, April 7-9 in Denver, CO. Here’s an excerpt from the article:  A few months ago I was tasked with finding a good solution for a client who wanted to move to responsive design, but had a web app that they needed to support as well. The question they asked is one that I’ve seen others argue about in the past: does responsive design make sense for apps? Read the article Responsive Design for Apps. How does your company decide which form factors to design for when developing a responsive app? Tell us about it...

Stephen Hay – Responsive Web Design Workflow

[ Transcript Available ] The web is no longer fixed width. Designs are more malleable than ever because of fluid grids, media queries, and everything else that comes with responsive web design. This makes using static photoshop comps as a deliverable unmanageable. Design workflows inevitably have to change and adapt as the way we design for the web evolves. In his virtual seminar, Responsive Web Design Workflow, Stephen Hay outlines how his workflow has changed in the face of new design processes. He believes that taking a content first approach is instrumental to working with fluid designs. This allows you to mold the design around the content instead of trying to fit the content into a fixed design. The audience had a bunch of great questions during the live seminar. Stephen joins Adam Churchill for this podcast to answer some of those questions. How do you represent graphic elements like images when designing in text? How do you translate content into semantic markup that isn’t in the vocabulary of markdown? What application do you use when designing in text? Is there any good use of lorem ipsum? Do you plan out how to display content, whether in tabs or accordions for example? What is typically the first thing presented to a client? What happens to the workflow with a increase of complexity? Do you show linear design in-browser or use a screenshot? Why should designers know how to code? Stephen also references this article by Karen McGrane in his podcast. Recorded: January, 2014 [ Subscribe to our podcast via ?This link will launch the iTunes application.] [ Subscribe with...

Brad Frost – Creating Responsive Interfaces

[ Transcript Available ] Brad is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Brad’s and 5 other workshops, visit uxim.co. Frameworks and design patterns are no strangers in the world of web design. As responsive web design becomes common practice, making sure these templates work across every imaginable screen and device is trickier. There have been attempts to break down page elements in separate modules, but you often never see it fully assembled. Brad Frost shares this frustration and introduces Atomic Design as a solution. Borrowing from the metaphor of atoms making up molecules, molecules making up organism and so forth, Brad thinks responsive design needs to be approached deeper than at the page level. Having these individual modules is great, but how do they all fit together? Designing in this way allows you to be more deliberate and systematic in your approach. Dividing an interface up creates the ability to stitch webpages together but in a way that builds from an atomic level and you can clearly see how you’ve arrived at the end product. This approach to responsive design, as Brad says, serves to solve problems in a very acute way. Recorded: January, 2014 [ Subscribe to our podcast via ?This link will launch the iTunes application.] [ Subscribe with other podcast applications.] Full Transcript. Jared Spool: Welcome to another episode of the SpoolCast. I’m so glad you’re joining us today, and I’m even happier that we have the amazing Brad Frost with us. Brad is a wonder-dude....

Jason Grigsby – Responsive Web Design with Mobile in Mind

[ Transcript Available ] Jason is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Jason’s and 5 other workshops, visit uxim.co. With the mobile web, specifically m dot sites increasingly becoming a thing of the past, responsive web design has become common practice. The ability for your site to display across screen sizes and devices, reduces development time and allows for one design to work anywhere. However, this shouldn’t signal a shift away from mobile-first thinking. Jason Grigsby, of Cloud Four, believes that there are considerations that responsive design alone doesn’t address. The total experience of your site is more than just what it looks like. Simply using media queries to optimize your site’s design for different page widths is not a viable solution. Page weights, image sizes, and network speeds all need to be factored into the equation. In Jason’s mind, performance is a key differentiator. He says that you can have a beautiful design or the perfect user experience, but if your performance is bad, people won’t use it. Sites that look good and work well on the desktop may feel slow and bloated on a mobile device. Starting with performance in mind and considering mobile-first avoids these problems early in the process. Recorded: December, 2013 [ Subscribe to our podcast via ?This link will launch the iTunes application.] [ Subscribe with other podcast applications.] Full Transcript. Jared Spool: Hello there. Welcome, everybody, to another episode of the SpoolCast. Today’s a great day, because I’ve got the fabulous Jason...

Nate Schutta – Coding Mobile Prototypes

[ Transcript Available ] Nate is joining us to teach one of the daylong workshops in Denver, CO April 7-9 as part of the UX Immersion Mobile Conference. For more information about Nate’s and the other 5 workshops, visit uxim.co. The “designer who can code” has been dubbed the elusive unicorn of the UX realm. But more important than being equally good at both skill sets is being able to communicate with the other side. If designers understand even a little bit about code it breaks down silos within the team. Greater communication leads to shared understanding. This collaborative environment allows for faster iteration and better design. Nate Schutta believes that prototyping in code helps solidify this communication. Being able to visualize and demonstrate your ideas not only provides for greater understanding, but a faster workflow. Even though this code won’t make it into the final product, it gets a representation of the final design in front of users and stakeholders. Prototyping in code isn’t as daunting as it may sound. Nate believes that making the transition from using HTML and CSS to exhibiting functionality in JavaScript and jQuery isn’t all that difficult. Even if you’re throwing something quick and dirty together in less-than-production-ready code, the important thing is to get that feedback early and iterate on the design. Recorded: December, 2013 [ Subscribe to our podcast via ?This link will launch the iTunes application.] [ Subscribe with other podcast applications.] Full Transcript. Jared Spool: Welcome everyone to another episode of the SpoolCast. This is Jared Spool, your host. And today I am talking with Nate Schutta who is...