Category: Mobile

This category features articles on best and emerging practices for responsive website design, Web apps and native apps. While the mobile Web is still in it’s infancy, we can learn from the experiences of professionals who are working on mobile every day. Curated by Derek Allard. Subscribe to the RSS-Feed.

Popular tags in this category:

Applying Participatory Design To Mobile Testing

People use their mobile devices everywhere: on the train, while waiting in line, sitting on the couch. As much as we aim to design our mobile apps and websites for contextual use, testing their usability in context can be challenging.

Applying Participatory Design To Mobile Testing

While getting out in the field for user testing is not always realistic, simulating much of that contextual experience in a lab is possible. One approach to mobile testing is participatory design.

Read more...

Prototyping For Better Products, Stronger Teams And Happier Clients

As mobile designers, we have a stark decision to make: do we spend time learning new tools and changing our design processes to create our own transitional interfaces, or are the tools that we've been using good enough? There's an old writing adage that advises writers, whenever possible, to “show, don't tell” when bringing characters to life. The goal is to reveal the story through the character’s experiences instead of the author’s.

Prototyping For Better Products, Stronger Teams And Happier Clients

When designing mobile products, we share a similar burden. Dammed up inside our heads are creative waterfalls of fresh interactions, transitions, and animations. But how are we supposed to communicate them to our teams, our developers? How do we get them out of our heads? Through a game of charades?

I’m guilty of that last one.

Read more...

Creating Clickthrough Prototypes With Blueprint

In a previous article, I discussed using POP to create sketch-based clickthrough prototypes in participatory design exercises. These prototypes capture well the flow and overall layout of early design alternatives.

Create Clickthrough Prototypes With Blueprint To Communicate Design Concepts

The same piece briefly mentioned another category of clickthrough prototypes: widget-based mockups that are designed on the target device and that expand on sketches by introducing user interface (UI) details and increased visual fidelity. These prototypes can be used to pitch ideas to clients, document interactions and even test usability. In this article, I will teach you how to use the iPad app Blueprint to put together such prototypes in the form of concept demos, which help to manage a client’s expectations when you are aligning your visions of a product.

Read more...

Testing Mobile: Emulators, Simulators And Remote Debugging

In the early days of mobile, debugging was quite a challenge. Sure, you could get ahold of a device and perform a quick visual assessment, but what would you do after discovering a bug?

Testing Mobile: Emulators, Simulators And Remote Debugging

With a distinct lack of debugging tools, developers turned to a variety of hacks. In general, these hacks were an attempt to recreate a given issue in a desktop browser and then debug with Chrome Developer Tools or a similar desktop toolkit. For instance, a developer might shrink the size of the desktop browser’s window to test a responsive website or alter the user agent to spoof a particular mobile device.

Read more...

Is Your Responsive Design Working? Google Analytics Will Tell You

Responsive web design has become the dominant method of developing and designing websites. It makes it easier to think “mobile first” and to create a website that is viewable on mobile devices. In the early days of responsive web design, creating breakpoints in CSS for particular screen sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, and then we tested and monitored those devices.

Is Your Responsive Design Working? Google Analytics Will Tell You

As responsive design has evolved, we now more often start with the content and then set breakpoints when the content “breaks.” This means that you might end up with quite a few content-centric breakpoints and no particular devices or form factors on which to test your website.

Read more...

What 22 Billion Newsletters Tell Us About Designing For Mobile Email

Do you know which platforms and email clients to focus on when creating an email newsletter for yourself or a client? Using the data from over 22 billion email subscribers, we determined what designers should prioritize, both this year and beyond.

What 22 Billion Newsletters Tell Us About Designing For Mobile Email

In this article, we’ll interpret the numbers from our “Email Marketing Trends” report to help designers like you make informed decisions about what works and what doesn’t in email newsletters.

Read more...

Targeting Mobile Users Through Google AdWords

“Know your audience” has stood as a fundamental marketing principle since long before the web. When advertising online, you need to take into account one of the most basic factors of the audience you are reaching: what devices they are using.

Targeting Mobile Users through Google Adwords

The most popular online advertising platform, in use by marketers of all sizes, is Google AdWords. Up until early 2013, AdWords allowed advertisers to set up separate campaigns to target mobile devices. Best practice generally entailed targeting mobile, desktop and sometimes tablet users in unique campaigns.

Read more...

Mobile Onboarding: A Beginner’s Guide

Nowadays, displaying onboarding screens to first-time users has become a common practice in mobile apps. The purpose of these onboarding screens — also referred to as walkthroughs — is to introduce the app and demonstrate what it does.

Mobile Onboarding: A Beginner’s Guide

Given that these are often the first set of screens with which users interact, they also set the users’ expectations of the app. Therefore, it is essential that those involved in creating the product — product managers, designers, developers — take the time to evaluate whether onboarding is necessary for the app and, if so, to determine the best way to implement it.

Read more...

Design Responsive Websites In The Browser With Webflow

This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. – Ed.

New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow and the recently released Macaw. Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.

Design Responsive Websites In The Browser With Webflow

This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.

Read more...

How Limitations Led To My Biggest App Store Success and Failure

Look at your calendar. If you’re anything like me, all you see are meetings, places to go, things to do, people to meet and not a lot of white space. Few people love their calendar. So, we set out to change that, and we learned a lot in the process.

How Limitations Led To My Biggest App Store Success and Failure

Our app is an iPhone app that flips your calendar upside down and lets you focus on the free time in your day, instead of all the busy time. The app itself has been around since 2011, but the story of how it came to be and what our team ultimately learned is one that I have been wanting to tell for quite some time. It’s the story of how limitations led to my biggest success in the App Store — and my biggest failure.

Read more...

↑ Back to top